function MainComponent() { const [question, setQuestion] = React.useState(''); const [conversation, setConversation] = React.useState([]); const [loading, setLoading] = React.useState(false); const generateConversation = async ()=>{ 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: `記者からの質問: ${question}\n\n以下の特徴に基づいて市長の回答を生成してください： - 市長は常に高圧的な会話をします。 - 質問への質問：直接的な回答を避け、質問自体に疑問を返す。 - コミュニケーションの困難さ：会話がスムーズに進まないため、相手を困惑させることが多い。 - 独特な論理展開：質問に対する直接的な回答を避け、独自の論理で切り返す。 - 結果として議題が何も解決しない。市長と記者の会話を5往復生成してください。` } ] } ] }) }); const data = await response.json(); const generatedConversation = data.choices[0].message.content.split('\n\n'); setConversation(generatedConversation); } catch (error) { console.error('Error generating conversation:', error); } setLoading(false); }; const shareOnTwitter = ()=>{ const text = conversation.join('\n\n'); const encodedText = encodeURIComponent(text); window.open(`https://twitter.com/intent/tweet?text=${encodedText}`, '_blank'); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-8 px-4 sm:px-6 lg:px-8 font-sans", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 text-gray-800", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "市長に質問メーカー"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-center mb-6 text-gray-600", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "～市長に社会問題を質問～"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "question", value: question, onChange: (e)=>setQuestion(e.target.value), placeholder: "市長への質問を入力してください", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: generateConversation, disabled: loading || !question, className: "w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, loading ? '生成中...' : '開始'), conversation.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "mb-4 text-gray-800", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, message))), conversation.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: shareOnTwitter, className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter mr-2", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }), " Xで共有")), /*#__PURE__*/ React.createElement("footer", { className: "mt-12 text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "石〇構文メーカー"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "（C）焼肉桜路２０２４"), /*#__PURE__*/ React.createElement("a", { href: "https://x.com/yakinikuouzi", target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "https://x.com/yakinikuouzi")))); }