Spaces:
Paused
Paused
Update templates/index.html
Browse files- templates/index.html +54 -11
templates/index.html
CHANGED
|
@@ -9,6 +9,12 @@
|
|
| 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">
|
|
@@ -33,10 +39,6 @@
|
|
| 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>
|
|
@@ -57,7 +59,7 @@
|
|
| 57 |
</form>
|
| 58 |
|
| 59 |
<!-- Results Area -->
|
| 60 |
-
<div id="resultsArea" class="flex-1 overflow-y-auto space-y-3 max-h-[
|
| 61 |
<p class="text-slate-500 text-sm text-center italic mt-10">Waiting for query...</p>
|
| 62 |
</div>
|
| 63 |
</div>
|
|
@@ -70,12 +72,27 @@
|
|
| 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();
|
|
@@ -85,13 +102,17 @@
|
|
| 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'),
|
| 89 |
} else {
|
| 90 |
status.textContent = "❌ " + data.error;
|
| 91 |
status.className = "mt-4 text-sm text-center text-red-400";
|
| 92 |
}
|
| 93 |
} catch (err) {
|
| 94 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 95 |
}
|
| 96 |
});
|
| 97 |
|
|
@@ -101,7 +122,7 @@
|
|
| 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">
|
| 105 |
|
| 106 |
try {
|
| 107 |
const res = await fetch('/search', { method: 'POST', body: formData });
|
|
@@ -111,18 +132,40 @@
|
|
| 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-
|
| 116 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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
|
| 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>
|
|
|
|
| 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 |
+
|
| 13 |
+
/* Ensures the raw snippet text wraps and preserves newlines */
|
| 14 |
+
.snippet-text {
|
| 15 |
+
white-space: pre-wrap;
|
| 16 |
+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
| 17 |
+
}
|
| 18 |
</style>
|
| 19 |
</head>
|
| 20 |
<body class="min-h-screen p-6 font-sans">
|
|
|
|
| 39 |
<label class="block text-sm font-medium text-slate-300 mb-1">Content</label>
|
| 40 |
<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>
|
| 41 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 42 |
<button type="submit" class="w-full bg-sky-600 hover:bg-sky-500 text-white font-medium py-2 rounded-lg transition">
|
| 43 |
Commit to Memory
|
| 44 |
</button>
|
|
|
|
| 59 |
</form>
|
| 60 |
|
| 61 |
<!-- Results Area -->
|
| 62 |
+
<div id="resultsArea" class="flex-1 overflow-y-auto space-y-3 max-h-[400px] pr-2">
|
| 63 |
<p class="text-slate-500 text-sm text-center italic mt-10">Waiting for query...</p>
|
| 64 |
</div>
|
| 65 |
</div>
|
|
|
|
| 72 |
</div>
|
| 73 |
|
| 74 |
<script>
|
| 75 |
+
// Helper to format date nicely
|
| 76 |
+
function formatDate(dateString) {
|
| 77 |
+
if (!dateString) return '';
|
| 78 |
+
try {
|
| 79 |
+
const date = new Date(dateString);
|
| 80 |
+
return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
|
| 81 |
+
} catch (e) {
|
| 82 |
+
return dateString;
|
| 83 |
+
}
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
// Handle Add Memory
|
| 87 |
document.getElementById('addForm').addEventListener('submit', async (e) => {
|
| 88 |
e.preventDefault();
|
| 89 |
const formData = new FormData(e.target);
|
| 90 |
const status = document.getElementById('addStatus');
|
| 91 |
+
const btn = e.target.querySelector('button');
|
| 92 |
|
| 93 |
+
btn.disabled = true;
|
| 94 |
+
btn.textContent = "Committing...";
|
| 95 |
+
|
| 96 |
try {
|
| 97 |
const res = await fetch('/add', { method: 'POST', body: formData });
|
| 98 |
const data = await res.json();
|
|
|
|
| 102 |
status.textContent = "✅ " + data.message;
|
| 103 |
status.className = "mt-4 text-sm text-center text-green-400";
|
| 104 |
e.target.reset();
|
| 105 |
+
setTimeout(() => status.classList.add('hidden'), 4000);
|
| 106 |
} else {
|
| 107 |
status.textContent = "❌ " + data.error;
|
| 108 |
status.className = "mt-4 text-sm text-center text-red-400";
|
| 109 |
}
|
| 110 |
} catch (err) {
|
| 111 |
+
status.textContent = "❌ Connection Error";
|
| 112 |
+
status.className = "mt-4 text-sm text-center text-red-400";
|
| 113 |
+
} finally {
|
| 114 |
+
btn.disabled = false;
|
| 115 |
+
btn.textContent = "Commit to Memory";
|
| 116 |
}
|
| 117 |
});
|
| 118 |
|
|
|
|
| 122 |
const formData = new FormData(e.target);
|
| 123 |
const resultsArea = document.getElementById('resultsArea');
|
| 124 |
|
| 125 |
+
resultsArea.innerHTML = '<p class="text-slate-500 text-center animate-pulse">Scanning Memory Timeline...</p>';
|
| 126 |
|
| 127 |
try {
|
| 128 |
const res = await fetch('/search', { method: 'POST', body: formData });
|
|
|
|
| 132 |
|
| 133 |
if (data.success && data.results.length > 0) {
|
| 134 |
data.results.forEach(item => {
|
| 135 |
+
// Create Card
|
| 136 |
const div = document.createElement('div');
|
| 137 |
+
div.className = "bg-slate-800/50 p-4 rounded-lg border border-slate-700 hover:border-indigo-500/50 transition flex flex-col gap-2";
|
| 138 |
+
|
| 139 |
+
// Header: Title + Score
|
| 140 |
+
const header = document.createElement('div');
|
| 141 |
+
header.className = "flex justify-between items-start";
|
| 142 |
+
header.innerHTML = `
|
| 143 |
+
<div>
|
| 144 |
+
<h3 class="font-semibold text-slate-200 text-sm">${item.title}</h3>
|
| 145 |
+
<span class="text-xs text-slate-500">${formatDate(item.date)}</span>
|
| 146 |
+
</div>
|
| 147 |
+
<span class="bg-indigo-900/50 text-indigo-300 text-xs px-2 py-1 rounded font-mono">
|
| 148 |
+
score: ${item.score}
|
| 149 |
+
</span>
|
| 150 |
+
`;
|
| 151 |
+
|
| 152 |
+
// Body: Snippet
|
| 153 |
+
const body = document.createElement('div');
|
| 154 |
+
body.className = "text-xs text-slate-300 snippet-text bg-slate-900/50 p-2 rounded";
|
| 155 |
+
body.textContent = item.snippet;
|
| 156 |
+
|
| 157 |
+
div.appendChild(header);
|
| 158 |
+
div.appendChild(body);
|
| 159 |
resultsArea.appendChild(div);
|
| 160 |
});
|
| 161 |
} else if (data.success) {
|
| 162 |
+
resultsArea.innerHTML = '<p class="text-slate-500 text-sm text-center">No high-confidence memories found.</p>';
|
| 163 |
} else {
|
| 164 |
resultsArea.innerHTML = `<p class="text-red-400 text-sm text-center">Error: ${data.error}</p>`;
|
| 165 |
}
|
| 166 |
} catch (err) {
|
| 167 |
console.error(err);
|
| 168 |
+
resultsArea.innerHTML = `<p class="text-red-400 text-sm text-center">Connection Error</p>`;
|
| 169 |
}
|
| 170 |
});
|
| 171 |
</script>
|