function MainComponent() { const [inputWord, setInputWord] = React.useState(''); const [responseData, setResponseData] = React.useState(''); const [loading, setLoading] = React.useState(false); const [showRawData, setShowRawData] = React.useState(false); const fetchHaikuContent = async ()=>{ if (!inputWord.trim()) return; setLoading(true); const query = `英単語"${inputWord}"について下記を回答して下さい。なお、回答は小学生year1からyear4が理解できる内容にしてください。英単語の意味を英語で答えて記載して下さい。頭に'- E1: 'をつけて下さい。その続きに意味のテキストを表示して下さい。意味が複数ある場合は'- E1: ', '- E2: ', '- E3: 'のように接頭語をつけて下さい。品詞も表示して下さい。品詞は(noun), (verb)のような形で表示して下さい。意味のテキストと品詞はまとめて[]の中に含めて下さい。英単語の意味を日本語のひらがなのみで答えて記載して下さい。頭に'- J1: 'をつけて下さい。その続きに意味のテキストを[]で囲んで表示して下さい。意味が複数ある場合は'- J1: ', '- J2: ', '- J3: 'のように接頭語をつけて下さい。意味が複数ある場合は、同じ番号の英語の意味と日本語の意味が同じ意味となるようにして下さい。英単語を使った例文を英語で合計10件答えて下さい。英語の意味を表すE1, E2と合わせて、頭に'- R1_E1: ', '- R2_E3: 'などをつけて下さい。J1, J2などを対象とする必要はありません。例文のテキストは[]で囲んで表示して下さい。複数の意味がある場合は、均等に選ばれるように考えて下さい。また、対象の英単語を強調表示する必要はありません。`; const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: query } ] }) }).then((res)=>res.json()); setResponseData(response.choices[0].message.content); setLoading(false); }; const handleInputChange = (event)=>{ setInputWord(event.target.value); }; const englishMeanings = responseData ? [ ...responseData.matchAll(/- E\d+:\s*\[(.*?)\]/gs) ].map((match, index)=>({ id: index + 1, text: match[1] })) : []; const japaneseMeanings = responseData ? [ ...responseData.matchAll(/- J\d+:\s*\[(.*?)\]/gs) ].map((match, index)=>({ id: index + 1, text: match[1] })) : []; const exampleSentences = responseData ? [ ...responseData.matchAll(/- R(\d+)_E(\d+):\s*\[(.*?)\]/gs) ].map((match)=>({ example: match[3], meaningNumber: match[2], exampleNumber: match[1] })) : []; const speakText = (text)=>{ const utterance = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(utterance); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 mt-8 w-full max-w-xl mx-auto p-4 rounded-lg shadow-lg bg-white", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { value: inputWord, onChange: handleInputChange, name: "wordInput", className: "p-2 border border-gray-300 rounded-md shadow-sm w-full", placeholder: "Enter an English word", disabled: loading, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: fetchHaikuContent, className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition disabled:bg-blue-300", disabled: loading, __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, loading ? 'Loading...' : 'Search'), englishMeanings.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-2 w-full", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "English Meaning"), englishMeanings.map(({ id, text })=>/*#__PURE__*/ React.createElement("div", { key: `english-meaning-${id}`, className: "flex", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 bg-[#F0F4F8] p-2 rounded shadow w-full", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, `${id}. ${text}`), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speakText(text), className: "ml-2 p-2 bg-green-500 text-white rounded-full hover:bg-green-600", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up", __source: { fileName: "", lineNumber: 51, columnNumber: 132 }, __self: this }))))), japaneseMeanings.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-2 w-full", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Japanese Meaning"), japaneseMeanings.map(({ id, text })=>/*#__PURE__*/ React.createElement("p", { key: `japanese-meaning-${id}`, className: "font-roboto text-gray-600 bg-[#F0F4F8] p-2 rounded shadow w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, `${id}. ${text}`))), exampleSentences.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 w-full", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Examples"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, exampleSentences.map(({ example, meaningNumber, exampleNumber })=>/*#__PURE__*/ React.createElement("li", { key: `example-${exampleNumber}_E${meaningNumber}`, className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-semibold font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, `(${meaningNumber}) Example ${exampleNumber}`), /*#__PURE__*/ React.createElement("div", { className: "flex-1 ml-2", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 bg-[#F0F4F8] p-2 rounded shadow", __source: { fileName: "", lineNumber: 73, columnNumber: 21 }, __self: this }, example), /*#__PURE__*/ React.createElement("button", { onClick: ()=>speakText(example), className: "mt-2 p-2 bg-green-500 text-white rounded-full hover:bg-green-600", __source: { fileName: "", lineNumber: 74, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up", __source: { fileName: "", lineNumber: 74, columnNumber: 141 }, __self: this })))))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 w-full text-center", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowRawData(!showRawData), className: "px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, showRawData ? 'Hide Raw Data' : 'Show Raw Data'), showRawData && /*#__PURE__*/ React.createElement("div", { className: "w-full p-2 text-xs font-roboto text-left text-gray-800 bg-white rounded shadow", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-gray-800", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Raw Data"), /*#__PURE__*/ React.createElement("pre", { __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, responseData)))); }