Update app.py

app.py

@@ -1,7 +1,3 @@
-# app.py
-# FINAL VERSION — No OpenCV. Works on Hugging Face Spaces.
-# Dark theme + Glassmorphism + React autoplay preview
-# Just upload this + best_model.pth
 
 import os
 import subprocess
@@ -12,6 +8,7 @@ from PIL import Image
 import gradio as gr
 import tempfile
 import base64
+import numpy as np
 
 SEQUENCE_LENGTH = 16
 NUM_CLASSES = 4
@@ -46,7 +43,7 @@ class CNNLSTM(nn.Module):
 # ------------------ LOAD MODEL ------------------
 def load_model():
     if not os.path.exists(MODEL_PATH):
-        raise FileNotFoundError("Upload best_model.pth to the repository.")
+        raise FileNotFoundError("Upload best_model.pth to the Space!")
     model = CNNLSTM(NUM_CLASSES).to(device)
     model.load_state_dict(torch.load(MODEL_PATH, map_location=device))
     model.eval()
@@ -57,44 +54,33 @@ try:
 except:
     model = None
 
-
 # ------------------ FRAME EXTRACTION (FFmpeg) ------------------
 def extract_frames_ffmpeg(video_path):
-    """
-    Extract 16 evenly spaced frames using FFmpeg (preinstalled on Hugging Face Spaces).
-    Returns list[PIL.Image].
-    """
-
     tmp_dir = tempfile.mkdtemp()
+    out_pattern = os.path.join(tmp_dir, "frame_%03d.jpg")
 
     cmd = [
         "ffmpeg",
         "-i", video_path,
-        "-vf", f"fps=1,scale=320:180",
-        os.path.join(tmp_dir, "frame_%03d.jpg"),
+        "-vf", "fps=1,scale=320:180",
+        out_pattern,
         "-hide_banner",
         "-loglevel", "error"
     ]
-
     subprocess.run(cmd)
 
-    frames = sorted([os.path.join(tmp_dir, f) for f in os.listdir(tmp_dir) if f.endswith(".jpg")])
+    jpgs = sorted([os.path.join(tmp_dir, f) for f in os.listdir(tmp_dir) if f.endswith(".jpg")])
 
-    if len(frames) == 0:
+    if len(jpgs) == 0:
         return None
 
-    # sample exactly 16 frames evenly
-    if len(frames) >= SEQUENCE_LENGTH:
-        import numpy as np
-        idxs = np.linspace(0, len(frames)-1, SEQUENCE_LENGTH).astype(int)
-        frames = [frames[i] for i in idxs]
+    if len(jpgs) >= SEQUENCE_LENGTH:
+        idxs = np.linspace(0, len(jpgs)-1, SEQUENCE_LENGTH).astype(int)
+        jpgs = [jpgs[i] for i in idxs]
     else:
-        # repeat frames
-        frames = (frames * 16)[:16]
-
-    pil_frames = [Image.open(f).convert("RGB") for f in frames]
-    return pil_frames
+        jpgs = (jpgs * SEQUENCE_LENGTH)[:SEQUENCE_LENGTH]
 
