Spaces:
Running
Running
File size: 5,093 Bytes
d7b5307 5722d4a d7b5307 5722d4a d7b5307 5722d4a d7b5307 66cbed1 d7b5307 5722d4a d7b5307 5722d4a d7b5307 5722d4a 0320f83 654ebda 5722d4a 654ebda d7b5307 5722d4a d7b5307 5722d4a d7b5307 5722d4a 66cbed1 d7b5307 5722d4a d7b5307 5722d4a d7b5307 5722d4a d7b5307 5722d4a d7b5307 654ebda 5722d4a d7b5307 b3a19e9 |
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 |
document.addEventListener("DOMContentLoaded", () => {
const convo = document.querySelector(".convo");
const input = document.querySelector(".qt input");
const sendBtn = document.querySelector(".sendingQA");
const fileBtn = document.querySelector(".fa-file");
const imageBtn = document.querySelector(".fa-image");
let selectedFile = null;
let filePreviewBubble = null;
// Hidden file input
const fileInput = document.createElement("input");
fileInput.type = "file";
fileInput.accept = ".pdf,.docx,.pptx,.xlsx,image/*";
fileInput.style.display = "none";
document.body.appendChild(fileInput);
fileBtn.addEventListener("click", () => fileInput.click());
imageBtn.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
if (file) {
selectedFile = file;
if (filePreviewBubble) filePreviewBubble.remove();
filePreviewBubble = document.createElement("div");
filePreviewBubble.className = "file-preview-bubble bubble right";
filePreviewBubble.textContent = `📎 Selected: ${file.name}`;
convo.appendChild(filePreviewBubble);
convo.scrollTop = convo.scrollHeight;
}
});
function createMessageBubble(text, sender = "You", audioSrc = null, fileName = null) {
const bubble = document.createElement("div");
bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;
const label = document.createElement("div");
label.className = "label";
label.innerText = sender;
const message = document.createElement("div");
message.className = "text";
message.style.whiteSpace = "pre-wrap"; // preserve line breaks
if (sender === "You") {
let fileLine = fileName ? `📎 Selected file: ${fileName}\n` : "";
message.innerText = `${fileLine}❓ ${text}`;
} else {
message.style.display = "flex";
message.style.justifyContent = "space-between";
message.style.alignItems = "center";
const msgSpan = document.createElement("span");
msgSpan.innerText = text;
message.appendChild(msgSpan);
if (audioSrc) {
const icon = document.createElement("i");
icon.className = "fa-solid fa-volume-high audio-toggle";
icon.title = "Click to mute";
icon.style.cursor = "pointer";
icon.style.fontSize = "18px";
const audio = new Audio(audioSrc);
audio.play();
icon.addEventListener("click", () => {
audio.muted = !audio.muted;
icon.classList.toggle("fa-volume-high", !audio.muted);
icon.classList.toggle("fa-volume-xmark", audio.muted);
icon.title = audio.muted ? "Click to unmute" : "Click to mute";
});
message.appendChild(icon);
}
}
bubble.appendChild(label);
bubble.appendChild(message);
convo.appendChild(bubble);
convo.scrollTop = convo.scrollHeight;
return bubble;
}
sendBtn.addEventListener("click", async () => {
const question = input.value.trim();
if (!question) return;
if (!selectedFile) {
alert("Please upload a document or image first.");
return;
}
// Remove file preview bubble
if (filePreviewBubble) {
filePreviewBubble.remove();
filePreviewBubble = null;
}
// User message with file info
createMessageBubble(question, "You", null, selectedFile.name);
// Chris is thinking...
const thinkingBubble = createMessageBubble("Wait , Let me think 🤔...", "Chris");
const formData = new FormData();
formData.append("question", question);
formData.append("file", selectedFile);
try {
const response = await fetch("/predict", {
method: "POST",
body: formData
});
const result = await response.json();
const answerText = result.answer || "No response.";
const audioSrc = result.audio || null;
// Replace "Let me think..." with actual answer
const message = thinkingBubble.querySelector(".text");
message.innerText = answerText;
if (audioSrc) {
const icon = document.createElement("i");
icon.className = "fa-solid fa-volume-high audio-toggle";
icon.title = "Click to mute";
icon.style.cursor = "pointer";
icon.style.fontSize = "18px";
icon.style.marginLeft = "10px";
const audio = new Audio(audioSrc);
audio.play();
icon.addEventListener("click", () => {
audio.muted = !audio.muted;
icon.classList.toggle("fa-volume-high", !audio.muted);
icon.classList.toggle("fa-volume-xmark", audio.muted);
icon.title = audio.muted ? "Click to unmute" : "Click to mute";
});
message.style.display = "flex";
message.style.justifyContent = "space-between";
message.appendChild(icon);
}
} catch (err) {
const message = thinkingBubble.querySelector(".text");
message.innerText = "⚠️ Chris had trouble responding.";
}
input.value = "";
selectedFile = null;
});
});
|