Spaces:

privateuserh
/

aurarecall1

Running

App Files Files Community

privateuserh commited on May 2

Commit

7a108c6

verified ·

1 Parent(s): c190eb8

Add 2 files

Browse files

Files changed (2) hide show

index.html +200 -0
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -20,6 +20,10 @@
         .pulse-animation {
             animation: pulse 2s infinite;
         }
         @keyframes pulse {
             0% { opacity: 0.6; }
             50% { opacity: 1; }
@@ -30,6 +34,21 @@
             background: linear-gradient(white, white) padding-box,
                         linear-gradient(to right, #6366f1, #8b5cf6) border-box;
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -152,6 +171,95 @@
                 </div>
             </div>
         </div>
         <!-- System Status -->
         <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
@@ -350,6 +458,98 @@
                     }
                 }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5 seconds
             }
         });
     </script>
 <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>

         .pulse-animation {
             animation: pulse 2s infinite;
         }
+        .memory-object {
+            background: linear-gradient(145deg, #ffffff, #f5f3ff);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
         @keyframes pulse {
             0% { opacity: 0.6; }
             50% { opacity: 1; }
             background: linear-gradient(white, white) padding-box,
                         linear-gradient(to right, #6366f1, #8b5cf6) border-box;
         }
+        .processing-step {
+            position: relative;
+        }
+        .processing-step:not(:last-child):after {
+            content: "";
+            position: absolute;
+            right: -20px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-left: 10px solid #8b5cf6;
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
                 </div>
             </div>
         </div>
+        <!-- AI Processing Demo Section -->
+        <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
+            <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-4">
+                <h3 class="text-xl font-semibold text-white flex items-center">
+                    <i class="fas fa-microchip mr-3"></i> AI Processing Demonstration
+                </h3>
+            </div>
+            <div class="p-6">
+                <p class="text-gray-600 mb-6">
+                    This section demonstrates how AuraRecall processes your memory fragments to create structured memory objects.
+                </p>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                    <div class="processing-step bg-indigo-50 p-4 rounded-lg flex flex-col items-center">
+                        <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-3">
+                            <i class="fas fa-file-audio text-indigo-600"></i>
+                        </div>
+                        <h4 class="font-medium text-indigo-800 text-center">Audio Transcription</h4>
+                        <p class="text-sm text-gray-600 text-center mt-1">Convert speech to text</p>
+                        <div id="transcription-result" class="mt-3 text-sm text-gray-700 hidden"></div>
+                    </div>
+                    <div class="processing-step bg-purple-50 p-4 rounded-lg flex flex-col items-center">
+                        <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-3">
+                            <i class="fas fa-image text-purple-600"></i>
+                        </div>
+                        <h4 class="font-medium text-purple-800 text-center">Visual Analysis</h4>
+                        <p class="text-sm text-gray-600 text-center mt-1">Detect objects and faces</p>
+                        <div id="visual-result" class="mt-3 text-sm text-gray-700 hidden"></div>
+                    </div>
+                    <div class="processing-step bg-blue-50 p-4 rounded-lg flex flex-col items-center">
+                        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-3">
+                            <i class="fas fa-link text-blue-600"></i>
+                        </div>
+                        <h4 class="font-medium text-blue-800 text-center">Context Linking</h4>
+                        <p class="text-sm text-gray-600 text-center mt-1">Connect related elements</p>
+                        <div id="linking-result" class="mt-3 text-sm text-gray-700 hidden"></div>
+                    </div>
+                </div>
+                <div id="memory-object-demo" class="hidden">
+                    <h4 class="font-medium text-gray-700 mb-3 flex items-center">
+                        <i class="fas fa-cube text-indigo-500 mr-2"></i> Generated Memory Object
+                    </h4>
+                    <div class="memory-object p-4 rounded-lg border border-gray-200">
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                            <div class="bg-indigo-50 p-3 rounded">
+                                <h5 class="font-medium text-indigo-700 mb-2 flex items-center">
+                                    <i class="fas fa-align-left mr-2 text-sm"></i> Transcription
+                                </h5>
+                                <p id="memory-transcription" class="text-sm text-gray-700"></p>
+                            </div>
+                            <div class="bg-purple-50 p-3 rounded">
+                                <h5 class="font-medium text-purple-700 mb-2 flex items-center">
+                                    <i class="fas fa-tags mr-2 text-sm"></i> Detected Entities
+                                </h5>
+                                <div id="memory-entities" class="text-sm text-gray-700"></div>
+                            </div>
+                            <div class="bg-blue-50 p-3 rounded">
+                                <h5 class="font-medium text-blue-700 mb-2 flex items-center">
+                                    <i class="fas fa-project-diagram mr-2 text-sm"></i> Context Links
+                                </h5>
+                                <div id="memory-links" class="text-sm text-gray-700"></div>
+                            </div>
+                        </div>
+                        <div class="mt-4 pt-3 border-t border-gray-200">
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center">
+                                    <i class="fas fa-fingerprint text-gray-500 mr-2"></i>
+                                    <span class="text-xs text-gray-500">Bio-signature: <span class="text-gray-700">user_authenticated</span></span>
+                                </div>
+                                <div class="text-xs text-gray-500">
+                                    <i class="fas fa-calendar-alt mr-1"></i>
+                                    <span id="memory-timestamp"></span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6 text-center">
+                    <button id="demo-processing" class="px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-500 text-white rounded-lg hover:from-indigo-600 hover:to-purple-600 transition">
+                        <i class="fas fa-play-circle mr-2"></i> Run Processing Demo
+                    </button>
+                </div>
+            </div>
+        </div>
         <!-- System Status -->
         <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
                     }
                 }, 1500 + Math.random() * 2000); // Random delay between 1.5-3.5 seconds
             }
