function MainComponent() { const [imageBase64, setImageBase64] = React.useState(null); const [loading, setLoading] = React.useState(false); const [responseText, setResponseText] = React.useState(''); const handleImageUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = async ()=>{ const base64String = reader.result; setImageBase64(base64String); setLoading(true); try { const visionResponse = 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 visionData = await visionResponse.json(); const gptResponseText = visionData.choices[0].message.content; const chatGptResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: gptResponseText } ], system_prompt: 'Explain this content' }) }); const chatGptData = await chatGptResponse.json(); setResponseText(chatGptData.choices[0].message.content); } catch (error) { console.error('Error:', error); } setLoading(false); }; reader.readAsDataURL(file); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-800", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Tetris GPT Vision"), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[600px] bg-gray-700 border-4 border-gray-500", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute w-full h-full flex items-center justify-center text-white font-bold", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Upload an image to integrate with GPT Vision"))), /*#__PURE__*/ React.createElement("input", { type: "file", name: "imageUpload", accept: ".png,.jpeg,.jpg,.webp,.gif", className: "mt-4 p-2 bg-gray-600 text-white rounded", onChange: handleImageUpload, __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }), loading && /*#__PURE__*/ React.createElement("p", { className: "text-white mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Loading..."), responseText && /*#__PURE__*/ React.createElement("p", { className: "text-white mt-4", __source: { fileName: "", lineNumber: 72, columnNumber: 24 }, __self: this }, responseText), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-center w-full", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: "/path-to-tetris-game", className: "w-[300px] h-[600px] border-none", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }))); }