+    return [Image.open(f).convert("RGB") for f in jpgs]
 
 # ------------------ PREDICTION ------------------
 transform = transforms.Compose([
@@ -102,15 +88,15 @@ transform = transforms.Compose([
     transforms.ToTensor(),
 ])
 
-def run_prediction(frames):
+def do_predict(frames):
     if model is None:
-        return {"Error": "Model not loaded."}
+        return {"Error": "Model not loaded"}
 
     tensors = [transform(f) for f in frames]
-    video_tensor = torch.stack(tensors).unsqueeze(0).to(device)
+    tensor = torch.stack(tensors).unsqueeze(0).to(device)
 
     with torch.no_grad():
-        out = model(video_tensor)
+        out = model(tensor)
 
     probs = torch.softmax(out, dim=1)[0].cpu().numpy()
 
@@ -118,50 +104,54 @@ def run_prediction(frames):
 
 def predict(files):
     if files is None:
-        return {"Error": "Upload a file."}
+        return {"Error": "Upload a file first!"}
 
-    # Normalize file list
     if isinstance(files, str):
         files = [files]
 
-    # CASE 1: video
+    # Video
     if len(files) == 1 and files[0].lower().endswith((".mp4",".mov",".avi",".mkv",".webm")):
         frames = extract_frames_ffmpeg(files[0])
         if frames is None:
-            return {"Error": "Unable to extract frames from video."}
-        return run_prediction(frames)
+            return {"Error": "FFmpeg could not extract frames!"}
+        return do_predict(frames)
 
-    # CASE 2: multiple images
-    if len(files) >= 16:
-        frames = [Image.open(f).convert("RGB") for f in files[:16]]
-        return run_prediction(frames)
+    # Multiple images
+    if len(files) >= SEQUENCE_LENGTH:
+        imgs = [Image.open(f).convert("RGB") for f in files[:16]]
+        return do_predict(imgs)
 
-    # CASE 3: single image
+    # Single image
     try:
         img = Image.open(files[0]).convert("RGB")
-        frames = [img] * 16
-        return run_prediction(frames)
+        frames = [img] * SEQUENCE_LENGTH
+        return do_predict(frames)
     except:
-        return {"Error": "Invalid image."}
-
-
-# ------------------ UI & React ------------------
-css = """
-body, .gradio-container { background: #0b0f12 !important; color: white !important; }
+        return {"Error": "Invalid image"}
+
+# ------------------ CSS (insert via HTML) ------------------
+css_html = """
+<style>
+body, .gradio-container {
+  background: #0b0f12 !important;
+  color: white !important;
+}
 .glass {
-    backdrop-filter: blur(12px) saturate(180%);
-    background: rgba(255,255,255,0.06);
-    border-radius: 16px;
-    padding: 20px;
-    border: 1px solid rgba(255,255,255,0.08);
-    box-shadow: 0 4px 40px rgba(0,0,0,0.4);
+  backdrop-filter: blur(12px) saturate(180%);
+  background: rgba(255,255,255,0.06);
+  border-radius: 16px;
+  padding: 20px;
+  border: 1px solid rgba(255,255,255,0.08);
+  box-shadow: 0 4px 40px rgba(0,0,0,0.4);
 }
+</style>
 """
 
+# ------------------ REACT FRONTEND ------------------
 react_html = """
 <div class="glass">
-  <h1 style="margin:0; font-size:28px;">Crowd Behavior Analyzer</h1>
-  <p style="opacity:0.7;">React Preview • Dark • Glassmorphism • Autoplay Frames</p>
+  <h1 style="margin:0;font-size:28px;">Crowd Behavior Analyzer</h1>
+  <p style="opacity:0.7;">Dark • Glassmorphism • React Autoplay Preview</p>
   <div id="react-root"></div>
 </div>
 
@@ -173,47 +163,41 @@ const e = React.createElement;
 
 function App(){
   const [frames,setFrames] = React.useState([]);
-  const [index,setIndex] = React.useState(0);
+  const [i,setI] = React.useState(0);
 
   React.useEffect(()=>{
-    const fileInput = document.getElementById("media_input");
-    if(!fileInput) return;
-
-    const handle = (evt)=>{
-      const files = fileInput.files;
-      if(!files || files.length === 0) return;
-
-      // images only for UI preview
-      const readers = [...files].slice(0,16).map(file => {
-        return new Promise((res)=>{
-          const r = new FileReader();
-          r.onload = ()=>res(r.result);
-          r.readAsDataURL(file);
+    const inp = document.getElementById("media_input");
+    if(!inp) return;
+    inp.addEventListener("change",() =>{
+      const files = inp.files;
+      if(!files || !files.length) return;
+
+      const picks = [...files].slice(0,16).map(f => {
+        return new Promise(res=>{
+          const r=new FileReader();
+          r.onload=()=>res(r.result);
+          r.readAsDataURL(f);
         });
       });
 
-      Promise.all(readers).then(imgs=>{
-        if(imgs.length === 0) return;
-        while(imgs.length < 16) imgs.push(imgs[0]);
-        setFrames(imgs.slice(0,16));
-        setIndex(0);
+      Promise.all(picks).then(data=>{
+        while(data.length < 16) data.push(data[0]);
+        setFrames(data);
+        setI(0);
       });
-    };
-
-    fileInput.addEventListener("change",handle);
-    return ()=>fileInput.removeEventListener("change",handle);
+    });
   },[]);
 
   React.useEffect(()=>{
-    if(frames.length === 0) return;
-    const t = setInterval(()=>setIndex(i=>(i+1)%frames.length),350);
+    if(!frames.length) return;
+    const t=setInterval(()=>setI(x=>(x+1)%frames.length),300);
     return ()=>clearInterval(t);
   },[frames]);
 
   return e("div",{},
-    frames.length 
-      ? e("img",{src:frames[index], style:{width:"100%",borderRadius:"12px"}})
-      : e("p",{style:{opacity:0.6}},"Preview will appear here after upload.")
+    frames.length
+      ? e("img",{src:frames[i],style:{width:"100%",borderRadius:"12px"}})
+      : e("p",{style:{opacity:0.5}},"Preview will appear here after upload.")
   );
 }
 
@@ -221,21 +205,21 @@ ReactDOM.createRoot(document.getElementById("react-root")).render(e(App));
 </script>
 """
 
-with gr.Blocks(css=css) as demo:
-
+# ------------------ UI ------------------
+with gr.Blocks() as demo:
+    gr.HTML(css_html)
     gr.HTML(react_html)
 
     file_input = gr.File(
-        label="Upload Video or Images",
+        label="Upload video or multiple images",
         file_count="multiple",
         type="filepath",
         elem_id="media_input"
     )
 
-    btn = gr.Button("Analyze Behavior", variant="primary")
-
+    btn = gr.Button("Analyze", variant="primary")
     output = gr.Label(num_top_classes=4)
 
-    btn.click(fn=predict, inputs=file_input, outputs=output)
+    btn.click(predict, file_input, output)
 
 demo.launch()