cameras.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Camera & Vision LLM App</title>
    <style>
      /* Combined UI styling */
      body {
        font-family: Arial, sans-serif;
        background: #f0f0f0;
        padding: 20px;
        /* New centering styles */
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      h1, h2 { color: #333; }
      button, select, input, textarea {
        padding: 10px;
        margin: 10px 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background: #fff;
        cursor: pointer;
      }
      button:hover { background: #e6e6e6; }
      /* Camera video element */
      #videoFeed {
        width: 480px;
        height: 360px;
        background-color: #000;
        border: 2px solid #333;
        border-radius: 8px;
        display: block;
        margin-bottom: 10px;
      }
      /* LM Studio controls styling */
      .io-areas {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
        width: 100%;
        max-width: 800px;
      }
      canvas { display: none; }
    </style>
  </head>
  <body>
    <h1>Camera & Vision LLM App</h1>
    <!-- Debug warning -->
    <div id="warning" style="color: red;"></div>
    
    <!-- Camera Section -->
    <div id="cameraControls">
      <!-- Video element for camera feed -->
      <video id="videoFeed" autoplay playsinline></video>
      <!-- Toggle button and dropdown for camera selection -->
      <button id="startCams">Start Cameras</button>
      <select id="cameraSelect" style="display:none;"></select>
    </div>
    
    <!-- LM Studio Vision LLM Section -->
    <div class="io-areas">
      <div>
        <label for="baseURL">Base API:</label>
        <input id="baseURL" value="http://localhost:1234">
      </div>
      <div>
        <!-- Changed label text from "Instruction:" to "Ask Question:" -->
        <label for="instructionText">Ask Question:</label><br>
        <textarea id="instructionText" rows="2" cols="60">Extract only key features in this image</textarea>
      </div>
      <div>
        <!-- Changed label text from "Response:" to "AI Vision Response:" and increased textarea size -->
        <label for="responseText">AI Vision Response:</label><br>
        <textarea id="responseText" rows="8" cols="80" readonly placeholder="Server response will appear here..."></textarea>
      </div>
    </div>
    
    <!-- Hidden canvases for capture and overlay drawing -->
    <canvas id="canvas"></canvas>
    <canvas id="overlay" style="position: absolute; top: 20px; left: 20px; pointer-events: none;"></canvas>
    
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        // Check secure context
        if (location.protocol === "file:" || (location.protocol !== "https:" && location.hostname !== "localhost" && location.hostname !== "127.0.0.1")) {
          document.getElementById("warning").textContent = "Warning: Cameras may not work in an insecure context. Please run this file from a secure server (localhost or HTTPS).";
        }
        if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
          alert("Your browser does not support the Media Devices API.");
        }
        
        let currentStream = null;
        const videoFeed = document.getElementById("videoFeed");
        
        // Stop any active streaming
        function stopCameraFeed() {
          if (currentStream) {
            currentStream.getTracks().forEach(track => track.stop());
            currentStream = null;
          }
          videoFeed.srcObject = null;
        }
        
        // Start camera using selected deviceId
        function startCameraFeed(deviceId) {
          stopCameraFeed();
          navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: deviceId } } })
            .then(stream => {
              currentStream = stream;
              videoFeed.srcObject = stream;
            })
            .catch(error => {
              console.error("Error accessing camera with deviceId " + deviceId, error);
            });
        }
        
        // Toggle function for starting/stopping cameras
        function toggleCameras() {
          const btn = document.getElementById("startCams");
          const select = document.getElementById("cameraSelect");
          if (btn.textContent === "Start Cameras") {
            navigator.mediaDevices.getUserMedia({ video: true })
              .then(stream => {
                stream.getTracks().forEach(track => track.stop());
                navigator.mediaDevices.enumerateDevices()
                  .then(devices => {
                    select.style.display = "inline-block";
                    select.innerHTML = "";
                    devices.forEach(device => {
                      if (device.kind === "videoinput") {
                        const option = document.createElement("option");
                        option.value = device.deviceId;
                        option.text = device.label || "Camera " + (select.length + 1);
                        select.appendChild(option);
                      }
                    });
                    if (select.options.length > 0) {
                      select.selectedIndex = 0;
                      startCameraFeed(select.options[0].value);
                    }
                    btn.textContent = "Stop Cameras";
                  })
                  .catch(error => {
                    console.error("Error enumerating devices: ", error);
                  });
              })
              .catch(error => {
                console.error("getUserMedia permission denied:", error);
              });
          } else {
            stopCameraFeed();
            btn.textContent = "Start Cameras";
          }
        }
        
        document.getElementById("startCams").addEventListener("click", toggleCameras);
        document.getElementById("cameraSelect").addEventListener("change", function(e) {
          const deviceId = e.target.value;
          if (deviceId) { startCameraFeed(deviceId); }
        });
        
        // ---------------- LM Studio Vision LLM Features ----------------
        const baseURL = document.getElementById('baseURL');
        const instructionText = document.getElementById('instructionText');
        const responseText = document.getElementById('responseText');
        const canvas = document.getElementById('canvas');
        const overlay = document.getElementById('overlay');
        
        async function sendChatCompletionRequest(instruction, imageBase64URL) {
          const resp = await fetch(`${baseURL.value}/v1/chat/completions`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              max_tokens: 100,
              temperature: 0.7,
              stream: false,
              messages: [{
                role: 'user',
                content: [
                  { type: 'text', text: instruction },
                  { type: 'image_url', image_url: { url: imageBase64URL } }
                ]
              }],
              model: "local-model"
            })
          });
          if (!resp.ok) {
            const errData = await resp.text();
            return `Server error: ${resp.status} - ${errData}`;
          }
          const data = await resp.json();
          return data.choices[0].message.content;
        }
        
        function captureImage() {
          if (!currentStream || !videoFeed.videoWidth) {
            console.warn("Video stream not ready for capture.");
            return null;
          }
          canvas.width = videoFeed.videoWidth;
          canvas.height = videoFeed.videoHeight;
          overlay.width = videoFeed.videoWidth;
          overlay.height = videoFeed.videoHeight;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(videoFeed, 0, 0, canvas.width, canvas.height);
          return canvas.toDataURL('image/jpeg', 0.8);
        }
        
        async function processFrame() {
          const instruction = instructionText.value;
          const imageBase64URL = captureImage();
          if (!imageBase64URL) {
            responseText.value = "Failed to capture image. Ensure camera feed is active.";
            return;
          }
          try {
            const response = await sendChatCompletionRequest(instruction, imageBase64URL);
            responseText.value = response;
            processDetectionResults(response);
          } catch(error) {
            console.error('Error sending data:', error);
            responseText.value = `Error: ${error.message}`;
          }
        }
        
        // Trigger API call on Enter key press
        instructionText.addEventListener('keydown', function(e) {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault(); // prevent a newline from being added
            processFrame();
          }
        });
        
        // Dummy object detection drawing implementations
        let detectedObjects = [];
        const colors = ['#FF3B30', '#FF9500', '#FFCC00', '#4CD964', '#5AC8FA'];
        
        function processDetectionResults(responseData) {
          try {
            const jsonResponse = JSON.parse(responseData);
            if (jsonResponse.objects && Array.isArray(jsonResponse.objects)) {
              detectedObjects = jsonResponse.objects;
              drawBoundingBoxes(detectedObjects);
            } else {
              detectedObjects = [];
              clearBoundingBoxes();
            }
          } catch (e) {
            detectedObjects = [];
            clearBoundingBoxes();
          }
        }
        
        function drawBoundingBoxes(objects) {
          const ctx = overlay.getContext('2d');
          clearBoundingBoxes();
          objects.forEach((object, index) => {
            const color = colors[index % colors.length];
            ctx.strokeStyle = color;
            ctx.lineWidth = 3;
            ctx.strokeRect(object.x, object.y, object.width, object.height);
            ctx.font = '16px Arial';
            ctx.fillStyle = color;
            ctx.fillText(object.name, object.x + 5, object.y - 6);
            if (object.confidence) {
              const confidenceText = `${Math.round(object.confidence * 100)}%`;
              ctx.font = '12px Arial';
              ctx.fillText(confidenceText, object.x + object.width - 35, object.y - 6);
            }
          });
        }
        
        function clearBoundingBoxes() {
          const ctx = overlay.getContext('2d');
          ctx.clearRect(0, 0, overlay.width, overlay.height);
        }
        // ---------------- End LM Studio Features ----------------
      });
    </script>
  </body>
</html>