Frontend Finalization

frontend/app/downloads/page.tsx

@@ -246,7 +246,8 @@ export default function DownloadsPage() {
           Pretrained Model Weights
         </h2>
         <div className="neu-card" style={{ overflow: "hidden" }}>
-          <table style={{ width: "100%", borderCollapse: "collapse" }}>
+          <div style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
+          <table style={{ width: "100%", borderCollapse: "collapse", minWidth: "520px" }}>
             <thead>
               <tr style={{ borderBottom: "1px solid rgba(0,0,0,0.06)" }}>
                 <th style={{ padding: "12px 20px", fontSize: "0.7rem", fontWeight: 700, color: "#94a3b8", textAlign: "left", letterSpacing: "0.1em" }}>MODEL</th>
@@ -281,6 +282,7 @@ export default function DownloadsPage() {
               ))}
             </tbody>
           </table>
+          </div>
         </div>
       </div>
 

frontend/app/globals.css

@@ -215,7 +215,7 @@ a { color: inherit; text-decoration: none; }
 
 /* ===== ANIMATIONS ===== */
 @keyframes fadeInUp {
-  from { opacity: 0; transform: translateY(24px); }
+  from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
 }
 @keyframes fadeIn {
@@ -227,30 +227,58 @@ a { color: inherit; text-decoration: none; }
   to { opacity: 1; transform: translateX(0); }
 }
 @keyframes scaleIn {
-  from { opacity: 0; transform: scale(0.95); }
+  from { opacity: 0; transform: scale(0.97); }
   to { opacity: 1; transform: scale(1); }
 }
 
 .anim-fade-up {
-  animation: fadeInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 .anim-fade-in {
-  animation: fadeIn 0.4s ease both;
+  animation: fadeIn 0.5s ease both;
 }
 .anim-slide-right {
-  animation: slideInRight 0.4s ease both;
+  animation: slideInRight 0.5s ease both;
 }
 .anim-scale-in {
-  animation: scaleIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
 }
 
 /* Stagger delays */
-.delay-1 { animation-delay: 0.05s; }
-.delay-2 { animation-delay: 0.1s; }
-.delay-3 { animation-delay: 0.15s; }
-.delay-4 { animation-delay: 0.2s; }
-.delay-5 { animation-delay: 0.25s; }
-.delay-6 { animation-delay: 0.3s; }
+.delay-1 { animation-delay: 0.08s; }
+.delay-2 { animation-delay: 0.16s; }
+.delay-3 { animation-delay: 0.24s; }
+.delay-4 { animation-delay: 0.32s; }
+.delay-5 { animation-delay: 0.4s; }
+.delay-6 { animation-delay: 0.48s; }
+
+/* Expand / Collapse transitions */
+.expand-enter {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              opacity 0.4s ease,
+              padding 0.4s ease,
+              margin 0.4s ease;
+}
+.expand-enter-active {
+  max-height: 200px;
+  opacity: 1;
+}
+.expand-collapse {
+  max-height: 200px;
+  opacity: 1;
+  overflow: hidden;
+  transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              opacity 0.4s ease,
+              padding 0.4s ease,
+              margin 0.4s ease;
+}
+.expand-collapse.collapsing {
+  max-height: 0;
+  opacity: 0;
+}
 
 /* ===== RESPONSIVE ===== */
 @media (max-width: 768px) {

frontend/app/live/page.tsx

@@ -13,6 +13,7 @@ export default function LivePage() {
   const [camActive, setCamActive] = useState(false);
   const [camSupported, setCamSupported] = useState(true);
   const [lock, setLock] = useState(false);
+  const [lockTarget, setLockTarget] = useState("");
   const [mounted, setMounted] = useState(false);
 
   const imgRef = useRef<HTMLImageElement>(null);
@@ -32,7 +33,7 @@ export default function LivePage() {
       fd.append("file", file);
       fd.append("mode", lock ? "combined" : "open_vocabulary");
       fd.append("vocabulary", "person, cup, laptop, phone, bottle");
-      if (lock) fd.append("lock_target", "person");
+      if (lock && lockTarget.trim()) fd.append("lock_target", lockTarget.trim());
       const r = await fetch("/backend-api/detect", { method: "POST", body: fd });
       if (!r.ok) throw new Error(`HTTP ${r.status}`);
       const d = await r.json();
@@ -196,47 +197,66 @@ export default function LivePage() {
       )}
 
       {/* Lock mode toggle */}
-      <div className={`anim-fade-up delay-3 neu-card`} style={{ padding: "16px 24px", display: "flex", alignItems: "center", gap: "16px", marginBottom: "24px" }}>
-        <div
-          onClick={() => setLock(!lock)}
-          style={{
-            width: "44px",
-            height: "24px",
-            borderRadius: "12px",
-            background: lock ? "#1E90FF" : "#cbd5e1",
-            cursor: "pointer",
-            position: "relative",
-            transition: "background 0.3s ease",
-            flexShrink: 0,
-          }}
-        >
+      <div className={`anim-fade-up delay-3 neu-card`} style={{ padding: "20px 24px", marginBottom: "24px" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "16px", marginBottom: lock ? "16px" : 0 }}>
           <div
+            onClick={() => setLock(!lock)}
             style={{
-              position: "absolute",
-              top: "2px",
-              left: lock ? "22px" : "2px",
-              width: "20px",
-              height: "20px",
-              borderRadius: "50%",
-              background: "#fff",
-              boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
-              transition: "left 0.3s ease",
+              width: "44px",
+              height: "24px",
+              borderRadius: "12px",
+              background: lock ? "#1E90FF" : "#cbd5e1",
+              cursor: "pointer",
+              position: "relative",
+              transition: "background 0.3s ease",
+              flexShrink: 0,
             }}
-          />
-        </div>
-        <div>
-          <p style={{ fontWeight: 700, fontSize: "0.85rem", color: "#1a202c" }}>
-            Lock Mode {lock ? "ON" : "OFF"}
-          </p>
-          <p style={{ fontSize: "0.75rem", color: "#64748b" }}>
-            {lock ? "Using combined pipeline with target lock" : "Standard multi-pipeline detection"}
-          </p>
+          >
+            <div
+              style={{
+                position: "absolute",
+                top: "2px",
+                left: lock ? "22px" : "2px",
+                width: "20px",
+                height: "20px",
+                borderRadius: "50%",
+                background: "#fff",
+                boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
+                transition: "left 0.3s ease",
+              }}
+            />
+          </div>
+          <div>
+            <p style={{ fontWeight: 700, fontSize: "0.85rem", color: "#1a202c" }}>
+              Lock Mode {lock ? "ON" : "OFF"}
+            </p>
+            <p style={{ fontSize: "0.75rem", color: "#64748b" }}>
+              {lock ? "Using combined pipeline with target lock" : "Standard multi-pipeline detection"}
+            </p>
+          </div>
         </div>
+
+        {lock && (
+          <div style={{ overflow: "hidden", transition: "all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94)" }}>
+            <div style={{ paddingBottom: "4px" }}>
+              <label style={{ display: "block", fontSize: "0.75rem", fontWeight: 700, color: "#64748b", marginBottom: "6px", letterSpacing: "0.05em" }}>LOCK TARGET</label>
+              <input
+                className="neu-input"
+                placeholder="e.g. cup, laptop, my coffee cup, blue screwdriver"
+                value={lockTarget}
+                onChange={(e) => setLockTarget(e.target.value)}
+              />
+              <p style={{ fontSize: "0.7rem", color: "#94a3b8", marginTop: "6px" }}>
+                Enter the object name to track. Works with both known classes (80 COCO) and your custom trained objects.
+              </p>
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Result */}
       {(result || dets.length > 0) && (
-        <div className="anim-scale-in" style={{ marginBottom: "32px" }}>
+        <div style={{ animation: "scaleIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both", marginBottom: "32px" }}>
           <div className="neu-card" style={{ padding: "24px" }}>
             <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
               <h3 style={{ fontSize: "1rem", fontWeight: 700, color: "#1a202c" }}>Detection Results</h3>
@@ -255,9 +275,8 @@ export default function LivePage() {
                   {dets.map((d, i) => (
                     <div
                       key={i}
-                      className="anim-slide-right"
                       style={{
-                        animationDelay: `${i * 0.05}s`,
+                        animation: `slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${i * 0.07}s both`,
                         display: "flex",
                         justifyContent: "space-between",
                         alignItems: "center",

frontend/app/objects/page.tsx

@@ -1,40 +1,59 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 
-type Obj = { id: string; label: string; created_at: string; embedding?: number[] };
+type Obj = { id: string; name: string; category?: string; images?: number; image_count?: number };
 
 export default function ObjectsPage() {
   const [objects, setObjects] = useState<Obj[]>([]);
-  const [label, setLabel] = useState("");
-  const [file, setFile] = useState<File | null>(null);
+  const [name, setName] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
+  const [previews, setPreviews] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
 
   const fetchObjects = async () => {
     try {
       const r = await fetch("/backend-api/objects");
       if (r.ok) {
         const d = await r.json();
-        setObjects(d.objects ?? []);
+        setObjects(d.objects ?? d ?? []);
       }
     } catch { /* offline */ }
   };
 
   useEffect(() => { setMounted(true); fetchObjects(); }, []);
 
+  useEffect(() => {
+    const urls = files.map((f) => URL.createObjectURL(f));
+    setPreviews(urls);
+    return () => urls.forEach((u) => URL.revokeObjectURL(u));
+  }, [files]);
+
+  const handleFiles = (input: FileList | null) => {
+    if (!input) return;
+    const newFiles = Array.from(input).filter((f) => f.type.startsWith("image/"));
+    setFiles((prev) => [...prev, ...newFiles]);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
   const teach = async () => {
-    if (!label.trim() || !file) return;
+    if (!name.trim() || files.length === 0) return;
     setLoading(true);
     try {
       const fd = new FormData();
-      fd.append("label", label.trim());
-      fd.append("file", file);
+      fd.append("name", name.trim());
+      files.forEach((f) => fd.append("files", f));
       const r = await fetch("/backend-api/objects", { method: "POST", body: fd });
       if (r.ok) {
-        setLabel("");
-        setFile(null);
+        setName("");
+        setFiles([]);
+        if (fileRef.current) fileRef.current.value = "";
         await fetchObjects();
       } else {
         const d = await r.json().catch(() => null);
@@ -56,6 +75,8 @@ export default function ObjectsPage() {
     } catch { /* ignore */ }
   };
 
+  const ready = name.trim() && files.length > 0 && !loading;
+
   return (
     <div style={{ maxWidth: "900px", margin: "0 auto", padding: "40px 24px" }}>
       <div className="anim-fade-up" style={{ marginBottom: "32px" }}>
@@ -68,61 +89,126 @@ export default function ObjectsPage() {
       </div>
 
       {/* Teach form */}
-      <div className={`anim-fade-up delay-1 neu-card`} style={{ padding: "32px", marginBottom: "32px" }}>
+      <div className="anim-fade-up delay-1 neu-card" style={{ padding: "32px", marginBottom: "32px" }}>
         <h3 style={{ fontSize: "1rem", fontWeight: 700, color: "#1a202c", marginBottom: "20px", display: "flex", alignItems: "center", gap: "8px" }}>
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1E90FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
           Teach New Object
         </h3>
 
-        <div style={{ display: "grid", gap: "16px", maxWidth: "500px" }}>
+        <div style={{ display: "grid", gap: "16px", maxWidth: "600px" }}>
           <div>
             <label style={{ display: "block", fontSize: "0.75rem", fontWeight: 700, color: "#64748b", marginBottom: "6px", letterSpacing: "0.05em" }}>OBJECT NAME</label>
             <input
               className="neu-input"
               placeholder="e.g. My Cup, Blue Screwdriver, Red Mouse"
-              value={label}
-              onChange={(e) => setLabel(e.target.value)}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
             />
           </div>
 
           <div>
-            <label style={{ display: "block", fontSize: "0.75rem", fontWeight: 700, color: "#64748b", marginBottom: "6px", letterSpacing: "0.05em" }}>REFERENCE IMAGE</label>
+            <label style={{ display: "block", fontSize: "0.75rem", fontWeight: 700, color: "#64748b", marginBottom: "6px", letterSpacing: "0.05em" }}>
+              REFERENCE IMAGES {files.length > 0 && <span style={{ color: "#1E90FF" }}>({files.length} selected)</span>}
+            </label>
             {mounted && (
-              <div className="neu-file-input">
-                <input
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => setFile(e.target.files?.[0] ?? null)}
-                  disabled={loading}
-                />
-                <div className="neu-file-input-label" style={{ justifyContent: "flex-start", gap: "12px" }}>
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1E90FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
-                  {file ? file.name : "Choose Reference Image"}
+              <>
+                <div
+                  className="neu-file-input"
+                  onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+                  onDrop={(e) => { e.preventDefault(); e.stopPropagation(); handleFiles(e.dataTransfer.files); }}
+                >
+                  <input
+                    ref={fileRef}
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    onChange={(e) => { handleFiles(e.target.files); if (fileRef.current) fileRef.current.value = ""; }}
+                    disabled={loading}
+                  />
+                  <div className="neu-file-input-label" style={{ justifyContent: "flex-start", gap: "12px" }}>
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1E90FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
+                    {files.length === 0 ? "Choose Images (multiple supported)" : `${files.length} image${files.length > 1 ? "s" : ""} selected — click to add more`}
+                  </div>
                 </div>
-              </div>
+
+                {/* Image previews */}
+                {files.length > 0 && (
+                  <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", marginTop: "12px" }}>
+                    {previews.map((url, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          position: "relative",
+                          width: "80px",
+                          height: "80px",
+                          borderRadius: "10px",
+                          overflow: "hidden",
+                          boxShadow: "var(--neu-shadow-sm)",
+                          border: "1px solid rgba(30,144,255,0.15)",
+                          animation: "scaleIn 0.25s ease both",
+                          animationDelay: `${i * 0.03}s`,
+                        }}
+                      >
+                        <img
+                          src={url}
+                          alt={`Preview ${i + 1}`}
+                          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                        />
+                        <button
+                          onClick={(e) => { e.preventDefault(); e.stopPropagation(); removeFile(i); }}
+                          style={{
+                            position: "absolute",
+                            top: "3px",
+                            right: "3px",
+                            width: "18px",
+                            height: "18px",
+                            borderRadius: "50%",
+                            background: "rgba(239,68,68,0.85)",
+                            color: "#fff",
+                            border: "none",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: "11px",
+                            lineHeight: 1,
+                            padding: 0,
+                          }}
+                        >
+                          x
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <p style={{ fontSize: "0.7rem", color: "#94a3b8", marginTop: "8px" }}>
+                  More images = better recognition. Add different angles and lighting.
+                </p>
+              </>
             )}
           </div>
 
           <button
             onClick={teach}
-            disabled={!label.trim() || !file || loading}
+            disabled={!ready}
             className="neu-btn-primary"
             style={{
               padding: "14px 28px",
               alignSelf: "flex-start",
-              opacity: !label.trim() || !file || loading ? 0.5 : 1,
-              cursor: !label.trim() || !file || loading ? "not-allowed" : "pointer",
+              opacity: ready ? 1 : 0.5,
+              cursor: ready ? "pointer" : "not-allowed",
             }}
           >
             {loading ? (
               <>
                 <div style={{ width: "16px", height: "16px", border: "2px solid #fff", borderTopColor: "transparent", borderRadius: "50%", animation: "spin 0.8s linear infinite" }} />
-                Processing...
+                Processing {files.length} image{files.length > 1 ? "s" : ""}...
               </>
             ) : (
               <>
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
-                Teach Object
+                Teach Object ({files.length} image{files.length > 1 ? "s" : ""})
               </>
             )}
           </button>
@@ -131,7 +217,7 @@ export default function ObjectsPage() {
       </div>
 
       {/* Saved objects */}
-      <div className={`anim-fade-up delay-2`}>
+      <div className="anim-fade-up delay-2">
         <h3 style={{ fontSize: "1rem", fontWeight: 700, color: "#1a202c", marginBottom: "16px", display: "flex", alignItems: "center", gap: "8px" }}>
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#1E90FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
           Saved Objects
@@ -150,7 +236,7 @@ export default function ObjectsPage() {
               <thead>
                 <tr style={{ borderBottom: "1px solid rgba(0,0,0,0.06)" }}>
                   <th style={{ padding: "12px 20px", fontSize: "0.7rem", fontWeight: 700, color: "#94a3b8", textAlign: "left", letterSpacing: "0.1em" }}>LABEL</th>
-                  <th style={{ padding: "12px 20px", fontSize: "0.7rem", fontWeight: 700, color: "#94a3b8", textAlign: "left", letterSpacing: "0.1em" }}>CREATED</th>
+                  <th style={{ padding: "12px 20px", fontSize: "0.7rem", fontWeight: 700, color: "#94a3b8", textAlign: "left", letterSpacing: "0.1em" }}>IMAGES</th>
                   <th style={{ padding: "12px 20px", fontSize: "0.7rem", fontWeight: 700, color: "#94a3b8", textAlign: "right", letterSpacing: "0.1em" }}>ACTIONS</th>
                 </tr>
               </thead>
@@ -164,10 +250,13 @@ export default function ObjectsPage() {
                     onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
                   >
                     <td style={{ padding: "14px 20px" }}>
-                      <span style={{ fontWeight: 700, color: "#1a202c", fontSize: "0.9rem" }}>{obj.label}</span>
+                      <span style={{ fontWeight: 700, color: "#1a202c", fontSize: "0.9rem" }}>{obj.name}</span>
+                      {obj.category && obj.category !== "custom" && (
+                        <span style={{ marginLeft: "8px", fontSize: "0.65rem", color: "#1E90FF", background: "rgba(30,144,255,0.08)", padding: "2px 8px", borderRadius: "9999px" }}>{obj.category}</span>
+                      )}
                     </td>
                     <td style={{ padding: "14px 20px", color: "#94a3b8", fontSize: "0.8rem" }}>
-                      {obj.created_at ? new Date(obj.created_at).toLocaleDateString() : "—"}
+                      {obj.image_count ?? obj.images ?? 0} image{((obj.image_count ?? obj.images ?? 0)) !== 1 ? "s" : ""}
                     </td>
                     <td style={{ padding: "14px 20px", textAlign: "right" }}>
                       <button