Upload 3 files

app.py

@@ -0,0 +1,124 @@
+import os
+import time
+import uuid
+from flask import Flask, request, render_template, jsonify, send_from_directory, session
+from dotenv import load_dotenv
+from groq import Groq
+from deepgram import DeepgramClient, SpeakOptions
+
+# Load environment variables
+load_dotenv()
+
+# Set up the Groq client
+os.environ["GROQ_API_KEY"] = "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"
+client = Groq(api_key=os.environ["GROQ_API_KEY"])
+
+# Set up Deepgram client
+deepgram = DeepgramClient("f93a923d27690bf29e66d045d5143c7bee1c76e3")
+
+# Flask app
+app = Flask(__name__)
+app.secret_key = os.urandom(24)
+
+# Store conversation history
+conversation_history = []
+
+# Synthesize therapist response to speech
+def synthesize_audio(text, model="aura-asteria-en"):
+    try:
+        options = SpeakOptions(model=model)
+        audio_folder = "static/audio"
+        if not os.path.exists(audio_folder):
+            os.makedirs(audio_folder)
+
+        # Generate a unique filename using timestamp and UUID
+        unique_filename = f"therapist_response_{int(time.time())}_{uuid.uuid4().hex}.mp3"
+        filename = os.path.join(audio_folder, unique_filename)
+        
+        options = SpeakOptions(
+            model=model
+        )
+        # Synthesize the response and save it to the file
+        deepgram.speak.v("1").save(filename, {"text": text}, options)
+        return filename
+    except Exception as e:
+        raise ValueError(f"Speech synthesis failed: {str(e)}")
+
+@app.route('/final_audio/<path:filename>')
+def serve_audio(filename):
+    return send_from_directory('final_audio', filename)
+
+@app.route('/')
+def choose_voice():
+    return render_template('chose voice page.html')
+
+@app.route('/start-chat')
+def start_chat():
+    selected_voice = request.args.get('voice', 'aura-asteria-en')
+    session['selected_voice'] = selected_voice
+    return render_template('index.html')
+
+
+@app.route('/process', methods=['POST'])
+def process_audio():
+    global conversation_history
+
+    # Step 1: Accept audio input
+    audio_data = request.files.get('audio_data')  # Retrieve audio blob from client
+    if not audio_data:
+        return jsonify({'error': 'No audio file uploaded'}), 400
+
+    try:
+        # Step 2: Transcribe the audio using Groq Whisper
+        transcription = client.audio.transcriptions.create(
+            file=('recording.wav', audio_data.read()),
+            model="whisper-large-v3",
+            prompt="Transcribe the audio accurately.",
+            response_format="text"
+        )
+        user_input = transcription.strip()
+        if not user_input:
+            return jsonify({'error': 'No valid transcription from audio'}), 400
+
+        # Append user input to conversation history
+        conversation_history.append({"role": "user", "content": user_input})
+
+        # Step 3: Generate therapist response
+        fixed_prompt = [
+            {"role": "system", "content": """
+                You are an AI therapist named Virtual Therapist, designed to provide conversational support and mental health guidance in a clear, concise, and professional manner. Your responses should:
+                1. Be short and to the point.
+                2. Maintain a professional tone.
+                3. Encourage open dialogue.
+                4. Provide solutions or suggestions where appropriate.
+                5. Stay respectful and non-judgmental.
+                6. Avoid lengthy explanations.
+            """}
+        ]
+
+        conversation_history_with_prompt = fixed_prompt + conversation_history
+
+        response = client.chat.completions.create(
+            messages=conversation_history_with_prompt,
+            model="llama3-8b-8192"
+        )
+        assistant_reply = response.choices[0].message.content
+
+        # Append assistant reply to conversation history
+        conversation_history.append({"role": "assistant", "content": assistant_reply})
+
+        # Step 4: Synthesize therapist response to speech
+        audio_file = synthesize_audio(assistant_reply)
+        audio_url = f"{request.url_root}static/audio/{os.path.basename(audio_file)}"
+
+        return jsonify({
+            'transcription': user_input,
+            'response': assistant_reply,
+            'audioUrl': audio_url
+        })
+
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(debug=True)

