| <!DOCTYPE html> |
| <html lang="en" data-theme="dark"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>InferencePort AI</title> |
| <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=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/css/tokens.css" /> |
| <link rel="stylesheet" href="/css/base.css" /> |
| <link rel="stylesheet" href="/css/sidebar.css" /> |
| <link rel="stylesheet" href="/css/chat.css" /> |
| <link rel="stylesheet" href="/css/modals.css" /> |
| <link rel="stylesheet" href="/css/input.css" /> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" /> |
| </head> |
| <body> |
| |
| <div id="share-import-banner" class="share-banner hidden"> |
| <div class="share-banner-inner"> |
| <span class="share-icon">🔗</span> |
| <span id="share-banner-text">Importing shared session…</span> |
| <button id="share-import-btn" class="btn-primary">Import Session</button> |
| <button id="share-dismiss-btn" class="btn-ghost">Dismiss</button> |
| </div> |
| </div> |
|
|
| <div id="app"> |
| |
| <aside id="sidebar" class="sidebar collapsed"> |
| <div class="sidebar-top"> |
| <button id="new-chat-btn" class="sidebar-icon-btn" title="New Chat"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg> |
| </button> |
| <button id="toggle-sidebar-btn" class="sidebar-icon-btn" title="Toggle sidebar"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg> |
| </button> |
| </div> |
|
|
| <div class="sidebar-sessions" id="sidebar-sessions"> |
| <div class="session-list" id="session-list"></div> |
| </div> |
|
|
| <div class="sidebar-bottom" id="sidebar-bottom"> |
| |
| <div id="guest-section" class="account-section"> |
| <button id="signin-btn" class="btn-signin">Sign In</button> |
| <button id="settings-btn-guest" class="sidebar-icon-btn" title="Settings"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> |
| </button> |
| </div> |
|
|
| |
| <div id="user-section" class="account-section hidden"> |
| <button id="user-profile-btn" class="user-profile-btn"> |
| <div class="user-avatar" id="user-avatar">?</div> |
| <div class="user-info"> |
| <span class="user-name" id="user-name-display">—</span> |
| <span class="user-plan" id="user-plan-display">Free</span> |
| </div> |
| </button> |
| <button id="settings-btn" class="sidebar-icon-btn" title="Settings"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> |
| </button> |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <main id="main"> |
| |
| <div id="welcome-view" class="welcome-view"> |
| <h1 class="welcome-title">What's on your mind?</h1> |
| <div class="welcome-input-wrap"> |
| <div class="center-input-container"> |
| <div class="attach-btn-wrap"> |
| <button id="center-attach-btn" class="attach-btn" title="Attach"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> |
| </button> |
| </div> |
| <textarea id="center-input" class="center-textarea" placeholder="Ask anything…" rows="1"></textarea> |
| <div class="center-input-actions"> |
| <button id="center-tool-search" class="tool-btn" data-tool="webSearch" title="Web Search"> |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> |
| </button> |
| <button id="center-tool-image" class="tool-btn" data-tool="imageGen" title="Image"> |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> |
| </button> |
| <button id="center-tool-video" class="tool-btn" data-tool="videoGen" title="Video"> |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg> |
| </button> |
| <button id="center-tool-audio" class="tool-btn" data-tool="audioGen" title="Audio"> |
| <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> |
| </button> |
| <button id="center-send-btn" class="send-btn-center"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="chat-view" class="chat-view hidden"> |
| <div id="chat-messages" class="chat-messages"></div> |
| </div> |
|
|
| |
| <div id="bottom-input-bar" class="bottom-input-bar hidden"> |
| <div class="file-preview-row" id="file-preview-row"></div> |
| <div class="bottom-input-wrap"> |
| <button id="bottom-attach-btn" class="attach-btn-bottom" title="Attach"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> |
| </button> |
| <div class="bottom-textarea-wrap"> |
| <div class="tool-row"> |
| <button class="tool-btn-sm active" data-tool="webSearch" title="Web Search"> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> |
| <span>Search</span> |
| </button> |
| <button class="tool-btn-sm" data-tool="imageGen" title="Image"> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> |
| <span>Image</span> |
| </button> |
| <button class="tool-btn-sm" data-tool="videoGen" title="Video"> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg> |
| <span>Video</span> |
| </button> |
| <button class="tool-btn-sm" data-tool="audioGen" title="Audio"> |
| <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> |
| <span>Audio</span> |
| </button> |
| </div> |
| <textarea id="bottom-input" class="bottom-textarea" placeholder="Ask anything…" rows="1"></textarea> |
| </div> |
| <button id="bottom-send-btn" class="send-btn-bottom"> |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg> |
| </button> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| |
| <div id="session-context-menu" class="context-menu hidden"></div> |
| <div id="user-context-menu" class="context-menu hidden"></div> |
| <div id="attach-context-menu" class="context-menu hidden"></div> |
|
|
| |
| <div id="modal-overlay" class="modal-overlay hidden"> |
| <div id="modal-box" class="modal-box"></div> |
| </div> |
|
|
| |
| <div id="notifications" class="notifications"></div> |
|
|
| |
| <input type="file" id="file-input" multiple style="display:none" /> |
| <input type="file" id="image-input" accept="image/*" multiple style="display:none" /> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script> |
| <script type="module" src="/js/app.js"></script> |
| </body> |
| </html> |
|
|
