function MainComponent() { const [input, setInput] = React.useState(''); const [output, setOutput] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleChange = (e)=>{ setInput(e.target.value); }; const generateThread = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `#前提\nあなたは2chのクソスレを生成します\n#命令\nレス番号はTwitterで表示する20で終了してください。\nレス番や名前（名無しさん）、投稿日時は2024年、IDも書き、アンカーは全角で＞＞というふうに書くこと。タイトルもつけてください\nIDはランダムで表示数字もランダム表示昇順降順になった場合再出力。\n\` 題名は掲示板スレッドメーカーテーマは「${input}」題名：掲示板スレッドメーカー製作：焼肉桜路監修：清水ひろあき説明：スレッドのテーマを入力してください。\` ` } ] }) }); const data = await response.json(); setOutput(data.choices[0].message.content); setLoading(false); }; const shareOutput = ()=>{ if (navigator.share) { navigator.share({ title: 'Generated Thread', text: output }); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "掲示板スレッドメーカー"), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "製作：焼肉桜路"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "監修：清水ひろあき"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "説明：スレッドのテーマを入力してください。"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "theme", value: input, onChange: handleChange, className: "w-full max-w-md p-2 mb-4 border border-gray-300 rounded", placeholder: "テーマを入力", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateThread, className: "w-full max-w-md bg-blue-500 text-white p-2 rounded mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, loading ? '生成中...' : '作成'), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 border border-gray-300 rounded overflow-y-auto", style: { maxHeight: '400px' }, __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, output && /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 68, columnNumber: 20 }, __self: this }, output)), output && /*#__PURE__*/ React.createElement("button", { onClick: shareOutput, className: "w-full max-w-md bg-green-500 text-white p-2 rounded mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "共有"), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 text-gray-500", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, "©焼肉桜路2024")); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 83, columnNumber: 1 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } `);