function MainComponent() { const [results, setResults] = React.useState([]); const [uploading, setUploading] = React.useState(false); const processImagePDF = async (file)=>{ const formData = new FormData(); formData.append("file", file); const response = await fetch('/integrations/stable-diffusion/', { method: 'POST', body: formData }); const data = await response.json(); return data.data[0]; // Assuming the API responds with a URL of the processed image }; const extractText = async (imageUrl)=>{ const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: imageUrl } ], system_prompt: 'Extract handwritten Japanese and alphanumeric characters from the image' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); return data.choices[0].message.content; }; const handleFileUpload = async (event)=>{ const file = event.target.files[0]; setUploading(true); try { const imageUrl = await processImagePDF(file); const extractedText = await extractText(imageUrl); setResults([ { text: extractedText, isRed: true } ]); } catch (error) { console.error("Error processing file:", error); setResults([ { text: "ファイルの処理中にエラーが発生しました。", isRed: false } ]); } setUploading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: (e)=>e.preventDefault(), className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "file-upload", className: "cursor-pointer bg-blue-500 text-white font-roboto p-2 rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "画像PDFファイルを選択", /*#__PURE__*/ React.createElement("input", { id: "file-upload", name: "file-upload", type: "file", accept: "application/pdf,image/png,image/jpeg", className: "hidden", onChange: handleFileUpload, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), uploading && /*#__PURE__*/ React.createElement("p", { className: "text-blue-500", __source: { fileName: "", lineNumber: 53, columnNumber: 25 }, __self: this }, "解析中..."))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white shadow-md rounded-lg font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "解析結果:"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, results.map((result, index)=>/*#__PURE__*/ React.createElement("p", { key: index, style: { color: result.isRed ? '#FF0000' : '#000000' }, __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, result.text))))); }