Hugging Face's logo

Spaces:
Boobs00
/
browser-agent
Running

App Files Community
Boobs00 commited on
Commit
eb4664f
·
verified ·
1 Parent(s): 7e6fb77

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +737 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Browser Agent
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: browser-agent
3
+ emoji: 🐳
4
  colorFrom: purple
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,737 @@
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>Browser Agent App</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
12
+ }
13
+ .sidebar {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .memory-item:hover {
17
+ transform: translateY(-2px);
18
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .browser-window {
21
+ background-color: #f0f0f0;
22
+ border-radius: 8px;
23
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
24
+ }
25
+ .tab-active {
26
+ border-bottom: 3px solid #6e8efb;
27
+ }
28
+ .scrollbar-hide::-webkit-scrollbar {
29
+ display: none;
30
+ }
31
+ .scrollbar-hide {
32
+ -ms-overflow-style: none;
33
+ scrollbar-width: none;
34
+ }
35
+ .animate-pulse-slow {
36
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
37
+ }
38
+ @keyframes pulse {
39
+ 0%, 100% {
40
+ opacity: 1;
41
+ }
42
+ 50% {
43
+ opacity: 0.5;
44
+ }
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-100 font-sans">
49
+ <div class="flex h-screen overflow-hidden">
50
+ <!-- Sidebar -->
51
+ <div class="sidebar w-64 bg-white shadow-lg flex flex-col">
52
+ <div class="gradient-bg p-4 text-white">
53
+ <h1 class="text-xl font-bold">Browser Agent</h1>
54
+ <p class="text-sm opacity-80">AI-Powered Web Interaction</p>
55
+ </div>
56
+
57
+ <div class="flex-1 overflow-y-auto scrollbar-hide">
58
+ <div class="p-4">
59
+ <div class="mb-6">
60
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Navigation</h2>
61
+ <ul>
62
+ <li class="mb-1">
63
+ <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">
64
+ <i class="fas fa-globe mr-2"></i> Browser Agent
65
+ </button>
66
+ </li>
67
+ <li class="mb-1">
68
+ <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">
69
+ <i class="fas fa-brain mr-2"></i> Memory
70
+ </button>
71
+ </li>
72
+ <li class="mb-1">
73
+ <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">
74
+ <i class="fas fa-cog mr-2"></i> Settings
75
+ </button>
76
+ </li>
77
+ </ul>
78
+ </div>
79
+
80
+ <div class="mb-6">
81
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Quick Actions</h2>
82
+ <div class="space-y-2">
83
+ <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">
84
+ <span><i class="fas fa-bolt mr-2"></i> Quick Scrape</span>
85
+ <i class="fas fa-chevron-right text-xs"></i>
86
+ </button>
87
+ <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">
88
+ <span><i class="fas fa-video mr-2"></i> Video Download</span>
89
+ <i class="fas fa-chevron-right text-xs"></i>
90
+ </button>
91
+ <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">
92
+ <span><i class="fas fa-shield-alt mr-2"></i> Enable VPN</span>
93
+ <i class="fas fa-chevron-right text-xs"></i>
94
+ </button>
95
+ </div>
96
+ </div>
97
+
98
+ <div>
99
+ <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-2">Recent Activity</h2>
100
+ <div class="space-y-2">
101
+ <div class="text-xs p-2 bg-gray-50 rounded-md">
102
+ <p class="font-medium">Scraped example.com</p>
103
+ <p class="text-gray-500">2 minutes ago</p>
104
+ </div>
105
+ <div class="text-xs p-2 bg-gray-50 rounded-md">
106
+ <p class="font-medium">Saved to memory</p>
107
+ <p class="text-gray-500">10 minutes ago</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="p-4 border-t border-gray-200">
115
+ <div class="flex items-center">
116
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
117
+ <i class="fas fa-user"></i>
118
+ </div>
119
+ <div class="ml-2">
120
+ <p class="text-sm font-medium">Admin User</p>
121
+ <p class="text-xs text-gray-500">Connected</p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Main Content -->
128
+ <div class="flex-1 flex flex-col overflow-hidden">
129
+ <!-- Top Navigation -->
130
+ <div class="bg-white border-b border-gray-200 p-4 flex items-center justify-between">
131
+ <div class="flex items-center">
132
+ <button id="sidebar-toggle" class="mr-4 text-gray-500 hover:text-gray-700">
133
+ <i class="fas fa-bars"></i>
134
+ </button>
135
+ <h2 id="page-title" class="text-lg font-semibold">Browser Agent</h2>
136
+ </div>
137
+
138
+ <div class="flex items-center space-x-4">
139
+ <div class="relative">
140
+ <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">
141
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
142
+ </div>
143
+ <button class="p-2 text-gray-500 hover:text-gray-700">
144
+ <i class="fas fa-bell"></i>
145
+ </button>
146
+ <button class="p-2 text-gray-500 hover:text-gray-700">
147
+ <i class="fas fa-question-circle"></i>
148
+ </button>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Content Area -->
153
+ <div class="flex-1 overflow-y-auto p-6">
154
+ <!-- Browser Agent UI -->
155
+ <div id="browser-ui" class="space-y-6">
156
+ <div class="bg-white rounded-lg shadow-sm p-6">
157
+ <div class="flex items-center justify-between mb-4">
158
+ <h3 class="text-lg font-medium">Web Interaction</h3>
159
+ <div class="flex space-x-2">
160
+ <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-sm font-medium flex items-center">
161
+ <i class="fas fa-redo mr-1"></i> Refresh
162
+ </button>
163
+ <button class="px-3 py-1 bg-green-50 text-green-600 rounded-md text-sm font-medium flex items-center">
164
+ <i class="fas fa-save mr-1"></i> Save
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <div class="browser-window p-4 mb-6">
170
+ <div class="flex items-center mb-4">
171
+ <div class="flex space-x-1 mr-4">
172
+ <div class="w-3 h-3 rounded-full bg-red-400"></div>
173
+ <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
174
+ <div class="w-3 h-3 rounded-full bg-green-400"></div>
175
+ </div>
176
+ <div class="flex-1 bg-white border border-gray-300 rounded-md px-3 py-1 flex items-center">
177
+ <i class="fas fa-lock text-green-500 mr-2"></i>
178
+ <input type="text" value="https://example.com" class="flex-1 outline-none text-sm">
179
+ <i class="fas fa-search text-gray-400"></i>
180
+ </div>
181
+ </div>
182
+
183
+ <div class="bg-white p-4 border border-gray-200 rounded-md h-64 overflow-y-auto">
184
+ <div class="flex justify-center items-center h-full">
185
+ <div class="text-center">
186
+ <i class="fas fa-globe text-4xl text-gray-300 mb-2"></i>
187
+ <p class="text-gray-500">Web content will appear here</p>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
194
+ <div class="bg-blue-50 p-4 rounded-lg">
195
+ <div class="flex items-center mb-2">
196
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2">
197
+ <i class="fas fa-text-width"></i>
198
+ </div>
199
+ <h4 class="font-medium">Text Extraction</h4>
200
+ </div>
201
+ <p class="text-sm text-gray-600">Extract and analyze text content from web pages with AI-powered processing.</p>
202
+ </div>
203
+ <div class="bg-purple-50 p-4 rounded-lg">
204
+ <div class="flex items-center mb-2">
205
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2">
206
+ <i class="fas fa-image"></i>
207
+ </div>
208
+ <h4 class="font-medium">Image Scraping</h4>
209
+ </div>
210
+ <p class="text-sm text-gray-600">Download and process images from any webpage with automatic organization.</p>
211
+ </div>
212
+ <div class="bg-green-50 p-4 rounded-lg">
213
+ <div class="flex items-center mb-2">
214
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2">
215
+ <i class="fas fa-video"></i>
216
+ </div>
217
+ <h4 class="font-medium">Video Download</h4>
218
+ </div>
219
+ <p class="text-sm text-gray-600">Save videos from YouTube, Vimeo, and other platforms with metadata.</p>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="bg-gray-50 p-4 rounded-lg">
224
+ <h4 class="font-medium mb-3">AI Assistant</h4>
225
+ <div class="flex items-start space-x-3">
226
+ <div class="flex-shrink-0">
227
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
228
+ <i class="fas fa-robot"></i>
229
+ </div>
230
+ </div>
231
+ <div class="flex-1 min-w-0">
232
+ <div class="bg-white p-3 rounded-lg shadow-sm mb-2">
233
+ <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>
234
+ </div>
235
+ <div class="flex space-x-2">
236
+ <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium">
237
+ Summarize
238
+ </button>
239
+ <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium">
240
+ Extract Links
241
+ </button>
242
+ <button class="px-3 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium">
243
+ Analyze Structure
244
+ </button>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <div class="mt-4 flex">
250
+ <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">
251
+ <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">
252
+ <i class="fas fa-paper-plane"></i>
253
+ </button>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <div class="bg-white rounded-lg shadow-sm p-6">
259
+ <h3 class="text-lg font-medium mb-4">Scraping Tools</h3>
260
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
261
+ <div>
262
+ <h4 class="font-medium mb-2 flex items-center">
263
+ <i class="fas fa-link mr-2 text-blue-500"></i> URL Scraper
264
+ </h4>
265
+ <div class="space-y-3">
266
+ <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">
267
+ <div class="flex space-x-2">
268
+ <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium">
269
+ Scrape Now
270
+ </button>
271
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
272
+ Advanced Options
273
+ </button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ <div>
278
+ <h4 class="font-medium mb-2 flex items-center">
279
+ <i class="fas fa-download mr-2 text-purple-500"></i> Media Downloader
280
+ </h4>
281
+ <div class="space-y-3">
282
+ <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">
283
+ <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">
284
+ <option>Select format</option>
285
+ <option>MP4 (Video)</option>
286
+ <option>MP3 (Audio)</option>
287
+ <option>PNG (Image)</option>
288
+ <option>PDF (Document)</option>
289
+ </select>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Memory UI (Hidden by default) -->
297
+ <div id="memory-ui" class="hidden space-y-6">
298
+ <div class="bg-white rounded-lg shadow-sm p-6">
299
+ <div class="flex items-center justify-between mb-4">
300
+ <h3 class="text-lg font-medium">Memory System</h3>
301
+ <div class="flex space-x-2">
302
+ <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium flex items-center">
303
+ <i class="fas fa-plus mr-1"></i> Add Memory
304
+ </button>
305
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium flex items-center">
306
+ <i class="fas fa-filter mr-1"></i> Filter
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="mb-6">
312
+ <div class="flex border-b border-gray-200">
313
+ <button class="tab-button px-4 py-2 font-medium text-sm tab-active" data-tab="all">All Memories</button>
314
+ <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="text">Text</button>
315
+ <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="images">Images</button>
316
+ <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="videos">Videos</button>
317
+ <button class="tab-button px-4 py-2 font-medium text-sm" data-tab="links">Links</button>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="memory-content">
322
+ <!-- Memory items will be loaded here -->
323
+ <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
324
+ <div class="flex items-start mb-3">
325
+ <div class="w-10 h-10 rounded-md bg-blue-50 flex items-center justify-center text-blue-600 mr-3">
326
+ <i class="fas fa-file-alt"></i>
327
+ </div>
328
+ <div>
329
+ <h4 class="font-medium">Article about AI advancements</h4>
330
+ <p class="text-xs text-gray-500">Saved 2 days ago</p>
331
+ </div>
332
+ </div>
333
+ <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>
334
+ <div class="flex justify-between items-center">
335
+ <span class="text-xs px-2 py-1 bg-blue-50 text-blue-600 rounded-full">Text</span>
336
+ <div class="flex space-x-2">
337
+ <button class="text-gray-400 hover:text-blue-500">
338
+ <i class="fas fa-eye"></i>
339
+ </button>
340
+ <button class="text-gray-400 hover:text-green-500">
341
+ <i class="fas fa-edit"></i>
342
+ </button>
343
+ <button class="text-gray-400 hover:text-red-500">
344
+ <i class="fas fa-trash"></i>
345
+ </button>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
351
+ <div class="flex items-start mb-3">
352
+ <div class="w-10 h-10 rounded-md bg-purple-50 flex items-center justify-center text-purple-600 mr-3">
353
+ <i class="fas fa-image"></i>
354
+ </div>
355
+ <div>
356
+ <h4 class="font-medium">Infographic: ML models</h4>
357
+ <p class="text-xs text-gray-500">Saved 1 week ago</p>
358
+ </div>
359
+ </div>
360
+ <div class="bg-gray-100 rounded-md h-24 mb-3 flex items-center justify-center">
361
+ <i class="fas fa-image text-3xl text-gray-300"></i>
362
+ </div>
363
+ <div class="flex justify-between items-center">
364
+ <span class="text-xs px-2 py-1 bg-purple-50 text-purple-600 rounded-full">Image</span>
365
+ <div class="flex space-x-2">
366
+ <button class="text-gray-400 hover:text-blue-500">
367
+ <i class="fas fa-eye"></i>
368
+ </button>
369
+ <button class="text-gray-400 hover:text-green-500">
370
+ <i class="fas fa-edit"></i>
371
+ </button>
372
+ <button class="text-gray-400 hover:text-red-500">
373
+ <i class="fas fa-trash"></i>
374
+ </button>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
380
+ <div class="flex items-start mb-3">
381
+ <div class="w-10 h-10 rounded-md bg-green-50 flex items-center justify-center text-green-600 mr-3">
382
+ <i class="fas fa-link"></i>
383
+ </div>
384
+ <div>
385
+ <h4 class="font-medium">Useful research paper</h4>
386
+ <p class="text-xs text-gray-500">Saved 3 days ago</p>
387
+ </div>
388
+ </div>
389
+ <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>
390
+ <div class="flex justify-between items-center">
391
+ <span class="text-xs px-2 py-1 bg-green-50 text-green-600 rounded-full">Link</span>
392
+ <div class="flex space-x-2">
393
+ <button class="text-gray-400 hover:text-blue-500">
394
+ <i class="fas fa-eye"></i>
395
+ </button>
396
+ <button class="text-gray-400 hover:text-green-500">
397
+ <i class="fas fa-edit"></i>
398
+ </button>
399
+ <button class="text-gray-400 hover:text-red-500">
400
+ <i class="fas fa-trash"></i>
401
+ </button>
402
+ </div>
403
+ </div>
404
+ </div>
405
+
406
+ <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
407
+ <div class="flex items-start mb-3">
408
+ <div class="w-10 h-10 rounded-md bg-red-50 flex items-center justify-center text-red-600 mr-3">
409
+ <i class="fas fa-video"></i>
410
+ </div>
411
+ <div>
412
+ <h4 class="font-medium">Tutorial video</h4>
413
+ <p class="text-xs text-gray-500">Saved yesterday</p>
414
+ </div>
415
+ </div>
416
+ <div class="bg-gray-100 rounded-md h-24 mb-3 flex items-center justify-center">
417
+ <i class="fas fa-play-circle text-3xl text-gray-300"></i>
418
+ </div>
419
+ <div class="flex justify-between items-center">
420
+ <span class="text-xs px-2 py-1 bg-red-50 text-red-600 rounded-full">Video</span>
421
+ <div class="flex space-x-2">
422
+ <button class="text-gray-400 hover:text-blue-500">
423
+ <i class="fas fa-eye"></i>
424
+ </button>
425
+ <button class="text-gray-400 hover:text-green-500">
426
+ <i class="fas fa-edit"></i>
427
+ </button>
428
+ <button class="text-gray-400 hover:text-red-500">
429
+ <i class="fas fa-trash"></i>
430
+ </button>
431
+ </div>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="memory-item bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
436
+ <div class="flex items-start mb-3">
437
+ <div class="w-10 h-10 rounded-md bg-yellow-50 flex items-center justify-center text-yellow-600 mr-3">
438
+ <i class="fas fa-file-pdf"></i>
439
+ </div>
440
+ <div>
441
+ <h4 class="font-medium">Research PDF</h4>
442
+ <p class="text-xs text-gray-500">Saved 5 days ago</p>
443
+ </div>
444
+ </div>
445
+ <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>
446
+ <div class="flex justify-between items-center">
447
+ <span class="text-xs px-2 py-1 bg-yellow-50 text-yellow-600 rounded-full">PDF</span>
448
+ <div class="flex space-x-2">
449
+ <button class="text-gray-400 hover:text-blue-500">
450
+ <i class="fas fa-eye"></i>
451
+ </button>
452
+ <button class="text-gray-400 hover:text-green-500">
453
+ <i class="fas fa-edit"></i>
454
+ </button>
455
+ <button class="text-gray-400 hover:text-red-500">
456
+ <i class="fas fa-trash"></i>
457
+ </button>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="memory-item bg-blue-50 border border-blue-100 rounded-lg p-4 hover:shadow-md transition-all cursor-pointer">
463
+ <div class="flex items-center justify-center h-full">
464
+ <button class="flex flex-col items-center text-blue-600">
465
+ <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-2">
466
+ <i class="fas fa-plus"></i>
467
+ </div>
468
+ <span class="text-sm font-medium">Add New Memory</span>
469
+ </button>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="bg-white rounded-lg shadow-sm p-6">
476
+ <h3 class="text-lg font-medium mb-4">Memory Analysis</h3>
477
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
478
+ <div>
479
+ <h4 class="font-medium mb-2">Memory Statistics</h4>
480
+ <div class="bg-gray-50 p-4 rounded-lg">
481
+ <div class="grid grid-cols-3 gap-4 text-center">
482
+ <div>
483
+ <p class="text-2xl font-bold text-blue-600">248</p>
484
+ <p class="text-xs text-gray-500">Text Items</p>
485
+ </div>
486
+ <div>
487
+ <p class="text-2xl font-bold text-purple-600">56</p>
488
+ <p class="text-xs text-gray-500">Images</p>
489
+ </div>
490
+ <div>
491
+ <p class="text-2xl font-bold text-green-600">32</p>
492
+ <p class="text-xs text-gray-500">Videos</p>
493
+ </div>
494
+ </div>
495
+ <div class="mt-4">
496
+ <div class="flex items-center justify-between mb-1">
497
+ <span class="text-xs font-medium">Storage Usage</span>
498
+ <span class="text-xs text-gray-500">1.2GB of 5GB</span>
499
+ </div>
500
+ <div class="w-full bg-gray-200 rounded-full h-2">
501
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 24%"></div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ <div>
507
+ <h4 class="font-medium mb-2">AI Memory Search</h4>
508
+ <div class="space-y-3">
509
+ <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">
510
+ <div class="flex space-x-2">
511
+ <button class="px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-medium">
512
+ Search Memories
513
+ </button>
514
+ <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
515
+ Semantic Search
516
+ </button>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ </div>
523
+
524
+ <!-- Settings UI (Hidden by default) -->
525
+ <div id="settings-ui" class="hidden space-y-6">
526
+ <div class="bg-white rounded-lg shadow-sm p-6">
527
+ <h3 class="text-lg font-medium mb-6">Settings</h3>
528
+
529
+ <div class="space-y-6">
530
+ <div>
531
+ <h4 class="font-medium mb-3 flex items-center">
532
+ <i class="fas fa-user-shield mr-2 text-blue-500"></i> Security Settings
533
+ </h4>
534
+ <div class="space-y-4">
535
+ <div class="flex items-center justify-between">
536
+ <div>
537
+ <p class="font-medium">Tor Proxy</p>
538
+ <p class="text-sm text-gray-500">Route requests through Tor network for anonymity</p>
539
+ </div>
540
+ <label class="relative inline-flex items-center cursor-pointer">
541
+ <input type="checkbox" class="sr-only peer" checked>
542
+ <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>
543
+ </label>
544
+ </div>
545
+
546
+ <div class="flex items-center justify-between">
547
+ <div>
548
+ <p class="font-medium">VPN Connection</p>
549
+ <p class="text-sm text-gray-500">Encrypt all traffic with VPN</p>
550
+ </div>
551
+ <label class="relative inline-flex items-center cursor-pointer">
552
+ <input type="checkbox" class="sr-only peer">
553
+ <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>
554
+ </label>
555
+ </div>
556
+
557
+ <div class="flex items-center justify-between">
558
+ <div>
559
+ <p class="font-medium">DNS Encryption</p>
560
+ <p class="text-sm text-gray-500">Use DNS-over-HTTPS for secure DNS queries</p>
561
+ </div>
562
+ <label class="relative inline-flex items-center cursor-pointer">
563
+ <input type="checkbox" class="sr-only peer" checked>
564
+ <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>
565
+ </label>
566
+ </div>
567
+ </div>
568
+ </div>
569
+
570
+ <div class="border-t border-gray-200 pt-6">
571
+ <h4 class="font-medium mb-3 flex items-center">
572
+ <i class="fas fa-robot mr-2 text-purple-500"></i> AI Settings
573
+ </h4>
574
+ <div class="space-y-4">
575
+ <div>
576
+ <label class="block text-sm font-medium text-gray-700 mb-1">AI Model</label>
577
+ <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">
578
+ <option>huihui-ai/aya-expanse-32b-abliterated</option>
579
+ <option disabled>gpt-4 (API key required)</option>
580
+ <option disabled>claude-2 (API key required)</option>
581
+ </select>
582
+ </div>
583
+
584
+ <div>
585
+ <label class="block text-sm font-medium text-gray-700 mb-1">HuggingFace API Key</label>
586
+ <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">
587
+ </div>
588
+
589
+ <div>
590
+ <label class="block text-sm font-medium text-gray-700 mb-1">Memory Context Length</label>
591
+ <input type="range" min="512" max="4096" value="2048" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
592
+ <div class="flex justify-between text-xs text-gray-500">
593
+ <span>512 tokens</span>
594
+ <span>2048 tokens</span>
595
+ <span>4096 tokens</span>
596
+ </div>
597
+ </div>
598
+ </div>
599
+ </div>
600
+
601
+ <div class="border-t border-gray-200 pt-6">
602
+ <h4 class="font-medium mb-3 flex items-center">
603
+ <i class="fas fa-database mr-2 text-green-500"></i> Memory Storage
604
+ </h4>
605
+ <div class="space-y-4">
606
+ <div>
607
+ <label class="block text-sm font-medium text-gray-700 mb-1">Supabase URL</label>
608
+ <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">
609
+ </div>
610
+
611
+ <div>
612
+ <label class="block text-sm font-medium text-gray-700 mb-1">Supabase Key</label>
613
+ <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">
614
+ </div>
615
+
616
+ <div class="flex items-center justify-between">
617
+ <div>
618
+ <p class="font-medium">Enable Vector Search</p>
619
+ <p class="text-sm text-gray-500">Use pgvector for semantic search</p>
620
+ </div>
621
+ <label class="relative inline-flex items-center cursor-pointer">
622
+ <input type="checkbox" class="sr-only peer" checked>
623
+ <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>
624
+ </label>
625
+ </div>
626
+ </div>
627
+ </div>
628
+
629
+ <div class="border-t border-gray-200 pt-6">
630
+ <div class="flex justify-end space-x-3">
631
+ <button class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
632
+ Cancel
633
+ </button>
634
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700">
635
+ Save Settings
636
+ </button>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+ </div>
645
+
646
+ <script>
647
+ // Navigation functionality
648
+ document.getElementById('nav-browser').addEventListener('click', () => {
649
+ document.getElementById('browser-ui').classList.remove('hidden');
650
+ document.getElementById('memory-ui').classList.add('hidden');
651
+ document.getElementById('settings-ui').classList.add('hidden');
652
+ document.getElementById('page-title').textContent = 'Browser Agent';
653
+
654
+ // Update active nav button
655
+ document.querySelectorAll('[id^="nav-"]').forEach(btn => {
656
+ btn.classList.remove('bg-blue-50', 'text-blue-600');
657
+ btn.classList.add('hover:bg-gray-100', 'text-gray-700');
658
+ });
659
+ document.getElementById('nav-browser').classList.add('bg-blue-50', 'text-blue-600');
660
+ document.getElementById('nav-browser').classList.remove('hover:bg-gray-100', 'text-gray-700');
661
+ });
662
+
663
+ document.getElementById('nav-memory').addEventListener('click', () => {
664
+ document.getElementById('browser-ui').classList.add('hidden');
665
+ document.getElementById('memory-ui').classList.remove('hidden');
666
+ document.getElementById('settings-ui').classList.add('hidden');
667
+ document.getElementById('page-title').textContent = 'Memory System';
668
+
669
+ // Update active nav button
670
+ document.querySelectorAll('[id^="nav-"]').forEach(btn => {
671
+ btn.classList.remove('bg-blue-50', 'text-blue-600');
672
+ btn.classList.add('hover:bg-gray-100', 'text-gray-700');
673
+ });
674
+ document.getElementById('nav-memory').classList.add('bg-blue-50', 'text-blue-600');
675
+ document.getElementById('nav-memory').classList.remove('hover:bg-gray-100', 'text-gray-700');
676
+ });
677
+
678
+ document.getElementById('nav-settings').addEventListener('click', () => {
679
+ document.getElementById('browser-ui').classList.add('hidden');
680
+ document.getElementById('memory-ui').classList.add('hidden');
681
+ document.getElementById('settings-ui').classList.remove('hidden');
682
+ document.getElementById('page-title').textContent = 'Settings';
683
+
684
+ // Update active nav button
685
+ document.querySelectorAll('[id^="nav-"]').forEach(btn => {
686
+ btn.classList.remove('bg-blue-50', 'text-blue-600');
687
+ btn.classList.add('hover:bg-gray-100', 'text-gray-700');
688
+ });
689
+ document.getElementById('nav-settings').classList.add('bg-blue-50', 'text-blue-600');
690
+ document.getElementById('nav-settings').classList.remove('hover:bg-gray-100', 'text-gray-700');
691
+ });
692
+
693
+ // Tab functionality for memory view
694
+ document.querySelectorAll('.tab-button').forEach(button => {
695
+ button.addEventListener('click', () => {
696
+ // Update active tab
697
+ document.querySelectorAll('.tab-button').forEach(btn => {
698
+ btn.classList.remove('tab-active', 'text-blue-600');
699
+ btn.classList.add('text-gray-500');
700
+ });
701
+ button.classList.add('tab-active', 'text-blue-600');
702
+ button.classList.remove('text-gray-500');
703
+
704
+ // Here you would typically filter the memory items based on the tab
705
+ // For this demo, we'll just simulate it
706
+ const tab = button.getAttribute('data-tab');
707
+ console.log(`Switched to ${tab} tab`);
708
+ });
709
+ });
710
+
711
+ // Sidebar toggle
712
+ document.getElementById('sidebar-toggle').addEventListener('click', () => {
713
+ document.querySelector('.sidebar').classList.toggle('-ml-64');
714
+ });
715
+
716
+ // Simulate loading for memory items
717
+ document.querySelectorAll('.memory-item').forEach(item => {
718
+ item.addEventListener('click', (e) => {
719
+ if (!e.target.classList.contains('fa-trash') &&
720
+ !e.target.classList.contains('fa-edit') &&
721
+ !e.target.classList.contains('fa-eye')) {
722
+ console.log('Opening memory item:', item.querySelector('h4').textContent);
723
+ }
724
+ });
725
+ });
726
+
727
+ // Quick action buttons
728
+ document.querySelectorAll('.quick-action').forEach(button => {
729
+ button.addEventListener('click', () => {
730
+ const action = button.getAttribute('data-action');
731
+ console.log(`Quick action: ${action}`);
732
+ // Here you would typically trigger the corresponding functionality
733
+ });
734
+ });
735
+ </script>
736
+ <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>
737
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ // Full-Stack Browser Agent App Scaffold // Project Structure: // . // ├── server/ // │ ├── server.js # Express server entrypoint // │ ├── config.js # Env and configuration loader // │ ├── memory.js # Supabase (long-term memory) client // │ ├── scraper.js # Puppeteer & yt-dlp scraping tools // │ ├── security.js # Tor, VPN, DNS, Proxy management // │ └── routes/ // │ └── api.js # API endpoints: chat, scrape, memory // ├── ui/ // │ ├── public/ // │ │ └── index.html # HTML template // │ └── src/ // │ ├── App.jsx # React root component // │ ├── components/ // │ │ ├── BrowserUseUI.jsx # LLM-driven browser interaction UI // │ │ └── MemoryView.jsx # Long-term memory interface // │ └── index.jsx # React entrypoint // ├── .replit # Replit configuration // ├── package.json # monorepo scripts and dependencies // ├── README.md # Project overview and setup // └── .env # Environment variables (API keys, DB URLs) // server/config.js export const config = { HUGGINGFACE_API_KEY: process.env.HF_API_KEY, MODEL_ID: 'huihui-ai/aya-expanse-32b-abliterated', SUPABASE_URL: process.env.SUPABASE_URL, SUPABASE_KEY: process.env.SUPABASE_KEY, TOR_SOCKS_PROXY: 'socks5h://127.0.0.1:9050', VPN_COMMAND: 'openvpn --config /path/to/config.ovpn', }; // server/memory.js import { createClient } from '@supabase/supabase-js'; import pgvector from 'pgvector'; const supabase = createClient(config.SUPABASE_URL, config.SUPABASE_KEY, { vector: pgvector({}) }); export default supabase; // server/scraper.js import puppeteer from 'puppeteer'; import { YtDlp } from 'ytdlp-nodejs'; export async function scrapeURL(url) { /* Puppeteer scraping logic */ } export async function scrapeVideo(videoUrl) { /* yt-dlp download logic */ } export async function scrapeImages(url) { /* Puppeteer image src extraction */ } // server/security.js import { SocksProxyAgent } from 'socks-proxy-agent'; import { spawn } from 'child_process'; export function getTorAgent() { return new SocksProxyAgent(config.TOR_SOCKS_PROXY); } export function startVPN() { spawn(config.VPN_COMMAND.split(' ')[0], config.VPN_COMMAND.split(' ').slice(1)); } // server/server.js import express from 'express'; import apiRoutes from './routes/api.js'; import { config } from './config.js'; const app = express(); app.use(express.json()); app.use('/api', apiRoutes); const PORT = process.env.PORT || 3000; app.listen(PORT, () => console.log(`Server running on port ${PORT}`)); // ui/src/App.jsx import React from 'react'; import BrowserUseUI from './components/BrowserUseUI'; import MemoryView from './components/MemoryView'; export default function App() { return ( <> <BrowserUseUI /> <MemoryView /> </> ); } // .replit {"run": "npm run dev"} // package.json (simplified) { "name": "browser-agent-app", "scripts": { "dev": "concurrently \"npm:start:server\" \"npm:start:ui\"", "start:server": "node server/server.js", "start:ui": "cd ui && npm start" }, "dependencies": { "express": "^4.x", "@supabase/supabase-js": "^2.x", "pgvector": "^0.x", "puppeteer": "^20.x", "ytdlp-nodejs": "^1.x", "socks-proxy-agent": "^7.x", "dotenv": "^16.x" } }