Upload 2 files

digital.human.video.js

@@ -381,7 +381,7 @@ document.addEventListener("DOMContentLoaded", () => {
         utterance.voice = selectedVoice;
       }
 
-      // Assign rate and pitch from sliders
+// 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)
@@ -644,11 +644,6 @@ document.addEventListener("DOMContentLoaded", () => {
     reader.readAsDataURL(file);
   });
 
-
-
-
-  // ------------------ Additions Start Here ------------------
-
   // ===== Modified: Send Image to API via CORS Anywhere =====
 
   /**
@@ -669,17 +664,12 @@ document.addEventListener("DOMContentLoaded", () => {
       "Content-Type": "application/json"
     };
 
-    if (imageB64.length > 180000) {
-      alert("To upload larger images, use the assets API (see docs)");
-      return;
-    }
-
     const payload = {
       "model": "microsoft/phi-3.5-vision-instruct",
       "messages": [
         {
           "role": "user",
-          "content": `Describe the image and solve it. <img src="data:image/png;base64,${imageB64}" />`
+          "content": `Describe the image and solve it. <img src="data:image/jpeg;base64,${imageB64}" />`
         }
       ],
       "max_tokens": 512,
@@ -724,13 +714,17 @@ document.addEventListener("DOMContentLoaded", () => {
   // Event listener for Explain button (Webcam)
   document.getElementById("capture-webcam-button").addEventListener("click", function() {
     const video = document.getElementById("webcam-video");
-    const canvas = document.createElement("canvas");
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
+    const canvas = document.getElementById("webcam-canvas");
     const context = canvas.getContext("2d");
+
+    // Set canvas size to desired dimensions (e.g., 640x480)
+    canvas.width = 640;
+    canvas.height = 480;
+
+    // Draw the video frame onto the canvas, scaling it to fit
     context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
-    const imageDataURL = canvas.toDataURL("image/png");
+    const imageDataURL = canvas.toDataURL("image/jpeg", 0.8); // Use JPEG for smaller file size
     const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
 
     const userMessage = {
@@ -753,11 +747,45 @@ document.addEventListener("DOMContentLoaded", () => {
   // Event listener for Discuss button (Draw tab)
   document.getElementById("discuss-button").addEventListener("click", function() {
     const canvas = document.getElementById("draw-canvas");
+
+    const ctx = canvas.getContext('2d');
+
+    // Check if the canvas is empty
+    const isCanvasBlank = ctx.getImageData(0, 0, canvas.width, canvas.height).data.every(channel => channel === 0);
+
+    if (isCanvasBlank) {
+      console.log("Canvas is blank. Please draw something before analyzing.");
+      alert("The canvas is empty. Please draw something before analyzing.");
+      return;
+    }
+
+
+
+
     const imageDataURL = canvas.toDataURL("image/png");
     const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
 
+    console.log('Canvas dimensions:', canvas.width, 'x', canvas.height);
+    console.log('Image data length:', imageB64.length);
+    console.log('First 100 characters of image data:', imageB64.substring(0, 100));
+
+
+    // Create a visual confirmation for the user
+    //const confirmationImage = new Image();
+    //confirmationImage.src = imageDataURL;
+    //confirmationImage.onload = function() {
+    //  const confirmationCanvas = document.createElement('canvas');
+    //  confirmationCanvas.width = this.width;
+    //  confirmationCanvas.height = this.height;
+    //  const confirmCtx = confirmationCanvas.getContext('2d');
+    //  confirmCtx.drawImage(this, 0, 0);
+
+    //  document.body.appendChild(confirmationCanvas);
+    //  setTimeout(() => document.body.removeChild(confirmationCanvas), 5000); // Remove after 5 seconds
+    //};
+
     const userMessage = {
-      content: "Describe the image and solve it.",
+      content: "Describe the image mathematically and solve it.",
       role: "user"
     };
     videoAppendMessage(userMessage);
@@ -773,6 +801,16 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 
+
+  // Function to check if the canvas is blank
+  function isCanvasBlank(canvas) {
+    const context = canvas.getContext('2d');
+    const pixelBuffer = new Uint32Array(
+      context.getImageData(0, 0, canvas.width, canvas.height).data.buffer
+    );
+    return !pixelBuffer.some(color => color !== 0);
+  }
+
   // Tab Switching Functionality
   const tabButtons = document.querySelectorAll('.image-tabs .tab-button');
   const tabContents = document.querySelectorAll('.video-image-section .tab-content');
@@ -787,7 +825,7 @@ document.addEventListener("DOMContentLoaded", () => {
       // Hide all tab contents
       tabContents.forEach(content => content.classList.add('hidden'));
 
-      // Show the selected tab content
+// Show the selected tab content
       const selectedTab = button.getAttribute('data-tab');
       document.querySelector(`.video-image-section .${selectedTab}-tab`).classList.remove("hidden");
 
@@ -893,12 +931,20 @@ document.addEventListener("DOMContentLoaded", () => {
     canvas.width = canvas.offsetWidth;
     canvas.height = 400; // Fixed height
 
+    //added by rahul
+    canvas.style.backgroundColor = 'white';
+
+
     // Set initial styles
     ctxDraw.strokeStyle = currentColor;
     ctxDraw.lineWidth = currentSize;
     ctxDraw.lineJoin = 'round';
     ctxDraw.lineCap = 'round';
 
+    //added by rahul
+    ctxDraw.fillStyle ='white'
+    ctxDraw.fillRect(0, 0, canvas.width, canvas.height);
+
     // Mouse Events
     canvas.addEventListener('mousedown', (e) => {
       draw = true;

finalwork4.html

@@ -0,0 +1,821 @@
+<!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">
+  <!-- Add new CSS for 3D Explorer -->
+  <link rel="stylesheet" href="3d-explorer.css">
+</head>
+<body>
+
+<!-- Sidebar -->
+<div class="sidebar">
+  <h2>AGED GURU</h2>
+
+  <a href="#" class="active" data-content="home">Home</a>
+
+  <a href="#" data-content="remotevoice">Digital Human</a>
+  <a href="#" data-content="video">Workbench</a>
+  <a href="#" data-content="coder">Young Coder</a>
+
+  <!--     <a href="#" data-content="voice">Digital Human Voice</a> -->
+  <!--      <a href="#" data-content="interdisciplinary">Interdisciplinary Studies & Advanced Math</a> -->
+  <!--  <a href="#" data-content="advanced-math">Advanced Mathematics & Problem Solving</a>   -->
+
+  <a href="#" data-content="insights">Insights</a>
+  <a href="#" data-content="podcast">Podcast</a>
+
+  <a href="#" data-content="magazines-base">Workshop & Wisdom</a>
+  <a href="#" data-content="digitaldustbin-base">Digital Dustbin</a>
+  <a href="#" data-content="treasured-base">Treasured Teachings</a>
+
+  <a href="#" data-content="3d-explorer">3D Explorer</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">
+
+
+
+    <!-- --------------------Home Starts------------------------------------------- -->
+    <div id="home" class="content-section">
+
+
+    </div>
+    <!-- --------------------Home ends---------------------------------------------- -->
+
+    <!-- --------------------Remote Voice Starts------------------------------------------- -->
+    <div id="remotevoice" class="content-section hidden">
+      <div class="card">
+        <iframe src="https://demo.dailybots.ai/"
+                width="100%"
+                height="600px"
+                style="border: none; border-radius: 12px;"
+                title="Document Podcast"
+                allow="microphone">
+        </iframe>
+        </div>
+    </div>
+    <!-- --------------------Remote Voice ends---------------------------------------------- -->
+
+
+
+
+    <!-- -----------------Digital Human Voice Content Starts---------------- -->
+    <div id="voice" class="content-section hidden">
+      <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>
+              <canvas id="webcam-canvas" style="display:none;"></canvas>
+              <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">
+
+        <!-- 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">
+              <iframe
+                src="https://adrienb134-rag-colpali-qwen2vl.hf.space/"
+                width="100%"
+                height="600px"
+                style="border: none; border-radius: 12px;"
+                title="Insights PDF"
+              ></iframe>
+          </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">
+
+        <!-- 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>
+
+        <!-- Podcast Tab Contents -->
+        <div class="podcast-tab-content">
+          <!-- Document Podcast Content -->
+          <div id="document-podcast" class="podcast-content active">
+            <iframe src="https://lamm-mit-pdf2audio.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">
+            <iframe src="https://gabrielchua-open-notebooklm.hf.space/"
+                    width="100%"
+                    height="600px"
+                    style="border: none; border-radius: 12px;"
+                    title="Conversational Podcast">
+            </iframe>
+          </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">
+        <!-- 3D Explorer Tabs -->
+        <div class="explorer-tabs">
+          <button class="explorer-tab-button active" data-explorer-tab="stable-fast-3d">Fast 3D</button>
+          <button class="explorer-tab-button" data-explorer-tab="3dtopia-xl">Quality 3D</button>
+        </div>
+
+        <!-- 3D Explorer Tab Contents -->
+        <div class="explorer-tab-content">
+          <!-- Stable Fast 3D Content -->
+          <div id="stable-fast-3d" class="explorer-content active">
+            <iframe src="https://stabilityai-stable-fast-3d.hf.space/"
+                    width="100%"
+                    height="600px"
+                    style="border: none; border-radius: 12px;"
+                    title="Fast 3D">
+            </iframe>
+          </div>
+
+          <!-- 3Dtopia XL Content -->
+          <div id="3dtopia-xl" class="explorer-content hidden">
+            <iframe src="https://frozenburning-3dtopia-xl.hf.space/"
+                    width="100%"
+                    height="600px"
+                    style="border: none; border-radius: 12px;"
+                    title="Quality 3D">
+            </iframe>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- --------------------3D Explorer Content Ends--------------------------------------------- -->
+
+
+
+
+
+    <!-- --------------------Magazines Base Starts------------------------------------------- -->
+    <div id="magazines-base" class="content-section hidden">
+      <div class="card">
+        <h2>Classic Magazines Collection</h2>
+        <p>Content for magazines.</p>
+      </div>
+    </div>
+    <!-- --------------------Magazines Base ends---------------------------------------------- -->
+
+
+
+    <!-- --------------------Treasured Teachings Starts------------------------------------------- -->
+    <div id="treasured-base" class="content-section hidden">
+      <div class="card">
+        <h2>Treasured Teachings</h2>
+        <p>Content for Treasured Teachings.</p>
+      </div>
+    </div>
+    <!-- --------------------Treasured Teachings ends---------------------------------------------- -->
+
+
+    <!-- --------------------Magazines Base Starts------------------------------------------- -->
+    <div id="books-base" class="content-section hidden">
+      <div class="card">
+        <h2>Books Collection</h2>
+        <p>Content for Books.</p>
+      </div>
+    </div>
+    <!-- --------------------Magazines Base ends---------------------------------------------- -->
+
+
+
+
+
+    <!-- --------------------Digital-dustin Starts------------------------------------------- -->
+    <div id="digitaldustbin-base" class="content-section hidden">
+      <div class="card">
+        <h2>Digital Dustbin</h2>
+        <p>Content for Digital Dustbin.</p>
+      </div>
+    </div>
+    <!-- --------------------Digital-dustin ends---------------------------------------------- -->
+
+
+
+
+    <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>
+<script type="module" src="podcast.js"></script>
+
+<!-- Include the new script for 3D Explorer -->
+<script type="module" src="3d-explorer.js"></script>
+
+</body>
+</html>