function MainComponent() { const [loading, setLoading] = React.useState(false); const [analysisResult, setAnalysisResult] = React.useState(''); const handleFormSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const imageFile = event.target.imageInput.files[0]; if (imageFile) { const reader = new FileReader(); reader.readAsDataURL(imageFile); reader.onload = async ()=>{ try { const visionResponse = await fetch('/integrations/gpt-vision/', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "image_url", image_url: { url: reader.result } } ] } ] }), headers: { 'Content-Type': 'application/json' } }); const visionData = await visionResponse.json(); const analysis = visionData.choices[0].message.content; setAnalysisResult(analysis); } catch (error) { setAnalysisResult('Error analyzing image. Please try again.'); } finally{ setLoading(false); } }; reader.onerror = ()=>{ setAnalysisResult('Error reading image file. Please try again.'); setLoading(false); }; } else { setLoading(false); setAnalysisResult('Please upload an image file.'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-white mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "LoLチャンピオンピックアシスタント"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#E2E2E2] mb-8", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "チームのバランスや各チャンピオンの役割を分析します")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#1D1D1D] p-8 rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "imageInput", className: "mb-4 text-sm font-medium text-[#E2E2E2]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "チャンピオンピック画面のスクリーンショットをアップロード"), /*#__PURE__*/ React.createElement("input", { name: "imageInput", type: "file", accept: "image/png, image/jpeg", className: "file:bg-[#F5F5F5] file:rounded-lg file:text-sm file:font-medium file:border-0 file:p-2 file:text-[#121212]", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-6 px-6 py-2 rounded-lg text-white bg-[#007BFF] hover:bg-[#0069D9] transition duration-200", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "分析する")), loading ? /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#E2E2E2] mt-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "分析中...") : /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#E2E2E2] mt-4 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, analysisResult)), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, ` button, input[type="file"]::file-selector-button { cursor: pointer; } `)); }