function MainComponent() { const [image, setImage] = React.useState(null); const [result, setResult] = React.useState(""); const handleFileChange = async (event)=>{ const file = event.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onloadend = async ()=>{ const base64String = reader.result; setImage(base64String); const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'text', text: '画像内のテキストを抽出してください' }, { type: 'image_url', image_url: { url: base64String } } ] } ] }) }); const data = await response.json(); setResult(data.choices[0].message.content); }; reader.readAsDataURL(file); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-arial", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, "写真からテキスト抽出"), /*#__PURE__*/ React.createElement("div", { id: "file-select-area", className: "w-full h-[100px] bg-[#f0f0f0] border-[1px] border-dashed border-[#d3d3d3] flex items-center justify-center cursor-pointer mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "flex items-center cursor-pointer", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/da82cf21-13c7-4118-bc1e-188a6c2cd12f/-/format/auto/", alt: "クリック可能なスタイリッシュなフォルダアイコン。ファイルダイアログを開くインタラクションを明確に示すデザイン。", className: "w-[50px] h-[50px] mr-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center font-arial", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "写真を選択してください")), /*#__PURE__*/ React.createElement("input", { type: "file", id: "file-upload", className: "hidden", name: "image", accept: "image/png, image/jpeg, image/webp, image/gif", onChange: handleFileChange, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "file-display-area", className: "w-full mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, image && /*#__PURE__*/ React.createElement("img", { id: "selected-image", src: image, alt: "ユーザーが選択した写真のサムネイル", className: "w-full h-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { id: "result-display-area", className: "w-full h-[500px] bg-white border-[1px] border-solid border-[#d3d3d3] p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { id: "extracted-text", className: "w-full h-full font-arial resize-none", value: result, onChange: (e)=>setResult(e.target.value), placeholder: "抽出されたテキストがここに表示され、編集可能です", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }))); }