Create app.py

app.py

@@ -0,0 +1,218 @@
+import gradio as gr
+import numpy as np
+import cv2
+import plotly.graph_objects as go
+from sklearn.decomposition import PCA
+from sklearn.metrics.pairwise import cosine_distances
+
+# ===============================
+# FACE & EMBEDDING UTILITIES
+# ===============================
+
+face_cascade = cv2.CascadeClassifier(
+    cv2.data.haarcascades + "haarcascade_frontalface_default.xml"
+)
+
+def detect_face(image):
+    if image is None:
+        return None, None
+
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    faces = face_cascade.detectMultiScale(gray, 1.3, 5)
+
+    if len(faces) == 0:
+        return image, None
+
+    (x, y, w, h) = faces[0]
+    cv2.rectangle(image, (x, y), (x+w, y+h), (0,255,0), 2)
+    face = gray[y:y+h, x:x+w]
+    face = cv2.resize(face, (64,64))
+    return image, face.flatten()
+
+def face_to_embedding(face_vector):
+    np.random.seed(0)
+    projection = np.random.randn(face_vector.shape[0], 128)
+    embedding = face_vector @ projection
+    embedding = embedding / np.linalg.norm(embedding)
+    return embedding
+
+# ===============================
+# VISUALIZATION HELPERS
+# ===============================
+
+def embedding_plot(embedding, title):
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(
+        y=embedding[:50],
+        mode="lines+markers"
+    ))
+    fig.update_layout(
+        title=title,
+        height=300,
+        xaxis_title="Dimension",
+        yaxis_title="Value"
+    )
+    return fig
+
+def embedding_3d_plot(embeddings, labels):
+    pca = PCA(n_components=3)
+    reduced = pca.fit_transform(embeddings)
+
+    fig = go.Figure()
+    for i, label in enumerate(labels):
+        fig.add_trace(go.Scatter3d(
+            x=[reduced[i,0]],
+            y=[reduced[i,1]],
+            z=[reduced[i,2]],
+            mode="markers+text",
+            text=[label],
+            marker=dict(size=6)
+        ))
+
+    fig.update_layout(
+        title="3D Face Embedding Space",
+        height=450
+    )
+    return fig
+
+# ===============================
+# TAB LOGIC FUNCTIONS
+# ===============================
+
+def enroll_face(image):
+    img, face = detect_face(image)
+    if face is None:
+        return img, None, "❌ No face detected"
+
+    emb = face_to_embedding(face)
+    return img, emb, "✅ Face enrolled successfully"
+
+def verify_face(image, stored_embedding, threshold):
+    img, face = detect_face(image)
+    if face is None or stored_embedding is None:
+        return img, "❌ Face / Enrollment missing", None
+
+    emb = face_to_embedding(face)
+    distance = cosine_distances([stored_embedding], [emb])[0][0]
+
+    status = "🔓 UNLOCKED" if distance < threshold else "🔒 DENIED"
+
+    fig = go.Figure(go.Indicator(
+        mode="gauge+number",
+        value=distance,
+        gauge={
+            "axis": {"range": [0,1]},
+            "threshold": {
+                "line": {"color": "red", "width": 4},
+                "value": threshold
+            }
+        },
+        title={"text": status}
+    ))
+
+    return img, f"Distance: {distance:.3f}", fig
+
+# ===============================
+# TAB NAVIGATION
+# ===============================
+
+def next_tab(t): return min(t+1, 3)
+def prev_tab(t): return max(t-1, 0)
+
+# ===============================
+# GRADIO UI
+# ===============================
+
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🔐 How Face Unlock Works (Visual Simulator)")
+    gr.Markdown("Understand mobile face authentication step-by-step")
+
+    current_tab = gr.State(0)
+
+    with gr.Row():
+        back = gr.Button("⬅ Back")
+        nextb = gr.Button("Next ➡")
+
+    with gr.Tabs() as tabs:
+        # ---------------- TAB 0 ----------------
+        with gr.Tab("📸 Face Detection"):
+            cam1 = gr.Image(source="webcam", streaming=True)
+            out1 = gr.Image()
+            btn1 = gr.Button("Detect Face")
+
+            btn1.click(
+                detect_face,
+                inputs=cam1,
+                outputs=[out1, gr.State()]
+            )
+
+        # ---------------- TAB 1 ----------------
+        with gr.Tab("🧠 Face → Vector"):
+            cam2 = gr.Image(source="webcam")
+            img2 = gr.Image()
+            enroll_msg = gr.Markdown()
+            stored_embedding = gr.State()
+            emb_plot = gr.Plot()
+
+            gr.Button("Enroll Face").click(
+                enroll_face,
+                inputs=cam2,
+                outputs=[img2, stored_embedding, enroll_msg]
+            ).then(
+                lambda e: embedding_plot(e, "Face Embedding"),
+                inputs=stored_embedding,
+                outputs=emb_plot
+            )
+
+        # ---------------- TAB 2 ----------------
+        with gr.Tab("📐 Matching & Threshold"):
+            cam3 = gr.Image(source="webcam")
+            img3 = gr.Image()
+            threshold = gr.Slider(0.1, 0.8, 0.35, label="Unlock Threshold")
+            match_msg = gr.Markdown()
+            gauge = gr.Plot()
+
+            gr.Button("Verify Face").click(
+                verify_face,
+                inputs=[cam3, stored_embedding, threshold],
+                outputs=[img3, match_msg, gauge]
+            )
+
+        # ---------------- TAB 3 ----------------
+        with gr.Tab("🌐 3D Embedding Space"):
+            plot3d = gr.Plot()
+
+            gr.Button("Visualize").click(
+                lambda e: embedding_3d_plot(
+                    np.vstack([e, e + np.random.normal(0,0.05,e.shape)]),
+                    ["Enrolled", "Live"]
+                ),
+                inputs=stored_embedding,
+                outputs=plot3d
+            )
+
+    # ===============================
+    # NAV BUTTON LOGIC (SAFE)
+    # ===============================
+
+    back.click(
+        prev_tab,
+        current_tab,
+        current_tab
+    ).then(
+        lambda i: i,
+        current_tab,
+        tabs
+    )
+
+    nextb.click(
+        next_tab,
+        current_tab,
+        current_tab
+    ).then(
+        lambda i: i,
+        current_tab,
+        tabs
+    )
+
+demo.launch()