function MainComponent() { const [sentenceLength, setSentenceLength] = React.useState("普通"); const [level, setLevel] = React.useState("中1"); const [theme, setTheme] = React.useState(""); const [generatedSentence, setGeneratedSentence] = React.useState(""); const [translation, setTranslation] = React.useState(""); const [loading, setLoading] = React.useState(false); const [result, setResult] = React.useState(""); const audioRef = React.useRef(null); const handleGenerate = async ()=>{ setLoading(true); const response = await fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `レベル: ${level}, 文の長さ: ${sentenceLength}, テーマ: ${theme}` } ] }) }); const data = await response.json(); const generatedSentence = data.choices[0].message.content; setGeneratedSentence(generatedSentence); setLoading(false); }; const handleTextToSpeech = async ()=>{ const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(generatedSentence)}`); const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); if (audioRef.current) { audioRef.current.src = audioUrl; audioRef.current.play(); } }; const handleCheckTranslation = async ()=>{ const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `英文: ${generatedSentence}, 翻訳: ${translation}` } ] }) }); const data = await response.json(); const isCorrect = data.choices[0].message.content.includes("正解"); setResult(isCorrect ? "正解" : "不正解"); if (isCorrect) { new Audio("https://arspark.jp/material/wp-content/uploads/2023/04/arsnd_00016_seikaion.mp3").play(); } else { new Audio("https://arspark.jp/material/wp-content/uploads/2023/04/arsnd_00017_fuseikai.mp3").play(); // Display correct translation feedback if (!isCorrect) { setResult(`不正解: ${data.choices[0].message.content.replace("正解の翻訳は、", "").trim()}`); } } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "英語の練習サイト"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "文の長さ:"), /*#__PURE__*/ React.createElement("select", { value: sentenceLength, onChange: (e)=>setSentenceLength(e.target.value), className: "border border-gray-400 rounded p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "短め", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "短め"), /*#__PURE__*/ React.createElement("option", { value: "普通", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "普通"), /*#__PURE__*/ React.createElement("option", { value: "長め", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "長め"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "レベル:"), /*#__PURE__*/ React.createElement("select", { value: level, onChange: (e)=>setLevel(e.target.value), className: "border border-gray-400 rounded p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, [ "中1", "中2", "中3", "高1", "高2", "高3", "大学1", "大学2", "大学3", "大学4", "それ以上" ].map((lvl)=>/*#__PURE__*/ React.createElement("option", { key: lvl, value: lvl, __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, lvl)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "テーマ:"), /*#__PURE__*/ React.createElement("input", { value: theme, onChange: (e)=>setTheme(e.target.value), className: "border border-gray-400 rounded p-2", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", disabled: loading, __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }, loading ? "生成中..." : "英文生成"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }), generatedSentence && /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, generatedSentence), /*#__PURE__*/ React.createElement("button", { onClick: handleTextToSpeech, className: "bg-gray-200 rounded-full p-2", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "日本語訳を入力して下さい: "), /*#__PURE__*/ React.createElement("input", { value: translation, onChange: (e)=>setTranslation(e.target.value), className: "border border-gray-400 rounded p-2 w-full", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleCheckTranslation, className: "bg-green-500 text-white font-bold py-2 px-4 rounded mt-2", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, "確認")), result && /*#__PURE__*/ React.createElement("p", { className: `mt-4 text-lg ${result === "正解" ? "text-red-500" : "text-black"}`, __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, result))); }