-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
66 lines (59 loc) · 2.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Narration Demo</title>
</head>
<body>
<h1>Narration Demo</h1>
<div>
<button id="captureButton">Capture Image</button>
</div>
<p id="status" style="text-align: center; width: 100%; font-style: italic;"></p>
<p>Image:</p>
<div id="imageContainer">
<!-- The captured image will be displayed here -->
</div>
<p>Description:</p>
<div id="descriptionContainer">
<!-- The captured image will be displayed here -->
</div>
<script>
const captureButton = document.getElementById('captureButton');
const imageContainer = document.getElementById('imageContainer');
const progressElement = document.getElementById('status');
progressElement.innerHTML = 'Click "Capture Image" to begin...';
captureButton.addEventListener('click', async () => {
progressElement.innerHTML = 'Capturing image...';
const captureResponse = await fetch('/capture');
const imageJson = await captureResponse.json();
if (captureResponse.ok) {
// Create an image element and set its source to the captured image path
const imgElement = document.createElement('img');
imgElement.src = imageJson.imagePath;
// Append the image element to the container
imageContainer.src = null; // Clear previous images
imageContainer.appendChild(imgElement);
} else {
console.error('Error capturing image:', captureResponse.statusText);
}
progressElement.innerHTML = 'Getting image description...';
const descriptionResponse = await fetch('/describe', { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ "imagePath": imageJson.imagePath }) });
const descriptionJson = await descriptionResponse.json();
if (descriptionResponse.ok) {
const descriptionElement = document.getElementById('descriptionContainer');
descriptionElement.innerHTML = descriptionJson.description;
} else {
console.error('Error describing image:', descriptionResponse.statusText);
}
progressElement.innerHTML = 'Sending narration to Sir David Attenborough for review...';
const readResponse = await fetch('/read', { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({ "description": descriptionJson.description }) });
progressElement.innerHTML = '';
if (!readResponse.ok) {
console.error('Error describing description:', readResponse.statusText);
}
})
</script>
</body>
</html>