Upload 12 files

advanced.math.css

@@ -9,6 +9,7 @@
 /* Card Styling */
 .advanced-math-card {
   display: flex;
+  flex-direction: column; /* Changed from row to column */
   gap: 20px;
   background: linear-gradient(135deg, #ffffff, #f1f8e9);
   border-radius: 16px;
@@ -25,17 +26,13 @@
   background: linear-gradient(135deg, #e0f7fa, #ffffff);
 }
 
-/* Flex Layout for Math Options and Chat Window */
+/* Flex Layout for Math Controls and Chat Window */
 .math-options {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row; /* Changed from column to row */
   gap: 20px;
-}
-
-/* Ensure Math Options takes up available vertical space */
-.math-options {
-  height: 100%;
+  /* Removed height: 100%; to allow natural height based on content */
 }
 
 /* Chat Window Styling */
@@ -53,6 +50,7 @@
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: background 0.3s, box-shadow 0.3s;
+  flex: 1; /* Ensure equal width for all option sections */
 }
 
 .option-section:hover {
@@ -419,4 +417,8 @@
   #math-logs {
     max-height: 150px;
   }
+
+  .math-options {
+    flex-direction: column; /* Stack controls vertically on small screens */
+  }
 }

advanced.math.js

@@ -223,7 +223,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   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");
+    logMessage("Web Speech API not supported by this browser.", "error");
   } else {
     mathRecognition = new webkitSpeechRecognition();
     mathRecognition.continuous = false; // Non-continuous recognition

coder.css

@@ -1,5 +1,43 @@
 /* coder.css */
 
+/* Define CSS Variables at the Root */
+:root {
+  /* Colors */
+  --primary-color: #00796B;
+  --primary-gradient: linear-gradient(135deg, #00796B, #004D40);
+  --primary-hover-gradient: linear-gradient(135deg, #005D56, #00332E);
+  --secondary-color: #E53935;
+  --secondary-gradient: linear-gradient(135deg, #FF5252, #E53935);
+  --secondary-hover-gradient: linear-gradient(135deg, #E53935, #D32F2F);
+  --disabled-gradient: linear-gradient(135deg, #A5D6A7, #81C784);
+  --background-color: #ffffff;
+  --hover-background-color: #f9f9f9;
+  --text-color: #333333;
+  --border-color: #cccccc;
+
+  /* Existing Spacing Variables */
+  --padding: 20px;
+  --padding-small: 15px;
+  --gap: 15px;
+  --gap-large: 25px;
+
+  /* New Reduced Spacing Variables */
+  --padding-compact: 10px;
+  --gap-compact: 10px;
+
+  /* Font Sizes */
+  --font-size-base: 1em;
+  --font-size-small: 0.85em;
+  --font-size-large: 1.2em;
+
+  /* Border Radius */
+  --border-radius: 12px;
+
+  /* Box Shadows */
+  --box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
 /* Reset and Base Styles */
 #coder * {
   box-sizing: border-box;
@@ -9,11 +47,12 @@
 /* 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;
+  flex-direction: column; /* Stack options and main content vertically */
+  gap: var(--gap-large); /* Large gap between sections */
+  background: var(--background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
+  padding: var(--padding);
   margin: 25px auto;
 
   transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
@@ -25,124 +64,127 @@
   background: linear-gradient(135deg, #e0f7fa, #ffffff);
 }
 
-/* Flex Layout for Coder Options and Chat Window */
+/* Flex Layout for Coder Options */
 .coder-options {
-  flex: 1;
+  width: 100%; /* Full width */
   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;
+  flex-direction: row; /* Arrange options side by side */
+  flex-wrap: wrap; /* Allow wrapping on smaller screens */
+  gap: var(--gap-compact); /* Reduced gap for compactness */
 }
 
 /* Option Sections Styling */
 .option-section {
-  background-color: #ffffff;
-  padding: 15px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  background-color: var(--background-color);
+  padding: var(--padding-compact); /* Reduced padding */
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
   transition: background 0.3s, box-shadow 0.3s;
-}
-
-.option-section:hover {
-  background-color: #f9f9f9;
-}
+  flex: 1 1 200px; /* Flexible basis */
 
-/* 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);
+  display: flex;
+  flex-direction: column; /* Stack labels and inputs vertically */
+  gap: var(--gap-compact); /* Reduced gap */
 }
 
-#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);
+.option-section:hover {
+  background-color: var(--hover-background-color);
 }
 
-#coder button:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
-  cursor: not-allowed;
-  box-shadow: none;
+/* Labels Styling */
+.option-section label {
+  font-size: 0.95em; /* Slightly reduced font size */
+  color: var(--text-color);
+  font-weight: 600;
+  margin-bottom: 3px; /* Reduced margin */
 }
 
-/* Select Dropdown Styling (Reused from Original) */
-#coder select {
+/* Select Dropdown Styling */
+.option-section select {
   width: 100%;
-  padding: 10px 15px;
-  border: 1px solid #cccccc;
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  font-size: 1em;
-  background-color: #ffffff;
+  font-size: 0.95em; /* Slightly reduced font size */
+  background-color: var(--background-color);
   transition: border-color 0.3s, box-shadow 0.3s;
-  margin-bottom: 15px;
 }
 
-#coder select:focus {
-  border-color: #00796B;
+.option-section select:focus {
+  border-color: var(--primary-color);
   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;
+/* Grouped Controls Styling */
+.option-control-group {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
 }
 
-#coder-speech-controls input[type="range"] {
+/* Range Inputs Styling */
+.option-section input[type="range"] {
   width: 100%;
-  margin-bottom: 15px;
+  margin: 5px 0; /* Reduced margin */
+}
+
+/* Button Styling within Option Sections */
+.option-section button {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 8px 12px; /* Reduced padding */
+  font-size: 0.9em; /* Slightly reduced font size */
+  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);
+}
+
+.option-section button:hover:not(:disabled) {
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Slightly less translate */
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+}
+
+.option-section button:disabled {
+  background: var(--disabled-gradient);
+  cursor: not-allowed;
+  box-shadow: none;
 }
 
 /* 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 */
+  gap: var(--gap-small); /* Small gap */
+  max-height: 150px; /* Fixed height to prevent infinite expansion */
+  overflow: hidden; /* Hide overflow to maintain layout */
 }
 
+/* Logs Content Styling */
 #coder-logs {
   flex: 1;
-  max-height: 200px; /* Adjust as needed */
+  max-height: 200px; /* Adjust based on container height */
   border: 1px solid #e0e0e0;
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   overflow-y: auto; /* Enable vertical scrolling */
   padding: 10px;
   background-color: #f9f9f9;
-  font-size: 0.85em;
+  font-size: var(--font-size-small);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+/* Clear Logs Button Styling */
 #coder-clear-logs {
   align-self: flex-end;
-  background: linear-gradient(135deg, #FF5252, #E53935);
+  background: var(--secondary-gradient);
   border: none;
   color: white;
-  padding: 8px 16px;
-  font-size: 0.9em;
+  padding: 6px 12px; /* Reduced padding */
+  font-size: 0.85em; /* Reduced font size */
   cursor: pointer;
   border-radius: 8px;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
@@ -150,38 +192,38 @@
 }
 
 #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);
+  background: var(--secondary-hover-gradient);
+  transform: scale(1.01); /* Less scaling */
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 }
 
 /* Chat Box Styling */
 #coder-chat-box {
   height: 500px;
   border: 1px solid #e0e0e0;
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   overflow-y: auto;
-  padding: 20px;
-  background-color: #ffffff;
+  padding: 15px; /* Reduced padding */
+  background-color: var(--background-color);
   position: relative;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-  margin-bottom: 20px;
+  margin-bottom: 15px; /* Reduced margin */
 }
 
 /* Message Styling */
 #coder .message-container {
-  margin-bottom: 20px;
+  margin-bottom: 15px; /* Reduced margin */
   display: flex;
 }
 
 #coder .message {
-  padding: 12px 18px;
-  border-radius: 20px;
+  padding: 10px 14px; /* Reduced padding */
+  border-radius: 18px; /* Slightly smaller border radius */
   max-width: 75%;
   position: relative;
   word-wrap: break-word;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  font-size: 0.95em;
+  font-size: var(--font-size-base);
   line-height: 1.4;
   background-color: #f1f8e9;
   transition: background-color 0.3s, box-shadow 0.3s;
@@ -200,31 +242,31 @@
 /* Chat Input Container Styling */
 #coder-text-input-container {
   display: flex;
-  gap: 10px;
+  gap: 8px; /* Reduced gap */
 }
 
 #coder-text-input {
   flex: 1;
-  padding: 10px 15px;
-  border: 1px solid #cccccc;
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  font-size: 1em;
-  background-color: #ffffff;
+  font-size: var(--font-size-base);
+  background-color: var(--background-color);
   transition: border-color 0.3s, box-shadow 0.3s;
 }
 
 #coder-text-input:focus {
-  border-color: #00796B;
+  border-color: var(--primary-color);
   box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
   outline: none;
 }
 
 #coder-submit-button {
