Spaces:

Egrigor
/

visionvortex-watcher

Running

App Files Files Community

Egrigor commited on Dec 13, 2025

Commit

02d9f37

verified ·

1 Parent(s): 90d5f17

Enhance the way the current html displays detections. move detections to one side of the video display. move biome display there as well. maintain all other logic.

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +151 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Visionvortex Watcher
-emoji: 👁
-colorFrom: green
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: VisionVortex Watcher 👁️🌀
+colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,151 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>YOLO Webcam + Chat</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body class="bg-dark text-white">
+<div class="container py-4">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h4>Welcome, {{ username }}</h4>
+        <a href="/logout" class="btn btn-outline-light btn-sm">Logout</a>
+    </div>
+    <div class="row">
+        <!-- Webcam Column -->
+        <div class="col-md-8 mb-4">
+            <div class="text-center">
+                <h5>Live Webcam</h5>
+                <img src="{{ url_for('video_feed') }}" class="img-fluid rounded" style="max-height: 360px;">
+            </div>
+        </div>
+        <!-- Detections Column -->
+        <div class="col-md-4 mb-4">
+            <div class="sticky-top" style="top: 20px;">
+                <!-- Biome Display -->
+                <div class="mb-3 p-2 bg-info bg-opacity-25 rounded text-center">
+                    <strong>Current Biome:</strong> <span id="current-biome">Loading...</span>
+                </div>
+                <!-- Detection Timeline -->
+                <div class="mb-4">
+                    <h5>Detection Highlights</h5>
+                    <div id="categorized-timeline" class="bg-secondary rounded p-3" style="max-height: 500px; overflow-y: auto;">
+                        <p class="text-muted">Loading detection events...</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Group Chat - Full width below -->
+    <div class="mb-4">
+<h5>Group Chat</h5>
+        <div id="chatbox" class="bg-secondary rounded p-3 mb-3" style="height: 300px; overflow-y: scroll;"></div>
+        <div class="input-group">
+            <input id="message" class="form-control" placeholder="Type a message...">
+            <button class="btn btn-primary" onclick="sendMessage()">Send</button>
+        </div>
+    </div>
+</div>
+<script>
+// === Chat Functions ===
+function loadChat() {
+    $.get("/chat", function(data) {
+        let html = "";
+        data.forEach(msg => {
+            html += `<p><strong>${msg.user}</strong>: ${msg.message}<br><small class="text-muted">${msg.timestamp}</small></p>`;
+        });
+        $("#chatbox").html(html).scrollTop(9999);
+    });
+}
+function sendMessage() {
+    $.post("/chat", {message: $("#message").val()}, function() {
+        $("#message").val("");
+        loadChat();
+    });
+}
+// === Detection Timeline (Categorized) ===
+function loadTimeline() {
+    $.get("/detections", function(response) {
+        // Update current biome
+        const biome = response.current_biome || "Unknown";
+        // Format biome name: "biome-meadows" → "Meadows"
+        const formattedBiome = biome
+            .replace(/^biome-/, '')
+            .replace(/-/g, ' ')
+            .replace(/\b\w/g, l => l.toUpperCase());
+        $("#current-biome").text(formattedBiome);
+        // Render categorized events
+        const grouped = response.events || {};
+        const categoryTitles = {
+            "status": "Active Status Effects",
+            "recent_buff": "Recent Consumables",
+            "boss_ability": "Boss Powers",
+            "boss_health": "Boss Health",
+            "creature": "Creatures Nearby",
+            "crafting": "Crafting Stations",
+            "plant": "Plants & Crops",
+            "storage": "Storage",
+            "vehicle": "Vehicles",
+            "world": "World Events",
+            "other": "Other"
+        };
+        const renderOrder = [
+            "status", "recent_buff", "boss_ability", "boss_health",
+            "creature", "crafting", "plant", "storage", "vehicle", "world", "other"
+        ];
+        let html = "";
+        let hasContent = false;
+        renderOrder.forEach(cat => {
+            const events = grouped[cat];
+            if (events && events.length > 0) {
+                hasContent = true;
+                const title = categoryTitles[cat] || cat.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                html += `<h6 class="mt-3">${title}</h6><div class="ps-2">`;
+                events.forEach(e => {
+                    const conf = (e.confidence * 100).toFixed(0);
+                    let badgeColor = "secondary";
+                    if (cat === "status") badgeColor = "warning";
+                    else if (cat === "boss_health") badgeColor = "danger";
+                    else if (cat === "creature") badgeColor = "success";
+                    else if (cat === "recent_buff") badgeColor = "primary";
+                    else if (cat === "boss_ability") badgeColor = "dark";
+                    else if (cat === "world") badgeColor = "info";
+                    html += `<p class="mb-1"><span class="badge bg-${badgeColor}">${e.class}</span> ${conf}%</p>`;
+                });
+                html += `</div>`;
+            }
+        });
+        $("#categorized-timeline").html(
+            hasContent ? html : "<p class='text-muted'>No active detections.</p>"
+        );
+    }).fail(() => {
+        $("#current-biome").text("Offline");
+        $("#categorized-timeline").html("<p class='text-muted'>Failed to load detections.</p>");
+    });
+}
+// === Polling ===
+setInterval(loadChat, 3000);
+setInterval(loadTimeline, 2000);
+// Initial loads
+loadChat();
+loadTimeline();
+</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>