templates/chose voice page.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Choose a Voice</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #1d1d1d;
+            color: white;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            overflow: hidden;
+        }
+        h1 {
+            font-size: 2rem;
+            color: #ffffff;
+            margin-bottom: 40px;
+        }
+        .voice-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 30px;
+        }
+        .voice-circle {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0.5));
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            color: #ffffff;
+            position: relative;
+            animation: float 5s infinite ease-in-out;
+        }
+        .voice-circle:before {
+            content: "";
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            bottom: -10px;
+            left: -10px;
+            background: radial-gradient(circle, rgba(255,255,255,0.2), transparent);
+            border-radius: 50%;
+            animation: rotate 10s infinite linear;
+        }
+        .voice-circle.playing:before {
+            animation: none;
+        }
+        .voice-circle.playing:after {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.3);
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
+            animation: pulse 1.5s infinite ease-out;
+        }
+        @keyframes pulse {
+            0% {
+                width: 0;
+                height: 0;
+                opacity: 0.5;
+            }
+            100% {
+                width: 350px;
+                height: 350px;
+                opacity: 0;
+            }
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        @keyframes rotate {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .voice-slider {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin-top: 20px;
+            color: #aaaaaa;
+        }
+        .voice-item {
+            text-align: center;
+            opacity: 0.3;
+            transition: opacity 0.3s;
+            flex: 1;
+            white-space: nowrap;
+        }
+        .voice-item.active {
+            opacity: 1;
+            color: white;
+        }
+        .voice-item strong {
+            display: inline;
+            font-size: 1.2rem;
+        }
+        .voice-item span {
+            display: inline;
+            margin-left: 10px;
+            font-size: 0.9rem;
+        }
+        .voice-slider button {
+            background: none;
+            border: none;
+            font-size: 2rem;
+            cursor: pointer;
+            color: #ffffff;
+            transition: color 0.3s;
+        }
+        .voice-slider button.disabled {
+            color: #555555;
+            cursor: default;
+        }
+        .voice-controls {
+            margin-top: 50px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 1rem;
+            border: none;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            font-weight: bold;
+        }
+        button:hover {
+            background-color: #3b3838;
+        }
+        .start-chat {
+            background-color: #ffffff;
+            color: #1d1d1d;
+            padding: 15px 40px;
+            border-radius: 50px;
+            font-size: 1rem;
+        }
+        .cancel {
+            background-color: #252323;
+            color: #ffffff;
+            padding: 15px 40px;
+            border-radius: 50px;
+            font-size: 1rem;
+        }
+        button:hover {
+            background-color: #3b3838;
+            color: rgb(255, 255, 255);
+        }
+    </style>
+</head>
+<body>
+    <h1>Choose a Voice</h1>
+    <div class="voice-container">
+        <div class="voice-circle" id="voice-circle">
+            <div id="voice-description" style="font-size: 1.rem; color: #ffffff;"></div>
+        </div>
+        <div class="voice-slider">
+            <div class="voice-item" id="prev-voice"></div>
+            <button id="prev-button" onclick="prevVoice()">&#8249;</button>
+            <div class="voice-item active" id="current-voice"></div>
+            <button id="next-button" onclick="nextVoice()">&#8250;</button>
+            <div class="voice-item" id="next-voice"></div>
+        </div>
+    </div>
+    <div class="voice-controls">
+        <button class="start-chat" onclick="startChat()">Start new chat</button>
+        <button class="cancel" onclick="cancel()">Cancel</button>
+    </div>
+
+    <script>
+        const voices = [
+            { id: "aura-luna-en",    displayName: "Luna",    description: "English (US) - Female", file: "Luna - English (US) - Female.wav" },
+            { id: "aura-athena-en",  displayName: "Athena",  description: "English (UK) - Female", file: "Athena - English (UK) - Female.wav" },
+            { id: "aura-angus-en",   displayName: "Angus",   description: "English (Ireland) - Male", file: "Angus - English (Ireland) - Male.wav" },
+            { id: "aura-stella-en",  displayName: "Stella",  description: "English (US) - Female", file: "Stella - English (US) - Female.wav" },
+            { id: "aura-zeus-en",    displayName: "Zeus",    description: "English (US) - Male",   file: "Zeus - English (US) - Male.wav" },
+            { id: "aura-orion-en",   displayName: "Orion",   description: "English (US) - Male",   file: "Orion - English (US) - Male.mp3" },
+            { id: "aura-hera-en",    displayName: "Hera",    description: "English (US) - Female", file: "Hera - English  (US) - Female.wav" },
+            { id: "aura-arcas-en",   displayName: "Arcas",   description: "English (US) - Male",   file: "Arcas - English (US) - Male.mp3" },
+            { id: "aura-perseus-en", displayName: "Perseus", description: "English (US) - Male",   file: "Perseus - English (US) - Male.wav" },
+            { id: "aura-helios-en",  displayName: "Helios",  description: "English (UK) - Male",   file: "Helios - English (UK) - Male.wav" },
+            { id: "aura-orpheus-en", displayName: "Orpheus", description: "English (US) - Male",   file: "Orpheus - English (US) - Male.wav" }
+        ];
+    
+
+        let currentVoiceIndex = 5;
+        let audioElement = new Audio();
+        let playTimeout = null;
+
+        function updateVoiceDisplay() {
+        const prevVoice = document.getElementById("prev-voice");
+        const currentVoice = document.getElementById("current-voice");
+        const nextVoice = document.getElementById("next-voice");
+        const voiceDescription = document.getElementById("voice-description");
+        const prevButton = document.getElementById("prev-button");
+        const nextButton = document.getElementById("next-button");
+
+        if (currentVoiceIndex > 0) {
+            prevVoice.innerHTML = `<strong>${voices[currentVoiceIndex - 1].displayName}</strong><br><span>${voices[currentVoiceIndex - 1].description}</span>`;
+            prevVoice.style.opacity = "0.3";
+        } else {
+            prevVoice.innerHTML = "";
+            prevVoice.style.opacity = "0";
+        }
+
+        currentVoice.innerHTML = `<strong>${voices[currentVoiceIndex].displayName}</strong><br><span>${voices[currentVoiceIndex].description}</span>`;
+        currentVoice.classList.add("active");
+
+        if (currentVoiceIndex < voices.length - 1) {
+            nextVoice.innerHTML = `<strong>${voices[currentVoiceIndex + 1].displayName}</strong><br><span>${voices[currentVoiceIndex + 1].description}</span>`;
+            nextVoice.style.opacity = "0.3";
+        } else {
+            nextVoice.innerHTML = "";
+            nextVoice.style.opacity = "0";
+        }
+
+        const descParts = voices[currentVoiceIndex].description.split('-');
+        const gender = descParts[descParts.length - 1].trim();
+        voiceDescription.textContent = gender;
+
+        prevButton.classList.toggle("disabled", currentVoiceIndex === 0);
+        nextButton.classList.toggle("disabled", currentVoiceIndex === voices.length - 1);
+
+        // Schedule audio playback for the current voice after 1-2 seconds
+        setTimeout(playSelectedVoiceAudio, 1500);
+    }
+
+
+        function prevVoice() {
+            if (currentVoiceIndex > 0) {
+                currentVoiceIndex--;
+                updateVoiceDisplay();
+            }
+        }
+
+        function nextVoice() {
+            if (currentVoiceIndex < voices.length - 1) {
+                currentVoiceIndex++;
+                updateVoiceDisplay();
+            }
+        }
+
+        function startChat() {
+            const voice = voices[currentVoiceIndex].id; 
+            window.location.href = '/start-chat?voice=' + encodeURIComponent(voice);
+        }
+
+        function cancel() {
+            alert("Chat canceled");
+        }
+
+        function scheduleAudioPlayback() {
+            if (playTimeout) {
+                clearTimeout(playTimeout);
+            }
+
+            audioElement.pause();
+            audioElement.currentTime = 0;
+
+            playTimeout = setTimeout(playSelectedVoiceAudio, 1000);
+        }
+
+        function playSelectedVoiceAudio() {
+            const voiceCircle = document.getElementById("voice-circle");
+            const voice = voices[currentVoiceIndex];
+            audioElement.src = `../final_audio/${voice.file}`;
+            voiceCircle.classList.add("playing");
+            audioElement.play().catch(err => {
+                console.error("Audio playback failed:", err);
+            });
+
+            audioElement.onended = () => {
+                voiceCircle.classList.remove("playing");
+            };
+        }
+
+        updateVoiceDisplay();
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,514 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Virtual Therapist</title>
+
+    <style>
+        /* ----- Styles from index.html ----- */
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #1d1d1d;
+            color: white;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            overflow: hidden;
+            padding: 0 20px; /* Ensure text is centered with proper spacing */
+        }
+        h1 {
+            font-size: 2rem;
+            color: #ffffff;
+            margin-bottom: 40px;
+        }
+        h6 {
+            font-size: 0.7rem;
+            color: #ffffff;
+            margin-bottom: 90px;
+        }
+        .circle-container {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0.5));
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.5rem;
+            color: #ffffff;
+            position: relative;
+            animation: float 5s infinite ease-in-out;
+            cursor: pointer;
+        }
+        .circle-container.disabled {
+            pointer-events: none; /* Disable clicks */
+            animation: none; /* Stop floating animation */
+        }
+        .circle-container:before {
+            content: "";
+            position: absolute;
+            top: -10px;
+            right: -10px;
+            bottom: -10px;
+            left: -10px;
+            background: radial-gradient(circle, rgba(255,255,255,0.2), transparent);
+            border-radius: 50%;
+            animation: rotate 10s infinite linear;
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-20px);
+            }
+        }
+        @keyframes rotate {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+        .status-text {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 1.2rem;
+            color: #ffffff;
+        }
+        .status-text .emoji {
+            font-size: 2rem;
+            margin-bottom: 5px;
+        }
+        /* Response container styles for multi-line text */
+        .response-container {
+            margin-top: 20px;
+            font-family: 'Anonymous Pro', monospace;
+            font-size: 0.9rem;
+            color: #ffffff;
+            text-align: center;
+            white-space: normal;
+            overflow: hidden;
+            width: 80%;
+            max-width: 600px; /* Limit the width of the text block */
+            line-height: 1.5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .response-line {
+            opacity: 0;
+            animation: fadeIn 1s ease forwards;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+    </style>
+
+    <!-- Additional code from buttons.html -->
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <style>
+        /* ----- Styles from buttons.html (exactly as provided) ----- */
+        body {
+            background-color: #222;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 90vh;
+            margin: 109;
+            padding-bottom: 40px;
+            position: relative;
+        }
+        .button-container {
+            position: absolute;
+            bottom: 50px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: row;
+            gap: 20px; /* Space between buttons */
+            align-items: center;
+            justify-content: center;
+        }
+
+        .button {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border: 2px solid #fff;
+            position: relative;
+            transition: background-color 0.3s ease, transform 0.2s ease;
+        }
+        .button:hover {
+            transform: scale(1.1);
+        }
+        .mute-button:hover {
+            background-color: #ffffff; /* Default background color for mute button */
+        }
+        .mute-button {
+            background-color: #333; /* Default background color for mute button */
+        }
+        .close-button {
+            background-color: #333; /* Default background color for close button */
+        }
+        .close-button:hover {
+            background-color: #fff; /* Close button turns white on hover */
+        }
+        .close-button:hover .mute-icon {
+            color: #000; /* Icon color turns black on hover */
+        }
+        .close-button:hover::after {
+            font-size: 12px;
+            font-style: bold;
+            position: absolute;
+            color: #000000;
+        }
+        .button:hover .mute-icon {
+            color: black; /* Icon color changes to black on hover */
+        }
+        .mute-icon {
+            font-size: 36px;
+            color: white;
+        }
+        .muted {
+            background-color: #ff0000; /* Light red background when muted */
+        }
+        .unmuted {
+            background-color: #333; /* Default background when unmuted */
+        }
+        .muted .mute-icon {
+            color: black; /* Black mic icon when muted with a line */
+            text-decoration: line-through;
+        }
+        .muted .button {
+            background-color: lightcoral; /* Background turns light red when muted */
+        }
+        .mute-text {
+            display: none; /* Mute text is hidden by default */
+        }
+        .button:hover .mute-text {
+            display: block; /* Mute User text is visible on hover */
+            font-size: 13px;
+            font-weight: bold;
+            white-space: nowrap;
+            color: white;
+            position: absolute;
+            top: -30px;
+        }
+        .mute-text-unmuted {
+            display: none; /* Mute User text hidden when unmuted */
+        }
+        .button.muted .mute-text-unmuted {
+            display: none; /* Mute User text is hidden when muted */
+        }
+        .button.muted .mute-text {
+            display: block; /* Unmute text is visible when muted */
+            font-size: 13px;
+            font-weight: bold;
+            white-space: nowrap;
+            color: white;
+            position: absolute;
+            top: -30px;
+        }
+
+        .snowflake {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            color: rgb(160, 227, 246);; /* Snowflake icon color */
+            font-size: 36px;
+            width: 50px;
+            height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            animation: snowflakeAnimation 3s infinite;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+
+        .snowflake:hover {
+            transform: rotate(45deg);
+            animation: snowflakeHoverAnimation 0.5s forwards;
+            color: rgb(255, 255, 255);
+        }
+
+        @keyframes snowflakeAnimation {
+            0% {
+                transform: rotate(0deg);
+            }
+            50% {
+                transform: rotate(180deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        @keyframes snowflakeHoverAnimation {
+            0% {
+                transform: rotate(45deg);
+            }
+            100% {
+                transform: scale(1.2);
+            }
+        }
+        .snowflake:hover .snowflake-text {
+            display: block;
+            color: rgb(255, 255, 255); /* Text color white */
+            font-size: 12px; /* Smaller font size */
+            font-family: 'Arial', sans-serif; /* Clean font */
+            text-align: center;
+            line-height: 1.2;
+            white-space: nowrap;
+            position: absolute; /* Absolute positioning relative to the snowflake */
+            top: 100%; /* Positions the text below the snowflake */
+            left: 50%; /* Centers the text horizontally */
+            transform: translateX(-50%); /* Ensures proper centering */
+            margin-top: 10px; /* Additional space between the snowflake and text */
+        }
+
+        .snowflake-text {
+            display: none;
+        }
+
+        /* Add a class to remove pointer cursor when muted */
+        .muted-disabled {
+            cursor: default !important;
+        }
+        #start-text {
+        color: rgb(255, 255, 255);
+        text-align: center;
+        font-size: 24px;
+        font-weight: bold;
+        animation: blink 0.5s step-start 2; /* On-off effect (2 cycles, on-off-on) */
+    }
+
+        #start-text.hidden {
+        display: none; /* Completely hides the element */
+    }
+
+        @keyframes blink {
+            50% {
+                opacity: 0; /* Off state */
+            }
+        }
+
+    </style>
+</head>
+<body>
+    <!-- Add a wrapper to center main content -->
+    <div class="content-wrapper">
+        <!-- Content from index.html -->
+        <h1>Talk to Your Virtual Therapist</h1>
+        <div class="circle-container" id="status-circle" onclick="toggleRecording()">
+            <div class="status-text" id="status-text">
+                <span class="emoji" id="emoji">🎙️</span>
+                Start
+            </div>
+        </div>
+        <div class="response-container" id="response-container"></div>
+        <h4 id="start-text">Hit start and let’s talk</h4>
+
+        <!-- Button container from buttons.html -->
+        <div class="button-container">
+          <div id="muteButton" class="button mute-button unmuted">
+            <span class="mute-icon"><i class="material-icons">mic</i></span>
+            <span class="mute-text">Mute User</span>
+          </div>
+          <div id="closeButton" class="button close-button">
+            <span class="mute-icon">&#x2715;</span>
+            <span class="mute-text">Terminate</span>
+          </div>
+        </div>
+    </div>
+
+    <!-- Snowflake from buttons.html -->
+    <div class="snowflake" onclick="window.history.back();">
+      &#10052;
+      <div class="snowflake-text">
+        Choose<br>voice
+      </div>
+    </div>
+
+    <script>
+        // ----- Script from index.html -----
+        const statusText = document.getElementById('status-text');
+        const emoji = document.getElementById('emoji');
+        const responseContainer = document.getElementById('response-container');
+        const statusCircle = document.getElementById('status-circle');
+
+        // Hide the text after 2 blinks (1 second total)
+        const startText = document.getElementById('start-text');
+
+        setTimeout(() => {
+            startText.classList.add('hidden'); // Hide the element completely
+        }, 5500); // 2 blinks = 1 second (0.5s per blink * 2)
+
+
+        let isRecording = false;
+        let mediaRecorder;
+        let audioChunks = [];
+
+        // Reference to mute state
+        let isMuted = false;
+
+        function toggleRecording() {
+            // If muted, do nothing
+            if (isMuted) {
+                return;
+            }
+
+            if (isRecording) {
+                stopRecording();
+            } else {
+                startRecording();
+            }
+        }
+
+        function startRecording() {
+            isRecording = true;
+            statusText.innerHTML = '<span class="emoji">✋</span> Stop';
+            responseContainer.innerHTML = ''; // Clear response
+            statusCircle.classList.remove('disabled'); // Enable circle click during recording
+
+            navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
+                mediaRecorder = new MediaRecorder(stream);
+                audioChunks = [];
+                mediaRecorder.ondataavailable = function(event) {
+                    audioChunks.push(event.data);
+                };
+                mediaRecorder.onstop = async function() {
+                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    const formData = new FormData();
+                    formData.append('audio_data', audioBlob, 'recording.wav');
+
+                    statusText.innerHTML = '<span class="emoji">⏳</span> Processing';
+                    statusCircle.classList.add('disabled'); // Disable click while processing
+
+                    const response = await fetch('/process', {
+                        method: 'POST',
+                        body: formData
+                    });
+
+                    const result = await response.json();
+
+                    if (result.error) {
+                        statusText.innerHTML = `<span class="emoji">❌</span> Error`;
+                        responseContainer.textContent = `Error: ${result.error}`;
+                    } else {
+                        statusText.innerHTML = `<span class="emoji">💬</span> Response`;
+                        displayResponse(result.response);
+                        const audio = new Audio(result.audioUrl);
+                        audio.play();
+                        audio.onended = () => {
+                            resetCircle();
+                        };
+                    }
+                };
+                mediaRecorder.start();
+            });
+        }
+
+        function stopRecording() {
+            isRecording = false;
+            statusText.innerHTML = '<span class="emoji">⏳</span> Processing';
+            mediaRecorder.stop();
+            statusCircle.classList.add('disabled'); // Disable circle click during processing
+        }
+
+        function resetCircle() {
+            isRecording = false;
+            statusText.innerHTML = '<span class="emoji">🎙️</span> Start';
+            statusCircle.classList.remove('disabled'); // Enable circle click after response
+        }
+
+        function displayResponse(responseText) {
+            responseContainer.innerHTML = ''; // Clear existing text
+            const lines = responseText.split('. '); // Split response into sentences
+            lines.forEach((line, index) => {
+                const lineElement = document.createElement('div');
+                lineElement.textContent = line.trim();
+                lineElement.className = 'response-line';
+                lineElement.style.animationDelay = `${index}s`;
+                responseContainer.appendChild(lineElement);
+            });
+        }
+
+        // ----- Script from buttons.html -----
+        const muteButton = document.getElementById('muteButton');
+        const closeButton = document.getElementById('closeButton');
+
+        muteButton.addEventListener('click', () => {
+          isMuted = !isMuted;
+
+          // Add/remove class to circle-container to show no pointer when muted
+          if (isMuted) {
+            muteButton.classList.remove('unmuted');
+            muteButton.classList.add('muted');
+            muteButton.innerHTML = `
+              <span class="mute-icon">
+                <i class="material-icons" style="color:black">mic_off</i>
+              </span>
+              <span class="mute-text">Unmute</span> <!-- Show "Unmute" when muted -->
+            `;
+            statusCircle.classList.add('muted-disabled');
+          } else {
+            muteButton.classList.remove('muted');
+            muteButton.classList.add('unmuted');
+            muteButton.innerHTML = `
+              <span class="mute-icon">
+                <i class="material-icons">mic</i>
+              </span>
+              <span class="mute-text">Mute User</span> <!-- Show "Mute User" when unmuted -->
+            `;
+            statusCircle.classList.remove('muted-disabled');
+          }
+        });
+
+        closeButton.addEventListener('click', () => {
+          location.reload();
+        });
+    </script>
+
+    <!-- Override styles at the end to center the main content while keeping snowflake top-right -->
+    <style>
+      body {
+        background-color: #1d1d1d !important;
+        display: flex !important;
+        flex-direction: column !important;
+        justify-content: center !important;
+        align-items: center !important;
+        height: 100vh !important;
+        margin: 0 !important;
+        overflow: hidden !important;
+        padding: 0 20px !important;
+        text-align: center !important;
+      }
+      .content-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      .snowflake {
+        position: absolute !important;
+        top: 10px !important;
+        right: 10px !important;
+      }
+    </style>
+</body>
+</html>