-  background: linear-gradient(135deg, #00796B, #004D40);
+  background: var(--primary-gradient);
   border: none;
   color: white;
-  padding: 10px 20px;
-  font-size: 1em;
+  padding: 8px 16px; /* Reduced padding */
+  font-size: 0.95em; /* Slightly reduced font size */
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
@@ -232,13 +274,13 @@
 }
 
 #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);
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Less translate */
+  box-shadow: var(--box-shadow-hover);
 }
 
 #coder-submit-button:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  background: var(--disabled-gradient);
   cursor: not-allowed;
   box-shadow: none;
 }
@@ -247,21 +289,21 @@
 #coder-mic-container {
   display: flex;
   justify-content: center;
-  gap: 15px;
-  margin-top: 20px;
+  gap: 10px; /* Reduced gap */
+  margin-top: 15px; /* Reduced margin */
 }
 
 #coder-start_button,
 #coder-stop_button {
-  background: linear-gradient(135deg, #00796B, #004D40);
+  background: var(--primary-gradient);
   border: none;
   color: white;
-  padding: 15px;
+  padding: 12px; /* Reduced padding */
   border-radius: 50%;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
-  width: 60px;
-  height: 60px;
+  width: 50px; /* Reduced size */
+  height: 50px; /* Reduced size */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -271,7 +313,7 @@
 }
 
 #coder-stop_button {
-  background: linear-gradient(135deg, #E53935, #D32F2F);
+  background: var(--secondary-gradient);
 }
 
 #coder-start_button::before,
@@ -295,26 +337,26 @@
 
 #coder-start_button:disabled,
 #coder-stop_button:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  background: var(--disabled-gradient);
   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);
+  transform: scale(1.03); /* Slightly less scaling */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 #coder-stop_button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #D32F2F, #C62828);
+  background: var(--secondary-hover-gradient);
 }
 
 /* Icon Styling */
 #coder .mic-icon,
 #coder .stop-icon {
-  width: 30px;
-  height: 30px;
+  width: 24px; /* Reduced size */
+  height: 24px; /* Reduced size */
   transition: transform 0.3s;
   fill: #ffffff;
 }
@@ -338,7 +380,7 @@
 
 /* Chat Stats */
 #coder-chat-stats {
-  font-size: 0.85em;
+  font-size: var(--font-size-small);
   color: #555555;
   text-align: center;
   margin-top: 10px;
@@ -349,7 +391,7 @@
   display: none;
 }
 
-/* Scrollbar Styling */
+/* Scrollbar Styling for Logs and Chat */
 #coder-chat-box::-webkit-scrollbar,
 #coder-logs::-webkit-scrollbar {
   width: 8px;
@@ -372,14 +414,13 @@
   background: #a8a8a8;
 }
 
-/* Initialize Button Styling (Reused from Original) */
+/* Initialize Button Styling */
 #coder-download {
-  flex: 0 0 auto;
-  background: linear-gradient(135deg, #00796B, #004D40);
+  background: var(--primary-gradient);
   border: none;
   color: white;
-  padding: 10px 20px;
-  font-size: 1em;
+  padding: 8px 16px; /* Reduced padding */
+  font-size: 0.95em; /* Slightly reduced font size */
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
@@ -387,13 +428,13 @@
 }
 
 #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);
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Less translate */
+  box-shadow: var(--box-shadow-hover);
 }
 
 #coder-download:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  background: var(--disabled-gradient);
   cursor: not-allowed;
   box-shadow: none;
 }
@@ -401,14 +442,31 @@
 /* Configuration Info Styling */
 #coder-configuration {
   margin-top: 15px;
-  font-size: 0.9em;
+  font-size: var(--font-size-small);
   color: #555555;
 }
 
 /* Responsive Grid Adjustments */
+@media (max-width: 1200px) {
+  .coder-options {
+    flex-direction: row; /* Ensure row direction on larger screens */
+  }
+}
+
 @media (max-width: 800px) {
   .coder-card {
     flex-direction: column;
+    padding: 20px;
+    margin: 20px auto;
+  }
+
+  .coder-options {
+    gap: var(--gap-compact);
+  }
+
+  .chat-window {
+    flex-direction: column; /* Stack chat sections vertically on small screens */
+    gap: var(--gap-compact);
   }
 
   /* Adjust Logs Container Height for Smaller Screens */
@@ -419,4 +477,15 @@
   #coder-logs {
     max-height: 150px;
   }