+            // AI Processing Demo
+            const demoProcessingBtn = document.getElementById('demo-processing');
+            const transcriptionResult = document.getElementById('transcription-result');
+            const visualResult = document.getElementById('visual-result');
+            const linkingResult = document.getElementById('linking-result');
+            const memoryObjectDemo = document.getElementById('memory-object-demo');
+            const memoryTranscription = document.getElementById('memory-transcription');
+            const memoryEntities = document.getElementById('memory-entities');
+            const memoryLinks = document.getElementById('memory-links');
+            const memoryTimestamp = document.getElementById('memory-timestamp');
+            demoProcessingBtn.addEventListener('click', runProcessingDemo);
+            function runProcessingDemo() {
+                // Reset previous demo
+                transcriptionResult.classList.add('hidden');
+                visualResult.classList.add('hidden');
+                linkingResult.classList.add('hidden');
+                memoryObjectDemo.classList.add('hidden');
+                // Disable button during demo
+                demoProcessingBtn.disabled = true;
+                demoProcessingBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Processing...';
+                // Simulate transcription step
+                setTimeout(() => {
+                    transcriptionResult.textContent = '"We had an amazing dinner at Le Petit Jardin last night. The duck confit was incredible!"';
+                    transcriptionResult.classList.remove('hidden');
+                    // Simulate visual analysis step
+                    setTimeout(() => {
+                        visualResult.innerHTML = `
+                            <div class="flex flex-wrap gap-1">
+                                <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Restaurant</span>
+                                <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Duck dish</span>
+                                <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Wine bottle</span>
+                                <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">2 people</span>
+                            </div>
+                        `;
+                        visualResult.classList.remove('hidden');
+                        // Simulate context linking step
+                        setTimeout(() => {
+                            linkingResult.innerHTML = `
+                                <div class="text-center">
+                                    <div class="inline-block px-3 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">
+                                        <i class="fas fa-link mr-1"></i> Matched location
+                                    </div>
+                                    <div class="mt-1 text-xs">Paris, France</div>
+                                </div>
+                            `;
+                            linkingResult.classList.remove('hidden');
+                            // Show final memory object
+                            setTimeout(() => {
+                                memoryTranscription.textContent = '"We had an amazing dinner at Le Petit Jardin last night. The duck confit was incredible!"';
+                                memoryEntities.innerHTML = `
+                                    <div class="flex flex-wrap gap-1">
+                                        <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Restaurant</span>
+                                        <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Duck dish</span>
+                                        <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">Wine bottle</span>
+                                        <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded">2 people</span>
+                                    </div>
+                                `;
+                                memoryLinks.innerHTML = `
+                                    <div class="space-y-1">
+                                        <div class="flex items-center">
+                                            <i class="fas fa-map-marker-alt text-blue-500 mr-2 text-xs"></i>
+                                            <span class="text-xs">Le Petit Jardin, Paris</span>
+                                        </div>
+                                        <div class="flex items-center">
+                                            <i class="fas fa-utensils text-blue-500 mr-2 text-xs"></i>
+                                            <span class="text-xs">Duck confit mentioned in audio</span>
+                                        </div>
+                                        <div class="flex items-center">
+                                            <i class="fas fa-user-friends text-blue-500 mr-2 text-xs"></i>
+                                            <span class="text-xs">Dining companion: Sarah</span>
+                                        </div>
+                                    </div>
+                                `;
+                                memoryTimestamp.textContent = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
+                                memoryObjectDemo.classList.remove('hidden');
+                                // Re-enable button
+                                demoProcessingBtn.disabled = false;
+                                demoProcessingBtn.innerHTML = '<i class="fas fa-play-circle mr-2"></i> Run Processing Demo';
+                            }, 800);
+                        }, 800);
+                    }, 800);
+                }, 800);
+            }
         });
     </script>
 <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>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
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.


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.
2	+ Keep all components consider Suggestions for AuraRecall Hugging Face SpaceAssuming the Hugging Face Space privateuserh/aurarecall1 is intended as a demo or prototype for the AuraRecall personal AI memory system, here are some suggestions for features and content it could include to effectively showcase the project:Demonstrate Core AI Processing:Multi-modal Input: Allow users to upload a short audio file and a corresponding image or short video clip.Processing Simulation: Show a simplified output of what the AI backend would do. For example:Display the transcription of the audio.List detected objects or faces in the image/video.Show a simple "contextual link" created between the audio and visual based on timestamp or identified elements.Suggestion: Even if the full complex synthesis isn't possible in the Space, demonstrating these individual processing steps (transcription, object detection) is valuable.Illustrate Memory Synthesis (Conceptual):After processing, show a conceptual "Memory Object" created from the inputs. This could be a simple visual representation linking the text transcription, detected entities, and the original media.Suggestion: Use a simple diagram or structured text output to represent the linked data, explaining how the AI connects the pieces.Showcase Retrieval (Simulated):Include a text input field where a user can type a simple query (e.g., "Show memories with [Person Name]" or "Find audio about [Topic]").Since the full memory database isn't likely in the Space, simulate a retrieval. Based on the input query and the previously uploaded/processed data, highlight or display the relevant simulated "Memory Object" or its components.Suggestion: Have a few pre-loaded, simple example "memories" in the Space that the query function can retrieve, alongside the ability to query newly uploaded (and processed) fragments.Address Bio-Signature (Conceptually):Explain how the bio-signature would integrate. You could have a placeholder section mentioning "Authenticated User: [Simulated User ID]" or a brief text explanation of its role in personalization and security.Suggestion: Avoid implementing actual biometric capture in a public Space for privacy reasons, but explain the concept clearly.Include Clear Explanations:Use the Space's README or description area to clearly explain the AuraRecall concept, the purpose of the demo, and what the user can do/see in the Space.Explain which parts are fully functional demos and which are simulations or conceptual representations.Keep it Focused and Simple:Hugging Face Spaces work best for demonstrating specific aspects or a simplified workflow. Don't try to build the entire SaaS in the Space. Focus on showcasing the unique AI processing and linking capabilities.Provide Links:Link back to any relevant repositories (like the backend code if it's public) or documentation.If the Space currently contains something different, or if you gain access to view its contents, I would be happy to provide more specific feedback based on its actual implementation!