Spaces:
Running
Running
File size: 4,550 Bytes
b3a19e9 0604e9c 5a540b1 0604e9c 5c2dbaf b3a19e9 5a540b1 0604e9c b3a19e9 3d74941 4915e32 b3a19e9 b18639b 5c2dbaf 0604e9c b3a19e9 5c2dbaf 0604e9c 5c2dbaf b3a19e9 0604e9c b3a19e9 b18639b 0604e9c b3a19e9 5c2dbaf f0ce864 5c2dbaf f0ce864 dae9d57 f0ce864 b18639b b3a19e9 0604e9c b18639b 0604e9c 5c2dbaf 0604e9c b18639b 2ec6a42 5c2dbaf f0ce864 b18639b b3a19e9 0604e9c 2597823 b3a19e9 5c2dbaf b3a19e9 5c2dbaf b3a19e9 0604e9c 5c2dbaf 2ec6a42 5c2dbaf b3a19e9 5c2dbaf b3a19e9 5c2dbaf 2597823 2ec6a42 b3a19e9 0604e9c 5c2dbaf 0604e9c 5c2dbaf 0604e9c 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 |
document.addEventListener("DOMContentLoaded", function () {
const convo = document.querySelector(".convo");
const sendBtn = document.querySelector(".sendingQA");
const userInput = document.querySelector(".qt input");
const imageIcon = document.querySelector(".fa-image");
const fileIcon = document.querySelector(".fa-file");
let selectedFile = null;
let filePreviewDiv = null;
let autoScroll = true;
convo.addEventListener("scroll", () => {
const threshold = 150;
autoScroll = convo.scrollHeight - convo.scrollTop - convo.clientHeight < threshold;
});
function scrollToBottom() {
if (autoScroll) {
convo.scrollTo({ top: convo.scrollHeight, behavior: "smooth" });
}
}
function createMessageBubble(text, sender, audioUrl = null, fileName = null) {
const bubble = document.createElement("div");
bubble.classList.add("bubble", sender === "You" ? "right" : "left");
const label = document.createElement("div");
label.className = "label";
label.innerText = sender;
const textDiv = document.createElement("div");
textDiv.className = "text";
textDiv.innerText = text;
bubble.appendChild(label);
bubble.appendChild(textDiv);
if (fileName) {
const fileLine = document.createElement("div");
fileLine.style.fontSize = "0.85rem";
fileLine.style.color = "#555";
fileLine.innerHTML = `📎 <strong>File:</strong> ${fileName}`;
bubble.appendChild(fileLine);
}
if (audioUrl) {
const audio = document.createElement("audio");
audio.controls = true;
audio.autoplay = true;
audio.src = audioUrl;
audio.style.marginTop = "10px";
bubble.appendChild(audio);
}
convo.appendChild(bubble);
scrollToBottom();
return bubble;
}
function showFilePreview(filename, icon = "📎") {
if (filePreviewDiv) filePreviewDiv.remove();
filePreviewDiv = document.createElement("div");
filePreviewDiv.className = "file-preview-bubble";
filePreviewDiv.innerHTML = `${icon} <strong>Selected:</strong> ${filename}`;
convo.appendChild(filePreviewDiv);
scrollToBottom();
}
sendBtn.addEventListener("click", async () => {
const question = userInput.value.trim();
if (!question) return;
if (!selectedFile) {
alert("Please upload a file before asking a question.");
return;
}
if (filePreviewDiv) filePreviewDiv.remove(); // Remove preview bubble
createMessageBubble(question, "You", null, selectedFile.name);
const thinkingBubble = createMessageBubble("Waiat 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();
thinkingBubble.querySelector(".text").innerText = result.answer || "No response received.";
if (result.audio) {
const audio = document.createElement("audio");
audio.controls = true;
audio.autoplay = true;
audio.src = result.audio;
audio.style.marginTop = "10px";
thinkingBubble.appendChild(audio);
}
} catch (err) {
thinkingBubble.querySelector(".text").innerText = "⚠️ Chris had trouble connecting.";
}
userInput.value = "";
selectedFile = null;
});
imageIcon.addEventListener("click", () => {
const input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = () => {
selectedFile = input.files[0];
if (selectedFile) showFilePreview(selectedFile.name, "🖼️");
};
input.click();
});
fileIcon.addEventListener("click", () => {
const input = document.createElement("input");
input.type = "file";
input.accept = ".pdf,.docx,.pptx,.xlsx";
input.onchange = () => {
selectedFile = input.files[0];
if (selectedFile) showFilePreview(selectedFile.name, "📄");
};
input.click();
});
});
|