-
Notifications
You must be signed in to change notification settings - Fork 60
/
Copy pathindex.html
199 lines (178 loc) · 9.25 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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>GPT-4o chat on image demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
integrity="sha256-4RctOgogjPAdwGbwq+rxfwAmSpZhWaafcZR9btzUk18=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/cosmo/bootstrap.min.css"
integrity="sha256-axRDISYf7Hht1KhcMnfDV2nq7hD/8Q9Rxa0YlW/o3NU=" crossorigin="anonymous">
<link href="/static/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<main class="h-100 mh-100 d-flex flex-column overflow-hidden justify-content-start">
<div id="messages" class="px-4 pb-4 pt-2 flex-grow-1 overflow-y-auto overflow-x-hidden align-items-stretch">
<h2 id="no-messages-heading" class="text-center">Chat with your uploaded images</h2>
<template id="message-template-user">
<div class="toast-container position-static w-100 d-flex flex-column align-items-stretch">
<div class="toast fade show w-75 rounded-3 align-self-end">
<div class="toast-header text-light background-user">
<i class="bi bi-person me-1" aria-hidden="true"></i>
<strong class="me-auto text-capitalize">
You
</strong>
</div>
<div class="toast-body message-file">
</div>
<div class="toast-body message-content">
</div>
</div>
</div>
</template>
<template id="message-template-assistant">
<div class="toast-container position-static w-100 d-flex flex-column align-items-stretch">
<div class="toast fade show w-75 rounded-3 align-self-start">
<div class="toast-header text-light background-assistant">
<i class="bi bi-robot me-1" aria-hidden="true"></i>
<strong class="me-auto text-capitalize">
Assistant
</strong>
</div>
<div class="toast-body message-content">
<em class="typing-indicator">Typing...</em>
</div>
</div>
</div>
</template>
</div>
<div id="chat-area" class="px-4 py-2 rounded-top-5 text-dark d-flex flex-column justify-content-center">
<form id="chat-form">
<div class="d-flex">
<div class="flex-grow-1">
<label for="file" class="form-label" style="color:white">Upload image:</label>
<div class="input-group mb-3">
<i class="bi bi-file-earmark-text input-group-text" aria-hidden="true"></i>
<input id="file" name="file" class="form-control form-control-sm" type="file" accept=".png, .jpg" aria-label="Upload File"></input>
</div>
<label for="message" class="form-label bi" style="color:white">Ask question about image:</label>
<div class="input-group">
<speech-input-button></speech-input-button>
<input id="message" name="message" class="form-control form-control-sm" type="text" rows="1" placeholder="<Your Message>" aria-label="Ask ChatGPT"></input>
<button type="submit" class="btn btn-primary">
Send
<i class="bi bi-send-fill" aria-hidden="true"></i>
</button>
</div>
</div>
<img id="image-preview" class="img-fluid mt-2" style="display: none;" />
</div>
</form>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/dist/iife/index.js"></script>
<script src="/static/speech-input.js?v=2"></script>
<script src="/static/speech-output.js?v=2"></script>
<script>
const form = document.getElementById("chat-form");
const messageInput = document.getElementById("message");
const targetContainer = document.getElementById("messages");
const userTemplate = document.querySelector('#message-template-user');
const assistantTemplate = document.querySelector('#message-template-assistant');
const converter = new showdown.Converter();
const messages = [];
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
});
const client = new ChatProtocol.AIChatProtocolClient("/chat");
const fileInput = document.getElementById("file");
const imagePreview = document.getElementById("image-preview");
fileInput.addEventListener("change", async function() {
const file = fileInput.files[0];
if (file) {
const fileData = await toBase64(file);
imagePreview.src = fileData;
imagePreview.style.display = "block";
} else {
imagePreview.style.display = "none";
}
});
const speechInputButton = document.querySelector("speech-input-button");
speechInputButton.addEventListener("speech-input-result", (event) => {
messageInput.value += " " + event.detail.transcript.trim();
messageInput.focus();
});
speechInputButton.addEventListener("speech-input-error", (event) => {
alert(event.detail.error);
});
form.addEventListener("submit", async function(e) {
e.preventDefault();
// Hide the no-messages-heading when a message is added
document.getElementById("no-messages-heading").style.display = "none";
const file = document.getElementById("file").files[0];
const fileData = file ? await toBase64(file) : null;
const message = messageInput.value;
const userTemplateClone = userTemplate.content.cloneNode(true);
userTemplateClone.querySelector(".message-content").innerText = message;
if (file) {
const img = document.createElement("img");
img.src = fileData;
userTemplateClone.querySelector(".message-file").appendChild(img);
}
targetContainer.appendChild(userTemplateClone);
const assistantTemplateClone = assistantTemplate.content.cloneNode(true);
let messageDiv = assistantTemplateClone.querySelector(".message-content");
targetContainer.appendChild(assistantTemplateClone);
messages.push({
"role": "user",
"content": message
});
try {
messageDiv.scrollIntoView();
const result = await client.getStreamedCompletion(messages, {
context: {
file: fileData,
file_name: file ? file.name : null
}
});
let answer = "";
for await (const response of result) {
if (!response.delta) {
continue;
}
if (response.delta.content) {
// Clear out the DIV if its the first answer chunk we've received
if (answer == "") {
messageDiv.innerHTML = "";
}
answer += response.delta.content;
messageDiv.innerHTML = converter.makeHtml(answer);
messageDiv.scrollIntoView();
}
if (response.error) {
messageDiv.innerHTML = "Error: " + response.error;
}
}
messages.push({
"role": "assistant",
"content": answer
});
messageInput.value = "";
const speechOutput = document.createElement("speech-output-button");
speechOutput.setAttribute("text", answer);
messageDiv.appendChild(speechOutput);
messageInput.focus();
} catch (error) {
messageDiv.innerHTML = "Error: " + error;
}
});
</script>
</body>
</html>