Upload 13 files

advanced.math.css

@@ -0,0 +1,422 @@
+/* advanced.math.css */
+
+/* Reset and Base Styles */
+#advanced-math * {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+/* Card Styling */
+.advanced-math-card {
+  display: flex;
+  gap: 20px;
+  background: linear-gradient(135deg, #ffffff, #f1f8e9);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 25px;
+  margin: 25px auto;
+
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+.advanced-math-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #e0f7fa, #ffffff);
+}
+
+/* Flex Layout for Math Options and Chat Window */
+.math-options {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Ensure Math Options takes up available vertical space */
+.math-options {
+  height: 100%;
+}
+
+/* Chat Window Styling */
+.chat-window {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Option Sections Styling */
+.option-section {
+  background-color: #ffffff;
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.option-section:hover {
+  background-color: #f9f9f9;
+}
+
+/* Button Styling (Reused from Original) */
+#advanced-math 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);
+}
+
+#advanced-math button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#advanced-math button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Select Dropdown Styling (Reused from Original) */
+#advanced-math 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;
+}
+
+#advanced-math select:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+/* Speech Controls Styling */
+#math-speech-controls label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555555;
+  font-weight: 500;
+}
+
+#math-speech-controls input[type="range"] {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Logs Container Styling */
+#math-logs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 200px; /* Set a maximum height for the logs container */
+  overflow: hidden; /* Hide any overflow to prevent the container from expanding */
+}
+
+#math-logs {
+  flex: 1;
+  max-height: 200px; /* Adjust as needed */
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto; /* Enable vertical scrolling */
+  padding: 10px;
+  background-color: #f9f9f9;
+  font-size: 0.85em;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+#math-clear-logs {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #FF5252, #E53935);
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  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);
+}
+
+#math-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 Box Styling */
+#math-chat-box {
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+}
+
+/* Message Styling */
+#advanced-math .message-container {
+  margin-bottom: 20px;
+  display: flex;
+}
+
+#advanced-math .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;
+}
+
+#advanced-math .user .message {
+  background: #DCF8C6;
+  border-bottom-right-radius: 0;
+}
+
+#advanced-math .assistant .message {
+  background: #e3f2fd;
+  border-bottom-left-radius: 0;
+}
+
+/* Chat Input Container Styling */
+#math-text-input-container {
+  display: flex;
+  gap: 10px;
+}
+
+#math-text-input {
+  flex: 1;
+  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;
+}
+
+#math-text-input:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+#math-submit-button {
+  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);
+}
+
+#math-submit-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#math-submit-button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Microphone and Stop Buttons Styling */
+#math-mic-container {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+#math-start_button,
+#math-stop_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);
+}
+
+#math-stop_button {
+  background: linear-gradient(135deg, #E53935, #D32F2F);
+}
+
+#math-start_button::before,
+#math-stop_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;
+}
+
+#math-start_button:active::before,
+#math-stop_button:active::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+#math-start_button:disabled,
+#math-stop_button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+#math-start_button:hover:not(:disabled),
+#math-stop_button:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+#math-stop_button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #D32F2F, #C62828);
+}
+
+/* Icon Styling */
+#advanced-math .mic-icon,
+#advanced-math .stop-icon {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s;
+  fill: #ffffff;
+}
+
+/* Animation for Mic Icon */
+#advanced-math .mic-animate {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Stats */
+#math-chat-stats {
+  font-size: 0.85em;
+  color: #555555;
+  text-align: center;
+  margin-top: 10px;
+}
+
+/* Hidden Class */
+#advanced-math .hidden {
+  display: none;
+}
+
+/* Scrollbar Styling */
+#math-chat-box::-webkit-scrollbar,
+#math-logs::-webkit-scrollbar {
+  width: 8px;
+}
+
+#math-chat-box::-webkit-scrollbar-track,
+#math-logs::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+#math-chat-box::-webkit-scrollbar-thumb,
+#math-logs::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 4px;
+}
+
+#math-chat-box::-webkit-scrollbar-thumb:hover,
+#math-logs::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Initialize Button Styling (Reused from Original) */
+#math-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);
+}
+
+#math-download:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#math-download:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Configuration Info Styling */
+#math-configuration {
+  margin-top: 15px;
+  font-size: 0.9em;
+  color: #555555;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 800px) {
+  .advanced-math-card {
+    flex-direction: column;
+  }
+
+  /* Adjust Logs Container Height for Smaller Screens */
+  #math-logs-container {
+    max-height: 200px;
+  }
+
+  #math-logs {
+    max-height: 150px;
+  }
+}

advanced.math.js

@@ -0,0 +1,612 @@
+// advanced.math.js
+import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+
+// Ensure the script runs after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize the Advanced Mathematics & Problem Solving section
+  const mathMessages = [
+    {
+      content: "You are Aged Guru, an intelligent assistant skilled in advanced mathematics and problem solving. Provide insightful and comprehensive answers to complex mathematical questions.",
+      role: "system"
+    }
+  ];
+
+  const mathAvailableModels = webllm.prebuiltAppConfig.model_list.map(
+    (m) => m.model_id
+  );
+  let mathSelectedModel = "Qwen2.5-Math-1.5B-Instruct-q4f16_1-MLC"; // Default model
+
+  function mathUpdateEngineInitProgressCallback(report) {
+    console.log("Advanced Math Initialize", report.progress);
+    // Instead of updating a status span, log the progress
+    logMessage(`Model Initialization Progress: ${report.text}`, "system");
+  }
+
+  const mathEngine = new webllm.MLCEngine();
+  mathEngine.setInitProgressCallback(mathUpdateEngineInitProgressCallback);
+
+  let mathIsGenerating = false; // Flag to prevent multiple generations
+
+  async function mathInitializeWebLLMEngine() {
+    logMessage("Model initialization started.", "system");
+    document.getElementById("math-loading-spinner").classList.remove("hidden"); // Show spinner
+    mathSelectedModel = document.getElementById("math-model-selection").value;
+    const config = {
+      temperature: 0.7, // Adjusted for more precise answers
+      top_p: 0.9
+    };
+    try {
+      await mathEngine.reload(mathSelectedModel, config);
+      document.getElementById("math-selected-model").textContent = mathSelectedModel;
+      document.getElementById("math-start_button").disabled = false;
+      document.getElementById("math-text-input").disabled = false; // Enable text input after initialization
+      document.getElementById("math-submit-button").disabled = false; // Enable submit button after initialization
+      document.getElementById("math-speech-controls").disabled = false; // Enable speech controls after initialization
+      document.getElementById("math-configuration").classList.remove("hidden");
+      logMessage("Model initialized successfully.", "system");
+    } catch (error) {
+      console.error("Error initializing the model:", error);
+      alert("Failed to initialize the model. Please try again.");
+      logMessage("Failed to initialize the model.", "error");
+    } finally {
+      document.getElementById("math-loading-spinner").classList.add("hidden"); // Hide spinner
+    }
+  }
+
+  async function mathStreamingGenerating(messages, onUpdate, onFinish, onError) {
+    if (mathIsGenerating) {
+      console.warn("Advanced Math Generation already in progress.");
+      return;
+    }
+    mathIsGenerating = true;
+    try {
+      let curMessage = "";
+      const completion = await mathEngine.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 mathEngine.getMessage();
+      console.log(`Advanced Math Generated final message: ${finalMessage}`); // Debugging
+      onFinish(finalMessage);
+      logMessage("Response generated successfully.", "system");
+    } catch (err) {
+      console.error(err);
+      onError(err);
+      logMessage("An error occurred during response generation.", "error");
+    } finally {
+      mathIsGenerating = false;
+    }
+  }
+
+  // Flag to track the last input method
+  let mathLastInputWasVoice = false;
+
+  function mathAppendMessage(message) {
+    console.log(`Advanced Math Appending message: ${message.content} (Role: ${message.role})`); // Debugging
+    const mathChatBox = document.getElementById("math-chat-box");
+
+    // Check if the assistant's message is already appended to avoid duplication
+    if (message.role === "assistant") {
+      const existingMessages = mathChatBox.querySelectorAll(".message");
+      const lastMessage = existingMessages[existingMessages.length - 1];
+      if (lastMessage && lastMessage.textContent === message.content) {
+        console.warn("Duplicate assistant message detected in Advanced Math section, skipping append.");
+
+        // Only trigger TTS for assistant messages if the last input was via voice
+        if (message.role === "assistant" && message.content !== "typing..." && mathLastInputWasVoice) {
+          mathSpeak(message.content);
+        }
+
+        return; // Exit to avoid appending the same message twice
+      }
+    }
+
+    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);
+    mathChatBox.appendChild(container);
+    mathChatBox.scrollTop = mathChatBox.scrollHeight;
+
+    // Only trigger TTS for assistant messages if the last input was via voice
+    if (message.role === "assistant" && message.content !== "typing..." && mathLastInputWasVoice) {
+      mathSpeak(message.content);
+    }
+  }
+
+  function mathUpdateLastMessage(content) {
+    const messageDoms = document.getElementById("math-chat-box").querySelectorAll(".message");
+    const lastMessageDom = messageDoms[messageDoms.length - 1];
+    lastMessageDom.textContent = content;
+  }
+
+  function mathOnSpeechRecognized(transcript) {
+    const input = transcript.trim();
+    const message = {
+      content: input,
+      role: "user"
+    };
+    if (input.length === 0) {
+      return;
+    }
+    mathLastInputWasVoice = true; // Set flag as voice input
+    console.log(`Advanced Math Voice input received: ${input}`); // Debugging
+    document.getElementById("math-start_button").disabled = true;
+    document.getElementById("math-submit-button").disabled = true; // Disable submit button during processing
+
+    mathMessages.push(message);
+    mathAppendMessage(message);
+    logMessage(`User (Voice): ${input}`, "user");
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    mathAppendMessage(aiPlaceholder);
+    logMessage("AdvancedMathBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Advanced Math Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const mathChatBox = document.getElementById("math-chat-box");
+      const lastMessageContainer = mathChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        mathChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      mathAppendMessage(aiMessage);
+      logMessage(`AdvancedMathBot: ${finalMessage}`, "assistant");
+
+      document.getElementById("math-start_button").disabled = false;
+      document.getElementById("math-submit-button").disabled = false; // Re-enable submit button after processing
+      mathEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("math-chat-stats").classList.remove("hidden");
+        document.getElementById("math-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    mathStreamingGenerating(
+      mathMessages,
+      mathUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("math-start_button").disabled = false;
+        document.getElementById("math-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Speech Recognition Code for Advanced Math
+  let mathRecognizing = false;
+  let mathIgnore_onend;
+  let mathFinal_transcript = '';
+  let mathRecognition;
+
+  function mathStartButton(event) {
+    if (mathRecognizing) {
+      mathRecognition.stop();
+      return;
+    }
+    mathFinal_transcript = '';
+    mathRecognition.lang = 'en-US';
+    mathRecognition.start();
+    mathIgnore_onend = false;
+    document.getElementById("math-start_button").classList.add("mic-animate");
+    logMessage("Voice input started.", "system");
+  }
+
+  if (!('webkitSpeechRecognition' in window)) {
+    alert("Web Speech API is not supported by this browser.");
+    logMessage("Web Speech API is not supported by this browser.", "error");
+  } else {
+    mathRecognition = new webkitSpeechRecognition();
+    mathRecognition.continuous = false; // Non-continuous recognition
+    mathRecognition.interimResults = false; // Get only final results
+
+    mathRecognition.onstart = function() {
+      mathRecognizing = true;
+      logMessage("Speech recognition started.", "system");
+    };
+
+    mathRecognition.onerror = function(event) {
+      if (event.error == 'no-speech') {
+        document.getElementById("math-start_button").classList.remove("mic-animate");
+        alert('No speech was detected in Advanced Mathematics section.');
+        logMessage("No speech detected.", "error");
+        mathIgnore_onend = true;
+      }
+      if (event.error == 'audio-capture') {
+        document.getElementById("math-start_button").classList.remove("mic-animate");
+        alert('No microphone was found in Advanced Mathematics section.');
+        logMessage("No microphone found.", "error");
+        mathIgnore_onend = true;
+      }
+      if (event.error == 'not-allowed') {
+        alert('Permission to use microphone was denied in Advanced Mathematics section.');
+        logMessage("Microphone permission denied.", "error");
+        mathIgnore_onend = true;
+      }
+    };
+
+    mathRecognition.onend = function() {
+      mathRecognizing = false;
+      document.getElementById("math-start_button").classList.remove("mic-animate");
+      logMessage("Speech recognition ended.", "system");
+      if (mathIgnore_onend) {
+        return;
+      }
+      if (!mathFinal_transcript) {
+        logMessage("No transcript captured.", "error");
+        return;
+      }
+      // Process the final transcript
+      mathOnSpeechRecognized(mathFinal_transcript);
+    };
+
+    mathRecognition.onresult = function(event) {
+      for (let i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+          mathFinal_transcript += event.results[i][0].transcript;
+        }
+      }
+      mathFinal_transcript = mathFinal_transcript.trim();
+      logMessage(`Recognized Speech: ${mathFinal_transcript}`, "user");
+    };
+  }
+
+  document.getElementById("math-start_button").addEventListener("click", function(event) {
+    mathStartButton(event);
+  });
+
+  // Initialize Model Selection
+  mathAvailableModels.forEach((modelId) => {
+    const option = document.createElement("option");
+    option.value = modelId;
+    option.textContent = modelId;
+    document.getElementById("math-model-selection").appendChild(option);
+  });
+  document.getElementById("math-model-selection").value = mathSelectedModel;
+
+  // **Enable the Download Model button after models are loaded**
+  document.getElementById("math-download").disabled = false;
+
+  document.getElementById("math-download").addEventListener("click", function () {
+    mathInitializeWebLLMEngine().then(() => {
+      document.getElementById("math-start_button").disabled = false;
+      // Enable speech controls after model initialization
+      document.getElementById("math-speech-rate").disabled = false;
+      document.getElementById("math-speech-pitch").disabled = false;
+      logMessage("Model download initiated.", "system");
+    });
+  });
+
+  document.getElementById("math-clear-logs").addEventListener("click", function () {
+    document.getElementById("math-logs").innerHTML = '';
+    logMessage("Logs cleared.", "system");
+  });
+
+  // ===== TTS Integration =====
+
+  // Initialize Speech Synthesis
+  let mathSpeech = new SpeechSynthesisUtterance();
+  mathSpeech.lang = "en";
+
+  let mathVoices = [];
+
+  // Use addEventListener instead of directly assigning to onvoiceschanged
+  window.speechSynthesis.addEventListener("voiceschanged", () => {
+    mathVoices = window.speechSynthesis.getVoices();
+    mathPopulateVoices();
+  });
+
+  function mathPopulateVoices() {
+    const voiceSelect = document.getElementById("math-tools");
+    voiceSelect.innerHTML = ''; // Clear existing options
+    mathVoices.forEach((voice, i) => {
+      const option = new Option(voice.name, i);
+      voiceSelect.appendChild(option);
+    });
+    if (mathVoices.length > 0) {
+      const savedVoice = localStorage.getItem("mathSelectedVoice");
+      if (savedVoice !== null && mathVoices[savedVoice]) {
+        mathSpeech.voice = mathVoices[savedVoice];
+        voiceSelect.value = savedVoice;
+      } else {
+        mathSpeech.voice = mathVoices[0];
+      }
+    }
+  }
+
+  // Voice Selection Event Listener
+  document.getElementById("math-tools").addEventListener("change", () => {
+    const selectedVoiceIndex = document.getElementById("math-tools").value;
+    mathSpeech.voice = mathVoices[selectedVoiceIndex];
+    // Save to localStorage
+    localStorage.setItem("mathSelectedVoice", selectedVoiceIndex);
+    logMessage(`Voice changed to: ${mathVoices[selectedVoiceIndex].name}`, "system");
+  });
+
+  // Function to Speak Text with Voice Selection and Handling Large Texts
+  function mathSpeak(text) {
+    if (!window.speechSynthesis) {
+      console.warn("Speech Synthesis not supported in this browser for Advanced Mathematics section.");
+      logMessage("Speech Synthesis not supported in this browser.", "error");
+      return;
+    }
+
+    // Show spinner and enable Stop button
+    document.getElementById("math-loading-spinner").classList.remove("hidden");
+    document.getElementById("math-stop_button").disabled = false;
+    logMessage("TTS started.", "system");
+
+    // Retrieve the currently selected voice
+    const selectedVoice = mathSpeech.voice;
+
+    // Split the text into sentences to manage large texts
+    const sentences = text.match(/[^\.!\?]+[\.!\?]+/g) || [text];
+
+    let utterancesCount = sentences.length;
+
+    sentences.forEach(sentence => {
+      const utterance = new SpeechSynthesisUtterance(sentence.trim());
+
+      // Assign the selected voice to the utterance
+      if (selectedVoice) {
+        utterance.voice = selectedVoice;
+      }
+
+      // Assign rate and pitch from sliders
+      const rate = parseFloat(document.getElementById("math-speech-rate").value);
+      const pitch = parseFloat(document.getElementById("math-speech-pitch").value);
+      utterance.rate = rate; // Adjust the speaking rate (0.1 to 10)
+      utterance.pitch = pitch; // Adjust the pitch (0 to 2)
+
+      // Add event listeners for debugging or additional functionality
+      utterance.onstart = () => {
+        console.log("Speech started:", sentence);
+        logMessage(`TTS started: ${sentence.trim()}`, "system");
+      };
+
+      utterance.onend = () => {
+        console.log("Speech ended:", sentence);
+        logMessage(`TTS ended: ${sentence.trim()}`, "system");
+        utterancesCount--;
+        if (utterancesCount === 0) {
+          // Hide spinner and disable Stop button when all utterances have been spoken
+          document.getElementById("math-loading-spinner").classList.add("hidden");
+          document.getElementById("math-stop_button").disabled = true;
+          logMessage("All TTS messages have been spoken.", "system");
+        }
+      };
+
+      utterance.onerror = (e) => {
+        console.error("Speech Synthesis Error:", e);
+        alert("An error occurred during speech synthesis. Please try again.");
+        logMessage("Speech synthesis encountered an error.", "error");
+        utterancesCount = 0;
+        document.getElementById("math-loading-spinner").classList.add("hidden");
+        document.getElementById("math-stop_button").disabled = true;
+      };
+
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  // ===== New: Stop Speech Functionality =====
+
+  /**
+   * Stops any ongoing speech synthesis.
+   */
+  function mathStopSpeech() {
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+      document.getElementById("math-loading-spinner").classList.add("hidden");
+      document.getElementById("math-stop_button").disabled = true;
+      logMessage("Speech synthesis stopped by user.", "system");
+    }
+  }
+
+  // Event Listener for Stop Button
+  document.getElementById("math-stop_button").addEventListener("click", function () {
+    mathStopSpeech();
+  });
+
+  // ===== New: Text Input Handling =====
+
+  // Function to Handle Text Submission
+  function mathHandleTextSubmit() {
+    const textInput = document.getElementById("math-text-input");
+    const input = textInput.value.trim();
+    if (input.length === 0) {
+      return;
+    }
+    textInput.value = ''; // Clear the input field
+    const message = {
+      content: input,
+      role: "user" // Ensure this is correctly set
+    };
+    console.log(`Advanced Math Text input received: ${input}`); // Debugging
+    logMessage(`User: ${input}`, "user");
+
+    mathLastInputWasVoice = false; // Set flag as text input
+    document.getElementById("math-submit-button").disabled = true; // Disable to prevent multiple submissions
+
+    mathMessages.push(message);
+    mathAppendMessage(message);
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    mathAppendMessage(aiPlaceholder);
+    logMessage("AdvancedMathBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Advanced Math Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const mathChatBox = document.getElementById("math-chat-box");
+      const lastMessageContainer = mathChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        mathChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      mathAppendMessage(aiMessage);
+      logMessage(`AdvancedMathBot: ${finalMessage}`, "assistant");
+
+      // Trigger TTS for assistant messages if required
+      if (mathLastInputWasVoice) {
+        mathSpeak(finalMessage);
+      }
+
+      document.getElementById("math-submit-button").disabled = false; // Re-enable submit button after processing
+      mathEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("math-chat-stats").classList.remove("hidden");
+        document.getElementById("math-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    mathStreamingGenerating(
+      mathMessages,
+      mathUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("math-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Event Listener for Submit Button
+  document.getElementById("math-submit-button").addEventListener("click", function () {
+    mathHandleTextSubmit();
+  });
+
+  // Event Listener for Enter Key in Text Input
+  document.getElementById("math-text-input").addEventListener("keypress", function (e) {
+    if (e.key === 'Enter') {
+      mathHandleTextSubmit();
+    }
+  });
+
+  // ===== Persisting User Preferences =====
+
+  // Load Preferences on Initialization
+  window.addEventListener("load", () => {
+    const savedVoice = localStorage.getItem("mathSelectedVoice");
+    if (savedVoice !== null && mathVoices[savedVoice]) {
+      document.getElementById("math-tools").value = savedVoice;
+      mathSpeech.voice = mathVoices[savedVoice];
+      logMessage(`Loaded saved voice: ${mathVoices[savedVoice].name}`, "system");
+    }
+
+    const savedRate = localStorage.getItem("mathSpeechRate");
+    if (savedRate !== null) {
+      document.getElementById("math-speech-rate").value = savedRate;
+      mathSpeech.rate = parseFloat(savedRate);
+      logMessage(`Loaded saved speech rate: ${savedRate}`, "system");
+    }
+
+    const savedPitch = localStorage.getItem("mathSpeechPitch");
+    if (savedPitch !== null) {
+      document.getElementById("math-speech-pitch").value = savedPitch;
+      mathSpeech.pitch = parseFloat(savedPitch);
+      logMessage(`Loaded saved speech pitch: ${savedPitch}`, "system");
+    }
+  });
+
+  // Save Speech Rate
+  document.getElementById("math-speech-rate").addEventListener("input", (e) => {
+    const rate = e.target.value;
+    mathSpeech.rate = parseFloat(rate);
+    localStorage.setItem("mathSpeechRate", rate);
+    logMessage(`Speech rate changed to: ${rate}`, "system");
+  });
+
+  // Save Speech Pitch
+  document.getElementById("math-speech-pitch").addEventListener("input", (e) => {
+    const pitch = e.target.value;
+    mathSpeech.pitch = parseFloat(pitch);
+    localStorage.setItem("mathSpeechPitch", pitch);
+    logMessage(`Speech pitch changed to: ${pitch}`, "system");
+  });
+
+  // ===== Logging Function =====
+
+  /**
+   * Logs messages to the #math-logs container.
+   * @param {string} message - The message to log.
+   * @param {string} type - The type of message: 'user', 'assistant', 'system', 'error'.
+   */
+  function logMessage(message, type) {
+    const mathLogs = document.getElementById("math-logs");
+    const logEntry = document.createElement("div");
+    logEntry.classList.add("log-entry");
+    logEntry.textContent = `[${type.toUpperCase()}] ${message}`;
+
+    // Style log entries based on type
+    switch(type) {
+      case 'user':
+        logEntry.style.color = "#00796B";
+        break;
+      case 'assistant':
+        logEntry.style.color = "#004D40";
+        break;
+      case 'system':
+        logEntry.style.color = "#555555";
+        break;
+      case 'error':
+        logEntry.style.color = "#E53935";
+        break;
+      default:
+        logEntry.style.color = "#000000";
+    }
+
+    mathLogs.appendChild(logEntry);
+    mathLogs.scrollTop = mathLogs.scrollHeight;
+  }
+
+  // ===== TTS Integration Continued =====
+
+  // Optional: Global Listener to Detect When All Speech Has Finished
+  window.speechSynthesis.addEventListener('end', () => {
+    console.log("All advanced math speech has been spoken.");
+    logMessage("All TTS messages have been spoken.", "system");
+    // Ensure Stop button is disabled after speech ends
+    document.getElementById("math-stop_button").disabled = true;
+  });
+});

base.css

@@ -0,0 +1,242 @@
+/* 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;
+}
+
+
+
+/* Hidden Class */
+.hidden {
+  display: none;
+}
+
+/* Scrollbar Styling */
+#chat-box::-webkit-scrollbar,
+#logs::-webkit-scrollbar {
+  width: 8px;
+}
+
+
+/* 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;
+  }
+}
+
+
+/* Configuration Info */
+#configuration {
+  margin-top: 15px;
+  font-size: 0.9em;
+  color: #555555;
+}
+
+
+/* Controls Container Styling */
+#controls {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
+}
+
+
+
+/* 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;
+}
+
+
+/* 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);
+}
+

coder.css

@@ -0,0 +1,422 @@
+/* coder.css */
+
+/* Reset and Base Styles */
+#coder * {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+/* Card Styling */
+.coder-card {
+  display: flex;
+  gap: 20px;
+  background: linear-gradient(135deg, #ffffff, #f1f8e9);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 25px;
+  margin: 25px auto;
+
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+.coder-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #e0f7fa, #ffffff);
+}
+
+/* Flex Layout for Coder Options and Chat Window */
+.coder-options {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Ensure Coder Options takes up available vertical space */
+.coder-options {
+  height: 100%;
+}
+
+/* Chat Window Styling */
+.chat-window {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Option Sections Styling */
+.option-section {
+  background-color: #ffffff;
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.option-section:hover {
+  background-color: #f9f9f9;
+}
+
+/* Button Styling (Reused from Original) */
+#coder 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);
+}
+
+#coder button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#coder button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Select Dropdown Styling (Reused from Original) */
+#coder 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;
+}
+
+#coder select:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+/* Speech Controls Styling */
+#coder-speech-controls label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555555;
+  font-weight: 500;
+}
+
+#coder-speech-controls input[type="range"] {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Logs Container Styling */
+#coder-logs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 200px; /* Set a maximum height for the logs container */
+  overflow: hidden; /* Hide any overflow to prevent the container from expanding */
+}
+
+#coder-logs {
+  flex: 1;
+  max-height: 200px; /* Adjust as needed */
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto; /* Enable vertical scrolling */
+  padding: 10px;
+  background-color: #f9f9f9;
+  font-size: 0.85em;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+#coder-clear-logs {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #FF5252, #E53935);
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  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);
+}
+
+#coder-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 Box Styling */
+#coder-chat-box {
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+}
+
+/* Message Styling */
+#coder .message-container {
+  margin-bottom: 20px;
+  display: flex;
+}
+
+#coder .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;
+}
+
+#coder .user .message {
+  background: #DCF8C6;
+  border-bottom-right-radius: 0;
+}
+
+#coder .assistant .message {
+  background: #e3f2fd;
+  border-bottom-left-radius: 0;
+}
+
+/* Chat Input Container Styling */
+#coder-text-input-container {
+  display: flex;
+  gap: 10px;
+}
+
+#coder-text-input {
+  flex: 1;
+  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;
+}
+
+#coder-text-input:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+#coder-submit-button {
+  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);
+}
+
+#coder-submit-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#coder-submit-button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Microphone and Stop Buttons Styling */
+#coder-mic-container {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+#coder-start_button,
+#coder-stop_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);
+}
+
+#coder-stop_button {
+  background: linear-gradient(135deg, #E53935, #D32F2F);
+}
+
+#coder-start_button::before,
+#coder-stop_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;
+}
+
+#coder-start_button:active::before,
+#coder-stop_button:active::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+#coder-start_button:disabled,
+#coder-stop_button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+#coder-start_button:hover:not(:disabled),
+#coder-stop_button:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+#coder-stop_button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #D32F2F, #C62828);
+}
+
+/* Icon Styling */
+#coder .mic-icon,
+#coder .stop-icon {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s;
+  fill: #ffffff;
+}
+
+/* Animation for Mic Icon */
+#coder .mic-animate {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Stats */
+#coder-chat-stats {
+  font-size: 0.85em;
+  color: #555555;
+  text-align: center;
+  margin-top: 10px;
+}
+
+/* Hidden Class */
+#coder .hidden {
+  display: none;
+}
+
+/* Scrollbar Styling */
+#coder-chat-box::-webkit-scrollbar,
+#coder-logs::-webkit-scrollbar {
+  width: 8px;
+}
+
+#coder-chat-box::-webkit-scrollbar-track,
+#coder-logs::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+#coder-chat-box::-webkit-scrollbar-thumb,
+#coder-logs::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 4px;
+}
+
+#coder-chat-box::-webkit-scrollbar-thumb:hover,
+#coder-logs::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Initialize Button Styling (Reused from Original) */
+#coder-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);
+}
+
+#coder-download:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#coder-download:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Configuration Info Styling */
+#coder-configuration {
+  margin-top: 15px;
+  font-size: 0.9em;
+  color: #555555;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 800px) {
+  .coder-card {
+    flex-direction: column;
+  }
+
+  /* Adjust Logs Container Height for Smaller Screens */
+  #coder-logs-container {
+    max-height: 200px;
+  }
+
+  #coder-logs {
+    max-height: 150px;
+  }
+}

