Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Infinite Memory | Cloud-Hybrid AI</title> | |
| <!-- Fonts: Inter for modern clean UI --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| </head> | |
| <body> | |
| <!-- Background Elements --> | |
| <div class="glow-orb orb-1"></div> | |
| <div class="glow-orb orb-2"></div> | |
| <div class="glow-orb orb-3"></div> | |
| <div class="container"> | |
| <!-- Left Panel: Claims & Info --> | |
| <aside class="info-panel"> | |
| <div class="logo-area"> | |
| <i class="fa-solid fa-brain-circuit"></i> | |
| <h2>InfiniteMemory<span class="beta-badge">DEMO</span></h2> | |
| </div> | |
| <div class="hero-claims"> | |
| <h1>Scale Context <i>Infinitely.</i></h1> | |
| <p class="sub-hero">A revolutionary Cloud-Hybrid memory architecture that offloads context storage.</p> | |
| <ul class="claims-list"> | |
| <li> | |
| <div class="claim-icon"><i class="fa-solid fa-bolt"></i></div> | |
| <div class="claim-text"> | |
| <strong>Save 90% on Token Costs</strong> | |
| <span>Dramatically cuts expensive prompt sizes. Only the absolute best context is sent to | |
| the LLM.</span> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="claim-icon"><i class="fa-solid fa-infinity"></i></div> | |
| <div class="claim-text"> | |
| <strong>10M+ Context Window</strong> | |
| <span>Store a lifetime of data without constantly passing it back and forth every API | |
| call.</span> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="claim-icon"><i class="fa-solid fa-microchip"></i></div> | |
| <div class="claim-text"> | |
| <strong>Permanent Agent Memory</strong> | |
| <span>Your agent remembers everything forever for a fraction of standard vector database | |
| costs.</span> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Configuration / Security settings --> | |
| <div class="config-card"> | |
| <h3><i class="fa-solid fa-shield-halved"></i> Bring Your Own Key (BYOK)</h3> | |
| <div class="alert-box warning"> | |
| <i class="fa-solid fa-triangle-exclamation"></i> | |
| <div> | |
| <strong>DEMO ONLY:</strong> We do not store keys. Communication is HTTPS encrypted. However, you | |
| are strictly responsible for your API Key. Please use <b>revokable</b> keys and we highly advise | |
| testing with <i>Free</i> OpenRouter models! | |
| </div> | |
| </div> | |
| <div class="input-group"> | |
| <label>OpenRouter API Key <span class="req">*</span></label> | |
| <input type="password" id="api-key" placeholder="sk-or-v1-..." autocomplete="off"> | |
| </div> | |
| <div class="input-group"> | |
| <label>Username (For Isolated Memory) <span class="req">*</span></label> | |
| <input type="text" id="username" placeholder="e.g. johndoe" autocomplete="off" value="demo_user"> | |
| </div> | |
| <div class="model-selectors"> | |
| <div class="input-group"> | |
| <label>LLM Reasoning Model</label> | |
| <input type="text" id="llm-model" value="openai/gpt-oss-120b:free"> | |
| </div> | |
| <div class="input-group"> | |
| <label>Embedding Model</label> | |
| <input type="text" id="embed-model" value="nvidia/llama-nemotron-embed-vl-1b-v2:free"> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Right Panel: Chat Interface --> | |
| <main class="chat-container"> | |
| <header class="chat-header"> | |
| <div class="header-title"> | |
| <i class="fa-brands fa-rocketchat"></i> Live Agent Output | |
| </div> | |
| <div class="status-indicator"> | |
| <span class="dot offline" id="connection-dot"></span> | |
| <span id="connection-text">Waiting for key...</span> | |
| </div> | |
| </header> | |
| <div class="chat-bubbles" id="chat-history"> | |
| <div class="bubble assistant"> | |
| <div class="avatar"><i class="fa-solid fa-robot"></i></div> | |
| <div class="message"> | |
| Hello! I am your Infinite Memory agent. Provide your API key on the left, and try asking me | |
| something complex. I instantly query millions of tokens without maxing out your cloud budget. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-input-area"> | |
| <form id="chat-form"> | |
| <textarea id="user-input" placeholder="Type a message... (Press Enter to send)" rows="1"></textarea> | |
| <button type="submit" id="send-btn" disabled> | |
| <i class="fa-solid fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </main> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |