Upload static/index.html with huggingface_hub

static/index.html

@@ -210,6 +210,31 @@
                     </div>
                 </div>
                 <div class="done-banner" id="done-banner">✅ Episode Complete!</div>
+
+                <!-- Submit to leaderboard -->
+                <div id="submit-section" style="display:none;margin-top:12px;">
+                    <div style="font-size:12px;color:#8892b0;margin-bottom:8px;">
+                        🏅 Submit your score to leaderboard:
+                    </div>
+                    <div style="display:flex;gap:8px;">
+                        <input 
+                            id="model-name-input"
+                            type="text" 
+                            placeholder="Your model/name (e.g. gpt-4o-mini)"
+                            style="flex:1;background:#0f1117;border:1px solid #2d3561;
+                                   border-radius:6px;padding:8px 12px;color:#e0e0e0;
+                                   font-size:13px;outline:none;"
+                        />
+                        <button 
+                            onclick="submitToLeaderboard()"
+                            style="background:#2ecc71;color:#000;border:none;
+                                   border-radius:6px;padding:8px 16px;cursor:pointer;
+                                   font-weight:bold;font-size:13px;">
+                            Submit
+                        </button>
+                    </div>
+                    <div id="submit-msg" style="font-size:11px;margin-top:6px;"></div>
+                </div>
             </div>
             <div class="panel">
                 <div class="panel-title">📝 Action Log</div>
@@ -354,6 +379,8 @@
             '<div style="color:#8892b0;font-size:13px;">Reset first to enable actions</div>';
         document.getElementById('shape-badge').textContent = '— reset to load';
         document.getElementById('done-banner').style.display = 'none';
+        document.getElementById('submit-section').style.display = 'none';
+        document.getElementById('submit-msg').textContent = '';
         document.getElementById('message-log').innerHTML =
             '<div class="log-entry info">Ready — click Reset Environment</div>';
     }
@@ -422,6 +449,7 @@
             if (data.done) {
                 episodeDone = true;
                 document.getElementById('done-banner').style.display = 'block';
+                document.getElementById('submit-section').style.display = 'block';
                 addLog('Episode complete! Final score: ' + rew.total.toFixed(4), 'success');
                 updateActions(obs.available_operations, true);
             }
@@ -469,6 +497,7 @@
 
     function updateReward(rew) {
         const total = rew.total || 0;
+        finalReward = total;
         document.getElementById('reward-number').textContent = total.toFixed(4);
         let color = '#e74c3c';
         if (total >= 0.8) color = '#2ecc71';
@@ -498,6 +527,45 @@
         log.scrollTop = log.scrollHeight;
     }
 
+    // Track final reward for submission
+    let finalReward = 0.0;
+
+    async function submitToLeaderboard() {
+        const modelName = document.getElementById('model-name-input').value.trim();
+        if (!modelName) {
+            document.getElementById('submit-msg').style.color = '#e74c3c';
+            document.getElementById('submit-msg').textContent = '❌ Please enter your model/name first!';
+            return;
+        }
+
+        const entry = {
+            model_name: modelName,
+            task_id:    currentTask,
+            score:      finalReward,
+            steps:      stepCount
+        };
+
+        try {
+            const r = await fetch(BASE + '/leaderboard/submit', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(entry)
+            });
+            const data = await r.json();
+            if (data.status === 'submitted') {
+                document.getElementById('submit-msg').style.color = '#2ecc71';
+                document.getElementById('submit-msg').textContent = 
+                    '✅ Score ' + finalReward.toFixed(4) + ' submitted for ' + modelName + '!';
+                addLog('Submitted to leaderboard: ' + modelName + ' = ' + finalReward.toFixed(4), 'success');
+                // Refresh leaderboard
+                setTimeout(loadLeaderboard, 1000);
+            }
+        } catch(e) {
+            document.getElementById('submit-msg').style.color = '#e74c3c';
+            document.getElementById('submit-msg').textContent = '❌ Submit failed: ' + e.message;
+        }
+    }
+
     async function loadLeaderboard() {
         try {
             const r = await fetch(BASE + '/leaderboard');