Update app.py

app.py

@@ -188,149 +188,129 @@ def zip_files(files, zip_name):
             zipf.write(file, os.path.basename(file))
     return zip_name
 
-# JavaScript/HTML Components
-camera_selector_html = """
-<div>
-  <h3>Camera & Audio Source Selector</h3>
-  <select id="videoSource"></select>
-  <select id="audioSource"></select>
-  <button onclick="startStream()">Start Stream</button>
-  <video id="video" autoplay playsinline style="width: 100%;"></video>
+# JavaScript/HTML Dual Camera Component
+dual_camera_html = """
+<div style="width: 100%;">
+  <h3>Dual Camera Capture</h3>
+  <div>
+    <label>Camera 0 Video: </label>
+    <select id="videoSource0"></select>
+    <label>Audio: </label>
+    <select id="audioSource0"></select>
+    <video id="video0" autoplay playsinline style="width: 45%; margin: 5px;"></video>
+  </div>
+  <div>
+    <label>Camera 1 Video: </label>
+    <select id="videoSource1"></select>
+    <label>Audio: </label>
+    <select id="audioSource1"></select>
+    <video id="video1" autoplay playsinline style="width: 45%; margin: 5px;"></video>
+  </div>
+  <button onclick="startStreams()">Start Streams</button>
+  <button onclick="captureFrame(0)">Capture Frame 📸 Cam 0</button>
+  <button onclick="captureFrame(1)">Capture Frame 📸 Cam 1</button>
+  <button onclick="captureVideo(0)">Capture Video 🎥 Cam 0</button>
+  <button onclick="captureVideo(1)">Capture Video 🎥 Cam 1</button>
+  <canvas id="canvas" style="display: none;"></canvas>
 </div>
 <script>
-  const videoSource = document.getElementById('videoSource');
-  const audioSource = document.getElementById('audioSource');
-  const video = document.getElementById('video');
-  let stream;
+  const videoSource0 = document.getElementById('videoSource0');
+  const audioSource0 = document.getElementById('audioSource0');
+  const videoSource1 = document.getElementById('videoSource1');
+  const audioSource1 = document.getElementById('audioSource1');
+  const video0 = document.getElementById('video0');
+  const video1 = document.getElementById('video1');
+  const canvas = document.getElementById('canvas');
+  let streams = [null, null];
+  let recorders = [null, null];
 
   navigator.mediaDevices.enumerateDevices().then(devices => {
+    let videoCount = 0;
     devices.forEach(device => {
       const option = document.createElement('option');
       option.value = device.deviceId;
       option.text = device.label || `${device.kind} ${device.deviceId}`;
       if (device.kind === 'videoinput') {
-        videoSource.appendChild(option);
+        videoSource0.appendChild(option.cloneNode(true));
+        videoSource1.appendChild(option.cloneNode(true));
+        videoCount++;
       } else if (device.kind === 'audioinput') {
-        audioSource.appendChild(option);
+        audioSource0.appendChild(option.cloneNode(true));
+        audioSource1.appendChild(option.cloneNode(true));
       }
     });
+    if (videoCount > 1) {
+      videoSource1.selectedIndex = 1; // Default to second camera
+    }
   }).catch(err => console.error('Error enumerating devices:', err));
 