coder.js

@@ -0,0 +1,612 @@
+// coder.js
+import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+
+// Ensure the script runs after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize the Young Coder section
+  const coderMessages = [
+    {
+      content: "You are Aged Guru, an intelligent assistant skilled in coding and software development. Provide insightful and comprehensive answers to complex programming questions.",
+      role: "system"
+    }
+  ];
+
+  const coderAvailableModels = webllm.prebuiltAppConfig.model_list.map(
+    (m) => m.model_id
+  );
+  let coderSelectedModel = "Qwen2.5-Coder-1.5B-Instruct-q4f16_1-MLC"; // Default model
+
+  function coderUpdateEngineInitProgressCallback(report) {
+    console.log("Coder Initialize", report.progress);
+    // Instead of updating a status span, log the progress
+    logMessage(`Model Initialization Progress: ${report.text}`, "system");
+  }
+
+  const coderEngine = new webllm.MLCEngine();
+  coderEngine.setInitProgressCallback(coderUpdateEngineInitProgressCallback);
+
+  let coderIsGenerating = false; // Flag to prevent multiple generations
+
+  async function coderInitializeWebLLMEngine() {
+    logMessage("Model initialization started.", "system");
+    document.getElementById("coder-loading-spinner").classList.remove("hidden"); // Show spinner
+    coderSelectedModel = document.getElementById("coder-model-selection").value;
+    const config = {
+      temperature: 0.7, // Adjusted for more precise answers
+      top_p: 0.9
+    };
+    try {
+      await coderEngine.reload(coderSelectedModel, config);
+      document.getElementById("coder-selected-model").textContent = coderSelectedModel;
+      document.getElementById("coder-start_button").disabled = false;
+      document.getElementById("coder-text-input").disabled = false; // Enable text input after initialization
+      document.getElementById("coder-submit-button").disabled = false; // Enable submit button after initialization
+      document.getElementById("coder-speech-controls").disabled = false; // Enable speech controls after initialization
+      document.getElementById("coder-configuration").classList.remove("hidden");
+      logMessage("Model initialized successfully.", "system");
+    } catch (error) {
+      console.error("Error initializing the model:", error);
+      alert("Failed to initialize the model. Please try again.");
+      logMessage("Failed to initialize the model.", "error");
+    } finally {
+      document.getElementById("coder-loading-spinner").classList.add("hidden"); // Hide spinner
+    }
+  }
+
+  async function coderStreamingGenerating(messages, onUpdate, onFinish, onError) {
+    if (coderIsGenerating) {
+      console.warn("Coder Generation already in progress.");
+      return;
+    }
+    coderIsGenerating = true;
+    try {
+      let curMessage = "";
+      const completion = await coderEngine.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 coderEngine.getMessage();
+      console.log(`Coder Generated final message: ${finalMessage}`); // Debugging
+      onFinish(finalMessage);
+      logMessage("Response generated successfully.", "system");
+    } catch (err) {
+      console.error(err);
+      onError(err);
+      logMessage("An error occurred during response generation.", "error");
+    } finally {
+      coderIsGenerating = false;
+    }
+  }
+
+  // Flag to track the last input method
+  let coderLastInputWasVoice = false;
+
+  function coderAppendMessage(message) {
+    console.log(`Coder Appending message: ${message.content} (Role: ${message.role})`); // Debugging
+    const coderChatBox = document.getElementById("coder-chat-box");
+
+    // Check if the assistant's message is already appended to avoid duplication
+    if (message.role === "assistant") {
+      const existingMessages = coderChatBox.querySelectorAll(".message");
+      const lastMessage = existingMessages[existingMessages.length - 1];
+      if (lastMessage && lastMessage.textContent === message.content) {
+        console.warn("Duplicate assistant message detected in Coder section, skipping append.");
+
+        // Only trigger TTS for assistant messages if the last input was via voice
+        if (message.role === "assistant" && message.content !== "typing..." && coderLastInputWasVoice) {
+          coderSpeak(message.content);
+        }
+
+        return; // Exit to avoid appending the same message twice
+      }
+    }
+
+    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);
+    coderChatBox.appendChild(container);
+    coderChatBox.scrollTop = coderChatBox.scrollHeight;
+
+    // Only trigger TTS for assistant messages if the last input was via voice
+    if (message.role === "assistant" && message.content !== "typing..." && coderLastInputWasVoice) {
+      coderSpeak(message.content);
+    }
+  }
+
+  function coderUpdateLastMessage(content) {
+    const messageDoms = document.getElementById("coder-chat-box").querySelectorAll(".message");
+    const lastMessageDom = messageDoms[messageDoms.length - 1];
+    lastMessageDom.textContent = content;
+  }
+
+  function coderOnSpeechRecognized(transcript) {
+    const input = transcript.trim();
+    const message = {
+      content: input,
+      role: "user"
+    };
+    if (input.length === 0) {
+      return;
+    }
+    coderLastInputWasVoice = true; // Set flag as voice input
+    console.log(`Coder Voice input received: ${input}`); // Debugging
+    document.getElementById("coder-start_button").disabled = true;
+    document.getElementById("coder-submit-button").disabled = true; // Disable submit button during processing
+
+    coderMessages.push(message);
+    coderAppendMessage(message);
+    logMessage(`User (Voice): ${input}`, "user");
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    coderAppendMessage(aiPlaceholder);
+    logMessage("CoderBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Coder Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const coderChatBox = document.getElementById("coder-chat-box");
+      const lastMessageContainer = coderChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        coderChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      coderAppendMessage(aiMessage);
+      logMessage(`CoderBot: ${finalMessage}`, "assistant");
+
+      document.getElementById("coder-start_button").disabled = false;
+      document.getElementById("coder-submit-button").disabled = false; // Re-enable submit button after processing
+      coderEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("coder-chat-stats").classList.remove("hidden");
+        document.getElementById("coder-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    coderStreamingGenerating(
+      coderMessages,
+      coderUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("coder-start_button").disabled = false;
+        document.getElementById("coder-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Speech Recognition Code for Coder
+  let coderRecognizing = false;
+  let coderIgnore_onend;
+  let coderFinal_transcript = '';
+  let coderRecognition;
+
+  function coderStartButton(event) {
+    if (coderRecognizing) {
+      coderRecognition.stop();
+      return;
+    }
+    coderFinal_transcript = '';
+    coderRecognition.lang = 'en-US';
+    coderRecognition.start();
+    coderIgnore_onend = false;
+    document.getElementById("coder-start_button").classList.add("mic-animate");
+    logMessage("Voice input started.", "system");
+  }
+
+  if (!('webkitSpeechRecognition' in window)) {
+    alert("Web Speech API is not supported by this browser.");
+    logMessage("Web Speech API is not supported by this browser.", "error");
+  } else {
+    coderRecognition = new webkitSpeechRecognition();
+    coderRecognition.continuous = false; // Non-continuous recognition
+    coderRecognition.interimResults = false; // Get only final results
+
+    coderRecognition.onstart = function() {
+      coderRecognizing = true;
+      logMessage("Speech recognition started.", "system");
+    };
+
+    coderRecognition.onerror = function(event) {
+      if (event.error == 'no-speech') {
+        document.getElementById("coder-start_button").classList.remove("mic-animate");
+        alert('No speech was detected in Coder section.');
+        logMessage("No speech detected.", "error");
+        coderIgnore_onend = true;
+      }
+      if (event.error == 'audio-capture') {
+        document.getElementById("coder-start_button").classList.remove("mic-animate");
+        alert('No microphone was found in Coder section.');
+        logMessage("No microphone found.", "error");
+        coderIgnore_onend = true;
+      }
+      if (event.error == 'not-allowed') {
+        alert('Permission to use microphone was denied in Coder section.');
+        logMessage("Microphone permission denied.", "error");
+        coderIgnore_onend = true;
+      }
+    };
+
+    coderRecognition.onend = function() {
+      coderRecognizing = false;
+      document.getElementById("coder-start_button").classList.remove("mic-animate");
+      logMessage("Speech recognition ended.", "system");
+      if (coderIgnore_onend) {
+        return;
+      }
+      if (!coderFinal_transcript) {
+        logMessage("No transcript captured.", "error");
+        return;
+      }
+      // Process the final transcript
+      coderOnSpeechRecognized(coderFinal_transcript);
+    };
+
+    coderRecognition.onresult = function(event) {
+      for (let i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+          coderFinal_transcript += event.results[i][0].transcript;
+        }
+      }
+      coderFinal_transcript = coderFinal_transcript.trim();
+      logMessage(`Recognized Speech: ${coderFinal_transcript}`, "user");
+    };
+  }
+
+  document.getElementById("coder-start_button").addEventListener("click", function(event) {
+    coderStartButton(event);
+  });
+
+  // Initialize Model Selection
+  coderAvailableModels.forEach((modelId) => {
+    const option = document.createElement("option");
+    option.value = modelId;
+    option.textContent = modelId;
+    document.getElementById("coder-model-selection").appendChild(option);
+  });
+  document.getElementById("coder-model-selection").value = coderSelectedModel;
+
+  // **Enable the Download Model button after models are loaded**
+  document.getElementById("coder-download").disabled = false;
+
+  document.getElementById("coder-download").addEventListener("click", function () {
+    coderInitializeWebLLMEngine().then(() => {
+      document.getElementById("coder-start_button").disabled = false;
+      // Enable speech controls after model initialization
+      document.getElementById("coder-speech-rate").disabled = false;
+      document.getElementById("coder-speech-pitch").disabled = false;
+      logMessage("Model download initiated.", "system");
+    });
+  });
+
+  document.getElementById("coder-clear-logs").addEventListener("click", function () {
+    document.getElementById("coder-logs").innerHTML = '';
+    logMessage("Logs cleared.", "system");
+  });
+
+  // ===== TTS Integration =====
+
+  // Initialize Speech Synthesis
+  let coderSpeech = new SpeechSynthesisUtterance();
+  coderSpeech.lang = "en";
+
+  let coderVoices = [];
+
+  // Use addEventListener instead of directly assigning to onvoiceschanged
+  window.speechSynthesis.addEventListener("voiceschanged", () => {
+    coderVoices = window.speechSynthesis.getVoices();
+    coderPopulateVoices();
+  });
+
+  function coderPopulateVoices() {
+    const voiceSelect = document.getElementById("coder-tools");
+    voiceSelect.innerHTML = ''; // Clear existing options
+    coderVoices.forEach((voice, i) => {
+      const option = new Option(voice.name, i);
+      voiceSelect.appendChild(option);
+    });
+    if (coderVoices.length > 0) {
+      const savedVoice = localStorage.getItem("coderSelectedVoice");
+      if (savedVoice !== null && coderVoices[savedVoice]) {
+        coderSpeech.voice = coderVoices[savedVoice];
+        voiceSelect.value = savedVoice;
+      } else {
+        coderSpeech.voice = coderVoices[0];
+      }
+    }
+  }
+
+  // Voice Selection Event Listener
+  document.getElementById("coder-tools").addEventListener("change", () => {
+    const selectedVoiceIndex = document.getElementById("coder-tools").value;
+    coderSpeech.voice = coderVoices[selectedVoiceIndex];
+    // Save to localStorage
+    localStorage.setItem("coderSelectedVoice", selectedVoiceIndex);
+    logMessage(`Voice changed to: ${coderVoices[selectedVoiceIndex].name}`, "system");
+  });
+
+  // Function to Speak Text with Voice Selection and Handling Large Texts
+  function coderSpeak(text) {
+    if (!window.speechSynthesis) {
+      console.warn("Speech Synthesis not supported in this browser for Coder section.");
+      logMessage("Speech Synthesis not supported in this browser.", "error");
+      return;
+    }
+
+    // Show spinner and enable Stop button
+    document.getElementById("coder-loading-spinner").classList.remove("hidden");
+    document.getElementById("coder-stop_button").disabled = false;
+    logMessage("TTS started.", "system");
+
+    // Retrieve the currently selected voice
+    const selectedVoice = coderSpeech.voice;
+
+    // Split the text into sentences to manage large texts
+    const sentences = text.match(/[^\.!\?]+[\.!\?]+/g) || [text];
+
+    let utterancesCount = sentences.length;
+
+    sentences.forEach(sentence => {
+      const utterance = new SpeechSynthesisUtterance(sentence.trim());
+
+      // Assign the selected voice to the utterance
+      if (selectedVoice) {
+        utterance.voice = selectedVoice;
+      }
+
+      // Assign rate and pitch from sliders
+      const rate = parseFloat(document.getElementById("coder-speech-rate").value);
+      const pitch = parseFloat(document.getElementById("coder-speech-pitch").value);
+      utterance.rate = rate; // Adjust the speaking rate (0.1 to 10)
+      utterance.pitch = pitch; // Adjust the pitch (0 to 2)
+
+      // Add event listeners for debugging or additional functionality
+      utterance.onstart = () => {
+        console.log("Speech started:", sentence);
+        logMessage(`TTS started: ${sentence.trim()}`, "system");
+      };
+
+      utterance.onend = () => {
+        console.log("Speech ended:", sentence);
+        logMessage(`TTS ended: ${sentence.trim()}`, "system");
+        utterancesCount--;
+        if (utterancesCount === 0) {
+          // Hide spinner and disable Stop button when all utterances have been spoken
+          document.getElementById("coder-loading-spinner").classList.add("hidden");
+          document.getElementById("coder-stop_button").disabled = true;
+          logMessage("All TTS messages have been spoken.", "system");
+        }
+      };
+
+      utterance.onerror = (e) => {
+        console.error("Speech Synthesis Error:", e);
+        alert("An error occurred during speech synthesis. Please try again.");
+        logMessage("Speech synthesis encountered an error.", "error");
+        utterancesCount = 0;
+        document.getElementById("coder-loading-spinner").classList.add("hidden");
+        document.getElementById("coder-stop_button").disabled = true;
+      };
+
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  // ===== New: Stop Speech Functionality =====
+
+  /**
+   * Stops any ongoing speech synthesis.
+   */
+  function coderStopSpeech() {
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+      document.getElementById("coder-loading-spinner").classList.add("hidden");
+      document.getElementById("coder-stop_button").disabled = true;
+      logMessage("Speech synthesis stopped by user.", "system");
+    }
+  }
+
+  // Event Listener for Stop Button
+  document.getElementById("coder-stop_button").addEventListener("click", function () {
+    coderStopSpeech();
+  });
+
+  // ===== New: Text Input Handling =====
+
+  // Function to Handle Text Submission
+  function coderHandleTextSubmit() {
+    const textInput = document.getElementById("coder-text-input");
+    const input = textInput.value.trim();
+    if (input.length === 0) {
+      return;
+    }
+    textInput.value = ''; // Clear the input field
+    const message = {
+      content: input,
+      role: "user" // Ensure this is correctly set
+    };
+    console.log(`Coder Text input received: ${input}`); // Debugging
+    logMessage(`User: ${input}`, "user");
+
+    coderLastInputWasVoice = false; // Set flag as text input
+    document.getElementById("coder-submit-button").disabled = true; // Disable to prevent multiple submissions
+
+    coderMessages.push(message);
+    coderAppendMessage(message);
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    coderAppendMessage(aiPlaceholder);
+    logMessage("CoderBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Coder Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const coderChatBox = document.getElementById("coder-chat-box");
+      const lastMessageContainer = coderChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        coderChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      coderAppendMessage(aiMessage);
+      logMessage(`CoderBot: ${finalMessage}`, "assistant");
+
+      // Trigger TTS for assistant messages if required
+      if (coderLastInputWasVoice) {
+        coderSpeak(finalMessage);
+      }
+
+      document.getElementById("coder-submit-button").disabled = false; // Re-enable submit button after processing
+      coderEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("coder-chat-stats").classList.remove("hidden");
+        document.getElementById("coder-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    coderStreamingGenerating(
+      coderMessages,
+      coderUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("coder-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Event Listener for Submit Button
+  document.getElementById("coder-submit-button").addEventListener("click", function () {
+    coderHandleTextSubmit();
+  });
+
+  // Event Listener for Enter Key in Text Input
+  document.getElementById("coder-text-input").addEventListener("keypress", function (e) {
+    if (e.key === 'Enter') {
+      coderHandleTextSubmit();
+    }
+  });
+
+  // ===== Persisting User Preferences =====
+
+  // Load Preferences on Initialization
+  window.addEventListener("load", () => {
+    const savedVoice = localStorage.getItem("coderSelectedVoice");
+    if (savedVoice !== null && coderVoices[savedVoice]) {
+      document.getElementById("coder-tools").value = savedVoice;
+      coderSpeech.voice = coderVoices[savedVoice];
+      logMessage(`Loaded saved voice: ${coderVoices[savedVoice].name}`, "system");
+    }
+
+    const savedRate = localStorage.getItem("coderSpeechRate");
+    if (savedRate !== null) {
+      document.getElementById("coder-speech-rate").value = savedRate;
+      coderSpeech.rate = parseFloat(savedRate);
+      logMessage(`Loaded saved speech rate: ${savedRate}`, "system");
+    }
+
+    const savedPitch = localStorage.getItem("coderSpeechPitch");
+    if (savedPitch !== null) {
+      document.getElementById("coder-speech-pitch").value = savedPitch;
+      coderSpeech.pitch = parseFloat(savedPitch);
+      logMessage(`Loaded saved speech pitch: ${savedPitch}`, "system");
+    }
+  });
+
+  // Save Speech Rate
+  document.getElementById("coder-speech-rate").addEventListener("input", (e) => {
+    const rate = e.target.value;
+    coderSpeech.rate = parseFloat(rate);
+    localStorage.setItem("coderSpeechRate", rate);
+    logMessage(`Speech rate changed to: ${rate}`, "system");
+  });
+
+  // Save Speech Pitch
+  document.getElementById("coder-speech-pitch").addEventListener("input", (e) => {
+    const pitch = e.target.value;
+    coderSpeech.pitch = parseFloat(pitch);
+    localStorage.setItem("coderSpeechPitch", pitch);
+    logMessage(`Speech pitch changed to: ${pitch}`, "system");
+  });
+
+  // ===== Logging Function =====
+
+  /**
+   * Logs messages to the #coder-logs container.
+   * @param {string} message - The message to log.
+   * @param {string} type - The type of message: 'user', 'assistant', 'system', 'error'.
+   */
+  function logMessage(message, type) {
+    const coderLogs = document.getElementById("coder-logs");
+    const logEntry = document.createElement("div");
+    logEntry.classList.add("log-entry");
+    logEntry.textContent = `[${type.toUpperCase()}] ${message}`;
+
+    // Style log entries based on type
+    switch(type) {
+      case 'user':
+        logEntry.style.color = "#00796B";
+        break;
+      case 'assistant':
+        logEntry.style.color = "#004D40";
+        break;
+      case 'system':
+        logEntry.style.color = "#555555";
+        break;
+      case 'error':
+        logEntry.style.color = "#E53935";
+        break;
+      default:
+        logEntry.style.color = "#000000";
+    }
+
+    coderLogs.appendChild(logEntry);
+    coderLogs.scrollTop = coderLogs.scrollHeight;
+  }
+
+  // ===== TTS Integration Continued =====
+
+  // Optional: Global Listener to Detect When All Speech Has Finished
+  window.speechSynthesis.addEventListener('end', () => {
+    console.log("All coder speech has been spoken.");
+    logMessage("All TTS messages have been spoken.", "system");
+    // Ensure Stop button is disabled after speech ends
+    document.getElementById("coder-stop_button").disabled = true;
+  });
+});

digital.human.audio.css

@@ -0,0 +1,422 @@
+/* digital.human.audio.css */
+
+/* Reset and Base Styles */
+#voice * {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+/* Card Styling */
+.voice-card {
+  display: flex;
+  gap: 20px;
+  background: linear-gradient(135deg, #ffffff, #f1f8e9);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 25px;
+  margin: 25px auto;
+
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+.voice-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #e0f7fa, #ffffff);
+}
+
+/* Flex Layout for Voice Options and Chat Window */
+.voice-options {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Ensure Voice Options takes up available vertical space */
+.voice-options {
+  height: 100%;
+}
+
+/* Chat Window Styling */
+.chat-window {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Option Sections Styling */
+.option-section {
+  background-color: #ffffff;
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.option-section:hover {
+  background-color: #f9f9f9;
+}
+
+/* Button Styling (Reused from Original) */
+#voice 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);
+}
+
+#voice button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#voice button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Select Dropdown Styling (Reused from Original) */
+#voice 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;
+}
+
+#voice select:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+/* Speech Controls Styling */
+#voice-speech-controls label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555555;
+  font-weight: 500;
+}
+
+#voice-speech-controls input[type="range"] {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Logs Container Styling */
+#voice-logs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 200px; /* Set a maximum height for the logs container */
+  overflow: hidden; /* Hide any overflow to prevent the container from expanding */
+}
+
+#voice-logs {
+  flex: 1;
+  max-height: 200px; /* Adjust as needed */
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto; /* Enable vertical scrolling */
+  padding: 10px;
+  background-color: #f9f9f9;
+  font-size: 0.85em;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+#voice-clear-logs {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #FF5252, #E53935);
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  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);
+}
+
+#voice-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 Box Styling */
+#voice-chat-box {
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+}
+
+/* Message Styling */
+#voice .message-container {
+  margin-bottom: 20px;
+  display: flex;
+}
+
+#voice .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;
+}
+
+#voice .user .message {
+  background: #DCF8C6;
+  border-bottom-right-radius: 0;
+}
+
+#voice .assistant .message {
+  background: #e3f2fd;
+  border-bottom-left-radius: 0;
+}
+
+/* Chat Input Container Styling */
+#voice-text-input-container {
+  display: flex;
+  gap: 10px;
+}
+
+#voice-text-input {
+  flex: 1;
+  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;
+}
+
+#voice-text-input:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+#voice-submit-button {
+  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);
+}
+
+#voice-submit-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#voice-submit-button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Microphone and Stop Buttons Styling */
+#voice-mic-container {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+#voice-start_button,
+#voice-stop_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);
+}
+
+#voice-stop_button {
+  background: linear-gradient(135deg, #E53935, #D32F2F);
+}
+
+#voice-start_button::before,
+#voice-stop_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;
+}
+
+#voice-start_button:active::before,
+#voice-stop_button:active::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+#voice-start_button:disabled,
+#voice-stop_button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+#voice-start_button:hover:not(:disabled),
+#voice-stop_button:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+#voice-stop_button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #D32F2F, #C62828);
+}
+
+/* Icon Styling */
+#voice .mic-icon,
+#voice .stop-icon {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s;
+  fill: #ffffff;
+}
+
+/* Animation for Mic Icon */
+#voice .mic-animate {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Stats */
+#voice-chat-stats {
+  font-size: 0.85em;
+  color: #555555;
+  text-align: center;
+  margin-top: 10px;
+}
+
+/* Hidden Class */
+#voice .hidden {
+  display: none;
+}
+
+/* Scrollbar Styling */
+#voice-chat-box::-webkit-scrollbar,
+#voice-logs::-webkit-scrollbar {
+  width: 8px;
+}
+
+#voice-chat-box::-webkit-scrollbar-track,
+#voice-logs::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+#voice-chat-box::-webkit-scrollbar-thumb,
+#voice-logs::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 4px;
+}
+
+#voice-chat-box::-webkit-scrollbar-thumb:hover,
+#voice-logs::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Initialize Button Styling (Reused from Original) */
+#voice-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);
+}
+
+#voice-download:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#voice-download:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Configuration Info Styling */
+#voice-configuration {
+  margin-top: 15px;
+  font-size: 0.9em;
+  color: #555555;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 800px) {
+  .voice-card {
+    flex-direction: column;
+  }
+
+  /* Adjust Logs Container Height for Smaller Screens */
+  #voice-logs-container {
+    max-height: 200px;
+  }
+
+  #voice-logs {
+    max-height: 150px;
+  }
+}

