function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [isJapanese, setIsJapanese] = React.useState(true); const handleSubmit = async (e)=>{ e.preventDefault(); if (!input.trim()) return; const newMessages = [ ...messages, { role: 'user', content: input } ]; setMessages(newMessages); setInput(''); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }); const data = await response.json(); const aiResponse = data.choices[0].message.content; setMessages([ ...newMessages, { role: 'assistant', content: aiResponse } ]); } catch (error) { console.error('Error:', error); } }; const handleTranslate = async ()=>{ if (messages.length === 0) return; const lastMessage = messages[messages.length - 1]; const textToTranslate = lastMessage.content; try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Translate the following ${isJapanese ? 'Japanese to English' : 'English to Japanese'}: "${textToTranslate}"` } ] }) }); const data = await response.json(); const translatedText = data.choices[0].message.content; setMessages([ ...messages, { role: 'assistant', content: translatedText } ]); setIsJapanese(!isJapanese); } catch (error) { console.error('Error:', error); } }; const handleTextToSpeech = async (text)=>{ try { 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(); } catch (error) { console.error('Error:', error); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#000000] text-[#39FF14] font-vt323 p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-[#000000] border-8 border-[#39FF14] rounded-[20px] overflow-hidden relative", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#39FF14] opacity-10 pointer-events-none", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center justify-between", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "R creative lab"), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, className: "px-4 py-2 bg-[#39FF14] text-[#000000] rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, isJapanese ? '英語に翻訳' : '日本語に翻訳')), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/3 mr-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/tv-person.png", alt: "80年代風のテレビに映る人物", className: "w-full rounded-lg", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-2/3 h-64 overflow-y-auto space-y-2 pr-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] p-2 rounded ${message.role === 'user' ? 'bg-[#39FF14] text-[#000000]' : 'bg-[#000000] border border-[#39FF14]'}`, __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, message.content, message.role === 'assistant' && /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTextToSpeech(message.content), className: "ml-2 text-xs underline", __source: { fileName: "", lineNumber: 87, columnNumber: 23 }, __self: this }, "読み上げ")))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), className: "flex-grow bg-[#000000] border border-[#39FF14] text-[#39FF14] p-2 rounded-l focus:outline-none", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#39FF14] text-[#000000] px-4 py-2 rounded-r", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "送信")))), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-sm opacity-50", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, "80年代コンピューター風チャットボット")); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 113, columnNumber: 1 }, __self: this }, ` @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); @keyframes scanline { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } .font-vt323 { font-family: 'VT323', monospace; } .bg-[#000000]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, rgba(57, 255, 20, 0.03), rgba(57, 255, 20, 0.03) 1px, transparent 1px, transparent 2px ); pointer-events: none; } .bg-[#000000]::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; background: linear-gradient( 180deg, rgba(57, 255, 20, 0.1) 0%, rgba(57, 255, 20, 0) 100% ); animation: scanline 10s linear infinite; pointer-events: none; } .rounded-[20px] { border-radius: 20px; } .rounded-[20px]::before { content: ""; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: radial-gradient( ellipse at center, rgba(57, 255, 20, 0.2) 0%, rgba(57, 255, 20, 0) 70% ); border-radius: 25px; z-index: -1; } `);