Merge pull request fac29b#61 from fac29b/caching-refactoring

Caching refactoring

Author: josueJURE

public/index.js

@@ -12,6 +12,10 @@ import {
   stopAudio,
   createAudio,
   createUserRecipe,
+  cacheData, 
+  CACHE_NAME_URL, 
+  CACHE_NAME_AUDIO,
+
 } from "./js_utilities/functions_and_variables.js";
 
 import {
@@ -53,17 +57,6 @@ import {
 } from "./js_utilities/query_selector.js";
 
 
- let audioElement = new Audio();
-
-let emailObject
-
-const audio_source = document.querySelector(".audio_source");
-
-console.log(audio_source)
-
-
-
-
 
 wantToTakeAPicture.addEventListener("click", () => {
   removeElements([pictureSectionHeadline, wantToTakeAPicture]);
@@ -72,8 +65,8 @@ wantToTakeAPicture.addEventListener("click", () => {
 });
 
 takePicture.addEventListener("click", () => {
-  console.log("take a picture")
-})
+  console.log("take a picture");
+});
 
 otherDietaryRequirements.addEventListener("click", () => {
   if (otherDietaryRequirements.checked) {
@@ -94,10 +87,13 @@ sendRecipeToUserInboxBtn.addEventListener("click", () => {
   removeElements([sendRecipeToUserInboxBtn]);
 });
 
-
-
 previousPage.addEventListener("click", () => {
-  removeElements([videoBtnCanvas, pictureEmailSection, previousPage, emailRecipe]);
+  removeElements([
+    videoBtnCanvas,
+    pictureEmailSection,
+    previousPage,
+    emailRecipe,
+  ]);
   displayElements([pictureSectionHeadline, wantToTakeAPicture]);
   emptyTheElement(chatGptVisionText);
 });
@@ -110,63 +106,54 @@ tryAgainBtn.addEventListener("click", () => {
 });
 
 darkLightButton.addEventListener("change", () => {
-  document.body.classList.toggle('dark-mode', darkLightButton.checked);
+  document.body.classList.toggle("dark-mode", darkLightButton.checked);
 });
 
-const x = [...userEmail]
-x.forEach(element => {
+const user_email_elememts = [...userEmail];
+user_email_elememts.forEach((element) => {
   element.addEventListener("input", (e) => {
     emailObject = {
-      [element.name] : element.value,
-    }
-    console.log(e.target.value)
-  }) 
-})
-
-console.log(emailObject)
-
-// const elements = [sendToUserInboxBtn, sendToUserInbox];
+      [element.name]: element.value,
+    };
+    console.log(e.target.value);
+  });
+});
 
+console.log(emailObject);
 
 sendToUserInbox.addEventListener("click", () => {
   fetch(`/email_picture_section?${createQuery(emailObject)}`, {
     method: "POST",
     headers: {
-      "Content-Type" : "application/json"
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify({pictureTextSection: chatGptVisionText.textContent})
-  })
-  .then((response) => {
+    body: JSON.stringify({ pictureTextSection: chatGptVisionText.textContent }),
+  }).then((response) => {
     if (response.ok) {
       console.log("image posted");
-      return response.json()
+      return response.json();
     } else {
-      throw new Error("Failed to post image")
+      throw new Error("Failed to post image");
     }
-  })
-
+  });
 });
 
-
 sendToUserInboxBtn.addEventListener("click", () => {
-   
-    console.log(`userEmail ${userEmail.value}`);
-    console.log(emailObject);
-    fetch(`/email?${createQuery(emailObject)}`)
-      .then((response) => response.json())
-      .then((data) => {
-        if (data.emailStatus === "250 OK , completed") {
-          alert("An email has been sent to your inbox");
-        } else {
-          alert("Invalid email address, try again");
-        }
-      })
-      .catch((error) => console.error("Error:", error));
-  });
-  // emailObject[userEmail.name] = "";
+  console.log(`userEmail ${userEmail.value}`);
   console.log(emailObject);
