Hugging Face's logo

Spaces:
CJHauser
/
tryhfmodelswithatoken
Running

App Files Community
CJHauser commited on
Commit
8939d51
·
verified ·
1 Parent(s): f4ca0c0

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +5 -3
  2. index.html +982 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tryhfmodelswithatoken
3
- emoji: 🐢
4
  colorFrom: purple
5
  colorTo: gray
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: tryhfmodelswithatoken
3
+ emoji: 🐳
4
  colorFrom: purple
5
  colorTo: gray
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,982 @@
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>Hugging Face Model Explorer</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, #a777e3);
12
+ }
13
+ .model-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .chat-message-user {
18
+ border-radius: 18px 18px 4px 18px;
19
+ }
20
+ .chat-message-ai {
21
+ border-radius: 18px 18px 18px 4px;
22
+ }
23
+ .loading-dots::after {
24
+ content: '.';
25
+ animation: dots 1.5s steps(5, end) infinite;
26
+ }
27
+ @keyframes dots {
28
+ 0%, 20% { content: '.'; }
29
+ 40% { content: '..'; }
30
+ 60% { content: '...'; }
31
+ 80%, 100% { content: ''; }
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 min-h-screen">
36
+ <div class="gradient-bg text-white py-6 shadow-lg">
37
+ <div class="container mx-auto px-4">
38
+ <div class="flex items-center justify-between">
39
+ <div class="flex items-center space-x-3">
40
+ <i class="fas fa-robot text-3xl"></i>
41
+ <h1 class="text-2xl md:text-3xl font-bold">Hugging Face Model Explorer</h1>
42
+ </div>
43
+ <div class="flex items-center space-x-4">
44
+ <button id="darkModeToggle" class="p-2 rounded-full hover:bg-white/10 transition">
45
+ <i class="fas fa-moon"></i>
46
+ </button>
47
+ <a href="https://huggingface.co" target="_blank" class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-full text-sm font-medium transition flex items-center space-x-2">
48
+ <i class="fab fa-hubspot"></i>
49
+ <span>Hugging Face</span>
50
+ </a>
51
+ </div>
52
+ </div>
53
+ <p class="mt-3 text-white/90 max-w-2xl">Explore, interact with, and generate content using thousands of AI models from Hugging Face</p>
54
+ </div>
55
+ </div>
56
+
57
+ <div class="container mx-auto px-4 py-8">
58
+ <!-- Auth Section -->
59
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
60
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
61
+ <i class="fas fa-key mr-2 text-purple-600"></i>
62
+ Authentication
63
+ </h2>
64
+ <div class="grid md:grid-cols-3 gap-6">
65
+ <div class="md:col-span-2">
66
+ <label for="accessToken" class="block text-sm font-medium text-gray-700 mb-1">Hugging Face Access Token</label>
67
+ <div class="flex">
68
+ <input type="password" id="accessToken" placeholder="hf_xxxxxxxxxxxxxxxx" class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
69
+ <button id="toggleTokenVisibility" class="px-3 bg-gray-100 border border-l-0 border-gray-300 rounded-r-lg text-gray-600 hover:bg-gray-200">
70
+ <i class="fas fa-eye"></i>
71
+ </button>
72
+ </div>
73
+ <p class="mt-2 text-sm text-gray-500">Get your token from <a href="https://huggingface.co/settings/tokens" target="_blank" class="text-purple-600 hover:underline">Hugging Face settings</a></p>
74
+ </div>
75
+ <div class="flex items-end">
76
+ <button id="saveTokenBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg transition flex items-center justify-center space-x-2">
77
+ <i class="fas fa-save"></i>
78
+ <span>Save Token</span>
79
+ </button>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Model Selection Section -->
85
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8">
86
+ <div class="flex justify-between items-center mb-4">
87
+ <h2 class="text-xl font-semibold flex items-center">
88
+ <i class="fas fa-cube mr-2 text-blue-600"></i>
89
+ Model Selection
90
+ </h2>
91
+ <div class="flex space-x-3">
92
+ <div class="relative">
93
+ <select id="modelTypeFilter" class="appearance-none bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
94
+ <option value="all">All Types</option>
95
+ <option value="text">Text</option>
96
+ <option value="image">Image</option>
97
+ <option value="audio">Audio</option>
98
+ <option value="multimodal">Multimodal</option>
99
+ </select>
100
+ <i class="fas fa-chevron-down absolute right-3 top-2.5 text-gray-500 text-xs"></i>
101
+ </div>
102
+ <div class="relative">
103
+ <input type="text" id="modelSearch" placeholder="Search models..." class="bg-gray-100 border border-gray-300 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-48">
104
+ <i class="fas fa-search absolute left-3 top-2.5 text-gray-500"></i>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div id="modelLoading" class="flex justify-center items-center py-12">
110
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
111
+ </div>
112
+
113
+ <div id="modelsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 hidden">
114
+ <!-- Models will be populated here -->
115
+ </div>
116
+
117
+ <div id="pagination" class="flex justify-center mt-6 space-x-2 hidden">
118
+ <button id="prevPage" class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50">
119
+ <i class="fas fa-chevron-left"></i>
120
+ </button>
121
+ <div id="pageNumbers" class="flex space-x-1"></div>
122
+ <button id="nextPage" class="px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 disabled:opacity-50">
123
+ <i class="fas fa-chevron-right"></i>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Interaction Section -->
129
+ <div id="interactionSection" class="hidden">
130
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
131
+ <!-- Model Info Card -->
132
+ <div class="bg-white rounded-xl shadow-md p-6 h-fit">
133
+ <div class="flex justify-between items-start mb-4">
134
+ <h2 class="text-xl font-semibold flex items-center">
135
+ <i class="fas fa-info-circle mr-2 text-green-600"></i>
136
+ Selected Model
137
+ </h2>
138
+ <button id="clearModelBtn" class="text-sm text-red-500 hover:text-red-700 flex items-center">
139
+ <i class="fas fa-times mr-1"></i> Clear
140
+ </button>
141
+ </div>
142
+ <div id="selectedModelInfo">
143
+ <div class="flex items-center mb-4">
144
+ <div id="modelAvatar" class="w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center mr-4">
145
+ <i class="fas fa-cube text-2xl text-gray-500"></i>
146
+ </div>
147
+ <div>
148
+ <h3 id="modelName" class="font-bold text-lg">No model selected</h3>
149
+ <p id="modelAuthor" class="text-sm text-gray-500">Select a model to begin</p>
150
+ </div>
151
+ </div>
152
+ <div class="space-y-3">
153
+ <div>
154
+ <span class="text-sm font-medium text-gray-500">Type:</span>
155
+ <span id="modelType" class="ml-2 text-sm">-</span>
156
+ </div>
157
+ <div>
158
+ <span class="text-sm font-medium text-gray-500">Tasks:</span>
159
+ <div id="modelTasks" class="flex flex-wrap gap-2 mt-1">
160
+ <span class="text-xs px-2 py-1 bg-gray-100 rounded-full">Select a model</span>
161
+ </div>
162
+ </div>
163
+ <div>
164
+ <span class="text-sm font-medium text-gray-500">Downloads:</span>
165
+ <span id="modelDownloads" class="ml-2 text-sm">-</span>
166
+ </div>
167
+ <div>
168
+ <span class="text-sm font-medium text-gray-500">Last Updated:</span>
169
+ <span id="modelUpdated" class="ml-2 text-sm">-</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Chat Interface -->
176
+ <div class="lg:col-span-2">
177
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
178
+ <!-- Chat Header -->
179
+ <div class="bg-gray-50 px-6 py-4 border-b flex justify-between items-center">
180
+ <h2 class="font-semibold flex items-center">
181
+ <i class="fas fa-comments mr-2 text-indigo-600"></i>
182
+ Model Interaction
183
+ </h2>
184
+ <div id="modelStatus" class="flex items-center text-sm">
185
+ <span class="w-2 h-2 rounded-full bg-gray-400 mr-2"></span>
186
+ <span>Disconnected</span>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Chat Messages -->
191
+ <div id="chatContainer" class="h-96 overflow-y-auto p-4 space-y-4 bg-gray-50">
192
+ <div class="text-center py-10 text-gray-500">
193
+ <i class="fas fa-comment-dots text-3xl mb-2"></i>
194
+ <p>Select a model and start chatting or generating content</p>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- Input Area -->
199
+ <div class="p-4 border-t bg-white">
200
+ <div id="textInputSection">
201
+ <div class="flex space-x-2 mb-2">
202
+ <button id="clearChatBtn" class="px-3 py-1 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
203
+ <i class="fas fa-trash-alt mr-1"></i> Clear
204
+ </button>
205
+ <button id="examplePromptBtn" class="px-3 py-1 bg-gray-100 rounded-lg text-sm hover:bg-gray-200">
206
+ <i class="fas fa-lightbulb mr-1"></i> Examples
207
+ </button>
208
+ </div>
209
+ <div class="flex">
210
+ <textarea id="userInput" rows="2" placeholder="Type your message or prompt here..." class="flex-1 px-4 py-3 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"></textarea>
211
+ <button id="sendMessageBtn" class="px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-r-lg transition">
212
+ <i class="fas fa-paper-plane"></i>
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <div id="imageInputSection" class="hidden">
218
+ <div class="mb-4">
219
+ <label class="block text-sm font-medium text-gray-700 mb-2">Prompt for Image Generation</label>
220
+ <textarea id="imagePrompt" rows="2" placeholder="Describe the image you want to generate..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 resize-none"></textarea>
221
+ </div>
222
+ <div class="grid grid-cols-2 gap-4">
223
+ <div>
224
+ <label class="block text-sm font-medium text-gray-700 mb-1">Number of Images</label>
225
+ <select id="imageCount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
226
+ <option value="1">1</option>
227
+ <option value="2">2</option>
228
+ <option value="4">4</option>
229
+ </select>
230
+ </div>
231
+ <div>
232
+ <label class="block text-sm font-medium text-gray-700 mb-1">Image Size</label>
233
+ <select id="imageSize" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
234
+ <option value="256x256">256x256</option>
235
+ <option value="512x512">512x512</option>
236
+ <option value="1024x1024">1024x1024</option>
237
+ </select>
238
+ </div>
239
+ </div>
240
+ <button id="generateImageBtn" class="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white py-3 px-4 rounded-lg transition flex items-center justify-center space-x-2">
241
+ <i class="fas fa-magic"></i>
242
+ <span>Generate Image</span>
243
+ </button>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Example Prompts Modal -->
253
+ <div id="examplePromptsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
254
+ <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[80vh] overflow-hidden">
255
+ <div class="flex justify-between items-center px-6 py-4 border-b">
256
+ <h3 class="text-lg font-semibold">Example Prompts</h3>
257
+ <button id="closeExampleModal" class="text-gray-500 hover:text-gray-700">
258
+ <i class="fas fa-times"></i>
259
+ </button>
260
+ </div>
261
+ <div class="p-6 overflow-y-auto">
262
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
263
+ <div class="bg-blue-50 p-4 rounded-lg">
264
+ <h4 class="font-medium text-blue-800 mb-2">Text Generation</h4>
265
+ <ul class="space-y-2 text-sm">
266
+ <li class="cursor-pointer hover:bg-blue-100 p-2 rounded" onclick="useExamplePrompt(this)">Write a short story about a robot discovering emotions</li>
267
+ <li class="cursor-pointer hover:bg-blue-100 p-2 rounded" onclick="useExamplePrompt(this)">Explain quantum computing in simple terms</li>
268
+ <li class="cursor-pointer hover:bg-blue-100 p-2 rounded" onclick="useExamplePrompt(this)">Generate a poem about the changing seasons</li>
269
+ </ul>
270
+ </div>
271
+ <div class="bg-purple-50 p-4 rounded-lg">
272
+ <h4 class="font-medium text-purple-800 mb-2">Image Generation</h4>
273
+ <ul class="space-y-2 text-sm">
274
+ <li class="cursor-pointer hover:bg-purple-100 p-2 rounded" onclick="useExamplePrompt(this)">A futuristic cityscape at sunset, digital art</li>
275
+ <li class="cursor-pointer hover:bg-purple-100 p-2 rounded" onclick="useExamplePrompt(this)">A cute corgi puppy wearing sunglasses on a beach</li>
276
+ <li class="cursor-pointer hover:bg-purple-100 p-2 rounded" onclick="useExamplePrompt(this)">An astronaut riding a horse in space, surreal art</li>
277
+ </ul>
278
+ </div>
279
+ <div class="bg-green-50 p-4 rounded-lg">
280
+ <h4 class="font-medium text-green-800 mb-2">Code Generation</h4>
281
+ <ul class="space-y-2 text-sm">
282
+ <li class="cursor-pointer hover:bg-green-100 p-2 rounded" onclick="useExamplePrompt(this)">Write a Python function to calculate Fibonacci sequence</li>
283
+ <li class="cursor-pointer hover:bg-green-100 p-2 rounded" onclick="useExamplePrompt(this)">Create a React component for a login form</li>
284
+ <li class="cursor-pointer hover:bg-green-100 p-2 rounded" onclick="useExamplePrompt(this)">Generate SQL query to find customers with most orders</li>
285
+ </ul>
286
+ </div>
287
+ <div class="bg-yellow-50 p-4 rounded-lg">
288
+ <h4 class="font-medium text-yellow-800 mb-2">Translation</h4>
289
+ <ul class="space-y-2 text-sm">
290
+ <li class="cursor-pointer hover:bg-yellow-100 p-2 rounded" onclick="useExamplePrompt(this)">Translate 'Hello, how are you?' to French</li>
291
+ <li class="cursor-pointer hover:bg-yellow-100 p-2 rounded" onclick="useExamplePrompt(this)">Convert this text to Spanish: 'The weather is nice today'</li>
292
+ <li class="cursor-pointer hover:bg-yellow-100 p-2 rounded" onclick="useExamplePrompt(this)">What does 'こんにちは' mean in English?</li>
293
+ </ul>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <script>
301
+ // DOM Elements
302
+ const darkModeToggle = document.getElementById('darkModeToggle');
303
+ const accessTokenInput = document.getElementById('accessToken');
304
+ const toggleTokenVisibility = document.getElementById('toggleTokenVisibility');
305
+ const saveTokenBtn = document.getElementById('saveTokenBtn');
306
+ const modelTypeFilter = document.getElementById('modelTypeFilter');
307
+ const modelSearch = document.getElementById('modelSearch');
308
+ const modelsContainer = document.getElementById('modelsContainer');
309
+ const modelLoading = document.getElementById('modelLoading');
310
+ const pagination = document.getElementById('pagination');
311
+ const prevPageBtn = document.getElementById('prevPage');
312
+ const nextPageBtn = document.getElementById('nextPage');
313
+ const pageNumbers = document.getElementById('pageNumbers');
314
+ const interactionSection = document.getElementById('interactionSection');
315
+ const clearModelBtn = document.getElementById('clearModelBtn');
316
+ const modelName = document.getElementById('modelName');
317
+ const modelAuthor = document.getElementById('modelAuthor');
318
+ const modelType = document.getElementById('modelType');
319
+ const modelTasks = document.getElementById('modelTasks');
320
+ const modelDownloads = document.getElementById('modelDownloads');
321
+ const modelUpdated = document.getElementById('modelUpdated');
322
+ const modelAvatar = document.getElementById('modelAvatar');
323
+ const modelStatus = document.getElementById('modelStatus');
324
+ const chatContainer = document.getElementById('chatContainer');
325
+ const userInput = document.getElementById('userInput');
326
+ const sendMessageBtn = document.getElementById('sendMessageBtn');
327
+ const clearChatBtn = document.getElementById('clearChatBtn');
328
+ const examplePromptBtn = document.getElementById('examplePromptBtn');
329
+ const textInputSection = document.getElementById('textInputSection');
330
+ const imageInputSection = document.getElementById('imageInputSection');
331
+ const imagePrompt = document.getElementById('imagePrompt');
332
+ const imageCount = document.getElementById('imageCount');
333
+ const imageSize = document.getElementById('imageSize');
334
+ const generateImageBtn = document.getElementById('generateImageBtn');
335
+ const examplePromptsModal = document.getElementById('examplePromptsModal');
336
+ const closeExampleModal = document.getElementById('closeExampleModal');
337
+
338
+ // State
339
+ let currentPage = 1;
340
+ let totalPages = 1;
341
+ let modelsPerPage = 9;
342
+ let allModels = [];
343
+ let filteredModels = [];
344
+ let selectedModel = null;
345
+ let accessToken = localStorage.getItem('hfAccessToken') || '';
346
+ let isDarkMode = localStorage.getItem('darkMode') === 'true';
347
+ let chatHistory = [];
348
+
349
+ // Initialize
350
+ document.addEventListener('DOMContentLoaded', () => {
351
+ // Set dark mode if enabled
352
+ if (isDarkMode) {
353
+ enableDarkMode();
354
+ }
355
+
356
+ // Set saved token if exists
357
+ if (accessToken) {
358
+ accessTokenInput.value = accessToken;
359
+ }
360
+
361
+ // Load models
362
+ loadModels();
363
+ });
364
+
365
+ // Event Listeners
366
+ darkModeToggle.addEventListener('click', toggleDarkMode);
367
+ toggleTokenVisibility.addEventListener('click', toggleTokenVisibilityHandler);
368
+ saveTokenBtn.addEventListener('click', saveAccessToken);
369
+ modelTypeFilter.addEventListener('change', filterModels);
370
+ modelSearch.addEventListener('input', filterModels);
371
+ prevPageBtn.addEventListener('click', () => changePage(-1));
372
+ nextPageBtn.addEventListener('click', () => changePage(1));
373
+ clearModelBtn.addEventListener('click', clearSelectedModel);
374
+ sendMessageBtn.addEventListener('click', sendMessage);
375
+ userInput.addEventListener('keydown', (e) => {
376
+ if (e.key === 'Enter' && !e.shiftKey) {
377
+ e.preventDefault();
378
+ sendMessage();
379
+ }
380
+ });
381
+ clearChatBtn.addEventListener('click', clearChat);
382
+ examplePromptBtn.addEventListener('click', showExamplePrompts);
383
+ closeExampleModal.addEventListener('click', () => {
384
+ examplePromptsModal.classList.add('hidden');
385
+ });
386
+ generateImageBtn.addEventListener('click', generateImage);
387
+
388
+ // Functions
389
+ function toggleDarkMode() {
390
+ isDarkMode = !isDarkMode;
391
+ localStorage.setItem('darkMode', isDarkMode);
392
+
393
+ if (isDarkMode) {
394
+ enableDarkMode();
395
+ } else {
396
+ disableDarkMode();
397
+ }
398
+ }
399
+
400
+ function enableDarkMode() {
401
+ document.documentElement.classList.add('dark');
402
+ darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
403
+ document.body.classList.add('bg-gray-900');
404
+ document.body.classList.remove('bg-gray-50');
405
+ }
406
+
407
+ function disableDarkMode() {
408
+ document.documentElement.classList.remove('dark');
409
+ darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
410
+ document.body.classList.remove('bg-gray-900');
411
+ document.body.classList.add('bg-gray-50');
412
+ }
413
+
414
+ function toggleTokenVisibilityHandler() {
415
+ const icon = toggleTokenVisibility.querySelector('i');
416
+ if (accessTokenInput.type === 'password') {
417
+ accessTokenInput.type = 'text';
418
+ icon.classList.replace('fa-eye', 'fa-eye-slash');
419
+ } else {
420
+ accessTokenInput.type = 'password';
421
+ icon.classList.replace('fa-eye-slash', 'fa-eye');
422
+ }
423
+ }
424
+
425
+ function saveAccessToken() {
426
+ accessToken = accessTokenInput.value.trim();
427
+ if (accessToken) {
428
+ localStorage.setItem('hfAccessToken', accessToken);
429
+ showToast('Access token saved successfully!', 'success');
430
+ loadModels(); // Reload models with new token
431
+ } else {
432
+ showToast('Please enter a valid access token', 'error');
433
+ }
434
+ }
435
+
436
+ async function loadModels() {
437
+ if (!accessToken) {
438
+ showToast('Please enter your Hugging Face access token first', 'error');
439
+ return;
440
+ }
441
+
442
+ try {
443
+ modelLoading.classList.remove('hidden');
444
+ modelsContainer.classList.add('hidden');
445
+ pagination.classList.add('hidden');
446
+
447
+ // In a real app, you would fetch from Hugging Face API
448
+ // const response = await fetch('https://huggingface.co/api/models', {
449
+ // headers: {
450
+ // 'Authorization': `Bearer ${accessToken}`
451
+ // }
452
+ // });
453
+ // allModels = await response.json();
454
+
455
+ // For demo purposes, we'll use mock data
456
+ allModels = getMockModels();
457
+
458
+ filterModels();
459
+ modelLoading.classList.add('hidden');
460
+ } catch (error) {
461
+ console.error('Error loading models:', error);
462
+ showToast('Failed to load models. Check your token and try again.', 'error');
463
+ modelLoading.classList.add('hidden');
464
+ }
465
+ }
466
+
467
+ function filterModels() {
468
+ const searchTerm = modelSearch.value.toLowerCase();
469
+ const typeFilter = modelTypeFilter.value;
470
+
471
+ filteredModels = allModels.filter(model => {
472
+ const matchesSearch = model.name.toLowerCase().includes(searchTerm) ||
473
+ model.author.toLowerCase().includes(searchTerm) ||
474
+ model.tags.some(tag => tag.toLowerCase().includes(searchTerm));
475
+
476
+ const matchesType = typeFilter === 'all' ||
477
+ (typeFilter === 'text' && model.type === 'text') ||
478
+ (typeFilter === 'image' && model.type === 'image') ||
479
+ (typeFilter === 'audio' && model.type === 'audio') ||
480
+ (typeFilter === 'multimodal' && model.type === 'multimodal');
481
+
482
+ return matchesSearch && matchesType;
483
+ });
484
+
485
+ totalPages = Math.ceil(filteredModels.length / modelsPerPage);
486
+ renderModels();
487
+ renderPagination();
488
+ }
489
+
490
+ function renderModels() {
491
+ modelsContainer.innerHTML = '';
492
+
493
+ const startIndex = (currentPage - 1) * modelsPerPage;
494
+ const endIndex = Math.min(startIndex + modelsPerPage, filteredModels.length);
495
+
496
+ for (let i = startIndex; i < endIndex; i++) {
497
+ const model = filteredModels[i];
498
+ const modelCard = document.createElement('div');
499
+ modelCard.className = 'model-card bg-white rounded-xl shadow-sm p-4 border border-gray-200 hover:border-purple-300 transition cursor-pointer';
500
+ modelCard.innerHTML = `
501
+ <div class="flex items-start space-x-3">
502
+ <div class="flex-shrink-0 w-12 h-12 rounded-lg ${getModelColorClass(model.type)} flex items-center justify-center">
503
+ ${getModelIcon(model.type)}
504
+ </div>
505
+ <div class="flex-1 min-w-0">
506
+ <h3 class="font-medium text-gray-900 truncate">${model.name}</h3>
507
+ <p class="text-sm text-gray-500 truncate">by ${model.author}</p>
508
+ <div class="flex flex-wrap gap-1 mt-2">
509
+ ${model.tags.slice(0, 3).map(tag => `<span class="text-xs px-2 py-1 ${getTagColorClass(tag)} rounded-full">${tag}</span>`).join('')}
510
+ ${model.tags.length > 3 ? `<span class="text-xs px-2 py-1 bg-gray-100 rounded-full">+${model.tags.length - 3}</span>` : ''}
511
+ </div>
512
+ </div>
513
+ </div>
514
+ `;
515
+ modelCard.addEventListener('click', () => selectModel(model));
516
+ modelsContainer.appendChild(modelCard);
517
+ }
518
+
519
+ modelsContainer.classList.remove('hidden');
520
+ }
521
+
522
+ function renderPagination() {
523
+ pageNumbers.innerHTML = '';
524
+
525
+ // Always show first page
526
+ addPageNumber(1);
527
+
528
+ // Show ellipsis if needed
529
+ if (currentPage > 3) {
530
+ const ellipsis = document.createElement('span');
531
+ ellipsis.className = 'px-4 py-2';
532
+ ellipsis.textContent = '...';
533
+ pageNumbers.appendChild(ellipsis);
534
+ }
535
+
536
+ // Show current page and neighbors
537
+ for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
538
+ addPageNumber(i);
539
+ }
540
+
541
+ // Show ellipsis if needed
542
+ if (currentPage < totalPages - 2) {
543
+ const ellipsis = document.createElement('span');
544
+ ellipsis.className = 'px-4 py-2';
545
+ ellipsis.textContent = '...';
546
+ pageNumbers.appendChild(ellipsis);
547
+ }
548
+
549
+ // Always show last page if different from first
550
+ if (totalPages > 1) {
551
+ addPageNumber(totalPages);
552
+ }
553
+
554
+ prevPageBtn.disabled = currentPage === 1;
555
+ nextPageBtn.disabled = currentPage === totalPages;
556
+
557
+ pagination.classList.remove('hidden');
558
+ }
559
+
560
+ function addPageNumber(page) {
561
+ const pageBtn = document.createElement('button');
562
+ pageBtn.className = `px-4 py-2 rounded-lg ${currentPage === page ? 'bg-purple-600 text-white' : 'bg-gray-100 hover:bg-gray-200'}`;
563
+ pageBtn.textContent = page;
564
+ pageBtn.addEventListener('click', () => {
565
+ currentPage = page;
566
+ renderModels();
567
+ renderPagination();
568
+ });
569
+ pageNumbers.appendChild(pageBtn);
570
+ }
571
+
572
+ function changePage(delta) {
573
+ const newPage = currentPage + delta;
574
+ if (newPage > 0 && newPage <= totalPages) {
575
+ currentPage = newPage;
576
+ renderModels();
577
+ renderPagination();
578
+ }
579
+ }
580
+
581
+ function selectModel(model) {
582
+ selectedModel = model;
583
+ interactionSection.classList.remove('hidden');
584
+
585
+ // Update model info
586
+ modelName.textContent = model.name;
587
+ modelAuthor.textContent = `by ${model.author}`;
588
+ modelType.textContent = model.type.charAt(0).toUpperCase() + model.type.slice(1);
589
+ modelDownloads.textContent = model.downloads.toLocaleString();
590
+ modelUpdated.textContent = new Date(model.lastUpdated).toLocaleDateString();
591
+
592
+ // Update model tasks
593
+ modelTasks.innerHTML = '';
594
+ model.tasks.forEach(task => {
595
+ const taskEl = document.createElement('span');
596
+ taskEl.className = 'text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full';
597
+ taskEl.textContent = task;
598
+ modelTasks.appendChild(taskEl);
599
+ });
600
+
601
+ // Update model avatar
602
+ modelAvatar.className = `w-16 h-16 rounded-lg ${getModelColorClass(model.type)} flex items-center justify-center mr-4`;
603
+ modelAvatar.innerHTML = getModelIcon(model.type, 'text-2xl');
604
+
605
+ // Update status
606
+ updateModelStatus('connected');
607
+
608
+ // Show appropriate input section
609
+ if (model.type === 'image') {
610
+ textInputSection.classList.add('hidden');
611
+ imageInputSection.classList.remove('hidden');
612
+ clearChat();
613
+ } else {
614
+ textInputSection.classList.remove('hidden');
615
+ imageInputSection.classList.add('hidden');
616
+ addSystemMessage(`You are now interacting with the ${model.name} model. What would you like to do?`);
617
+ }
618
+
619
+ // Scroll to interaction section
620
+ interactionSection.scrollIntoView({ behavior: 'smooth' });
621
+ }
622
+
623
+ function clearSelectedModel() {
624
+ selectedModel = null;
625
+ interactionSection.classList.add('hidden');
626
+ updateModelStatus('disconnected');
627
+ clearChat();
628
+ }
629
+
630
+ function updateModelStatus(status) {
631
+ const statusDot = modelStatus.querySelector('span');
632
+ const statusText = modelStatus.querySelector('span:last-child');
633
+
634
+ if (status === 'connected') {
635
+ statusDot.className = 'w-2 h-2 rounded-full bg-green-500 mr-2';
636
+ statusText.textContent = 'Connected';
637
+ } else if (status === 'connecting') {
638
+ statusDot.className = 'w-2 h-2 rounded-full bg-yellow-500 mr-2';
639
+ statusText.textContent = 'Connecting...';
640
+ } else {
641
+ statusDot.className = 'w-2 h-2 rounded-full bg-gray-400 mr-2';
642
+ statusText.textContent = 'Disconnected';
643
+ }
644
+ }
645
+
646
+ function addSystemMessage(message) {
647
+ const messageDiv = document.createElement('div');
648
+ messageDiv.className = 'flex justify-center';
649
+
650
+ const contentDiv = document.createElement('div');
651
+ contentDiv.className = 'bg-gray-200 text-gray-700 px-4 py-2 rounded-lg text-sm';
652
+ contentDiv.textContent = message;
653
+
654
+ messageDiv.appendChild(contentDiv);
655
+ chatContainer.appendChild(messageDiv);
656
+ chatContainer.scrollTop = chatContainer.scrollHeight;
657
+ }
658
+
659
+ function addUserMessage(message) {
660
+ const messageDiv = document.createElement('div');
661
+ messageDiv.className = 'flex justify-end';
662
+
663
+ const contentDiv = document.createElement('div');
664
+ contentDiv.className = 'bg-blue-600 text-white px-4 py-2 chat-message-user max-w-xs md:max-w-md';
665
+ contentDiv.textContent = message;
666
+
667
+ messageDiv.appendChild(contentDiv);
668
+ chatContainer.appendChild(messageDiv);
669
+ chatContainer.scrollTop = chatContainer.scrollHeight;
670
+
671
+ // Add to chat history
672
+ chatHistory.push({ role: 'user', content: message });
673
+ }
674
+
675
+ function addAIMessage(message, isImage = false) {
676
+ const messageDiv = document.createElement('div');
677
+ messageDiv.className = 'flex justify-start';
678
+
679
+ const contentDiv = document.createElement('div');
680
+ contentDiv.className = 'bg-gray-100 text-gray-800 px-4 py-2 chat-message-ai max-w-xs md:max-w-md';
681
+
682
+ if (isImage) {
683
+ // For images, we'd typically get a URL from the API
684
+ // Here we'll just show a placeholder
685
+ const img = document.createElement('img');
686
+ img.src = 'https://via.placeholder.com/512/7c3aed/ffffff?text=Generated+Image';
687
+ img.alt = 'Generated image';
688
+ img.className = 'w-full h-auto rounded-lg';
689
+ contentDiv.appendChild(img);
690
+ contentDiv.appendChild(document.createElement('br'));
691
+
692
+ const caption = document.createElement('p');
693
+ caption.className = 'text-sm mt-2';
694
+ caption.textContent = 'Generated image based on your prompt';
695
+ contentDiv.appendChild(caption);
696
+ } else {
697
+ contentDiv.textContent = message;
698
+ }
699
+
700
+ messageDiv.appendChild(contentDiv);
701
+ chatContainer.appendChild(messageDiv);
702
+ chatContainer.scrollTop = chatContainer.scrollHeight;
703
+
704
+ // Add to chat history
705
+ chatHistory.push({ role: 'assistant', content: message });
706
+ }
707
+
708
+ function addLoadingMessage() {
709
+ const messageDiv = document.createElement('div');
710
+ messageDiv.className = 'flex justify-start';
711
+
712
+ const contentDiv = document.createElement('div');
713
+ contentDiv.className = 'bg-gray-100 text-gray-800 px-4 py-2 chat-message-ai max-w-xs md:max-w-md';
714
+ contentDiv.innerHTML = '<div class="loading-dots">Generating response</div>';
715
+
716
+ messageDiv.appendChild(contentDiv);
717
+ chatContainer.appendChild(messageDiv);
718
+ chatContainer.scrollTop = chatContainer.scrollHeight;
719
+
720
+ return contentDiv;
721
+ }
722
+
723
+ function clearChat() {
724
+ chatContainer.innerHTML = `
725
+ <div class="text-center py-10 text-gray-500">
726
+ <i class="fas fa-comment-dots text-3xl mb-2"></i>
727
+ <p>Select a model and start chatting or generating content</p>
728
+ </div>
729
+ `;
730
+ chatHistory = [];
731
+ }
732
+
733
+ function sendMessage() {
734
+ const message = userInput.value.trim();
735
+ if (!message) return;
736
+
737
+ if (!selectedModel) {
738
+ showToast('Please select a model first', 'error');
739
+ return;
740
+ }
741
+
742
+ addUserMessage(message);
743
+ userInput.value = '';
744
+
745
+ // Show loading message
746
+ const loadingElement = addLoadingMessage();
747
+
748
+ // Simulate API call
749
+ setTimeout(() => {
750
+ // Replace loading message with response
751
+ loadingElement.classList.remove('loading-dots');
752
+ loadingElement.textContent = '';
753
+
754
+ // Generate a mock response based on model type
755
+ let response;
756
+ if (selectedModel.type === 'text') {
757
+ response = `This is a mock response from the ${selectedModel.name} model. In a real implementation, this would be the actual response from the Hugging Face API.`;
758
+ } else if (selectedModel.type === 'image') {
759
+ response = `I'm an image generation model. Please use the image generation panel below to create images.`;
760
+ } else {
761
+ response = `I'm a ${selectedModel.type} model. Here's a sample response based on your input.`;
762
+ }
763
+
764
+ loadingElement.textContent = response;
765
+
766
+ // Add to chat history
767
+ chatHistory.push({ role: 'assistant', content: response });
768
+ }, 1500);
769
+ }
770
+
771
+ function generateImage() {
772
+ const prompt = imagePrompt.value.trim();
773
+ if (!prompt) {
774
+ showToast('Please enter an image prompt', 'error');
775
+ return;
776
+ }
777
+
778
+ if (!selectedModel || selectedModel.type !== 'image') {
779
+ showToast('Please select an image generation model first', 'error');
780
+ return;
781
+ }
782
+
783
+ // Clear previous chat and add user prompt
784
+ clearChat();
785
+ addUserMessage(`Generate image: ${prompt}`);
786
+
787
+ // Show loading message
788
+ const loadingElement = addLoadingMessage();
789
+
790
+ // Simulate API call to generate image
791
+ setTimeout(() => {
792
+ // Replace loading message with image
793
+ loadingElement.classList.remove('loading-dots');
794
+ loadingElement.textContent = '';
795
+
796
+ // Add mock generated image
797
+ addAIMessage('', true);
798
+
799
+ showToast('Image generated successfully!', 'success');
800
+ }, 2500);
801
+ }
802
+
803
+ function showExamplePrompts() {
804
+ examplePromptsModal.classList.remove('hidden');
805
+ }
806
+
807
+ function useExamplePrompt(element) {
808
+ const prompt = element.textContent;
809
+
810
+ if (selectedModel?.type === 'image') {
811
+ imagePrompt.value = prompt;
812
+ examplePromptsModal.classList.add('hidden');
813
+ } else {
814
+ userInput.value = prompt;
815
+ examplePromptsModal.classList.add('hidden');
816
+ userInput.focus();
817
+ }
818
+ }
819
+
820
+ function showToast(message, type = 'info') {
821
+ const toast = document.createElement('div');
822
+ toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
823
+ type === 'success' ? 'bg-green-500' :
824
+ type === 'error' ? 'bg-red-500' :
825
+ 'bg-blue-500'
826
+ } flex items-center space-x-2 z-50`;
827
+
828
+ toast.innerHTML = `
829
+ <i class="fas ${
830
+ type === 'success' ? 'fa-check-circle' :
831
+ type === 'error' ? 'fa-exclamation-circle' :
832
+ 'fa-info-circle'
833
+ }"></i>
834
+ <span>${message}</span>
835
+ `;
836
+
837
+ document.body.appendChild(toast);
838
+
839
+ setTimeout(() => {
840
+ toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
841
+ setTimeout(() => toast.remove(), 300);
842
+ }, 3000);
843
+ }
844
+
845
+ function getModelColorClass(type) {
846
+ switch(type) {
847
+ case 'text': return 'bg-blue-100 text-blue-800';
848
+ case 'image': return 'bg-purple-100 text-purple-800';
849
+ case 'audio': return 'bg-green-100 text-green-800';
850
+ case 'multimodal': return 'bg-indigo-100 text-indigo-800';
851
+ default: return 'bg-gray-100 text-gray-800';
852
+ }
853
+ }
854
+
855
+ function getModelIcon(type, size = 'text-xl') {
856
+ switch(type) {
857
+ case 'text': return `<i class="fas fa-font ${size}"></i>`;
858
+ case 'image': return `<i class="fas fa-image ${size}"></i>`;
859
+ case 'audio': return `<i class="fas fa-music ${size}"></i>`;
860
+ case 'multimodal': return `<i class="fas fa-shapes ${size}"></i>`;
861
+ default: return `<i class="fas fa-cube ${size}"></i>`;
862
+ }
863
+ }
864
+
865
+ function getTagColorClass(tag) {
866
+ // Simple hash function to get consistent colors for tags
867
+ let hash = 0;
868
+ for (let i = 0; i < tag.length; i++) {
869
+ hash = tag.charCodeAt(i) + ((hash << 5) - hash);
870
+ }
871
+
872
+ const colors = [
873
+ 'bg-blue-100 text-blue-800',
874
+ 'bg-green-100 text-green-800',
875
+ 'bg-yellow-100 text-yellow-800',
876
+ 'bg-red-100 text-red-800',
877
+ 'bg-purple-100 text-purple-800',
878
+ 'bg-pink-100 text-pink-800',
879
+ 'bg-indigo-100 text-indigo-800'
880
+ ];
881
+
882
+ return colors[Math.abs(hash) % colors.length];
883
+ }
884
+
885
+ // Mock data for demonstration
886
+ function getMockModels() {
887
+ return [
888
+ {
889
+ id: 'gpt2',
890
+ name: 'gpt2',
891
+ author: 'openai',
892
+ type: 'text',
893
+ tags: ['text-generation', 'gpt', 'transformers'],
894
+ downloads: 15000000,
895
+ lastUpdated: '2023-05-15',
896
+ tasks: ['text-generation', 'text-completion']
897
+ },
898
+ {
899
+ id: 'stable-diffusion-v1-5',
900
+ name: 'stable-diffusion-v1-5',
901
+ author: 'CompVis',
902
+ type: 'image',
903
+ tags: ['text-to-image', 'diffusion', 'stable-diffusion'],
904
+ downloads: 8500000,
905
+ lastUpdated: '2023-04-20',
906
+ tasks: ['text-to-image']
907
+ },
908
+ {
909
+ id: 'bert-base-uncased',
910
+ name: 'bert-base-uncased',
911
+ author: 'google',
912
+ type: 'text',
913
+ tags: ['fill-mask', 'bert', 'transformers'],
914
+ downloads: 12000000,
915
+ lastUpdated: '2023-03-10',
916
+ tasks: ['fill-mask', 'feature-extraction']
917
+ },
918
+ {
919
+ id: 'whisper-large',
920
+ name: 'whisper-large',
921
+ author: 'openai',
922
+ type: 'audio',
923
+ tags: ['automatic-speech-recognition', 'whisper'],
924
+ downloads: 5000000,
925
+ lastUpdated: '2023-06-01',
926
+ tasks: ['automatic-speech-recognition']
927
+ },
928
+ {
929
+ id: 'blip-image-captioning-base',
930
+ name: 'blip-image-captioning-base',
931
+ author: 'Salesforce',
932
+ type: 'multimodal',
933
+ tags: ['image-to-text', 'captioning', 'blip'],
934
+ downloads: 3200000,
935
+ lastUpdated: '2023-02-18',
936
+ tasks: ['image-to-text']
937
+ },
938
+ {
939
+ id: 't5-base',
940
+ name: 't5-base',
941
+ author: 'google',
942
+ type: 'text',
943
+ tags: ['text2text-generation', 't5', 'transformers'],
944
+ downloads: 9000000,
945
+ lastUpdated: '2023-01-30',
946
+ tasks: ['summarization', 'translation', 'text-generation']
947
+ },
948
+ {
949
+ id: 'clip-vit-base-patch32',
950
+ name: 'clip-vit-base-patch32',
951
+ author: 'openai',
952
+ type: 'multimodal',
953
+ tags: ['zero-shot-image-classification', 'clip'],
954
+ downloads: 2800000,
955
+ lastUpdated: '2023-05-22',
956
+ tasks: ['zero-shot-image-classification']
957
+ },
958
+ {
959
+ id: 'distilbert-base-uncased',
960
+ name: 'distilbert-base-uncased',
961
+ author: 'huggingface',
962
+ type: 'text',
963
+ tags: ['distilled', 'bert', 'transformers'],
964
+ downloads: 11000000,
965
+ lastUpdated: '2023-04-05',
966
+ tasks: ['fill-mask', 'text-classification']
967
+ },
968
+ {
969
+ id: 'vilt-b32-finetuned-vqa',
970
+ name: 'vilt-b32-finetuned-vqa',
971
+ author: 'dandelin',
972
+ type: 'multimodal',
973
+ tags: ['visual-question-answering', 'vilt'],
974
+ downloads: 1500000,
975
+ lastUpdated: '2023-03-15',
976
+ tasks: ['visual-question-answering']
977
+ }
978
+ ];
979
+ }
980
+ </script>
981
+ <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=CJHauser/tryhfmodelswithatoken" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
982
+ </html>
prompts.txt ADDED
File without changes