Spaces:

atlury
/

digitalhuman

Running

App Files Files Community

atlury commited on Sep 24, 2024

Commit

0f89d2c

verified ·

1 Parent(s): daf5836

Upload finalwork2.html

Browse files

Files changed (1) hide show

finalwork2.html +945 -0

finalwork2.html ADDED Viewed

	@@ -0,0 +1,945 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Aged Guru</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Google Fonts for better typography -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+  <!-- Include necessary CSS styles -->
+  <style>
+    /* Reset and base styles */
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
+      display: flex;
+      min-height: 100vh;
+      color: #333;
+      overflow: hidden;
+    }
+    /* Sidebar styling */
+    .sidebar {
+      width: 260px;
+      background: linear-gradient(135deg, #ffffff, #e0f7fa);
+      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      padding: 30px 20px;
+      position: fixed;
+      height: 100%;
+      overflow-y: auto;
+      transition: width 0.3s ease, background 0.3s ease;
+    }
+    .sidebar h2 {
+      text-align: center;
+      margin-bottom: 40px;
+      font-family: 'Roboto', sans-serif;
+      font-weight: 700;
+      font-size: 1.8em;
+      color: #00796B;
+      background: linear-gradient(90deg, #00796B, #004D40);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .sidebar a {
+      color: #555555;
+      padding: 12px 15px;
+      text-decoration: none;
+      font-size: 1em;
+      border-radius: 8px;
+      margin-bottom: 10px;
+      transition: background-color 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
+      display: flex;
+      align-items: center;
+      background: linear-gradient(135deg, #ffffff, #f9f9f9);
+    }
+    .sidebar a:hover {
+      background: linear-gradient(135deg, #e0f7fa, #ffffff);
+      color: #00796B;
+      transform: translateX(5px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+    }
+    .sidebar a.active {
+      background: linear-gradient(135deg, #80deea, #4dd0e1);
+      color: #004d40;
+      font-weight: 600;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+    .sidebar a::before {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      background-color: #004d40;
+      border-radius: 50%;
+      margin-right: 12px;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .sidebar a.active::before {
+      opacity: 1;
+    }
+    /* Main content styling */
+    .main-content {
+      margin-left: 260px;
+      padding: 30px;
+      flex: 1;
+      background: linear-gradient(135deg, #f9f9f9, #e0f2f1);
+      overflow-y: auto;
+      height: 100vh;
+      transition: margin-left 0.3s ease, background 0.3s ease;
+    }
+    /* Header */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 25px;
+      background: linear-gradient(90deg, #80deea, #4dd0e1);
+      padding: 15px 20px;
+      border-radius: 12px;
+      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+    }
+    .header h1 {
+      font-family: 'Roboto', sans-serif;
+      font-size: 2em;
+      color: #ffffff;
+      background: linear-gradient(90deg, #ffffff, #e0f7fa);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    /* Card Styling */
+    .card {
+      background: linear-gradient(135deg, #ffffff, #f1f8e9);
+      border-radius: 16px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
+      padding: 25px;
+      margin-bottom: 25px;
+      transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+    }
+    .card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 6px 25px rgba(0,0,0,0.1);
+      background: linear-gradient(135deg, #e0f7fa, #ffffff);
+    }
+    /* Button Styling */
+    button {
+      background: linear-gradient(135deg, #00796B, #004D40);
+      border: none;
+      color: white;
+      padding: 12px 20px;
+      font-size: 1em;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    button:hover {
+      background: linear-gradient(135deg, #005D56, #00332E);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
+    button:disabled {
+      background: linear-gradient(135deg, #A5D6A7, #81C784);
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+    /* Select Dropdown Styling */
+    select {
+      width: 100%;
+      padding: 10px 15px;
+      border: 1px solid #cccccc;
+      border-radius: 8px;
+      font-size: 1em;
+      background-color: #ffffff;
+      transition: border-color 0.3s, box-shadow 0.3s;
+      margin-bottom: 15px;
+    }
+    select:focus {
+      border-color: #00796B;
+      box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+      outline: none;
+    }
+    /* Chat Box Styling */
+    #chat-box {
+      height: 400px;
+      border: 1px solid #e0e0e0;
+      border-radius: 12px;
+      overflow-y: auto;
+      padding: 20px;
+      background-color: #ffffff;
+      margin-bottom: 20px;
+      position: relative;
+      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+    }
+    .message-container {
+      margin-bottom: 20px;
+      display: flex;
+    }
+    .message {
+      padding: 12px 18px;
+      border-radius: 20px;
+      max-width: 75%;
+      position: relative;
+      word-wrap: break-word;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+      font-size: 0.95em;
+      line-height: 1.4;
+      background-color: #f1f8e9;
+      transition: background-color 0.3s, box-shadow 0.3s;
+    }
+    .user .message {
+      background: #DCF8C6;
+      border-bottom-right-radius: 0;
+    }
+    .assistant .message {
+      background: #e3f2fd;
+      border-bottom-left-radius: 0;
+    }
+    /* Microphone Button Styling */
+    #mic-container {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    /* Updated Start Button */
+    #start_button {
+      background: linear-gradient(135deg, #00796B, #004D40);
+      border: none;
+      color: white;
+      padding: 15px;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+      width: 60px;
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+    }
+    #start_button::before {
+      content: '';
+      position: absolute;
+      width: 200%;
+      height: 200%;
+      background: rgba(255, 255, 255, 0.3);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      border-radius: 50%;
+      transition: transform 0.5s ease-out;
+    }
+    #start_button:active::before {
+      transform: translate(-50%, -50%) scale(1);
+    }
+    #start_button:disabled {
+      background: linear-gradient(135deg, #A5D6A7, #81C784);
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+    #start_button:hover:not(:disabled) {
+      background: linear-gradient(135deg, #005D56, #00332E);
+      transform: scale(1.05);
+      box-shadow: 0 6px 15px rgba(0,0,0,0.15);
+    }
+    /* Icon Styling */
+    .mic-icon {
+      width: 30px;
+      height: 30px;
+      transition: transform 0.3s;
+      fill: #ffffff;
+    }
+    /* Animation for Mic Icon */
+    .mic-animate {
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.2);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+    /* Logs Styling */
+    #logs {
+      height: 120px;
+      border: 1px solid #e0e0e0;
+      border-radius: 12px;
+      overflow-y: auto;
+      padding: 15px;
+      background-color: #f1f1f1;
+      font-size: 0.85em;
+      margin-bottom: 10px;
+      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+    }
+    #clear-logs {
+      background: linear-gradient(135deg, #FF5252, #E53935);
+      border: none;
+      color: white;
+      padding: 10px 18px;
+      font-size: 0.9em;
+      cursor: pointer;
+      border-radius: 8px;
+      transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    #clear-logs:hover {
+      background: linear-gradient(135deg, #E53935, #D32F2F);
+      transform: scale(1.02);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
+    /* Chat Stats */
+    #chat-stats {
+      font-size: 0.85em;
+      color: #555555;
+      text-align: center;
+      margin-top: 10px;
+    }
+    /* Voice Selection Container */
+    #tts-voice-container label {
+      display: block;
+      margin-bottom: 8px;
+      color: #555555;
+      font-weight: 500;
+    }
+    /* Hidden Class */
+    .hidden {
+      display: none;
+    }
+    /* Scrollbar Styling */
+    #chat-box::-webkit-scrollbar,
+    #logs::-webkit-scrollbar {
+      width: 8px;
+    }
+    #chat-box::-webkit-scrollbar-track,
+    #logs::-webkit-scrollbar-track {
+      background: #f1f1f1;
+      border-radius: 4px;
+    }
+    #chat-box::-webkit-scrollbar-thumb,
+    #logs::-webkit-scrollbar-thumb {
+      background: #cccccc;
+      border-radius: 4px;
+    }
+    #chat-box::-webkit-scrollbar-thumb:hover,
+    #logs::-webkit-scrollbar-thumb:hover {
+      background: #a8a8a8;
+    }
+    /* Responsive Adjustments */
+    @media (max-width: 768px) {
+      .sidebar {
+        width: 220px;
+      }
+      .main-content {
+        margin-left: 220px;
+      }
+    }
+    @media (max-width: 600px) {
+      .sidebar {
+        position: relative;
+        width: 100%;
+        height: auto;
+        flex-direction: row;
+        overflow-x: auto;
+        padding: 15px 10px;
+      }
+      .sidebar h2 {
+        display: none;
+      }
+      .sidebar a {
+        margin-right: 10px;
+        margin-bottom: 0;
+        padding: 10px 12px;
+        font-size: 0.9em;
+      }
+      .main-content {
+        margin-left: 0;
+        padding: 20px 15px;
+      }
+      .header {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .header h1 {
+        margin-bottom: 10px;
+        font-size: 1.5em;
+      }
+    }
+    /* Controls Container Styling */
+    #controls {
+      display: flex;
+      gap: 10px;
+      margin-bottom: 15px;
+      flex-wrap: wrap;
+    }
+    /* Initialize Button Styling */
+    #download {
+      flex: 0 0 auto;
+      background: linear-gradient(135deg, #00796B, #004D40);
+      border: none;
+      color: white;
+      padding: 10px 20px;
+      font-size: 1em;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    #download:hover {
+      background: linear-gradient(135deg, #005D56, #00332E);
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+    }
+    #download:disabled {
+      background: linear-gradient(135deg, #A5D6A7, #81C784);
+      cursor: not-allowed;
+      box-shadow: none;
+    }
+    /* Enhanced Layout for Digital Human Mentor Voice Section */
+    #voice .card {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 20px;
+    }
+    /* Adjust controls and voice selection */
+    #model-selection-container,
+    #tts-voice-container {
+      display: flex;
+      flex-direction: column;
+    }
+    #model-selection-container label,
+    #tts-voice-container label {
+      margin-bottom: 5px;
+      font-weight: 500;
+      color: #555555;
+    }
+    /* Chat and Controls Layout */
+    #chat-container {
+      display: flex;
+      flex-direction: column;
+    }
+    /* Ensure chat-box takes full width */
+    #chat-box {
+      width: 100%;
+    }
+    /* Adjust microphone container */
+    #mic-container {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+    /* Configuration Info */
+    #configuration {
+      margin-top: 15px;
+      font-size: 0.9em;
+      color: #555555;
+    }
+    /* Responsive Grid Adjustments */
+    @media (max-width: 800px) {
+      #voice .card {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+<!-- Sidebar -->
+<div class="sidebar">
+  <h2>AGED GURU</h2>
+  <a href="#" class="active" data-content="voice">Digital Human Voice</a>
+  <a href="#" data-content="video">Digital Human Video</a>
+  <a href="#" data-content="coder">Young Coder</a>
+  <a href="#" data-content="advanced-math">Advanced Mathematics & Problem Solving</a>
+  <a href="#" data-content="interdisciplinary">Interdisciplinary Studies Assistant</a>
+  <a href="#" data-content="insights">Insights</a>
+  <a href="#" data-content="3d-explorer">3D Explorer</a>
+  <a href="#" data-content="knowledge-base">Knowledge Base</a>
+  <a href="#" data-content="digital-twin">Digital Twin</a>
+</div>
+<!-- Main Content -->
+<div class="main-content" id="main-content">
+  <div class="header">
+    <h1>5-MIN SCIENTIST PORTAL</h1>
+    <!-- You can add user profile or settings here -->
+  </div>
+  <!-- Content will be loaded here -->
+  <div id="content-area">
+    <!-- Digital Human Mentor Voice Content Starts -->
+    <div id="voice" class="content-section">
+      <div class="card">
+        <!-- Model Selection Section -->
+        <div id="model-selection-container">
+          <label for="model-selection">Select Language Model:</label>
+          <select id="model-selection"></select>
+          <button id="download">Initialize</button>
+        </div>
+        <!-- Voice Selection Section -->
+        <div id="tts-voice-container">
+          <label for="voices">Select Voice:</label>
+          <select id="voices"></select>
+        </div>
+      </div>
+      <div id="chat-container">
+        <div id="configuration" class="hidden">
+          <div id="model-info">
+            <strong>LLM:</strong> <span id="selected-model">Not Initialized</span>
+          </div>
+        </div>
+        <div id="chat-box"></div>
+        <!-- Microphone button -->
+        <div id="mic-container">
+          <button id="start_button" disabled>
+            <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
+            </svg>
+          </button>
+        </div>
+        <div id="chat-stats" class="hidden"></div>
+      </div>
+      <h3>Logs</h3>
+      <div id="logs">
+        <div id="download-status" class="hidden"></div>
+      </div>
+      <button id="clear-logs">Clear Logs</button>
+    </div>
+    <!-- Digital Human Mentor Voice Content Ends -->
+    <!-- Placeholder for other sections -->
+    <div id="video" class="content-section hidden">
+      <div class="card">
+        <h2>Interactive Digital Human Mentor Video</h2>
+        <p>Content for Video Mentor will go here.</p>
+      </div>
+    </div>
+    <div id="coder" class="content-section hidden">
+      <div class="card">
+        <h2>Young coder</h2>
+        <p>Young coder with python, javascript and language of choice interpreter.</p>
+      </div>
+    </div>
+    <div id="advanced-math" class="content-section hidden">
+      <div class="card">
+        <h2>Advanced Mathematics & Problem Solving</h2>
+        <p>Content for Advanced Mathematics & Problem Solving will go here.</p>
+      </div>
+    </div>
+    <div id="interdisciplinary" class="content-section hidden">
+      <div class="card">
+        <h2>Interdisciplinary Studies Assistant</h2>
+        <p>Content for Interdisciplinary Studies Assistant will go here.</p>
+      </div>
+    </div>
+    <div id="insights" class="content-section hidden">
+      <div class="card">
+        <h2>Insights</h2>
+        <p>Content for Document Insights will go here. Document Insights (PDF, Image), Translator, Youtube Summarizer,  </p>
+      </div>
+    </div>
+    <div id="3d-explorer" class="content-section hidden">
+      <div class="card">
+        <h2>3D Explorer</h2>
+        <p>Content for 3D Explorer will go here.</p>
+      </div>
+    </div>
+    <div id="knowledge-base" class="content-section hidden">
+      <div class="card">
+        <h2>Knowledge Base</h2>
+        <p>Content for Knowledge Base will go here, Treasured Teachings, Vintage Papers, Digital Dustbin.</p>
+      </div>
+    </div>
+    <div id="digital-twin" class="content-section hidden">
+      <div class="card">
+        <h2>Digital Twin</h2>
+        <p>Persona, Memory, Social Graph, Class Notes, Homework, Tracker.</p>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- Include the necessary scripts -->
+<script type="module">
+  import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+  // Sidebar navigation
+  const sidebarLinks = document.querySelectorAll('.sidebar a');
+  const contentSections = document.querySelectorAll('.content-section');
+  sidebarLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      // Remove active class from all links
+      sidebarLinks.forEach(l => l.classList.remove('active'));
+      // Add active class to the clicked link
+      link.classList.add('active');
+      // Hide all content sections
+      contentSections.forEach(section => section.classList.add('hidden'));
+      // Show the selected content section
+      const target = link.getAttribute('data-content');
+      document.getElementById(target).classList.remove('hidden');
+    });
+  });
+  // Initialize the Digital Human Mentor Voice section
+  const messages = [
+    {
+      content: "You are Chatbot, a friendly, helpful robot called Aged Guru. Respond to what the user said in a creative and helpful way, but keep your responses brief.\n" +
+        "Keep responses brief and legible. Your output will be converted to audio.\n" +
+        "Your responses will converted to audio. Please do not include any special characters in your response other than '!' or '?'.",
+      role: "system"
+    }
+  ];
+  const availableModels = webllm.prebuiltAppConfig.model_list.map(
+    (m) => m.model_id
+  );
+  let selectedModel = "TinyLlama-1.1B-Chat-v0.4-q4f32_1-MLC-1k";
+  function updateEngineInitProgressCallback(report) {
+    console.log("initialize", report.progress);
+    document.getElementById("download-status").textContent = report.text;
+  }
+  const engine = new webllm.MLCEngine();
+  engine.setInitProgressCallback(updateEngineInitProgressCallback);
+  async function initializeWebLLMEngine() {
+    document.getElementById("download-status").classList.remove("hidden");
+    selectedModel = document.getElementById("model-selection").value;
+    const config = {
+      temperature: 1.0,
+      top_p: 1
+    };
+    await engine.reload(selectedModel, config);
+    document.getElementById("selected-model").textContent = selectedModel;
+    document.getElementById("start_button").disabled = false;
+    document.getElementById("configuration").classList.remove("hidden");
+  }
+  async function streamingGenerating(messages, onUpdate, onFinish, onError) {
+    try {
+      let curMessage = "";
+      const completion = await engine.chat.completions.create({
+        stream: true,
+        messages
+      });
+      for await (const chunk of completion) {
+        const curDelta = chunk.choices[0].delta.content;
+        if (curDelta) {
+          curMessage += curDelta;
+        }
+        onUpdate(curMessage);
+      }
+      const finalMessage = await engine.getMessage();
+      onFinish(finalMessage);
+    } catch (err) {
+      onError(err);
+    }
+  }
+  function appendMessage(message) {
+    const chatBox = document.getElementById("chat-box");
+    const container = document.createElement("div");
+    container.classList.add("message-container");
+    const newMessage = document.createElement("div");
+    newMessage.classList.add("message");
+    newMessage.textContent = message.content;
+    if (message.role === "user") {
+      container.classList.add("user");
+    } else {
+      container.classList.add("assistant");
+    }
+    container.appendChild(newMessage);
+    chatBox.appendChild(container);
+    chatBox.scrollTop = chatBox.scrollHeight;
+    // If the message is from the assistant and not a placeholder, trigger TTS
+    if (message.role === "assistant" && message.content !== "typing...") {
+      speak(message.content);
+    }
+  }
+  function updateLastMessage(content) {
+    const messageDoms = document.getElementById("chat-box").querySelectorAll(".message");
+    const lastMessageDom = messageDoms[messageDoms.length - 1];
+    lastMessageDom.textContent = content;
+  }
+  function onSpeechRecognized(transcript) {
+    const input = transcript.trim();
+    const message = {
+      content: input,
+      role: "user"
+    };
+    if (input.length === 0) {
+      return;
+    }
+    document.getElementById("start_button").disabled = true;
+    messages.push(message);
+    appendMessage(message);
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    appendMessage(aiPlaceholder);
+    const onFinishGenerating = (finalMessage) => {
+      // Remove the "typing..." placeholder
+      const chatBox = document.getElementById("chat-box");
+      const lastMessageContainer = chatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        chatBox.removeChild(lastMessageContainer);
+      }
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      appendMessage(aiMessage);
+      document.getElementById("start_button").disabled = false;
+      engine.runtimeStatsText().then((statsText) => {
+        document.getElementById("chat-stats").classList.remove("hidden");
+        document.getElementById("chat-stats").textContent = statsText;
+      });
+    };
+    streamingGenerating(
+      messages,
+      updateLastMessage,
+      onFinishGenerating,
+      console.error
+    );
+  }
+  // Speech recognition code
+  var recognizing = false;
+  var ignore_onend;
+  var final_transcript = '';
+  var recognition;
+  function startButton(event) {
+    if (recognizing) {
+      recognition.stop();
+      return;
+    }
+    final_transcript = '';
+    recognition.lang = 'en-US';
+    recognition.start();
+    ignore_onend = false;
+    document.getElementById("start_button").classList.add("mic-animate");
+  }
+  if (!('webkitSpeechRecognition' in window)) {
+    alert("Web Speech API is not supported by this browser.");
+  } else {
+    recognition = new webkitSpeechRecognition();
+    recognition.continuous = false; // Non-continuous recognition
+    recognition.interimResults = false; // Get only final results
+    recognition.onstart = function() {
+      recognizing = true;
+    };
+    recognition.onerror = function(event) {
+      if (event.error == 'no-speech') {
+        document.getElementById("start_button").classList.remove("mic-animate");
+        alert('No speech was detected.');
+        ignore_onend = true;
+      }
+      if (event.error == 'audio-capture') {
+        document.getElementById("start_button").classList.remove("mic-animate");
+        alert('No microphone was found.');
+        ignore_onend = true;
+      }
+      if (event.error == 'not-allowed') {
+        alert('Permission to use microphone was denied.');
+        ignore_onend = true;
+      }
+    };
+    recognition.onend = function() {
+      recognizing = false;
+      document.getElementById("start_button").classList.remove("mic-animate");
+      if (ignore_onend) {
+        return;
+      }
+      if (!final_transcript) {
+        return;
+      }
+      // Process the final transcript
+      onSpeechRecognized(final_transcript);
+    };
+    recognition.onresult = function(event) {
+      for (var i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+          final_transcript += event.results[i][0].transcript;
+        }
+      }
+      final_transcript = final_transcript.trim();
+    };
+  }
+  document.getElementById("start_button").addEventListener("click", function(event) {
+    startButton(event);
+  });
+  // Initialize model selection
+  availableModels.forEach((modelId) => {
+    const option = document.createElement("option");
+    option.value = modelId;
+    option.textContent = modelId;
+    document.getElementById("model-selection").appendChild(option);
+  });
+  document.getElementById("model-selection").value = selectedModel;
+  document.getElementById("download").addEventListener("click", function () {
+    initializeWebLLMEngine().then(() => {
+      document.getElementById("start_button").disabled = false;
+    });
+  });
+  document.getElementById("clear-logs").addEventListener("click", function () {
+    document.getElementById("logs").innerHTML = '';
+  });
+  // ===== TTS Integration =====
+  // Initialize Speech Synthesis
+  let speech = new SpeechSynthesisUtterance();
+  speech.lang = "en";
+  let voices = [];
+  window.speechSynthesis.onvoiceschanged = () => {
+    voices = window.speechSynthesis.getVoices();
+    populateVoices();
+  };
+  function populateVoices() {
+    const voiceSelect = document.getElementById("voices");
+    voiceSelect.innerHTML = ''; // Clear existing options
+    voices.forEach((voice, i) => {
+      const option = new Option(voice.name, i);
+      voiceSelect.appendChild(option);
+    });
+    if (voices.length > 0) {
+      speech.voice = voices[0];
+    }
+  }
+  // Voice Selection Event Listener
+  document.getElementById("voices").addEventListener("change", () => {
+    const selectedVoiceIndex = document.getElementById("voices").value;
+    speech.voice = voices[selectedVoiceIndex];
+  });
+  // Function to speak text
+  function speak(text) {
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel(); // Cancel previous speech
+    }
+    speech.text = text;
+    window.speechSynthesis.speak(speech);
+  }
+</script>
+</body>
+</html>