-  // console.log(`emailUserRecipeSection ${emailUserRecipeSection.value}`);
+  fetch(`/email?${createQuery(emailObject)}`)
+    .then((response) => response.json())
+    .then((data) => {
+      if (data.emailStatus === "250 OK , completed") {
+        alert("An email has been sent to your inbox");
+      } else {
+        alert("Invalid email address, try again");
+      }
+    })
+    .catch((error) => console.error("Error:", error));
+});
 
+console.log(emailObject);
 
 recipeButtons.forEach((button) => {
   console.log(userText.value);
@@ -176,61 +163,10 @@ recipeButtons.forEach((button) => {
     const userRecipe = createUserRecipe(button, dietaryRequirements, userText);
     console.log(userRecipe);
 
-    const CACHE_NAME = 'image-cache-v1';
-    const CACHE_NAME_AUDIO = 'image-cache-v2'
 
 
-    // Function to cache the audio (without fetching the audio)
-    async function cacheAudio(audio) {
-      const cache = await caches.open(CACHE_NAME_AUDIO);
-      const response = new Response(JSON.stringify({audio, timestamp: Date.now()}));
-      await cache.put("last-generated-audio", response);
-    }
-
-    // Funnction to get the cached audio data
-    async function getCachedAudio() {
-      const cache = await caches.open(CACHE_NAME_AUDIO);
-      const response = await cache.match("last-generated-audio");
-      if (response) {
-        const data = await response.json();
-        const now = Date.now();
-        if (now - data.timestamp < 24 *  60  * 60  * 1000) {
-          return data.url;
-        } else {
-          await cache.delete("last-generated-audio")
-        }
-      }
-      return null
-    }
-
 
 
-    // Function to cache the image URL (without fetching the image)
-    async function cacheImageUrl(url) {
-      const cache = await caches.open(CACHE_NAME);
-      const response = new Response(JSON.stringify({ url, timestamp: Date.now() }));
-      await cache.put('last-generated-image', response);
-    }
-    
-    // Function to get the cached image URL
-    async function getCachedImageUrl() {
-      const cache = await caches.open(CACHE_NAME);
-      const response = await cache.match('last-generated-image');
-      if (response) {
-        const data = await response.json();
-        const now = Date.now();
-        if (now - data.timestamp < 24 * 60 * 60 * 1000) {  // 24 hours
-          return data.url;
-        } else {
-          // Remove expired cache entry
-          await cache.delete('last-generated-image');
-        }
-      }
-      return null;
-    }
-
-    
-
     const eventSource = new EventSource(`/stream?${createQuery(userRecipe)}`);
 
     eventSource.onmessage = async function (event) {
@@ -253,22 +189,15 @@ recipeButtons.forEach((button) => {
       }
 
       if (data.audio) {
-      
         console.log(data.audio);
-  
         const audio_data = createAudio(data.audio);
-        console.log(`line 261: ${audio_data}`)
-        // Cache the url object
-        await cacheAudio(audio_data)
-        
+        console.log(`line 261: ${audio_data}`);
+        await cacheData(audio_data, CACHE_NAME_AUDIO, "audio");
         displayElementsFlex([recording]);
         displayElements([sendRecipeToUserInboxBtn, userWantAnotherRecipe]);
-
         const speechBtns = Array.from(document.querySelectorAll(".fa-solid"));
         const speedBtn = document.querySelector("#speed");
-
         audioElement.src = createAudio(data.audio);
-
         audioElement.stop = function () {
           this.pause();
           this.currentTime = 0;
@@ -303,46 +232,23 @@ recipeButtons.forEach((button) => {
       }
 
       if (data.image) {
-        console.log(data.image);
+        console.log(typeof data.image);
         removeElements([loadingContainer]);
         const imageUrl = data.image.data[0].url;
-         // Cache the image URL
-         await cacheImageUrl(imageUrl);
-         backgroundImg.addEventListener("load", () => {
-          backgroundImg.src = imageUrl;
-          loadingText.textContent = "Hang in there creating the audio...";
-      
-         })
+        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");
+        };
       }
     };
-
-// Before setting up the eventSource, check for a cached audio
-async function loadCachedAudio() {
-  const cachedAudio = await getCachedAudio();
-  if (cachedAudio) {
-    audioElement.src = cachedAudio;
-  }
-}
-
-// Before setting up the eventSource, check for a cached image URL
-async function loadCachedImage() {
-  const cachedImageUrl = await getCachedImageUrl();
-  if (cachedImageUrl) {
-    backgroundImg.src = cachedImageUrl;
-  }
-}
-
-// Call this function before setting up the eventSource
-loadCachedImage();
-loadCachedAudio();
   });
 });
 
-
-
-
-
-
 // Picture section
 navigator.mediaDevices
   .getUserMedia(constraint)

public/js_utilities/functions_and_variables.js

@@ -1,5 +1,10 @@
 // variables 
 
+const CACHE_NAME_URL = "image-cache-v1";
+const CACHE_NAME_AUDIO = "audio-cache-v2";
+let audioElement = new Audio();
+let emailObject;
+
 
 
 
@@ -54,6 +59,8 @@ Apologies, but our AI Recipe-Making expert is unavailable. Please try again late
 `;
 
 
+
+
 // functions
 
 function playAudio(element) {
@@ -136,20 +143,23 @@ function resetCheckedStateToFalse(array) {
 
 function createAudio(data) {
   const binaryData = atob(data);
-
   const audioData = new Uint8Array(binaryData.length);
   for (let i = 0; i < binaryData.length; i++) {
     audioData[i] = binaryData.charCodeAt(i);
   }
-
   const audioBlob = new Blob([audioData], { type: "audio/mpeg" });
-  return URL.createObjectURL(audioBlob)
-  // const audioElement = new Audio();
-  // audioElement.src = URL.createObjectURL(audioBlob);
-  // return audioElement;
-
+  return URL.createObjectURL(audioBlob);
 }
 
+    // Function to cache the image URL/AUDIO (without fetching the image)
+    async function cacheData(data, chache_name, type_of_data) {
+      const cache = await caches.open(chache_name);
+      const response = new Response(
+        JSON.stringify({ data, timeStamp: Date.now })
+      );
+      await cache.put(`last-generated-${type_of_data}`, response);
+    }
+
 
 
-export { defaultRecipe, createQuery, displayElements, displayElementsFlex, displayElementsGrid, removeElements, emptyTheElement, resetCheckedStateToFalse, playAudio, pauseAudio, stopAudio, createAudio, createUserRecipe }
+export { defaultRecipe, CACHE_NAME_URL, audioElement, emailObject, CACHE_NAME_AUDIO, cacheData, createQuery, displayElements, displayElementsFlex, displayElementsGrid, removeElements, emptyTheElement, resetCheckedStateToFalse, playAudio, pauseAudio, stopAudio, createAudio, createUserRecipe }

public/url_folder.txt

@@ -1 +1 @@
-https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-wXGzIn0FQALmWRTlYIzucreH.png?st=2024-07-26T15%3A35%3A54Z&se=2024-07-26T17%3A35%3A54Z&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-25T23%3A14%3A25Z&ske=2024-07-26T23%3A14%3A25Z&sks=b&skv=2023-11-03&sig=hY%2B55WDAQiPx4ga97zVQEZZHXcM3DVFJAX2ZLgGNcvA%3D
+https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-htQC9alj1jNLm6pqYEKQrGik.png?st=2024-07-30T11%3A46%3A57Z&se=2024-07-30T13%3A46%3A57Z&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-30T05%3A16%3A53Z&ske=2024-07-31T05%3A16%3A53Z&sks=b&skv=2023-11-03&sig=HEacXRGSbFhke2JCVW3Wj2gBjSbsYl2kjUTZhoOMnB4%3D