+
+  /* Adjust Image Section for Smaller Screens */
+  /* If applicable */
+}
+
+/* Additional Styles for Option Control Group */
+.option-control-group {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
 }

coder.js

@@ -333,7 +333,7 @@ document.addEventListener("DOMContentLoaded", () => {
       voiceSelect.appendChild(option);
     });
     if (coderVoices.length > 0) {
-      const savedVoice = localStorage.getItem("coderSelectedVoice");
+      const savedVoice = localStorage.getItem("coder-selectedVoice");
       if (savedVoice !== null && coderVoices[savedVoice]) {
         coderSpeech.voice = coderVoices[savedVoice];
         voiceSelect.value = savedVoice;
@@ -348,7 +348,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const selectedVoiceIndex = document.getElementById("coder-tools").value;
     coderSpeech.voice = coderVoices[selectedVoiceIndex];
     // Save to localStorage
-    localStorage.setItem("coderSelectedVoice", selectedVoiceIndex);
+    localStorage.setItem("coder-selectedVoice", selectedVoiceIndex);
     logMessage(`Voice changed to: ${coderVoices[selectedVoiceIndex].name}`, "system");
   });
 
@@ -527,21 +527,21 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // Load Preferences on Initialization
   window.addEventListener("load", () => {
-    const savedVoice = localStorage.getItem("coderSelectedVoice");
+    const savedVoice = localStorage.getItem("coder-selectedVoice");
     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");
+    const savedRate = localStorage.getItem("coder-speechRate");
     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");
+    const savedPitch = localStorage.getItem("coder-speechPitch");
     if (savedPitch !== null) {
       document.getElementById("coder-speech-pitch").value = savedPitch;
       coderSpeech.pitch = parseFloat(savedPitch);
@@ -553,7 +553,7 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("coder-speech-rate").addEventListener("input", (e) => {
     const rate = e.target.value;
     coderSpeech.rate = parseFloat(rate);
-    localStorage.setItem("coderSpeechRate", rate);
+    localStorage.setItem("coder-speechRate", rate);
     logMessage(`Speech rate changed to: ${rate}`, "system");
   });
 
@@ -561,7 +561,7 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("coder-speech-pitch").addEventListener("input", (e) => {
     const pitch = e.target.value;
     coderSpeech.pitch = parseFloat(pitch);
-    localStorage.setItem("coderSpeechPitch", pitch);
+    localStorage.setItem("coder-speechPitch", pitch);
     logMessage(`Speech pitch changed to: ${pitch}`, "system");
   });
 
@@ -609,4 +609,6 @@ document.addEventListener("DOMContentLoaded", () => {
     // Ensure Stop button is disabled after speech ends
     document.getElementById("coder-stop_button").disabled = true;
   });
+
+
 });

digital.human.audio.css

@@ -9,6 +9,7 @@
 /* Card Styling */
 .voice-card {
   display: flex;
+  flex-direction: column; /* Ensure column layout */
   gap: 20px;
   background: linear-gradient(135deg, #ffffff, #f1f8e9);
   border-radius: 16px;
@@ -25,25 +26,13 @@
   background: linear-gradient(135deg, #e0f7fa, #ffffff);
 }
 
-/* Flex Layout for Voice Options and Chat Window */
+/* Flex Layout for Voice Options */
 .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;
+  flex-direction: row; /* Arrange items in a row */
+  flex-wrap: wrap;     /* Allow items to wrap to the next line on smaller screens */
+  gap: 20px;           /* Space between option sections */
+  align-items: flex-start; /* Align items to the top */
 }
 
 /* Option Sections Styling */
@@ -53,6 +42,9 @@
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: background 0.3s, box-shadow 0.3s;
+
+  flex: 1 1 250px; /* Grow and shrink with a base width of 250px */
+  min-width: 200px; /* Prevent the section from becoming too small */
 }
 
 .option-section:hover {
@@ -120,7 +112,7 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
-  max-height: 200px; /* Set a maximum height for the logs container */
+  max-height: 150px; /* Set a maximum height for the logs container */
   overflow: hidden; /* Hide any overflow to prevent the container from expanding */
 }
 
@@ -406,17 +398,23 @@
 }
 
 /* Responsive Grid Adjustments */
