Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"/> | |
| <title>Cortex — Multimodal Knowledge Intelligence</title> | |
| <link rel="stylesheet" href="/static/style.css"/> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <aside class="sidebar"> | |
| <div class="logo">Cor<span>tex</span></div> | |
| <div class="nav-label">Workspace</div> | |
| <div class="nav-item active" data-page="knowledge"><i class="ti ti-brain" aria-hidden="true"></i>Knowledge Base</div> | |
| <div class="nav-item" data-page="ask"><i class="ti ti-message-question" aria-hidden="true"></i>Ask Anything</div> | |
| <div class="nav-item" data-page="summaries"><i class="ti ti-file-text" aria-hidden="true"></i>Summaries</div> | |
| <div class="nav-item" data-page="connections"><i class="ti ti-topology-star" aria-hidden="true"></i>Connections</div> | |
| <div class="nav-label">Files</div> | |
| <div id="sidebar-files"></div> | |
| <div class="sidebar-footer"> | |
| <div class="api-key-box"> | |
| <div class="api-key-label">Groq API Key</div> | |
| <input class="api-key-input" type="password" id="apiKeyInput" placeholder="gsk_..."/> | |
| </div> | |
| </div> | |
| </aside> | |
| <main class="main"> | |
| <!-- KNOWLEDGE BASE --> | |
| <div class="page active" id="page-knowledge"> | |
| <div class="page-header"> | |
| <h1>Knowledge Base</h1> | |
| <p>Upload files across any format — Cortex reads, indexes and connects them intelligently</p> | |
| </div> | |
| <div class="stats-row"> | |
| <div class="stat-card"> | |
| <div class="stat-label">Documents</div> | |
| <div class="stat-value" id="stat-docs">0</div> | |
| <div class="stat-sub">indexed & ready</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">Chunks</div> | |
| <div class="stat-value" id="stat-chunks">0</div> | |
| <div class="stat-sub">vector embeddings</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-label">File Types</div> | |
| <div class="stat-value" id="stat-types">—</div> | |
| <div class="stat-sub">in knowledge base</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="upload-zone" id="uploadZone"> | |
| <div class="upload-icon"><i class="ti ti-cloud-upload" aria-hidden="true"></i></div> | |
| <h3>Drop files to expand your knowledge base</h3> | |
| <div class="hint">Cortex understands all of these natively</div> | |
| <div class="file-types"> | |
| <span class="badge">PDF</span> | |
| <span class="badge">Images</span> | |
| <span class="badge">Video</span> | |
| <span class="badge">TXT</span> | |
| <span class="badge">MD</span> | |
| </div> | |
| <input type="file" id="fileInput" accept=".pdf,.jpg,.jpeg,.png,.webp,.gif,.mp4,.mov,.avi,.mkv,.webm,.txt,.md"/> | |
| </div> | |
| <div class="status-bar" id="uploadStatus"></div> | |
| </div> | |
| <div id="files-grid-wrap"> | |
| <div class="card-label" style="margin-bottom:10px;">Indexed Files</div> | |
| <div class="files-grid" id="filesGrid"> | |
| <div class="empty-state" style="grid-column:1/-1;"> | |
| <i class="ti ti-inbox" aria-hidden="true"></i> | |
| <p>No files yet — upload something to get started</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ASK ANYTHING --> | |
| <div class="page" id="page-ask"> | |
| <div class="page-header"> | |
| <h1>Ask Anything</h1> | |
| <p>Ask questions across all your documents — Cortex finds the answer and cites its sources</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-label">Question</div> | |
| <div class="query-row"> | |
| <input class="query-input" type="text" id="queryInput" placeholder="What are the key findings? Summarize the main argument. Compare the two documents..."/> | |
| <button class="btn btn-dark" id="askBtn" disabled><i class="ti ti-arrow-right" aria-hidden="true"></i>Ask</button> | |
| </div> | |
| <div class="chat-history" id="chatHistory" style="margin-top:16px;display:none;"></div> | |
| </div> | |
| <div class="card" id="suggestionsCard"> | |
| <div class="card-label">Try asking</div> | |
| <div style="display:flex;flex-wrap:wrap;gap:7px;"> | |
| <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What are the main topics covered?</button> | |
| <button class="btn btn-outline btn-sm" onclick="setQuery(this)">Summarize the key findings</button> | |
| <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What entities are mentioned most?</button> | |
| <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What connections exist between documents?</button> | |
| <button class="btn btn-outline btn-sm" onclick="setQuery(this)">What are the action items?</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SUMMARIES --> | |
| <div class="page" id="page-summaries"> | |
| <div class="page-header"> | |
| <h1>Summaries</h1> | |
| <p>Auto-generated intelligence for each file in your knowledge base</p> | |
| </div> | |
| <div class="summary-list" id="summaryList"> | |
| <div class="empty-state"> | |
| <i class="ti ti-file-text" aria-hidden="true"></i> | |
| <p>Upload files to see auto-generated summaries and entities</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CONNECTIONS --> | |
| <div class="page" id="page-connections"> | |
| <div class="page-header"> | |
| <h1>Connections</h1> | |
| <p>Cross-document links and relationships discovered by Cortex</p> | |
| </div> | |
| <div class="conn-list" id="connList"> | |
| <div class="empty-state"> | |
| <i class="ti ti-topology-star" aria-hidden="true"></i> | |
| <p>Upload at least two files to discover cross-document connections</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <footer>CORTEX · MULTIMODAL KNOWLEDGE INTELLIGENCE · BUILT BY YASHIKA SAXENA</footer> | |
| <!-- FILE DETAIL MODAL --> | |
| <div id="fileModal" style="display:none; position:fixed; inset:0; z-index:200; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); padding:24px; overflow-y:auto;"> | |
| <div style="max-width:720px; margin:0 auto; background:#f5f0e8; border-radius:18px; border:0.5px solid #ddd0be; overflow:hidden;"> | |
| <div style="padding:20px 24px; border-bottom:0.5px solid #ecdecb; display:flex; align-items:center; justify-content:space-between;"> | |
| <div> | |
| <div id="modal-type" style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#c17a4a; text-transform:uppercase; margin-bottom:4px;"></div> | |
| <div id="modal-filename" style="font-family:'Playfair Display',serif; font-size:20px; font-weight:500; color:#1a1209;"></div> | |
| </div> | |
| <button onclick="closeModal()" style="background:none; border:0.5px solid #ddd0be; border-radius:8px; padding:8px 14px; cursor:pointer; font-family:'DM Sans',sans-serif; font-size:13px; color:#5a4a38;">Close</button> | |
| </div> | |
| <div id="modal-thumb-wrap" style="display:none;"> | |
| <img id="modal-thumb" style="width:100%; max-height:220px; object-fit:cover; display:block;"/> | |
| </div> | |
| <div style="padding:20px 24px; display:flex; flex-direction:column; gap:18px;"> | |
| <div> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Summary</div> | |
| <div id="modal-summary" style="font-family:'DM Sans',sans-serif; font-size:14px; color:#3d2e1f; line-height:1.8;"></div> | |
| </div> | |
| <div id="modal-facts-wrap"> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Key Facts</div> | |
| <div id="modal-facts" style="display:flex; flex-direction:column; gap:6px;"></div> | |
| </div> | |
| <div id="modal-sections-wrap"> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Sections</div> | |
| <div id="modal-sections" style="display:flex; flex-wrap:wrap; gap:6px;"></div> | |
| </div> | |
| <div> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Entities</div> | |
| <div id="modal-entities" style="display:flex; flex-wrap:wrap; gap:5px;"></div> | |
| </div> | |
| <div> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Topics</div> | |
| <div id="modal-topics" style="display:flex; flex-wrap:wrap; gap:5px;"></div> | |
| </div> | |
| <div> | |
| <div style="font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:0.2em; color:#a89a88; text-transform:uppercase; margin-bottom:8px;">Content Preview</div> | |
| <div id="modal-preview" style="font-family:'JetBrains Mono',monospace; font-size:11px; color:#7a6a58; line-height:1.7; background:#fff; border:0.5px solid #ddd0be; border-radius:8px; padding:14px; max-height:200px; overflow-y:auto; white-space:pre-wrap;"></div> | |
| </div> | |
| <div style="display:flex; gap:8px;"> | |
| <button class="btn btn-dark" onclick="askAboutFile(currentModalFile)"><i class="ti ti-message-question" aria-hidden="true"></i> Ask about this file</button> | |
| <button class="btn btn-outline" onclick="closeModal()">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |