Upload src/app/giao_dien/text_to_sql_dashboard/code.html with huggingface_hub

src/app/giao_dien/text_to_sql_dashboard/code.html

@@ -234,10 +234,31 @@
 </div>
 <!-- Sample Mode Content -->
 <div class="space-y-4" id="source-sample">
+<div class="flex items-center justify-between">
 <h3 class="font-label-caps text-label-caps text-secondary uppercase" id="schema-title">Active Schema: ...</h3>
-<div class="bg-code-bg border border-border-subtle p-4 rounded font-code-block text-code-block text-on-surface-variant overflow-x-auto">
+<select class="px-2 py-1 border border-border-subtle rounded text-status-badge font-status-badge bg-white text-on-surface" id="sample-table-select" title="Select table to preview"></select>
+</div>
+<!-- Data preview table (same style as upload preview) -->
+<div id="sample-preview-wrap">
+<div class="overflow-x-auto rounded border border-border-subtle">
+<table class="w-full text-left font-body-sm text-body-sm" id="sample-preview-table">
+<thead class="bg-surface-container-high border-b border-border-subtle font-code-block uppercase text-[11px]"><tr></tr></thead>
+<tbody class="divide-y divide-border-subtle bg-white"></tbody>
+</table>
+</div>
+<div class="flex items-center justify-between mt-3">
+<button class="px-3 py-1 border border-border-subtle rounded text-body-sm font-label-caps text-label-caps uppercase bg-white hover:bg-surface-container-low disabled:opacity-40 disabled:cursor-not-allowed" disabled id="sample-prev-btn">‹ Previous</button>
+<span class="text-body-sm text-secondary" id="sample-page-label">Loading...</span>
+<button class="px-3 py-1 border border-border-subtle rounded text-body-sm font-label-caps text-label-caps uppercase bg-white hover:bg-surface-container-low disabled:opacity-40 disabled:cursor-not-allowed" disabled id="sample-next-btn">Next ›</button>
+</div>
+</div>
+<!-- Schema string (collapsible) -->
+<details class="mt-1">
+<summary class="font-label-caps text-label-caps text-secondary uppercase cursor-pointer select-none hover:text-primary transition-colors text-[11px]">View schema string</summary>
+<div class="bg-code-bg border border-border-subtle p-4 rounded font-code-block text-code-block text-on-surface-variant overflow-x-auto mt-2">
 <pre id="schema-block">Loading schema...</pre>
 </div>
+</details>
 </div>
 <!-- Upload Mode Content (Hidden by default) -->
 <div class="hidden space-y-4" id="source-upload">
@@ -455,6 +476,7 @@
             }
 
             toggleDataSource(meta.mode === 'uploaded' ? 'upload' : 'sample');
+            if (meta.mode !== 'uploaded') loadSamplePreview();
             loadModels();
         }
 
@@ -572,6 +594,62 @@
             }
         });
 
+        // ---- Sample database table preview ----
+        let samplePreviewState = { columns: [], rows: [], rowCount: 0, tableNames: [], activeTable: '', page: 0 };
+
+        async function loadSamplePreview(table) {
+            try {
+                const url = `${API_BASE}/api/preview` + (table ? `?table=${encodeURIComponent(table)}` : '');
+                const res = await fetch(url);
+                if (!res.ok) throw new Error(`HTTP ${res.status}`);
+                const data = await res.json();
+                samplePreviewState = { columns: data.columns, rows: data.rows, rowCount: data.row_count,
+                    truncated: data.truncated, tableNames: data.table_names, activeTable: data.active_table, page: 0 };
+
+                const sel = document.getElementById('sample-table-select');
+                sel.innerHTML = samplePreviewState.tableNames.map(t =>
+                    `<option value="${t}" ${t === data.active_table ? 'selected' : ''}>${t}</option>`
+                ).join('');
+
+                renderSamplePreviewPage();
+            } catch (err) {
+                console.error('Failed to load sample preview:', err);
+            }
+        }
+
+        function renderSamplePreviewPage() {
+            const { columns, rows, rowCount, page } = samplePreviewState;
+            const totalPages = Math.max(1, Math.ceil(rows.length / PREVIEW_PAGE_SIZE));
+            const start = page * PREVIEW_PAGE_SIZE;
+            const pageRows = rows.slice(start, start + PREVIEW_PAGE_SIZE);
+
+            const thead = document.querySelector('#sample-preview-table thead tr');
+            thead.innerHTML = columns.map(c => `<th class="px-4 py-2 border-r border-border-subtle">${escapeHtml(String(c))}</th>`).join('');
+
+            const tbody = document.querySelector('#sample-preview-table tbody');
+            tbody.innerHTML = pageRows.map(row =>
+                `<tr class="hover:bg-surface-container-low">${row.map(v =>
+                    `<td class="px-4 py-2 border-r border-border-subtle">${escapeHtml(v === null ? '' : String(v))}</td>`
+                ).join('')}</tr>`
+            ).join('');
+
+            document.getElementById('sample-page-label').textContent =
+                `Rows ${start + 1}–${start + pageRows.length} of ${rowCount} total (page ${page + 1} / ${totalPages})`;
+            document.getElementById('sample-prev-btn').disabled = page <= 0;
+            document.getElementById('sample-next-btn').disabled = page >= totalPages - 1;
+        }
+
+        document.getElementById('sample-prev-btn').addEventListener('click', () => {
+            if (samplePreviewState.page > 0) { samplePreviewState.page -= 1; renderSamplePreviewPage(); }
+        });
+        document.getElementById('sample-next-btn').addEventListener('click', () => {
+            const totalPages = Math.max(1, Math.ceil(samplePreviewState.rows.length / PREVIEW_PAGE_SIZE));
+            if (samplePreviewState.page < totalPages - 1) { samplePreviewState.page += 1; renderSamplePreviewPage(); }
+        });
+        document.getElementById('sample-table-select').addEventListener('change', (e) => {
+            loadSamplePreview(e.target.value);
+        });
+
         // ---- Banners (validator block / execution error) ----
         function renderBanners(data) {
             const container = document.getElementById('banners');