From 5eb67d302ea5b6f1622e7175aac27f8fed0e14a7 Mon Sep 17 00:00:00 2001
From: mirak-oracle <141934399+mirak-oracle@users.noreply.github.com>
Date: Mon, 30 Dec 2024 09:01:18 +0100
Subject: [PATCH] Update index.html

---
 index.html | 362 +++++++++++++++++++++++------------------------------
 1 file changed, 155 insertions(+), 207 deletions(-)
diff --git a/index.html b/index.html
index 1d4c750..f9c96fb 100644
--- a/index.html
+++ b/index.html
@@ -4,166 +4,61 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vox - AI Assistant</title>
-  <script defer src="script.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    /* General styling */
-    body {
-      margin: 0;
-      font-family: 'Roboto', sans-serif;
-      background: linear-gradient(to right, #1a1a1a, #2b2b2b);
-      color: white;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    @keyframes glow {
+      0% { box-shadow: 0 0 5px #4f46e5; }
+      50% { box-shadow: 0 0 20px #4f46e5, 0 0 30px #818cf8; }
+      100% { box-shadow: 0 0 5px #4f46e5; }
     }
-
-    /* Notification Banner */
-    .notification {
-      position: fixed;
-      top: 0;
-      width: 100%;
-      text-align: center;
-      background: linear-gradient(to right, #ff7a18, #af002d, #319197);
-      padding: 10px 20px;
-      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
-      font-weight: bold;
-      z-index: 1000;
-    }
-
-    /* Chat Section */
-    .chat-section {
-      margin-top: 60px;
-      width: 80%;
-      max-width: 600px;
-      border-radius: 12px;
-      background: rgba(255, 255, 255, 0.1);
-      box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);
-      padding: 20px;
-    }
-
-    .messages {
-      height: 300px;
-      overflow-y: auto;
-      margin-bottom: 20px;
-      padding: 10px;
-      border-radius: 8px;
-      background: rgba(0, 0, 0, 0.4);
-      box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.2);
-    }
-
-    .text-right {
-      text-align: right;
-    }
-
-    .text-left {
-      text-align: left;
-    }
-
-    .message {
-      margin: 5px 0;
-      padding: 8px 10px;
-      border-radius: 8px;
-      font-size: 14px;
-    }
-
-    .text-blue-500 {
-      background: #3a82f7;
-      color: white;
-    }
-
-    .text-green-500 {
-      background: #25c16f;
-      color: white;
+    .glow-effect {
+      animation: glow 2s infinite;
     }
-
-    /* Status Indicator */
-    .status-indicator {
-      margin: 10px auto;
-      text-align: center;
-      font-weight: bold;
-      font-size: 16px;
-    }
-
-    /* Audio Visualizer */
-    #audio-visualizer {
-      margin: 20px auto;
-      width: 100%;
-      max-width: 600px;
-      height: 100px;
-      background: #111;
-      border-radius: 10px;
-      box-shadow: 0px 4px 20px rgba(255, 255, 255, 0.2);
-    }
-
-    /* Control Buttons */
-    .controls {
-      display: flex;
-      justify-content: space-around;
-      margin-top: 20px;
-    }
-
-    .controls button {
-      padding: 10px 20px;
-      border: none;
-      border-radius: 8px;
-      font-size: 14px;
-      font-weight: bold;
-      cursor: pointer;
-      transition: 0.3s;
-    }
-
-    .controls button:hover {
-      transform: scale(1.1);
-    }
-
-    .start {
-      background: #25c16f;
-      color: white;
-    }
-
-    .hold {
-      background: #f7c331;
-      color: white;
-    }
-
-    .end {
-      background: #d83232;
-      color: white;
+    .visualizer-bar {
+      transition: height 0.1s ease;
     }
   </style>
 </head>
-<body>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-4">
   <!-- Notification Banner -->
-  <div class="notification">
+  <div class="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white py-2 px-4 text-center font-bold shadow-lg z-50">
     Welcome to Vox, your AI-powered voice assistant!
   </div>
 
-  <!-- Chat Section -->
-  <div class="chat-section">
-    <div id="status-indicator" class="status-indicator">Idle</div>
-    <div class="messages" id="user-messages">
-      <!-- User messages will appear here -->
-    </div>
-    <div class="messages" id="bot-responses">
-      <!-- Bot responses will appear here -->
+  <div class="w-full max-w-2xl mx-auto mt-16">
+    <!-- Status Indicator -->
+    <div id="status-indicator" class="text-center font-bold text-xl mb-4">Idle</div>
+
+    <!-- Audio Visualizer -->
+    <div class="relative h-32 bg-gray-800 rounded-lg overflow-hidden mb-6">
+      <div id="audio-visualizer" class="absolute inset-0 flex items-end justify-around">
+        <!-- Visualizer bars will be dynamically added here -->
+      </div>
     </div>
-  </div>
 
-  <!-- Audio Visualizer -->
-  <canvas id="audio-visualizer"></canvas>
+    <!-- Chat Section -->
+    <div class="bg-gray-800 rounded-lg p-4 mb-6 h-64 overflow-y-auto" id="chat-container">
+      <!-- Chat messages will appear here -->
+    </div>
 
-  <!-- Control Buttons -->
-  <div class="controls">
-    <button class="start" id="start-btn">Start Listening</button>
-    <button class="hold" id="hold-btn">Hold Listening</button>
-    <button class="end" id="end-btn">End Session</button>
+    <!-- Control Buttons -->
+    <div class="flex justify-center space-x-4">
+      <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
+        Start Listening
+      </button>
+      <button id="hold-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
+        Hold
+      </button>
+      <button id="end-btn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+        End Session
+      </button>
+    </div>
   </div>
 
-  <!-- JavaScript -->
   <script>
     // OpenAI API key (replace with your key)
-    const OPENAI_API_KEY = "your-openai-api-key";
+    const OPENAI_API_KEY = "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
+";
 
     // Webkit Speech Recognition setup
     const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
@@ -172,59 +67,94 @@
     recognition.lang = "en-US";
 
     let isListening = false;
+    let isHolding = false;
+
+    const startBtn = document.getElementById("start-btn");
+    const holdBtn = document.getElementById("hold-btn");
+    const endBtn = document.getElementById("end-btn");
+    const statusIndicator = document.getElementById("status-indicator");
+    const chatContainer = document.getElementById("chat-container");
+    const audioVisualizer = document.getElementById("audio-visualizer");
 
     // Start Listening
     function startListening() {
-      if (!isListening) {
+      if (!isListening && !isHolding) {
         recognition.start();
         isListening = true;
         updateStatus("Listening...");
+        startBtn.classList.add("glow-effect");
+        startAudioVisualization();
+      }
+    }
+
+    // Hold Listening
+    function holdListening() {
+      if (isListening) {
+        recognition.stop();
+        isListening = false;
+        isHolding = true;
+        updateStatus("On Hold");
+        startBtn.classList.remove("glow-effect");
+        holdBtn.classList.add("glow-effect");
+        stopAudioVisualization();
+      } else if (isHolding) {
+        recognition.start();
+        isListening = true;
+        isHolding = false;
+        updateStatus("Listening...");
+        startBtn.classList.add("glow-effect");
+        holdBtn.classList.remove("glow-effect");
+        startAudioVisualization();
       }
     }
 
     // Stop Listening
     function stopListening() {
-      if (isListening) {
+      if (isListening || isHolding) {
         recognition.stop();
         isListening = false;
+        isHolding = false;
         updateStatus("Idle");
+        startBtn.classList.remove("glow-effect");
+        holdBtn.classList.remove("glow-effect");
+        stopAudioVisualization();
       }
     }
 
-    // Display user message in the UI
-    function displayUserMessage(message) {
-      const userMessages = document.getElementById("user-messages");
+    // Display message in the chat
+    function displayMessage(sender, message) {
       const messageElement = document.createElement("div");
-      messageElement.className = "message text-right text-blue-500";
-      messageElement.textContent = `You: ${message}`;
-      userMessages.appendChild(messageElement);
-    }
-
-    // Display bot response in the UI
-    function displayBotResponse(response) {
-      const botResponses = document.getElementById("bot-responses");
-      const responseElement = document.createElement("div");
-      responseElement.className = "message text-left text-green-500";
-      responseElement.textContent = `Vox: ${response}`;
-      botResponses.appendChild(responseElement);
+      messageElement.className = `mb-2 p-2 rounded-lg ${sender === 'You' ? 'bg-blue-600 text-white self-end' : 'bg-gray-700 text-white self-start'}`;
+      messageElement.textContent = `${sender}: ${message}`;
+      chatContainer.appendChild(messageElement);
+      chatContainer.scrollTop = chatContainer.scrollHeight;
     }
 
     // Use OpenAI API to generate a response
     async function fetchOpenAIResponse(userMessage) {
-      const response = await fetch("https://api.openai.com/v1/chat/completions", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${OPENAI_API_KEY}`,
-        },
-        body: JSON.stringify({
-          model: "gpt-4",
-          messages: [{ role: "user", content: userMessage }],
-        }),
-      });
+      try {
+        const response = await fetch("https://api.openai.com/v1/chat/completions", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${OPENAI_API_KEY}`,
+          },
+          body: JSON.stringify({
+            model: "gpt-4",
+            messages: [{ role: "user", content: userMessage }],
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch response from OpenAI');
+        }
 
-      const data = await response.json();
-      return data.choices[0].message.content.trim();
+        const data = await response.json();
+        return data.choices[0].message.content.trim();
+      } catch (error) {
+        console.error('Error fetching OpenAI response:', error);
+        return "I'm sorry, I encountered an error while processing your request.";
+      }
     }
 
     // Text-to-Speech
@@ -237,61 +167,79 @@
     // Handle voice recognition results
     recognition.onresult = async (event) => {
       const transcript = event.results[event.results.length - 1][0].transcript.trim();
-      displayUserMessage(transcript);
+      displayMessage("You", transcript);
 
       const botResponse = await fetchOpenAIResponse(transcript);
-      displayBotResponse(botResponse);
+      displayMessage("Vox", botResponse);
       speak(botResponse);
     };
 
     // Update status in UI
     function updateStatus(status) {
-      const statusIndicator = document.getElementById("status-indicator");
       statusIndicator.textContent = status;
     }
 
-    // Real-time audio visualization
-    function initAudioVisualization() {
-      const canvas = document.getElementById("audio-visualizer");
-      const ctx = canvas.getContext("2d");
-      const WIDTH = canvas.width;
-      const HEIGHT = canvas.height;
+    // Audio Visualization
+    let audioContext, analyser, dataArray, source;
+    const NUM_BARS = 64;
 
-      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      const analyser = audioContext.createAnalyser();
+    function initAudioVisualization() {
+      audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      analyser = audioContext.createAnalyser();
       analyser.fftSize = 256;
+      dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+      navigator.mediaDevices.getUserMedia({ audio: true })
+        .then(stream => {
+          source = audioContext.createMediaStreamSource(stream);
+          source.connect(analyser);
+        })
+        .catch(err => console.error('Error accessing microphone:', err));
+
+      // Create visualizer bars
+      for (let i = 0; i < NUM_BARS; i++) {
+        const bar = document.createElement('div');
+        bar.className = 'visualizer-bar bg-purple-500 w-1';
+        audioVisualizer.appendChild(bar);
+      }
+    }
 
-      const dataArray = new Uint8Array(analyser.frequencyBinCount);
-      const source = audioContext.createMediaStreamSource(new MediaStream());
-      source.connect(analyser);
-
-      function draw() {
-        requestAnimationFrame(draw);
-
-        analyser.getByteFrequencyData(dataArray);
-        ctx.clearRect(0, 0, WIDTH, HEIGHT);
+    function startAudioVisualization() {
+      if (!audioContext) initAudioVisualization();
+      updateVisualization();
+    }
 
-        const gradient = ctx.createLinearGradient(0, 0, WIDTH, HEIGHT);
-        gradient.addColorStop(0, "rgba(255, 0, 0, 0.7)");
-        gradient.addColorStop(1, "rgba(0, 255, 255, 0.7)");
+    function stopAudioVisualization() {
+      if (source) {
+        source.disconnect();
+        source = null;
+      }
+      const bars = audioVisualizer.children;
+      for (let bar of bars) {
+        bar.style.height = '0%';
+      }
+    }
 
-        ctx.fillStyle = gradient;
+    function updateVisualization() {
+      if (!isListening) return;
 
-        for (let i = 0; i < dataArray.length; i++) {
-          const barHeight = dataArray[i] / 2;
-          const x = (i / dataArray.length) * WIDTH;
-          ctx.fillRect(x, HEIGHT - barHeight, WIDTH / dataArray.length, barHeight);
-        }
+      analyser.getByteFrequencyData(dataArray);
+      const bars = audioVisualizer.children;
+      
+      for (let i = 0; i < NUM_BARS; i++) {
+        const barHeight = (dataArray[i] / 255) * 100;
+        bars[i].style.height = barHeight + '%';
       }
 
-      draw();
+      requestAnimationFrame(updateVisualization);
     }
 
-    // Event listeners for Start/Hold/End controls
-    document.getElementById("start-btn").addEventListener("click", startListening);
-    document.getElementById("hold-btn").addEventListener("click", stopListening);
-    document.getElementById("end-btn").addEventListener("click", stopListening);
+    // Event listeners
+    startBtn.addEventListener("click", startListening);
+    holdBtn.addEventListener("click", holdListening);
+    endBtn.addEventListener("click", stopListening);
 
+    // Initialize
     initAudioVisualization();
   </script>
 </body>
