Update index.html

index.html

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>SQL Console Demos</title>
         <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/duckdb/0.10.1/duckdb.min.js"></script>
         <style>
             body {
                 font-family: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
@@ -25,6 +26,22 @@
                 color: #111827;
             }
             
+            .summary {
+                text-align: center;
+                margin-bottom: 2rem;
+                padding: 1rem;
+                background: white;
+                border-radius: 12px;
+                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+                border: 1px solid #e5e7eb;
+            }
+            
+            .summary p {
+                font-size: 1.1rem;
+                color: #374151;
+                margin: 0;
+            }
+            
             .grid {
                 display: flex;
                 flex-direction: column;
@@ -74,6 +91,10 @@
             <header class="header">
                 <h1>Leaderboards</h1>
             </header>
+
+            <div class="summary" id="total-annotations">
+                <p>Loading total annotations...</p>
+            </div>
             
             <div class="grid">
                 <div class="card">
@@ -99,5 +120,37 @@
                 </div>
             </div>
         </div>
+
+        <script>
+            async function initDuckDB() {
+                const JSDELIVR_BUNDLES = "https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm/dist";
+                const DUCKDB_BUNDLES = {
+                    mvp: {
+                        mainModule: JSDELIVR_BUNDLES + "/duckdb-mvp.wasm",
+                        mainWorker: JSDELIVR_BUNDLES + "/duckdb-browser-mvp.worker.js",
+                    },
+                };
+
+                const db = await duckdb.createWorker(DUCKDB_BUNDLES);
+                
+                try {
+                    const result = await db.query(`
+                        SELECT SUM(submitted) as total_annotations
+                        FROM 'hf://datasets/davanstrien/progress@~parquet/train/*.parquet'
+                    `);
+                    
+                    const totalAnnotations = result[0].total_annotations;
+                    document.getElementById('total-annotations').innerHTML = 
+                        `<p>Total annotations submitted: <strong>${totalAnnotations.toLocaleString()}</strong></p>`;
+                    
+                } catch (error) {
+                    console.error('Error:', error);
+                    document.getElementById('total-annotations').innerHTML = 
+                        '<p>Error loading total annotations</p>';
+                }
+            }
+
+            initDuckDB();
+        </script>
     </body>
 </html>