function MainComponent() { const [transcript, setTranscript] = React.useState(""); const [searchResults, setSearchResults] = React.useState([]); const handleSubmit = async (event)=>{ event.preventDefault(); const queryInput = event.target.elements.searchQuery; const query = queryInput.value; if (query) { const response = await fetch(`/integrations/google-search/search?q=${query}`, { method: 'GET', headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status === 'success') { setSearchResults(data.items); } } }; const handleTextToSpeech = async ()=>{ const response = await fetch('/integrations/text-to-speech/speech?text=こちらのURLのブログを音声に変換してください https://www.kikagaku.co.jp/kikagaku-blog/python-roadmap/.', { method: 'GET' }); const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); audio.play(); }; const handleSearchResultSpeech = async (text)=>{ const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(text)}`, { method: 'GET' }); const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); audio.play(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-gray-800 font-roboto mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Google検索＆グラフ生成サービス"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded shadow-md p-6 w-[400px]", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-gray-700 mb-2 font-roboto", htmlFor: "searchQuery", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "検索クエリを入力"), /*#__PURE__*/ React.createElement("input", { className: "mb-4 p-2 border border-gray-300 rounded", type: "text", name: "searchQuery", id: "searchQuery", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 font-roboto", type: "submit", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "検索")), searchResults.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500 underline font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-1 px-2 rounded hover:bg-green-700 ml-2", onClick: ()=>handleSearchResultSpeech(result.title), __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, "音声"))))), /*#__PURE__*/ React.createElement("button", { onClick: handleTextToSpeech, className: "bg-orange-500 text-white py-2 px-4 rounded hover:bg-orange-700 mt-4 font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "音声リクエスト"))); }