-@media (max-width: 800px) {
-  .voice-card {
-    flex-direction: column;
+@media (max-width: 1200px) {
+  .voice-options {
+    flex-direction: row;
+    flex-wrap: wrap;
   }
 
-  /* Adjust Logs Container Height for Smaller Screens */
-  #voice-logs-container {
-    max-height: 200px;
+  .option-section {
+    flex: 1 1 45%; /* Two items per row */
+  }
+}
+
+@media (max-width: 800px) {
+  .voice-options {
+    flex-direction: column; /* Stack vertically on very small screens */
   }
 
-  #voice-logs {
-    max-height: 150px;
+  .option-section {
+    flex: 1 1 100%; /* Full width */
   }
 }

digital.human.audio.js

@@ -223,7 +223,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   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");
+    logMessage("Web Speech API not supported by this browser.", "error");
   } else {
     voiceRecognition = new webkitSpeechRecognition();
     voiceRecognition.continuous = false; // Non-continuous recognition

digital.human.video.css

@@ -1,5 +1,43 @@
 /* digital.human.video.css */
 
+/* Define CSS Variables at the Root */
+:root {
+  /* Colors */
+  --primary-color: #00796B;
+  --primary-gradient: linear-gradient(135deg, #00796B, #004D40);
+  --primary-hover-gradient: linear-gradient(135deg, #005D56, #00332E);
+  --secondary-color: #E53935;
+  --secondary-gradient: linear-gradient(135deg, #FF5252, #E53935);
+  --secondary-hover-gradient: linear-gradient(135deg, #E53935, #D32F2F);
+  --disabled-gradient: linear-gradient(135deg, #A5D6A7, #81C784);
+  --background-color: #ffffff;
+  --hover-background-color: #f9f9f9;
+  --text-color: #333333;
+  --border-color: #cccccc;
+
+  /* Existing Spacing Variables */
+  --padding: 20px;
+  --padding-small: 15px;
+  --gap: 15px;
+  --gap-large: 25px;
+
+  /* New Reduced Spacing Variables */
+  --padding-compact: 10px;
+  --gap-compact: 10px;
+
+  /* Font Sizes */
+  --font-size-base: 1em;
+  --font-size-small: 0.85em;
+  --font-size-large: 1.2em;
+
+  /* Border Radius */
+  --border-radius: 12px;
+
+  /* Box Shadows */
+  --box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.05);
+  --box-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
 /* Reset and Base Styles */
 #video * {
   box-sizing: border-box;
@@ -9,11 +47,12 @@
 /* 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;
+  flex-direction: column; /* Stack options and main content vertically */
+  gap: var(--gap-large); /* Large gap between sections */
+  background: var(--background-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
+  padding: var(--padding);
   margin: 25px auto;
 
   transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
@@ -25,124 +64,119 @@
   background: linear-gradient(135deg, #e0f7fa, #ffffff);
 }
 
-/* Flex Layout for Video Options and Chat Window */
+/* Flex Layout for Video Options */
 .video-options {
-  flex: 1;
+  width: 100%; /* Full width */
   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;
+  flex-direction: row; /* Arrange options side by side */
+  flex-wrap: wrap; /* Allow wrapping on smaller screens */
+  gap: var(--gap-compact); /* Reduced gap for compactness */
 }
 
 /* Option Sections Styling */
 .option-section {
-  background-color: #ffffff;
-  padding: 15px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  background-color: var(--background-color);
+  padding: var(--padding-compact); /* Reduced padding */
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
   transition: background 0.3s, box-shadow 0.3s;
-}
+  flex: 1 1 200px; /* Flexible basis */
 
-.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);
+  display: flex;
+  flex-direction: column; /* Stack labels and inputs vertically */
+  gap: var(--gap-compact); /* Reduced gap */
 }
 
-#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);
+.option-section:hover {
+  background-color: var(--hover-background-color);
 }
 
-#video button:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
-  cursor: not-allowed;
-  box-shadow: none;
+/* Labels Styling */
+.option-section label {
+  font-size: 0.95em; /* Slightly reduced font size */
+  color: var(--text-color);
+  font-weight: 600;
+  margin-bottom: 3px; /* Reduced margin */
 }
 
-/* Select Dropdown Styling (Reused from Original) */
-#video select {
+/* Select Dropdown Styling */
+.option-section select {
   width: 100%;
-  padding: 10px 15px;
-  border: 1px solid #cccccc;
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  font-size: 1em;
-  background-color: #ffffff;
+  font-size: 0.95em; /* Slightly reduced font size */
+  background-color: var(--background-color);
   transition: border-color 0.3s, box-shadow 0.3s;
-  margin-bottom: 15px;
 }
 
-#video select:focus {
-  border-color: #00796B;
+.option-section select:focus {
+  border-color: var(--primary-color);
   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;
+/* Range Inputs Styling */
+.option-section input[type="range"] {
+  width: 100%;
+  margin: 5px 0; /* Reduced margin */
 }
 
-#video-speech-controls input[type="range"] {
-  width: 100%;
-  margin-bottom: 15px;
+/* Button Styling within Option Sections */
+.option-section button {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 8px 12px; /* Reduced padding */
+  font-size: 0.9em; /* Slightly reduced font size */
+  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);
+}
+
+.option-section button:hover:not(:disabled) {
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Slightly less translate */
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+}
+
+.option-section button:disabled {
+  background: var(--disabled-gradient);
+  cursor: not-allowed;
+  box-shadow: none;
 }
 
 /* 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 */
+  gap: var(--gap-small); /* Small gap */
+  max-height: 150px; /* Fixed height to prevent infinite expansion */
+  overflow: hidden; /* Hide overflow to maintain layout */
 }
 
+/* Logs Content Styling */
 #video-logs {
   flex: 1;
-  max-height: 200px; /* Adjust as needed */
+  max-height: 200px; /* Adjust based on container height */
   border: 1px solid #e0e0e0;
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   overflow-y: auto; /* Enable vertical scrolling */
   padding: 10px;
   background-color: #f9f9f9;
-  font-size: 0.85em;
+  font-size: var(--font-size-small);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
+/* Clear Logs Button Styling */
 #video-clear-logs {
   align-self: flex-end;
-  background: linear-gradient(135deg, #FF5252, #E53935);
+  background: var(--secondary-gradient);
   border: none;
   color: white;
-  padding: 8px 16px;
-  font-size: 0.9em;
+  padding: 6px 12px; /* Reduced padding */
+  font-size: 0.85em; /* Reduced font size */
   cursor: pointer;
   border-radius: 8px;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
@@ -150,38 +184,112 @@
 }
 
 #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);
+  background: var(--secondary-hover-gradient);
+  transform: scale(1.01); /* Less scaling */
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Search Logs Input Styling (Optional) */
+#video-log-search {
+  padding: 6px 10px; /* Reduced padding */
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 0.85em; /* Reduced font size */
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+#video-log-search:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+/* Main Content Wrapper for Chat and Image Upload */
+.video-main {
+  display: flex;
+  flex-direction: row; /* Arrange chat and image sections horizontally */
+  gap: var(--gap-large); /* Increased gap for better separation */
+  width: 100%;
+}
+
+/* Chat Window Styling */
+.chat-window {
+  flex: 3; /* Takes up more space */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  /* Optionally, adjust height if needed */
+}
+
+/* Image Upload and Canvas Section Styling */
+.video-image-section {
+  flex: 1; /* Takes up less space */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  background-color: var(--background-color);
+  padding: var(--padding-small);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.video-image-section h3 {
+  margin-bottom: 10px;
+  color: var(--primary-color);
+  font-size: 1.1em;
+  font-weight: 600;
+}
+
+#video-image-upload {
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: var(--font-size-base);
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+#video-image-upload:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+}
+
+#video-image-canvas {
+  width: 100%;
+  height: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  background-color: #f9f9f9;
 }
 
 /* Chat Box Styling */
 #video-chat-box {
   height: 500px;
   border: 1px solid #e0e0e0;
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   overflow-y: auto;
-  padding: 20px;
-  background-color: #ffffff;
+  padding: 15px; /* Reduced padding */
+  background-color: var(--background-color);
   position: relative;
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-  margin-bottom: 20px;
+  margin-bottom: 15px; /* Reduced margin */
 }
 
 /* Message Styling */
 #video .message-container {
-  margin-bottom: 20px;
+  margin-bottom: 15px; /* Reduced margin */
   display: flex;
 }
 
 #video .message {
-  padding: 12px 18px;
-  border-radius: 20px;
+  padding: 10px 14px; /* Reduced padding */
+  border-radius: 18px; /* Slightly smaller border radius */
   max-width: 75%;
   position: relative;
   word-wrap: break-word;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  font-size: 0.95em;
+  font-size: var(--font-size-base);
   line-height: 1.4;
   background-color: #f1f8e9;
   transition: background-color 0.3s, box-shadow 0.3s;
@@ -200,31 +308,31 @@
 /* Chat Input Container Styling */
 #video-text-input-container {
   display: flex;
-  gap: 10px;
+  gap: 8px; /* Reduced gap */
 }
 
 #video-text-input {
   flex: 1;
-  padding: 10px 15px;
-  border: 1px solid #cccccc;
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  font-size: 1em;
-  background-color: #ffffff;
+  font-size: var(--font-size-base);
+  background-color: var(--background-color);
   transition: border-color 0.3s, box-shadow 0.3s;
 }
 
 #video-text-input:focus {
-  border-color: #00796B;
+  border-color: var(--primary-color);
   box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
   outline: none;
 }
 
 #video-submit-button {
