Spaces:

broadfield-dev
/

HF-Dataset-Commander

Paused

App Files Files Community

broadfield-dev commited on Dec 30, 2025

Commit

8603196

verified ·

1 Parent(s): 3f98bbe

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +243 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,243 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HF Dataset Command Center</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .json-badge { background-color: #ffc107; color: #000; font-size: 0.8em; padding: 2px 5px; border-radius: 4px; }
+        .box { border: 1px solid #ddd; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
+        pre { background: #f4f4f4; padding: 10px; max-height: 200px; overflow: auto; }
+    </style>
+</head>
+<body class="bg-light">
+<div class="container mt-5">
+    <h1 class="mb-4">🤗 Dataset Command Center</h1>
+    <!-- Step 1: Authentication & Load -->
+    <div class="box bg-white">
+        <h4>1. Source Configuration</h4>
+        <div class="row g-3">
+            <div class="col-md-4">
+                <label>HF Write Token</label>
+                <input type="password" id="token" class="form-control" placeholder="hf_...">
+            </div>
+            <div class="col-md-4">
+                <label>Source Dataset ID</label>
+                <input type="text" id="dataset_id" class="form-control" placeholder="e.g. imalexissa/scikit_learn_metadata">
+            </div>
+            <div class="col-md-2">
+                <label>Split</label>
+                <input type="text" id="split" class="form-control" value="train">
+            </div>
+            <div class="col-md-2 d-flex align-items-end">
+                <button class="btn btn-primary w-100" onclick="inspectDataset()">Inspect</button>
+            </div>
+        </div>
+    </div>
+    <!-- Step 2: Column Analysis -->
+    <div id="inspector-panel" class="box bg-white" style="display:none;">
+        <h4>2. Column Inspector</h4>
+        <p class="text-muted">Detected columns. Check "Expand JSON" to extract keys.</p>
+        <table class="table table-sm" id="col-table">
+            <thead>
+                <tr>
+                    <th>Column</th>
+                    <th>Type</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody id="col-list"></tbody>
+        </table>
+        <div class="mt-3">
+            <h5>Recipe Builder</h5>
+            <div class="row g-2">
+                <div class="col-md-4">
+                    <label>JSON Expand (Col: keys,comma,sep)</label>
+                    <input type="text" id="json-rule" class="form-control" placeholder="meta: url, id">
+                </div>
+                <div class="col-md-4">
+                    <label>Rename (old=new)</label>
+                    <input type="text" id="rename-rule" class="form-control" placeholder="text_body=text">
+                </div>
+                <div class="col-md-4">
+                    <label>Drop Column</label>
+                    <input type="text" id="drop-rule" class="form-control" placeholder="col_name">
+                </div>
+            </div>
+            <div class="mt-2">
+                <label>Filter Expression (Python syntax)</label>
+                <input type="text" id="filter-rule" class="form-control" placeholder="len(text) > 100">
+            </div>
+        </div>
+    </div>
+    <!-- Step 3: Preview -->
+    <div class="box bg-white">
+        <div class="d-flex justify-content-between">
+            <h4>3. Preview & Execute</h4>
+            <button class="btn btn-secondary" onclick="runPreview()">Run Dry Preview</button>
+        </div>
+        <div id="preview-area" class="mt-3"></div>
+        <hr>
+        <div class="row g-3 align-items-end">
+            <div class="col-md-6">
+                <label>Target Dataset ID (to push)</label>
+                <input type="text" id="target_id" class="form-control" placeholder="username/new-dataset-name">
+            </div>
+            <div class="col-md-3">
+                <label>Max Rows (Empty for all)</label>
+                <input type="number" id="max_rows" class="form-control">
+            </div>
+            <div class="col-md-3">
+                <button class="btn btn-success w-100" onclick="executeJob()">🚀 Push to Hub</button>
+            </div>
+        </div>
+        <div id="job-status" class="mt-3 text-info fw-bold"></div>
+    </div>
+</div>
+<script>
+    let currentCols = [];
+    async function inspectDataset() {
+        const btn = document.querySelector('button[onclick="inspectDataset()"]');
+        btn.disabled = true; btn.innerText = "Loading...";
+        const payload = {
+            token: document.getElementById('token').value,
+            dataset_id: document.getElementById('dataset_id').value,
+            split: document.getElementById('split').value
+        };
+        const res = await fetch('/inspect', {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+        if(data.status === 'success') {
+            document.getElementById('inspector-panel').style.display = 'block';
+            const tbody = document.getElementById('col-list');
+            tbody.innerHTML = '';
+            for (const [col, info] of Object.entries(data.analysis)) {
+                let html = `<tr>
+                    <td>${col}</td>
+                    <td>${info.type} ${info.is_json ? '<span class="json-badge">JSON Detected</span>' : ''}</td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-danger" onclick="addDrop('${col}')">Drop</button>
+                    </td>
+                </tr>`;
+                tbody.innerHTML += html;
+            }
+        } else {
+            alert('Error: ' + data.message);
+        }
+        btn.disabled = false; btn.innerText = "Inspect";
+    }
+    function getRecipe() {
+        const jsonRule = document.getElementById('json-rule').value;
+        const renameRule = document.getElementById('rename-rule').value;
+        const dropRule = document.getElementById('drop-rule').value;
+        const filterRule = document.getElementById('filter-rule').value;
+        let recipe = { json_expansions: [], renames: {}, drops: [], filters: [] };
+        // Parse JSON rule: "meta: url, id"
+        if(jsonRule.includes(':')) {
+            let [col, keys] = jsonRule.split(':');
+            recipe.json_expansions.push({
+                col: col.trim(),
+                keys: keys.split(',').map(k => k.trim())
+            });
+        }
+        // Parse Rename: "a=b"
+        if(renameRule.includes('=')) {
+            let [oldC, newC] = renameRule.split('=');
+            recipe.renames[oldC.trim()] = newC.trim();
+        }
+        // Parse Drops
+        if(dropRule) recipe.drops.push(dropRule.trim());
+        // Parse Filters
+        if(filterRule) recipe.filters.push(filterRule.trim());
+        return recipe;
+    }
+    async function runPreview() {
+        const payload = {
+            token: document.getElementById('token').value,
+            dataset_id: document.getElementById('dataset_id').value,
+            split: document.getElementById('split').value,
+            recipe: getRecipe()
+        };
+        const res = await fetch('/preview', {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+        const area = document.getElementById('preview-area');
+        if (data.status === 'success') {
+            area.innerHTML = `<pre>${JSON.stringify(data.rows, null, 2)}</pre>`;
+        } else {
+            area.innerHTML = `<div class="text-danger">${data.message}</div>`;
+        }
+    }
+    async function executeJob() {
+        const payload = {
+            token: document.getElementById('token').value,
+            dataset_id: document.getElementById('dataset_id').value,
+            target_id: document.getElementById('target_id').value,
+            split: document.getElementById('split').value,
+            recipe: getRecipe(),
+            max_rows: document.getElementById('max_rows').value
+        };
+        const res = await fetch('/execute', {
+            method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify(payload)
+        });
+        const data = await res.json();
+        if(data.status === 'started') {
+            pollStatus(data.job_id);
+        }
+    }
+    function pollStatus(jobId) {
+        const statusDiv = document.getElementById('job-status');
+        const interval = setInterval(async () => {
+            const res = await fetch(`/status/${jobId}`);
+            const data = await res.json();
+            if(data.status === 'running') {
+                statusDiv.innerText = "Processing... (This runs in background)";
+            } else if (data.status === 'completed') {
+                statusDiv.innerText = `Success! Pushed ${data.result.rows_processed} rows.`;
+                clearInterval(interval);
+            } else {
+                statusDiv.innerText = `Error: ${data.error}`;
+                clearInterval(interval);
+            }
+        }, 2000);
+    }
+    function addDrop(col) {
+        document.getElementById('drop-rule').value = col;
+    }
+</script>
+</body>
+</html>