function MainComponent() { const [response, setResponse] = React.useState(''); const [messages, setMessages] = React.useState([]); const [audioUrl, setAudioUrl] = React.useState(''); const [recording, setRecording] = React.useState(false); const [audioFile, setAudioFile] = React.useState(null); const [conversationId, setConversationId] = React.useState(''); const [userInput, setUserInput] = React.useState(''); const audioRef = React.useRef(null); const apiKey = 'app-x9gx2Cu4pX8rwVrA7SZmKhLr'; const handleStartRecording = async ()=>{ setRecording(true); const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); mediaRecorder.ondataavailable = (event)=>{ const file = new File([ event.data ], 'audio.webm', { type: 'audio/webm' }); setAudioFile(file); }; mediaRecorder.onstop = ()=>{ setRecording(false); }; audioRef.current = mediaRecorder; mediaRecorder.start(); }; const handleStopRecording = ()=>{ if (audioRef.current) { audioRef.current.stop(); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!audioFile && !userInput) return; const userText = userInput ? userInput : await getTranscribedText(); await sendMessageToApi(userText); }; const getTranscribedText = async ()=>{ const formData = new FormData(); formData.append('file', audioFile); formData.append('user', 'unique-user-id'); const response = await fetch('http://localhost/v1/audio-to-text', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}` }, body: formData }); const data = await response.json(); setMessages((prev)=>[ ...prev, { text: data.text, from: 'user' } ]); return data.text; }; const sendMessageToApi = async (text)=>{ setMessages((prev)=>[ ...prev, { text, from: 'user' } ]); const chatResponse = await fetch('http://localhost/v1/chat-messages', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ query: text, inputs: {}, response_mode: 'streaming', conversation_id: conversationId, user: 'unique-user-id' }) }); const reader = chatResponse.body.getReader(); const decoder = new TextDecoder(); let chunk; let answerBuffer = ''; while(!(chunk = await reader.read()).done){ const chunkData = decoder.decode(chunk.value); if (chunkData.includes('data:')) { const eventData = JSON.parse(chunkData.split('data: ')[1]); if (eventData.event === 'message') { answerBuffer += eventData.answer; setResponse(answerBuffer); setMessages((prev)=>[ ...prev, { text: answerBuffer, from: 'bot' } ]); speakText(answerBuffer); } if (eventData.event === 'message_end') { setConversationId(eventData.conversation_id); } } } }; const speakText = async (text)=>{ const audioResponse = await fetch('http://localhost/v1/text-to-audio', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ text, user: 'unique-user-id', streaming: false }) }); const audioBlob = await audioResponse.blob(); const audioUrl = URL.createObjectURL(audioBlob); setAudioUrl(audioUrl); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center font-sans p-4", __source: { fileName: "", lineNumber: 124, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, "音声入力サービス"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white shadow-md rounded px-8 py-6 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: `bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ${recording ? 'bg-red-500' : ''}`, type: "button", onClick: recording ? handleStopRecording : handleStartRecording, __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, recording ? '録音停止' : '録音開始')), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: userInput, onChange: (e)=>setUserInput(e.target.value), placeholder: "テキストを入力", className: "w-full px-3 py-2 border rounded", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "送信"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white shadow-md rounded px-8 py-6", __source: { fileName: "", lineNumber: 155, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "応答"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-700 text-base", id: "response", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `my-2 ${msg.from === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "inline-block bg-gray-200 rounded px-3 py-1", __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, msg.text)))), audioUrl && /*#__PURE__*/ React.createElement("audio", { src: audioUrl, controls: true, autoPlay: true, __source: { fileName: "", lineNumber: 164, columnNumber: 22 }, __self: this }))); }