-  background: linear-gradient(135deg, #00796B, #004D40);
+  background: var(--primary-gradient);
   border: none;
   color: white;
-  padding: 10px 20px;
-  font-size: 1em;
+  padding: 8px 16px; /* Reduced padding */
+  font-size: 0.95em; /* Slightly reduced font size */
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
@@ -232,13 +340,13 @@
 }
 
 #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);
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Less translate */
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 }
 
 #video-submit-button:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  background: var(--disabled-gradient);
   cursor: not-allowed;
   box-shadow: none;
 }
@@ -247,21 +355,21 @@
 #video-mic-container {
   display: flex;
   justify-content: center;
-  gap: 15px;
-  margin-top: 20px;
+  gap: 10px; /* Reduced gap */
+  margin-top: 15px; /* Reduced margin */
 }
 
 #video-start_button,
 #video-stop_button {
-  background: linear-gradient(135deg, #00796B, #004D40);
+  background: var(--primary-gradient);
   border: none;
   color: white;
-  padding: 15px;
+  padding: 12px; /* Reduced padding */
   border-radius: 50%;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
-  width: 60px;
-  height: 60px;
+  width: 50px; /* Reduced size */
+  height: 50px; /* Reduced size */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -271,7 +379,7 @@
 }
 
 #video-stop_button {
-  background: linear-gradient(135deg, #E53935, #D32F2F);
+  background: var(--secondary-gradient);
 }
 
 #video-start_button::before,
@@ -295,26 +403,26 @@
 
 #video-start_button:disabled,
 #video-stop_button:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  background: var(--disabled-gradient);
   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);
+  transform: scale(1.03); /* Slightly less scaling */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 #video-stop_button:hover:not(:disabled) {
-  background: linear-gradient(135deg, #D32F2F, #C62828);
+  background: var(--secondary-hover-gradient);
 }
 
 /* Icon Styling */
 #video .mic-icon,
 #video .stop-icon {
-  width: 30px;
-  height: 30px;
+  width: 24px; /* Reduced size */
+  height: 24px; /* Reduced size */
   transition: transform 0.3s;
   fill: #ffffff;
 }
@@ -338,7 +446,7 @@
 
 /* Chat Stats */
 #video-chat-stats {
-  font-size: 0.85em;
+  font-size: var(--font-size-small);
   color: #555555;
   text-align: center;
   margin-top: 10px;
@@ -349,7 +457,7 @@
   display: none;
 }
 
-/* Scrollbar Styling */
+/* Scrollbar Styling for Logs */
 #video-chat-box::-webkit-scrollbar,
 #video-logs::-webkit-scrollbar {
   width: 8px;
@@ -372,14 +480,13 @@
   background: #a8a8a8;
 }
 
-/* Initialize Button Styling (Reused from Original) */
+/* Initialize Button Styling */
 #video-download {
-  flex: 0 0 auto;
-  background: linear-gradient(135deg, #00796B, #004D40);
+  background: var(--primary-gradient);
   border: none;
   color: white;
-  padding: 10px 20px;
-  font-size: 1em;
+  padding: 8px 16px; /* Reduced padding */
+  font-size: 0.95em; /* Slightly reduced font size */
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
@@ -387,13 +494,13 @@
 }
 
 #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);
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Less translate */
+  box-shadow: var(--box-shadow-hover);
 }
 
 #video-download:disabled {
-  background: linear-gradient(135deg, #A5D6A7, #81C784);
+  background: var(--disabled-gradient);
   cursor: not-allowed;
   box-shadow: none;
 }
@@ -401,14 +508,36 @@
 /* Configuration Info Styling */
 #video-configuration {
   margin-top: 15px;
-  font-size: 0.9em;
+  font-size: var(--font-size-small);
   color: #555555;
 }
 
 /* Responsive Grid Adjustments */
+@media (max-width: 1200px) {
+  .video-main {
+    flex-direction: column; /* Stack chat and image sections vertically on medium screens */
+    gap: var(--gap);
+  }
+}
+
 @media (max-width: 800px) {
   .video-card {
     flex-direction: column;
+    padding: 20px;
+    margin: 20px auto;
+  }
+
+  .video-options {
+    gap: var(--gap-compact);
+  }
+
+  .video-main {
+    flex-direction: column; /* Stack chat and image sections vertically on small screens */
+    gap: var(--gap-compact);
+  }
+
+  .video-image-section {
+    width: 100%;
   }
 
   /* Adjust Logs Container Height for Smaller Screens */
@@ -419,37 +548,43 @@
   #video-logs {
     max-height: 150px;
   }
-}
 
+  /* Adjust Image Section for Smaller Screens */
+  .video-image-section {
+    width: 100%;
+  }
+}
 
-/* New: Image Upload and Canvas Section Styling */
+/* Image Upload and Canvas Section Styling */
 .video-image-section {
-  flex: 1;
+  flex: 1; /* Takes up less space */
   display: flex;
   flex-direction: column;
-  gap: 15px;
-  background-color: #ffffff;
-  padding: 15px;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  gap: var(--gap);
+  background-color: var(--background-color);
+  padding: var(--padding-small);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
   transition: background 0.3s, box-shadow 0.3s;
 }
 
 .video-image-section h3 {
   margin-bottom: 10px;
-  color: #00796B;
+  color: var(--primary-color);
+  font-size: 1.1em;
+  font-weight: 600;
 }
 
 #video-image-upload {
-  padding: 10px;
-  border: 1px solid #cccccc;
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
   border-radius: 8px;
-  font-size: 1em;
+  font-size: var(--font-size-base);
   transition: border-color 0.3s, box-shadow 0.3s;
 }
 
 #video-image-upload:hover {
-  border-color: #00796B;
+  border-color: var(--primary-color);
   box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
 }
 
@@ -457,14 +592,295 @@
   width: 100%;
   height: auto;
   border: 1px solid #e0e0e0;
-  border-radius: 12px;
+  border-radius: var(--border-radius);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
   background-color: #f9f9f9;
 }
 