digital.human.audio.js

@@ -0,0 +1,612 @@
+// digital.human.audio.js
+import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+
+// Ensure the script runs after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize the Digital Human Voice section
+  const voiceMessages = [
+    {
+      content: "You are Aged Guru, an intelligent assistant skilled in digital human voice interactions. Provide insightful and comprehensive answers using human-like voice responses.",
+      role: "system"
+    }
+  ];
+
+  const voiceAvailableModels = webllm.prebuiltAppConfig.model_list.map(
+    (m) => m.model_id
+  );
+  let voiceSelectedModel = "gemma-2-2b-it-q4f16_1-MLC-1k"; // Default model
+
+  function voiceUpdateEngineInitProgressCallback(report) {
+    console.log("Digital Human Voice Initialize", report.progress);
+    // Instead of updating a status span, log the progress
+    logMessage(`Model Initialization Progress: ${report.text}`, "system");
+  }
+
+  const voiceEngine = new webllm.MLCEngine();
+  voiceEngine.setInitProgressCallback(voiceUpdateEngineInitProgressCallback);
+
+  let voiceIsGenerating = false; // Flag to prevent multiple generations
+
+  async function voiceInitializeWebLLMEngine() {
+    logMessage("Model initialization started.", "system");
+    document.getElementById("voice-loading-spinner").classList.remove("hidden"); // Show spinner
+    voiceSelectedModel = document.getElementById("voice-model-selection").value;
+    const config = {
+      temperature: 0.7, // Adjusted for more precise answers
+      top_p: 0.9
+    };
+    try {
+      await voiceEngine.reload(voiceSelectedModel, config);
+      document.getElementById("voice-selected-model").textContent = voiceSelectedModel;
+      document.getElementById("voice-start_button").disabled = false;
+      document.getElementById("voice-text-input").disabled = false; // Enable text input after initialization
+      document.getElementById("voice-submit-button").disabled = false; // Enable submit button after initialization
+      document.getElementById("voice-speech-controls").disabled = false; // Enable speech controls after initialization
+      document.getElementById("voice-configuration").classList.remove("hidden");
+      logMessage("Model initialized successfully.", "system");
+    } catch (error) {
+      console.error("Error initializing the model:", error);
+      alert("Failed to initialize the model. Please try again.");
+      logMessage("Failed to initialize the model.", "error");
+    } finally {
+      document.getElementById("voice-loading-spinner").classList.add("hidden"); // Hide spinner
+    }
+  }
+
+  async function voiceStreamingGenerating(messages, onUpdate, onFinish, onError) {
+    if (voiceIsGenerating) {
+      console.warn("Voice Generation already in progress.");
+      return;
+    }
+    voiceIsGenerating = true;
+    try {
+      let curMessage = "";
+      const completion = await voiceEngine.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 voiceEngine.getMessage();
+      console.log(`Voice Generated final message: ${finalMessage}`); // Debugging
+      onFinish(finalMessage);
+      logMessage("Response generated successfully.", "system");
+    } catch (err) {
+      console.error(err);
+      onError(err);
+      logMessage("An error occurred during response generation.", "error");
+    } finally {
+      voiceIsGenerating = false;
+    }
+  }
+
+  // Flag to track the last input method
+  let voiceLastInputWasVoice = false;
+
+  function voiceAppendMessage(message) {
+    console.log(`Voice Appending message: ${message.content} (Role: ${message.role})`); // Debugging
+    const voiceChatBox = document.getElementById("voice-chat-box");
+
+    // Check if the assistant's message is already appended to avoid duplication
+    if (message.role === "assistant") {
+      const existingMessages = voiceChatBox.querySelectorAll(".message");
+      const lastMessage = existingMessages[existingMessages.length - 1];
+      if (lastMessage && lastMessage.textContent === message.content) {
+        console.warn("Duplicate assistant message detected in Voice section, skipping append.");
+
+        // Only trigger TTS for assistant messages if the last input was via voice
+        if (message.role === "assistant" && message.content !== "typing..." && voiceLastInputWasVoice) {
+          voiceSpeak(message.content);
+        }
+
+        return; // Exit to avoid appending the same message twice
+      }
+    }
+
+    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);
+    voiceChatBox.appendChild(container);
+    voiceChatBox.scrollTop = voiceChatBox.scrollHeight;
+
+    // Only trigger TTS for assistant messages if the last input was via voice
+    if (message.role === "assistant" && message.content !== "typing..." && voiceLastInputWasVoice) {
+      voiceSpeak(message.content);
+    }
+  }
+
+  function voiceUpdateLastMessage(content) {
+    const messageDoms = document.getElementById("voice-chat-box").querySelectorAll(".message");
+    const lastMessageDom = messageDoms[messageDoms.length - 1];
+    lastMessageDom.textContent = content;
+  }
+
+  function voiceOnSpeechRecognized(transcript) {
+    const input = transcript.trim();
+    const message = {
+      content: input,
+      role: "user"
+    };
+    if (input.length === 0) {
+      return;
+    }
+    voiceLastInputWasVoice = true; // Set flag as voice input
+    console.log(`Voice input received: ${input}`); // Debugging
+    document.getElementById("voice-start_button").disabled = true;
+    document.getElementById("voice-submit-button").disabled = true; // Disable submit button during processing
+
+    voiceMessages.push(message);
+    voiceAppendMessage(message);
+    logMessage(`User (Voice): ${input}`, "user");
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    voiceAppendMessage(aiPlaceholder);
+    logMessage("VoiceBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Voice Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const voiceChatBox = document.getElementById("voice-chat-box");
+      const lastMessageContainer = voiceChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        voiceChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      voiceAppendMessage(aiMessage);
+      logMessage(`VoiceBot: ${finalMessage}`, "assistant");
+
+      document.getElementById("voice-start_button").disabled = false;
+      document.getElementById("voice-submit-button").disabled = false; // Re-enable submit button after processing
+      voiceEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("voice-chat-stats").classList.remove("hidden");
+        document.getElementById("voice-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    voiceStreamingGenerating(
+      voiceMessages,
+      voiceUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("voice-start_button").disabled = false;
+        document.getElementById("voice-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Speech Recognition Code for Voice
+  let voiceRecognizing = false;
+  let voiceIgnore_onend;
+  let voiceFinal_transcript = '';
+  let voiceRecognition;
+
+  function voiceStartButton(event) {
+    if (voiceRecognizing) {
+      voiceRecognition.stop();
+      return;
+    }
+    voiceFinal_transcript = '';
+    voiceRecognition.lang = 'en-US';
+    voiceRecognition.start();
+    voiceIgnore_onend = false;
+    document.getElementById("voice-start_button").classList.add("mic-animate");
+    logMessage("Voice input started.", "system");
+  }
+
+  if (!('webkitSpeechRecognition' in window)) {
+    alert("Web Speech API is not supported by this browser.");
+    logMessage("Web Speech API is not supported by this browser.", "error");
+  } else {
+    voiceRecognition = new webkitSpeechRecognition();
+    voiceRecognition.continuous = false; // Non-continuous recognition
+    voiceRecognition.interimResults = false; // Get only final results
+
+    voiceRecognition.onstart = function() {
+      voiceRecognizing = true;
+      logMessage("Speech recognition started.", "system");
+    };
+
+    voiceRecognition.onerror = function(event) {
+      if (event.error == 'no-speech') {
+        document.getElementById("voice-start_button").classList.remove("mic-animate");
+        alert('No speech was detected in Voice section.');
+        logMessage("No speech detected.", "error");
+        voiceIgnore_onend = true;
+      }
+      if (event.error == 'audio-capture') {
+        document.getElementById("voice-start_button").classList.remove("mic-animate");
+        alert('No microphone was found in Voice section.');
+        logMessage("No microphone found.", "error");
+        voiceIgnore_onend = true;
+      }
+      if (event.error == 'not-allowed') {
+        alert('Permission to use microphone was denied in Voice section.');
+        logMessage("Microphone permission denied.", "error");
+        voiceIgnore_onend = true;
+      }
+    };
+
+    voiceRecognition.onend = function() {
+      voiceRecognizing = false;
+      document.getElementById("voice-start_button").classList.remove("mic-animate");
+      logMessage("Speech recognition ended.", "system");
+      if (voiceIgnore_onend) {
+        return;
+      }
+      if (!voiceFinal_transcript) {
+        logMessage("No transcript captured.", "error");
+        return;
+      }
+      // Process the final transcript
+      voiceOnSpeechRecognized(voiceFinal_transcript);
+    };
+
+    voiceRecognition.onresult = function(event) {
+      for (let i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+          voiceFinal_transcript += event.results[i][0].transcript;
+        }
+      }
+      voiceFinal_transcript = voiceFinal_transcript.trim();
+      logMessage(`Recognized Speech: ${voiceFinal_transcript}`, "user");
+    };
+  }
+
+  document.getElementById("voice-start_button").addEventListener("click", function(event) {
+    voiceStartButton(event);
+  });
+
+  // Initialize Model Selection
+  voiceAvailableModels.forEach((modelId) => {
+    const option = document.createElement("option");
+    option.value = modelId;
+    option.textContent = modelId;
+    document.getElementById("voice-model-selection").appendChild(option);
+  });
+  document.getElementById("voice-model-selection").value = voiceSelectedModel;
+
+  // **Enable the Download Model button after models are loaded**
+  document.getElementById("voice-download").disabled = false;
+
+  document.getElementById("voice-download").addEventListener("click", function () {
+    voiceInitializeWebLLMEngine().then(() => {
+      document.getElementById("voice-start_button").disabled = false;
+      // Enable speech controls after model initialization
+      document.getElementById("voice-speech-rate").disabled = false;
+      document.getElementById("voice-speech-pitch").disabled = false;
+      logMessage("Model download initiated.", "system");
+    });
+  });
+
+  document.getElementById("voice-clear-logs").addEventListener("click", function () {
+    document.getElementById("voice-logs").innerHTML = '';
+    logMessage("Logs cleared.", "system");
+  });
+
+  // ===== TTS Integration =====
+
+  // Initialize Speech Synthesis
+  let voiceSpeech = new SpeechSynthesisUtterance();
+  voiceSpeech.lang = "en";
+
+  let voiceVoices = [];
+
+  // Use addEventListener instead of directly assigning to onvoiceschanged
+  window.speechSynthesis.addEventListener("voiceschanged", () => {
+    voiceVoices = window.speechSynthesis.getVoices();
+    voicePopulateVoices();
+  });
+
+  function voicePopulateVoices() {
+    const voiceSelect = document.getElementById("voice-tools");
+    voiceSelect.innerHTML = ''; // Clear existing options
+    voiceVoices.forEach((voice, i) => {
+      const option = new Option(voice.name, i);
+      voiceSelect.appendChild(option);
+    });
+    if (voiceVoices.length > 0) {
+      const savedVoice = localStorage.getItem("voiceSelectedVoice");
+      if (savedVoice !== null && voiceVoices[savedVoice]) {
+        voiceSpeech.voice = voiceVoices[savedVoice];
+        voiceSelect.value = savedVoice;
+      } else {
+        voiceSpeech.voice = voiceVoices[0];
+      }
+    }
+  }
+
+  // Voice Selection Event Listener
+  document.getElementById("voice-tools").addEventListener("change", () => {
+    const selectedVoiceIndex = document.getElementById("voice-tools").value;
+    voiceSpeech.voice = voiceVoices[selectedVoiceIndex];
+    // Save to localStorage
+    localStorage.setItem("voiceSelectedVoice", selectedVoiceIndex);
+    logMessage(`Voice changed to: ${voiceVoices[selectedVoiceIndex].name}`, "system");
+  });
+
+  // Function to Speak Text with Voice Selection and Handling Large Texts
+  function voiceSpeak(text) {
+    if (!window.speechSynthesis) {
+      console.warn("Speech Synthesis not supported in this browser for Voice section.");
+      logMessage("Speech Synthesis not supported in this browser.", "error");
+      return;
+    }
+
+    // Show spinner and enable Stop button
+    document.getElementById("voice-loading-spinner").classList.remove("hidden");
+    document.getElementById("voice-stop_button").disabled = false;
+    logMessage("TTS started.", "system");
+
+    // Retrieve the currently selected voice
+    const selectedVoice = voiceSpeech.voice;
+
+    // Split the text into sentences to manage large texts
+    const sentences = text.match(/[^\.!\?]+[\.!\?]+/g) || [text];
+
+    let utterancesCount = sentences.length;
+
+    sentences.forEach(sentence => {
+      const utterance = new SpeechSynthesisUtterance(sentence.trim());
+
+      // Assign the selected voice to the utterance
+      if (selectedVoice) {
+        utterance.voice = selectedVoice;
+      }
+
+      // Assign rate and pitch from sliders
+      const rate = parseFloat(document.getElementById("voice-speech-rate").value);
+      const pitch = parseFloat(document.getElementById("voice-speech-pitch").value);
+      utterance.rate = rate; // Adjust the speaking rate (0.1 to 10)
+      utterance.pitch = pitch; // Adjust the pitch (0 to 2)
+
+      // Add event listeners for debugging or additional functionality
+      utterance.onstart = () => {
+        console.log("Speech started:", sentence);
+        logMessage(`TTS started: ${sentence.trim()}`, "system");
+      };
+
+      utterance.onend = () => {
+        console.log("Speech ended:", sentence);
+        logMessage(`TTS ended: ${sentence.trim()}`, "system");
+        utterancesCount--;
+        if (utterancesCount === 0) {
+          // Hide spinner and disable Stop button when all utterances have been spoken
+          document.getElementById("voice-loading-spinner").classList.add("hidden");
+          document.getElementById("voice-stop_button").disabled = true;
+          logMessage("All TTS messages have been spoken.", "system");
+        }
+      };
+
+      utterance.onerror = (e) => {
+        console.error("Speech Synthesis Error:", e);
+        alert("An error occurred during speech synthesis. Please try again.");
+        logMessage("Speech synthesis encountered an error.", "error");
+        utterancesCount = 0;
+        document.getElementById("voice-loading-spinner").classList.add("hidden");
+        document.getElementById("voice-stop_button").disabled = true;
+      };
+
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  // ===== New: Stop Speech Functionality =====
+
+  /**
+   * Stops any ongoing speech synthesis.
+   */
+  function voiceStopSpeech() {
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+      document.getElementById("voice-loading-spinner").classList.add("hidden");
+      document.getElementById("voice-stop_button").disabled = true;
+      logMessage("Speech synthesis stopped by user.", "system");
+    }
+  }
+
+  // Event Listener for Stop Button
+  document.getElementById("voice-stop_button").addEventListener("click", function () {
+    voiceStopSpeech();
+  });
+
+  // ===== New: Text Input Handling =====
+
+  // Function to Handle Text Submission
+  function voiceHandleTextSubmit() {
+    const textInput = document.getElementById("voice-text-input");
+    const input = textInput.value.trim();
+    if (input.length === 0) {
+      return;
+    }
+    textInput.value = ''; // Clear the input field
+    const message = {
+      content: input,
+      role: "user" // Ensure this is correctly set
+    };
+    console.log(`Voice Text input received: ${input}`); // Debugging
+    logMessage(`User: ${input}`, "user");
+
+    voiceLastInputWasVoice = false; // Set flag as text input
+    document.getElementById("voice-submit-button").disabled = true; // Disable to prevent multiple submissions
+
+    voiceMessages.push(message);
+    voiceAppendMessage(message);
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    voiceAppendMessage(aiPlaceholder);
+    logMessage("VoiceBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Voice Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const voiceChatBox = document.getElementById("voice-chat-box");
+      const lastMessageContainer = voiceChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        voiceChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      voiceAppendMessage(aiMessage);
+      logMessage(`VoiceBot: ${finalMessage}`, "assistant");
+
+      // Trigger TTS for assistant messages if required
+      if (voiceLastInputWasVoice) {
+        voiceSpeak(finalMessage);
+      }
+
+      document.getElementById("voice-submit-button").disabled = false; // Re-enable submit button after processing
+      voiceEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("voice-chat-stats").classList.remove("hidden");
+        document.getElementById("voice-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    voiceStreamingGenerating(
+      voiceMessages,
+      voiceUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("voice-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Event Listener for Submit Button
+  document.getElementById("voice-submit-button").addEventListener("click", function () {
+    voiceHandleTextSubmit();
+  });
+
+  // Event Listener for Enter Key in Text Input
+  document.getElementById("voice-text-input").addEventListener("keypress", function (e) {
+    if (e.key === 'Enter') {
+      voiceHandleTextSubmit();
+    }
+  });
+
+  // ===== Persisting User Preferences =====
+
+  // Load Preferences on Initialization
+  window.addEventListener("load", () => {
+    const savedVoice = localStorage.getItem("voiceSelectedVoice");
+    if (savedVoice !== null && voiceVoices[savedVoice]) {
+      document.getElementById("voice-tools").value = savedVoice;
+      voiceSpeech.voice = voiceVoices[savedVoice];
+      logMessage(`Loaded saved voice: ${voiceVoices[savedVoice].name}`, "system");
+    }
+
+    const savedRate = localStorage.getItem("voiceSpeechRate");
+    if (savedRate !== null) {
+      document.getElementById("voice-speech-rate").value = savedRate;
+      voiceSpeech.rate = parseFloat(savedRate);
+      logMessage(`Loaded saved speech rate: ${savedRate}`, "system");
+    }
+
+    const savedPitch = localStorage.getItem("voiceSpeechPitch");
+    if (savedPitch !== null) {
+      document.getElementById("voice-speech-pitch").value = savedPitch;
+      voiceSpeech.pitch = parseFloat(savedPitch);
+      logMessage(`Loaded saved speech pitch: ${savedPitch}`, "system");
+    }
+  });
+
+  // Save Speech Rate
+  document.getElementById("voice-speech-rate").addEventListener("input", (e) => {
+    const rate = e.target.value;
+    voiceSpeech.rate = parseFloat(rate);
+    localStorage.setItem("voiceSpeechRate", rate);
+    logMessage(`Speech rate changed to: ${rate}`, "system");
+  });
+
+  // Save Speech Pitch
+  document.getElementById("voice-speech-pitch").addEventListener("input", (e) => {
+    const pitch = e.target.value;
+    voiceSpeech.pitch = parseFloat(pitch);
+    localStorage.setItem("voiceSpeechPitch", pitch);
+    logMessage(`Speech pitch changed to: ${pitch}`, "system");
+  });
+
+  // ===== Logging Function =====
+
+  /**
+   * Logs messages to the #voice-logs container.
+   * @param {string} message - The message to log.
+   * @param {string} type - The type of message: 'user', 'assistant', 'system', 'error'.
+   */
+  function logMessage(message, type) {
+    const voiceLogs = document.getElementById("voice-logs");
+    const logEntry = document.createElement("div");
+    logEntry.classList.add("log-entry");
+    logEntry.textContent = `[${type.toUpperCase()}] ${message}`;
+
+    // Style log entries based on type
+    switch(type) {
+      case 'user':
+        logEntry.style.color = "#00796B";
+        break;
+      case 'assistant':
+        logEntry.style.color = "#004D40";
+        break;
+      case 'system':
+        logEntry.style.color = "#555555";
+        break;
+      case 'error':
+        logEntry.style.color = "#E53935";
+        break;
+      default:
+        logEntry.style.color = "#000000";
+    }
+
+    voiceLogs.appendChild(logEntry);
+    voiceLogs.scrollTop = voiceLogs.scrollHeight;
+  }
+
+  // ===== TTS Integration Continued =====
+
+  // Optional: Global Listener to Detect When All Speech Has Finished
+  window.speechSynthesis.addEventListener('end', () => {
+    console.log("All voice speech has been spoken.");
+    logMessage("All TTS messages have been spoken.", "system");
+    // Ensure Stop button is disabled after speech ends
+    document.getElementById("voice-stop_button").disabled = true;
+  });
+});

digital.human.video.css

@@ -0,0 +1,422 @@
+/* digital.human.video.css */
+
+/* Reset and Base Styles */
+#video * {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+/* Card Styling */
+.video-card {
+  display: flex;
+  gap: 20px;
+  background: linear-gradient(135deg, #ffffff, #f1f8e9);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 25px;
+  margin: 25px auto;
+
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+.video-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #e0f7fa, #ffffff);
+}
+
+/* Flex Layout for Video Options and Chat Window */
+.video-options {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Ensure Video Options takes up available vertical space */
+.video-options {
+  height: 100%;
+}
+
+/* Chat Window Styling */
+.chat-window {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Option Sections Styling */
+.option-section {
+  background-color: #ffffff;
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.option-section:hover {
+  background-color: #f9f9f9;
+}
+
+/* Button Styling (Reused from Original) */
+#video 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);
+}
+
+#video button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#video button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Select Dropdown Styling (Reused from Original) */
+#video 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;
+}
+
+#video select:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+/* Speech Controls Styling */
+#video-speech-controls label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555555;
+  font-weight: 500;
+}
+
+#video-speech-controls input[type="range"] {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Logs Container Styling */
+#video-logs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 250px; /* Set a maximum height for the logs container */
+  overflow: hidden; /* Hide any overflow to prevent the container from expanding */
+}
+
+#video-logs {
+  flex: 1;
+  max-height: 200px; /* Adjust as needed */
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto; /* Enable vertical scrolling */
+  padding: 10px;
+  background-color: #f9f9f9;
+  font-size: 0.85em;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+#video-clear-logs {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #FF5252, #E53935);
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  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);
+}
+
+#video-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 Box Styling */
+#video-chat-box {
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+}
+
+/* Message Styling */
+#video .message-container {
+  margin-bottom: 20px;
+  display: flex;
+}
+
+#video .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;
+}
+
+#video .user .message {
+  background: #DCF8C6;
+  border-bottom-right-radius: 0;
+}
+
+#video .assistant .message {
+  background: #e3f2fd;
+  border-bottom-left-radius: 0;
+}
+
+/* Chat Input Container Styling */
+#video-text-input-container {
+  display: flex;
+  gap: 10px;
+}
+
+#video-text-input {
+  flex: 1;
+  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;
+}
+
+#video-text-input:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+#video-submit-button {
+  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);
+}
+
+#video-submit-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#video-submit-button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Microphone and Stop Buttons Styling */
+#video-mic-container {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+#video-start_button,
+#video-stop_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);
+}
+
+#video-stop_button {
+  background: linear-gradient(135deg, #E53935, #D32F2F);
+}
+
+#video-start_button::before,
+#video-stop_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;
+}
+
+#video-start_button:active::before,
+#video-stop_button:active::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+#video-start_button:disabled,
+#video-stop_button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+#video-start_button:hover:not(:disabled),
+#video-stop_button:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+#video-stop_button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #D32F2F, #C62828);
+}
+
+/* Icon Styling */
+#video .mic-icon,
+#video .stop-icon {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s;
+  fill: #ffffff;
+}
+
+/* Animation for Mic Icon */
+#video .mic-animate {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Stats */
+#video-chat-stats {
+  font-size: 0.85em;
+  color: #555555;
+  text-align: center;
+  margin-top: 10px;
+}
+
+/* Hidden Class */
+#video .hidden {
+  display: none;
+}
+
+/* Scrollbar Styling */
+#video-chat-box::-webkit-scrollbar,
+#video-logs::-webkit-scrollbar {
+  width: 8px;
+}
+
+#video-chat-box::-webkit-scrollbar-track,
+#video-logs::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+#video-chat-box::-webkit-scrollbar-thumb,
+#video-logs::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 4px;
+}
+
+#video-chat-box::-webkit-scrollbar-thumb:hover,
+#video-logs::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Initialize Button Styling (Reused from Original) */
+#video-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);
+}
+
+#video-download:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#video-download:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Configuration Info Styling */
+#video-configuration {
+  margin-top: 15px;
+  font-size: 0.9em;
+  color: #555555;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 800px) {
+  .video-card {
+    flex-direction: column;
+  }
+
+  /* Adjust Logs Container Height for Smaller Screens */
+  #video-logs-container {
+    max-height: 200px;
+  }
+
+  #video-logs {
+    max-height: 150px;
+  }
+}

