function MainComponent() { const [generatedThread, setGeneratedThread] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); const formData = new FormData(e.target); const content = formData.get("content"); const integrations = [ "/integrations/chat-gpt/conversationgpt4", "/integrations/anthropic-claude/", "/integrations/anthropic-claude-haiku/", "/integrations/anthropic-claude-sonnet/", "/integrations/google-gemini/", "/integrations/groq/" ]; let data; for (const integration of integrations){ const controller = new AbortController(); const timeoutId = setTimeout(()=>controller.abort(), 60000); try { const response = await fetch(integration, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `#前提あなたは2chのクソスレを生成します。できる限り本物の2chのクソスレに近づけるよう努力してください。出力するのはスレタイと、本文のみで余計なものは出力しないでください #命令 - レス番号は"必ず、絶対に"20番目まで生成してください。 - レス番や名前（風吹けば名無し）、投稿日時、IDも"必ず、絶対に"書き、アンカーは全角で＞＞というふうに書くこと。 - 2chらしい口調、言葉遣いを使用すること。 - 内輪ネタ、定型文、AAなどを適宜織り交ぜること。 - 話が脱線したり、荒れたりするのも大切。時には議論が白熱したり、罵り合いになったりしても良い。 - 文体は簡潔で読みやすく、誤字脱字や言葉の省略もあえて入れること。 - 絵文字は使わず、顔文字を多用し、会話を盛り上げること。 - レスの内容は多岐に渡っていて良い。ネタレス、マジレス、釣りレス、誹謗中傷など、様々なレスがあると良い。 - 他のユーザーの発言を引用してレスするのも忘れずに。 - たまに唐突に話題が変わったり、新しいネタが投下されるのもクソスレの特徴。 - 必要に応じて、〜だよな、〜わかる、〜そうだね、など相づちを打つようなレスも入れると良い。 - クソスレならではの定番ネタ（例：〇〇だけど質問ある？、〇〇の思い出、〇〇にありがちなこと）も時々織り交ぜると雰囲気が出る。 - 全体を通して、不謹慎だったり下品だったりする内容も厭わないこと。 - スレタイは以下を参考に作成してください: 1. 短くインパクトのあるフレーズ例：「ワイ、今日も元気に会社をズル休み」 2. 話題の内容を端的に表現例：「【速報】新型iPhoneに重大欠陥が発覚」 3. 感情的または過激な表現例：「〇〇は絶対に許せない！！！」 4. 煽り気味な問いかけ例：「お前らに彼女ができない理由wwwwww」 5. ネタやjokesを含むユーモラスな表現例：「母ちゃんが作った卵焼き、ヤバすぎワロタ」 6. 略語や顔文字の多用例：「彼氏に振られたったｗｗｗorz」 7. 対象を指す言葉に「○○民」「○○勢」などを使用例：「スマホゲーム勢あるある！」 8. カッコ内に補足情報や小ネタを入れる例：「親知らず抜いてきた（痛すぎワロエナイ）」 9. 〜部ではない部活動シリーズ例：「ギター部ではない人生」 10. 懐古厨を釣る系例：「ポケモン金銀は神ゲー」` }, { role: "user", content: `以下の情報を元に、2ちゃんねる風のクソスレを生成してください。内容: ${content}` } ], system_prompt: `Explain this content` }), signal: controller.signal }); data = await response.json(); if (data.choices && data.choices[0].message.content) { break; } } catch (error) { if (error.name === "AbortError") { console.log("Request timed out"); } else { console.error("Error:", error); } } finally{ clearTimeout(timeoutId); } } if (data && data.choices && data.choices[0].message.content) { setGeneratedThread(data.choices[0].message.content); } else { setGeneratedThread("大変申し訳ございません。予想を上回る利用により現在制限がかかっております...時間を空けてお試しください。"); } setIsLoading(false); }; const threadTitle = generatedThread ? generatedThread.split('\n')[0] : ''; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-noto-sans", __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#F0E0D6] text-[#800000] p-6 mb-10", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, "2ちゃんねるクソスレジェネレーター")), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-8 rounded-lg shadow-lg mb-10", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-bold mb-2 text-lg", htmlFor: "content", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "作りたいスレッドの内容"), /*#__PURE__*/ React.createElement("textarea", { className: "border-2 border-gray-300 rounded-lg w-full py-3 px-4 h-48", id: "content", name: "content", __source: { fileName: "", lineNumber: 122, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-600 text-white font-bold text-lg py-3 px-8 rounded-lg shadow-md transition duration-300", type: "submit", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "クソスレを生成"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0E0D6] p-8 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, threadTitle && /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-[#800000]", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, threadTitle), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4 text-lg", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "aa-animation", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }, "　　　　　　　　　　　　　　　　　　　　　 ∧＿∧", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 138, columnNumber: 42 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　（　´∀｀）", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 139, columnNumber: 44 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　 /　　　　ヽ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 140, columnNumber: 44 }, __self: this }), "　　　　　　　　　　　　　　　　　　　ｌ　　　　　 l", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 141, columnNumber: 44 }, __self: this }), "　　　　　　　　　　　　　　　　　　　＼　　　／", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 142, columnNumber: 43 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　　＼＿／", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 143, columnNumber: 41 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　　　∧", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 144, columnNumber: 40 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　　/　ヽ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 145, columnNumber: 41 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　ｌ　　ｌ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 146, columnNumber: 42 }, __self: this }), "　　　　　　　　　　　　　　　　　　　　ヽ＿ノ", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 147, columnNumber: 40 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "loading-animation", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, "只今スレッドを必死に作成中...")) : /*#__PURE__*/ React.createElement("div", { id: "thread", className: "space-y-6 text-lg whitespace-pre-wrap", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }, generatedThread.split('\n').slice(1).join('\n')))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-center text-white text-lg p-6 mt-10", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, "© 2ちゃんねるクソスレジェネレーター 2023"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .aa-animation { animation: bounce 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .loading-animation { animation: blink 1s infinite; } `)); }