+/* Chat Box Styling */
+#video-chat-box {
+  height: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  overflow-y: auto;
+  padding: 15px; /* Reduced padding */
+  background-color: var(--background-color);
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  margin-bottom: 15px; /* Reduced margin */
+}
+
+/* Message Styling */
+#video .message-container {
+  margin-bottom: 15px; /* Reduced margin */
+  display: flex;
+}
+
+#video .message {
+  padding: 10px 14px; /* Reduced padding */
+  border-radius: 18px; /* Slightly smaller border radius */
+  max-width: 75%;
+  position: relative;
+  word-wrap: break-word;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  font-size: var(--font-size-base);
+  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: 8px; /* Reduced gap */
+}
+
+#video-text-input {
+  flex: 1;
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: var(--font-size-base);
+  background-color: var(--background-color);
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+#video-text-input:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+  outline: none;
+}
+
+#video-submit-button {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 8px 16px; /* Reduced padding */
+  font-size: 0.95em; /* Slightly reduced font size */
+  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: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Less translate */
+  box-shadow: var(--box-shadow-hover);
+}
+
+#video-submit-button:disabled {
+  background: var(--disabled-gradient);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Microphone and Stop Buttons Styling */
+#video-mic-container {
+  display: flex;
+  justify-content: center;
+  gap: 10px; /* Reduced gap */
+  margin-top: 15px; /* Reduced margin */
+}
+
+#video-start_button,
+#video-stop_button {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 12px; /* Reduced padding */
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+  width: 50px; /* Reduced size */
+  height: 50px; /* Reduced size */
+  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: var(--secondary-gradient);
+}
+
+#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: var(--disabled-gradient);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+#video-start_button:hover:not(:disabled),
+#video-stop_button:hover:not(:disabled) {
+  transform: scale(1.03); /* Slightly less scaling */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+#video-stop_button:hover:not(:disabled) {
+  background: var(--secondary-hover-gradient);
+}
+
+/* Icon Styling */
+#video .mic-icon,
+#video .stop-icon {
+  width: 24px; /* Reduced size */
+  height: 24px; /* Reduced size */
+  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: var(--font-size-small);
+  color: #555555;
+  text-align: center;
+  margin-top: 10px;
+}
+
+/* Hidden Class */
+#video .hidden {
+  display: none;
+}
+
+/* Scrollbar Styling for Logs */
+#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 */
+#video-download {
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  padding: 8px 16px; /* Reduced padding */
+  font-size: 0.95em; /* Slightly reduced font size */
+  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: var(--primary-hover-gradient);
+  transform: translateY(-1px); /* Less translate */
+  box-shadow: var(--box-shadow-hover);
+}
+
+#video-download:disabled {
+  background: var(--disabled-gradient);
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Configuration Info Styling */
+#video-configuration {
+  margin-top: 15px;
+  font-size: var(--font-size-small);
+  color: #555555;
+}
+
+/* Responsive Grid Adjustments */
+@media (max-width: 1200px) {
+  .video-main {
+    flex-direction: column; /* Stack chat and image sections vertically on medium screens */
+    gap: var(--gap);
+  }
+}
+
 @media (max-width: 800px) {
   .video-card {
     flex-direction: column;
+    padding: 20px;
+    margin: 20px auto;
+  }
+
+  .video-options {
+    gap: var(--gap-compact);
+  }
+
+  .video-main {
+    flex-direction: column; /* Stack chat and image sections vertically on small screens */
+    gap: var(--gap-compact);
+  }
+
+  .video-image-section {
+    width: 100%;
+  }
+
+  /* Adjust Logs Container Height for Smaller Screens */
+  #video-logs-container {
+    max-height: 200px;
+  }
+
+  #video-logs {
+    max-height: 150px;
   }
 
   /* Adjust Image Section for Smaller Screens */
@@ -472,3 +888,153 @@
     width: 100%;
   }
 }
+
+/* Image Upload and Canvas Section Styling */
+.video-image-section {
+  flex: 1; /* Takes up less space */
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap);
+  background-color: var(--background-color);
+  padding: var(--padding-small);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-base);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.video-image-section h3 {
+  margin-bottom: 10px;
+  color: var(--primary-color);
+  font-size: 1.1em;
+  font-weight: 600;
+}
+
+#video-image-upload {
+  padding: 8px 12px; /* Reduced padding */
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: var(--font-size-base);
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+#video-image-upload:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+}
+
+#video-image-canvas {
+  width: 100%;
+  height: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  background-color: #f9f9f9;
+}
+
+/* Tab Navigation Styling */
+.image-tabs {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.tab-button {
+  flex: 1;
+  padding: 10px 0;
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-bottom: none;
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+.tab-button.active {
+  background-color: var(--hover-background-color);
+  box-shadow: 0 2px -2px var(--border-color);
+}
+
+.tab-button:hover:not(.active) {
+  background-color: var(--hover-background-color);
+}
+
+/* Tab Content Styling */
+.tab-content {
+  border: 1px solid var(--border-color);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
+  padding: var(--padding-small);
+  background-color: var(--background-color);
+  box-shadow: var(--box-shadow-base);
+}
+
+.hidden {
+  display: none;
+}
+
+/* Webcam Section Styling */
+.webcam-tab video,
+.webcam-tab canvas {
+  width: 100%;
+  max-width: 500px;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+#capture-webcam-button {
+  margin-top: 10px;
+  padding: 8px 16px;
+  background: var(--primary-gradient);
+  border: none;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+}
+
+#capture-webcam-button:hover {
+  background: var(--primary-hover-gradient);
+  transform: translateY(-1px);
+  box-shadow: var(--box-shadow-hover);
+}
+
+/* Drawing Section Styling */
+.draw-tab canvas {
+  width: 100%;
+  height: 400px;
+  border: 1px solid #e0e0e0;
+  border-radius: var(--border-radius);
+  background-color: #ffffff; /* White background for drawing */
+  cursor: crosshair;
+}
+
+.draw-controls {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+#clear-draw-button {
+  padding: 6px 12px;
+  background: var(--secondary-gradient);
+  border: none;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
+}
+
+#clear-draw-button:hover {
+  background: var(--secondary-hover-gradient);
+  transform: translateY(-1px);
+  box-shadow: var(--box-shadow-hover);
+}
+
+#draw-color,
+#draw-size {
+  padding: 4px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}

digital.human.video.js

@@ -644,4 +644,352 @@ document.addEventListener("DOMContentLoaded", () => {
     reader.readAsDataURL(file);
   });
 