digital.human.video.js

@@ -0,0 +1,612 @@
+// digital.human.video.js
+import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+
+// Ensure the script runs after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize the Digital Human Video Assistant section
+  const videoMessages = [
+    {
+      content: "You are Aged Guru, an intelligent assistant skilled in video analysis and related interdisciplinary studies. Provide insightful and comprehensive answers to complex video-related questions.",
+      role: "system"
+    }
+  ];
+
+  const videoAvailableModels = webllm.prebuiltAppConfig.model_list.map(
+    (m) => m.model_id
+  );
+  let videoSelectedModel = "Llama-3.2-3B-Instruct-q4f16_1-MLC"; // Default model
+
+  function videoUpdateEngineInitProgressCallback(report) {
+    console.log("Digital Human Video Initialize", report.progress);
+    // Instead of updating a status span, log the progress
+    logMessage(`Model Initialization Progress: ${report.text}`, "system");
+  }
+
+  const videoEngine = new webllm.MLCEngine();
+  videoEngine.setInitProgressCallback(videoUpdateEngineInitProgressCallback);
+
+  let videoIsGenerating = false; // Flag to prevent multiple generations
+
+  async function videoInitializeWebLLMEngine() {
+    logMessage("Model initialization started.", "system");
+    document.getElementById("video-loading-spinner").classList.remove("hidden"); // Show spinner
+    videoSelectedModel = document.getElementById("video-model-selection").value;
+    const config = {
+      temperature: 0.7, // Adjusted for more precise answers
+      top_p: 0.9
+    };
+    try {
+      await videoEngine.reload(videoSelectedModel, config);
+      document.getElementById("video-selected-model").textContent = videoSelectedModel;
+      document.getElementById("video-start_button").disabled = false;
+      document.getElementById("video-text-input").disabled = false; // Enable text input after initialization
+      document.getElementById("video-submit-button").disabled = false; // Enable submit button after initialization
+      document.getElementById("video-speech-controls").disabled = false; // Enable speech controls after initialization
+      document.getElementById("video-configuration").classList.remove("hidden");
+      logMessage("Model initialized successfully.", "system");
+    } catch (error) {
+      console.error("Error initializing the model:", error);
+      alert("Failed to initialize the model. Please try again.");
+      logMessage("Failed to initialize the model.", "error");
+    } finally {
+      document.getElementById("video-loading-spinner").classList.add("hidden"); // Hide spinner
+    }
+  }
+
+  async function videoStreamingGenerating(messages, onUpdate, onFinish, onError) {
+    if (videoIsGenerating) {
+      console.warn("Video Generation already in progress.");
+      return;
+    }
+    videoIsGenerating = true;
+    try {
+      let curMessage = "";
+      const completion = await videoEngine.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 videoEngine.getMessage();
+      console.log(`Digital Human Video Generated final message: ${finalMessage}`); // Debugging
+      onFinish(finalMessage);
+      logMessage("Response generated successfully.", "system");
+    } catch (err) {
+      console.error(err);
+      onError(err);
+      logMessage("An error occurred during response generation.", "error");
+    } finally {
+      videoIsGenerating = false;
+    }
+  }
+
+  // Flag to track the last input method
+  let videoLastInputWasVoice = false;
+
+  function videoAppendMessage(message) {
+    console.log(`Digital Human Video Appending message: ${message.content} (Role: ${message.role})`); // Debugging
+    const videoChatBox = document.getElementById("video-chat-box");
+
+    // Check if the assistant's message is already appended to avoid duplication
+    if (message.role === "assistant") {
+      const existingMessages = videoChatBox.querySelectorAll(".message");
+      const lastMessage = existingMessages[existingMessages.length - 1];
+      if (lastMessage && lastMessage.textContent === message.content) {
+        console.warn("Duplicate assistant message detected in Video section, skipping append.");
+
+        // Only trigger TTS for assistant messages if the last input was via voice
+        if (message.role === "assistant" && message.content !== "typing..." && videoLastInputWasVoice) {
+          videoSpeak(message.content);
+        }
+
+        return; // Exit to avoid appending the same message twice
+      }
+    }
+
+    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);
+    videoChatBox.appendChild(container);
+    videoChatBox.scrollTop = videoChatBox.scrollHeight;
+
+    // Only trigger TTS for assistant messages if the last input was via voice
+    if (message.role === "assistant" && message.content !== "typing..." && videoLastInputWasVoice) {
+      videoSpeak(message.content);
+    }
+  }
+
+  function videoUpdateLastMessage(content) {
+    const messageDoms = document.getElementById("video-chat-box").querySelectorAll(".message");
+    const lastMessageDom = messageDoms[messageDoms.length - 1];
+    lastMessageDom.textContent = content;
+  }
+
+  function videoOnSpeechRecognized(transcript) {
+    const input = transcript.trim();
+    const message = {
+      content: input,
+      role: "user"
+    };
+    if (input.length === 0) {
+      return;
+    }
+    videoLastInputWasVoice = true; // Set flag as voice input
+    console.log(`Digital Human Video Voice input received: ${input}`); // Debugging
+    document.getElementById("video-start_button").disabled = true;
+    document.getElementById("video-submit-button").disabled = true; // Disable submit button during processing
+
+    videoMessages.push(message);
+    videoAppendMessage(message);
+    logMessage(`User (Voice): ${input}`, "user");
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    videoAppendMessage(aiPlaceholder);
+    logMessage("VideoBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Digital Human Video Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const videoChatBox = document.getElementById("video-chat-box");
+      const lastMessageContainer = videoChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        videoChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      videoAppendMessage(aiMessage);
+      logMessage(`VideoBot: ${finalMessage}`, "assistant");
+
+      document.getElementById("video-start_button").disabled = false;
+      document.getElementById("video-submit-button").disabled = false; // Re-enable submit button after processing
+      videoEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("video-chat-stats").classList.remove("hidden");
+        document.getElementById("video-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    videoStreamingGenerating(
+      videoMessages,
+      videoUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("video-start_button").disabled = false;
+        document.getElementById("video-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Speech Recognition Code for Video
+  let videoRecognizing = false;
+  let videoIgnore_onend;
+  let videoFinal_transcript = '';
+  let videoRecognition;
+
+  function videoStartButton(event) {
+    if (videoRecognizing) {
+      videoRecognition.stop();
+      return;
+    }
+    videoFinal_transcript = '';
+    videoRecognition.lang = 'en-US';
+    videoRecognition.start();
+    videoIgnore_onend = false;
+    document.getElementById("video-start_button").classList.add("mic-animate");
+    logMessage("Voice input started.", "system");
+  }
+
+  if (!('webkitSpeechRecognition' in window)) {
+    alert("Web Speech API is not supported by this browser.");
+    logMessage("Web Speech API is not supported by this browser.", "error");
+  } else {
+    videoRecognition = new webkitSpeechRecognition();
+    videoRecognition.continuous = false; // Non-continuous recognition
+    videoRecognition.interimResults = false; // Get only final results
+
+    videoRecognition.onstart = function() {
+      videoRecognizing = true;
+      logMessage("Speech recognition started.", "system");
+    };
+
+    videoRecognition.onerror = function(event) {
+      if (event.error == 'no-speech') {
+        document.getElementById("video-start_button").classList.remove("mic-animate");
+        alert('No speech was detected in Video section.');
+        logMessage("No speech detected.", "error");
+        videoIgnore_onend = true;
+      }
+      if (event.error == 'audio-capture') {
+        document.getElementById("video-start_button").classList.remove("mic-animate");
+        alert('No microphone was found in Video section.');
+        logMessage("No microphone found.", "error");
+        videoIgnore_onend = true;
+      }
+      if (event.error == 'not-allowed') {
+        alert('Permission to use microphone was denied in Video section.');
+        logMessage("Microphone permission denied.", "error");
+        videoIgnore_onend = true;
+      }
+    };
+
+    videoRecognition.onend = function() {
+      videoRecognizing = false;
+      document.getElementById("video-start_button").classList.remove("mic-animate");
+      logMessage("Speech recognition ended.", "system");
+      if (videoIgnore_onend) {
+        return;
+      }
+      if (!videoFinal_transcript) {
+        logMessage("No transcript captured.", "error");
+        return;
+      }
+      // Process the final transcript
+      videoOnSpeechRecognized(videoFinal_transcript);
+    };
+
+    videoRecognition.onresult = function(event) {
+      for (let i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+          videoFinal_transcript += event.results[i][0].transcript;
+        }
+      }
+      videoFinal_transcript = videoFinal_transcript.trim();
+      logMessage(`Recognized Speech: ${videoFinal_transcript}`, "user");
+    };
+  }
+
+  document.getElementById("video-start_button").addEventListener("click", function(event) {
+    videoStartButton(event);
+  });
+
+  // Initialize Model Selection
+  videoAvailableModels.forEach((modelId) => {
+    const option = document.createElement("option");
+    option.value = modelId;
+    option.textContent = modelId;
+    document.getElementById("video-model-selection").appendChild(option);
+  });
+  document.getElementById("video-model-selection").value = videoSelectedModel;
+
+  // **Enable the Download Model button after models are loaded**
+  document.getElementById("video-download").disabled = false;
+
+  document.getElementById("video-download").addEventListener("click", function () {
+    videoInitializeWebLLMEngine().then(() => {
+      document.getElementById("video-start_button").disabled = false;
+      // Enable speech controls after model initialization
+      document.getElementById("video-speech-rate").disabled = false;
+      document.getElementById("video-speech-pitch").disabled = false;
+      logMessage("Model download initiated.", "system");
+    });
+  });
+
+  document.getElementById("video-clear-logs").addEventListener("click", function () {
+    document.getElementById("video-logs").innerHTML = '';
+    logMessage("Logs cleared.", "system");
+  });
+
+  // ===== TTS Integration =====
+
+  // Initialize Speech Synthesis
+  let videoSpeech = new SpeechSynthesisUtterance();
+  videoSpeech.lang = "en";
+
+  let videoVoices = [];
+
+  // Use addEventListener instead of directly assigning to onvoiceschanged
+  window.speechSynthesis.addEventListener("voiceschanged", () => {
+    videoVoices = window.speechSynthesis.getVoices();
+    videoPopulateVoices();
+  });
+
+  function videoPopulateVoices() {
+    const voiceSelect = document.getElementById("video-tools");
+    voiceSelect.innerHTML = ''; // Clear existing options
+    videoVoices.forEach((voice, i) => {
+      const option = new Option(voice.name, i);
+      voiceSelect.appendChild(option);
+    });
+    if (videoVoices.length > 0) {
+      const savedVoice = localStorage.getItem("video-selectedVoice");
+      if (savedVoice !== null && videoVoices[savedVoice]) {
+        videoSpeech.voice = videoVoices[savedVoice];
+        voiceSelect.value = savedVoice;
+      } else {
+        videoSpeech.voice = videoVoices[0];
+      }
+    }
+  }
+
+  // Voice Selection Event Listener
+  document.getElementById("video-tools").addEventListener("change", () => {
+    const selectedVoiceIndex = document.getElementById("video-tools").value;
+    videoSpeech.voice = videoVoices[selectedVoiceIndex];
+    // Save to localStorage
+    localStorage.setItem("video-selectedVoice", selectedVoiceIndex);
+    logMessage(`Voice changed to: ${videoVoices[selectedVoiceIndex].name}`, "system");
+  });
+
+  // Function to Speak Text with Voice Selection and Handling Large Texts
+  function videoSpeak(text) {
+    if (!window.speechSynthesis) {
+      console.warn("Speech Synthesis not supported in this browser for Video section.");
+      logMessage("Speech Synthesis not supported in this browser.", "error");
+      return;
+    }
+
+    // Show spinner and enable Stop button
+    document.getElementById("video-loading-spinner").classList.remove("hidden");
+    document.getElementById("video-stop_button").disabled = false;
+    logMessage("TTS started.", "system");
+
+    // Retrieve the currently selected voice
+    const selectedVoice = videoSpeech.voice;
+
+    // Split the text into sentences to manage large texts
+    const sentences = text.match(/[^\.!\?]+[\.!\?]+/g) || [text];
+
+    let utterancesCount = sentences.length;
+
+    sentences.forEach(sentence => {
+      const utterance = new SpeechSynthesisUtterance(sentence.trim());
+
+      // Assign the selected voice to the utterance
+      if (selectedVoice) {
+        utterance.voice = selectedVoice;
+      }
+
+      // Assign rate and pitch from sliders
+      const rate = parseFloat(document.getElementById("video-speech-rate").value);
+      const pitch = parseFloat(document.getElementById("video-speech-pitch").value);
+      utterance.rate = rate; // Adjust the speaking rate (0.1 to 10)
+      utterance.pitch = pitch; // Adjust the pitch (0 to 2)
+
+      // Add event listeners for debugging or additional functionality
+      utterance.onstart = () => {
+        console.log("Speech started:", sentence);
+        logMessage(`TTS started: ${sentence.trim()}`, "system");
+      };
+
+      utterance.onend = () => {
+        console.log("Speech ended:", sentence);
+        logMessage(`TTS ended: ${sentence.trim()}`, "system");
+        utterancesCount--;
+        if (utterancesCount === 0) {
+          // Hide spinner and disable Stop button when all utterances have been spoken
+          document.getElementById("video-loading-spinner").classList.add("hidden");
+          document.getElementById("video-stop_button").disabled = true;
+          logMessage("All TTS messages have been spoken.", "system");
+        }
+      };
+
+      utterance.onerror = (e) => {
+        console.error("Speech Synthesis Error:", e);
+        alert("An error occurred during speech synthesis. Please try again.");
+        logMessage("Speech synthesis encountered an error.", "error");
+        utterancesCount = 0;
+        document.getElementById("video-loading-spinner").classList.add("hidden");
+        document.getElementById("video-stop_button").disabled = true;
+      };
+
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  // ===== New: Stop Speech Functionality =====
+
+  /**
+   * Stops any ongoing speech synthesis.
+   */
+  function videoStopSpeech() {
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+      document.getElementById("video-loading-spinner").classList.add("hidden");
+      document.getElementById("video-stop_button").disabled = true;
+      logMessage("Speech synthesis stopped by user.", "system");
+    }
+  }
+
+  // Event Listener for Stop Button
+  document.getElementById("video-stop_button").addEventListener("click", function () {
+    videoStopSpeech();
+  });
+
+  // ===== New: Text Input Handling =====
+
+  // Function to Handle Text Submission
+  function videoHandleTextSubmit() {
+    const textInput = document.getElementById("video-text-input");
+    const input = textInput.value.trim();
+    if (input.length === 0) {
+      return;
+    }
+    textInput.value = ''; // Clear the input field
+    const message = {
+      content: input,
+      role: "user" // Ensure this is correctly set
+    };
+    console.log(`Digital Human Video Text input received: ${input}`); // Debugging
+    logMessage(`User: ${input}`, "user");
+
+    videoLastInputWasVoice = false; // Set flag as text input
+    document.getElementById("video-submit-button").disabled = true; // Disable to prevent multiple submissions
+
+    videoMessages.push(message);
+    videoAppendMessage(message);
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    videoAppendMessage(aiPlaceholder);
+    logMessage("VideoBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Digital Human Video Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const videoChatBox = document.getElementById("video-chat-box");
+      const lastMessageContainer = videoChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        videoChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      videoAppendMessage(aiMessage);
+      logMessage(`VideoBot: ${finalMessage}`, "assistant");
+
+      // Trigger TTS for assistant messages if required
+      if (videoLastInputWasVoice) {
+        videoSpeak(finalMessage);
+      }
+
+      document.getElementById("video-submit-button").disabled = false; // Re-enable submit button after processing
+      videoEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("video-chat-stats").classList.remove("hidden");
+        document.getElementById("video-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    videoStreamingGenerating(
+      videoMessages,
+      videoUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("video-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Event Listener for Submit Button
+  document.getElementById("video-submit-button").addEventListener("click", function () {
+    videoHandleTextSubmit();
+  });
+
+  // Event Listener for Enter Key in Text Input
+  document.getElementById("video-text-input").addEventListener("keypress", function (e) {
+    if (e.key === 'Enter') {
+      videoHandleTextSubmit();
+    }
+  });
+
+  // ===== Persisting User Preferences =====
+
+  // Load Preferences on Initialization
+  window.addEventListener("load", () => {
+    const savedVoice = localStorage.getItem("video-selectedVoice");
+    if (savedVoice !== null && videoVoices[savedVoice]) {
+      document.getElementById("video-tools").value = savedVoice;
+      videoSpeech.voice = videoVoices[savedVoice];
+      logMessage(`Loaded saved voice: ${videoVoices[savedVoice].name}`, "system");
+    }
+
+    const savedRate = localStorage.getItem("video-speechRate");
+    if (savedRate !== null) {
+      document.getElementById("video-speech-rate").value = savedRate;
+      videoSpeech.rate = parseFloat(savedRate);
+      logMessage(`Loaded saved speech rate: ${savedRate}`, "system");
+    }
+
+    const savedPitch = localStorage.getItem("video-speechPitch");
+    if (savedPitch !== null) {
+      document.getElementById("video-speech-pitch").value = savedPitch;
+      videoSpeech.pitch = parseFloat(savedPitch);
+      logMessage(`Loaded saved speech pitch: ${savedPitch}`, "system");
+    }
+  });
+
+  // Save Speech Rate
+  document.getElementById("video-speech-rate").addEventListener("input", (e) => {
+    const rate = e.target.value;
+    videoSpeech.rate = parseFloat(rate);
+    localStorage.setItem("video-speechRate", rate);
+    logMessage(`Speech rate changed to: ${rate}`, "system");
+  });
+
+  // Save Speech Pitch
+  document.getElementById("video-speech-pitch").addEventListener("input", (e) => {
+    const pitch = e.target.value;
+    videoSpeech.pitch = parseFloat(pitch);
+    localStorage.setItem("video-speechPitch", pitch);
+    logMessage(`Speech pitch changed to: ${pitch}`, "system");
+  });
+
+  // ===== Logging Function =====
+
+  /**
+   * Logs messages to the #video-logs container.
+   * @param {string} message - The message to log.
+   * @param {string} type - The type of message: 'user', 'assistant', 'system', 'error'.
+   */
+  function logMessage(message, type) {
+    const videoLogs = document.getElementById("video-logs");
+    const logEntry = document.createElement("div");
+    logEntry.classList.add("log-entry");
+    logEntry.textContent = `[${type.toUpperCase()}] ${message}`;
+
+    // Style log entries based on type
+    switch(type) {
+      case 'user':
+        logEntry.style.color = "#00796B";
+        break;
+      case 'assistant':
+        logEntry.style.color = "#004D40";
+        break;
+      case 'system':
+        logEntry.style.color = "#555555";
+        break;
+      case 'error':
+        logEntry.style.color = "#E53935";
+        break;
+      default:
+        logEntry.style.color = "#000000";
+    }
+
+    videoLogs.appendChild(logEntry);
+    videoLogs.scrollTop = videoLogs.scrollHeight;
+  }
+
+  // ===== TTS Integration Continued =====
+
+  // Optional: Global Listener to Detect When All Speech Has Finished
+  window.speechSynthesis.addEventListener('end', () => {
+    console.log("All video speech has been spoken.");
+    logMessage("All TTS messages have been spoken.", "system");
+    // Ensure Stop button is disabled after speech ends
+    document.getElementById("video-stop_button").disabled = true;
+  });
+});

finalwork4.html

@@ -0,0 +1,562 @@
+<!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 -->
+  <link rel="stylesheet" href="base.css">
+  <link rel="stylesheet" href="coder.css">
+  <link rel="stylesheet" href="digital.human.video.css">
+  <link rel="stylesheet" href="digital.human.audio.css">
+  <link rel="stylesheet" href="advanced.math.css">
+  <link rel="stylesheet" href="interdisciplinary.css"> <!-- New CSS for Interdisciplinary -->
+</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="podcast">Podcast</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 Voice Content Starts---------------- -->
+    <div id="voice" class="content-section">
+      <div class="card voice-card">
+        <!-- Digital Human Voice Layout -->
+        <div class="voice-options">
+          <!-- Model Selection Section -->
+          <div id="voice-model-selection-container" class="option-section">
+            <label for="voice-model-selection">Select Model:</label>
+            <select id="voice-model-selection"></select>
+            <button id="voice-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Voice Selection Section -->
+          <div id="voice-tool-selection-container" class="option-section">
+            <label for="voice-tools">Select Voice:</label>
+            <select id="voice-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="voice-speech-controls" class="option-section">
+            <label for="voice-speech-rate">Speech Rate:</label>
+            <input type="range" id="voice-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="voice-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="voice-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="voice-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="voice-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="voice-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="voice-chat-container">
+            <div id="voice-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="voice-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="voice-text-input-container">
+              <input type="text" id="voice-text-input" placeholder="Type your message here..." disabled>
+              <button id="voice-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="voice-mic-container">
+              <button id="voice-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="voice-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="voice-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="voice-configuration" class="hidden">
+            <p>Model Initialized: <span id="voice-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- -----------------Digital Human Voice Content Ends---------------- -->
+
+
+
+
+    <!-- --------------------Digital Human Mentor Video Content Starts---------------- -->
+    <div id="video" class="content-section hidden">
+      <div class="card video-card">
+        <!-- Digital Human Video Assistant Layout -->
+        <div class="video-options">
+          <!-- Model Selection Section -->
+          <div id="video-model-selection-container" class="option-section">
+            <label for="video-model-selection">Select Model:</label>
+            <select id="video-model-selection"></select>
+            <button id="video-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Voice Selection Section -->
+          <div id="video-tool-selection-container" class="option-section">
+            <label for="video-tools">Select Voice:</label>
+            <select id="video-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="video-speech-controls" class="option-section">
+            <label for="video-speech-rate">Speech Rate:</label>
+            <input type="range" id="video-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="video-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="video-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="video-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="video-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="video-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="video-chat-container">
+            <div id="video-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="video-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="video-text-input-container">
+              <input type="text" id="video-text-input" placeholder="Type your message here..." disabled>
+              <button id="video-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="video-mic-container">
+              <button id="video-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="video-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="video-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="video-configuration" class="hidden">
+            <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Digital Human Mentor Video Content Ends----------------- -->
+
+
+
+
+
+    <!-- --------------------Coder Content Starts------------------------------------- -->
+    <div id="coder" class="content-section hidden">
+      <div class="card coder-card">
+        <!-- Young Coder Layout -->
+        <div class="coder-options">
+          <!-- Model Selection Section -->
+          <div id="coder-model-selection-container" class="option-section">
+            <label for="coder-model-selection">Select Model:</label>
+            <select id="coder-model-selection"></select>
+            <button id="coder-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Tool Selection Section -->
+          <div id="coder-tool-selection-container" class="option-section">
+            <label for="coder-tools">Select Voice:</label>
+            <select id="coder-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="coder-speech-controls" class="option-section">
+            <label for="coder-speech-rate">Speech Rate:</label>
+            <input type="range" id="coder-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="coder-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="coder-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="coder-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="coder-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="coder-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="coder-chat-container">
+            <div id="coder-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="coder-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="coder-text-input-container">
+              <input type="text" id="coder-text-input" placeholder="Type your message here..." disabled>
+              <button id="coder-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="coder-mic-container">
+              <button id="coder-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="coder-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="coder-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="coder-configuration" class="hidden">
+            <p>Model Initialized: <span id="coder-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Coder Content Ends---------------------------------------- -->
+
+
+
+    <!-- --------------------Math Content Starts--------------------------------------- -->
+    <div id="advanced-math" class="content-section hidden">
+      <div class="card advanced-math-card">
+        <!-- Advanced Mathematics & Problem Solving Layout -->
+        <div class="math-options">
+          <!-- Model Selection Section -->
+          <div id="math-model-selection-container" class="option-section">
+            <label for="math-model-selection">Select Math Model:</label>
+            <select id="math-model-selection"></select>
+            <button id="math-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Tool Selection Section -->
+          <div id="math-tool-selection-container" class="option-section">
+            <label for="math-tools">Select Voice:</label>
+            <select id="math-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="math-speech-controls" class="option-section">
+            <label for="math-speech-rate">Speech Rate:</label>
+            <input type="range" id="math-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="math-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="math-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="math-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="math-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="math-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="math-chat-container">
+            <div id="math-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="math-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="math-text-input-container">
+              <input type="text" id="math-text-input" placeholder="Type your math problem here..." disabled>
+              <button id="math-submit-button" disabled>Submit</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="math-mic-container">
+              <button id="math-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="math-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="math-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="math-configuration" class="hidden">
+            <p>Model Initialized: <span id="math-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Math Content Ends----------------------------------------------- -->
+
+
+
+
+    <!-- --------------------Interdisciplinary Content Starts-------------------------------- -->
+    <div id="interdisciplinary" class="content-section hidden">
+      <div class="card interdisciplinary-card">
+        <!-- Interdisciplinary Studies Assistant Layout -->
+        <div class="inter-options">
+          <!-- Model Selection Section -->
+          <div id="inter-model-selection-container" class="option-section">
+            <label for="inter-model-selection">Select Model:</label>
+            <select id="inter-model-selection"></select>
+            <button id="inter-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Voice Selection Section -->
+          <div id="inter-tool-selection-container" class="option-section">
+            <label for="inter-tools">Select Voice:</label>
+            <select id="inter-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="inter-speech-controls" class="option-section">
+            <label for="speech-rate">Speech Rate:</label>
+            <input type="range" id="speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="speech-pitch">Speech Pitch:</label>
+            <input type="range" id="speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="inter-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="inter-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="inter-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="inter-chat-container">
+            <div id="inter-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="inter-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="inter-text-input-container">
+              <input type="text" id="inter-text-input" placeholder="Type your message here..." disabled>
+              <button id="inter-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="inter-mic-container">
+              <button id="inter-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="inter-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="inter-configuration" class="hidden">
+            <p>Model Initialized: <span id="inter-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Interdisciplinary Content Ends------------------------------------- -->
+
+
+
+
+    <!-- --------------------Insights Content Starts------------------------------------------- -->
+    <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>
+    <!-- --------------------Insights Content Ends------------------------------------------- -->
+
+
+    <!-- --------------------Podcast Content Starts------------------------------------------- -->
+    <div id="podcast" class="content-section hidden">
+      <div class="card">
+        <h2>Podcast</h2>
+        <p>Content for Podcast will go here. Document Podcast, Conversational Podcast,  </p>
+      </div>
+    </div>
+    <!-- --------------------Podcast Content Ends--------------------------------------------- -->
+
+
+
+    <!-- --------------------3d-explorer Content Starts------------------------------------------- -->
+    <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>
+    <!-- --------------------3d-explorer Content Ends--------------------------------------------- -->
+
+
+    <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">
+  // 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');
+    });
+  });
+</script>
+
+
+<!-- Include the necessary scripts -->
+
+<script type="module" src="digital.human.audio.js"> </script>
+<script type="module" src="digital.human.video.js"> </script>
+<script type="module" src="coder.js"> </script>
+<script type="module" src="advanced.math.js"></script>
+<script type="module" src="interdisciplinary.js"></script> <!-- New JS for Interdisciplinary -->
+
+</body>
+</html>

index.html

@@ -0,0 +1,562 @@
+<!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 -->
+  <link rel="stylesheet" href="base.css">
+  <link rel="stylesheet" href="coder.css">
+  <link rel="stylesheet" href="digital.human.video.css">
+  <link rel="stylesheet" href="digital.human.audio.css">
+  <link rel="stylesheet" href="advanced.math.css">
+  <link rel="stylesheet" href="interdisciplinary.css"> <!-- New CSS for Interdisciplinary -->
+</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="podcast">Podcast</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 Voice Content Starts---------------- -->
+    <div id="voice" class="content-section">
+      <div class="card voice-card">
+        <!-- Digital Human Voice Layout -->
+        <div class="voice-options">
+          <!-- Model Selection Section -->
+          <div id="voice-model-selection-container" class="option-section">
+            <label for="voice-model-selection">Select Model:</label>
+            <select id="voice-model-selection"></select>
+            <button id="voice-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Voice Selection Section -->
+          <div id="voice-tool-selection-container" class="option-section">
+            <label for="voice-tools">Select Voice:</label>
+            <select id="voice-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="voice-speech-controls" class="option-section">
+            <label for="voice-speech-rate">Speech Rate:</label>
+            <input type="range" id="voice-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="voice-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="voice-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="voice-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="voice-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="voice-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="voice-chat-container">
+            <div id="voice-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="voice-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="voice-text-input-container">
+              <input type="text" id="voice-text-input" placeholder="Type your message here..." disabled>
+              <button id="voice-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="voice-mic-container">
+              <button id="voice-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="voice-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="voice-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="voice-configuration" class="hidden">
+            <p>Model Initialized: <span id="voice-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- -----------------Digital Human Voice Content Ends---------------- -->
+
+
+
+
+    <!-- --------------------Digital Human Mentor Video Content Starts---------------- -->
+    <div id="video" class="content-section hidden">
+      <div class="card video-card">
+        <!-- Digital Human Video Assistant Layout -->
+        <div class="video-options">
+          <!-- Model Selection Section -->
+          <div id="video-model-selection-container" class="option-section">
+            <label for="video-model-selection">Select Model:</label>
+            <select id="video-model-selection"></select>
+            <button id="video-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Voice Selection Section -->
+          <div id="video-tool-selection-container" class="option-section">
+            <label for="video-tools">Select Voice:</label>
+            <select id="video-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="video-speech-controls" class="option-section">
+            <label for="video-speech-rate">Speech Rate:</label>
+            <input type="range" id="video-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="video-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="video-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="video-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="video-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="video-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="video-chat-container">
+            <div id="video-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="video-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="video-text-input-container">
+              <input type="text" id="video-text-input" placeholder="Type your message here..." disabled>
+              <button id="video-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="video-mic-container">
+              <button id="video-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="video-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="video-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="video-configuration" class="hidden">
+            <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Digital Human Mentor Video Content Ends----------------- -->
+
+
+
+
+
+    <!-- --------------------Coder Content Starts------------------------------------- -->
+    <div id="coder" class="content-section hidden">
+      <div class="card coder-card">
+        <!-- Young Coder Layout -->
+        <div class="coder-options">
+          <!-- Model Selection Section -->
+          <div id="coder-model-selection-container" class="option-section">
+            <label for="coder-model-selection">Select Model:</label>
+            <select id="coder-model-selection"></select>
+            <button id="coder-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Tool Selection Section -->
+          <div id="coder-tool-selection-container" class="option-section">
+            <label for="coder-tools">Select Voice:</label>
+            <select id="coder-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="coder-speech-controls" class="option-section">
+            <label for="coder-speech-rate">Speech Rate:</label>
+            <input type="range" id="coder-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="coder-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="coder-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="coder-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="coder-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="coder-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="coder-chat-container">
+            <div id="coder-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="coder-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="coder-text-input-container">
+              <input type="text" id="coder-text-input" placeholder="Type your message here..." disabled>
+              <button id="coder-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="coder-mic-container">
+              <button id="coder-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="coder-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="coder-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="coder-configuration" class="hidden">
+            <p>Model Initialized: <span id="coder-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Coder Content Ends---------------------------------------- -->
+
+
+
+    <!-- --------------------Math Content Starts--------------------------------------- -->
+    <div id="advanced-math" class="content-section hidden">
+      <div class="card advanced-math-card">
+        <!-- Advanced Mathematics & Problem Solving Layout -->
+        <div class="math-options">
+          <!-- Model Selection Section -->
+          <div id="math-model-selection-container" class="option-section">
+            <label for="math-model-selection">Select Math Model:</label>
+            <select id="math-model-selection"></select>
+            <button id="math-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Tool Selection Section -->
+          <div id="math-tool-selection-container" class="option-section">
+            <label for="math-tools">Select Voice:</label>
+            <select id="math-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="math-speech-controls" class="option-section">
+            <label for="math-speech-rate">Speech Rate:</label>
+            <input type="range" id="math-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="math-speech-pitch">Speech Pitch:</label>
+            <input type="range" id="math-speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="math-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="math-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="math-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="math-chat-container">
+            <div id="math-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="math-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="math-text-input-container">
+              <input type="text" id="math-text-input" placeholder="Type your math problem here..." disabled>
+              <button id="math-submit-button" disabled>Submit</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="math-mic-container">
+              <button id="math-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="math-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="math-loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="math-configuration" class="hidden">
+            <p>Model Initialized: <span id="math-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Math Content Ends----------------------------------------------- -->
+
+
+
+
+    <!-- --------------------Interdisciplinary Content Starts-------------------------------- -->
+    <div id="interdisciplinary" class="content-section hidden">
+      <div class="card interdisciplinary-card">
+        <!-- Interdisciplinary Studies Assistant Layout -->
+        <div class="inter-options">
+          <!-- Model Selection Section -->
+          <div id="inter-model-selection-container" class="option-section">
+            <label for="inter-model-selection">Select Model:</label>
+            <select id="inter-model-selection"></select>
+            <button id="inter-download" disabled>Download Model</button>
+          </div>
+
+          <!-- Voice Selection Section -->
+          <div id="inter-tool-selection-container" class="option-section">
+            <label for="inter-tools">Select Voice:</label>
+            <select id="inter-tools"></select>
+          </div>
+
+          <!-- Speech Controls Section -->
+          <div id="inter-speech-controls" class="option-section">
+            <label for="speech-rate">Speech Rate:</label>
+            <input type="range" id="speech-rate" min="0.5" max="2" step="0.1" value="1" disabled>
+
+            <label for="speech-pitch">Speech Pitch:</label>
+            <input type="range" id="speech-pitch" min="0" max="2" step="0.1" value="1" disabled>
+          </div>
+
+          <!-- Logs Section -->
+          <div id="inter-logs-container" class="option-section">
+            <h3>Logs</h3>
+            <div id="inter-logs">
+              <!-- Logs will appear here -->
+            </div>
+            <button id="inter-clear-logs">Clear Logs</button>
+          </div>
+        </div>
+
+        <div class="chat-window">
+          <!-- Chat Box Section -->
+          <div id="inter-chat-container">
+            <div id="inter-chat-box">
+              <!-- Chat messages will appear here -->
+            </div>
+
+            <!-- Chat Stats -->
+            <div id="inter-chat-stats" class="hidden">Runtime Stats: N/A</div>
+
+            <!-- Chat Input Section -->
+            <div id="inter-text-input-container">
+              <input type="text" id="inter-text-input" placeholder="Type your message here..." disabled>
+              <button id="inter-submit-button" disabled>Send</button>
+            </div>
+
+            <!-- Microphone Controls -->
+            <div id="inter-mic-container">
+              <button id="inter-start_button" aria-label="Start Voice Input" disabled>
+                <!-- Mic Icon SVG -->
+                <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>
+              <button id="inter-stop_button" aria-label="Stop Speech" disabled>
+                <!-- Stop Icon SVG -->
+                <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                  <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div id="loading-spinner" class="hidden">
+            <div class="spinner"></div>
+          </div>
+
+          <!-- Configuration Info -->
+          <div id="inter-configuration" class="hidden">
+            <p>Model Initialized: <span id="inter-selected-model">N/A</span></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Interdisciplinary Content Ends------------------------------------- -->
+
+
+
+
+    <!-- --------------------Insights Content Starts------------------------------------------- -->
+    <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>
+    <!-- --------------------Insights Content Ends------------------------------------------- -->
+
+
+    <!-- --------------------Podcast Content Starts------------------------------------------- -->
+    <div id="podcast" class="content-section hidden">
+      <div class="card">
+        <h2>Podcast</h2>
+        <p>Content for Podcast will go here. Document Podcast, Conversational Podcast,  </p>
+      </div>
+    </div>
+    <!-- --------------------Podcast Content Ends--------------------------------------------- -->
+
+
+
+    <!-- --------------------3d-explorer Content Starts------------------------------------------- -->
+    <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>
+    <!-- --------------------3d-explorer Content Ends--------------------------------------------- -->
+
+
+    <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">
+  // 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');
+    });
+  });
+</script>
+
+
+<!-- Include the necessary scripts -->
+
+<script type="module" src="digital.human.audio.js"> </script>
+<script type="module" src="digital.human.video.js"> </script>
+<script type="module" src="coder.js"> </script>
+<script type="module" src="advanced.math.js"></script>
+<script type="module" src="interdisciplinary.js"></script> <!-- New JS for Interdisciplinary -->
+
+</body>
+</html>

