Team Ai
Apppublic

Aniruddha7/QueryLens-Text2SQL_DocVQA-V2

sourceHugging Faceupdated 4mo agoView on Hugging Face
0likes
index.html996 linesDownload Raw Back to static
1<!doctype html>2<html lang="en">3 4<head>5    <meta charset="utf-8" />6    <meta name="viewport" content="width=device-width, initial-scale=1" />7    <title>QueryLens - Transform natural language into SQL</title>8    <link rel="icon"9        href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMwRjYyRkUiLz4KPHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeD0iNCIgeT0iNCIgY2xhc3M9InF1ZXJ5LWljb24iPgo8cGF0aCBkPSJNMTIgMlY3TTEyIDdMMTUgM001IDkuNUg5LjVNOS41IDkuNUw2IDZNMTkgMTQuNUgxNC41TTE0LjUgMTQuNUwxOCAxOE0xMiAxN1YyMk0xMiAyMkw5IDE5IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4KPC9zdmc+">10 11    <!-- Fonts -->12    <link rel="preconnect" href="https://fonts.googleapis.com">13    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>14    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"15        rel="stylesheet">16 17    <!-- Icons -->18    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide@0.292.0/dist/umd/lucide.min.css">19 20    <style>21        :root {22            /* Modern Color Palette */23            --primary: #0F62FE;24            --primary-dark: #0353E9;25            --primary-light: #4589FF;26            --secondary: #8A3FFC;27            --accent: #FF6B35;28 29            /* Neutrals - Enhanced for better contrast */30            --gray-50: #F8FAFC;31            --gray-100: #F1F5F9;32            --gray-200: #E2E8F0;33            --gray-300: #CBD5E1;34            --gray-400: #94A3B8;35            --gray-500: #64748B;36            --gray-600: #475569;37            --gray-700: #334155;38            --gray-800: #1E293B;39            --gray-900: #0F172A;40 41            /* Semantic */42            --success: #10B981;43            --warning: #F59E0B;44            --error: #EF4444;45 46            /* Surfaces - Improved contrast */47            --bg-primary: #FAFBFC;48            /* Slightly off-white for better contrast */49            --bg-secondary: #F4F6F8;50            /* Darker secondary background */51            --bg-tertiary: #E8EDF3;52            /* More distinct tertiary */53            --card-bg: #FFFFFF;54            /* Pure white cards for contrast */55            --border: #D1D9E0;56            /* Darker borders for definition */57            --border-light: #E5EAF0;58            /* Subtle borders */59 60            /* Typography - Enhanced contrast */61            --text-primary: #1A202C;62            /* Darker primary text */63            --text-secondary: #4A5568;64            /* Stronger secondary text */65            --text-tertiary: #718096;66            /* More readable tertiary text */67 68            /* Spacing */69            --space-1: 0.25rem;70            --space-2: 0.5rem;71            --space-3: 0.75rem;72            --space-4: 1rem;73            --space-5: 1.25rem;74            --space-6: 1.5rem;75            --space-8: 2rem;76            --space-10: 2.5rem;77            --space-12: 3rem;78            --space-16: 4rem;79 80            /* Shadows */81            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);82            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);83            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);84            --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);85 86            /* Border Radius */87            --radius-sm: 0.375rem;88            --radius-md: 0.5rem;89            --radius-lg: 0.75rem;90            --radius-xl: 1rem;91 92            /* Transitions */93            --transition-fast: 150ms ease;94            --transition-normal: 250ms ease;95            --transition-slow: 350ms ease;96        }97 98        /* Reset & Base Styles */99        *,100        *::before,101        *::after {102            box-sizing: border-box;103        }104 105        html,106        body {107            height: 100%;108            margin: 0;109            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;110            background: var(--bg-secondary);111            color: var(--text-primary);112            -webkit-font-smoothing: antialiased;113            -moz-osx-font-smoothing: grayscale;114            font-size: 16px;115            line-height: 1.6;116        }117 118        /* Layout */119        .app-container {120            min-height: 100vh;121            display: flex;122            flex-direction: column;123        }124 125        .main-content {126            flex: 1;127            max-width: 1400px;128            margin: 0 auto;129            padding: var(--space-6) var(--space-4);130            width: 100%;131        }132 133        /* Header */134        .header {135            background: var(--card-bg);136            border-bottom: 1px solid var(--border);137            box-shadow: var(--shadow-sm);138            position: sticky;139            top: 0;140            z-index: 50;141        }142 143        .header-content {144            max-width: 1400px;145            margin: 0 auto;146            padding: var(--space-4) var(--space-4);147            display: flex;148            align-items: center;149            gap: var(--space-4);150        }151 152        .brand {153            display: flex;154            align-items: center;155            gap: var(--space-3);156        }157 158        .brand-icon {159            width: 48px;160            height: 48px;161            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);162            border-radius: var(--radius-lg);163            display: flex;164            align-items: center;165            justify-content: center;166            box-shadow: var(--shadow-md);167            position: relative;168            overflow: hidden;169        }170 171        .brand-icon::before {172            content: '';173            position: absolute;174            top: 0;175            left: 0;176            right: 0;177            bottom: 0;178            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);179            animation: shimmer 3s infinite;180        }181 182        @keyframes shimmer {183            0% {184                transform: translateX(-100%);185            }186 187            100% {188                transform: translateX(100%);189            }190        }191 192        .brand-icon svg {193            width: 24px;194            height: 24px;195            color: white;196            z-index: 1;197            position: relative;198        }199 200        .brand-text h1 {201            margin: 0;202            font-size: 1.875rem;203            font-weight: 800;204            background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary) 100%);205            -webkit-background-clip: text;206            -webkit-text-fill-color: transparent;207            background-clip: text;208            letter-spacing: -0.025em;209        }210 211        .brand-text p {212            margin: 0;213            color: var(--text-secondary);214            font-size: 0.875rem;215            font-weight: 500;216        }217 218        /* Query Section */219        .query-section {220            background: var(--card-bg);221            border-radius: var(--radius-xl);222            box-shadow: var(--shadow-lg);223            border: 1px solid var(--border);224            margin-bottom: var(--space-8);225            overflow: hidden;226        }227 228        .query-header {229            padding: var(--space-6) var(--space-6) 0;230        }231 232        .query-title {233            margin: 0 0 var(--space-2);234            font-size: 1.125rem;235            font-weight: 600;236            color: var(--text-primary);237        }238 239        .query-body {240            padding: 0 var(--space-6) var(--space-6);241        }242 243        .textarea-container {244            position: relative;245            margin-bottom: var(--space-4);246        }247 248        .query-textarea {249            width: 100%;250            min-height: 120px;251            padding: var(--space-4);252            border: 2px solid var(--border);253            border-radius: var(--radius-lg);254            font-size: 1rem;255            font-family: inherit;256            line-height: 1.6;257            resize: vertical;258            background: var(--bg-primary);259            color: var(--text-primary);260            transition: var(--transition-normal);261        }262 263        .query-textarea:focus {264            outline: none;265            border-color: var(--primary);266            box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.1);267        }268 269        .query-textarea::placeholder {270            color: var(--text-tertiary);271        }272 273        .query-controls {274            display: flex;275            align-items: center;276            gap: var(--space-3);277            flex-wrap: wrap;278        }279 280        .mode-selector {281            display: flex;282            align-items: center;283            gap: var(--space-2);284        }285 286        .mode-selector label {287            font-size: 0.875rem;288            font-weight: 500;289            color: var(--text-secondary);290        }291 292        .mode-select {293            padding: var(--space-2) var(--space-3);294            border: 1px solid var(--border);295            border-radius: var(--radius-md);296            font-size: 0.875rem;297            background: var(--bg-primary);298            color: var(--text-primary);299            min-width: 120px;300        }301 302        /* Buttons */303        .btn {304            display: inline-flex;305            align-items: center;306            gap: var(--space-2);307            padding: var(--space-3) var(--space-4);308            border-radius: var(--radius-md);309            font-size: 0.875rem;310            font-weight: 600;311            border: none;312            cursor: pointer;313            transition: var(--transition-normal);314            text-decoration: none;315            position: relative;316            overflow: hidden;317        }318 319        .btn:disabled {320            opacity: 0.5;321            cursor: not-allowed;322        }323 324        .btn-primary {325            background: var(--primary);326            color: white;327            box-shadow: var(--shadow-sm);328        }329 330        .btn-primary:hover:not(:disabled) {331            background: var(--primary-dark);332            transform: translateY(-1px);333            box-shadow: var(--shadow-md);334        }335 336        .btn-secondary {337            background: var(--bg-primary);338            color: var(--text-primary);339            border: 1px solid var(--border);340            box-shadow: var(--shadow-sm);341        }342 343        .btn-secondary:hover:not(:disabled) {344            background: var(--bg-tertiary);345            transform: translateY(-1px);346        }347 348        .upload-controls {349            display: flex;350            align-items: center;351            gap: var(--space-3);352        }353 354        .status-area {355            margin-left: auto;356            display: flex;357            align-items: center;358            gap: var(--space-3);359        }360 361        /* Spinner */362        .spinner {363            width: 24px;364            height: 24px;365            border: 3px solid var(--border);366            border-top-color: var(--primary);367            border-radius: 50%;368            animation: spin 1s linear infinite;369            display: inline-block;370        }371 372        .spinner.hidden {373            display: none !important;374        }375 376        @keyframes spin {377            to {378                transform: rotate(360deg);379            }380        }381 382        .status-text {383            font-size: 0.875rem;384            color: var(--text-secondary);385        }386 387        /* Results Grid */388        .results-grid {389            display: grid;390            grid-template-columns: 1fr;391            gap: var(--space-6);392        }393 394        @media (min-width: 1024px) {395            .results-grid {396                grid-template-columns: 2fr 1fr;397                gap: var(--space-6);398            }399 400            /* CRITICAL FIX: Prevent grid blowout from wide tables */401            .results-grid>.main-results {402                min-width: 0;403                /* Allow grid cell to shrink below content size */404                overflow: hidden;405                /* Contain overflowing content */406            }407 408            .results-grid>.agent-panels {409                min-width: 0;410                /* Prevent agent panels from being pushed off-screen */411            }412        }413 414        /* Cards */415        .card {416            background: var(--card-bg);417            border-radius: var(--radius-xl);418            border: 1px solid var(--border);419            box-shadow: var(--shadow-md);420            overflow: hidden;421        }422 423        .card-header {424            padding: var(--space-4) var(--space-6);425            border-bottom: 1px solid var(--border-light);426            background: var(--bg-tertiary);427            display: flex;428            align-items: center;429            justify-content: space-between;430        }431 432        .card-title {433            margin: 0;434            font-size: 1rem;435            font-weight: 600;436            color: var(--text-primary);437            display: flex;438            align-items: center;439            gap: var(--space-2);440        }441 442        .card-content {443            padding: var(--space-6);444        }445 446        .answer-content {447            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;448            background: var(--bg-secondary);449            border-radius: var(--radius-lg);450            padding: var(--space-4);451            white-space: pre-wrap;452            color: var(--text-primary);453            font-size: 0.875rem;454            line-height: 1.6;455            min-height: 120px;456            border: 1px solid var(--border-light);457        }458 459        .sql-content {460            background: var(--gray-900);461            color: #E2E8F0;462            border-radius: var(--radius-lg);463            padding: var(--space-4);464            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;465            font-size: 0.875rem;466            line-height: 1.6;467            overflow-x: auto;468            max-height: 300px;469            overflow-y: auto;470        }471 472        /* Agent Panels */473        .agent-panels {474            display: grid;475            gap: var(--space-4);476        }477 478        .panel {479            border: 1px solid var(--border-light);480            border-radius: var(--radius-lg);481            overflow: hidden;482        }483 484        .panel-header {485            padding: var(--space-3) var(--space-4);486            background: var(--bg-tertiary);487            border-bottom: 1px solid var(--border-light);488            cursor: pointer;489            user-select: none;490            display: flex;491            align-items: center;492            justify-content: space-between;493            transition: var(--transition-fast);494        }495 496        .panel-header:hover {497            background: var(--bg-secondary);498        }499 500        .panel-title {501            font-size: 0.875rem;502            font-weight: 600;503            color: var(--text-primary);504        }505 506        .panel-content {507            padding: var(--space-4);508            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;509            font-size: 0.8rem;510            line-height: 1.5;511            color: var(--text-secondary);512            white-space: pre-wrap;513            max-height: 300px;514            overflow-y: auto;515            background: var(--bg-primary);516        }517 518        /* Tables */519        .table-wrapper {520            position: relative;521            margin: var(--space-4) 0;522            border-radius: var(--radius-lg);523            box-shadow: var(--shadow-lg);524            background: var(--card-bg);525            border: 1px solid var(--border);526            overflow: hidden;527            max-width: 100%;528            /* Prevent table from breaking grid layout */529        }530 531        .table-controls {532            display: flex;533            align-items: center;534            justify-content: space-between;535            padding: var(--space-3) var(--space-4);536            background: var(--bg-tertiary);537            border-bottom: 1px solid var(--border);538            gap: var(--space-3);539        }540 541        .table-controls-left {542            display: flex;543            align-items: center;544            gap: var(--space-3);545        }546 547        .table-controls-right {548            display: flex;549            align-items: center;550            gap: var(--space-2);551        }552 553        .table-info {554            font-size: 0.875rem;555            color: var(--text-secondary);556            font-weight: 500;557        }558 559        .table-resize-controls {560            display: flex;561            align-items: center;562            gap: var(--space-2);563        }564 565        .table-resize-btn {566            padding: var(--space-1) var(--space-2);567            border: 1px solid var(--border);568            border-radius: var(--radius-sm);569            background: var(--bg-primary);570            color: var(--text-secondary);571            font-size: 0.75rem;572            cursor: pointer;573            transition: var(--transition-normal);574        }575 576        .table-resize-btn:hover {577            background: var(--bg-secondary);578            color: var(--text-primary);579        }580 581        .table-resize-btn.active {582            background: var(--primary);583            color: white;584            border-color: var(--primary);585        }586 587        .table-container {588            overflow: auto;589            max-height: 70vh;590            max-width: 100%;591            position: relative;592            border: 1px solid var(--border);593            border-radius: var(--radius-lg);594        }595 596        .answer-table {597            width: 100%;598            border-collapse: separate;599            border-spacing: 0;600            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;601            font-size: 0.875rem;602            background: var(--card-bg);603            table-layout: auto;604            min-width: 100%;605        }606 607        .answer-table.compact {608            table-layout: fixed;609        }610 611        .answer-table.comfortable {612            table-layout: auto;613        }614 615        .answer-table.spacious {616            table-layout: auto;617            font-size: 1rem;618        }619 620        .answer-table th,621        .answer-table td {622            padding: var(--space-3) var(--space-4);623            text-align: left;624            border-bottom: 1px solid var(--border-light);625            border-right: 1px solid var(--border-light);626            vertical-align: top;627            position: relative;628        }629 630        .answer-table.compact th,631        .answer-table.compact td {632            padding: var(--space-2) var(--space-3);633            max-width: 120px;634            overflow: hidden;635            text-overflow: ellipsis;636            white-space: nowrap;637        }638 639        .answer-table.comfortable th,640        .answer-table.comfortable td {641            padding: var(--space-3) var(--space-4);642            max-width: 200px;643            word-wrap: break-word;644            white-space: normal;645        }646 647        .answer-table.spacious th,648        .answer-table.spacious td {649            padding: var(--space-4) var(--space-6);650            max-width: 300px;651            word-wrap: break-word;652            white-space: normal;653            overflow-wrap: break-word;654        }655 656        .answer-table th {657            background: #F1F5F9;658            /* Stronger header background */659            font-weight: 600;660            color: #1A202C;661            /* Darker header text */662            position: sticky;663            top: 0;664            z-index: 10;665            border-top: none;666            border-bottom: 2px solid #D1D9E0;667            /* Stronger header border */668        }669 670        .answer-table th:last-child,671        .answer-table td:last-child {672            border-right: none;673        }674 675        .answer-table tbody tr:hover {676            background: #E8F4FD;677            /* Subtle blue hover */678        }679 680        .answer-table tbody tr:nth-child(even) {681            background: #F7F9FC;682            /* More visible alternating rows */683        }684 685        .answer-table tbody tr:nth-child(even):hover {686            background: #E8F4FD;687            /* Consistent hover color */688        }689 690        /* Column resizer */691        .column-resizer {692            position: absolute;693            right: 0;694            top: 0;695            bottom: 0;696            width: 4px;697            cursor: col-resize;698            background: transparent;699            transition: background-color 0.2s;700        }701 702        .column-resizer:hover {703            background: var(--primary);704        }705 706        /* Responsive adjustments */707        @media (max-width: 768px) {708            .table-controls {709                flex-direction: column;710                align-items: stretch;711                gap: var(--space-2);712            }713 714            .table-controls-left,715            .table-controls-right {716                justify-content: space-between;717            }718 719            .answer-table th,720            .answer-table td {721                padding: var(--space-2) var(--space-3);722                font-size: 0.8rem;723            }724        }725 726        /* Footer */727        .footer {728            margin-top: var(--space-12);729            padding: var(--space-8) 0;730            text-align: center;731            color: var(--text-tertiary);732            font-size: 0.875rem;733            border-top: 1px solid var(--border-light);734        }735 736        /* Responsive */737        @media (max-width: 768px) {738            .main-content {739                padding: var(--space-4) var(--space-3);740            }741 742            .header-content {743                padding: var(--space-3);744            }745 746            .query-controls {747                flex-direction: column;748                align-items: stretch;749            }750 751            .status-area {752                margin-left: 0;753                margin-top: var(--space-3);754            }755        }756 757        /* Utility Classes */758        .hidden {759            display: none !important;760        }761 762        .text-success {763            color: var(--success) !important;764        }765 766        .text-warning {767            color: var(--warning) !important;768        }769 770        .text-error {771            color: var(--error) !important;772        }773 774        /* Upload Controls - Show/Hide */775        .upload-controls.hidden {776            display: none !important;777        }778 779        .upload-controls {780            display: flex !important;781            align-items: center;782            gap: var(--space-3);783        }784    </style>785 786    <!-- Prism for SQL highlighting -->787    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />788</head>789 790<body>791    <div class="app-container">792        <!-- Header -->793        <header class="header">794            <div class="header-content">795                <div class="brand">796                    <div class="brand-icon">797                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">798                            <path799                                d="M12 2V7M12 7L15 3M5 9.5H9.5M9.5 9.5L6 6M19 14.5H14.5M14.5 14.5L18 18M12 17V22M12 22L9 19"800                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />801                        </svg>802                    </div>803                    <div class="brand-text">804                        <h1>QueryLens</h1>805                        <p>Transform natural language into SQL, and documents into insight.</p>806                    </div>807                </div>808            </div>809        </header>810 811        <!-- Main Content -->812        <main class="main-content">813            <!-- Query Section -->814            <section class="query-section">815                <div class="query-header">816                    <h2 class="query-title">Ask a Question</h2>817                </div>818                <div class="query-body">819                    <div class="textarea-container">820                        <textarea id="question" class="query-textarea"821                            placeholder="e.g. Which department has the highest average salary?"></textarea>822                    </div>823 824                    <div class="query-controls">825                        <div class="mode-selector">826                            <label for="modeToggle">Mode:</label>827                            <select id="modeToggle" class="mode-select">828                                <option value="text2sql">Text-to-SQL</option>829                                <option value="ocr_qa">OCR Q&A</option>830                            </select>831                        </div>832 833                        <button id="ask" class="btn btn-primary">834                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"835                                stroke-width="2">836                                <path d="M12 19l7-7 3 3-7 7-3-3z" />837                                <path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" />838                            </svg>839                            Ask840                        </button>841 842                        <button id="recalc" class="btn btn-secondary">843                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"844                                stroke-width="2">845                                <path d="M1 4v6h6" />846                                <path d="M23 20v-6h-6" />847                                <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" />848                            </svg>849                            Re-execute850                        </button>851 852                        <div id="uploadControls" class="upload-controls hidden">853                            <button id="uploadBtn" class="btn btn-secondary">854                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"855                                    stroke-width="2">856                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />857                                    <polyline points="17,8 12,3 7,8" />858                                    <line x1="12" y1="3" x2="12" y2="15" />859                                </svg>860                                Upload Image861                            </button>862                            <span id="uploadStatus" class="status-text">No upload</span>863                        </div>864 865                        <div class="status-area">866                            <div id="spinner" class="spinner hidden"></div>867                            <span id="spinnerText" class="status-text hidden">Processing...</span>868                            <span id="status" class="status-text">Ready</span>869                            <span id="time" class="status-text"></span>870                        </div>871                    </div>872                </div>873            </section>874 875            <!-- Results Grid -->876            <div class="results-grid">877                <!-- Main Results Column -->878                <div class="main-results">879                    <!-- Answer Card -->880                    <div class="card">881                        <div class="card-header">882                            <h3 class="card-title">883                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"884                                    stroke-width="2">885                                    <path d="M9 11l3 3L22 4" />886                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />887                                </svg>888                                Answer889                            </h3>890                        </div>891                        <div class="card-content">892                            <div id="answer" class="answer-content">No answer yet.</div>893                        </div>894                    </div>895 896                    <!-- SQL Card -->897                    <div class="card" style="margin-top: var(--space-6);">898                        <details id="sql-details" open>899                            <summary class="card-header" style="cursor: pointer;">900                                <h3 class="card-title">901                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"902                                        stroke-width="2">903                                        <polyline points="16,18 22,12 16,6" />904                                        <polyline points="8,6 2,12 8,18" />905                                    </svg>906                                    Generated SQL907                                </h3>908                            </summary>909                            <div class="card-content">910                                <pre911                                    class="sql-content"><code id="sql" class="language-sql">-- SQL will appear here after the agent crafts a query --</code></pre>912                            </div>913                        </details>914                    </div>915                </div>916 917                <!-- Agent Panels Column -->918                <div class="agent-panels">919                    <div class="panel">920                        <details open>921                            <summary class="panel-header">922                                <span class="panel-title">923                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"924                                        stroke-width="2" style="margin-right: 0.5rem;">925                                        <path926                                            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" />927                                    </svg>928                                    Memory Agent929                                </span>930                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"931                                    stroke-width="2">932                                    <polyline points="6,9 12,15 18,9" />933                                </svg>934                            </summary>935                            <div id="memory" class="panel-content">—</div>936                        </details>937                    </div>938 939                    <div class="panel">940                        <details open>941                            <summary class="panel-header">942                                <span class="panel-title">943                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"944                                        stroke-width="2" style="margin-right: 0.5rem;">945                                        <path d="M12 20h9" />946                                        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />947                                    </svg>948                                    Query Craft Agent949                                </span>950                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"951                                    stroke-width="2">952                                    <polyline points="6,9 12,15 18,9" />953                                </svg>954                            </summary>955                            <div id="querycraft" class="panel-content">—</div>956                        </details>957                    </div>958 959                    <div class="panel">960                        <details open>961                            <summary class="panel-header">962                                <span class="panel-title">963                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"964                                        stroke-width="2" style="margin-right: 0.5rem;">965                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />966                                        <polyline points="14,2 14,8 20,8" />967                                        <line x1="16" y1="13" x2="8" y2="13" />968                                        <line x1="16" y1="17" x2="8" y2="17" />969                                        <polyline points="10,9 9,9 8,9" />970                                    </svg>971                                    Result Presenter Agent972                                </span>973                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"974                                    stroke-width="2">975                                    <polyline points="6,9 12,15 18,9" />976                                </svg>977                            </summary>978                            <div id="presenter" class="panel-content">—</div>979                        </details>980                    </div>981                </div>982            </div>983        </main>984 985        <!-- Footer -->986        <footer class="footer">987            <p>QueryLens — Powered by advanced AI agents for intelligent data analysis</p>988        </footer>989    </div>990 991    <script src="/static/app.js"></script>992    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>993    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>994</body>995 996</html>