+
+
+
+
+
+
+
+
+
+  // ------------------ Additions Start Here ------------------
+
+  // Function to send image to the API
+  function sendImageToAPI(imageB64, onResult, onError) {
+    const invokeUrl = "https://integrate.api.nvidia.com/v1/chat/completions";
+    const stream = false; // Streaming not supported in browser
+
+    const headers = {
+      "Authorization": "Bearer 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",
+      "Accept": "application/json",
+      "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. <img src="data:image/png;base64,${imageB64}" />`
+        }
+      ],
+      "max_tokens": 512,
+      "temperature": 0.20,
+      "top_p": 0.70,
+      "stream": stream
+    };
+
+    axios.post(invokeUrl, payload, { headers: headers })
+      .then(response => {
+        onResult(response.data);
+      })
+      .catch(error => {
+        console.error(error);
+        onError(error);
+      });
+  }
+
+  // Event listener for Analyze button
+  document.getElementById("analyze-button").addEventListener("click", function() {
+    const canvas = document.getElementById("video-image-canvas");
+    const imageDataURL = canvas.toDataURL("image/png");
+    const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
+
+    const userMessage = {
+      content: "Please analyze this image.",
+      role: "user"
+    };
+    videoAppendMessage(userMessage);
+
+    sendImageToAPI(imageB64, function(responseData) {
+      const assistantMessage = {
+        content: responseData.choices[0].message.content,
+        role: "assistant"
+      };
+      videoAppendMessage(assistantMessage);
+    }, function(error) {
+      alert("Error: " + error);
+    });
+  });
+
+  // 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 context = canvas.getContext("2d");
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+    const imageDataURL = canvas.toDataURL("image/png");
+    const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
+
+    const userMessage = {
+      content: "Please explain this image.",
+      role: "user"
+    };
+    videoAppendMessage(userMessage);
+
+    sendImageToAPI(imageB64, function(responseData) {
+      const assistantMessage = {
+        content: responseData.choices[0].message.content,
+        role: "assistant"
+      };
+      videoAppendMessage(assistantMessage);
+    }, function(error) {
+      alert("Error: " + error);
+    });
+  });
+
+  // Event listener for Discuss button (Draw tab)
+  document.getElementById("discuss-button").addEventListener("click", function() {
+    const canvas = document.getElementById("draw-canvas");
+    const imageDataURL = canvas.toDataURL("image/png");
+    const imageB64 = imageDataURL.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
+
+    const userMessage = {
+      content: "Please discuss this drawing.",
+      role: "user"
+    };
+    videoAppendMessage(userMessage);
+
+    sendImageToAPI(imageB64, function(responseData) {
+      const assistantMessage = {
+        content: responseData.choices[0].message.content,
+        role: "assistant"
+      };
+      videoAppendMessage(assistantMessage);
+    }, function(error) {
+      alert("Error: " + error);
+    });
+  });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  // Tab Switching Functionality
+  const tabButtons = document.querySelectorAll('.image-tabs .tab-button');
+  const tabContents = document.querySelectorAll('.video-image-section .tab-content');
+
+  tabButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      // Remove active class from all buttons
+      tabButtons.forEach(btn => btn.classList.remove('active'));
+      // Add active class to the clicked button
+      button.classList.add('active');
+
+      // 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');
+
+      // Initialize functionalities when their respective tabs are activated
+      if (selectedTab === 'webcam') {
+        initializeWebcam();
+      }
+      if (selectedTab === 'draw') {
+        initializeDrawing();
+      }
+    });
+  });
+
+  // ------------------ Webcam Functionality ------------------
+
+  let webcamStream = null;
+
+  function initializeWebcam() {
+    const video = document.getElementById('webcam-video');
+    const captureButton = document.getElementById('capture-webcam-button');
+    const canvas = document.getElementById('webcam-canvas');
+
+    // Check if webcam is already initialized
+    if (webcamStream) {
+      return;
+    }
+
+    // Access the webcam
+    navigator.mediaDevices.getUserMedia({ video: true })
+      .then(stream => {
+        webcamStream = stream;
+        video.srcObject = stream;
+        logMessage("Webcam access granted.", "system");
+      })
+      .catch(err => {
+        console.error("Error accessing webcam:", err);
+        alert("Unable to access the webcam. Please check permissions.");
+        logMessage("Webcam access denied or error occurred.", "error");
+      });
+
+    // Capture Image from Webcam
+    captureButton.addEventListener('click', () => {
+      if (!webcamStream) {
+        alert("Webcam not initialized.");
+        return;
+      }
+      const context = canvas.getContext('2d');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      logMessage("Webcam image captured.", "system");
+    });
+  }
+
+  // Function to stop the webcam stream
+  function stopWebcam() {
+    if (webcamStream) {
+      webcamStream.getTracks().forEach(track => track.stop());
+      webcamStream = null;
+      const videoElement = document.getElementById('webcam-video');
+      if (videoElement) videoElement.srcObject = null;
+      const canvas = document.getElementById('webcam-canvas');
+      if (canvas && canvas.getContext) {
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+      logMessage("Webcam stream stopped.", "system");
+    }
+  }
+
+  // Modify the tab switching logic to include webcam cleanup
+  tabButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      // Existing tab switching code...
+      // After switching tabs, check if the previous tab was Webcam and stop the stream
+      const selectedTab = button.getAttribute('data-tab');
+      if (selectedTab !== 'webcam') {
+        stopWebcam();
+      }
+    });
+  });
+
+  // ------------------ Drawing Functionality ------------------
+
+  let draw = false;
+  let currentColor = '#000000';
+  let currentSize = 2;
+  let ctxDraw = null;
+  let lastX = 0;
+  let lastY = 0;
+
+  function initializeDrawing() {
+    const canvas = document.getElementById('draw-canvas');
+    const colorPicker = document.getElementById('draw-color');
+    const sizePicker = document.getElementById('draw-size');
+    const clearButton = document.getElementById('clear-draw-button');
+
+    if (ctxDraw) {
+      return; // Drawing already initialized
+    }
+
+    ctxDraw = canvas.getContext('2d');
+    canvas.width = canvas.offsetWidth;
+    canvas.height = 400; // Fixed height
+
+    // Set initial styles
+    ctxDraw.strokeStyle = currentColor;
+    ctxDraw.lineWidth = currentSize;
+    ctxDraw.lineJoin = 'round';
+    ctxDraw.lineCap = 'round';
+
+    // Mouse Events
+    canvas.addEventListener('mousedown', (e) => {
+      draw = true;
+      [lastX, lastY] = [e.offsetX, e.offsetY];
+    });
+
+    canvas.addEventListener('mousemove', drawLine);
+    canvas.addEventListener('mouseup', () => draw = false);
+    canvas.addEventListener('mouseout', () => draw = false);
+
+    // Touch Events for mobile support
+    canvas.addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        const rect = canvas.getBoundingClientRect();
+        lastX = touch.clientX - rect.left;
+        lastY = touch.clientY - rect.top;
+        draw = true;
+      }
+    });
+
+    canvas.addEventListener('touchmove', (e) => {
+      e.preventDefault();
+      if (draw && e.touches.length === 1) {
+        const touch = e.touches[0];
+        const rect = canvas.getBoundingClientRect();
+        const x = touch.clientX - rect.left;
+        const y = touch.clientY - rect.top;
+        drawLine({ offsetX: x, offsetY: y });
+      }
+    });
+
+    canvas.addEventListener('touchend', () => draw = false);
+
+    // Color Picker
+    colorPicker.addEventListener('input', (e) => {
+      currentColor = e.target.value;
+      ctxDraw.strokeStyle = currentColor;
+      logMessage(`Drawing color changed to: ${currentColor}`, "system");
+    });
+
+    // Size Picker
+    sizePicker.addEventListener('input', (e) => {
+      currentSize = e.target.value;
+      ctxDraw.lineWidth = currentSize;
+      logMessage(`Brush size changed to: ${currentSize}`, "system");
+    });
+
+    // Clear Drawing
+    clearButton.addEventListener('click', () => {
+      ctxDraw.clearRect(0, 0, canvas.width, canvas.height);
+      logMessage("Drawing canvas cleared.", "system");
+    });
+  }
+
+  function drawLine(e) {
+    if (!draw) return;
+    ctxDraw.beginPath();
+    ctxDraw.moveTo(lastX, lastY);
+    ctxDraw.lineTo(e.offsetX, e.offsetY);
+    ctxDraw.stroke();
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+  }
+
+  // Adjust canvas size on window resize
+  window.addEventListener('resize', () => {
+    const drawCanvas = document.getElementById('draw-canvas');
+    if (ctxDraw && drawCanvas.width !== drawCanvas.offsetWidth) {
+      const imageData = ctxDraw.getImageData(0, 0, drawCanvas.width, drawCanvas.height);
+      drawCanvas.width = drawCanvas.offsetWidth;
+      ctxDraw.putImageData(imageData, 0, 0);
+    }
+
+    const webcamCanvas = document.getElementById('webcam-canvas');
+    if (webcamCanvas) {
+      webcamCanvas.width = webcamCanvas.offsetWidth;
+      // Optionally, clear or redraw if necessary
+    }
+  });
+
+  // ------------------ End of Additions ------------------
+
 });