interdisciplinary.css

@@ -0,0 +1,422 @@
+/* interdisciplinary.css */
+
+/* Reset and Base Styles */
+#interdisciplinary * {
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+}
+
+/* Card Styling */
+.interdisciplinary-card {
+  display: flex;
+  gap: 20px;
+  background: linear-gradient(135deg, #ffffff, #f1f8e9);
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  padding: 25px;
+  margin: 25px auto;
+
+  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
+}
+
+.interdisciplinary-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
+  background: linear-gradient(135deg, #e0f7fa, #ffffff);
+}
+
+/* Flex Layout for Inter Options and Chat Window */
+.inter-options {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Ensure Inter Options takes up available vertical space */
+.inter-options {
+  height: 100%;
+}
+
+/* Chat Window Styling */
+.chat-window {
+  flex: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Option Sections Styling */
+.option-section {
+  background-color: #ffffff;
+  padding: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.option-section:hover {
+  background-color: #f9f9f9;
+}
+
+/* Button Styling (Reused from Original) */
+#interdisciplinary 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);
+}
+
+#interdisciplinary button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#interdisciplinary button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Select Dropdown Styling (Reused from Original) */
+#interdisciplinary 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;
+}
+
+#interdisciplinary select:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+/* Speech Controls Styling */
+#inter-speech-controls label {
+  display: block;
+  margin-bottom: 5px;
+  color: #555555;
+  font-weight: 500;
+}
+
+#inter-speech-controls input[type="range"] {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+/* Logs Container Styling */
+#inter-logs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 200px; /* Set a maximum height for the logs container */
+  overflow: hidden; /* Hide any overflow to prevent the container from expanding */
+}
+
+#inter-logs {
+  flex: 1;
+  max-height: 200px; /* Adjust as needed */
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto; /* Enable vertical scrolling */
+  padding: 10px;
+  background-color: #f9f9f9;
+  font-size: 0.85em;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+#inter-clear-logs {
+  align-self: flex-end;
+  background: linear-gradient(135deg, #FF5252, #E53935);
+  border: none;
+  color: white;
+  padding: 8px 16px;
+  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);
+}
+
+#inter-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 Box Styling */
+#inter-chat-box {
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  overflow-y: auto;
+  padding: 20px;
+  background-color: #ffffff;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 20px;
+}
+
+/* Message Styling */
+#interdisciplinary .message-container {
+  margin-bottom: 20px;
+  display: flex;
+}
+
+#interdisciplinary .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;
+}
+
+#interdisciplinary .user .message {
+  background: #DCF8C6;
+  border-bottom-right-radius: 0;
+}
+
+#interdisciplinary .assistant .message {
+  background: #e3f2fd;
+  border-bottom-left-radius: 0;
+}
+
+/* Chat Input Container Styling */
+#inter-text-input-container {
+  display: flex;
+  gap: 10px;
+}
+
+#inter-text-input {
+  flex: 1;
+  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;
+}
+
+#inter-text-input:focus {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+#inter-submit-button {
+  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);
+}
+
+#inter-submit-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#inter-submit-button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Microphone and Stop Buttons Styling */
+#inter-mic-container {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  margin-top: 20px;
+}
+
+#inter-start_button,
+#inter-stop_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);
+}
+
+#inter-stop_button {
+  background: linear-gradient(135deg, #E53935, #D32F2F);
+}
+
+#inter-start_button::before,
+#inter-stop_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;
+}
+
+#inter-start_button:active::before,
+#inter-stop_button:active::before {
+  transform: translate(-50%, -50%) scale(1);
+}
+
+#inter-start_button:disabled,
+#inter-stop_button:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+#inter-start_button:hover:not(:disabled),
+#inter-stop_button:hover:not(:disabled) {
+  transform: scale(1.05);
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
+}
+
+#inter-stop_button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #D32F2F, #C62828);
+}
+
+/* Icon Styling */
+.interdisciplinary .mic-icon,
+.interdisciplinary .stop-icon {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.3s;
+  fill: #ffffff;
+}
+
+/* Animation for Mic Icon */
+.interdisciplinary .mic-animate {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Stats */
+#inter-chat-stats {
+  font-size: 0.85em;
+  color: #555555;
+  text-align: center;
+  margin-top: 10px;
+}
+
+/* Hidden Class */
+#interdisciplinary .hidden {
+  display: none;
+}
+
+/* Scrollbar Styling */
+#inter-chat-box::-webkit-scrollbar,
+#inter-logs::-webkit-scrollbar {
+  width: 8px;
+}
+
+#inter-chat-box::-webkit-scrollbar-track,
+#inter-logs::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+#inter-chat-box::-webkit-scrollbar-thumb,
+#inter-logs::-webkit-scrollbar-thumb {
+  background: #cccccc;
+  border-radius: 4px;
+}
+
+#inter-chat-box::-webkit-scrollbar-thumb:hover,
+#inter-logs::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Initialize Button Styling (Reused from Original) */
+#inter-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);
+}
+
+#inter-download:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+#inter-download:disabled {
+  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Configuration Info Styling */
+#inter-configuration {
+  margin-top: 15px;
+  font-size: 0.9em;
+  color: #555555;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 800px) {
+  .interdisciplinary-card {
+    flex-direction: column;
+  }
+
+  /* Adjust Logs Container Height for Smaller Screens */
+  #inter-logs-container {
+    max-height: 200px;
+  }
+
+  #inter-logs {
+    max-height: 150px;
+  }
+}

