Hugging Face's logo

Spaces:
TechAvenger
/
GarbageBot
Sleeping

App Files Community
GarbageBot
File size: 7,356 Bytes
ac2a7d9
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GarbageBot — RL Control Center</title>
    <meta name="description" content="Real-time dashboard for the fine-tuned Llama-3.2 garbage collecting robot. Watch Q-learning and LLM policy decisions live.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
    <!-- Use /static/ prefix so FastAPI's StaticFiles middleware serves these correctly
         on HuggingFace Spaces and any other hosted environment. -->
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <!-- Animated background -->
    <div class="bg-orbs">
        <div class="orb orb-1"></div>
        <div class="orb orb-2"></div>
        <div class="orb orb-3"></div>
        <div class="orb orb-4"></div>
    </div>
    <div class="grid-bg"></div>

    <div class="dashboard">

        <!-- ── HEADER ── -->
        <header class="header-bar">
            <div class="brand">
                <div class="brand-icon">🤖</div>
                <div>
                    <h1>GarbageBot <span class="version-tag">v2.0</span></h1>
                    <p class="brand-sub">Llama-3.2-3B · Q-Table · BFS</p>
                </div>
            </div>

            <div class="status-strip">
                <div class="status-pill" id="server-pill">
                    <span class="pulse-dot" id="status-dot"></span>
                    <span id="status-label">Connecting…</span>
                </div>
                <div class="policy-badge" id="policy-badge">
                    <span class="badge-icon">⚡</span>
                    <span id="policy-label">–</span>
                </div>
                <div class="status-pill" id="mode-pill">
                    <span id="mode-label">NORMAL</span>
                </div>
            </div>

            <div class="controls">
                <select id="task-select">
                    <option value="task_easy">🟢 Easy  — 5×5</option>
                    <option value="task_medium">🟡 Medium — 7×7</option>
                    <option value="task_hard">🔴 Hard  — 10×10</option>
                </select>
                <div class="speed-group">
                    <label class="speed-label">Speed</label>
                    <input type="range" id="speed-slider" min="100" max="1500" value="500" step="100">
                    <span id="speed-val">500ms</span>
                </div>
                <button id="reset-btn"  class="btn secondary">↺ Reset</button>
                <button id="auto-btn"   class="btn primary">▶  Run Policy</button>
                <button id="manual-btn" class="btn outline">⏭ Step</button>
            </div>
        </header>

        <!-- ── MAIN ── -->
        <main>

            <!-- Grid world -->
            <section class="grid-panel panel glass">
                <div class="grid-header">
                    <span class="grid-title">Environment</span>
                    <div class="grid-meta">
                        <span id="step-counter" class="mono-chip">Step 0</span>
                        <span id="episode-score-chip" class="mono-chip accent-chip">Score 0.00</span>
                    </div>
                </div>
                <div class="grid-stage" id="grid-stage">
                    <div id="env-grid" class="grid-world">
                        <div id="particle-layer" class="particle-layer"></div>
                    </div>
                </div>
                <p class="grid-hint">💡 Click any empty cell to place or remove garbage</p>
            </section>

            <!-- Side panel -->
            <aside class="side-panel">

                <!-- Telemetry -->
                <div class="panel glass tele-card">
                    <h2 class="section-title">Telemetry</h2>

                    <div class="stat-row">
                        <div class="stat-icon">🔋</div>
                        <div class="stat-body">
                            <div class="stat-label-row">
                                <span class="stat-label">Battery</span>
                                <span id="battery-text" class="stat-num">–</span>
                            </div>
                            <div class="progress-track">
                                <div class="progress-fill" id="battery-progress"></div>
                            </div>
                        </div>
                    </div>

                    <div class="stat-row">
                        <div class="stat-icon">📦</div>
                        <div class="stat-body">
                            <div class="stat-label-row">
                                <span class="stat-label">Storage</span>
                                <span id="storage-text" class="stat-num">–</span>
                            </div>
                            <div class="progress-track">
                                <div class="progress-fill" id="storage-progress" style="width: 0%; background: var(--warning);"></div>
                            </div>
                        </div>
                    </div>

                    <div class="stat-row">
                        <div class="stat-icon">🗑️</div>
                        <div class="stat-body">
                            <div class="stat-label-row">
                                <span class="stat-label">Total Collected</span>
                                <span id="inventory-text" class="stat-num big-num">0</span>
                            </div>
                        </div>
                    </div>

                    <div class="stat-row">
                        <div class="stat-icon">🏆</div>
                        <div class="stat-body">
                            <div class="stat-label-row">
                                <span class="stat-label">Reward</span>
                                <span id="score-text" class="stat-num big-num accent">0.00</span>
                            </div>
                        </div>
                    </div>

                    <!-- Mini reward chart -->
                    <div class="chart-wrap">
                        <canvas id="reward-chart" width="290" height="70"></canvas>
                    </div>
                </div>

                <!-- Policy log -->
                <div class="panel glass log-card">
                    <div class="log-header">
                        <h2 class="section-title">Policy Observations</h2>
                        <button class="clear-btn" id="clear-log">✕ Clear</button>
                    </div>
                    <div id="log-feed" class="log-feed">
                        <p class="placeholder">Awaiting environment reset…</p>
                    </div>
                    <p class="log-footer">🤖 Driven by fine-tuned Llama-3.2-3B</p>
                </div>

            </aside>
        </main>

    </div><!-- /dashboard -->

    <script src="/static/script.js"></script>
</body>
</html>