function MainComponent() { const [imageData, setImageData] = React.useState(null); const [orderDetails, setOrderDetails] = React.useState(null); const [emailContent, setEmailContent] = React.useState(null); const [loading, setLoading] = React.useState(false); const [taskCompleted, setTaskCompleted] = React.useState(false); const [showUploadScreen, setShowUploadScreen] = React.useState(false); const handleImageUpload = (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>{ setImageData(reader.result); analyzeImage(reader.result); }; reader.readAsDataURL(file); } }; const analyzeImage = async (base64Image)=>{ setLoading(true); 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: "この発注書の画像を分析し、注文番号、顧客名、注文した商品、数量、納期などの重要な詳細を抽出してください。情報を構造化された形式で提供してください。太字を使用せず、代わりに重要な情報を強調するために「」（かぎかっこ）を使用してください。" }, { type: "image_url", image_url: { url: base64Image } } ] } ] }) }); const data = await response.json(); const extractedDetails = data.choices[0].message.content; setOrderDetails(extractedDetails); generateEmail(extractedDetails); } catch (error) { console.error("画像分析エラー:", error); } finally{ setLoading(false); } }; const generateEmail = async (orderInfo)=>{ setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `以下の注文詳細に基づいて、この注文の処理について担当部署へ送信する専門的なメールを作成してください。メールには、注文番号、顧客名、注文した商品、数量、納期を含めてください。太字を使用せず、代わりに重要な情報を強調するために「」（かぎかっこ）を使用してください: ${orderInfo}` } ] }) }); const data = await response.json(); setEmailContent(data.choices[0].message.content); } catch (error) { console.error("メール生成エラー:", error); } finally{ setLoading(false); } }; const handleSendEmail = ()=>{ alert("メールが正常に送信されました！"); setTaskCompleted(true); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 min-h-screen p-4 md:p-8 font-sans", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 md:p-8", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl font-bold text-gray-800 mb-6", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "AI搭載発注処理システム"), !showUploadScreen && /*#__PURE__*/ React.createElement("div", { className: "cursor-pointer bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-6", role: "alert", onClick: ()=>setShowUploadScreen(true), __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "残り1件タスクがあります"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "クリックして発注書をアップロードしてください")), showUploadScreen && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "block text-lg font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "発注書画像をアップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "imageUpload", name: "imageUpload", accept: "image/*", onChange: handleImageUpload, className: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-3xl text-blue-500", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this })), imageData && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, "アップロードされた発注書"), /*#__PURE__*/ React.createElement("img", { src: imageData, alt: "アップロードされた発注書", className: "max-w-full h-auto rounded-md shadow-md", __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this })), orderDetails && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "抽出された発注詳細"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-md border border-gray-200 overflow-auto", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap text-sm md:text-base", __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }, orderDetails))), emailContent && /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl md:text-2xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, "生成されたメール"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-md border border-gray-200 overflow-auto", __source: { fileName: "", lineNumber: 150, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap text-sm md:text-base", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, emailContent)), /*#__PURE__*/ React.createElement("button", { onClick: handleSendEmail, className: "mt-4 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, "メールを送信")), taskCompleted && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg flex items-center", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot mr-2 text-2xl", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, "あなたのタスクはすべて完了しました！"))))); }

AI搭載 発注処理システム

AI搭載発注処理システム