Spaces:
Running
Running
File size: 6,184 Bytes
7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 7abca39 6c74059 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | <!DOCTYPE html>
<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> |