Skip to content

Commit 4af15d6

Browse files
josueJUREjosueJURE
authored
Merge pull request fac29b#63 from fac29b/refactoring-code-for-audio-and-buttons
Refactoring code for audio and buttons
2 parents 3ab6888 + 72f4414 commit 4af15d6

6 files changed

Lines changed: 44 additions & 83 deletions

File tree

‎public/index.html‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,21 @@
2020
<body>
2121

2222
<div class="container">
23-
<!-- Navigation -->
24-
<div class="menu-icon">
25-
<div class="line line-1"></div>
26-
<div class="line line-2"></div>
27-
</div>
28-
<nav class="navigation">
29-
<div class="nav-items">
30-
<a href="#recipe-section">Select Cuisine</a>
31-
<a href="#picture-section">Take a picture of your ingredients</a>
32-
</div>
33-
</nav>
34-
<!-- Content Sections -->
35-
<!-- <section id="cusine-options">Select Cuisine</section>
36-
<section id="picture-section">Take a picture of your ingredients</section> -->
37-
3823
</div>
3924
<div class="stream"></div>
4025

4126
<div aria-label="parent container" class="parent-container">
4227
<div class="wrapper">
28+
<div class="menu-icon">
29+
<div class="line line-1"></div>
30+
<div class="line line-2"></div>
31+
</div>
32+
<nav class="navigation">
33+
<div class="nav-items">
34+
<a href="#recipe-section">Select Cuisine</a>
35+
<a href="#picture-section">Take a picture of your ingredients</a>
36+
</div>
37+
</nav>
4338

4439
<div id="recipe-section" class="recipe-section">
4540

‎public/index.js‎

Lines changed: 27 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,33 @@ import {
1212
stopAudio,
1313
createAudio,
1414
createUserRecipe,
15-
cacheData,
16-
CACHE_NAME_URL,
17-
CACHE_NAME_AUDIO,
1815
audioElement,
19-
alert_message
16+
alert_message,
2017
} from "./js_utilities/functions_and_variables.js";
2118

2219
import {
2320
mainElement,
2421
backgroundImg,
2522
gptResponseElement,
2623
headline,
27-
lactoseIntolerant,
2824
loadingContainer,
2925
allergies,
3026
darkLightButton,
3127
userWantAnotherRecipe,
3228
tryAgainBtn,
3329
recipeButtons,
3430
sendRecipeToUserInboxBtn,
35-
loadingText,
3631
recording,
3732
userEmail,
3833
emailSection,
3934
sendToUserInboxBtn,
4035
dietaryRequirements,
4136
otherDietaryRequirements,
4237
userText,
43-
pictureSection,
4438
video,
4539
canvas,
4640
takePicture,
4741
context,
48-
constraint,
4942
chatGptVisionText,
5043
videoBtnCanvas,
5144
pictureSectionHeadline,
@@ -54,7 +47,7 @@ import {
5447
pictureEmailSection,
5548
previousPage,
5649
sendToUserInbox,
57-
emailUserRecipeSection,
50+
wrapper,
5851
} from "./js_utilities/query_selector.js";
5952

6053
let currentCameraIndex = 0;
@@ -143,7 +136,6 @@ sendToUserInbox.addEventListener("click", () => {
143136
});
144137

145138
sendToUserInboxBtn.addEventListener("click", () => {
146-
// console.log(`userEmail ${userEmail.value}`);
147139
console.log(emailObject);
148140
fetch(`/email?${createQuery(emailObject)}`)
149141
.then((response) => response.json())
@@ -196,39 +188,14 @@ recipeButtons.forEach((button) => {
196188
if (eventData.image) {
197189
data.image = eventData.image;
198190
}
199-
// console.log("cacheObject", data);
191+
200192
console.log("data.audio", eventData.audio);
201193
console.log("data.image", eventData.image);
202194

203195
if (data.audio && data.image) {
204-
console.log(typeof data.image);
205-
removeElements([loadingContainer]);
206-
const imageUrl = data.image.data[0].url;
207-
console.log(`imageURL ${imageUrl}`);
208-
// await cacheData(imageUrl, CACHE_NAME_URL, "image");
209-
backgroundImg.src = imageUrl;
210-
backgroundImg.onload = () => {
211-
console.log("Image loaded successfully");
212-
213-
};
214-
backgroundImg.onerror = () => {
215-
console.error("Error loading image");
216-
};
217-
218-
///
219-
console.log(data.audio);
220-
const audio_data = createAudio(data.audio);
221-
console.log(`line 261: ${audio_data}`);
222-
await cacheData(audio_data, CACHE_NAME_AUDIO, "audio");
223-
displayElementsFlex([recording]);
224-
displayElements([sendRecipeToUserInboxBtn, userWantAnotherRecipe]);
225-
const speechBtns = Array.from(document.querySelectorAll(".fa-solid"));
226-
const speedBtn = document.querySelector("#speed");
227-
audioElement.src = createAudio(data.audio);
228-
audioElement.stop = function () {
229-
this.pause();
230-
this.currentTime = 0;
231-
};
196+
createImage(data);
197+
198+
const { speedBtn, speechBtns } = createTextToSpeech(data);
232199

233200
userWantAnotherRecipe.addEventListener("click", () => {
234201
displayElements([headline, allergies, ...recipeButtons, mainElement]);
@@ -257,27 +224,31 @@ recipeButtons.forEach((button) => {
257224
});
258225
});
259226
}
260-
261-
// if (data.image) {
262-
// console.log(typeof data.image);
263-
// removeElements([loadingContainer]);
264-
// const imageUrl = data.image.data[0].url;
265-
// console.log(`imageURL ${imageUrl}`);
266-
// // await cacheData(imageUrl, CACHE_NAME_URL, "image");
267-
// backgroundImg.src = imageUrl;
268-
// backgroundImg.onload = () => {
269-
// console.log("Image loaded successfully");
270-
// };
271-
// backgroundImg.onerror = () => {
272-
// console.error("Error loading image");
273-
// };
274-
// }
275227
};
276228
});
277229
});
278230

