function MainComponent() { const [prompt, setPrompt] = useState(""); const [generatedImages, setGeneratedImages] = useState([]); const [loading, setLoading] = useState(false); const translatePrompt = async (prompt)=>{ const translationResponses = await Promise.all(Array.from({ length: 5 }).map(()=>fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: "user", content: prompt } ], system_prompt: 'Translate to English' }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()))); const translations = translationResponses.map((res)=>res.choices[0].message.content); return translations.sort((a, b)=>a.localeCompare(b))[0]; }; const generateImage = async (translatedPrompt)=>{ const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(translatedPrompt)}`, { method: 'GET' }).then((response)=>response.json()); setGeneratedImages([ imageResponse.data[0] ]); setLoading(false); }; const handleGenerate = async ()=>{ setLoading(true); setGeneratedImages([]); const bestTranslation = await translatePrompt(prompt); await generateImage(bestTranslation); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#1a1a1a] text-[#e6e6e6] min-h-screen flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full p-4 flex justify-center border-b border-[#333]", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "歯ブラシジェネレーター")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "w-full max-w-[400px] p-2 bg-[#333] text-[#e6e6e6] border border-[#444] rounded", placeholder: "Enter a prompt in Japanese", name: "prompt", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "w-full max-w-[400px] mt-4 py-2 bg-[#005ae0] text-[#e6e6e6] rounded", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Generate Image"), loading && /*#__PURE__*/ React.createElement("p", { className: "mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 21 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { className: "mt-4 grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, generatedImages.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image, alt: `Generated from your prompt - ${index + 1}`, className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }))), generatedImages.length > 0 && /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "mt-4 py-2 px-4 bg-[#005ae0] text-[#e6e6e6] rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Regenerate Images"))); }