fineweb-c-dashboard

Running

App Files Files Community

davanstrien HF Staff commited on Nov 18, 2024

Commit

6c4c663

verified ·

1 Parent(s): 5438efc

Update index.html

Browse files

Files changed (1) hide show

index.html +163 -40

index.html CHANGED Viewed

@@ -1,12 +1,14 @@
-<!doctype html>
 <html>
     <head>
         <meta charset="utf-8" />
         <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://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-browser-blocking.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-browser.js"></script>
         <style>
             body {
                 font-family: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
@@ -76,6 +78,39 @@
                 display: block;
             }
             @media (max-width: 768px) {
                 body {
                     padding: 1rem;
@@ -94,7 +129,8 @@
             </header>
             <div class="summary" id="total-annotations">
-                <p>Loading total annotations...</p>
             </div>
             <div class="grid">
@@ -126,53 +162,140 @@
             // Import DuckDB
             import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm'
-            async function initDuckDB() {
-                try {
-                    // Get the bundle from JSDelivr
-                    const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
-                    // Select a bundle based on browser checks
-                    const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
-                    // Create a worker URL
-                    const worker_url = URL.createObjectURL(
-                        new Blob([`importScripts("${bundle.mainWorker}");`], {type: 'text/javascript'})
-                    );
-                    // Initialize the database
-                    const worker = new Worker(worker_url);
-                    const logger = new duckdb.ConsoleLogger();
-                    const db = new duckdb.AsyncDuckDB(logger, worker);
-                    await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
-                    URL.revokeObjectURL(worker_url);
-                    // Create a connection
-                    const conn = await db.connect();
-                    // Load the httpfs extension for remote file access
-                    await conn.query(`INSTALL httpfs; LOAD httpfs;`);
-                    // Query total annotations
-                    const result = await conn.query(`
-                        SELECT SUM(submitted) as total_annotations
-                        FROM 'https://huggingface.co/datasets/davanstrien/progress/resolve/main/train/train.parquet'
-                    `);
-                    const totalAnnotations = result.get(0).total_annotations;
-                    document.getElementById('total-annotations').innerHTML =
-                        `<p>Total annotations submitted: <strong>${totalAnnotations.toLocaleString()}</strong></p>`;
-                    // Close the connection
-                    await conn.close();
                 } catch (error) {
-                    console.error('Error:', error);
-                    document.getElementById('total-annotations').innerHTML =
-                        `<p>Error loading total annotations: ${error.message}</p>`;
                 }
             }
-            initDuckDB();
         </script>
     </body>
 </html>

+<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Leaderboards</title>
         <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
+        <!-- Load DuckDB WASM bundles -->
         <script src="https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-browser-blocking.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/dist/duckdb-browser.js"></script>
+        <!-- Add loading indicator styles -->
         <style>
             body {
                 font-family: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
                 display: block;
             }
+            /* Loading indicator styles */
+            .loading {
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                border: 3px solid rgba(0,0,0,.1);
+                border-radius: 50%;
+                border-top-color: #3b82f6;
+                animation: spin 1s ease-in-out infinite;
+                margin-right: 10px;
+                vertical-align: middle;
+            }
+            @keyframes spin {
+                to { transform: rotate(360deg); }
+            }
+            .error {
+                color: #dc2626;
+                padding: 1rem;
+                background: #fee2e2;
+                border-radius: 8px;
+                margin: 1rem 0;
+            }
+            .success {
+                color: #059669;
+                padding: 1rem;
+                background: #d1fae5;
+                border-radius: 8px;
+                margin: 1rem 0;
+            }
             @media (max-width: 768px) {
                 body {
                     padding: 1rem;
             </header>
             <div class="summary" id="total-annotations">
+                <div class="loading"></div>
+                <span>Loading total annotations...</span>
             </div>
             <div class="grid">
             // Import DuckDB
             import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/[email protected]/+esm'
+            class DuckDBLoader {
+                constructor() {
+                    this.db = null;
+                    this.conn = null;
+                }
+                async initialize() {
+                    try {
+                        // Get the bundle from JSDelivr
+                        const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+                        // Select a bundle based on browser checks
+                        const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+                        // Create a worker URL
+                        const worker_url = URL.createObjectURL(
+                            new Blob([`importScripts("${bundle.mainWorker}");`], {type: 'text/javascript'})
+                        );
+                        // Initialize the database
+                        const worker = new Worker(worker_url);
+                        const logger = new duckdb.ConsoleLogger();
+                        this.db = new duckdb.AsyncDuckDB(logger, worker);
+                        // Instantiate with error handling
+                        try {
+                            await this.db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+                        } catch (error) {
+                            throw new Error(`DuckDB instantiation failed: ${error.message}`);
+                        }
+                        URL.revokeObjectURL(worker_url);
+                        // Create connection
+                        this.conn = await this.db.connect();
+                        // Initialize extensions
+                        await this.initializeExtensions();
+                        return true;
+                    } catch (error) {
+                        this.handleError('Initialization failed', error);
+                        return false;
+                    }
+                }
+                async initializeExtensions() {
+                    try {
+                        await this.conn.query(`INSTALL httpfs;`);
+                        await this.conn.query(`LOAD httpfs;`);
+                    } catch (error) {
+                        throw new Error(`Failed to initialize extensions: ${error.message}`);
+                    }
+                }
+                async queryTotalAnnotations() {
+                    try {
+                        const result = await this.conn.query(`
+                            SELECT SUM(submitted) as total_annotations
+                            FROM 'https://huggingface.co/datasets/davanstrien/progress/resolve/main/train/train.parquet'
+                        `);
+                        if (!result || !result.get || result.length === 0) {
+                            throw new Error('Query returned no results');
+                        }
+                        const totalAnnotations = result.get(0).total_annotations;
+                        if (totalAnnotations === null || totalAnnotations === undefined) {
+                            throw new Error('No annotation count found in result');
+                        }
+                        return totalAnnotations;
+                    } catch (error) {
+                        throw new Error(`Failed to query annotations: ${error.message}`);
+                    }
+                }
+                handleError(context, error) {
+                    console.error(context, error);
+                    const errorMessage = error.message || 'Unknown error occurred';
+                    const errorDetails = error instanceof WebAssembly.Exception ?
+                        '(WebAssembly Exception)' : '';
+                    document.getElementById('total-annotations').innerHTML = `
+                        <div class="error">
+                            Error: ${context}: ${errorMessage} ${errorDetails}
+                        </div>
+                    `;
+                }
+                async cleanup() {
+                    if (this.conn) {
+                        await this.conn.close();
+                    }
+                    if (this.db) {
+                        await this.db.terminate();
+                    }
+                }
+            }
+            async function initializeApplication() {
+                const loader = new DuckDBLoader();
+                try {
+                    // Initialize DuckDB
+                    const initialized = await loader.initialize();
+                    if (!initialized) {
+                        return;
+                    }
+                    // Query total annotations
+                    const totalAnnotations = await loader.queryTotalAnnotations();
+                    // Update UI with success
+                    document.getElementById('total-annotations').innerHTML = `
+                        <div class="success">
+                            Total annotations submitted: <strong>${totalAnnotations.toLocaleString()}</strong>
+                        </div>
+                    `;
                 } catch (error) {
+                    loader.handleError('Failed to load annotations', error);
+                } finally {
+                    // Cleanup resources
+                    await loader.cleanup();
                 }
             }
+            // Start the application when the DOM is ready
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', initializeApplication);
+            } else {
+                initializeApplication();
+            }
         </script>
     </body>
 </html>