Upload 15 files

digital.human.video.js

@@ -647,21 +647,24 @@ document.addEventListener("DOMContentLoaded", () => {
 
 
 
-
-
-
-
-
-
   // ------------------ Additions Start Here ------------------
 
-  // Function to send image to the API
+  // ===== Modified: Send Image to API via CORS Anywhere =====
+
+  /**
+   * Sends the base64-encoded image to the NVIDIA API through the CORS Anywhere proxy.
+   * @param {string} imageB64 - The base64-encoded image string.
+   * @param {function} onResult - Callback function to handle successful responses.
+   * @param {function} onError - Callback function to handle errors.
+   */
   function sendImageToAPI(imageB64, onResult, onError) {
-    const invokeUrl = "https://integrate.api.nvidia.com/v1/chat/completions";
-    const stream = false; // Streaming not supported in browser
+    const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
+    const targetUrl = 'https://integrate.api.nvidia.com/v1/chat/completions';
+    const invokeUrl = proxyUrl + targetUrl;
+    const stream = false; // Streaming not supported via proxy
 
     const headers = {
-      "Authorization": "Bearer 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",
+      "Authorization": "Bearer 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",
       "Accept": "application/json",
       "Content-Type": "application/json"
     };
@@ -676,7 +679,7 @@ document.addEventListener("DOMContentLoaded", () => {
       "messages": [
         {
           "role": "user",
-          "content": `Describe the image. <img src="data:image/png;base64,${imageB64}" />`
+          "content": `Describe the image mathematically and solve it. <img src="data:image/png;base64,${imageB64}" />`
         }
       ],
       "max_tokens": 512,
@@ -702,7 +705,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
 
     const userMessage = {
-      content: "Please analyze this image.",
+      content: "Describe the image mathematically and solve it.",
       role: "user"
     };
     videoAppendMessage(userMessage);
@@ -714,7 +717,7 @@ document.addEventListener("DOMContentLoaded", () => {
       };
       videoAppendMessage(assistantMessage);
     }, function(error) {
-      alert("Error: " + error);
+      alert("Error: " + (error.response?.data?.error || error.message));
     });
   });
 
@@ -731,7 +734,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
 
     const userMessage = {
-      content: "Please explain this image.",
+      content: "Describe the image mathematically and solve it.",
       role: "user"
     };
     videoAppendMessage(userMessage);
@@ -743,7 +746,7 @@ document.addEventListener("DOMContentLoaded", () => {
       };
       videoAppendMessage(assistantMessage);
     }, function(error) {
-      alert("Error: " + error);
+      alert("Error: " + (error.response?.data?.error || error.message));
     });
   });
 
@@ -754,7 +757,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
 
     const userMessage = {
-      content: "Please discuss this drawing.",
+      content: "Describe the image and solve it.",
       role: "user"
     };
     videoAppendMessage(userMessage);
@@ -766,24 +769,10 @@ document.addEventListener("DOMContentLoaded", () => {
       };
       videoAppendMessage(assistantMessage);
     }, function(error) {
-      alert("Error: " + error);
+      alert("Error: " + (error.response?.data?.error || error.message));
     });
   });
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
   // Tab Switching Functionality
   const tabButtons = document.querySelectorAll('.image-tabs .tab-button');
   const tabContents = document.querySelectorAll('.video-image-section .tab-content');
@@ -797,9 +786,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
       // Hide all tab contents
       tabContents.forEach(content => content.classList.add('hidden'));
+
       // Show the selected tab content
       const selectedTab = button.getAttribute('data-tab');