finalwork4.html

@@ -21,14 +21,14 @@
   <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="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="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 -->
@@ -50,7 +50,7 @@
           <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>
+            <button id="voice-download" disabled>Initialize Model</button>
           </div>
 
           <!-- Voice Selection Section -->
@@ -127,16 +127,18 @@
 
 
 
+
+
     <!-- --------------------Digital Human Mentor Video Content Starts---------------- -->
     <div id="video" class="content-section hidden">
       <div class="card video-card">
-        <!-- Digital Human Video Assistant Layout -->
+        <!-- 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>Download Model</button>
+            <button id="video-download" disabled>Initialize Model</button>
           </div>
 
           <!-- Voice Selection Section -->
@@ -164,55 +166,92 @@
           </div>
         </div>
 
-        <div class="chat-window">
-          <!-- Chat Box Section -->
-          <div id="video-chat-container">
-            <div id="video-chat-box">
-              <!-- Chat messages will appear here -->
+        <!-- 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>
 
-            <!-- 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>
+            <!-- Loading Spinner -->
+            <div id="video-loading-spinner" class="hidden">
+              <div class="spinner"></div>
             </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>
+            <!-- Configuration Info -->
+            <div id="video-configuration" class="hidden">
+              <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
             </div>
           </div>
 
-          <!-- Loading Spinner -->
-          <div id="video-loading-spinner" class="hidden">
-            <div class="spinner"></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>
 
-          <!-- Configuration Info -->
-          <div id="video-configuration" class="hidden">
-            <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
+            <!-- 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">Capture 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>
 
-        <!-- New: Image Upload and Canvas Section -->
-        <div class="video-image-section">
-          <h3>Upload and Analyze Image</h3>
-          <input type="file" id="video-image-upload" accept="image/*" />
-          <canvas id="video-image-canvas"></canvas>
+
+
         </div>
       </div>
     </div>
@@ -225,16 +264,18 @@
     <!-- --------------------Coder Content Starts------------------------------------- -->
     <div id="coder" class="content-section hidden">
       <div class="card coder-card">
-        <!-- Young Coder Layout -->
+        <!-- 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>
-            <select id="coder-model-selection"></select>
-            <button id="coder-download" disabled>Download Model</button>
+            <div class="option-control-group">
+              <select id="coder-model-selection"></select>
+              <button id="coder-download" disabled>Initialize Model</button>
+            </div>
           </div>
 
-          <!-- Tool Selection Section -->
+          <!-- Voice Selection Section -->
           <div id="coder-tool-selection-container" class="option-section">
             <label for="coder-tools">Select Voice:</label>
             <select id="coder-tools"></select>
@@ -258,66 +299,82 @@
             <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 -->
+        <!-- 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>
 
-            <!-- 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>
+            <!-- Loading Spinner -->
+            <div id="coder-loading-spinner" class="hidden">
+              <div class="spinner"></div>
             </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>
+            <!-- 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 -->
 
-          <!-- 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>
+          <!-- 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">
-        <!-- Advanced Mathematics & Problem Solving Layout -->
+        <!-- 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>Download Model</button>
+            <button id="math-download" disabled>Initialize Model</button>
           </div>
 
           <!-- Tool Selection Section -->
@@ -345,6 +402,7 @@
           </div>
         </div>
 
+        <!-- Chat Window Section -->
         <div class="chat-window">
           <!-- Chat Box Section -->
           <div id="math-chat-container">
@@ -404,7 +462,7 @@
           <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>
+            <button id="inter-download" disabled>Initialize Model</button>
           </div>
 
           <!-- Voice Selection Section -->
@@ -530,6 +588,8 @@
   </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">
@@ -557,6 +617,8 @@
 
 
 <!-- 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>

interdisciplinary.css

@@ -9,6 +9,7 @@
 /* Card Styling */
 .interdisciplinary-card {
   display: flex;
+  flex-direction: column; /* Changed from row to column */
   gap: 20px;
   background: linear-gradient(135deg, #ffffff, #f1f8e9);
   border-radius: 16px;
@@ -27,15 +28,15 @@
 
 /* Flex Layout for Inter Options and Chat Window */
 .inter-options {
-  flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row; /* Changed from column to row */
+  flex-wrap: wrap; /* Allows wrapping on smaller screens */
   gap: 20px;
 }
 
-/* Ensure Inter Options takes up available vertical space */
+/* Ensure Inter Options takes up available horizontal space */
 .inter-options {
-  height: 100%;
+  width: 100%;
 }
 
 /* Chat Window Styling */
@@ -53,6 +54,8 @@
   border-radius: 12px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   transition: background 0.3s, box-shadow 0.3s;
+  flex: 1; /* Allows each option section to take equal space */
+  min-width: 200px; /* Ensures a minimum width for each control */
 }
 
 .option-section:hover {
@@ -419,4 +422,13 @@
   #inter-logs {
     max-height: 150px;
   }
+
+  /* Stack the option sections vertically on smaller screens */
+  .inter-options {
+    flex-direction: column;
+  }
+
+  .option-section {
+    min-width: 100%;
+  }
 }