Merge pull request fac29b#62 from fac29b/front-camera

Front camera

Author: samscupoftea

public/index.css

@@ -663,4 +663,13 @@ input:checked+.slider:before {
     width: 100%;
     max-width: 340px;
   }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  animation: fadeIn 1s ease-in;
 }

public/index.html

@@ -189,6 +189,7 @@ <h1 class="picture-section-headline">You've got some ingredients but no idea wha
               <div class="video-btn-canvas">
                 <video class="video"></video>
                 <button class="take-picture">take a picture</button>
+                <button id="switchCamera">Switch Camera</button>
                 <canvas class="canvas"></canvas>
                 <p class="chat-gpt-vision-text"></p>
                 <button class="previous-page">previous page</button>

public/index.js

@@ -12,12 +12,10 @@ import {
   stopAudio,
   createAudio,
   createUserRecipe,
-  cacheData, 
-  CACHE_NAME_URL, 
+  cacheData,
+  CACHE_NAME_URL,
   CACHE_NAME_AUDIO,
-  emailObject,
   audioElement,
-
 } from "./js_utilities/functions_and_variables.js";
 
 import {
@@ -58,7 +56,9 @@ import {
   emailUserRecipeSection,
 } from "./js_utilities/query_selector.js";
 
-
+let currentCameraIndex = 0;
+const switchCameraButton = document.getElementById("switchCamera");
+let emailObject;
 
 wantToTakeAPicture.addEventListener("click", () => {
   removeElements([pictureSectionHeadline, wantToTakeAPicture]);
@@ -141,7 +141,7 @@ sendToUserInbox.addEventListener("click", () => {
 });
 
 sendToUserInboxBtn.addEventListener("click", () => {
-  console.log(`userEmail ${userEmail.value}`);
+  // console.log(`userEmail ${userEmail.value}`);
   console.log(emailObject);
   fetch(`/email?${createQuery(emailObject)}`)
     .then((response) => response.json())
@@ -165,32 +165,55 @@ recipeButtons.forEach((button) => {
     const userRecipe = createUserRecipe(button, dietaryRequirements, userText);
     console.log(userRecipe);
 
-
-
-
+    const data = {};
 
     const eventSource = new EventSource(`/stream?${createQuery(userRecipe)}`);
 
     eventSource.onmessage = async function (event) {
-      let data = JSON.parse(event.data);
-      if (data.message) {
-        if (data.message === "stop") {
+      let eventData = JSON.parse(event.data);
+      if (eventData.message) {
+        if (eventData.message === "stop") {
           eventSource.close();
           return;
         }
         displayElements([gptResponseElement]);
-        gptResponseElement.textContent += data.message;
+        gptResponseElement.textContent += eventData.message;
         return;
-      } else if (data.errorMessage === "invalid_api_key") {
+      } else if (eventData.errorMessage === "invalid_api_key") {
         eventSource.close();
-        console.log(data.errorMessage);
+        console.log(eventData.errorMessage);
         displayElements([gptResponseElement, tryAgainBtn]);
         removeElements([loadingContainer]);
         gptResponseElement.innerHTML = defaultRecipe;
         return;
       }
 
-      if (data.audio) {
+      if (eventData.audio) {
+        data.audio = eventData.audio;
+      }
+      if (eventData.image) {
+        data.image = eventData.image;
+      }
+      // console.log("cacheObject", data);
+      console.log("data.audio", eventData.audio);
+      console.log("data.image", eventData.image);
+
+      if (data.audio && data.image) {
+        console.log(typeof data.image);
+        removeElements([loadingContainer]);
+        const imageUrl = data.image.data[0].url;
+        console.log(`imageURL ${imageUrl}`);
+        // await cacheData(imageUrl, CACHE_NAME_URL, "image");
+        backgroundImg.src = imageUrl;
+        backgroundImg.onload = () => {
+          console.log("Image loaded successfully");
+        
+        };
+        backgroundImg.onerror = () => {
+          console.error("Error loading image");
+        };
+
+        ///
         console.log(data.audio);
         const audio_data = createAudio(data.audio);
         console.log(`line 261: ${audio_data}`);
@@ -233,34 +256,85 @@ recipeButtons.forEach((button) => {
         });
       }
 
-      if (data.image) {
-        console.log(typeof data.image);
-        removeElements([loadingContainer]);
-        const imageUrl = data.image.data[0].url;
-        console.log(`imageURL ${imageUrl}`);
-        await cacheData(imageUrl, CACHE_NAME_URL, "image");
-        backgroundImg.src = imageUrl;
-        backgroundImg.onload = () => {
-          console.log("Image loaded successfully");
-        };
-        backgroundImg.onerror = () => {
-          console.error("Error loading image");
-        };
-      }
+      // if (data.image) {
+      //   console.log(typeof data.image);
+      //   removeElements([loadingContainer]);
+      //   const imageUrl = data.image.data[0].url;
+      //   console.log(`imageURL ${imageUrl}`);
+      //   // await cacheData(imageUrl, CACHE_NAME_URL, "image");
+      //   backgroundImg.src = imageUrl;
+      //   backgroundImg.onload = () => {
+      //     console.log("Image loaded successfully");
+      //   };
+      //   backgroundImg.onerror = () => {
+      //     console.error("Error loading image");
+      //   };
+      // }
     };
   });
 });
 
 // Picture section
-navigator.mediaDevices
-  .getUserMedia(constraint)
-  .then((stream) => {
+
+async function getVideoDevices() {
+  const devices = await navigator.mediaDevices.enumerateDevices();
+  return devices.filter((device) => device.kind === "videoinput");
+}
+
+async function startCamera(deviceId) {
+  const constraints = {
+    audio: false,
+    video: {
+      deviceId: deviceId ? { exact: deviceId } : undefined,
+      width: { min: 1024, ideal: 1280, max: 1920 },
+      height: { min: 576, ideal: 720, max: 1080 },
+    },
+  };
+
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia(constraints);
     video.srcObject = stream;
-    video.play();
-  })
-  .catch((error) => {
+    await video.play();
+  } catch (error) {
     console.error("Error accessing camera:", error);
-  });
+  }
+}
+
+async function initializeCamera() {
+  const videoDevices = await getVideoDevices();
+
+  if (videoDevices.length > 1) {
+    switchCameraButton.style.display = "block";
+    switchCameraButton.addEventListener("click", () => {
+      currentCameraIndex = (currentCameraIndex + 1) % videoDevices.length;
+      startCamera(videoDevices[currentCameraIndex].deviceId);
+    });
+  } else {
+    switchCameraButton.style.display = "none";
+  }
+
+  // Start with the rear camera if available
+  const rearCameraDevice = videoDevices.find(
+    (device) =>
+      device.label.toLowerCase().includes("back") ||
+      device.label.toLowerCase().includes("rear")
+  );
+  startCamera(
+    rearCameraDevice ? rearCameraDevice.deviceId : videoDevices[0].deviceId
+  );
+}
+
+initializeCamera();
+
+// navigator.mediaDevices
+//   .getUserMedia(constraint)
+//   .then((stream) => {
+//     video.srcObject = stream;
+//     video.play();
+//   })
+//   .catch((error) => {
+//     console.error("Error accessing camera:", error);
+//   });
 
 function capturePhoto() {
   context.drawImage(video, 0, 0, 400, 100);

public/js_utilities/functions_and_variables.js

@@ -3,7 +3,7 @@
 const CACHE_NAME_URL = "image-cache-v1";
 const CACHE_NAME_AUDIO = "audio-cache-v2";
 let audioElement = new Audio();
-let emailObject;
+
 
 
 
@@ -162,4 +162,4 @@ function createAudio(data) {
 
 
 
-export { defaultRecipe, CACHE_NAME_URL, audioElement, emailObject, CACHE_NAME_AUDIO, cacheData, createQuery, displayElements, displayElementsFlex, displayElementsGrid, removeElements, emptyTheElement, resetCheckedStateToFalse, playAudio, pauseAudio, stopAudio, createAudio, createUserRecipe }
+export { defaultRecipe, CACHE_NAME_URL, audioElement, CACHE_NAME_AUDIO, cacheData, createQuery, displayElements, displayElementsFlex, displayElementsGrid, removeElements, emptyTheElement, resetCheckedStateToFalse, playAudio, pauseAudio, stopAudio, createAudio, createUserRecipe }

public/js_utilities/query_selector.js

@@ -42,7 +42,10 @@ const constraint = {
   audio: false,
   video: {
   width: {min: 1024, ideal: 1280, max: 1920},
-  height: {min: 576, ideal: 720, max: 1080}
+  height: {min: 576, ideal: 720, max: 1080},
+  facingMode: { ideal: 'environment' } // tells the browser to prefer the rear camera if available.
+
+
 }
 }
 

public/url_folder.txt

@@ -1 +1 @@
-https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-QhUaTMW5KjXvVEFVqpbnc4WK.png?st=2024-07-30T12%3A45%3A56Z&se=2024-07-30T14%3A45%3A56Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-07-29T23%3A53%3A11Z&ske=2024-07-30T23%3A53%3A11Z&sks=b&skv=2023-11-03&sig=dk5PjiI69ok5GWveRY4lJjVFsgv1MhLFxe2OFGCWh5s%3D
+https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-fZ49pZbQpCxjm9FKRgrWUwV1.png?st=2024-08-01T13%3A04%3A59Z&se=2024-08-01T15%3A04%3A59Z&sp=r&sv=2023-11-03&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-07-31T23%3A34%3A47Z&ske=2024-08-01T23%3A34%3A47Z&sks=b&skv=2023-11-03&sig=jsB0y%2BY7/emg4Ic4UcC%2B3X%2BNip9uAN4c4p4cAx%2BGr%2B4%3D