interdisciplinary.js

@@ -0,0 +1,612 @@
+// interdisciplinary.js
+import * as webllm from "https://esm.run/@mlc-ai/web-llm";
+
+// Ensure the script runs after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  // Initialize the Interdisciplinary Studies Assistant section
+  const interMessages = [
+    {
+      content: "You are Aged Guru, an intelligent assistant skilled in interdisciplinary studies. Provide insightful and comprehensive answers to complex interdisciplinary questions.",
+      role: "system"
+    }
+  ];
+
+  const interAvailableModels = webllm.prebuiltAppConfig.model_list.map(
+    (m) => m.model_id
+  );
+  let interSelectedModel = "Llama-3.2-3B-Instruct-q4f16_1-MLC"; // Default model
+
+  function interUpdateEngineInitProgressCallback(report) {
+    console.log("Interdisciplinary Initialize", report.progress);
+    // Instead of updating a status span, log the progress
+    logMessage(`Model Initialization Progress: ${report.text}`, "system");
+  }
+
+  const interEngine = new webllm.MLCEngine();
+  interEngine.setInitProgressCallback(interUpdateEngineInitProgressCallback);
+
+  let interIsGenerating = false; // Flag to prevent multiple generations
+
+  async function interInitializeWebLLMEngine() {
+    logMessage("Model initialization started.", "system");
+    document.getElementById("loading-spinner").classList.remove("hidden"); // Show spinner
+    interSelectedModel = document.getElementById("inter-model-selection").value;
+    const config = {
+      temperature: 0.7, // Adjusted for more precise answers
+      top_p: 0.9
+    };
+    try {
+      await interEngine.reload(interSelectedModel, config);
+      document.getElementById("inter-selected-model").textContent = interSelectedModel;
+      document.getElementById("inter-start_button").disabled = false;
+      document.getElementById("inter-text-input").disabled = false; // Enable text input after initialization
+      document.getElementById("inter-submit-button").disabled = false; // Enable submit button after initialization
+      document.getElementById("inter-speech-controls").disabled = false; // Enable speech controls after initialization
+      document.getElementById("inter-configuration").classList.remove("hidden");
+      logMessage("Model initialized successfully.", "system");
+    } catch (error) {
+      console.error("Error initializing the model:", error);
+      alert("Failed to initialize the model. Please try again.");
+      logMessage("Failed to initialize the model.", "error");
+    } finally {
+      document.getElementById("loading-spinner").classList.add("hidden"); // Hide spinner
+    }
+  }
+
+  async function interStreamingGenerating(messages, onUpdate, onFinish, onError) {
+    if (interIsGenerating) {
+      console.warn("Interdisciplinary Generation already in progress.");
+      return;
+    }
+    interIsGenerating = true;
+    try {
+      let curMessage = "";
+      const completion = await interEngine.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 interEngine.getMessage();
+      console.log(`Interdisciplinary Generated final message: ${finalMessage}`); // Debugging
+      onFinish(finalMessage);
+      logMessage("Response generated successfully.", "system");
+    } catch (err) {
+      console.error(err);
+      onError(err);
+      logMessage("An error occurred during response generation.", "error");
+    } finally {
+      interIsGenerating = false;
+    }
+  }
+
+  // Flag to track the last input method
+  let interLastInputWasVoice = false;
+
+  function interAppendMessage(message) {
+    console.log(`Interdisciplinary Appending message: ${message.content} (Role: ${message.role})`); // Debugging
+    const interChatBox = document.getElementById("inter-chat-box");
+
+    // Check if the assistant's message is already appended to avoid duplication
+    if (message.role === "assistant") {
+      const existingMessages = interChatBox.querySelectorAll(".message");
+      const lastMessage = existingMessages[existingMessages.length - 1];
+      if (lastMessage && lastMessage.textContent === message.content) {
+        console.warn("Duplicate assistant message detected in Interdisciplinary section, skipping append.");
+
+        // Only trigger TTS for assistant messages if the last input was via voice
+        if (message.role === "assistant" && message.content !== "typing..." && interLastInputWasVoice) {
+          interSpeak(message.content);
+        }
+
+        return; // Exit to avoid appending the same message twice
+      }
+    }
+
+    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);
+    interChatBox.appendChild(container);
+    interChatBox.scrollTop = interChatBox.scrollHeight;
+
+    // Only trigger TTS for assistant messages if the last input was via voice
+    if (message.role === "assistant" && message.content !== "typing..." && interLastInputWasVoice) {
+      interSpeak(message.content);
+    }
+  }
+
+  function interUpdateLastMessage(content) {
+    const messageDoms = document.getElementById("inter-chat-box").querySelectorAll(".message");
+    const lastMessageDom = messageDoms[messageDoms.length - 1];
+    lastMessageDom.textContent = content;
+  }
+
+  function interOnSpeechRecognized(transcript) {
+    const input = transcript.trim();
+    const message = {
+      content: input,
+      role: "user"
+    };
+    if (input.length === 0) {
+      return;
+    }
+    interLastInputWasVoice = true; // Set flag as voice input
+    console.log(`Interdisciplinary Voice input received: ${input}`); // Debugging
+    document.getElementById("inter-start_button").disabled = true;
+    document.getElementById("inter-submit-button").disabled = true; // Disable submit button during processing
+
+    interMessages.push(message);
+    interAppendMessage(message);
+    logMessage(`User (Voice): ${input}`, "user");
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    interAppendMessage(aiPlaceholder);
+    logMessage("InterBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Interdisciplinary Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const interChatBox = document.getElementById("inter-chat-box");
+      const lastMessageContainer = interChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        interChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      interAppendMessage(aiMessage);
+      logMessage(`InterBot: ${finalMessage}`, "assistant");
+
+      document.getElementById("inter-start_button").disabled = false;
+      document.getElementById("inter-submit-button").disabled = false; // Re-enable submit button after processing
+      interEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("inter-chat-stats").classList.remove("hidden");
+        document.getElementById("inter-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    interStreamingGenerating(
+      interMessages,
+      interUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("inter-start_button").disabled = false;
+        document.getElementById("inter-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Speech Recognition Code for Interdisciplinary
+  let interRecognizing = false;
+  let interIgnore_onend;
+  let interFinal_transcript = '';
+  let interRecognition;
+
+  function interStartButton(event) {
+    if (interRecognizing) {
+      interRecognition.stop();
+      return;
+    }
+    interFinal_transcript = '';
+    interRecognition.lang = 'en-US';
+    interRecognition.start();
+    interIgnore_onend = false;
+    document.getElementById("inter-start_button").classList.add("mic-animate");
+    logMessage("Voice input started.", "system");
+  }
+
+  if (!('webkitSpeechRecognition' in window)) {
+    alert("Web Speech API is not supported by this browser.");
+    logMessage("Web Speech API is not supported by this browser.", "error");
+  } else {
+    interRecognition = new webkitSpeechRecognition();
+    interRecognition.continuous = false; // Non-continuous recognition
+    interRecognition.interimResults = false; // Get only final results
+
+    interRecognition.onstart = function() {
+      interRecognizing = true;
+      logMessage("Speech recognition started.", "system");
+    };
+
+    interRecognition.onerror = function(event) {
+      if (event.error == 'no-speech') {
+        document.getElementById("inter-start_button").classList.remove("mic-animate");
+        alert('No speech was detected in Interdisciplinary section.');
+        logMessage("No speech detected.", "error");
+        interIgnore_onend = true;
+      }
+      if (event.error == 'audio-capture') {
+        document.getElementById("inter-start_button").classList.remove("mic-animate");
+        alert('No microphone was found in Interdisciplinary section.');
+        logMessage("No microphone found.", "error");
+        interIgnore_onend = true;
+      }
+      if (event.error == 'not-allowed') {
+        alert('Permission to use microphone was denied in Interdisciplinary section.');
+        logMessage("Microphone permission denied.", "error");
+        interIgnore_onend = true;
+      }
+    };
+
+    interRecognition.onend = function() {
+      interRecognizing = false;
+      document.getElementById("inter-start_button").classList.remove("mic-animate");
+      logMessage("Speech recognition ended.", "system");
+      if (interIgnore_onend) {
+        return;
+      }
+      if (!interFinal_transcript) {
+        logMessage("No transcript captured.", "error");
+        return;
+      }
+      // Process the final transcript
+      interOnSpeechRecognized(interFinal_transcript);
+    };
+
+    interRecognition.onresult = function(event) {
+      for (let i = event.resultIndex; i < event.results.length; ++i) {
+        if (event.results[i].isFinal) {
+          interFinal_transcript += event.results[i][0].transcript;
+        }
+      }
+      interFinal_transcript = interFinal_transcript.trim();
+      logMessage(`Recognized Speech: ${interFinal_transcript}`, "user");
+    };
+  }
+
+  document.getElementById("inter-start_button").addEventListener("click", function(event) {
+    interStartButton(event);
+  });
+
+  // Initialize Model Selection
+  interAvailableModels.forEach((modelId) => {
+    const option = document.createElement("option");
+    option.value = modelId;
+    option.textContent = modelId;
+    document.getElementById("inter-model-selection").appendChild(option);
+  });
+  document.getElementById("inter-model-selection").value = interSelectedModel;
+
+  // **Enable the Download Model button after models are loaded**
+  document.getElementById("inter-download").disabled = false;
+
+  document.getElementById("inter-download").addEventListener("click", function () {
+    interInitializeWebLLMEngine().then(() => {
+      document.getElementById("inter-start_button").disabled = false;
+      // Enable speech controls after model initialization
+      document.getElementById("speech-rate").disabled = false;
+      document.getElementById("speech-pitch").disabled = false;
+      logMessage("Model download initiated.", "system");
+    });
+  });
+
+  document.getElementById("inter-clear-logs").addEventListener("click", function () {
+    document.getElementById("inter-logs").innerHTML = '';
+    logMessage("Logs cleared.", "system");
+  });
+
+  // ===== TTS Integration =====
+
+  // Initialize Speech Synthesis
+  let interSpeech = new SpeechSynthesisUtterance();
+  interSpeech.lang = "en";
+
+  let interVoices = [];
+
+  // Use addEventListener instead of directly assigning to onvoiceschanged
+  window.speechSynthesis.addEventListener("voiceschanged", () => {
+    interVoices = window.speechSynthesis.getVoices();
+    interPopulateVoices();
+  });
+
+  function interPopulateVoices() {
+    const voiceSelect = document.getElementById("inter-tools");
+    voiceSelect.innerHTML = ''; // Clear existing options
+    interVoices.forEach((voice, i) => {
+      const option = new Option(voice.name, i);
+      voiceSelect.appendChild(option);
+    });
+    if (interVoices.length > 0) {
+      const savedVoice = localStorage.getItem("selectedVoice");
+      if (savedVoice !== null && interVoices[savedVoice]) {
+        interSpeech.voice = interVoices[savedVoice];
+        voiceSelect.value = savedVoice;
+      } else {
+        interSpeech.voice = interVoices[0];
+      }
+    }
+  }
+
+  // Voice Selection Event Listener
+  document.getElementById("inter-tools").addEventListener("change", () => {
+    const selectedVoiceIndex = document.getElementById("inter-tools").value;
+    interSpeech.voice = interVoices[selectedVoiceIndex];
+    // Save to localStorage
+    localStorage.setItem("selectedVoice", selectedVoiceIndex);
+    logMessage(`Voice changed to: ${interVoices[selectedVoiceIndex].name}`, "system");
+  });
+
+  // Function to Speak Text with Voice Selection and Handling Large Texts
+  function interSpeak(text) {
+    if (!window.speechSynthesis) {
+      console.warn("Speech Synthesis not supported in this browser for Interdisciplinary section.");
+      logMessage("Speech Synthesis not supported in this browser.", "error");
+      return;
+    }
+
+    // Show spinner and enable Stop button
+    document.getElementById("loading-spinner").classList.remove("hidden");
+    document.getElementById("inter-stop_button").disabled = false;
+    logMessage("TTS started.", "system");
+
+    // Retrieve the currently selected voice
+    const selectedVoice = interSpeech.voice;
+
+    // Split the text into sentences to manage large texts
+    const sentences = text.match(/[^\.!\?]+[\.!\?]+/g) || [text];
+
+    let utterancesCount = sentences.length;
+
+    sentences.forEach(sentence => {
+      const utterance = new SpeechSynthesisUtterance(sentence.trim());
+
+      // Assign the selected voice to the utterance
+      if (selectedVoice) {
+        utterance.voice = selectedVoice;
+      }
+
+      // Assign rate and pitch from sliders
+      const rate = parseFloat(document.getElementById("speech-rate").value);
+      const pitch = parseFloat(document.getElementById("speech-pitch").value);
+      utterance.rate = rate; // Adjust the speaking rate (0.1 to 10)
+      utterance.pitch = pitch; // Adjust the pitch (0 to 2)
+
+      // Add event listeners for debugging or additional functionality
+      utterance.onstart = () => {
+        console.log("Speech started:", sentence);
+        logMessage(`TTS started: ${sentence.trim()}`, "system");
+      };
+
+      utterance.onend = () => {
+        console.log("Speech ended:", sentence);
+        logMessage(`TTS ended: ${sentence.trim()}`, "system");
+        utterancesCount--;
+        if (utterancesCount === 0) {
+          // Hide spinner and disable Stop button when all utterances have been spoken
+          document.getElementById("loading-spinner").classList.add("hidden");
+          document.getElementById("inter-stop_button").disabled = true;
+          logMessage("All TTS messages have been spoken.", "system");
+        }
+      };
+
+      utterance.onerror = (e) => {
+        console.error("Speech Synthesis Error:", e);
+        alert("An error occurred during speech synthesis. Please try again.");
+        logMessage("Speech synthesis encountered an error.", "error");
+        utterancesCount = 0;
+        document.getElementById("loading-spinner").classList.add("hidden");
+        document.getElementById("inter-stop_button").disabled = true;
+      };
+
+      window.speechSynthesis.speak(utterance);
+    });
+  }
+
+  // ===== New: Stop Speech Functionality =====
+
+  /**
+   * Stops any ongoing speech synthesis.
+   */
+  function interStopSpeech() {
+    if (window.speechSynthesis.speaking) {
+      window.speechSynthesis.cancel();
+      document.getElementById("loading-spinner").classList.add("hidden");
+      document.getElementById("inter-stop_button").disabled = true;
+      logMessage("Speech synthesis stopped by user.", "system");
+    }
+  }
+
+  // Event Listener for Stop Button
+  document.getElementById("inter-stop_button").addEventListener("click", function () {
+    interStopSpeech();
+  });
+
+  // ===== New: Text Input Handling =====
+
+  // Function to Handle Text Submission
+  function interHandleTextSubmit() {
+    const textInput = document.getElementById("inter-text-input");
+    const input = textInput.value.trim();
+    if (input.length === 0) {
+      return;
+    }
+    textInput.value = ''; // Clear the input field
+    const message = {
+      content: input,
+      role: "user" // Ensure this is correctly set
+    };
+    console.log(`Interdisciplinary Text input received: ${input}`); // Debugging
+    logMessage(`User: ${input}`, "user");
+
+    interLastInputWasVoice = false; // Set flag as text input
+    document.getElementById("inter-submit-button").disabled = true; // Disable to prevent multiple submissions
+
+    interMessages.push(message);
+    interAppendMessage(message);
+
+    // Append "typing..." placeholder
+    const aiPlaceholder = {
+      content: "typing...",
+      role: "assistant"
+    };
+    interAppendMessage(aiPlaceholder);
+    logMessage("InterBot is typing...", "system");
+
+    const onFinishGenerating = (finalMessage) => {
+      console.log(`Interdisciplinary Finishing generation with message: ${finalMessage}`); // Debugging
+      // Remove the "typing..." placeholder
+      const interChatBox = document.getElementById("inter-chat-box");
+      const lastMessageContainer = interChatBox.lastElementChild;
+      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
+        interChatBox.removeChild(lastMessageContainer);
+      }
+
+      // Append the final message
+      const aiMessage = {
+        content: finalMessage,
+        role: "assistant"
+      };
+      interAppendMessage(aiMessage);
+      logMessage(`InterBot: ${finalMessage}`, "assistant");
+
+      // Trigger TTS for assistant messages if required
+      if (interLastInputWasVoice) {
+        interSpeak(finalMessage);
+      }
+
+      document.getElementById("inter-submit-button").disabled = false; // Re-enable submit button after processing
+      interEngine.runtimeStatsText().then((statsText) => {
+        document.getElementById("inter-chat-stats").classList.remove("hidden");
+        document.getElementById("inter-chat-stats").textContent = statsText;
+        logMessage(`Runtime Stats: ${statsText}`, "system");
+      });
+    };
+
+    interStreamingGenerating(
+      interMessages,
+      interUpdateLastMessage,
+      onFinishGenerating,
+      (err) => {
+        console.error(err);
+        alert("An error occurred while generating the response. Please try again.");
+        logMessage("Error during response generation.", "error");
+        document.getElementById("inter-submit-button").disabled = false;
+      }
+    );
+  }
+
+  // Event Listener for Submit Button
+  document.getElementById("inter-submit-button").addEventListener("click", function () {
+    interHandleTextSubmit();
+  });
+
+  // Event Listener for Enter Key in Text Input
+  document.getElementById("inter-text-input").addEventListener("keypress", function (e) {
+    if (e.key === 'Enter') {
+      interHandleTextSubmit();
+    }
+  });
+
+  // ===== Persisting User Preferences =====
+
+  // Load Preferences on Initialization
+  window.addEventListener("load", () => {
+    const savedVoice = localStorage.getItem("selectedVoice");
+    if (savedVoice !== null && interVoices[savedVoice]) {
+      document.getElementById("inter-tools").value = savedVoice;
+      interSpeech.voice = interVoices[savedVoice];
+      logMessage(`Loaded saved voice: ${interVoices[savedVoice].name}`, "system");
+    }
+
+    const savedRate = localStorage.getItem("speechRate");
+    if (savedRate !== null) {
+      document.getElementById("speech-rate").value = savedRate;
+      interSpeech.rate = parseFloat(savedRate);
+      logMessage(`Loaded saved speech rate: ${savedRate}`, "system");
+    }
+
+    const savedPitch = localStorage.getItem("speechPitch");
+    if (savedPitch !== null) {
+      document.getElementById("speech-pitch").value = savedPitch;
+      interSpeech.pitch = parseFloat(savedPitch);
+      logMessage(`Loaded saved speech pitch: ${savedPitch}`, "system");
+    }
+  });
+
+  // Save Speech Rate
+  document.getElementById("speech-rate").addEventListener("input", (e) => {
+    const rate = e.target.value;
+    interSpeech.rate = parseFloat(rate);
+    localStorage.setItem("speechRate", rate);
+    logMessage(`Speech rate changed to: ${rate}`, "system");
+  });
+
+  // Save Speech Pitch
+  document.getElementById("speech-pitch").addEventListener("input", (e) => {
+    const pitch = e.target.value;
+    interSpeech.pitch = parseFloat(pitch);
+    localStorage.setItem("speechPitch", pitch);
+    logMessage(`Speech pitch changed to: ${pitch}`, "system");
+  });
+
+  // ===== Logging Function =====
+
+  /**
+   * Logs messages to the #inter-logs container.
+   * @param {string} message - The message to log.
+   * @param {string} type - The type of message: 'user', 'assistant', 'system', 'error'.
+   */
+  function logMessage(message, type) {
+    const interLogs = document.getElementById("inter-logs");
+    const logEntry = document.createElement("div");
+    logEntry.classList.add("log-entry");
+    logEntry.textContent = `[${type.toUpperCase()}] ${message}`;
+
+    // Style log entries based on type
+    switch(type) {
+      case 'user':
+        logEntry.style.color = "#00796B";
+        break;
+      case 'assistant':
+        logEntry.style.color = "#004D40";
+        break;
+      case 'system':
+        logEntry.style.color = "#555555";
+        break;
+      case 'error':
+        logEntry.style.color = "#E53935";
+        break;
+      default:
+        logEntry.style.color = "#000000";
+    }
+
+    interLogs.appendChild(logEntry);
+    interLogs.scrollTop = interLogs.scrollHeight;
+  }
+
+  // ===== TTS Integration Continued =====
+
+  // Optional: Global Listener to Detect When All Speech Has Finished
+  window.speechSynthesis.addEventListener('end', () => {
+    console.log("All interdisciplinary speech has been spoken.");
+    logMessage("All TTS messages have been spoken.", "system");
+    // Ensure Stop button is disabled after speech ends
+    document.getElementById("inter-stop_button").disabled = true;
+  });
+});