Spaces:

Pepguy
/

everyday_cats_html

Running

App Files Files Community

Pepguy commited on Oct 1, 2025

Commit

5e051aa

verified ·

1 Parent(s): e3293e2

Update index.html

Browse files

Files changed (1) hide show

index.html +928 -78

index.html CHANGED Viewed

@@ -1,78 +1,928 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-          <button id="clickme"> Stop </button>
-		</div>
-      <script type="module">
-  // Import the functions you need from the SDKs you need
-  import { initializeApp } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-app.js";
-  import { getAnalytics } from "https://www.gstatic.com/firebasejs/12.3.0/firebase-analytics.js";
-  // TODO: Add SDKs for Firebase products that you want to use
-  // https://firebase.google.com/docs/web/setup#available-libraries
-  // Your web app's Firebase configuration
-  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-  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"
-  };
-  // Initialize Firebase
-  const app = initializeApp(firebaseConfig);
-  const analytics = getAnalytics(app);
-// Initialize the Vertex AI Gemini API backend service
-// Set the location to `us-central1` (the flash-live model is only supported in that location)
-const ai = getAI(firebaseApp, { backend: new VertexAIBackend("us-central1") });
-// Create a `LiveGenerativeModel` instance with the flash-live model (only model that supports the Live API)
-const model = getLiveGenerativeModel(ai, {
-  model: "gemini-2.0-flash-live-preview-04-09",
-  // Configure the model to respond with audio
-  generationConfig: {
-    responseModalities: [ResponseModality.AUDIO],
-  },
-});
-const session = await model.connect();
-// Start the audio conversation
-const audioConversationController = await startAudioConversation(session);
-// ... Later, to stop the audio conversation
-// await audioConversationController.stop()
-// ... Later, to stop the audio conversation
-// await audioConversationController.stop()
-document.getElementById("clickme").onclick( async ()=> {
-  await audioConversationController.stop()
-})
-      </script>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<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: apiKey,
+                    projectId: projectId
+                };
+                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>