Spaces:

Pepguy
/

everyday_cats_html

Running

App Files Files Community

Pepguy commited on Oct 1, 2025

Commit

3e1a9ed

verified ·

1 Parent(s): 3de17d8

Update index.html

Browse files

Files changed (1) hide show

index.html +74 -918

index.html CHANGED Viewed

@@ -3,932 +3,88 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Firebase Gemini Live API Chat</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 20px;
-        }
-        .container {
-            width: 100%;
-            max-width: 800px;
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            height: 90vh;
-            max-height: 700px;
-        }
-        .header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 20px;
-            text-align: center;
-        }
-        .header h1 {
-            font-size: 24px;
-            margin-bottom: 5px;
-        }
-        .status {
-            font-size: 14px;
-            opacity: 0.9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #ff4444;
-            animation: pulse 2s infinite;
-        }
-        .status-dot.connected {
-            background: #44ff44;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-        .config-panel {
-            background: #f8f9fa;
-            padding: 15px;
-            border-bottom: 1px solid #e0e0e0;
-        }
-        .config-row {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 10px;
-        }
-        .config-row input,
-        .config-row select,
-        .config-row button {
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            font-size: 14px;
-        }
-        .config-row input {
-            flex: 1;
-        }
-        .config-row button {
-            background: #667eea;
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-weight: 600;
-            transition: background 0.3s;
-        }
-        .config-row button:hover {
-            background: #5568d3;
-        }
-        .config-row button:disabled {
-            background: #ccc;
-            cursor: not-allowed;
-        }
-        .mode-toggle {
-            display: flex;
-            gap: 5px;
-        }
-        .mode-toggle button {
-            flex: 1;
-            padding: 8px;
-            border: 2px solid #667eea;
-            background: white;
-            color: #667eea;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 11px;
-            font-weight: 600;
-            transition: all 0.3s;
-        }
-        .mode-toggle button.active {
-            background: #667eea;
-            color: white;
-        }
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            background: #f8f9fa;
-        }
-        .message {
-            margin-bottom: 15px;
-            display: flex;
-            animation: slideIn 0.3s ease-out;
-        }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .message.user {
-            justify-content: flex-end;
-        }
-        .message-content {
-            max-width: 70%;
-            padding: 12px 16px;
-            border-radius: 18px;
-            word-wrap: break-word;
-        }
-        .message.user .message-content {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-bottom-right-radius: 4px;
-        }
-        .message.assistant .message-content {
-            background: white;
-            color: #333;
-            border-bottom-left-radius: 4px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-        }
-        .message.system .message-content {
-            background: #fff3cd;
-            color: #856404;
-            max-width: 100%;
-            text-align: center;
-            font-size: 13px;
-        }
-        .input-area {
-            padding: 20px;
-            background: white;
-            border-top: 1px solid #e0e0e0;
-        }
-        .input-row {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-        .input-row input {
-            flex: 1;
-            padding: 12px 16px;
-            border: 2px solid #e0e0e0;
-            border-radius: 25px;
-            font-size: 14px;
-            outline: none;
-            transition: border-color 0.3s;
-        }
-        .input-row input:focus {
-            border-color: #667eea;
-        }
-        .btn {
-            padding: 12px 24px;
-            border: none;
-            border-radius: 25px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-        }
-        .btn-primary:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
-        }
-        .btn-secondary {
-            background: #6c757d;
-            color: white;
-        }
-        .btn-secondary:hover:not(:disabled) {
-            background: #5a6268;
-        }
-        .btn-voice {
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            padding: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .btn-voice.recording {
-            background: #ff4444;
-            animation: recordPulse 1s infinite;
-        }
-        @keyframes recordPulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.1); }
-        }
-        .btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        .typing-indicator {
-            display: flex;
-            gap: 4px;
-            padding: 12px 16px;
-        }
-        .typing-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: #999;
-            animation: typing 1.4s infinite;
-        }
-        .typing-dot:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-        .typing-dot:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-        @keyframes typing {
-            0%, 60%, 100% {
-                transform: translateY(0);
-            }
-            30% {
-                transform: translateY(-10px);
-            }
-        }
-        .audio-visualizer {
-            display: flex;
-            gap: 3px;
-            align-items: center;
-            justify-content: center;
-            height: 30px;
-        }
-        .visualizer-bar {
-            width: 3px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 2px;
-            animation: visualize 0.5s ease-in-out infinite alternate;
-        }
-        .visualizer-bar:nth-child(1) { animation-delay: 0s; }
-        .visualizer-bar:nth-child(2) { animation-delay: 0.1s; }
-        .visualizer-bar:nth-child(3) { animation-delay: 0.2s; }
-        .visualizer-bar:nth-child(4) { animation-delay: 0.3s; }
-        .visualizer-bar:nth-child(5) { animation-delay: 0.2s; }
-        .visualizer-bar:nth-child(6) { animation-delay: 0.1s; }
-        @keyframes visualize {
-            0% { height: 5px; }
-            100% { height: 25px; }
-        }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <h1>🤖 Gemini Live Chat</h1>
-            <div class="status">
-                <div class="status-dot" id="statusDot"></div>
-                <span id="statusText">Disconnected</span>
-            </div>
-        </div>
-        <div class="config-panel">
-            <div class="config-row">
-                <input type="text" id="apiKey" placeholder="Enter your Firebase API Key" />
-                <input type="text" id="projectId" placeholder="Firebase Project ID" />
-                <button id="connectBtn" onclick="connect()">Connect</button>
-            </div>
-            <div class="config-row">
-                <select id="modelSelect">
-                    <option value="gemini-2.0-flash-live-preview-04-09">gemini-2.0-flash-live-preview-04-09</option>
-                    <option value="gemini-live-2.5-flash">gemini-live-2.5-flash</option>
-                </select>
-                <div class="mode-toggle">
-                    <button class="active" onclick="setMode('text')">Text → Text</button>
-                    <button onclick="setMode('audio-audio')">Audio → Audio</button>
-                    <button onclick="setMode('speech-audio')">Speech → Audio</button>
-                </div>
-            </div>
-        </div>
-        <div class="chat-messages" id="chatMessages">
-            <div class="message system">
-                <div class="message-content">
-                    👋 Welcome! Configure your Firebase credentials and click Connect to start chatting.
-                    <br><br>
-                    <strong>Modes:</strong><br>
-                    • Text → Text: Type and receive text<br>
-                    • Audio → Audio: TTS input, Gemini audio output<br>
-                    • Speech → Audio: Browser speech recognition, Gemini audio output
-                </div>
-            </div>
-        </div>
-        <div class="input-area">
-            <div class="input-row" id="textInputRow">
-                <input
-                    type="text"
-                    id="messageInput"
-                    placeholder="Type your message..."
-                    disabled
-                    onkeypress="if(event.key === 'Enter') sendMessage()"
-                />
-                <button class="btn btn-primary" id="sendBtn" onclick="sendMessage()" disabled>
-                    Send
-                </button>
-                <button class="btn btn-secondary" id="disconnectBtn" onclick="disconnect()" disabled>
-                    Disconnect
-                </button>
-            </div>
-            <div class="input-row" id="voiceInputRow" style="display: none;">
-                <button class="btn btn-voice btn-primary" id="voiceBtn" onclick="toggleVoiceInput()" disabled>
-                    🎤
-                </button>
-                <div id="audioVisualizer" style="display: none;">
-                    <div class="audio-visualizer">
-                        <div class="visualizer-bar"></div>
-                        <div class="visualizer-bar"></div>
-                        <div class="visualizer-bar"></div>
-                        <div class="visualizer-bar"></div>
-                        <div class="visualizer-bar"></div>
-                        <div class="visualizer-bar"></div>
-                    </div>
-                </div>
-                <button class="btn btn-secondary" id="disconnectBtn2" onclick="disconnect()" disabled>
-                    Disconnect
-                </button>
-            </div>
-        </div>
-    </div>
-    <script type="module">
-        import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
-        import { getAI, getLiveGenerativeModel } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-ai-logic.js';
-        import { VertexAIBackend } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-ai-logic.js';
-        let firebaseApp = null;
-        let session = null;
-        let currentMode = 'text';
-        let isReceiving = false;
-        let recognition = null;
-        let audioContext = null;
-        let isRecording = false;
-        let mediaRecorder = null;
-        let audioChunks = [];
-        // Make functions globally available
-        window.connect = connect;
-        window.disconnect = disconnect;
-        window.sendMessage = sendMessage;
-        window.setMode = setMode;
-        window.toggleVoiceInput = toggleVoiceInput;
-        const ResponseModality = {
-            TEXT: 'text',
-            AUDIO: 'audio'
-        };
-        // Initialize Web Speech API
-        if ('webkitSpeechRecognition' in window) {
-            recognition = new webkitSpeechRecognition();
-            recognition.continuous = false;
-            recognition.interimResults = false;
-            recognition.lang = 'en-US';
-            recognition.onresult = (event) => {
-                const transcript = event.results[0][0].transcript;
-                addMessage('user', transcript);
-                sendTextMessage(transcript);
-            };
-            recognition.onerror = (event) => {
-                console.error('Speech recognition error:', event.error);
-                addMessage('system', `❌ Speech recognition error: ${event.error}`);
-                stopRecording();
-            };
-            recognition.onend = () => {
-                stopRecording();
-            };
-        }
-        async function connect() {
-          /*  const apiKey = document.getElementById('apiKey').value.trim();
-            const projectId = document.getElementById('projectId').value.trim();
-            const modelName = document.getElementById('modelSelect').value;
-            if (!apiKey || !projectId) {
-                addMessage('system', 'Please enter both API Key and Project ID');
-                return;
-            }
-            */
-            try {
-                document.getElementById('connectBtn').disabled = true;
-                addMessage('system', 'Connecting to Firebase...');
-                const firebaseConfig = {
-                   apiKey: "AIzaSyB6EeMqhn5kvMEDYRzhtdokA9i0idKtUKo",
-  authDomain: "winternut-pay.firebaseapp.com",
-  projectId: "winternut-pay",
-  storageBucket: "winternut-pay.firebasestorage.app",
-  messagingSenderId: "564557307443",
-  appId: "1:564557307443:web:a1abf6b0db99ca79560d46",
-  measurementId: "G-K07BVBE7FW"
-                };
-                firebaseApp = initializeApp(firebaseConfig);
-                const ai = getAI(firebaseApp, {
-                    backend: new VertexAIBackend("us-central1")
-                });
-                const useAudio = currentMode !== 'text';
-                const model = getLiveGenerativeModel(ai, {
-                    model: modelName,
-                    generationConfig: {
-                        responseModalities: [useAudio ? ResponseModality.AUDIO : ResponseModality.TEXT],
-                    }
-                });
-                session = await model.connect();
-                updateStatus(true);
-                addMessage('system', `✅ Connected in ${currentMode} mode!`);
-                // Enable appropriate inputs
-                if (currentMode === 'text') {
-                    document.getElementById('messageInput').disabled = false;
-                    document.getElementById('sendBtn').disabled = false;
-                } else {
-                    document.getElementById('voiceBtn').disabled = false;
-                }
-                document.getElementById('disconnectBtn').disabled = false;
-                document.getElementById('disconnectBtn2').disabled = false;
-                document.getElementById('connectBtn').disabled = true;
-                // Initialize audio context for audio playback
-                if (useAudio) {
-                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                }
-                startReceiving();
-            } catch (error) {
-                console.error('Connection error:', error);
-                addMessage('system', `❌ Connection failed: ${error.message}`);
-                document.getElementById('connectBtn').disabled = false;
-            }
-        }
-        async function disconnect() {
-            if (session) {
-                try {
-                    await session.close();
-                } catch (e) {
-                    console.error('Error closing session:', e);
-                }
-                session = null;
-            }
-            if (audioContext) {
-                audioContext.close();
-                audioContext = null;
-            }
-            updateStatus(false);
-            addMessage('system', 'Disconnected from server');
-            document.getElementById('messageInput').disabled = true;
-            document.getElementById('sendBtn').disabled = true;
-            document.getElementById('voiceBtn').disabled = true;
-            document.getElementById('disconnectBtn').disabled = true;
-            document.getElementById('disconnectBtn2').disabled = true;
-            document.getElementById('connectBtn').disabled = false;
-        }
-        async function sendMessage() {
-            const input = document.getElementById('messageInput');
-            const message = input.value.trim();
-            if (!message || !session) return;
-            addMessage('user', message);
-            input.value = '';
-            await sendTextMessage(message);
-        }
-        async function sendTextMessage(text) {
-            showTypingIndicator();
-            try {
-                // For audio-audio mode, use TTS to convert text to audio
-                if (currentMode === 'audio-audio') {
-                    const audioData = await textToSpeech(text);
-                    await session.send([{
-                        inlineData: {
-                            data: audioData,
-                            mimeType: "audio/pcm"
-                        }
-                    }]);
-                } else {
-                    await session.send(text);
-                }
-            } catch (error) {
-                console.error('Send error:', error);
-                hideTypingIndicator();
-                addMessage('system', `❌ Error sending message: ${error.message}`);
-            }
-        }
-        async function textToSpeech(text) {
-            return new Promise((resolve, reject) => {
-                const utterance = new SpeechSynthesisUtterance(text);
-                // Create an audio context to capture the speech
-                const tempAudioContext = new AudioContext({ sampleRate: 16000 });
-                const destination = tempAudioContext.createMediaStreamDestination();
-                utterance.onend = () => {
-                    // This is a simplified version - in production, you'd need to
-                    // properly capture and convert the audio to PCM format
-                    const buffer = new ArrayBuffer(text.length * 32);
-                    const view = new Uint8Array(buffer);
-                    // Convert to base64
-                    const base64 = btoa(String.fromCharCode(...view));
-                    resolve(base64);
-                };
-                utterance.onerror = (error) => {
-                    reject(error);
-                };
-                speechSynthesis.speak(utterance);
-            });
-        }
-        function toggleVoiceInput() {
-            if (isRecording) {
-                stopRecording();
-            } else {
-                startRecording();
-            }
-        }
-        function startRecording() {
-            const voiceBtn = document.getElementById('voiceBtn');
-            const visualizer = document.getElementById('audioVisualizer');
-            if (currentMode === 'speech-audio') {
-                // Use browser speech recognition
-                if (recognition) {
-                    recognition.start();
-                    voiceBtn.classList.add('recording');
-                    voiceBtn.textContent = '⏹️';
-                    visualizer.style.display = 'block';
-                    isRecording = true;
-                    addMessage('system', '🎤 Listening...');
-                } else {
-                    addMessage('system', '❌ Speech recognition not supported in this browser');
-                }
-            } else if (currentMode === 'audio-audio') {
-                // Use microphone for audio recording
-                navigator.mediaDevices.getUserMedia({ audio: true })
-                    .then(stream => {
-                        mediaRecorder = new MediaRecorder(stream);
-                        audioChunks = [];
-                        mediaRecorder.ondataavailable = (event) => {
-                            audioChunks.push(event.data);
-                        };
-                        mediaRecorder.onstop = async () => {
-                            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
-                            await processAudioBlob(audioBlob);
-                            stream.getTracks().forEach(track => track.stop());
-                        };
-                        mediaRecorder.start();
-                        voiceBtn.classList.add('recording');
-                        voiceBtn.textContent = '⏹️';
-                        visualizer.style.display = 'block';
-                        isRecording = true;
-                        addMessage('system', '🎤 Recording audio...');
-                    })
-                    .catch(error => {
-                        console.error('Microphone error:', error);
-                        addMessage('system', '❌ Microphone access denied');
-                    });
-            }
-        }
-        function stopRecording() {
-            const voiceBtn = document.getElementById('voiceBtn');
-            const visualizer = document.getElementById('audioVisualizer');
-            if (currentMode === 'speech-audio' && recognition) {
-                recognition.stop();
-            } else if (currentMode === 'audio-audio' && mediaRecorder) {
-                mediaRecorder.stop();
-            }
-            voiceBtn.classList.remove('recording');
-            voiceBtn.textContent = '🎤';
-            visualizer.style.display = 'none';
-            isRecording = false;
-        }
-        async function processAudioBlob(blob) {
-            try {
-                const arrayBuffer = await blob.arrayBuffer();
-                const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-                // Convert to PCM 16-bit 16kHz
-                const pcmData = convertToPCM(audioBuffer);
-                const base64Data = arrayBufferToBase64(pcmData);
-                addMessage('user', '🎤 [Audio message]');
-                showTypingIndicator();
-                await session.send([{
-                    inlineData: {
-                        data: base64Data,
-                        mimeType: "audio/pcm"
-                    }
-                }]);
-            } catch (error) {
-                console.error('Audio processing error:', error);
-                addMessage('system', `❌ Error processing audio: ${error.message}`);
-            }
-        }
-        function convertToPCM(audioBuffer) {
-            const targetSampleRate = 16000;
-            const channelData = audioBuffer.getChannelData(0);
-            const samples = resampleAudio(channelData, audioBuffer.sampleRate, targetSampleRate);
-            const pcm = new Int16Array(samples.length);
-            for (let i = 0; i < samples.length; i++) {
-                const s = Math.max(-1, Math.min(1, samples[i]));
-                pcm[i] = s < 0 ? s * 0x8000 : s * 0x7FFF;
-            }
-            return pcm.buffer;
-        }
-        function resampleAudio(samples, fromRate, toRate) {
-            const ratio = fromRate / toRate;
-            const newLength = Math.round(samples.length / ratio);
-            const result = new Float32Array(newLength);
-            for (let i = 0; i < newLength; i++) {
-                const srcIndex = i * ratio;
-                const srcIndexFloor = Math.floor(srcIndex);
-                const srcIndexCeil = Math.min(srcIndexFloor + 1, samples.length - 1);
-                const t = srcIndex - srcIndexFloor;
-                result[i] = samples[srcIndexFloor] * (1 - t) + samples[srcIndexCeil] * t;
-            }
-            return result;
-        }
-        function arrayBufferToBase64(buffer) {
-            const bytes = new Uint8Array(buffer);
-            let binary = '';
-            for (let i = 0; i < bytes.byteLength; i++) {
-                binary += String.fromCharCode(bytes[i]);
-            }
-            return btoa(binary);
-        }
-        async function startReceiving() {
-            if (isReceiving || !session) return;
-            isReceiving = true;
-            let currentText = '';
-            let audioQueue = [];
-            try {
-                const messages = session.receive();
-                for await (const message of messages) {
-                    hideTypingIndicator();
-                    switch (message.type) {
-                        case 'serverContent':
-                            if (message.turnComplete) {
-                                if (currentText) {
-                                    addMessage('assistant', currentText);
-                                    currentText = '';
-                                }
-                                if (audioQueue.length > 0) {
-                                    await playAudioChunks(audioQueue);
-                                    audioQueue = [];
-                                }
-                            } else if (message.modelTurn) {
-                                const parts = message.modelTurn?.parts;
-                                if (parts) {
-                                    parts.forEach(part => {
-                                        if (part.text) {
-                                            currentText += part.text;
-                                        } else if (part.inlineData) {
-                                            audioQueue.push(part.inlineData.data);
-                                        }
-                                    });
-                                }
-                            }
-                            break;
-                        case 'toolCall':
-                            addMessage('system', '🔧 Model is calling a tool...');
-                            break;
-                        case 'toolCallCancellation':
-                            addMessage('system', '⚠️ Tool call was cancelled');
-                            break;
-                    }
-                }
-            } catch (error) {
-                console.error('Receive error:', error);
-                addMessage('system', `❌ Error receiving messages: ${error.message}`);
-            } finally {
-                isReceiving = false;
-            }
-        }
-        async function playAudioChunks(chunks) {
-            if (!audioContext || chunks.length === 0) return;
-            addMessage('assistant', '🔊 [Audio response]');
-            for (const base64Data of chunks) {
-                try {
-                    const binaryData = atob(base64Data);
-                    const arrayBuffer = new ArrayBuffer(binaryData.length);
-                    const view = new Uint8Array(arrayBuffer);
-                    for (let i = 0; i < binaryData.length; i++) {
-                        view[i] = binaryData.charCodeAt(i);
-                    }
-                    // Convert PCM to AudioBuffer
-                    const pcmData = new Int16Array(arrayBuffer);
-                    const floatData = new Float32Array(pcmData.length);
-                    for (let i = 0; i < pcmData.length; i++) {
-                        floatData[i] = pcmData[i] / 32768.0;
-                    }
-                    const audioBuffer = audioContext.createBuffer(1, floatData.length, 24000);
-                    audioBuffer.getChannelData(0).set(floatData);
-                    const source = audioContext.createBufferSource();
-                    source.buffer = audioBuffer;
-                    source.connect(audioContext.destination);
-                    await new Promise((resolve) => {
-                        source.onended = resolve;
-                        source.start();
-                    });
-                } catch (error) {
-                    console.error('Audio playback error:', error);
-                }
-            }
-        }
-        function setMode(mode) {
-            currentMode = mode;
-            const buttons = document.querySelectorAll('.mode-toggle button');
-            buttons.forEach(btn => {
-                btn.classList.remove('active');
-            });
-            event.target.classList.add('active');
-            // Show/hide appropriate input areas
-            const textInputRow = document.getElementById('textInputRow');
-            const voiceInputRow = document.getElementById('voiceInputRow');
-            if (mode === 'text') {
-                textInputRow.style.display = 'flex';
-                voiceInputRow.style.display = 'none';
-            } else {
-                textInputRow.style.display = 'none';
-                voiceInputRow.style.display = 'flex';
-            }
-            if (session) {
-                addMessage('system', `⚠️ Mode changed to ${mode}. Please disconnect and reconnect to apply changes.`);
-            }
-        }
-        function addMessage(type, content) {
-            const messagesDiv = document.getElementById('chatMessages');
-            const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${type}`;
-            const contentDiv = document.createElement('div');
-            contentDiv.className = 'message-content';
-            contentDiv.textContent = content;
-            messageDiv.appendChild(contentDiv);
-            messagesDiv.appendChild(messageDiv);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-        }
-        function showTypingIndicator() {
-            hideTypingIndicator();
-            const messagesDiv = document.getElementById('chatMessages');
-            const indicatorDiv = document.createElement('div');
-            indicatorDiv.className = 'message assistant';
-            indicatorDiv.id = 'typingIndicator';
-            const contentDiv = document.createElement('div');
-            contentDiv.className = 'message-content typing-indicator';
-            contentDiv.innerHTML = '<div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div>';
-            indicatorDiv.appendChild(contentDiv);
-            messagesDiv.appendChild(indicatorDiv);
-            messagesDiv.scrollTop = messagesDiv.scrollHeight;
-        }
-        function hideTypingIndicator() {
-            const indicator = document.getElementById('typingIndicator');
-            if (indicator) {
-                indicator.remove();
-            }
-        }
-        function updateStatus(connected) {
-            const statusDot = document.getElementById('statusDot');
-            const statusText = document.getElementById('statusText');
-            if (connected) {
-                statusDot.classList.add('connected');
-                statusText.textContent = 'Connected';
-            } else {
-                statusDot.classList.remove('connected');
-                statusText.textContent = 'Disconnected';
-            }
-        }
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini Audio Generator</title>
     <style>
+        body { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; }
+        h1 { text-align: center; }
+        textarea { width: 100%; height: 150px; margin-bottom: 10px; padding: 10px; box-sizing: border-box; }
+        button { display: block; width: 100%; padding: 10px; font-size: 16px; cursor: pointer; }
+        #audio-output { margin-top: 20px; text-align: center; }
+        #loading { display: none; text-align: center; margin-top: 10px; }
     </style>
 </head>
 <body>
+    <h1>Gemini TTS Web App</h1>
+    <p>Enter text below and click "Generate Audio" to hear it read aloud.</p>
+    <textarea id="text-input" placeholder="Enter your text here..."></textarea>
+    <button id="generate-button">Generate Audio</button>
+    <div id="loading">Generating audio...</div>
+    <div id="audio-output"></div>
+    <script type="module">
+import * as GoogleGenAI from 'https://cdn.jsdelivr.net/npm/@google/genai@1.21.0/+esm'
+// For development only: Replace with your Gemini API key
+// In a production environment, use a backend server to prevent exposing your key.
+const API_KEY = "AIzaSyDtmPxzbYrXtzt0AHQagk0Y-DG57jUnpk0";
+const ai = new GoogleGenAI({ apiKey: API_KEY });
+const textInput = document.getElementById("text-input");
+const generateButton = document.getElementById("generate-button");
+const audioOutputDiv = document.getElementById("audio-output");
+const loadingIndicator = document.getElementById("loading");
+generateButton.addEventListener("click", async () => {
+    const text = textInput.value;
+    if (!text) {
+        alert("Please enter some text.");
+        return;
+    }
+    loadingIndicator.style.display = "block";
+    generateButton.disabled = true;
+    audioOutputDiv.innerHTML = ""; // Clear previous audio
+    try {
+        // Use the gemini-2.5-flash-tts model for text-to-speech
+        const model = ai.getGenerativeModel({
+            model: "gemini-2.5-flash-tts"
+        });
+        // Generate audio from text
+        const response = await model.generateContent({
+            contents: [{ parts: [{ text: text }] }]
+        });
+        const audioResponse = response.audio;
+        const audioBlob = new Blob([audioResponse.data], { type: audioResponse.mimeType });
+        const audioUrl = URL.createObjectURL(audioBlob);
+        // Create and play an audio element
+        const audioElement = document.createElement("audio");
+        audioElement.controls = true;
+        audioElement.src = audioUrl;
+        audioOutputDiv.appendChild(audioElement);
+        audioElement.play();
+    } catch (error) {
+        console.error("Error generating audio:", error);
+        audioOutputDiv.innerHTML = `<p>Error: ${error.message}</p>`;
+    } finally {
+        loadingIndicator.style.display = "none";
+        generateButton.disabled = false;
+    }
+});
     </script>
 </body>
+</html>