Hugging Face's logo

Spaces:
broadfield-dev
/
memvid
Sleeping

App Files Community
broadfield-dev commited on
Commit
ad29c69
·
verified ·
1 Parent(s): 9b45948

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +130 -0
templates/index.html ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Memvid AI Memory Layer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ body { background-color: #0f172a; color: #e2e8f0; }
10
+ .glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); }
11
+ .accent { color: #38bdf8; }
12
+ </style>
13
+ </head>
14
+ <body class="min-h-screen p-6 font-sans">
15
+
16
+ <div class="max-w-4xl mx-auto space-y-8">
17
+
18
+ <!-- Header -->
19
+ <div class="text-center space-y-2">
20
+ <h1 class="text-4xl font-bold tracking-tight text-white">Memvid <span class="accent">Live Demo</span></h1>
21
+ <p class="text-slate-400">Single-file memory layer for AI agents.</p>
22
+ </div>
23
+
24
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
25
+
26
+ <!-- Left: Add Memory -->
27
+ <div class="glass p-6 rounded-xl shadow-lg">
28
+ <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
29
+ <span>📥</span> Append Memory
30
+ </h2>
31
+ <form id="addForm" class="space-y-4">
32
+ <div>
33
+ <label class="block text-sm font-medium text-slate-300 mb-1">Content</label>
34
+ <textarea id="content" name="content" rows="4" class="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-sky-500 outline-none" placeholder="Paste meeting notes, facts, or context here..."></textarea>
35
+ </div>
36
+ <div>
37
+ <label class="block text-sm font-medium text-slate-300 mb-1">Tags (Optional)</label>
38
+ <input type="text" id="tags" name="tags" class="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-sky-500 outline-none" placeholder="project:alpha, type:note">
39
+ </div>
40
+ <button type="submit" class="w-full bg-sky-600 hover:bg-sky-500 text-white font-medium py-2 rounded-lg transition">
41
+ Commit to Memory
42
+ </button>
43
+ </form>
44
+ <div id="addStatus" class="mt-4 text-sm text-center hidden"></div>
45
+ </div>
46
+
47
+ <!-- Right: Retrieval -->
48
+ <div class="glass p-6 rounded-xl shadow-lg flex flex-col">
49
+ <h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
50
+ <span>🔍</span> Neural Retrieval
51
+ </h2>
52
+ <form id="searchForm" class="space-y-4 mb-4">
53
+ <div class="flex gap-2">
54
+ <input type="text" id="query" name="query" class="flex-1 bg-slate-800 border border-slate-700 rounded-lg p-3 text-sm focus:ring-2 focus:ring-sky-500 outline-none" placeholder="Search your memory...">
55
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg transition">Search</button>
56
+ </div>
57
+ </form>
58
+
59
+ <!-- Results Area -->
60
+ <div id="resultsArea" class="flex-1 overflow-y-auto space-y-3 max-h-[300px] pr-2">
61
+ <p class="text-slate-500 text-sm text-center italic mt-10">Waiting for query...</p>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Footer -->
67
+ <div class="text-center text-xs text-slate-500 pt-8 border-t border-slate-800">
68
+ Powered by <a href="https://memvid.com" class="text-sky-400 hover:underline">Memvid</a> & Flask
69
+ </div>
70
+ </div>
71
+
72
+ <script>
73
+ // Handle Add Memory
74
+ document.getElementById('addForm').addEventListener('submit', async (e) => {
75
+ e.preventDefault();
76
+ const formData = new FormData(e.target);
77
+ const status = document.getElementById('addStatus');
78
+
79
+ try {
80
+ const res = await fetch('/add', { method: 'POST', body: formData });
81
+ const data = await res.json();
82
+
83
+ status.classList.remove('hidden');
84
+ if (data.success) {
85
+ status.textContent = "✅ " + data.message;
86
+ status.className = "mt-4 text-sm text-center text-green-400";
87
+ e.target.reset();
88
+ setTimeout(() => status.classList.add('hidden'), 3000);
89
+ } else {
90
+ status.textContent = "❌ " + data.error;
91
+ status.className = "mt-4 text-sm text-center text-red-400";
92
+ }
93
+ } catch (err) {
94
+ console.error(err);
95
+ }
96
+ });
97
+
98
+ // Handle Search
99
+ document.getElementById('searchForm').addEventListener('submit', async (e) => {
100
+ e.preventDefault();
101
+ const formData = new FormData(e.target);
102
+ const resultsArea = document.getElementById('resultsArea');
103
+
104
+ resultsArea.innerHTML = '<p class="text-slate-500 text-center animate-pulse">Searching...</p>';
105
+
106
+ try {
107
+ const res = await fetch('/search', { method: 'POST', body: formData });
108
+ const data = await res.json();
109
+
110
+ resultsArea.innerHTML = '';
111
+
112
+ if (data.success && data.results.length > 0) {
113
+ data.results.forEach(item => {
114
+ const div = document.createElement('div');
115
+ div.className = "bg-slate-800/50 p-3 rounded border-l-2 border-indigo-500 text-sm text-slate-200";
116
+ div.textContent = item.text;
117
+ resultsArea.appendChild(div);
118
+ });
119
+ } else if (data.success) {
120
+ resultsArea.innerHTML = '<p class="text-slate-500 text-sm text-center">No memories found matching that query.</p>';
121
+ } else {
122
+ resultsArea.innerHTML = `<p class="text-red-400 text-sm text-center">Error: ${data.error}</p>`;
123
+ }
124
+ } catch (err) {
125
+ console.error(err);
126
+ }
127
+ });
128
+ </script>
129
+ </body>
130
+ </html>