Aniruddha7's picture
Huggingface Deployment
de36225
Raw History Blame Contribute Delete
33.9 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>QueryLens - Transform natural language into SQL</title>
<link rel="icon"
href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMwRjYyRkUiLz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeD0iNCIgeT0iNCIgY2xhc3M9InF1ZXJ5LWljb24iPgo8cGF0aCBkPSJNMTIgMlY3TTEyIDdMMTUgM001IDkuNUg5LjVNOS41IDkuNUw2IDZNMTkgMTQuNUgxNC41TTE0LjUgMTQuNUwxOCAxOE0xMiAxN1YyMk0xMiAyMkw5IDE5IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4KPC9zdmc+">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide@0.292.0/dist/umd/lucide.min.css">
<style>
:root {
/* Modern Color Palette */
--primary: #0F62FE;
--primary-dark: #0353E9;
--primary-light: #4589FF;
--secondary: #8A3FFC;
--accent: #FF6B35;
/* Neutrals - Enhanced for better contrast */
--gray-50: #F8FAFC;
--gray-100: #F1F5F9;
--gray-200: #E2E8F0;
--gray-300: #CBD5E1;
--gray-400: #94A3B8;
--gray-500: #64748B;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1E293B;
--gray-900: #0F172A;
/* Semantic */
--success: #10B981;
--warning: #F59E0B;
--error: #EF4444;
/* Surfaces - Improved contrast */
--bg-primary: #FAFBFC;
/* Slightly off-white for better contrast */
--bg-secondary: #F4F6F8;
/* Darker secondary background */
--bg-tertiary: #E8EDF3;
/* More distinct tertiary */
--card-bg: #FFFFFF;
/* Pure white cards for contrast */
--border: #D1D9E0;
/* Darker borders for definition */
--border-light: #E5EAF0;
/* Subtle borders */
/* Typography - Enhanced contrast */
--text-primary: #1A202C;
/* Darker primary text */
--text-secondary: #4A5568;
/* Stronger secondary text */
--text-tertiary: #718096;
/* More readable tertiary text */
/* Spacing */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* Border Radius */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* Transitions */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;
}
/* Reset & Base Styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: var(--bg-secondary);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
line-height: 1.6;
}
/* Layout */
.app-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-content {
flex: 1;
max-width: 1400px;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
width: 100%;
}
/* Header */
.header {
background: var(--card-bg);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-sm);
position: sticky;
top: 0;
z-index: 50;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: var(--space-4) var(--space-4);
display: flex;
align-items: center;
gap: var(--space-4);
}
.brand {
display: flex;
align-items: center;
gap: var(--space-3);
}
.brand-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.brand-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.brand-icon svg {
width: 24px;
height: 24px;
color: white;
z-index: 1;
position: relative;
}
.brand-text h1 {
margin: 0;
font-size: 1.875rem;
font-weight: 800;
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.025em;
}
.brand-text p {
margin: 0;
color: var(--text-secondary);
font-size: 0.875rem;
font-weight: 500;
}
/* Query Section */
.query-section {
background: var(--card-bg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border);
margin-bottom: var(--space-8);
overflow: hidden;
}
.query-header {
padding: var(--space-6) var(--space-6) 0;
}
.query-title {
margin: 0 0 var(--space-2);
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
}
.query-body {
padding: 0 var(--space-6) var(--space-6);
}
.textarea-container {
position: relative;
margin-bottom: var(--space-4);
}
.query-textarea {
width: 100%;
min-height: 120px;
padding: var(--space-4);
border: 2px solid var(--border);
border-radius: var(--radius-lg);
font-size: 1rem;
font-family: inherit;
line-height: 1.6;
resize: vertical;
background: var(--bg-primary);
color: var(--text-primary);
transition: var(--transition-normal);
}
.query-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.1);
}
.query-textarea::placeholder {
color: var(--text-tertiary);
}
.query-controls {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.mode-selector {
display: flex;
align-items: center;
gap: var(--space-2);
}
.mode-selector label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text-secondary);
}
.mode-select {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-size: 0.875rem;
background: var(--bg-primary);
color: var(--text-primary);
min-width: 120px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: var(--transition-normal);
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: var(--primary);
color: white;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
background: var(--primary-dark);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
background: var(--bg-tertiary);
transform: translateY(-1px);
}
.upload-controls {
display: flex;
align-items: center;
gap: var(--space-3);
}
.status-area {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Spinner */
.spinner {
width: 24px;
height: 24px;
border: 3px solid var(--border);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
}
.spinner.hidden {
display: none !important;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.status-text {
font-size: 0.875rem;
color: var(--text-secondary);
}
/* Results Grid */
.results-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width: 1024px) {
.results-grid {
grid-template-columns: 2fr 1fr;
gap: var(--space-6);
}
/* CRITICAL FIX: Prevent grid blowout from wide tables */
.results-grid>.main-results {
min-width: 0;
/* Allow grid cell to shrink below content size */
overflow: hidden;
/* Contain overflowing content */
}
.results-grid>.agent-panels {
min-width: 0;
/* Prevent agent panels from being pushed off-screen */
}
}
/* Cards */
.card {
background: var(--card-bg);
border-radius: var(--radius-xl);
border: 1px solid var(--border);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.card-header {
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border-light);
background: var(--bg-tertiary);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: var(--space-2);
}
.card-content {
padding: var(--space-6);
}
.answer-content {
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
background: var(--bg-secondary);
border-radius: var(--radius-lg);
padding: var(--space-4);
white-space: pre-wrap;
color: var(--text-primary);
font-size: 0.875rem;
line-height: 1.6;
min-height: 120px;
border: 1px solid var(--border-light);
}
.sql-content {
background: var(--gray-900);
color: #E2E8F0;
border-radius: var(--radius-lg);
padding: var(--space-4);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 0.875rem;
line-height: 1.6;
overflow-x: auto;
max-height: 300px;
overflow-y: auto;
}
/* Agent Panels */
.agent-panels {
display: grid;
gap: var(--space-4);
}
.panel {
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
overflow: hidden;
}
.panel-header {
padding: var(--space-3) var(--space-4);
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-light);
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: var(--transition-fast);
}
.panel-header:hover {
background: var(--bg-secondary);
}
.panel-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
}
.panel-content {
padding: var(--space-4);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 0.8rem;
line-height: 1.5;
color: var(--text-secondary);
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
background: var(--bg-primary);
}
/* Tables */
.table-wrapper {
position: relative;
margin: var(--space-4) 0;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
background: var(--card-bg);
border: 1px solid var(--border);
overflow: hidden;
max-width: 100%;
/* Prevent table from breaking grid layout */
}
.table-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border);
gap: var(--space-3);
}
.table-controls-left {
display: flex;
align-items: center;
gap: var(--space-3);
}
.table-controls-right {
display: flex;
align-items: center;
gap: var(--space-2);
}
.table-info {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
}
.table-resize-controls {
display: flex;
align-items: center;
gap: var(--space-2);
}
.table-resize-btn {
padding: var(--space-1) var(--space-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 0.75rem;
cursor: pointer;
transition: var(--transition-normal);
}
.table-resize-btn:hover {
background: var(--bg-secondary);
color: var(--text-primary);
}
.table-resize-btn.active {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.table-container {
overflow: auto;
max-height: 70vh;
max-width: 100%;
position: relative;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.answer-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 0.875rem;
background: var(--card-bg);
table-layout: auto;
min-width: 100%;
}
.answer-table.compact {
table-layout: fixed;
}
.answer-table.comfortable {
table-layout: auto;
}
.answer-table.spacious {
table-layout: auto;
font-size: 1rem;
}
.answer-table th,
.answer-table td {
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--border-light);
border-right: 1px solid var(--border-light);
vertical-align: top;
position: relative;
}
.answer-table.compact th,
.answer-table.compact td {
padding: var(--space-2) var(--space-3);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.answer-table.comfortable th,
.answer-table.comfortable td {
padding: var(--space-3) var(--space-4);
max-width: 200px;
word-wrap: break-word;
white-space: normal;
}
.answer-table.spacious th,
.answer-table.spacious td {
padding: var(--space-4) var(--space-6);
max-width: 300px;
word-wrap: break-word;
white-space: normal;
overflow-wrap: break-word;
}
.answer-table th {
background: #F1F5F9;
/* Stronger header background */
font-weight: 600;
color: #1A202C;
/* Darker header text */
position: sticky;
top: 0;
z-index: 10;
border-top: none;
border-bottom: 2px solid #D1D9E0;
/* Stronger header border */
}
.answer-table th:last-child,
.answer-table td:last-child {
border-right: none;
}
.answer-table tbody tr:hover {
background: #E8F4FD;
/* Subtle blue hover */
}
.answer-table tbody tr:nth-child(even) {
background: #F7F9FC;
/* More visible alternating rows */
}
.answer-table tbody tr:nth-child(even):hover {
background: #E8F4FD;
/* Consistent hover color */
}
/* Column resizer */
.column-resizer {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 4px;
cursor: col-resize;
background: transparent;
transition: background-color 0.2s;
}
.column-resizer:hover {
background: var(--primary);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.table-controls {
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
}
.table-controls-left,
.table-controls-right {
justify-content: space-between;
}
.answer-table th,
.answer-table td {
padding: var(--space-2) var(--space-3);
font-size: 0.8rem;
}
}
/* Footer */
.footer {
margin-top: var(--space-12);
padding: var(--space-8) 0;
text-align: center;
color: var(--text-tertiary);
font-size: 0.875rem;
border-top: 1px solid var(--border-light);
}
/* Responsive */
@media (max-width: 768px) {
.main-content {
padding: var(--space-4) var(--space-3);
}
.header-content {
padding: var(--space-3);
}
.query-controls {
flex-direction: column;
align-items: stretch;
}
.status-area {
margin-left: 0;
margin-top: var(--space-3);
}
}
/* Utility Classes */
.hidden {
display: none !important;
}
.text-success {
color: var(--success) !important;
}
.text-warning {
color: var(--warning) !important;
}
.text-error {
color: var(--error) !important;
}
/* Upload Controls - Show/Hide */
.upload-controls.hidden {
display: none !important;
}
.upload-controls {
display: flex !important;
align-items: center;
gap: var(--space-3);
}
</style>
<!-- Prism for SQL highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body>
<div class="app-container">
<!-- Header -->
<header class="header">
<div class="header-content">
<div class="brand">
<div class="brand-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2V7M12 7L15 3M5 9.5H9.5M9.5 9.5L6 6M19 14.5H14.5M14.5 14.5L18 18M12 17V22M12 22L9 19"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="brand-text">
<h1>QueryLens</h1>
<p>Transform natural language into SQL, and documents into insight.</p>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<!-- Query Section -->
<section class="query-section">
<div class="query-header">
<h2 class="query-title">Ask a Question</h2>
</div>
<div class="query-body">
<div class="textarea-container">
<textarea id="question" class="query-textarea"
placeholder="e.g. Which department has the highest average salary?"></textarea>
</div>
<div class="query-controls">
<div class="mode-selector">
<label for="modeToggle">Mode:</label>
<select id="modeToggle" class="mode-select">
<option value="text2sql">Text-to-SQL</option>
<option value="ocr_qa">OCR Q&A</option>
</select>
</div>
<button id="ask" class="btn btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M12 19l7-7 3 3-7 7-3-3z" />
<path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />
</svg>
Ask
</button>
<button id="recalc" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M1 4v6h6" />
<path d="M23 20v-6h-6" />
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
</svg>
Re-execute
</button>
<div id="uploadControls" class="upload-controls hidden">
<button id="uploadBtn" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="17,8 12,3 7,8" />
<line x1="12" y1="3" x2="12" y2="15" />
</svg>
Upload Image
</button>
<span id="uploadStatus" class="status-text">No upload</span>
</div>
<div class="status-area">
<div id="spinner" class="spinner hidden"></div>
<span id="spinnerText" class="status-text hidden">Processing...</span>
<span id="status" class="status-text">Ready</span>
<span id="time" class="status-text"></span>
</div>
</div>
</div>
</section>
<!-- Results Grid -->
<div class="results-grid">
<!-- Main Results Column -->
<div class="main-results">
<!-- Answer Card -->
<div class="card">
<div class="card-header">
<h3 class="card-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M9 11l3 3L22 4" />
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
</svg>
Answer
</h3>
</div>
<div class="card-content">
<div id="answer" class="answer-content">No answer yet.</div>
</div>
</div>
<!-- SQL Card -->
<div class="card" style="margin-top: var(--space-6);">
<details id="sql-details" open>
<summary class="card-header" style="cursor: pointer;">
<h3 class="card-title">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="16,18 22,12 16,6" />
<polyline points="8,6 2,12 8,18" />
</svg>
Generated SQL
</h3>
</summary>
<div class="card-content">
<pre
class="sql-content"><code id="sql" class="language-sql">-- SQL will appear here after the agent crafts a query --</code></pre>
</div>
</details>
</div>
</div>
<!-- Agent Panels Column -->
<div class="agent-panels">
<div class="panel">
<details open>
<summary class="panel-header">
<span class="panel-title">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" style="margin-right: 0.5rem;">
<path
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
</svg>
Memory Agent
</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6,9 12,15 18,9" />
</svg>
</summary>
<div id="memory" class="panel-content">—</div>
</details>
</div>
<div class="panel">
<details open>
<summary class="panel-header">
<span class="panel-title">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" style="margin-right: 0.5rem;">
<path d="M12 20h9" />
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
</svg>
Query Craft Agent
</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6,9 12,15 18,9" />
</svg>
</summary>
<div id="querycraft" class="panel-content">—</div>
</details>
</div>
<div class="panel">
<details open>
<summary class="panel-header">
<span class="panel-title">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" style="margin-right: 0.5rem;">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14,2 14,8 20,8" />
<line x1="16" y1="13" x2="8" y2="13" />
<line x1="16" y1="17" x2="8" y2="17" />
<polyline points="10,9 9,9 8,9" />
</svg>
Result Presenter Agent
</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<polyline points="6,9 12,15 18,9" />
</svg>
</summary>
<div id="presenter" class="panel-content">—</div>
</details>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<p>QueryLens — Powered by advanced AI agents for intelligent data analysis</p>
</footer>
</div>
<script src="/static/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
</body>
</html>