Spaces:

yasserrmd
/

ggwave

Runtime error

App Files Files Community

yasserrmd commited on Feb 26, 2025

Commit

ca9b479

verified ·

1 Parent(s): 39d90db

Create conv.html

Browse files

Files changed (1) hide show

static/conv.html +686 -0

static/conv.html ADDED Viewed

	@@ -0,0 +1,686 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sound Chat Interface</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+    <style>
+        :root {
+            --primary: #5046e5;
+            --primary-dark: #3730a3;
+            --accent: #06b6d4;
+            --accent-light: #22d3ee;
+            --bg-color: #f8fafc;
+            --card-bg: #ffffff;
+            --dark-text: #0f172a;
+            --light-text: #f8fafc;
+            --message-bg-user: #7c3aed;
+            --message-bg-assistant: #e2e8f0;
+            --border-radius: 16px;
+        }
+        body {
+            background-color: var(--bg-color);
+            font-family: 'Inter', 'Segoe UI', sans-serif;
+            color: var(--dark-text);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .app-container {
+            max-width: 900px;
+            margin: 20px auto;
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            display: grid;
+            grid-template-rows: auto 1fr auto;
+            height: 85vh;
+            width: 100%;
+        }
+        .app-header {
+            padding: 24px;
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: var(--light-text);
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .app-header h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin: 0;
+        }
+        .app-title-icon {
+            font-size: 1.8rem;
+            display: flex;
+            align-items: center;
+            animation: pulse 2s infinite alternate;
+        }
+        .conversation-area {
+            padding: 20px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            background-color: var(--bg-color);
+            height: 100%;
+        }
+        .message-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            max-width: 85%;
+        }
+        .message-group.user {
+            align-self: flex-end;
+        }
+        .message {
+            padding: 16px;
+            border-radius: 18px;
+            position: relative;
+            line-height: 1.5;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            animation: fadeIn 0.3s ease-out;
+        }
+        .message.user {
+            background-color: var(--message-bg-user);
+            color: var(--light-text);
+            border-top-right-radius: 4px;
+        }
+        .message.assistant {
+            background-color: var(--message-bg-assistant);
+            color: var(--dark-text);
+            border-top-left-radius: 4px;
+        }
+        .message-avatar {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            margin-bottom: 6px;
+        }
+        .user .message-avatar {
+            background-color: var(--primary-dark);
+            color: var(--light-text);
+            align-self: flex-end;
+        }
+        .assistant .message-avatar {
+            background-color: var(--accent);
+            color: var(--light-text);
+        }
+        .controls-area {
+            padding: 24px;
+            background-color: white;
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .listen-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .listen-ball {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 16px rgba(80, 70, 229, 0.4);
+            position: relative;
+            overflow: hidden;
+        }
+        .listen-ball.listening {
+            background: linear-gradient(135deg, var(--accent), var(--accent-light));
+            animation: pulse 1.5s infinite;
+        }
+        .listen-ball.processing {
+            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+            animation: none;
+        }
+        .listen-ball i {
+            font-size: 2.5rem;
+        }
+        .sound-wave {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            opacity: 0;
+        }
+        .listening .sound-wave {
+            border: 2px solid rgba(255, 255, 255, 0.5);
+            animation: wave 2s infinite;
+        }
+        .status-badge {
+            background-color: rgba(0, 0, 0, 0.04);
+            border-radius: 50px;
+            padding: 8px 16px;
+            font-size: 0.9rem;
+            color: var(--dark-text);
+            margin-top: 16px;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-weight: 500;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+        .status-badge i {
+            font-size: 1rem;
+        }
+        .audio-controls {
+            display: none;
+        }
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            color: #94a3b8;
+            text-align: center;
+            padding: 20px;
+        }
+        .empty-state i {
+            font-size: 3.5rem;
+            margin-bottom: 20px;
+            color: #cbd5e1;
+        }
+        .empty-state h3 {
+            font-size: 1.3rem;
+            margin-bottom: 10px;
+            color: #64748b;
+        }
+        .time-stamp {
+            font-size: 0.75rem;
+            margin-top: 4px;
+            opacity: 0.7;
+            align-self: flex-end;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        @keyframes wave {
+            0% { transform: scale(1); opacity: 0.7; }
+            100% { transform: scale(1.5); opacity: 0; }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @media (max-width: 768px) {
+            .app-container {
+                margin: 0;
+                height: 100vh;
+                border-radius: 0;
+            }
+            .message-group {
+                max-width: 90%;
+            }
+            .listen-ball {
+                width: 80px;
+                height: 80px;
+            }
+            .listen-ball i {
+                font-size: 2rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid p-0">
+        <div class="app-container">
+            <div class="app-header">
+                <div class="app-title-icon">
+                    <i class="bi bi-soundwave"></i>
+                </div>
+                <h1>Sound Chat</h1>
+            </div>
+            <div class="conversation-area" id="conversationArea">
+                <div class="empty-state" id="emptyState">
+                    <i class="bi bi-ear"></i>
+                    <h3>No messages yet</h3>
+                    <p>Tap the sound button below to start listening and chatting.</p>
+                </div>
+                <!-- Messages will be added here dynamically -->
+            </div>
+            <div class="controls-area">
+                <div class="listen-container">
+                    <div class="listen-ball" id="listenBall">
+                        <div class="sound-wave"></div>
+                        <div class="sound-wave" style="animation-delay: 0.5s"></div>
+                        <div class="sound-wave" style="animation-delay: 1s"></div>
+                        <i class="bi bi-soundwave"></i>
+                    </div>
+                    <div class="status-badge" id="statusBadge">
+                        <i class="bi bi-info-circle"></i>
+                        <span id="statusMessage">Tap to listen for sound</span>
+                    </div>
+                </div>
+                <div class="audio-controls">
+                    <audio id="audioPlayer" controls></audio>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        // DOM Elements
+        const listenBall = document.getElementById("listenBall");
+        const statusMessage = document.getElementById("statusMessage");
+        const audioPlayer = document.getElementById("audioPlayer");
+        const conversationArea = document.getElementById("conversationArea");
+        const emptyState = document.getElementById("emptyState");
+        const statusBadge = document.getElementById("statusBadge");
+        // Global variables
+        let mediaRecorder;
+        let audioChunks = [];
+        let audioStream;
+        let chatHistory = [];
+        let isListening = false;
+        let isAutoListening = false;
+        let silenceDetectionInterval;
+        let lastAudioLevel = 0;
+        let currentUserGroup = null;
+        let currentAssistantGroup = null;
+        // Functions
+        function updateStatus(message, icon = "bi-info-circle") {
+            statusMessage.textContent = message;
+            statusBadge.querySelector("i").className = `bi ${icon}`;
+        }
+        function addMessageToChat(content, sender) {
+            // Hide empty state if it's visible
+            if (!emptyState.classList.contains("d-none")) {
+                emptyState.classList.add("d-none");
+            }
+            const now = new Date();
+            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            // Create new message group or use existing one based on sender
+            let messageGroup;
+            if (sender === 'user') {
+                if (!currentUserGroup || (currentAssistantGroup && currentAssistantGroup.classList.contains("assistant"))) {
+                    currentUserGroup = document.createElement("div");
+                    currentUserGroup.className = "message-group user";
+                    const avatar = document.createElement("div");
+                    avatar.className = "message-avatar";
+                    avatar.innerHTML = "<i class='bi bi-person'></i>";
+                    currentUserGroup.appendChild(avatar);
+                    conversationArea.appendChild(currentUserGroup);
+                }
+                messageGroup = currentUserGroup;
+                currentAssistantGroup = null;
+            } else {
+                if (!currentAssistantGroup || (currentUserGroup && currentUserGroup.classList.contains("user"))) {
+                    currentAssistantGroup = document.createElement("div");
+                    currentAssistantGroup.className = "message-group assistant";
+                    const avatar = document.createElement("div");
+                    avatar.className = "message-avatar";
+                    avatar.innerHTML = "<i class='bi bi-robot'></i>";
+                    currentAssistantGroup.appendChild(avatar);
+                    conversationArea.appendChild(currentAssistantGroup);
+                }
+                messageGroup = currentAssistantGroup;
+                currentUserGroup = null;
+            }
+            // Create message element
+            const messageDiv = document.createElement("div");
+            messageDiv.className = `message ${sender}`;
+            messageDiv.textContent = content;
+            const timestamp = document.createElement("div");
+            timestamp.className = "time-stamp";
+            timestamp.textContent = timeString;
+            messageGroup.appendChild(messageDiv);
+            messageGroup.appendChild(timestamp);
+            // Scroll to bottom
+            conversationArea.scrollTop = conversationArea.scrollHeight;
+            // Add to chat history
+            chatHistory.push({
+                role: sender === 'user' ? 'user' : 'assistant',
+                content: content
+            });
+        }
+        function startAnalyzingAudioLevels() {
+            if (!audioStream) return;
+            const audioContext = new AudioContext();
+            const source = audioContext.createMediaStreamSource(audioStream);
+            const analyzer = audioContext.createAnalyser();
+            analyzer.fftSize = 256;
+            source.connect(analyzer);
+            const bufferLength = analyzer.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            let silenceCounter = 0;
+            const SILENCE_THRESHOLD = 10;
+            const MAX_SILENCE_COUNT = 20; // About 2 seconds of silence
+            clearInterval(silenceDetectionInterval);
+            silenceDetectionInterval = setInterval(() => {
+                analyzer.getByteFrequencyData(dataArray);
+                // Calculate average audio level
+                let sum = 0;
+                for (let i = 0; i < bufferLength; i++) {
+                    sum += dataArray[i];
+                }
+                const avg = sum / bufferLength;
+                lastAudioLevel = avg;
+                // Detect significant sound and silence
+                if (avg > SILENCE_THRESHOLD) {
+                    silenceCounter = 0;
+                    if (!isListening && isAutoListening) {
+                        startListening();
+                    }
+                } else {
+                    silenceCounter++;
+                    if (silenceCounter >= MAX_SILENCE_COUNT && isListening) {
+                        stopListening();
+                    }
+                }
+            }, 100);
+        }
+        async function startListening() {
+            if (isListening) return;
+            try {
+                // Stop any existing stream tracks
+                if (audioStream) {
+                    audioStream.getTracks().forEach(track => track.stop());
+                }
+                audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
+                mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
+                mediaRecorder.onstop = async () => {
+                    if (audioChunks.length === 0) {
+                        updateState("idle");
+                        return;
+                    }
+                    updateState("processing");
+                    try {
+                        const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
+                        const wavBlob = await convertWebMToWav(audioBlob);
+                        // Create form data with the audio and chat history
+                        const formData = new FormData();
+                        formData.append("file", wavBlob, "recording.wav");
+                        formData.append("chat_history", JSON.stringify(chatHistory));
+                        // Send to the continuous-chat endpoint using root-relative path
+                        const response = await fetch("/continuous-chat/", {
+                            method: "POST",
+                            body: formData
+                        });
+                        if (response.ok) {
+                            const userMessage = response.headers.get("X-User-Message") || "No user message";
+                            const llmResponse = response.headers.get("X-LLM-Response") || "No response";
+                            // Add messages to chat
+                            addMessageToChat(userMessage, 'user');
+                            addMessageToChat(llmResponse, 'assistant');
+                            // Get audio response and play it
+                            const audioData = await response.blob();
+                            audioPlayer.src = URL.createObjectURL(audioData);
+                            audioPlayer.play();
+                            updateState("idle");
+                            updateStatus("Ready for next sound input", "bi-broadcast");
+                            // If in auto mode, start listening again
+                            if (isAutoListening) {
+                                setTimeout(() => {
+                                    startAnalyzingAudioLevels();
+                                }, 1000);
+                            }
+                        } else {
+                            updateState("idle");
+                            updateStatus("Error processing audio", "bi-exclamation-triangle");
+                        }
+                    } catch (error) {
+                        console.error("Error:", error);
+                        updateState("idle");
+                        updateStatus("Error processing audio", "bi-exclamation-triangle");
+                    }
+                };
+                audioChunks = [];
+                mediaRecorder.start();
+                updateState("listening");
+                updateStatus("Listening...", "bi-ear");
+                // Set max recording duration (8 seconds)
+                setTimeout(() => {
+                    if (mediaRecorder && mediaRecorder.state === "recording") {
+                        stopListening();
+                    }
+                }, 8000);
+                isListening = true;
+            } catch (error) {
+                console.error("Error accessing microphone:", error);
+                updateStatus("Microphone access denied", "bi-mic-mute");
+                updateState("idle");
+            }
+        }
+        function stopListening() {
+            if (!isListening) return;
+            if (mediaRecorder && mediaRecorder.state === "recording") {
+                mediaRecorder.stop();
+            }
+            isListening = false;
+        }
+        function updateState(state) {
+            listenBall.classList.remove("listening", "processing");
+            if (state === "listening") {
+                listenBall.classList.add("listening");
+                listenBall.innerHTML = `
+                    <div class="sound-wave"></div>
+                    <div class="sound-wave" style="animation-delay: 0.5s"></div>
+                    <div class="sound-wave" style="animation-delay: 1s"></div>
+                    <i class="bi bi-soundwave"></i>
+                `;
+            } else if (state === "processing") {
+                listenBall.classList.add("processing");
+                listenBall.innerHTML = `<i class="bi bi-arrow-repeat"></i>`;
+            } else {
+                listenBall.innerHTML = `<i class="bi bi-soundwave"></i>`;
+            }
+        }
+        function toggleContinuousListening() {
+            isAutoListening = !isAutoListening;
+            if (isAutoListening) {
+                updateStatus("Auto-listening mode active", "bi-broadcast");
+                startAnalyzingAudioLevels();
+            } else {
+                updateStatus("Tap to listen", "bi-info-circle");
+                clearInterval(silenceDetectionInterval);
+            }
+        }
+        async function convertWebMToWav(blob) {
+            return new Promise((resolve, reject) => {
+                try {
+                    const reader = new FileReader();
+                    reader.onload = function () {
+                        const audioContext = new AudioContext();
+                        audioContext.decodeAudioData(reader.result)
+                            .then(buffer => {
+                                const wavBuffer = audioBufferToWav(buffer);
+                                resolve(new Blob([wavBuffer], { type: "audio/wav" }));
+                            })
+                            .catch(error => {
+                                console.error("Error decoding audio data:", error);
+                                reject(error);
+                            });
+                    };
+                    reader.readAsArrayBuffer(blob);
+                } catch (error) {
+                    console.error("Error in convertWebMToWav:", error);
+                    reject(error);
+                }
+            });
+        }
+        function audioBufferToWav(buffer) {
+            let numOfChan = buffer.numberOfChannels,
+                length = buffer.length * numOfChan * 2 + 44,
+                bufferArray = new ArrayBuffer(length),
+                view = new DataView(bufferArray),
+                channels = [],
+                sampleRate = buffer.sampleRate,
+                offset = 0,
+                pos = 0;
+            setUint32(0x46464952); // "RIFF"
+            setUint32(length - 8);
+            setUint32(0x45564157); // "WAVE"
+            setUint32(0x20746d66); // "fmt " chunk
+            setUint32(16); // length = 16
+            setUint16(1); // PCM (uncompressed)
+            setUint16(numOfChan);
+            setUint32(sampleRate);
+            setUint32(sampleRate * 2 * numOfChan);
+            setUint16(numOfChan * 2);
+            setUint16(16); // bits per sample
+            setUint32(0x61746164); // "data" chunk
+            setUint32(length - pos - 4);
+            for (let i = 0; i < buffer.numberOfChannels; i++)
+                channels.push(buffer.getChannelData(i));
+            while (pos < length) {
+                for (let i = 0; i < numOfChan; i++) {
+                    let sample = Math.max(-1, Math.min(1, channels[i][offset]));
+                    sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+                    setUint16(sample);
+                }
+                offset++;
+            }
+            function setUint16(data) {
+                view.setUint16(pos, data, true);
+                pos += 2;
+            }
+            function setUint32(data) {
+                view.setUint32(pos, data, true);
+                pos += 4;
+            }
+            return bufferArray;
+        }
+        // Event Listeners
+        listenBall.addEventListener("click", () => {
+            if (isListening) {
+                stopListening();
+            } else if (isAutoListening) {
+                toggleContinuousListening();
+            } else {
+                startListening();
+            }
+        });
+        listenBall.addEventListener("dblclick", toggleContinuousListening);
+        audioPlayer.addEventListener("ended", () => {
+            if (isAutoListening) {
+                setTimeout(() => {
+                    startAnalyzingAudioLevels();
+                }, 500);
+            }
+        });
+        // Initialize
+        updateStatus("Tap to listen", "bi-info-circle");
+    </script>
+</body>
+</html>