function MainComponent() { const [dragActive, setDragActive] = useState(false); const [loading, setLoading] = useState(false); const [extractedText, setExtractedText] = useState(""); const [upload, { loading: uploadLoading }] = useUpload(); const [error, setError] = useState(""); const handleDrag = useCallback((e)=>{ e.preventDefault(); e.stopPropagation(); if (e.type === "dragenter" || e.type === "dragover") { setDragActive(true); } else if (e.type === "dragleave") { setDragActive(false); } }, []); const processImageWithGPTVision = async (base64Image)=>{ try { const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: "Lütfen bu görseldeki tüm metni okuyup yazıya dök." }, { type: "image_url", image_url: { url: base64Image } } ] } ] }) }); const data = await response.json(); return data.choices[0].message.content; } catch (err) { throw new Error("Görsel işlenirken bir hata oluştu"); } }; const handleDrop = useCallback(async (e)=>{ e.preventDefault(); e.stopPropagation(); setDragActive(false); setLoading(true); setError(""); try { const file = e.dataTransfer.files[0]; if (file) { const { url } = await upload({ file }); const extractedContent = await processImageWithGPTVision(url); setExtractedText(extractedContent); } } catch (err) { setError(err.message); } finally{ setLoading(false); } }, [ upload ]); const copyToClipboard = useCallback(()=>{ navigator.clipboard.writeText(extractedText); }, [ extractedText ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-6 max-w-3xl mx-auto font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop, className: `w-full border-2 border-dashed rounded-lg p-6 md:p-10 text-center transition-colors ${dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-2xl md:text-4xl text-gray-400 mb-2 md:mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base text-gray-600", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Dosyanızı buraya sürükleyip bırakın")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-red-100 text-red-700 rounded text-sm md:text-base", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-6 text-center", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-xl md:text-2xl text-blue-500", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm md:text-base text-gray-600", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, "Görsel işleniyor...")), extractedText && /*#__PURE__*/ React.createElement("div", { className: "mt-4 md:mt-6 bg-gray-50 p-3 md:p-4 rounded-lg", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-base md:text-lg font-bold text-gray-700", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "Çıkarılan Metin"), /*#__PURE__*/ React.createElement("button", { onClick: copyToClipboard, className: "w-full sm:w-auto flex items-center justify-center gap-2 px-3 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 transition-colors text-sm md:text-base", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, "Kopyala"))), /*#__PURE__*/ React.createElement("p", { className: "text-sm md:text-base text-gray-600 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, extractedText))); }