-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (88 loc) · 4.05 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<!-- api gateway generated sdk -->
<script src="./assets/js/sdk/lib/axios/dist/axios.standalone.js"></script>
<script src="./assets/js/sdk/lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script src="./assets/js/sdk/lib/CryptoJS/rollups/sha256.js"></script>
<script src="./assets/js/sdk/lib/CryptoJS/components/hmac.js"></script>
<script src="./assets/js/sdk/lib/CryptoJS/components/enc-base64.js"></script>
<script src="./assets/js/sdk/lib/url-template/url-template.js"></script>
<script src="./assets/js/sdk/lib/apiGatewayCore/sigV4Client.js"></script>
<script src="./assets/js/sdk/lib/apiGatewayCore/apiGatewayClient.js"></script>
<script src="./assets/js/sdk/lib/apiGatewayCore/simpleHttpClient.js"></script>
<script src="./assets/js/sdk/lib/apiGatewayCore/utils.js"></script>
<script src="./assets/js/sdk/apigClient.js"></script>
<script src="./assets/js/aws-sdk.min.js"></script>
<!-- Important to have added all-->
<head>
<title>Image Upload and Labeling</title>
</head>
<body>
<h1>Image Upload and Labeling</h1>
<form id="image-form" enctype="multipart/form-data">
<input type="file" id="image-input" accept="image/png, image/jpeg" required>
<input type="text" id="label-input" placeholder="Enter label(s) (comma-separated)">
<button type="submit">Upload</button>
</form>
<h2>Search for Photos</h2>
<form id="search-form">
<input type="text" id="search-keyword" placeholder="Enter search keywords">
<button onclick="recordAudio()">Start Recording</button>
<div id="output"></div>
<button type="submit">Search</button>
</form>
<div id="search-results">
<!-- Display search results here -->
<!-- whatever LF2 outputs-->
</div>
<!---->>
<script>var sdk = apigClientFactory.newClient({});</script>
<!--event listener-->
<script src = "./assets/js/request.js"></script>
<script>
var output = document.getElementById('output');
var searchInput = document.getElementById('search-keyword');
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var recognition = new SpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
// This runs when the speech recognition service has finished
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
output.innerHTML = '<p>Transcript: ' + transcript + '</p>';
// Call AWS API Gateway Triggered Lambda function here
// using transcript as the input
searchInput.value = transcript;
// should be based on how the back-end Lambda function processes requests
var params = {"q": transcript}
console.log({"q": transcript})
sdk.searchGet(params, {}, {})
.then(function (resp) {
if (resp.status === 200) {
// Successful response, handle the data if needed
console.log("API response:", resp.data);
// Assuming resp.data is an array of base64-encoded images, modify this part accordingly
let base64Images = resp.data;
let searchResultsDiv = document.getElementById("search-results");
searchResultsDiv.innerHTML = ""; // Clear previous content
base64Images.forEach(base64Image => {
let imgElement = document.createElement("img");
imgElement.src = "data:image/jpeg;base64," + base64Image; // Assuming JPEG format
searchResultsDiv.appendChild(imgElement);
});
} else {
// Handle other status codes if needed
console.error("API error:", resp.status);
}
})
.catch(function (error) {
// Handle errors
console.error("API error:", error);
});
}
function recordAudio() {
recognition.start();
}
</script>
</body>
</html>