-  function startStream() {
-    if (stream) {
-      stream.getTracks().forEach(track => track.stop());
-    }
-    const constraints = {
-      video: { deviceId: videoSource.value ? { exact: videoSource.value } : undefined },
-      audio: { deviceId: audioSource.value ? { exact: audioSource.value } : undefined }
-    };
-    navigator.mediaDevices.getUserMedia(constraints)
-      .then(mediaStream => {
-        stream = mediaStream;
-        video.srcObject = stream;
-        console.log('Stream started');
-      })
-      .catch(err => console.error('Error starting stream:', err));
+  function startStreams() {
+    [0, 1].forEach(i => {
+      if (streams[i]) {
+        streams[i].getTracks().forEach(track => track.stop());
+      }
+      const constraints = {
+        video: { deviceId: document.getElementById(`videoSource${i}`).value ? { exact: document.getElementById(`videoSource${i}`).value } : undefined },
+        audio: { deviceId: document.getElementById(`audioSource${i}`).value ? { exact: document.getElementById(`audioSource${i}`).value } : undefined }
+      };
+      navigator.mediaDevices.getUserMedia(constraints)
+        .then(mediaStream => {
+          streams[i] = mediaStream;
+          document.getElementById(`video${i}`).srcObject = streams[i];
+          recorders[i] = new MediaRecorder(streams[i]);
+          const chunks = [];
+          recorders[i].ondataavailable = e => chunks.push(e.data);
+          recorders[i].onstop = () => {
+            const blob = new Blob(chunks, { type: 'video/mp4' });
+            saveFile(blob, `${i}${new Date().toISOString().replace(/[^0-9]/g, '')}.mp4`);
+            sliceVideo(blob, i);
+          };
+          console.log(`Camera ${i} stream started`);
+        })
+        .catch(err => console.error(`Error starting Camera ${i}:`, err));
+    });
   }
-</script>
-"""
 
-image_capture_html = """
-<div>
-  <h3>Image Capture - Camera {id}</h3>
-  <video id="video{id}" autoplay playsinline style="width: 100%;"></video>
-  <button onclick="captureFrame{id}()">Capture Frame 📸</button>
-  <canvas id="canvas{id}" style="display: none;"></canvas>
-</div>
-<script>
-  const video{id} = document.getElementById('video{id}');
-  const canvas{id} = document.getElementById('canvas{id}');
-  let stream{id};
+  function captureFrame(id) {
+    const video = document.getElementById(`video${id}`);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+    const dataUrl = canvas.toDataURL('image/png');
+    saveFile(dataUrl, `${id}${new Date().toISOString().replace(/[^0-9]/g, '')}.png`);
+    console.log(`Captured frame from Camera ${id}`);
+  }
 
-  navigator.mediaDevices.getUserMedia({ video: true })
-    .then(mediaStream => {
-      stream{id} = mediaStream;
-      video{id}.srcObject = stream{id};
-      console.log('Camera {id} stream started');
-    })
-    .catch(err => console.error('Error starting Camera {id}:', err));
+  function captureVideo(id) {
+    recorders[id].start();
+    setTimeout(() => recorders[id].stop(), 10000); // 10 seconds
+    console.log(`Recording started for Camera ${id}`);
+  }
 
-  function captureFrame{id}() {
-    canvas{id}.width = video{id}.videoWidth;
-    canvas{id}.height = video{id}.videoHeight;
-    const ctx = canvas{id}.getContext('2d');
-    ctx.drawImage(video{id}, 0, 0, canvas{id}.width, canvas{id}.height);
-    const dataUrl = canvas{id}.toDataURL('image/png');
-    const filename = `{id}${new Date().toISOString().replace(/[^0-9]/g, '')}.png`;
+  function saveFile(data, filename) {
     const link = document.createElement('a');
-    link.href = dataUrl;
+    link.href = data instanceof Blob ? URL.createObjectURL(data) : data;
     link.download = filename;
     link.click();
-    console.log('Captured frame:', filename);
   }
-</script>
-"""
-
-video_capture_html = """
-<div>
-  <h3>Video Capture - Camera {id}</h3>
-  <video id="video{id}" autoplay playsinline style="width: 100%;"></video>
-  <button onclick="captureVideo{id}()">Capture Video 🎥</button>
-  <canvas id="canvas{id}" style="display: none;"></canvas>
-</div>
-<script>
-  const video{id} = document.getElementById('video{id}');
-  const canvas{id} = document.getElementById('canvas{id}');
-  let stream{id}, recorder{id};
 
-  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-    .then(mediaStream => {
-      stream{id} = mediaStream;
-      video{id}.srcObject = stream{id};
-      recorder{id} = new MediaRecorder(stream{id});
-      const chunks = [];
-      recorder{id}.ondataavailable = e => chunks.push(e.data);
-      recorder{id}.onstop = () => {
-        const blob = new Blob(chunks, { type: 'video/mp4' });
-        const filename = `{id}${new Date().toISOString().replace(/[^0-9]/g, '')}.mp4`;
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = filename;
-        link.click();
-        console.log('Captured video:', filename);
-        sliceVideo{id}(blob);
-      };
-      console.log('Camera {id} stream started');
-    })
-    .catch(err => console.error('Error starting Camera {id}:', err));
-
-  function captureVideo{id}() {
-    recorder{id}.start();
-    setTimeout(() => recorder{id}.stop(), 10000); // 10 seconds
-    console.log('Recording started for Camera {id}');
-  }
-
-  function sliceVideo{id}(blob) {
+  function sliceVideo(blob, id) {
     const video = document.createElement('video');
     video.src = URL.createObjectURL(blob);
     video.onloadedmetadata = () => {
-      const ctx = canvas{id}.getContext('2d');
-      canvas{id}.width = video.videoWidth;
-      canvas{id}.height = video.videoHeight;
+      const ctx = canvas.getContext('2d');
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
       let frameCount = 0;
       const interval = video.duration / 10;
       video.currentTime = 0;
       const captureFrame = () => {
         if (frameCount < 10) {
-          ctx.drawImage(video, 0, 0, canvas{id}.width, canvas{id}.height);
-          const dataUrl = canvas{id}.toDataURL('image/png');
-          const filename = `{id}${new Date().toISOString().replace(/[^0-9]/g, '')}_${frameCount}.png`;
-          const link = document.createElement('a');
-          link.href = dataUrl;
-          link.download = filename;
-          link.click();
-          console.log('Captured frame:', filename);
+          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+          const dataUrl = canvas.toDataURL('image/png');
+          saveFile(dataUrl, `${id}${new Date().toISOString().replace(/[^0-9]/g, '')}_${frameCount}.png`);
+          console.log(`Captured frame ${frameCount} from Camera ${id}`);
           frameCount++;
           video.currentTime += interval;
           setTimeout(captureFrame, 100);
@@ -381,7 +361,7 @@ if selected_model != "None" and st.sidebar.button("Load Model 📂"):
             st.error(f"Load failed: {str(e)}")
 
 # Tabs
-tab1, tab2, tab3, tab4 = st.tabs(["Build Titan 🌱", "Camera Snap 📷", "Fine-Tune Titans 🔧", "Test Titans 🧪"])
+tab1, tab2, tab3 = st.tabs(["Build Titan 🌱", "Camera Snap 📷", "Fine-Tune & Test 🔧🧪"])
 
 with tab1:
     st.header("Build Titan 🌱 (Quick Start!)")
@@ -401,13 +381,7 @@ with tab1:
 
 with tab2:
     st.header("Camera Snap 📷 (Dual Live Feed!)")
-    st.subheader("Source Configuration")
-    html(camera_selector_html, height=400)
-    cols = st.columns(2)
-    for i in range(2):
-        with cols[i]:
-            html(image_capture_html.format(id=i), height=300)
-            html(video_capture_html.format(id=i), height=300)
+    html(dual_camera_html, height=600)
     st.subheader("Upload Captured Files")
     uploaded_files = st.file_uploader("Upload PNGs/MP4s from Downloads", type=["png", "mp4"], accept_multiple_files=True)
     if uploaded_files:
@@ -423,7 +397,7 @@ with tab2:
         update_gallery()
 
 with tab3:
-    st.header("Fine-Tune Titans 🔧 (Tune Fast!)")
+    st.header("Fine-Tune & Test 🔧🧪")
     if 'builder' not in st.session_state or not st.session_state.get('model_loaded', False):
         st.warning("Load a Titan first! ⚠️")
     else:
@@ -439,6 +413,15 @@ with tab3:
                     st.success("NLP sharpened! 🎉")
                 except Exception as e:
                     st.error(f"NLP fine-tune failed: {str(e)}")
+            st.subheader("NLP Test 🧠")
+            prompt = st.text_area("Prompt", "What’s a superhero?", key="nlp_test")
+            if st.button("Test NLP ▶️"):
+                logger.info("Running NLP test")
+                try:
+                    result = st.session_state['builder'].evaluate(prompt)
+                    st.write(f"**Answer**: {result}")
+                except Exception as e:
+                    st.error(f"NLP test failed: {str(e)}")
         elif isinstance(st.session_state['builder'], DiffusionBuilder):
             st.subheader("CV Tune 🎨")
             captured_images = get_gallery_files(["png"])
@@ -454,25 +437,7 @@ with tab3:
                         st.error(f"CV fine-tune failed: {str(e)}")
             else:
                 st.warning("Upload at least 2 PNGs in Camera Snap first! ⚠️")
-
-with tab4:
-    st.header("Test Titans 🧪 (Image Agent Demo!)")
-    if 'builder' not in st.session_state or not st.session_state.get('model_loaded', False):
-        st.warning("Load a Titan first! ⚠️")
-    else:
-        if isinstance(st.session_state['builder'], ModelBuilder):
-            st.subheader("NLP Test 🧠")
-            prompt = st.text_area("Prompt", "What’s a superhero?", key="nlp_test")
-            if st.button("Test NLP ▶️"):
-                logger.info("Running NLP test")
-                try:
-                    result = st.session_state['builder'].evaluate(prompt)
-                    st.write(f"**Answer**: {result}")
-                except Exception as e:
-                    st.error(f"NLP test failed: {str(e)}")
-        elif isinstance(st.session_state['builder'], DiffusionBuilder):
             st.subheader("CV Test 🎨 (Image Set Demo)")
-            captured_images = get_gallery_files(["png"])
             if len(captured_images) >= 2:
                 if st.button("Run CV Demo ▶️"):
                     logger.info("Running CV image set demo")