function MainComponent() { const [inputText, setInputText] = React.useState(''); const [translatedPrompt, setTranslatedPrompt] = React.useState(''); const [generatedImage, setGeneratedImage] = React.useState(''); const inputStyle = "border border-gray-200 p-2 w-full"; const buttonStyle = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"; const translationOutputStyle = "mt-4 p-2 text-sm text-gray-700"; const imageOutputStyle = "mt-4"; const handleTranslateAndGenerateImage = ()=>{ fetch('/integrations/anthropic-claude-haiku/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: inputText } ] }) }).then((response)=>response.json()).then((data)=>{ const prompt = data.choices[0].message.content; setTranslatedPrompt(prompt); return fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}`, { method: 'GET' }); }).then((response)=>response.json()).then((data)=>{ setGeneratedImage(data.data[0]); }); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f5f8fa] min-h-screen", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto max-w-xl p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-200 mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "旧ツイッター風デザイン")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "inputTweet", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "日本語入力:"), /*#__PURE__*/ React.createElement("textarea", { id: "inputTweet", className: inputStyle, name: "inputText", placeholder: "ここにテキストを入力してください", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: buttonStyle, onClick: handleTranslateAndGenerateImage, __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "変換して表示")), /*#__PURE__*/ React.createElement("div", { className: translationOutputStyle, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "英語プロンプト: ", translatedPrompt), /*#__PURE__*/ React.createElement("div", { className: imageOutputStyle, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "変換されたプロンプトから生成された画像", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this })))); }