Update index.js
Browse files
index.js
CHANGED
@@ -14,6 +14,7 @@ const QUANT = "q4f16";
|
|
14 |
const MAX_SINGLE_CHAT_LENGTH = 10;
|
15 |
|
16 |
// UI Elements
|
|
|
17 |
const status = document.getElementById('status');
|
18 |
const fileUpload = document.getElementById('upload');
|
19 |
const imageContainer = document.getElementById('container');
|
@@ -102,14 +103,39 @@ export function float16ToInt64(float16Value) {
|
|
102 |
return BigInt(Math.round(value));
|
103 |
}
|
104 |
|
105 |
-
async function parse(img, txt) {
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
111 |
}
|
112 |
|
|
|
113 |
export async function imageTextToText(
|
114 |
imagePath,
|
115 |
query,
|
@@ -349,7 +375,25 @@ fileUpload.addEventListener('change', async function(e) {
|
|
349 |
|
350 |
reader.onload = async (e2) => {
|
351 |
updatePreview(e2.target.result);
|
352 |
-
|
353 |
}
|
354 |
reader.readAsDataURL(file);
|
355 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
const MAX_SINGLE_CHAT_LENGTH = 10;
|
15 |
|
16 |
// UI Elements
|
17 |
+
const promptInput = document.querySelector('input[type="text"]');
|
18 |
const status = document.getElementById('status');
|
19 |
const fileUpload = document.getElementById('upload');
|
20 |
const imageContainer = document.getElementById('container');
|
|
|
103 |
return BigInt(Math.round(value));
|
104 |
}
|
105 |
|
106 |
+
// async function parse(img, txt) {
|
107 |
+
// imageContainer.innerHTML = '';
|
108 |
+
// imageContainer.style.backgroundImage = `url(${img})`;
|
109 |
+
// status.textContent = 'Analysing...';
|
110 |
+
// const output = await imageTextToText(img, txt);
|
111 |
+
// status.textContent = output;
|
112 |
+
// }
|
113 |
+
|
114 |
+
async function handleQuery(imageUrl, query) {
|
115 |
+
if (!imageUrl || !query.trim()) {
|
116 |
+
status.textContent = 'Please provide both an image and a prompt';
|
117 |
+
return;
|
118 |
+
}
|
119 |
+
|
120 |
+
try {
|
121 |
+
status.textContent = 'Analyzing...';
|
122 |
+
|
123 |
+
// container.style.backgroundImage = `url(${imageUrl})`;
|
124 |
+
// container.style.backgroundSize = 'contain';
|
125 |
+
// container.style.backgroundRepeat = 'no-repeat';
|
126 |
+
// container.style.backgroundPosition = 'center';
|
127 |
+
|
128 |
+
updatePreview(imageUrl);
|
129 |
+
|
130 |
+
const result = await imageTextToText(imageUrl, query);
|
131 |
+
status.textContent = result;
|
132 |
+
} catch (err) {
|
133 |
+
status.textContent = 'Error processing request';
|
134 |
+
console.error(err);
|
135 |
+
}
|
136 |
}
|
137 |
|
138 |
+
|
139 |
export async function imageTextToText(
|
140 |
imagePath,
|
141 |
query,
|
|
|
375 |
|
376 |
reader.onload = async (e2) => {
|
377 |
updatePreview(e2.target.result);
|
378 |
+
handleQuery(e2.target.result);
|
379 |
}
|
380 |
reader.readAsDataURL(file);
|
381 |
});
|
382 |
+
|
383 |
+
promptInput.addEventListener('keypress', (e) => {
|
384 |
+
if (e.key === 'Enter') {
|
385 |
+
if (!currentImage) {
|
386 |
+
status.textContent = 'Please select an image first';
|
387 |
+
return;
|
388 |
+
}
|
389 |
+
handleQuery(currentImage, e.target.value);
|
390 |
+
}
|
391 |
+
});
|
392 |
+
|
393 |
+
promptInput.addEventListener('input', () => {
|
394 |
+
if (currentImage && !promptInput.value.trim()) {
|
395 |
+
status.textContent = 'Add a prompt and press Enter';
|
396 |
+
} else if (currentImage && promptInput.value.trim()) {
|
397 |
+
status.textContent = 'Press Enter to analyze';
|
398 |
+
}
|
399 |
+
});
|