Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Browser Agent App</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .memory-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .browser-window { | |
| background-color: #f0f0f0; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #6e8efb; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .animate-pulse-slow { | |
| animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-white shadow-lg flex flex-col"> | |
| <div class="gradient-bg p-4 text-white"> | |
| <h1 class="text-xl font-bold">Browser Agent</h1> | |
| <p class="text-sm opacity-80">AI-Powered Web Interaction</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto scrollbar-hide"> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Navigation</h2> | |
| <ul> | |
| <li class="mb-1"> | |
| <button id="nav-browser" class="w-full text-left px-3 py-2 rounded-md bg-blue-50 text-blue-600 font-medium flex items-center"> | |
| <i class="fas fa-globe mr-2"></i> Browser Agent | |
| </button> | |
| </li> | |
| <li class="mb-1"> | |
| <button id="nav-memory" class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 text-gray-700 flex items-center"> | |
| <i class="fas fa-brain mr-2"></i> Memory | |
| </button> | |
| </li> | |
| <li class="mb-1"> | |
| <button id="nav-settings" class="w-full text-left px-3 py-2 rounded-md hover:bg-gray-100 text-gray-700 flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Settings | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Quick Actions</h2> | |
| <div class="space-y-2"> | |
| <button class="w-full flex items-center justify-between px-3 py-2 bg-green-50 text-green-700 rounded-md text-sm font-medium"> | |
| <span><i class="fas fa-bolt mr-2"></i> Quick Scrape</span> | |
| <i class="fas fa-chevron-right text-xs"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between px-3 py-2 bg-purple-50 text-purple-700 rounded-md text-sm font-medium"> | |
| <span><i class="fas fa-video mr-2"></i> Video Download</span> | |
| <i class="fas fa-chevron-right text-xs"></i> | |
| </button> | |
| <button class="w-full flex items-center justify-between px-3 py-2 bg-yellow-50 text-yellow-700 rounded-md text-sm font-medium"> | |
| <span><i class="fas fa-shield-alt mr-2"></i> Enable VPN</span> | |
| <i class="fas fa-chevron-right text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Recent Activity</h2> | |
| <div class="space-y-2"> | |
| <div class="text-xs p-2 bg-gray-50 rounded-md"> | |
| <p class="font-medium">Scraped example.com</p> | |
| <p class="text-gray-500">2 minutes ago</p> | |
| </div> | |
| <div class="text-xs p-2 bg-gray-50 rounded-md"> | |
| <p class="font-medium">Saved to memory</p> | |
| <p class="text-gray-500">10 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="ml-2"> | |
| <p class="text-sm font-medium">Admin User</p> | |
| <p class="text-xs text-gray-500">Connected</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button id="sidebar-toggle" class="mr-4 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h2 id="page-title" class="text-lg font-semibold">Browser Agent</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-question-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-y-auto p-6"> | |
| <!-- Browser Agent UI --> | |
| <div id="browser-ui" class="space-y-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Web Interaction</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-redo mr-1"></i> Refresh | |
| </button> | |
| <button class="px-3 py-1 bg-green-50 text-green-600 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-save mr-1"></i> Save | |
| </button> | |
| </div> | |
| </div> | |
| <div class="browser-window p-4 mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex space-x-1 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-400"></div> | |
| </div> | |
| <div class="flex-1 bg-white border border-gray-300 rounded-md px-3 py-1 flex items-center"> | |
| <i class="fas fa-lock text-green-500 mr-2"></i> | |
| <input type="text" value="https://example.com" class="flex-1 outline-none text-sm"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 border border-gray-200 rounded-md h-64 overflow-y-auto"> | |
| <div class="flex justify-center items-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-globe text-4xl text-gray-300 mb-2"></i> | |
| <p class="text-gray-500">Web content will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2"> | |
| <i class="fas fa-text-width"></i> | |
| </div> | |
| <h4 class="font-medium">Text Extraction</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Extract and analyze text content from web pages with AI-powered processing.</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <h4 class="font-medium">Image Scraping</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Download and process images from any webpage with automatic organization.</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h4 class="font-medium">Video Download</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">Save videos from YouTube, Vimeo, and other platforms with metadata.</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium mb-3">AI Assistant</h4> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="bg-white p-3 rounded-lg shadow-sm mb-2"> | |
| <p class="text-sm">I can help you analyze and interact with web content. What would you like me to do with the current page?</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium"> | |
| Summarize | |
| </button> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium"> | |
| Extract Links | |
| </button> | |
| <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium"> | |
| Analyze Structure | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <input type="text" placeholder="Ask the AI to perform an action..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <h3 class="text-lg font-medium mb-4">Scraping Tools</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium mb-2 flex items-center"> | |
| <i class="fas fa-link mr-2 text-blue-500"></i> URL Scraper | |
| </h4> | |
| <div class="space-y-3"> | |
| <input type="text" placeholder="Enter URL to scrape" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium"> | |
| Scrape Now | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium"> | |
| Advanced Options | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2 flex items-center"> | |
| <i class="fas fa-download mr-2 text-purple-500"></i> Media Downloader | |
| </h4> | |
| <div class="space-y-3"> | |
| <input type="text" placeholder="Enter media URL" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"> | |
| <option>Select format</option> | |
| <option>MP4 (Video)</option> | |
| <option>MP3 (Audio)</option> | |
| <option>PNG (Image)</option> | |
| <option>PDF (Document)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Memory UI (Hidden by default) --> | |
| <div id="memory-ui" class="hidden space-y-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-medium">Memory System</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Add Memory | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium flex items-center"> | |
| <i class="fas fa-filter mr-1"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex border-b border-gray-200"> | |
| <button class="tab-button px-4 py-2 font-medium text-sm tab-active" data-tab="all">All Memories</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="text">Text</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="images">Images</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="videos">Videos</button> | |
| <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="links">Links</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="memory-content"> | |
| <!-- Memory items will be loaded here --> | |
| <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-blue-50 flex items-center justify-center text-blue-600 mr-3"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Article about AI advancements</h4> | |
| <p class="text-xs text-gray-500">Saved 2 days ago</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3 line-clamp-2">Recent breakthroughs in artificial intelligence have led to significant improvements in natural language processing capabilities, enabling more human-like interactions with machines.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Text</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-green-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-purple-50 flex items-center justify-center text-purple-600 mr-3"> | |
| <i class="fas fa-image"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Infographic: ML models</h4> | |
| <p class="text-xs text-gray-500">Saved 1 week ago</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-md h-24 mb-3 flex items-center justify-center"> | |
| <i class="fas fa-image text-3xl text-gray-300"></i> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-purple-50 text-purple-600 rounded-full">Image</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-green-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-green-50 flex items-center justify-center text-green-600 mr-3"> | |
| <i class="fas fa-link"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Useful research paper</h4> | |
| <p class="text-xs text-gray-500">Saved 3 days ago</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3 line-clamp-2">https://arxiv.org/abs/2305.12345 - A novel approach to transformer architectures that improves efficiency by 40%.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-green-50 text-green-600 rounded-full">Link</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-green-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-red-50 flex items-center justify-center text-red-600 mr-3"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Tutorial video</h4> | |
| <p class="text-xs text-gray-500">Saved yesterday</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 rounded-md h-24 mb-3 flex items-center justify-center"> | |
| <i class="fas fa-play-circle text-3xl text-gray-300"></i> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-red-50 text-red-600 rounded-full">Video</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-green-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-10 h-10 rounded-md bg-yellow-50 flex items-center justify-center text-yellow-600 mr-3"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Research PDF</h4> | |
| <p class="text-xs text-gray-500">Saved 5 days ago</p> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3 line-clamp-2">Document containing detailed analysis of neural network optimization techniques with benchmarks across different hardware platforms.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">PDF</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-green-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="memory-item bg-blue-50 border border-blue-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer"> | |
| <div class="flex items-center justify-center h-full"> | |
| <button class="flex flex-col items-center text-blue-600"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <span class="text-sm font-medium">Add New Memory</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <h3 class="text-lg font-medium mb-4">Memory Analysis</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium mb-2">Memory Statistics</h4> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <p class="text-2xl font-bold text-blue-600">248</p> | |
| <p class="text-xs text-gray-500">Text Items</p> | |
| </div> | |
| <div> | |
| <p class="text-2xl font-bold text-purple-600">56</p> | |
| <p class="text-xs text-gray-500">Images</p> | |
| </div> | |
| <div> | |
| <p class="text-2xl font-bold text-green-600">32</p> | |
| <p class="text-xs text-gray-500">Videos</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-xs font-medium">Storage Usage</span> | |
| <span class="text-xs text-gray-500">1.2GB of 5GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 24%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-2">AI Memory Search</h4> | |
| <div class="space-y-3"> | |
| <input type="text" placeholder="Ask the AI to find memories..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium"> | |
| Search Memories | |
| </button> | |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium"> | |
| Semantic Search | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings UI (Hidden by default) --> | |
| <div id="settings-ui" class="hidden space-y-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-6"> | |
| <h3 class="text-lg font-medium mb-6">Settings</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <h4 class="font-medium mb-3 flex items-center"> | |
| <i class="fas fa-user-shield mr-2 text-blue-500"></i> Security Settings | |
| </h4> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">Tor Proxy</p> | |
| <p class="text-sm text-gray-500">Route requests through Tor network for anonymity</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">VPN Connection</p> | |
| <p class="text-sm text-gray-500">Encrypt all traffic with VPN</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">DNS Encryption</p> | |
| <p class="text-sm text-gray-500">Use DNS-over-HTTPS for secure DNS queries</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <h4 class="font-medium mb-3 flex items-center"> | |
| <i class="fas fa-robot mr-2 text-purple-500"></i> AI Settings | |
| </h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">AI Model</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>huihui-ai/aya-expanse-32b-abliterated</option> | |
| <option disabled>gpt-4 (API key required)</option> | |
| <option disabled>claude-2 (API key required)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">HuggingFace API Key</label> | |
| <input type="password" placeholder="hf_xxxxxxxxxxxxxxxx" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Memory Context Length</label> | |
| <input type="range" min="512" max="4096" value="2048" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>512 tokens</span> | |
| <span>2048 tokens</span> | |
| <span>4096 tokens</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <h4 class="font-medium mb-3 flex items-center"> | |
| <i class="fas fa-database mr-2 text-green-500"></i> Memory Storage | |
| </h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Supabase URL</label> | |
| <input type="text" placeholder="https://xxxxxxxx.supabase.co" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Supabase Key</label> | |
| <input type="password" placeholder="sb.xxxxxxxxxxxxxxxx" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="font-medium">Enable Vector Search</p> | |
| <p class="text-sm text-gray-500">Use pgvector for semantic search</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-6"> | |
| <div class="flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700"> | |
| Save Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Navigation functionality | |
| document.getElementById('nav-browser').addEventListener('click', () => { | |
| document.getElementById('browser-ui').classList.remove('hidden'); | |
| document.getElementById('memory-ui').classList.add('hidden'); | |
| document.getElementById('settings-ui').classList.add('hidden'); | |
| document.getElementById('page-title').textContent = 'Browser Agent'; | |
| // Update active nav button | |
| document.querySelectorAll('[id^="nav-"]').forEach(btn => { | |
| btn.classList.remove('bg-blue-50', 'text-blue-600'); | |
| btn.classList.add('hover:bg-gray-100', 'text-gray-700'); | |
| }); | |
| document.getElementById('nav-browser').classList.add('bg-blue-50', 'text-blue-600'); | |
| document.getElementById('nav-browser').classList.remove('hover:bg-gray-100', 'text-gray-700'); | |
| }); | |
| document.getElementById('nav-memory').addEventListener('click', () => { | |
| document.getElementById('browser-ui').classList.add('hidden'); | |
| document.getElementById('memory-ui').classList.remove('hidden'); | |
| document.getElementById('settings-ui').classList.add('hidden'); | |
| document.getElementById('page-title').textContent = 'Memory System'; | |
| // Update active nav button | |
| document.querySelectorAll('[id^="nav-"]').forEach(btn => { | |
| btn.classList.remove('bg-blue-50', 'text-blue-600'); | |
| btn.classList.add('hover:bg-gray-100', 'text-gray-700'); | |
| }); | |
| document.getElementById('nav-memory').classList.add('bg-blue-50', 'text-blue-600'); | |
| document.getElementById('nav-memory').classList.remove('hover:bg-gray-100', 'text-gray-700'); | |
| }); | |
| document.getElementById('nav-settings').addEventListener('click', () => { | |
| document.getElementById('browser-ui').classList.add('hidden'); | |
| document.getElementById('memory-ui').classList.add('hidden'); | |
| document.getElementById('settings-ui').classList.remove('hidden'); | |
| document.getElementById('page-title').textContent = 'Settings'; | |
| // Update active nav button | |
| document.querySelectorAll('[id^="nav-"]').forEach(btn => { | |
| btn.classList.remove('bg-blue-50', 'text-blue-600'); | |
| btn.classList.add('hover:bg-gray-100', 'text-gray-700'); | |
| }); | |
| document.getElementById('nav-settings').classList.add('bg-blue-50', 'text-blue-600'); | |
| document.getElementById('nav-settings').classList.remove('hover:bg-gray-100', 'text-gray-700'); | |
| }); | |
| // Tab functionality for memory view | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.addEventListener('click', () => { | |
| // Update active tab | |
| document.querySelectorAll('.tab-button').forEach(btn => { | |
| btn.classList.remove('tab-active', 'text-blue-600'); | |
| btn.classList.add('text-gray-500'); | |
| }); | |
| button.classList.add('tab-active', 'text-blue-600'); | |
| button.classList.remove('text-gray-500'); | |
| // Here you would typically filter the memory items based on the tab | |
| // For this demo, we'll just simulate it | |
| const tab = button.getAttribute('data-tab'); | |
| console.log(`Switched to ${tab} tab`); | |
| }); | |
| }); | |
| // Sidebar toggle | |
| document.getElementById('sidebar-toggle').addEventListener('click', () => { | |
| document.querySelector('.sidebar').classList.toggle('-ml-64'); | |
| }); | |
| // Simulate loading for memory items | |
| document.querySelectorAll('.memory-item').forEach(item => { | |
| item.addEventListener('click', (e) => { | |
| if (!e.target.classList.contains('fa-trash') && | |
| !e.target.classList.contains('fa-edit') && | |
| !e.target.classList.contains('fa-eye')) { | |
| console.log('Opening memory item:', item.querySelector('h4').textContent); | |
| } | |
| }); | |
| }); | |
| // Quick action buttons | |
| document.querySelectorAll('.quick-action').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const action = button.getAttribute('data-action'); | |
| console.log(`Quick action: ${action}`); | |
| // Here you would typically trigger the corresponding functionality | |
| }); | |
| }); | |
| </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=Boobs00/browser-agent" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |