Upload 13 files

digital.human.video.css

@@ -420,3 +420,55 @@
     max-height: 150px;
   }
 }
+
+
+/* New: Image Upload and Canvas Section Styling */
+.video-image-section {
+  flex: 1;
+  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);
+  transition: background 0.3s, box-shadow 0.3s;
+}
+
+.video-image-section h3 {
+  margin-bottom: 10px;
+  color: #00796B;
+}
+
+#video-image-upload {
+  padding: 10px;
+  border: 1px solid #cccccc;
+  border-radius: 8px;
+  font-size: 1em;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+#video-image-upload:hover {
+  border-color: #00796B;
+  box-shadow: 0 0 5px rgba(0, 121, 107, 0.5);
+}
+
+#video-image-canvas {
+  width: 100%;
+  height: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 12px;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
+  background-color: #f9f9f9;
+}
+
+@media (max-width: 800px) {
+  .video-card {
+    flex-direction: column;
+  }
+
+  /* Adjust Image Section for Smaller Screens */
+  .video-image-section {
+    width: 100%;
+  }
+}

digital.human.video.js

@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const videoAvailableModels = webllm.prebuiltAppConfig.model_list.map(
     (m) => m.model_id
   );
-  let videoSelectedModel = "Llama-3.2-3B-Instruct-q4f16_1-MLC"; // Default model
+  let videoSelectedModel = "Phi-3.5-vision-instruct-q4f16_1-MLC"; // Default model
 
   function videoUpdateEngineInitProgressCallback(report) {
     console.log("Digital Human Video Initialize", report.progress);
@@ -609,4 +609,39 @@ document.addEventListener("DOMContentLoaded", () => {
     // Ensure Stop button is disabled after speech ends
     document.getElementById("video-stop_button").disabled = true;
   });
+
+
+  // Event Listener for Image Upload
+  document.getElementById("video-image-upload").addEventListener("change", function (e) {
+    const file = e.target.files[0];
+    if (!file) {
+      return;
+    }
+
+    const canvas = document.getElementById("video-image-canvas");
+    const ctx = canvas.getContext("2d");
+    const img = new Image();
+
+    img.onload = function () {
+      // Resize canvas to match image
+      canvas.width = img.width;
+      canvas.height = img.height;
+      // Draw image on canvas
+      ctx.drawImage(img, 0, 0);
+      logMessage("Image uploaded and displayed on canvas.", "system");
+    };
+
+    img.onerror = function () {
+      alert("Failed to load the image. Please try a different file.");
+      logMessage("Failed to load the uploaded image.", "error");
+    };
+
+    // Read the image file as a Data URL
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      img.src = event.target.result;
+    };
+    reader.readAsDataURL(file);
+  });
+
 });

finalwork4.html

@@ -127,7 +127,6 @@
 
 
 
-
     <!-- --------------------Digital Human Mentor Video Content Starts---------------- -->
     <div id="video" class="content-section hidden">
       <div class="card video-card">
@@ -208,6 +207,13 @@
             <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
           </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>
     <!-- --------------------Digital Human Mentor Video Content Ends----------------- -->

index.html

@@ -127,7 +127,6 @@
 
 
 
-
     <!-- --------------------Digital Human Mentor Video Content Starts---------------- -->
     <div id="video" class="content-section hidden">
       <div class="card video-card">
@@ -208,6 +207,13 @@
             <p>Model Initialized: <span id="video-selected-model">N/A</span></p>
           </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>
     <!-- --------------------Digital Human Mentor Video Content Ends----------------- -->