Upload 3 files

app.js

@@ -0,0 +1,125 @@
+const form = document.getElementById('chat-form');
+const input = document.getElementById('user-input');
+const sendBtn = document.getElementById('send-btn');
+const chatHistory = document.getElementById('chat-history');
+const apiKeyInput = document.getElementById('api-key');
+const dot = document.getElementById('connection-dot');
+const statusText = document.getElementById('connection-text');
+
+let conversation = [];
+
+// Auto-adjust textarea height
+input.addEventListener('input', function () {
+    this.style.height = 'auto';
+    this.style.height = (this.scrollHeight) + 'px';
+    if (this.value.trim() !== '' && apiKeyInput.value.trim() !== '') {
+        sendBtn.disabled = false;
+    } else {
+        sendBtn.disabled = true;
+    }
+});
+
+input.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (!sendBtn.disabled) form.dispatchEvent(new Event('submit'));
+    }
+});
+
+apiKeyInput.addEventListener('input', () => {
+    if (apiKeyInput.value.trim().length > 10) {
+        dot.className = 'dot online';
+        statusText.textContent = 'API Key Ready';
+        if (input.value.trim() !== '') sendBtn.disabled = false;
+    } else {
+        dot.className = 'dot offline';
+        statusText.textContent = 'Waiting for key...';
+        sendBtn.disabled = true;
+    }
+});
+
+function appendBubble(role, htmlContent) {
+    const bubble = document.createElement('div');
+    bubble.className = `bubble ${role}`;
+
+    const avatar = document.createElement('div');
+    avatar.className = 'avatar';
+    avatar.innerHTML = role === 'assistant' ? '<i class="fa-solid fa-robot"></i>' : '<i class="fa-solid fa-user"></i>';
+
+    const msg = document.createElement('div');
+    msg.className = 'message';
+    msg.innerHTML = htmlContent;
+
+    bubble.appendChild(avatar);
+    bubble.appendChild(msg);
+    chatHistory.appendChild(bubble);
+    chatHistory.scrollTop = chatHistory.scrollHeight;
+
+    return msg;
+}
+
+form.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const userText = input.value.trim();
+    if (!userText) return;
+
+    const apiKey = apiKeyInput.value.trim();
+    const llmModel = document.getElementById('llm-model').value.trim();
+    const embedModel = document.getElementById('embed-model').value.trim();
+    const endpoint = document.getElementById('api-endpoint').value.trim();
+
+    if (!apiKey) {
+        alert("Please enter your OpenRouter API Key.");
+        return;
+    }
+
+    // UI Update
+    input.value = '';
+    input.style.height = 'auto';
+    sendBtn.disabled = true;
+    appendBubble('user', `<p>${userText}</p>`);
+
+    conversation.push({ role: "user", content: userText });
+
+    // Show typing
+    const typingMsg = appendBubble('assistant', '<div class="typing-indicator">Connecting to Backend...<br><small><i>Injecting context and pinging OpenRouter</i></small></div>');
+
+    try {
+        const payload = {
+            model: llmModel,
+            embed_model: embedModel,
+            messages: conversation
+        };
+
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${apiKey}`
+            },
+            body: JSON.stringify(payload)
+        });
+
+        if (!response.ok) {
+            let errText = await response.text();
+            throw new Error(`Server Error (${response.status}): ${errText}`);
+        }
+
+        const data = await response.json();
+        const aiAnswer = data.choices[0].message.content;
+
+        // Update conversation history
+        conversation.push({ role: "assistant", content: aiAnswer });
+
+        // Parse markdown and show
+        typingMsg.innerHTML = marked.parse(aiAnswer);
+
+    } catch (err) {
+        console.error(err);
+        typingMsg.innerHTML = `<span style="color: #ef4444;">Connection failed: ${err.message}</span>`;
+        // Remove the failed user message from internal state
+        conversation.pop();
+    }
+
+    if (input.value.trim() !== '') sendBtn.disabled = false;
+});

index.html

@@ -0,0 +1,127 @@
+<!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="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 class="input-group" style="margin-top: 10px;">
+                    <label>Backend Endpoint (Railway URL)</label>
+                    <!-- Provide the internal name user gave, but note it might need to change to public URL depending on deployment -->
+                    <input type="text" id="api-endpoint" value="https://prod-infinit-memory.up.railway.app/v1/chat/completions">
+                </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>

style.css

@@ -0,0 +1,183 @@
+:root {
+    --bg-dark: #0f172a;
+    --surface: rgba(30, 41, 59, 0.7);
+    --surface-border: rgba(255, 255, 255, 0.1);
+    --primary: #3b82f6;
+    --primary-glow: rgba(59, 130, 246, 0.5);
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --danger: #ef4444;
+    --danger-bg: rgba(239, 68, 68, 0.1);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: var(--bg-dark);
+    color: var(--text-main);
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Background elements */
+.glow-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    z-index: -1;
+    opacity: 0.5;
+}
+.orb-1 { top: -10%; left: -10%; width: 40vw; height: 40vw; background: rgba(59, 130, 246, 0.3); }
+.orb-2 { bottom: -20%; right: -10%; width: 50vw; height: 50vw; background: rgba(139, 92, 246, 0.2); }
+.orb-3 { top: 40%; left: 40%; width: 30vw; height: 30vw; background: rgba(16, 185, 129, 0.1); }
+
+/* Main Container Layout */
+.container {
+    display: flex;
+    width: 95vw;
+    max-width: 1400px;
+    height: 90vh;
+    background: var(--surface);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--surface-border);
+    border-radius: 20px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+}
+
+/* LEFT PANEL */
+.info-panel {
+    flex: 0 0 400px;
+    border-right: 1px solid var(--surface-border);
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    background: rgba(15, 23, 42, 0.4);
+}
+
+.logo-area {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 2rem;
+}
+.logo-area i { font-size: 2rem; color: var(--primary); }
+.logo-area h2 { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.5px; position: relative;}
+.beta-badge {
+    position: absolute; top: -10px; right: -40px;
+    background: var(--danger); font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; font-weight: bold;
+}
+
+.hero-claims h1 {
+    font-size: 2.2rem;
+    line-height: 1.1;
+    margin-bottom: 0.5rem;
+    background: linear-gradient(to right, #60a5fa, #a78bfa);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.hero-claims i { font-style: italic; }
+.sub-hero { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 2rem; line-height: 1.5; }
+
+.claims-list { list-style: none; margin-bottom: 2rem; }
+.claims-list li {
+    display: flex; gap: 1rem; margin-bottom: 1.5rem;
+}
+.claim-icon {
+    width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.05);
+    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #60a5fa; flex-shrink: 0;
+}
+.claim-text strong { display: block; font-size: 0.95rem; margin-bottom: 0.2rem; color: #e2e8f0; }
+.claim-text span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; display: block; }
+
+/* Config Section */
+.config-card {
+    background: rgba(0,0,0,0.2); border: 1px solid var(--surface-border); border-radius: 12px; padding: 1.5rem; margin-top: auto;
+}
+.config-card h3 { font-size: 0.9rem; margin-bottom: 1rem; color: #cbd5e1; display: flex; align-items: center; gap: 8px;}
+
+.alert-box {
+    display: flex; gap: 10px; padding: 12px; border-radius: 8px; font-size: 0.75rem; line-height: 1.4; margin-bottom: 1rem;
+}
+.alert-box.warning { background: var(--danger-bg); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; }
+.alert-box i { font-size: 1rem; }
+
+.input-group { margin-bottom: 1rem; }
+.input-group label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;}
+.input-group label .req { color: var(--danger); }
+.input-group input {
+    width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--surface-border); border-radius: 6px;
+    padding: 10px 12px; color: var(--text-main); font-family: monospace; font-size: 0.85rem; outline: none; transition: 0.2s;
+}
+.input-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-glow); }
+
+/* RIGHT PANEL: CHAT */
+.chat-container { flex: 1; display: flex; flex-direction: column; position: relative; }
+
+.chat-header {
+    height: 70px; border-bottom: 1px solid var(--surface-border); display: flex; justify-content: space-between; align-items: center; padding: 0 2rem;
+    background: rgba(255,255,255,0.02);
+}
+.header-title { font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 10px;}
+.header-title i { color: #a78bfa; }
+
+.status-indicator { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); }
+.dot { width: 8px; height: 8px; border-radius: 50%; }
+.dot.offline { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
+.dot.online { background: #10b981; box-shadow: 0 0 8px #10b981; }
+
+.chat-bubbles { flex: 1; padding: 2rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.5rem; }
+
+.bubble { display: flex; gap: 1rem; max-width: 85%; }
+.bubble.assistant { align-self: flex-start; }
+.bubble.user { align-self: flex-end; flex-direction: row-reverse; }
+
+.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.assistant .avatar { background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: white; }
+.user .avatar { background: rgba(255,255,255,0.1); color: #cbd5e1; }
+
+.message {
+    padding: 1rem 1.2rem; border-radius: 12px; font-size: 0.95rem; line-height: 1.6;
+}
+.assistant .message { background: rgba(255,255,255,0.03); border: 1px solid var(--surface-border); border-top-left-radius: 2px;}
+.user .message { background: var(--primary); color: white; border-top-right-radius: 2px;}
+
+.message p { margin-bottom: 0.5rem; }
+.message p:last-child { margin-bottom: 0; }
+.message pre { background: rgba(0,0,0,0.3); padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 10px 0; border: 1px solid rgba(255,255,255,0.1); }
+.message code { font-family: monospace; font-size: 0.85em; }
+
+/* Input Area */
+.chat-input-area {
+    padding: 1.5rem 2rem; border-top: 1px solid var(--surface-border); background: rgba(15, 23, 42, 0.6);
+}
+#chat-form {
+    display: flex; gap: 1rem; background: rgba(0,0,0,0.2); border: 1px solid var(--surface-border); padding: 0.5rem; border-radius: 12px; align-items: flex-end;
+}
+#chat-form:focus-within { border-color: rgba(96, 165, 250, 0.5); }
+
+textarea {
+    flex: 1; background: transparent; border: none; color: white; font-family: inherit; font-size: 0.95rem; padding: 0.8rem; resize: none; outline: none; max-height: 150px; line-height: 1.5;
+}
+#send-btn {
+    width: 44px; height: 44px; border-radius: 10px; border: none; background: var(--primary); color: white; font-size: 1.1rem; cursor: pointer; transition: 0.2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+}
+#send-btn:hover:not(:disabled) { background: #2563eb; transform: translateY(-1px); }
+#send-btn:disabled { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); cursor: not-allowed; }
+
+/* Responsive */
+@media (max-width: 900px) {
+    .container { flex-direction: column; }
+    .info-panel { flex: none; height: 40vh; border-right: none; border-bottom: 1px solid var(--surface-border); padding: 1.5rem;}
+    .hero-claims { display: none; } /* Hide claims on small mobile space */
+}