279-
// Picture section
231+
function createImage(param) {
232+
removeElements([loadingContainer]);
233+
const imageUrl = param.image.data[0].url;
234+
backgroundImg.src = imageUrl;
235+
return backgroundImg;
236+
}
280237

238+
function createTextToSpeech(param) {
239+
displayElementsFlex([recording]);
240+
displayElements([sendRecipeToUserInboxBtn, userWantAnotherRecipe]);
241+
const speechBtns = Array.from(document.querySelectorAll(".fa-solid"));
242+
const speedBtn = document.querySelector("#speed");
243+
audioElement.src = createAudio(param.audio);
244+
audioElement.stop = function () {
245+
this.pause();
246+
this.currentTime = 0;
247+
};
248+
return { speedBtn, speechBtns };
249+
}
250+
251+
// Picture section
281252
async function getVideoDevices() {
282253
const devices = await navigator.mediaDevices.enumerateDevices();
283254
return devices.filter((device) => device.kind === "videoinput");
@@ -328,16 +299,6 @@ async function initializeCamera() {
328299

329300
initializeCamera();
330301

331-
// navigator.mediaDevices
332-
// .getUserMedia(constraint)
333-
// .then((stream) => {
334-
// video.srcObject = stream;
335-
// video.play();
336-
// })
337-
// .catch((error) => {
338-
// console.error("Error accessing camera:", error);
339-
// });
340-
341302
function capturePhoto() {
342303
context.drawImage(video, 0, 0, 400, 100);
343304
}
@@ -375,8 +336,7 @@ takePicture.addEventListener("click", () => {
375336

376337
// Menu icon toggle
377338
const menuIcon = document.querySelector(".menu-icon");
378-
const container = document.querySelector(".container");
379339

380340
menuIcon.addEventListener("click", () => {
381-
container.classList.toggle("change");
341+
wrapper.classList.toggle("change");
382342
});

‎public/js_utilities/functions_and_variables.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,10 @@ function loopOverArrayOfElements(array, display) {
113113

114114

115115

116+
117+
118+
119+
116120
function displayElements(array) {
117121
loopOverArrayOfElements(array, "block");
118122
}

‎public/js_utilities/query_selector.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const emailRecipe = document.querySelector(".email-recipe");
2+
const wrapper = document.querySelector(".wrapper");
23
const emailUserRecipeSection = document.querySelector(".user-email-recipe-section");
34
const sendToUserInbox = document.querySelector(".send-to-user-inbox");
45
const previousPage = document.querySelector(".previous-page");
@@ -86,6 +87,7 @@ export {
8687
previousPage,
8788
sendToUserInbox,
8889
emailUserRecipeSection,
90+
wrapper
8991
};
9092

9193

‎public/url_folder.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-1wpjmjhOyCV8QTN9mWJBvyFQ.png?st=2024-08-02T12%3A29%3A05Z&se=2024-08-02T14%3A29%3A05Z&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-08-01T23%3A41%3A18Z&ske=2024-08-02T23%3A41%3A18Z&sks=b&skv=2023-11-03&sig=AcczkNo41h%2Bul%2B4Ud3ztnmq9qPvt2AYdUfBzHHUgAyM%3D
1+
https://oaidalleapiprodscus.blob.core.windows.net/private/org-nYbqgo3O0LNnYYAoKAmApBfx/user-58Je7efi0iy880e2UYCdYpBm/img-ovb7qD0yHMLLx0Ooe4iCpSOE.png?st=2024-08-03T13%3A22%3A53Z&se=2024-08-03T15%3A22%3A53Z&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-08-03T04%3A05%3A06Z&ske=2024-08-04T04%3A05%3A06Z&sks=b&skv=2023-11-03&sig=bDE%2Bp86dJ7jZ6nydnnnKPumw/XA0M1VaghM8Bm5XY5E%3D

‎speech.mp3‎

-12.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)