Update src/app/static/app.js

src/app/static/app.js

@@ -1,37 +1,138 @@
-const fileInput = document.getElementById("file");
-const btn = document.getElementById("btn");
-const preview = document.getElementById("preview");
-const out = document.getElementById("out");
+const fileInput = document.getElementById("fileInput");
+const predictBtn = document.getElementById("predictBtn");
 const statusEl = document.getElementById("status");
 
+const previewImg = document.getElementById("previewImg");
+const previewPlaceholder = document.getElementById("previewPlaceholder");
+
+const resultCard = document.getElementById("resultCard");
+const emptyState = document.getElementById("emptyState");
+
+const predClass = document.getElementById("predClass");
+const predConf = document.getElementById("predConf");
+const confBar = document.getElementById("confBar");
+const confPct = document.getElementById("confPct");
+
+const topkBody = document.getElementById("topkBody");
+
+const toggleDetails = document.getElementById("toggleDetails");
+const rawJson = document.getElementById("rawJson");
+
+let selectedFile = null;
+let detailsOpen = false;
+
+function setStatus(msg, type = "") {
+  statusEl.textContent = msg;
+  statusEl.className = `status ${type}`.trim();
+}
+
+function percent(x) {
+  const p = Math.max(0, Math.min(1, x)) * 100;
+  return p.toFixed(2);
+}
+
+function showResult(data) {
+  emptyState.classList.add("hidden");
+  resultCard.classList.remove("hidden");
+
+  predClass.textContent = data.predicted_class || "-";
+  predConf.textContent = (data.confidence !== undefined)
+    ? `${percent(data.confidence)}%`
+    : "-";
+
+  const p = data.confidence ?? 0;
+  confBar.style.width = `${percent(p)}%`;
+  confPct.textContent = `${percent(p)}%`;
+
+  // top-k table
+  topkBody.innerHTML = "";
+  const topk = data.top_k || [];
+  for (const item of topk) {
+    const tr = document.createElement("tr");
+    const td1 = document.createElement("td");
+    const td2 = document.createElement("td");
+    td1.textContent = item.label ?? "-";
+    td2.textContent = (item.confidence !== undefined)
+      ? `${percent(item.confidence)}%`
+      : "-";
+    tr.appendChild(td1);
+    tr.appendChild(td2);
+    topkBody.appendChild(tr);
+  }
+
+  // raw json (toggle)
+  rawJson.textContent = JSON.stringify(data, null, 2);
+}
+
+function resetResult() {
+  resultCard.classList.add("hidden");
+  emptyState.classList.remove("hidden");
+  rawJson.classList.add("hidden");
+  detailsOpen = false;
+  toggleDetails.textContent = "Detayları Göster";
+}
+
 fileInput.addEventListener("change", () => {
   const f = fileInput.files?.[0];
-  if (!f) return;
-  preview.src = URL.createObjectURL(f);
-  statusEl.textContent = "";
-  out.textContent = "{}";
-});
+  selectedFile = f || null;
+  predictBtn.disabled = !selectedFile;
 
-btn.addEventListener("click", async () => {
-  const f = fileInput.files?.[0];
-  if (!f) {
-    statusEl.textContent = "Lütfen bir görsel seçin.";
+  resetResult();
+  setStatus("");
+
+  if (!selectedFile) {
+    previewImg.src = "";
+    previewImg.style.display = "none";
+    previewPlaceholder.style.display = "block";
     return;
   }
 
-  statusEl.textContent = "Yükleniyor...";
-  out.textContent = "{}";
+  const url = URL.createObjectURL(selectedFile);
+  previewImg.src = url;
+  previewImg.onload = () => URL.revokeObjectURL(url);
+  previewImg.style.display = "block";
+  previewPlaceholder.style.display = "none";
+});
 
-  const fd = new FormData();
-  fd.append("file", f);
+toggleDetails.addEventListener("click", () => {
+  detailsOpen = !detailsOpen;
+  if (detailsOpen) {
+    rawJson.classList.remove("hidden");
+    toggleDetails.textContent = "Detayları Gizle";
+  } else {
+    rawJson.classList.add("hidden");
+    toggleDetails.textContent = "Detayları Göster";
+  }
+});
+
+predictBtn.addEventListener("click", async () => {
+  if (!selectedFile) return;
+
+  setStatus("Tahmin yapılıyor...", "loading");
+  predictBtn.disabled = true;
 
   try {
-    const res = await fetch("/predict", { method: "POST", body: fd });
+    const form = new FormData();
+    form.append("file", selectedFile);
+
+    const res = await fetch("/predict", {
+      method: "POST",
+      body: form
+    });
+
+    if (!res.ok) {
+      const txt = await res.text();
+      throw new Error(`API error (${res.status}): ${txt}`);
+    }
+
     const data = await res.json();
-    if (!res.ok) throw new Error(data?.detail || "Request failed");
-    out.textContent = JSON.stringify(data, null, 2);
-    statusEl.textContent = "Tamam.";
-  } catch (e) {
-    statusEl.textContent = "Hata: " + e.message;
+    showResult(data);
+    setStatus("Tamam.", "ok");
+  } catch (err) {
+    console.error(err);
+    setStatus("Hata: " + (err?.message || "Bilinmeyen hata"), "err");
+    resetResult();
+  } finally {
+    predictBtn.disabled = false;
   }
 });