-      document.querySelector(`.video-image-section .${selectedTab}-tab`).classList.remove('hidden');
+      document.querySelector(`.video-image-section .${selectedTab}-tab`).classList.remove("hidden");
 
       // Initialize functionalities when their respective tabs are activated
       if (selectedTab === 'webcam') {

finalwork4.html

@@ -0,0 +1,701 @@
+<!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 -->
+  <link rel="stylesheet" href="podcast.css">
+  <link rel="stylesheet" href="insights.css">
+</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="interdisciplinary">Interdisciplinary Studies Assistant</a>
+  <a href="#" data-content="coder">Young Coder</a>
+  <a href="#" data-content="advanced-math">Advanced Mathematics & Problem Solving</a>
+  <a href="#" data-content="podcast">Podcast</a>
+  <a href="#" data-content="insights">Insights</a>
+  <a href="#" data-content="knowledge-base">Knowledge Base</a>
+  <a href="#" data-content="digital-twin">Digital Twin</a>
+  <a href="#" data-content="3d-explorer">3D Explorer</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>Initialize 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">
+        <!-- Video Options -->
+        <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>Initialize 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>
+
+        <!-- New: Wrapper for Chat Window and Image Upload Section -->
+        <div class="video-main">
+          <!-- Chat Window Section -->
+          <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>
+
+          <!-- Image Upload and Canvas Section -->
+          <div class="video-image-section">
+            <!-- Tab Navigation -->
+            <div class="image-tabs">
+              <button class="tab-button active" data-tab="upload">Upload Image</button>
+              <button class="tab-button" data-tab="webcam">Webcam</button>
+              <button class="tab-button" data-tab="draw">Draw</button>
+            </div>
+
+            <!-- Tab Contents -->
+            <div class="tab-content upload-tab">
+              <h3>Upload and Analyze Image</h3>
+              <input type="file" id="video-image-upload" accept="image/*" />
+              <canvas id="video-image-canvas"></canvas>
+              <button id="analyze-button">Analyze</button>
+            </div>
+
+            <div class="tab-content webcam-tab hidden">
+              <h3>Webcam Capture</h3>
+              <video id="webcam-video" autoplay playsinline></video>
+              <button id="capture-webcam-button">Explain Image</button>
+            </div>
+
+            <div class="tab-content draw-tab hidden">
+              <h3>Draw on Canvas</h3>
+              <canvas id="draw-canvas"></canvas>
+              <div class="draw-controls">
+                <button id="clear-draw-button">Clear Drawing</button>
+                <label for="draw-color">Color:</label>
+                <input type="color" id="draw-color" value="#000000">
+                <label for="draw-size">Size:</label>
+                <input type="range" id="draw-size" min="1" max="10" value="2">
+                <button id="discuss-button">Discuss</button>
+              </div>
+            </div>
+          </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">
+        <!-- Wrapper for Top Options -->
+        <div class="coder-options">
+          <!-- Model Selection Section -->
+          <div id="coder-model-selection-container" class="option-section">
+            <label for="coder-model-selection">Select Model:</label>
+            <div class="option-control-group">
+              <select id="coder-model-selection"></select>
+              <button id="coder-download" disabled>Initialize Model</button>
+            </div>
+          </div>
+
+          <!-- Voice 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>
+        <!-- End of Top Options Wrapper -->
+
+        <!-- Wrapper for Chat and Python Interpreter -->
+        <div class="coder-main" style="display: flex; flex-direction: row; gap: 20px;">
+          <!-- Chat Window Section -->
+          <div class="chat-window" style="flex: 2;">
+            <!-- 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>
+          <!-- End of Chat Window Section -->
+
+          <!-- Python Interpreter Section -->
+          <div id="coder-python-container" style="flex: 1; display: flex; flex-direction: column; gap: 10px;">
+            <iframe src="https://pyodide.org/en/stable/console.html" style="flex: 1; border: none; border-radius: var(--border-radius);"></iframe>
+          </div>
+          <!-- End of Python Interpreter Section -->
+        </div>
+        <!-- End of Wrapper for Chat and Python Interpreter -->
+
+        <!-- Loading Spinner and Configuration Info (if any additional) can remain as is -->
+      </div>
+    </div>
+    <!-- --------------------Coder Content Ends---------------------------------------- -->
+
+
+
+
+    <!-- --------------------Math Content Starts--------------------------------------- -->
+    <div id="advanced-math" class="content-section hidden">
+      <div class="card advanced-math-card">
+        <!-- Top Controls -->
+        <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>Initialize 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>
+
+        <!-- Chat Window Section -->
+        <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>Initialize 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>
+
+        <!-- New: Insights Tabs -->
+        <div class="insights-tabs">
+          <button class="insights-tab-button active" data-insights-tab="pdf">Insights PDF</button>
+          <button class="insights-tab-button" data-insights-tab="images">Insights Images</button>
+          <button class="insights-tab-button" data-insights-tab="translator">Translator</button>
+          <button class="insights-tab-button" data-insights-tab="youtube">Youtube Summarizer</button>
+        </div>
+
+        <!-- New: Insights Tab Contents -->
+        <div class="insights-tab-content">
+          <!-- Insights PDF Content -->
+          <div id="pdf" class="insights-content active">
+            <iframe
+              src="https://cin-model-kotaemon-demo.hf.space/"
+              width="100%"
+              height="600px"
+              style="border: none; border-radius: 12px;"
+              title="Insights PDF"
+            ></iframe>
+          </div>
+
+          <!-- Insights Images Content -->
+          <div id="images" class="insights-content hidden">
+            <p>Content for Insights Images will go here.</p>
+          </div>
+
+          <!-- Translator Content -->
+          <div id="translator" class="insights-content hidden">
+            <p>Content for Translator will go here.</p>
+          </div>
+
+          <!-- Youtube Summarizer Content -->
+          <div id="youtube" class="insights-content hidden">
+            <p>Content for Youtube Summarizer will go here.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------Insights Content Ends------------------------------------------- -->
+
+
+
+
+
+
+    <!-- --------------------Podcast Content Starts------------------------------------------- -->
+    <div id="podcast" class="content-section hidden">
+      <div class="card">
+        <h2>Podcast</h2>
+
+        <!-- New: Podcast Tabs -->
+        <div class="podcast-tabs">
+          <button class="podcast-tab-button active" data-podcast-tab="document-podcast">Document Podcast</button>
+          <button class="podcast-tab-button" data-podcast-tab="conversational-podcast">Conversational Podcast</button>
+        </div>
+
+        <!-- New: Podcast Tab Contents -->
+        <div class="podcast-tab-content">
+          <!-- Document Podcast Content -->
+          <div id="document-podcast" class="podcast-content active">
+            <iframe src="https://gabrielchua-open-notebooklm.hf.space/"
+                    width="100%"
+                    height="600px"
+                    style="border: none; border-radius: 12px;"
+                    title="Document Podcast">
+            </iframe>
+          </div>
+
+          <!-- Conversational Podcast Content -->
+          <div id="conversational-podcast" class="podcast-content hidden">
+            <p>Content for Conversational Podcast will go here.</p>
+          </div>
+        </div>
+        <!-- End of Podcast Tab Contents -->
+
+      </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 Axios from CDN -->
+<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+<!-- 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 -->
+<!-- Include Pyodide Script -->
+
+
+<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 -->
+<script type="module" src="insights.js"></script>
+
+</body>
+</html>

insights.css

@@ -0,0 +1,51 @@
+/* --------------------Insights Tabs Styling-------------------- */
+.insights-tabs {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.insights-tab-button {
+  flex: 1;
+  padding: 10px 15px;
+  background: linear-gradient(135deg, #00796B, #004D40);
+  border: none;
+  color: white;
+  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);
+}
+
+.insights-tab-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.insights-tab-button.active {
+  background: linear-gradient(135deg, #004D40, #00332E);
+  cursor: default;
+  box-shadow: none;
+}
+
+.insights-tab-content .insights-content {
+  display: none;
+}
+
+.insights-tab-content .insights-content.active {
+  display: block;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 800px) {
+  .insights-tabs {
+    flex-direction: column;
+  }
+
+  .insights-tab-button {
+    flex: none;
+    width: 100%;
+  }
+}

insights.js

@@ -0,0 +1,25 @@
+  // --------------------Insights Tabs Functionality--------------------
+  const insightsTabButtons = document.querySelectorAll('.insights-tab-button');
+  const insightsContents = document.querySelectorAll('.insights-content');
+
+  insightsTabButtons.forEach(button => {
+  button.addEventListener('click', () => {
+    // Remove active class from all buttons
+    insightsTabButtons.forEach(btn => btn.classList.remove('active'));
+    // Add active class to the clicked button
+    button.classList.add('active');
+
+    // Hide all insights content
+    insightsContents.forEach(content => {
+      content.classList.add('hidden');
+      content.classList.remove('active');
+    });
+
+    // Show the selected insights content
+    const target = button.getAttribute('data-insights-tab');
+    const targetContent = document.getElementById(target);
+    targetContent.classList.remove('hidden');
+    targetContent.classList.add('active');
+  });
+});
+

podcast.css

@@ -0,0 +1,51 @@
+/* --------------------Podcast Tabs Styling-------------------- */
+ .podcast-tabs {
+   display: flex;
+   gap: 10px;
+   margin-bottom: 20px;
+ }
+
+.podcast-tab-button {
+  flex: 1;
+  padding: 10px 15px;
+  background: linear-gradient(135deg, #00796B, #004D40);
+  border: none;
+  color: white;
+  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);
+}
+
+.podcast-tab-button:hover:not(:disabled) {
+  background: linear-gradient(135deg, #005D56, #00332E);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.podcast-tab-button.active {
+  background: linear-gradient(135deg, #004D40, #00332E);
+  cursor: default;
+  box-shadow: none;
+}
+
+.podcast-tab-content .podcast-content {
+  display: none;
+}
+
+.podcast-tab-content .podcast-content.active {
+  display: block;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 800px) {
+  .podcast-tabs {
+    flex-direction: column;
+  }
+
+  .podcast-tab-button {
+    flex: none;
+    width: 100%;
+  }
+}