Hugging Face's logo

Spaces:
privateuserh
/
aurarecall1
Running

App Files Community
privateuserh commited on
Commit
c190eb8
·
verified ·
1 Parent(s): 7de3def

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +356 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aurarecall1
3
- emoji: 💻
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: aurarecall1
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,356 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AuraRecall | AI-Powered Memory System</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .file-upload-container {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .file-upload-container:hover {
14
+ transform: translateY(-2px);
15
+ }
16
+ .ai-response-container {
17
+ max-height: 300px;
18
+ overflow-y: auto;
19
+ }
20
+ .pulse-animation {
21
+ animation: pulse 2s infinite;
22
+ }
23
+ @keyframes pulse {
24
+ 0% { opacity: 0.6; }
25
+ 50% { opacity: 1; }
26
+ 100% { opacity: 0.6; }
27
+ }
28
+ .gradient-border {
29
+ border: 2px solid transparent;
30
+ background: linear-gradient(white, white) padding-box,
31
+ linear-gradient(to right, #6366f1, #8b5cf6) border-box;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 min-h-screen">
36
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
37
+ <!-- Header -->
38
+ <header class="mb-12 text-center">
39
+ <div class="flex justify-center items-center mb-4">
40
+ <div class="w-12 h-12 rounded-full bg-indigo-500 flex items-center justify-center mr-4">
41
+ <i class="fas fa-brain text-white text-xl"></i>
42
+ </div>
43
+ <h1 class="text-4xl font-bold text-indigo-800">AuraRecall</h1>
44
+ </div>
45
+ <h2 class="text-2xl font-semibold text-gray-700">AI-Powered Memory System with Cloudflare Integration</h2>
46
+ <div class="w-24 h-1 bg-indigo-500 mx-auto mt-4 rounded-full"></div>
47
+ </header>
48
+
49
+ <!-- Main Content -->
50
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
51
+ <!-- File Upload Section -->
52
+ <div class="bg-white rounded-xl shadow-md overflow-hidden gradient-border">
53
+ <div class="bg-indigo-600 px-6 py-4">
54
+ <h3 class="text-xl font-semibold text-white flex items-center">
55
+ <i class="fas fa-cloud-upload-alt mr-3"></i> Memory Fragment Upload
56
+ </h3>
57
+ </div>
58
+ <div class="p-6">
59
+ <div id="file-upload-container" class="file-upload-container border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-400 transition">
60
+ <i class="fas fa-file-upload text-4xl text-gray-400 mb-4"></i>
61
+ <p class="text-gray-600 mb-2">Drag & drop your memory fragment here</p>
62
+ <p class="text-sm text-gray-500 mb-4">Supports audio (MP3, WAV) and video (MP4, MOV) files</p>
63
+ <input type="file" id="file-input" class="hidden" accept=".mp3,.wav,.mp4,.mov">
64
+ <label for="file-input" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition cursor-pointer">
65
+ Select File
66
+ </label>
67
+ </div>
68
+
69
+ <div id="upload-progress" class="mt-6 hidden">
70
+ <div class="flex justify-between mb-2">
71
+ <span class="text-sm font-medium text-gray-700">Uploading...</span>
72
+ <span id="upload-percent" class="text-sm font-medium text-indigo-600">0%</span>
73
+ </div>
74
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
75
+ <div id="upload-progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
76
+ </div>
77
+ </div>
78
+
79
+ <div id="upload-success" class="mt-6 p-4 bg-green-50 rounded-lg hidden">
80
+ <div class="flex items-center">
81
+ <i class="fas fa-check-circle text-green-500 text-xl mr-3"></i>
82
+ <div>
83
+ <h4 class="font-medium text-green-800">Upload Successful!</h4>
84
+ <p class="text-sm text-green-600">Your memory fragment is being processed.</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <div id="upload-error" class="mt-6 p-4 bg-red-50 rounded-lg hidden">
90
+ <div class="flex items-center">
91
+ <i class="fas fa-exclamation-circle text-red-500 text-xl mr-3"></i>
92
+ <div>
93
+ <h4 class="font-medium text-red-800">Upload Failed</h4>
94
+ <p id="error-message" class="text-sm text-red-600"></p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </div>
100
+
101
+ <!-- AI Query Section -->
102
+ <div class="bg-white rounded-xl shadow-md overflow-hidden gradient-border">
103
+ <div class="bg-purple-600 px-6 py-4">
104
+ <h3 class="text-xl font-semibold text-white flex items-center">
105
+ <i class="fas fa-robot mr-3"></i> Cloudflare AI Gateway
106
+ </h3>
107
+ </div>
108
+ <div class="p-6">
109
+ <div class="mb-6">
110
+ <label for="ai-query" class="block text-sm font-medium text-gray-700 mb-2">Ask about your memories</label>
111
+ <div class="flex">
112
+ <input type="text" id="ai-query" placeholder="E.g. What was that restaurant we visited in Paris?"
113
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-indigo-500 focus:border-indigo-500">
114
+ <button id="send-query" class="px-4 py-2 bg-purple-600 text-white rounded-r-lg hover:bg-purple-700 transition">
115
+ <i class="fas fa-paper-plane"></i>
116
+ </button>
117
+ </div>
118
+ </div>
119
+
120
+ <div id="ai-thinking" class="hidden mb-6 p-4 bg-purple-50 rounded-lg">
121
+ <div class="flex items-center">
122
+ <div class="pulse-animation">
123
+ <i class="fas fa-circle-notch fa-spin text-purple-500 mr-3"></i>
124
+ </div>
125
+ <span class="text-purple-700">Processing your query with AI...</span>
126
+ </div>
127
+ </div>
128
+
129
+ <div id="ai-response-container" class="hidden">
130
+ <h4 class="font-medium text-gray-700 mb-3 flex items-center">
131
+ <i class="fas fa-comment-dots text-purple-500 mr-2"></i> AI Response
132
+ </h4>
133
+ <div class="ai-response-container bg-gray-50 p-4 rounded-lg border border-gray-200">
134
+ <p id="ai-response" class="text-gray-700"></p>
135
+ </div>
136
+ <div class="mt-3 text-right">
137
+ <button id="refine-query" class="text-sm px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200 transition">
138
+ <i class="fas fa-redo mr-1"></i> Refine Query
139
+ </button>
140
+ </div>
141
+ </div>
142
+
143
+ <div id="ai-error" class="hidden mt-6 p-4 bg-red-50 rounded-lg">
144
+ <div class="flex items-center">
145
+ <i class="fas fa-exclamation-circle text-red-500 text-xl mr-3"></i>
146
+ <div>
147
+ <h4 class="font-medium text-red-800">AI Query Failed</h4>
148
+ <p id="ai-error-message" class="text-sm text-red-600"></p>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- System Status -->
157
+ <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
158
+ <div class="bg-gray-800 px-6 py-4">
159
+ <h3 class="text-xl font-semibold text-white flex items-center">
160
+ <i class="fas fa-server mr-3"></i> System Status
161
+ </h3>
162
+ </div>
163
+ <div class="p-6">
164
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
165
+ <div class="border border-gray-200 rounded-lg p-4">
166
+ <div class="flex items-center mb-3">
167
+ <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
168
+ <i class="fas fa-upload text-indigo-500"></i>
169
+ </div>
170
+ <h4 class="font-medium text-gray-700">Ingestion Service</h4>
171
+ </div>
172
+ <div class="flex items-center">
173
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
174
+ <span class="text-sm text-gray-600">Operational</span>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="border border-gray-200 rounded-lg p-4">
179
+ <div class="flex items-center mb-3">
180
+ <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
181
+ <i class="fas fa-network-wired text-purple-500"></i>
182
+ </div>
183
+ <h4 class="font-medium text-gray-700">Cloudflare Gateway</h4>
184
+ </div>
185
+ <div class="flex items-center">
186
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
187
+ <span class="text-sm text-gray-600">Connected</span>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="border border-gray-200 rounded-lg p-4">
192
+ <div class="flex items-center mb-3">
193
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
194
+ <i class="fas fa-database text-blue-500"></i>
195
+ </div>
196
+ <h4 class="font-medium text-gray-700">Memory Database</h4>
197
+ </div>
198
+ <div class="flex items-center">
199
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
200
+ <span class="text-sm text-gray-600">Synced</span>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+
208
+ <script>
209
+ document.addEventListener('DOMContentLoaded', function() {
210
+ // File Upload Handling
211
+ const fileInput = document.getElementById('file-input');
212
+ const uploadContainer = document.getElementById('file-upload-container');
213
+ const uploadProgress = document.getElementById('upload-progress');
214
+ const progressBar = document.getElementById('upload-progress-bar');
215
+ const uploadPercent = document.getElementById('upload-percent');
216
+ const uploadSuccess = document.getElementById('upload-success');
217
+ const uploadError = document.getElementById('upload-error');
218
+ const errorMessage = document.getElementById('error-message');
219
+
220
+ // Drag and drop functionality
221
+ uploadContainer.addEventListener('dragover', (e) => {
222
+ e.preventDefault();
223
+ uploadContainer.classList.add('border-indigo-500', 'bg-indigo-50');
224
+ });
225
+
226
+ uploadContainer.addEventListener('dragleave', () => {
227
+ uploadContainer.classList.remove('border-indigo-500', 'bg-indigo-50');
228
+ });
229
+
230
+ uploadContainer.addEventListener('drop', (e) => {
231
+ e.preventDefault();
232
+ uploadContainer.classList.remove('border-indigo-500', 'bg-indigo-50');
233
+ if (e.dataTransfer.files.length) {
234
+ fileInput.files = e.dataTransfer.files;
235
+ handleFileUpload();
236
+ }
237
+ });
238
+
239
+ fileInput.addEventListener('change', handleFileUpload);
240
+
241
+ function handleFileUpload() {
242
+ const file = fileInput.files[0];
243
+ if (!file) return;
244
+
245
+ // Validate file type
246
+ const validTypes = ['audio/mp3', 'audio/wav', 'video/mp4', 'video/quicktime'];
247
+ if (!validTypes.includes(file.type)) {
248
+ showUploadError('Invalid file type. Please upload an audio or video file.');
249
+ return;
250
+ }
251
+
252
+ // Validate file size (max 100MB)
253
+ if (file.size > 100 * 1024 * 1024) {
254
+ showUploadError('File too large. Maximum size is 100MB.');
255
+ return;
256
+ }
257
+
258
+ // Show upload progress
259
+ uploadProgress.classList.remove('hidden');
260
+ uploadSuccess.classList.add('hidden');
261
+ uploadError.classList.add('hidden');
262
+
263
+ // Simulate upload progress (in a real app, this would be actual upload progress)
264
+ let progress = 0;
265
+ const interval = setInterval(() => {
266
+ progress += Math.random() * 10;
267
+ if (progress >= 100) {
268
+ progress = 100;
269
+ clearInterval(interval);
270
+
271
+ // Simulate successful upload
272
+ setTimeout(() => {
273
+ uploadProgress.classList.add('hidden');
274
+ uploadSuccess.classList.remove('hidden');
275
+
276
+ // Reset after 5 seconds
277
+ setTimeout(() => {
278
+ uploadSuccess.classList.add('hidden');
279
+ fileInput.value = '';
280
+ }, 5000);
281
+ }, 500);
282
+ }
283
+
284
+ progressBar.style.width = `${progress}%`;
285
+ uploadPercent.textContent = `${Math.round(progress)}%`;
286
+ }, 300);
287
+ }
288
+
289
+ function showUploadError(message) {
290
+ errorMessage.textContent = message;
291
+ uploadError.classList.remove('hidden');
292
+ uploadProgress.classList.add('hidden');
293
+ uploadSuccess.classList.add('hidden');
294
+
295
+ // Hide error after 5 seconds
296
+ setTimeout(() => {
297
+ uploadError.classList.add('hidden');
298
+ }, 5000);
299
+ }
300
+
301
+ // AI Query Handling
302
+ const aiQueryInput = document.getElementById('ai-query');
303
+ const sendQueryBtn = document.getElementById('send-query');
304
+ const aiThinking = document.getElementById('ai-thinking');
305
+ const aiResponseContainer = document.getElementById('ai-response-container');
306
+ const aiResponse = document.getElementById('ai-response');
307
+ const aiError = document.getElementById('ai-error');
308
+ const aiErrorMessage = document.getElementById('ai-error-message');
309
+ const refineQueryBtn = document.getElementById('refine-query');
310
+
311
+ sendQueryBtn.addEventListener('click', handleAIQuery);
312
+ aiQueryInput.addEventListener('keypress', (e) => {
313
+ if (e.key === 'Enter') handleAIQuery();
314
+ });
315
+
316
+ refineQueryBtn.addEventListener('click', () => {
317
+ aiResponseContainer.classList.add('hidden');
318
+ aiQueryInput.focus();
319
+ });
320
+
321
+ function handleAIQuery() {
322
+ const query = aiQueryInput.value.trim();
323
+ if (!query) return;
324
+
325
+ // Show thinking indicator
326
+ aiThinking.classList.remove('hidden');
327
+ aiResponseContainer.classList.add('hidden');
328
+ aiError.classList.add('hidden');
329
+
330
+ // In a real app, this would be an actual API call to Cloudflare AI Gateway
331
+ // For demo purposes, we'll simulate a response after a delay
332
+ setTimeout(() => {
333
+ aiThinking.classList.add('hidden');
334
+
335
+ // Simulate success or error randomly
336
+ if (Math.random() > 0.2) { // 80% chance of success
337
+ // Generate a plausible AI response
338
+ const responses = [
339
+ `Based on your memories, you visited a charming French bistro called "Le Petit Jardin" in Paris on June 15, 2022. The meal included duck confit and a bottle of Bordeaux wine. You mentioned the service was exceptional.`,
340
+ `Your memory fragments show a restaurant with red awnings and outdoor seating. The name "Chez Marie" appears in one of your photos from that trip. You were there with two friends around 7:30 PM.`,
341
+ `I found references to a Parisian restaurant in your audio recordings from last year. You described it as having "the best onion soup" and located near the Eiffel Tower. The receipt shows you paid €85 for three people.`
342
+ ];
343
+
344
+ aiResponse.textContent = responses[Math.floor(Math.random() * responses.length)];
345
+ aiResponseContainer.classList.remove('hidden');
346
+ } else {
347
+ // Simulate error
348
+ aiErrorMessage.textContent = "Could not connect to AI service. Please try again later.";
349
+ aiError.classList.remove('hidden');
350
+ }
351
+ }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5 seconds
352
+ }
353
+ });
354
+ </script>
355
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/aurarecall1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
356
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Modify front end AuraRecall Frontend with Cloudflare AI Gateway IntegrationThis document presents an updated React frontend application. It retains the file upload functionality (targeting your backend's ingestion service) and adds a new section to demonstrate interaction with the Cloudflare AI Gateway for sending text queries to an AI model.Key Features:File upload for memory fragments (Audio/Visual).Section for sending text queries to an LLM via the Cloudflare AI Gateway.Displays the response from the AI model.Basic styling using Tailwind CSS.Note:The file upload still targets your custom backend ingestion endpoint (YOUR_BACKEND_INGESTION_URL).The text query targets your Cloudflare AI Gateway endpoint (YOUR_CLOUDFLARE_GATEWAY_URL).You need to replace placeholder URLs and add your Hugging Face token (YOUR_HF_TOKEN).The response from the AI query is just displayed as text; a real application would use this response to refine a query sent to your backend's Memory Retrieval Service.