Spaces:

broadfield-dev
/

HF-Dataset-Commander

Paused

App Files Files Community

broadfield-dev commited on Dec 30, 2025

Commit

f37234a

verified ·

1 Parent(s): 4425935

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +245 -248

templates/index.html CHANGED Viewed

@@ -2,21 +2,25 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>HF Dataset Builder</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body { background-color: #f4f6f8; }
         .box { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 20px; }
-        .source-col-row { cursor: pointer; transition: background 0.1s; }
         .source-col-row:hover { background-color: #e9ecef; }
         .source-col-row.active { background-color: #cfe2ff; font-weight: bold; }
-        pre { background: #212529; color: #adbac7; padding: 15px; border-radius: 6px; font-size: 0.85em; max-height: 250px; overflow: auto; }
-        .step-header { font-size: 0.8em; text-transform: uppercase; letter-spacing: 1px; color: #6c757d; font-weight: 700; margin-bottom: 10px; }
         /* Builder Styles */
-        .builder-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; padding: 10px; border: 1px solid #eee; border-radius: 6px; background: #fff; }
-        .builder-row:hover { border-color: #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }
-        .drag-handle { cursor: grab; color: #adb5bd; padding: 0 5px; }
     </style>
 </head>
 <body>
@@ -24,111 +28,216 @@
 <div class="container-fluid p-4">
     <div class="d-flex justify-content-between align-items-center mb-4">
         <h3>🏗️ Hugging Face Dataset Architect</h3>
-        <div class="d-flex gap-2">
-             <input type="password" id="token" class="form-control form-control-sm" placeholder="HF Write Token" style="width: 200px;">
-        </div>
     </div>
-    <!-- 1. SOURCE CONFIG -->
     <div class="box">
-        <div class="step-header">1. Connect Data Source</div>
         <div class="row g-2">
-            <div class="col-md-5">
                 <div class="input-group">
-                    <input type="text" id="dataset_id" class="form-control" placeholder="Source Repo ID (e.g. the_stack)">
                     <button class="btn btn-primary" onclick="loadMetadata()">Connect</button>
                 </div>
             </div>
-            <div class="col-md-2">
-                <select id="config_select" class="form-select" onchange="updateSplits()" disabled><option>Config...</option></select>
-            </div>
-            <div class="col-md-2">
-                <select id="split_select" class="form-select" disabled><option>Split...</option></select>
-            </div>
-            <div class="col-md-3">
-                <button id="inspect_btn" class="btn btn-success w-100" onclick="startInspection()" disabled>Analyze Schema</button>
-            </div>
         </div>
     </div>
-    <!-- MAIN WORKSPACE -->
     <div class="row" id="workspace" style="display:none;">
-        <!-- LEFT: SOURCE EXPLORER -->
         <div class="col-md-4">
             <div class="box h-100">
-                <div class="step-header">2. Source Explorer</div>
-                <!-- Filter Input -->
-                <div class="mb-3">
-                    <label class="form-label small fw-bold">Source Filter (Python)</label>
-                    <input type="text" id="source_filter" class="form-control form-control-sm" placeholder="e.g. len(text) > 100">
-                </div>
-                <!-- Column List -->
-                <div class="card mb-3">
-                    <div class="card-header py-1 small fw-bold bg-light">Available Columns</div>
-                    <ul class="list-group list-group-flush small" id="source_col_list" style="max-height: 300px; overflow-y: auto;">
-                        <!-- Populated by JS -->
-                    </ul>
-                </div>
-                <!-- Preview Box -->
-                <div class="mt-3">
-                    <label class="form-label small fw-bold">Column Data Preview (5 rows)</label>
-                    <div id="data_preview_box"><pre class="text-muted">Click a column above to see data.</pre></div>
-                </div>
             </div>
         </div>
-        <!-- RIGHT: COLUMN BUILDER -->
         <div class="col-md-8">
             <div class="box h-100">
-                <div class="step-header">3. New Dataset Schema</div>
-                <p class="small text-muted">Construct your new dataset structure. Select source fields (including nested JSON keys) for each new column.</p>
-                <div id="builder_container">
-                    <!-- Builder Rows go here -->
                 </div>
-                <button class="btn btn-sm btn-outline-primary mt-2" onclick="addBuilderRow()">+ Add Column</button>
-                <hr class="my-4">
-                <div class="step-header">4. Publish</div>
                 <div class="row g-2 align-items-end">
-                    <div class="col-md-5">
-                        <label class="small fw-bold">Target Repository</label>
-                        <input type="text" id="target_id" class="form-control" placeholder="username/new-dataset">
-                    </div>
-                    <div class="col-md-2">
-                        <label class="small fw-bold">Max Rows</label>
-                        <input type="number" id="max_rows" class="form-control" placeholder="All">
-                    </div>
-                    <div class="col-md-5 d-flex gap-2">
-                        <button class="btn btn-outline-dark w-50" onclick="runPreview()">Preview 5 Rows</button>
-                        <button class="btn btn-danger w-50" onclick="executeJob()">🚀 Push to Hub</button>
                     </div>
                 </div>
-                <!-- Status & Preview Output -->
                 <div id="job_status" class="alert mt-3" style="display:none;"></div>
                 <div id="final_preview" class="mt-3" style="display:none;"></div>
             </div>
         </div>
     </div>
 </div>
 <script>
-    // Global State
-    let schemaTree = {};
     let sampleRows = [];
-    // --- 1. CONNECTION ---
-    async function loadMetadata() {
         const btn = document.querySelector('button[onclick="loadMetadata()"]');
-        btn.disabled = true; btn.innerText = "...";
         try {
             const res = await fetch('/analyze_metadata', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
@@ -139,220 +248,108 @@
             });
             const data = await res.json();
             if(data.status === 'success') {
-                const confSel = document.getElementById('config_select');
-                confSel.innerHTML = '';
-                data.configs.forEach(c => confSel.innerHTML += `<option value="${c}">${c}</option>`);
-                confSel.disabled = false;
-                populateSplits(data.splits);
                 document.getElementById('inspect_btn').disabled = false;
             } else { alert(data.message); }
         } catch(e) { alert(e); }
-        btn.disabled = false; btn.innerText = "Connect";
     }
-    function populateSplits(splits) {
-        const sel = document.getElementById('split_select');
-        sel.innerHTML = '';
-        splits.forEach(s => sel.innerHTML += `<option value="${s}">${s}</option>`);
-        sel.disabled = false;
-    }
-    async function updateSplits() {
-        // ... (Similar logic as previous version) ...
-    }
-    // --- 2. INSPECTION ---
     async function startInspection() {
         const btn = document.getElementById('inspect_btn');
-        btn.innerText = "Scanning JSON..."; btn.disabled = true;
-        const payload = {
-            token: document.getElementById('token').value,
-            dataset_id: document.getElementById('dataset_id').value,
-            config: document.getElementById('config_select').value,
-            split: document.getElementById('split_select').value
-        };
         const res = await fetch('/inspect_rows', {
             method: 'POST', headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(payload)
         });
         const data = await res.json();
         if(data.status === 'success') {
             document.getElementById('workspace').style.display = 'flex';
             sampleRows = data.samples;
-            schemaTree = data.schema_tree;
-            renderSourceList();
-            // Auto-add first few columns to builder as default
-            document.getElementById('builder_container').innerHTML = '';
-            let count = 0;
-            for(let root in schemaTree) {
-                if(count < 3) addBuilderRow(root, root);
-                count++;
             }
-        } else {
-            alert(data.message);
-        }
         btn.innerText = "Analyze Schema"; btn.disabled = false;
     }
-    // --- 3. UI RENDERING ---
-    function renderSourceList() {
-        const list = document.getElementById('source_col_list');
-        list.innerHTML = '';
-        for (const [root, paths] of Object.entries(schemaTree)) {
-            let isJson = paths.length > 1; // If it has children, it was parsed as JSON/Object
-            let badge = isJson ? '<span class="badge bg-warning text-dark float-end" style="font-size:0.7em">JSON</span>' : '';
-            let li = document.createElement('li');
-            li.className = "list-group-item source-col-row d-flex justify-content-between align-items-center";
-            li.innerHTML = `<span>${root}</span> ${badge}`;
-            li.onclick = () => previewColumn(root, li);
-            list.appendChild(li);
-        }
-    }
-    function previewColumn(colName, el) {
-        // Highlight active
-        document.querySelectorAll('.source-col-row').forEach(e => e.classList.remove('active'));
-        el.classList.add('active');
-        // Show data
-        const box = document.getElementById('data_preview_box');
-        let html = `<small class="text-muted d-block mb-2">Values for <b>${colName}</b>:</small><pre>`;
-        sampleRows.forEach(row => {
-            let val = row[colName];
-            if(typeof val === 'object') val = JSON.stringify(val, null, 2);
-            html += `${val}\n`;
-        });
-        html += `</pre>`;
-        box.innerHTML = html;
-    }
-    function addBuilderRow(targetName='', sourcePath='') {
-        const container = document.getElementById('builder_container');
-        const id = Date.now();
-        // Build Options for Select
-        let options = '';
-        for (const [root, paths] of Object.entries(schemaTree)) {
-            if (paths.length === 1) {
-                // Simple column
-                options += `<option value="${paths[0]}" ${paths[0]===sourcePath?'selected':''}>${paths[0]}</option>`;
-            } else {
-                // Nested group
-                options += `<optgroup label="${root}">`;
-                paths.forEach(p => {
-                    options += `<option value="${p}" ${p===sourcePath?'selected':''}>${p}</option>`;
-                });
-                options += `</optgroup>`;
-            }
-        }
-        const div = document.createElement('div');
-        div.className = "builder-row";
-        div.innerHTML = `
-            <span class="drag-handle">☰</span>
-            <div style="flex:1">
-                <label class="form-label small mb-0 text-muted">Target Name</label>
-                <input type="text" class="form-control form-control-sm target-name" value="${targetName}" placeholder="new_column_name">
-            </div>
-            <div style="flex:0 0 20px; text-align:center;">←</div>
-            <div style="flex:1">
-                <label class="form-label small mb-0 text-muted">Source Field</label>
-                <select class="form-select form-select-sm source-path">${options}</select>
-            </div>
-            <button class="btn btn-sm text-danger" onclick="this.parentElement.remove()">×</button>
-        `;
-        container.appendChild(div);
-    }
-    // --- 4. EXECUTION ---
-    function getRecipe() {
-        const rows = document.querySelectorAll('.builder-row');
-        let columns = [];
-        rows.forEach(r => {
-            columns.push({
-                name: r.querySelector('.target-name').value,
-                source: r.querySelector('.source-path').value
-            });
         });
-        return {
-            filter_rule: document.getElementById('source_filter').value,
-            columns: columns
-        };
     }
     async function runPreview() {
         const box = document.getElementById('final_preview');
-        box.style.display = 'block'; box.innerHTML = 'Generating preview...';
-        const payload = {
-            token: document.getElementById('token').value,
-            dataset_id: document.getElementById('dataset_id').value,
-            config: document.getElementById('config_select').value,
-            split: document.getElementById('split_select').value,
-            recipe: getRecipe()
-        };
         const res = await fetch('/preview', {
             method: 'POST', headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify(payload)
         });
         const data = await res.json();
-        if(data.status === 'success') {
-            box.innerHTML = `<pre>${JSON.stringify(data.rows, null, 2)}</pre>`;
-        } else {
-            box.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,
-            config: document.getElementById('config_select').value,
-            split: document.getElementById('split_select').value,
-            target_id: document.getElementById('target_id').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') {
-            const statusDiv = document.getElementById('job_status');
-            statusDiv.style.display = 'block';
-            statusDiv.className = 'alert alert-info';
-            statusDiv.innerText = "Job started...";
-            const interval = setInterval(async () => {
                 const s = await fetch(`/status/${data.job_id}`).then(r=>r.json());
-                if(s.status === 'completed') {
-                    statusDiv.className = 'alert alert-success';
-                    statusDiv.innerText = `Done! Processed ${s.result.rows_processed} rows.`;
-                    clearInterval(interval);
-                } else if (s.status === 'failed') {
-                    statusDiv.className = 'alert alert-danger';
-                    statusDiv.innerText = `Error: ${s.error}`;
-                    clearInterval(interval);
-                }
             }, 2000);
         }
     }
 </script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>Dataset Architect</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
+        body { background-color: #f4f6f8; font-size: 0.9rem; }
         .box { background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 20px; margin-bottom: 20px; }
+        .source-col-row { cursor: pointer; }
         .source-col-row:hover { background-color: #e9ecef; }
         .source-col-row.active { background-color: #cfe2ff; font-weight: bold; }
+        pre { background: #212529; color: #adbac7; padding: 15px; border-radius: 6px; font-size: 0.8em; max-height: 250px; overflow: auto; }
         /* Builder Styles */
+        .builder-row { border: 1px solid #dee2e6; border-radius: 6px; background: #fff; padding: 10px; margin-bottom: 10px; position: relative; }
+        .builder-row.mode-list { border-left: 4px solid #198754; }
+        .builder-row.mode-python { border-left: 4px solid #fd7e14; }
+        .builder-row.mode-simple { border-left: 4px solid #0d6efd; }
+        .mode-badge { position: absolute; top: -10px; right: 10px; font-size: 0.7em; padding: 2px 6px; background: #fff; border: 1px solid #ccc; border-radius: 4px; text-transform: uppercase; font-weight: bold; color: #666; }
+        .logic-group { background: #f8f9fa; padding: 8px; border-radius: 4px; margin-top: 5px; border: 1px dashed #ccc; }
     </style>
 </head>
 <body>
 <div class="container-fluid p-4">
     <div class="d-flex justify-content-between align-items-center mb-4">
         <h3>🏗️ Hugging Face Dataset Architect</h3>
+        <div><input type="password" id="token" class="form-control form-control-sm" placeholder="HF Token" style="width: 200px;"></div>
     </div>
+    <!-- 1. CONFIG -->
     <div class="box">
         <div class="row g-2">
+            <div class="col-md-4">
                 <div class="input-group">
+                    <input type="text" id="dataset_id" class="form-control" placeholder="Source ID (e.g. the_stack)">
                     <button class="btn btn-primary" onclick="loadMetadata()">Connect</button>
                 </div>
             </div>
+            <div class="col-md-2"><select id="config_select" class="form-select" onchange="updateSplits()" disabled><option>Config...</option></select></div>
+            <div class="col-md-2"><select id="split_select" class="form-select" disabled><option>Split...</option></select></div>
+            <div class="col-md-4"><button id="inspect_btn" class="btn btn-success w-100" onclick="startInspection()" disabled>Analyze Schema</button></div>
         </div>
     </div>
+    <!-- WORKSPACE -->
     <div class="row" id="workspace" style="display:none;">
+        <!-- LEFT: EXPLORER -->
         <div class="col-md-4">
             <div class="box h-100">
+                <h6>Source Columns</h6>
+                <div class="mb-3"><input type="text" id="source_filter" class="form-control form-control-sm" placeholder="Filter rows: len(text) > 100"></div>
+                <ul class="list-group list-group-flush mb-3" id="source_col_list" style="max-height: 300px; overflow-y: auto;"></ul>
+                <h6>Data Preview</h6>
+                <div id="data_preview_box"><pre class="text-muted">Select a column.</pre></div>
             </div>
         </div>
+        <!-- RIGHT: BUILDER -->
         <div class="col-md-8">
             <div class="box h-100">
+                <div class="d-flex justify-content-between mb-3">
+                    <h6>New Schema Definition</h6>
+                    <button class="btn btn-sm btn-outline-primary" onclick="addBuilderRow()">+ Add Column</button>
                 </div>
+                <div id="builder_container"></div>
+                <hr>
                 <div class="row g-2 align-items-end">
+                    <div class="col-md-4"><input type="text" id="target_id" class="form-control" placeholder="target/repo"></div>
+                    <div class="col-md-2"><input type="number" id="max_rows" class="form-control" placeholder="Max Rows"></div>
+                    <div class="col-md-6 d-flex gap-2">
+                        <button class="btn btn-secondary w-50" onclick="runPreview()">Preview</button>
+                        <button class="btn btn-danger w-50" onclick="executeJob()">🚀 Push</button>
                     </div>
                 </div>
                 <div id="job_status" class="alert mt-3" style="display:none;"></div>
                 <div id="final_preview" class="mt-3" style="display:none;"></div>
             </div>
         </div>
     </div>
 </div>
 <script>
+    let schemaData = {};
     let sampleRows = [];
+    // --- TEMPLATES ---
+    function addBuilderRow() {
+        const container = document.getElementById('builder_container');
+        const id = 'row_' + Date.now();
+        // Build Source Options
+        let sourceOpts = '<option value="">Select Source...</option>';
+        for(let col in schemaData) {
+            let label = col + (schemaData[col].type === 'List' ? ' [List]' : '');
+            sourceOpts += `<option value="${col}">${label}</option>`;
+        }
+        const div = document.createElement('div');
+        div.className = "builder-row mode-simple";
+        div.id = id;
+        div.innerHTML = `
+            <span class="mode-badge">Simple Path</span>
+            <div class="row g-2 align-items-center mb-2">
+                <div class="col-md-3">
+                    <input type="text" class="form-control form-control-sm target-name" placeholder="New Col Name">
+                </div>
+                <div class="col-md-3">
+                    <select class="form-select form-select-sm mode-select" onchange="changeMode('${id}', this.value)">
+                        <option value="simple">Simple Path</option>
+                        <option value="list_search">List Filter (Get X where Y=Z)</option>
+                        <option value="python">Custom Python</option>
+                    </select>
+                </div>
+                <div class="col-md-5 text-end">
+                    <button class="btn btn-sm btn-link text-danger text-decoration-none" onclick="this.closest('.builder-row').remove()">Remove</button>
+                </div>
+            </div>
+            <!-- DYNAMIC INPUT AREA -->
+            <div class="inputs-area">
+                <!-- Default Simple Mode -->
+                <div class="input-group input-group-sm">
+                    <span class="input-group-text">Source</span>
+                    <select class="form-select source-col">${sourceOpts}</select>
+                    <input type="text" class="form-control" placeholder="Optional .dot.notation" id="${id}_simple_extra">
+                </div>
+            </div>
+        `;
+        container.appendChild(div);
+    }
+    function changeMode(rowId, mode) {
+        const row = document.getElementById(rowId);
+        const area = row.querySelector('.inputs-area');
+        const badge = row.querySelector('.mode-badge');
+        // Reset classes
+        row.className = `builder-row mode-${mode}`;
+        // Build Source Options again
+        let sourceOpts = '<option value="">Select Col...</option>';
+        for(let col in schemaData) {
+            sourceOpts += `<option value="${col}">${col}</option>`;
+        }
+        if(mode === 'simple') {
+            badge.innerText = "Simple Path";
+            area.innerHTML = `
+                <div class="input-group input-group-sm">
+                    <span class="input-group-text">Source</span>
+                    <select class="form-select source-col">${sourceOpts}</select>
+                    <input type="text" class="form-control source-extra" placeholder="Optional .dot.notation (e.g. meta.url)">
+                </div>`;
+        }
+        else if (mode === 'list_search') {
+            badge.innerText = "List Logic";
+            area.innerHTML = `
+                <div class="logic-group">
+                    <div class="d-flex gap-2 align-items-center mb-1">
+                        <span class="fw-bold small">FROM</span>
+                        <select class="form-select form-select-sm source-col" style="width:150px">${sourceOpts}</select>
+                        <span class="fw-bold small">FIND ITEM WHERE</span>
+                    </div>
+                    <div class="d-flex gap-2 align-items-center mb-1">
+                        <input type="text" class="form-control form-control-sm filter-key" placeholder="Key (e.g. role)">
+                        <span class="fw-bold small">=</span>
+                        <input type="text" class="form-control form-control-sm filter-val" placeholder="Value (e.g. user)">
+                    </div>
+                    <div class="d-flex gap-2 align-items-center">
+                        <span class="fw-bold small">EXTRACT</span>
+                        <input type="text" class="form-control form-control-sm target-key" placeholder="Key (e.g. content or content.analysis)">
+                    </div>
+                </div>`;
+        }
+        else if (mode === 'python') {
+            badge.innerText = "Python";
+            area.innerHTML = `
+                <div class="input-group input-group-sm">
+                    <span class="input-group-text">val = </span>
+                    <input type="text" class="form-control python-expr" placeholder="row['text'].upper() or json.loads(row['meta'])['id']">
+                </div>`;
+        }
+    }
+    function getRecipe() {
+        const rows = document.querySelectorAll('.builder-row');
+        let columns = [];
+        rows.forEach(r => {
+            const name = r.querySelector('.target-name').value;
+            const mode = r.querySelector('.mode-select').value;
+            if(!name) return; // skip empty names
+            if(mode === 'simple') {
+                let src = r.querySelector('.source-col').value;
+                let extra = r.querySelector('.source-extra').value;
+                if(extra) { src = extra.startsWith('.') ? src + extra : src + '.' + extra; }
+                columns.push({ type: 'simple', name: name, source: src });
+            }
+            else if(mode === 'list_search') {
+                columns.push({
+                    type: 'list_search',
+                    name: name,
+                    source: r.querySelector('.source-col').value,
+                    filter_key: r.querySelector('.filter-key').value,
+                    filter_val: r.querySelector('.filter-val').value,
+                    target_key: r.querySelector('.target-key').value
+                });
+            }
+            else if(mode === 'python') {
+                columns.push({
+                    type: 'python',
+                    name: name,
+                    expression: r.querySelector('.python-expr').value
+                });
+            }
+        });
+        return {
+            filter_rule: document.getElementById('source_filter').value,
+            columns: columns
+        };
+    }
+    // --- STANDARD API CALLS (Connect, Inspect, Execute) ---
+    // (Same as previous version, just ensure they call getRecipe())
+    async function loadMetadata() { /* Same as before */
         const btn = document.querySelector('button[onclick="loadMetadata()"]');
+        btn.disabled = true;
         try {
             const res = await fetch('/analyze_metadata', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
             });
             const data = await res.json();
             if(data.status === 'success') {
+                // Config Select
+                const cSel = document.getElementById('config_select');
+                cSel.innerHTML = '';
+                data.configs.forEach(c => cSel.innerHTML += `<option value="${c}">${c}</option>`);
+                cSel.disabled = false;
+                // Splits
+                const sSel = document.getElementById('split_select');
+                sSel.innerHTML = '';
+                data.splits.forEach(s => sSel.innerHTML += `<option value="${s}">${s}</option>`);
+                sSel.disabled = false;
                 document.getElementById('inspect_btn').disabled = false;
             } else { alert(data.message); }
         } catch(e) { alert(e); }
+        btn.disabled = false;
     }
     async function startInspection() {
         const btn = document.getElementById('inspect_btn');
+        btn.innerText = "Scanning..."; btn.disabled = true;
         const res = await fetch('/inspect_rows', {
             method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                token: document.getElementById('token').value,
+                dataset_id: document.getElementById('dataset_id').value,
+                config: document.getElementById('config_select').value,
+                split: document.getElementById('split_select').value
+            })
         });
         const data = await res.json();
         if(data.status === 'success') {
             document.getElementById('workspace').style.display = 'flex';
             sampleRows = data.samples;
+            schemaData = data.schema;
+            // Render Source List
+            const list = document.getElementById('source_col_list');
+            list.innerHTML = '';
+            for(let col in schemaData) {
+                let badge = schemaData[col].type === 'List' ? '<span class="badge bg-warning text-dark float-end">List</span>' : '';
+                list.innerHTML += `<li class="list-group-item source-col-row" onclick="previewCol('${col}')">${col} ${badge}</li>`;
             }
+        } else { alert(data.message); }
         btn.innerText = "Analyze Schema"; btn.disabled = false;
     }
+    function previewCol(col) {
+        let html = '';
+        sampleRows.forEach(r => {
+            let v = r[col];
+            if(typeof v === 'object') v = JSON.stringify(v, null, 2);
+            html += v + "\n" + "-".repeat(20) + "\n";
         });
+        document.getElementById('data_preview_box').innerHTML = `<pre>${html}</pre>`;
     }
     async function runPreview() {
         const box = document.getElementById('final_preview');
+        box.style.display='block'; box.innerHTML = "Generating...";
         const res = await fetch('/preview', {
             method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                token: document.getElementById('token').value,
+                dataset_id: document.getElementById('dataset_id').value,
+                config: document.getElementById('config_select').value,
+                split: document.getElementById('split_select').value,
+                recipe: getRecipe()
+            })
         });
         const data = await res.json();
+        if(data.status === 'success') box.innerHTML = `<pre>${JSON.stringify(data.rows, null, 2)}</pre>`;
+        else box.innerHTML = `<div class="text-danger">${data.message}</div>`;
     }
     async function executeJob() {
         const res = await fetch('/execute', {
             method: 'POST', headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                token: document.getElementById('token').value,
+                dataset_id: document.getElementById('dataset_id').value,
+                config: document.getElementById('config_select').value,
+                split: document.getElementById('split_select').value,
+                target_id: document.getElementById('target_id').value,
+                recipe: getRecipe(),
+                max_rows: document.getElementById('max_rows').value
+            })
         });
         const data = await res.json();
         if(data.status === 'started') {
+            document.getElementById('job_status').style.display = 'block';
+            document.getElementById('job_status').innerText = "Job Started...";
+            // Simple polling
+            setInterval(async () => {
                 const s = await fetch(`/status/${data.job_id}`).then(r=>r.json());
+                if(s.status === 'completed') document.getElementById('job_status').innerText = `Done! Processed ${s.result.rows_processed}`;
             }, 2000);
         }
     }
 </script>
 </body>
 </html>