Hugging Face's logo

Spaces:
XXXMARK
/
kotahi
Running

App Files Community
XXXMARK commited on
Commit
8d00a2a
·
verified ·
1 Parent(s): de5ea66

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +809 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Kotahi
3
- emoji: 📉
4
- colorFrom: gray
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: kotahi
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
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,809 @@
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 Assistant</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, #ff758c 0%, #ff7eb3 100%);
12
+ }
13
+ .chat-bubble {
14
+ border-radius: 20px;
15
+ position: relative;
16
+ max-width: 80%;
17
+ }
18
+ .user-bubble {
19
+ background-color: #f3f4f6;
20
+ margin-left: auto;
21
+ border-bottom-right-radius: 5px;
22
+ }
23
+ .bot-bubble {
24
+ background-color: white;
25
+ margin-right: auto;
26
+ border-bottom-left-radius: 5px;
27
+ }
28
+ .typing-indicator span {
29
+ display: inline-block;
30
+ width: 8px;
31
+ height: 8px;
32
+ border-radius: 50%;
33
+ background-color: #6b7280;
34
+ margin: 0 2px;
35
+ animation: bounce 1.4s infinite ease-in-out;
36
+ }
37
+ .typing-indicator span:nth-child(2) {
38
+ animation-delay: 0.2s;
39
+ }
40
+ .typing-indicator span:nth-child(3) {
41
+ animation-delay: 0.4s;
42
+ }
43
+ @keyframes bounce {
44
+ 0%, 60%, 100% { transform: translateY(0); }
45
+ 30% { transform: translateY(-5px); }
46
+ }
47
+ .feature-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 min-h-screen">
54
+ <div class="gradient-bg text-white py-6 px-4 shadow-lg">
55
+ <div class="container mx-auto flex justify-between items-center">
56
+ <div class="flex items-center space-x-3">
57
+ <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" class="h-10">
58
+ <h1 class="text-2xl font-bold">Hugging Face Assistant</h1>
59
+ </div>
60
+ <div class="flex space-x-4">
61
+ <button class="bg-white text-pink-600 px-4 py-2 rounded-full font-semibold hover:bg-gray-100 transition">
62
+ <i class="fas fa-sign-in-alt mr-2"></i>Login
63
+ </button>
64
+ <button class="border border-white px-4 py-2 rounded-full font-semibold hover:bg-white hover:text-pink-600 transition">
65
+ <i class="fas fa-user-plus mr-2"></i>Sign Up
66
+ </button>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="container mx-auto px-4 py-8">
72
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
73
+ <!-- Left sidebar with features -->
74
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6 h-fit sticky top-6">
75
+ <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
76
+ <i class="fas fa-robot mr-3 text-pink-500"></i> How Can I Help?
77
+ </h2>
78
+
79
+ <div class="space-y-4">
80
+ <div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('models')">
81
+ <h3 class="font-semibold text-gray-800 flex items-center">
82
+ <i class="fas fa-search mr-2 text-blue-500"></i> Find Models
83
+ </h3>
84
+ <p class="text-sm text-gray-600 mt-1">Discover the perfect pre-trained model for your project</p>
85
+ </div>
86
+
87
+ <div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('create')">
88
+ <h3 class="font-semibold text-gray-800 flex items-center">
89
+ <i class="fas fa-plus-circle mr-2 text-green-500"></i> Create Models
90
+ </h3>
91
+ <p class="text-sm text-gray-600 mt-1">Guide to training and sharing your own models</p>
92
+ </div>
93
+
94
+ <div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('chat')">
95
+ <h3 class="font-semibold text-gray-800 flex items-center">
96
+ <i class="fas fa-comments mr-2 text-purple-500"></i> Chat with Models
97
+ </h3>
98
+ <p class="text-sm text-gray-600 mt-1">Learn how to interact with conversational AI models</p>
99
+ </div>
100
+
101
+ <div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('ideas')">
102
+ <h3 class="font-semibold text-gray-800 flex items-center">
103
+ <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Transform Ideas
104
+ </h3>
105
+ <p class="text-sm text-gray-600 mt-1">Turn your concepts into AI applications</p>
106
+ </div>
107
+
108
+ <div class="feature-card bg-gray-50 p-4 rounded-lg transition cursor-pointer hover:bg-pink-50 border border-gray-100" onclick="showFeature('contribute')">
109
+ <h3 class="font-semibold text-gray-800 flex items-center">
110
+ <i class="fas fa-hands-helping mr-2 text-teal-500"></i> Contribute
111
+ </h3>
112
+ <p class="text-sm text-gray-600 mt-1">Make valuable contributions to the community</p>
113
+ </div>
114
+ </div>
115
+
116
+ <div class="mt-8 bg-pink-50 border border-pink-100 rounded-lg p-4">
117
+ <h3 class="font-semibold text-pink-800 flex items-center">
118
+ <i class="fas fa-bolt mr-2"></i> Quick Start
119
+ </h3>
120
+ <p class="text-sm text-pink-700 mt-2">New to Hugging Face? Try these first:</p>
121
+ <ul class="mt-2 space-y-2 text-sm">
122
+ <li class="flex items-center text-pink-600 hover:text-pink-800 cursor-pointer" onclick="quickAction('install')">
123
+ <i class="fas fa-download mr-2"></i> Install transformers
124
+ </li>
125
+ <li class="flex items-center text-pink-600 hover:text-pink-800 cursor-pointer" onclick="quickAction('demo')">
126
+ <i class="fas fa-play mr-2"></i> Try a demo
127
+ </li>
128
+ <li class="flex items-center text-pink-600 hover:text-pink-800 cursor-pointer" onclick="quickAction('tutorial')">
129
+ <i class="fas fa-graduation-cap mr-2"></i> Beginner tutorial
130
+ </li>
131
+ </ul>
132
+ </div>
133
+ </div>
134
+
135
+ <!-- Main chat area -->
136
+ <div class="lg:col-span-2">
137
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
138
+ <!-- Chat header -->
139
+ <div class="bg-gray-800 text-white px-6 py-4 flex items-center">
140
+ <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center mr-3">
141
+ <i class="fas fa-robot text-white text-xl"></i>
142
+ </div>
143
+ <div>
144
+ <h2 class="font-bold">Hugging Face Guide</h2>
145
+ <p class="text-xs text-gray-300">Online • Ready to assist</p>
146
+ </div>
147
+ <div class="ml-auto flex space-x-2">
148
+ <button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
149
+ <i class="fas fa-phone-alt text-xs"></i>
150
+ </button>
151
+ <button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
152
+ <i class="fas fa-video text-xs"></i>
153
+ </button>
154
+ <button class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600">
155
+ <i class="fas fa-ellipsis-v text-xs"></i>
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Chat messages -->
161
+ <div class="h-96 overflow-y-auto p-4 bg-gray-50" id="chat-messages">
162
+ <div class="mb-4 flex">
163
+ <div class="chat-bubble bot-bubble px-4 py-3 shadow-sm">
164
+ <p class="text-gray-800">Hello! 👋 I'm your Hugging Face assistant. How can I help you today? I can guide you through:</p>
165
+ <ul class="mt-2 ml-5 list-disc text-gray-700 text-sm">
166
+ <li>Finding and using models</li>
167
+ <li>Creating and training your own models</li>
168
+ <li>Chatting with AI models</li>
169
+ <li>Turning your ideas into AI applications</li>
170
+ <li>Contributing to the Hugging Face community</li>
171
+ </ul>
172
+ <p class="mt-2 text-gray-600 text-sm">Click on any option to the left or type your question below!</p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Chat input -->
178
+ <div class="border-t border-gray-200 p-4 bg-white">
179
+ <div class="flex items-center">
180
+ <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 mr-2">
181
+ <i class="fas fa-paperclip"></i>
182
+ </button>
183
+ <input type="text" id="user-input" placeholder="Type your message here..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
184
+ <button onclick="sendMessage()" class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center text-white hover:bg-pink-600 ml-2">
185
+ <i class="fas fa-paper-plane"></i>
186
+ </button>
187
+ </div>
188
+ <div class="mt-2 flex justify-between text-xs text-gray-500">
189
+ <div>
190
+ <span class="cursor-pointer hover:text-pink-500"><i class="fas fa-microphone mr-1"></i> Voice</span>
191
+ <span class="ml-3 cursor-pointer hover:text-pink-500"><i class="fas fa-keyboard mr-1"></i> Keyboard</span>
192
+ </div>
193
+ <div>
194
+ <span class="cursor-pointer hover:text-pink-500">Press Enter to send</span>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Current feature display -->
201
+ <div class="mt-8 bg-white rounded-xl shadow-md p-6" id="feature-display">
202
+ <div class="text-center py-10">
203
+ <i class="fas fa-comment-dots text-4xl text-gray-300 mb-4"></i>
204
+ <h3 class="text-xl font-semibold text-gray-500">Select a feature from the sidebar</h3>
205
+ <p class="text-gray-400 mt-2">Or ask me anything about Hugging Face in the chat!</p>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <script>
213
+ // Feature content templates
214
+ const featureContents = {
215
+ models: `
216
+ <div class="space-y-6">
217
+ <div class="flex items-start">
218
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
219
+ <i class="fas fa-search text-blue-600 text-xl"></i>
220
+ </div>
221
+ <div>
222
+ <h3 class="font-bold text-lg text-gray-800">Finding Models</h3>
223
+ <p class="text-gray-600 mt-1">Discover the perfect pre-trained model for your needs from thousands available on Hugging Face.</p>
224
+
225
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
226
+ <div class="border border-gray-200 rounded-lg p-3 hover:border-blue-300 transition">
227
+ <h4 class="font-semibold text-blue-600 flex items-center">
228
+ <i class="fas fa-filter mr-2"></i> Filter Models
229
+ </h4>
230
+ <p class="text-sm text-gray-600 mt-1">Use tags to filter by task (text classification, question answering, etc.), framework, and dataset.</p>
231
+ </div>
232
+ <div class="border border-gray-200 rounded-lg p-3 hover:border-blue-300 transition">
233
+ <h4 class="font-semibold text-blue-600 flex items-center">
234
+ <i class="fas fa-star mr-2"></i> Popular Models
235
+ </h4>
236
+ <p class="text-sm text-gray-600 mt-1">Start with well-known models like BERT, GPT-2, or DistilBERT that have extensive documentation.</p>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="mt-4 bg-blue-50 border border-blue-100 rounded-lg p-4">
241
+ <h4 class="font-semibold text-blue-700 flex items-center">
242
+ <i class="fas fa-terminal mr-2"></i> Quick Code Example
243
+ </h4>
244
+ <div class="mt-2 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto">
245
+ <span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> pipeline<br>
246
+ classifier = pipeline(<span class="text-yellow-300">"sentiment-analysis"</span>)<br>
247
+ classifier(<span class="text-yellow-300">"I love using Hugging Face!"</span>)
248
+ </div>
249
+ <button class="mt-3 bg-blue-600 text-white px-3 py-1 rounded text-sm hover:bg-blue-700 transition">
250
+ <i class="fas fa-copy mr-1"></i> Copy Code
251
+ </button>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="mt-6 border-t border-gray-200 pt-6">
257
+ <h3 class="font-bold text-lg text-gray-800 flex items-center">
258
+ <i class="fas fa-question-circle text-purple-500 mr-2"></i> Need Help Choosing?
259
+ </h3>
260
+ <p class="text-gray-600 mt-2">Tell me about your project and I'll recommend suitable models:</p>
261
+
262
+ <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
263
+ <button onclick="suggestModel('nlp')" class="bg-white border border-gray-200 rounded-lg p-3 hover:border-purple-300 hover:bg-purple-50 transition text-left">
264
+ <h4 class="font-semibold text-purple-600">NLP Tasks</h4>
265
+ <p class="text-sm text-gray-600 mt-1">Text classification, generation, translation, etc.</p>
266
+ </button>
267
+ <button onclick="suggestModel('vision')" class="bg-white border border-gray-200 rounded-lg p-3 hover:border-purple-300 hover:bg-purple-50 transition text-left">
268
+ <h4 class="font-semibold text-purple-600">Computer Vision</h4>
269
+ <p class="text-sm text-gray-600 mt-1">Image classification, object detection, etc.</p>
270
+ </button>
271
+ <button onclick="suggestModel('audio')" class="bg-white border border-gray-200 rounded-lg p-3 hover:border-purple-300 hover:bg-purple-50 transition text-left">
272
+ <h4 class="font-semibold text-purple-600">Audio Processing</h4>
273
+ <p class="text-sm text-gray-600 mt-1">Speech recognition, audio classification, etc.</p>
274
+ </button>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ `,
279
+ create: `
280
+ <div class="space-y-6">
281
+ <div class="flex items-start">
282
+ <div class="bg-green-100 p-3 rounded-full mr-4">
283
+ <i class="fas fa-plus-circle text-green-600 text-xl"></i>
284
+ </div>
285
+ <div>
286
+ <h3 class="font-bold text-lg text-gray-800">Creating Models</h3>
287
+ <p class="text-gray-600 mt-1">Learn how to train and share your own models on Hugging Face.</p>
288
+
289
+ <div class="mt-4 space-y-4">
290
+ <div class="flex items-start">
291
+ <div class="bg-gray-100 p-2 rounded-full mr-3 mt-1">
292
+ <span class="text-gray-600 font-bold text-sm">1</span>
293
+ </div>
294
+ <div>
295
+ <h4 class="font-semibold text-gray-700">Prepare Your Dataset</h4>
296
+ <p class="text-sm text-gray-600 mt-1">Gather and preprocess your training data. Hugging Face supports many common formats.</p>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="flex items-start">
301
+ <div class="bg-gray-100 p-2 rounded-full mr-3 mt-1">
302
+ <span class="text-gray-600 font-bold text-sm">2</span>
303
+ </div>
304
+ <div>
305
+ <h4 class="font-semibold text-gray-700">Choose a Base Model</h4>
306
+ <p class="text-sm text-gray-600 mt-1">Start with a pre-trained model that matches your task (e.g., BERT for text).</p>
307
+ </div>
308
+ </div>
309
+
310
+ <div class="flex items-start">
311
+ <div class="bg-gray-100 p-2 rounded-full mr-3 mt-1">
312
+ <span class="text-gray-600 font-bold text-sm">3</span>
313
+ </div>
314
+ <div>
315
+ <h4 class="font-semibold text-gray-700">Fine-tune the Model</h4>
316
+ <p class="text-sm text-gray-600 mt-1">Train on your specific dataset using the Transformers library.</p>
317
+ </div>
318
+ </div>
319
+
320
+ <div class="flex items-start">
321
+ <div class="bg-gray-100 p-2 rounded-full mr-3 mt-1">
322
+ <span class="text-gray-600 font-bold text-sm">4</span>
323
+ </div>
324
+ <div>
325
+ <h4 class="font-semibold text-gray-700">Upload to Hub</h4>
326
+ <p class="text-sm text-gray-600 mt-1">Share your model with the community through the Model Hub.</p>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="mt-6 bg-green-50 border border-green-100 rounded-lg p-4">
332
+ <h4 class="font-semibold text-green-700 flex items-center">
333
+ <i class="fas fa-lightbulb mr-2"></i> Pro Tip
334
+ </h4>
335
+ <p class="text-sm text-green-700 mt-2">Start with a smaller model like DistilBERT for faster iteration. You can always scale up later!</p>
336
+
337
+ <div class="mt-4 bg-white rounded-lg p-3 border border-green-200">
338
+ <h5 class="font-medium text-gray-700 flex items-center">
339
+ <i class="fas fa-code mr-2 text-sm"></i> Training Snippet
340
+ </h5>
341
+ <div class="mt-2 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto">
342
+ <span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> Trainer, TrainingArguments<br><br>
343
+ training_args = TrainingArguments(<br>
344
+ &nbsp;&nbsp;output_dir=<span class="text-yellow-300">"./results"</span>,<br>
345
+ &nbsp;&nbsp;per_device_train_batch_size=<span class="text-blue-400">8</span>,<br>
346
+ &nbsp;&nbsp;num_train_epochs=<span class="text-blue-400">3</span><br>
347
+ )<br><br>
348
+ trainer = Trainer(<br>
349
+ &nbsp;&nbsp;model=model,<br>
350
+ &nbsp;&nbsp;args=training_args,<br>
351
+ &nbsp;&nbsp;train_dataset=train_dataset<br>
352
+ )<br><br>
353
+ trainer.train()
354
+ </div>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="mt-6 border-t border-gray-200 pt-6">
361
+ <h3 class="font-bold text-lg text-gray-800">Ready to Create?</h3>
362
+ <p class="text-gray-600 mt-2">Choose your path:</p>
363
+
364
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
365
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-green-300 hover:bg-green-50 transition cursor-pointer">
366
+ <h4 class="font-semibold text-green-600 flex items-center">
367
+ <i class="fas fa-book mr-2"></i> Tutorial
368
+ </h4>
369
+ <p class="text-sm text-gray-600 mt-2">Follow our step-by-step guide to create your first model.</p>
370
+ <button class="mt-3 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700 transition">
371
+ Start Learning
372
+ </button>
373
+ </div>
374
+
375
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-green-300 hover:bg-green-50 transition cursor-pointer">
376
+ <h4 class="font-semibold text-green-600 flex items-center">
377
+ <i class="fas fa-rocket mr-2"></i> Quick Start
378
+ </h4>
379
+ <p class="text-sm text-gray-600 mt-2">Use our template to jump right into model creation.</p>
380
+ <button class="mt-3 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700 transition">
381
+ Launch Template
382
+ </button>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ `,
388
+ chat: `
389
+ <div class="space-y-6">
390
+ <div class="flex items-start">
391
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
392
+ <i class="fas fa-comments text-purple-600 text-xl"></i>
393
+ </div>
394
+ <div>
395
+ <h3 class="font-bold text-lg text-gray-800">Chat with AI Models</h3>
396
+ <p class="text-gray-600 mt-1">Learn how to interact with conversational AI models on Hugging Face.</p>
397
+
398
+ <div class="mt-4 space-y-4">
399
+ <div class="bg-purple-50 border border-purple-100 rounded-lg p-4">
400
+ <h4 class="font-semibold text-purple-700 flex items-center">
401
+ <i class="fas fa-robot mr-2"></i> Using Chat Models
402
+ </h4>
403
+ <p class="text-sm text-purple-700 mt-2">Many models support conversational interfaces. Try these popular options:</p>
404
+
405
+ <div class="mt-3 grid grid-cols-1 sm:grid-cols-3 gap-3">
406
+ <div class="bg-white rounded-lg p-3 border border-purple-200">
407
+ <h5 class="font-medium text-gray-700">BlenderBot</h5>
408
+ <p class="text-xs text-gray-600 mt-1">Facebook's conversational agent</p>
409
+ <button class="mt-2 text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition">
410
+ Try Demo
411
+ </button>
412
+ </div>
413
+ <div class="bg-white rounded-lg p-3 border border-purple-200">
414
+ <h5 class="font-medium text-gray-700">GPT-2</h5>
415
+ <p class="text-xs text-gray-600 mt-1">Text generation model</p>
416
+ <button class="mt-2 text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition">
417
+ Try Demo
418
+ </button>
419
+ </div>
420
+ <div class="bg-white rounded-lg p-3 border border-purple-200">
421
+ <h5 class="font-medium text-gray-700">DialoGPT</h5>
422
+ <p class="text-xs text-gray-600 mt-1">Microsoft's dialogue model</p>
423
+ <button class="mt-2 text-xs bg-purple-600 text-white px-2 py-1 rounded hover:bg-purple-700 transition">
424
+ Try Demo
425
+ </button>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
431
+ <h4 class="font-semibold text-gray-700 flex items-center">
432
+ <i class="fas fa-code mr-2"></i> Code Implementation
433
+ </h4>
434
+ <p class="text-sm text-gray-600 mt-2">Here's how to set up a simple chat interface:</p>
435
+
436
+ <div class="mt-3 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto">
437
+ <span class="text-green-400">from</span> transformers <span class="text-green-400">import</span> pipeline<br><br>
438
+ <span class="text-gray-500"># Load a conversational model</span><br>
439
+ chatbot = pipeline(<span class="text-yellow-300">"conversational"</span>, model=<span class="text-yellow-300">"facebook/blenderbot-400M-distill"</span>)<br><br>
440
+ <span class="text-gray-500"># Start a conversation</span><br>
441
+ conversation = chatbot(<span class="text-yellow-300">"Hi there! How are you?"</span>)<br>
442
+ <span class="text-green-400">print</span>(conversation)
443
+ </div>
444
+
445
+ <div class="mt-3 flex space-x-3">
446
+ <button class="bg-purple-600 text-white px-3 py-1 rounded text-sm hover:bg-purple-700 transition flex items-center">
447
+ <i class="fas fa-copy mr-1"></i> Copy Code
448
+ </button>
449
+ <button class="bg-gray-200 text-gray-700 px-3 py-1 rounded text-sm hover:bg-gray-300 transition flex items-center">
450
+ <i class="fas fa-play mr-1"></i> Run in Colab
451
+ </button>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <div class="mt-6 border-t border-gray-200 pt-6">
459
+ <h3 class="font-bold text-lg text-gray-800">Advanced Chat Features</h3>
460
+
461
+ <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
462
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-purple-300 hover:bg-purple-50 transition cursor-pointer">
463
+ <h4 class="font-semibold text-purple-600 flex items-center">
464
+ <i class="fas fa-cog mr-2"></i> Customize Responses
465
+ </h4>
466
+ <p class="text-sm text-gray-600 mt-2">Learn how to fine-tune models for your specific tone and style.</p>
467
+ <button class="mt-3 text-purple-600 border border-purple-300 bg-white px-3 py-1 rounded text-sm hover:bg-purple-100 transition">
468
+ Learn More
469
+ </button>
470
+ </div>
471
+
472
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-purple-300 hover:bg-purple-50 transition cursor-pointer">
473
+ <h4 class="font-semibold text-purple-600 flex items-center">
474
+ <i class="fas fa-shield-alt mr-2"></i> Safety & Moderation
475
+ </h4>
476
+ <p class="text-sm text-gray-600 mt-2">Implement filters and controls for safer conversations.</p>
477
+ <button class="mt-3 text-purple-600 border border-purple-300 bg-white px-3 py-1 rounded text-sm hover:bg-purple-100 transition">
478
+ Learn More
479
+ </button>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ `,
485
+ ideas: `
486
+ <div class="space-y-6">
487
+ <div class="flex items-start">
488
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
489
+ <i class="fas fa-lightbulb text-yellow-600 text-xl"></i>
490
+ </div>
491
+ <div>
492
+ <h3 class="font-bold text-lg text-gray-800">Transform Ideas into AI Tools</h3>
493
+ <p class="text-gray-600 mt-1">Turn your concepts into real Hugging Face applications with these steps:</p>
494
+
495
+ <div class="mt-6 space-y-6">
496
+ <div class="flex items-start">
497
+ <div class="bg-gray-100 p-2 rounded-full mr-4 mt-1">
498
+ <i class="fas fa-pen text-gray-600"></i>
499
+ </div>
500
+ <div>
501
+ <h4 class="font-semibold text-gray-700">1. Define Your Idea</h4>
502
+ <p class="text-sm text-gray-600 mt-1">Clearly outline what problem your AI tool will solve. Be specific about inputs, outputs, and use cases.</p>
503
+ <div class="mt-3 bg-white border border-gray-200 rounded-lg p-3">
504
+ <h5 class="font-medium text-sm text-gray-700">Example Idea:</h5>
505
+ <p class="text-sm text-gray-600 mt-1 italic">"An AI that analyzes customer support emails and automatically categorizes them by urgency and topic."</p>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <div class="flex items-start">
511
+ <div class="bg-gray-100 p-2 rounded-full mr-4 mt-1">
512
+ <i class="fas fa-search text-gray-600"></i>
513
+ </div>
514
+ <div>
515
+ <h4 class="font-semibold text-gray-700">2. Research Existing Models</h4>
516
+ <p class="text-sm text-gray-600 mt-1">Check if there are existing models that can serve as a foundation for your idea.</p>
517
+ <button class="mt-3 bg-yellow-600 text-white px-3 py-1 rounded text-sm hover:bg-yellow-700 transition flex items-center">
518
+ <i class="fas fa-search mr-1"></i> Search Models
519
+ </button>
520
+ </div>
521
+ </div>
522
+
523
+ <div class="flex items-start">
524
+ <div class="bg-gray-100 p-2 rounded-full mr-4 mt-1">
525
+ <i class="fas fa-code text-gray-600"></i>
526
+ </div>
527
+ <div>
528
+ <h4 class="font-semibold text-gray-700">3. Build a Prototype</h4>
529
+ <p class="text-sm text-gray-600 mt-1">Use the Transformers library to create a working version of your idea.</p>
530
+ <div class="mt-3 bg-gray-800 rounded p-3 text-white text-sm font-mono overflow-x-auto">
531
+ <span class="text-green-400"># Example: Text classification prototype</span><br>
532
+ classifier = pipeline(<span class="text-yellow-300">"text-classification"</span>, <br>
533
+ &nbsp;&nbsp;&nbsp;&nbsp;model=<span class="text-yellow-300">"distilbert-base-uncased"</span>, <br>
534
+ &nbsp;&nbsp;&nbsp;&nbsp;tokenizer=<span class="text-yellow-300">"distilbert-base-uncased"</span>)<br><br>
535
+ <span class="text-green-400"># Test with sample input</span><br>
536
+ result = classifier(<span class="text-yellow-300">"Your sample text here"</span>)
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <div class="flex items-start">
542
+ <div class="bg-gray-100 p-2 rounded-full mr-4 mt-1">
543
+ <i class="fas fa-share-alt text-gray-600"></i>
544
+ </div>
545
+ <div>
546
+ <h4 class="font-semibold text-gray-700">4. Share Your Application</h4>
547
+ <p class="text-sm text-gray-600 mt-1">Deploy your model as a Space or share it with the community.</p>
548
+ <div class="mt-3 grid grid-cols-2 gap-3">
549
+ <button class="bg-yellow-600 text-white px-3 py-2 rounded text-sm hover:bg-yellow-700 transition flex items-center justify-center">
550
+ <i class="fas fa-rocket mr-1"></i> Deploy Space
551
+ </button>
552
+ <button class="bg-gray-200 text-gray-700 px-3 py-2 rounded text-sm hover:bg-gray-300 transition flex items-center justify-center">
553
+ <i class="fas fa-users mr-1"></i> Share Model
554
+ </button>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+ </div>
561
+
562
+ <div class="mt-6 border-t border-gray-200 pt-6">
563
+ <h3 class="font-bold text-lg text-gray-800">Need Inspiration?</h3>
564
+ <p class="text-gray-600 mt-2">Browse successful Hugging Face applications:</p>
565
+
566
+ <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
567
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 hover:bg-yellow-50 transition cursor-pointer">
568
+ <h4 class="font-semibold text-yellow-600">Sentiment Analyzer</h4>
569
+ <p class="text-xs text-gray-600 mt-1">Analyze text for positive/negative sentiment</p>
570
+ <div class="mt-2 flex justify-between items-center">
571
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">NLP</span>
572
+ <button class="text-xs bg-yellow-600 text-white px-2 py-1 rounded hover:bg-yellow-700 transition">
573
+ View Demo
574
+ </button>
575
+ </div>
576
+ </div>
577
+
578
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 hover:bg-yellow-50 transition cursor-pointer">
579
+ <h4 class="font-semibold text-yellow-600">FAQ Bot</h4>
580
+ <p class="text-xs text-gray-600 mt-1">Answer common questions automatically</p>
581
+ <div class="mt-2 flex justify-between items-center">
582
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">Chat</span>
583
+ <button class="text-xs bg-yellow-600 text-white px-2 py-1 rounded hover:bg-yellow-700 transition">
584
+ View Demo
585
+ </button>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="border border-gray-200 rounded-lg p-4 hover:border-yellow-300 hover:bg-yellow-50 transition cursor-pointer">
590
+ <h4 class="font-semibold text-yellow-600">Document Summarizer</h4>
591
+ <p class="text-xs text-gray-600 mt-1">Generate concise summaries of long texts</p>
592
+ <div class="mt-2 flex justify-between items-center">
593
+ <span class="text-xs bg-gray-100 px-2 py-1 rounded">NLP</span>
594
+ <button class="text-xs bg-yellow-600 text-white px-2 py-1 rounded hover:bg-yellow-700 transition">
595
+ View Demo
596
+ </button>
597
+ </div>
598
+ </div>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ `,
603
+ contribute: `
604
+ <div class="space-y-6">
605
+ <div class="flex items-start">
606
+ <div class="bg-teal-100 p-3 rounded-full mr-4">
607
+ <i class="fas fa-hands-helping text-teal-600 text-xl"></i>
608
+ </div>
609
+ <div>
610
+ <h3 class="font-bold text-lg text-gray-800">Make Valuable Contributions</h3>
611
+ <p class="text-gray-600 mt-1">The Hugging Face community thrives on contributions from people like you. Here's how you can help:</p>
612
+
613
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
614
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition">
615
+ <div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
616
+ <i class="fas fa-code text-teal-600 text-xl"></i>
617
+ </div>
618
+ <h4 class="font-semibold text-gray-800">Improve Models</h4>
619
+ <p class="text-sm text-gray-600 mt-2">Fine-tune existing models on new datasets or optimize their performance.</p>
620
+ <button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition">
621
+ Contribute Code
622
+ </button>
623
+ </div>
624
+
625
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition">
626
+ <div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
627
+ <i class="fas fa-book text-teal-600 text-xl"></i>
628
+ </div>
629
+ <h4 class="font-semibold text-gray-800">Enhance Documentation</h4>
630
+ <p class="text-sm text-gray-600 mt-2">Help improve tutorials, model cards, and API documentation.</p>
631
+ <button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition">
632
+ Improve Docs
633
+ </button>
634
+ </div>
635
+
636
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition">
637
+ <div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
638
+ <i class="fas fa-database text-teal-600 text-xl"></i>
639
+ </div>
640
+ <h4 class="font-semibold text-gray-800">Share Datasets</h4>
641
+ <p class="text-sm text-gray-600 mt-2">Upload and share datasets to help others train better models.</p>
642
+ <button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition">
643
+ Upload Dataset
644
+ </button>
645
+ </div>
646
+
647
+ <div class="border border-gray-200 rounded-lg p-5 hover:border-teal-300 hover:bg-teal-50 transition">
648
+ <div class="bg-teal-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
649
+ <i class="fas fa-comments text-teal-600 text-xl"></i>
650
+ </div>
651
+ <h4 class="font-semibold text-gray-800">Community Support</h4>
652
+ <p class="text-sm text-gray-600 mt-2">Answer questions on forums and help others solve problems.</p>
653
+ <button class="mt-4 bg-teal-600 text-white px-3 py-1 rounded text-sm hover:bg-teal-700 transition">
654
+ Join Discussions
655
+ </button>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="mt-8 bg-teal-50 border border-teal-100 rounded-lg p-5">
660
+ <h4 class="font-semibold text-teal-800 flex items-center">
661
+ <i class="fas fa-star mr-2"></i> Getting Started as a Contributor
662
+ </h4>
663
+ <ol class="mt-3 space-y-3 list-decimal list-inside text-sm text-gray-700">
664
+ <li>Create a Hugging Face account if you haven't already</li>
665
+ <li>Explore the <span class="font-semibold text-teal-700">Contributing Guidelines</span> in the documentation</li>
666
+ <li>Start with small issues labeled <span class="bg-teal-100 text-teal-800 px-2 py-0.5 rounded">good first issue</span></li>
667
+ <li>Join the community discussions on the Hugging Face forum</li>
668
+ <li>Consider attending or hosting community events</li>
669
+ </ol>
670
+
671
+ <div class="mt-4 flex space-x-3">
672
+ <button class="bg-teal-600 text-white px-4 py-2 rounded text-sm hover:bg-teal-700 transition flex items-center">
673
+ <i class="fas fa-book-open mr-2"></i> Contribution Guide
674
+ </button>
675
+ <button class="bg-white text-teal-600 border border-teal-300 px-4 py-2 rounded text-sm hover:bg-teal-50 transition flex items-center">
676
+ <i class="fas fa-users mr-2"></i> Join Community
677
+ </button>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ `
684
+ };
685
+
686
+ // Sample responses for chat
687
+ const sampleResponses = {
688
+ greeting: "Hello! I'm your Hugging Face assistant. How can I help you today?",
689
+ models: "To find models, you can search the Hugging Face Model Hub using filters for tasks, frameworks, and datasets. Would you like me to suggest some models based on your needs?",
690
+ create: "Creating models involves preparing your dataset, choosing a base model, fine-tuning it, and uploading to the Hub. I can guide you through each step!",
691
+ chat: "You can chat with many conversational models on Hugging Face. Popular options include BlenderBot, GPT-2, and DialoGPT. Would you like to try a demo?",
692
+ ideas: "To turn your ideas into AI tools, start by clearly defining your concept, then research existing models that could help. I can help you brainstorm and find technical solutions!",
693
+ contribute: "The Hugging Face community welcomes contributions! You can improve models, enhance documentation, share datasets, or help others in the forums. Where would you like to contribute?",
694
+ install: "To install the transformers library, run: <code class='bg-gray-100 px-2 py-1 rounded'>pip install transformers</code>",
695
+ demo: "You can try many model demos directly on Hugging Face. Here are some popular ones: <a href='#' class='text-blue-500 hover:underline'>BlenderBot</a>, <a href='#' class='text-blue-500 hover:underline'>GPT-2</a>, <a href='#' class='text-blue-500 hover:underline'>Stable Diffusion</a>",
696
+ tutorial: "The Hugging Face course is a great starting point: <a href='#' class='text-blue-500 hover:underline'>Hugging Face Course</a>. Would you like recommendations based on your skill level?",
697
+ nlp: "For NLP tasks, consider these models: <br>- Text Classification: <strong>distilbert-base-uncased</strong><br>- Question Answering: <strong>bert-large-uncased-whole-word-masking-finetuned-squad</strong><br>- Text Generation: <strong>gpt2</strong>",
698
+ vision: "For computer vision: <br>- Image Classification: <strong>google/vit-base-patch16-224</strong><br>- Object Detection: <strong>facebook/detr-resnet-50</strong>",
699
+ audio: "For audio processing: <br>- Speech Recognition: <strong>facebook/wav2vec2-base-960h</strong><br>- Audio Classification: <strong>superb/hubert-base-superb-ks</strong>"
700
+ };
701
+
702
+ // Show feature content
703
+ function showFeature(feature) {
704
+ document.getElementById('feature-display').innerHTML = featureContents[feature];
705
+
706
+ // Add a chat message about the feature
707
+ addBotMessage(sampleResponses[feature]);
708
+ }
709
+
710
+ // Quick actions
711
+ function quickAction(action) {
712
+ addBotMessage(sampleResponses[action]);
713
+ }
714
+
715
+ // Suggest models
716
+ function suggestModel(type) {
717
+ addBotMessage(sampleResponses[type]);
718
+ }
719
+
720
+ // Chat functions
721
+ function addMessage(sender, message) {
722
+ const chatMessages = document.getElementById('chat-messages');
723
+ const messageDiv = document.createElement('div');
724
+ messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
725
+
726
+ const bubble = document.createElement('div');
727
+ bubble.className = `chat-bubble px-4 py-3 shadow-sm ${sender === 'user' ? 'user-bubble' : 'bot-bubble'}`;
728
+
729
+ bubble.innerHTML = message;
730
+ messageDiv.appendChild(bubble);
731
+ chatMessages.appendChild(messageDiv);
732
+
733
+ // Scroll to bottom
734
+ chatMessages.scrollTop = chatMessages.scrollHeight;
735
+ }
736
+
737
+ function addBotMessage(message) {
738
+ // Show typing indicator
739
+ const chatMessages = document.getElementById('chat-messages');
740
+ const typingDiv = document.createElement('div');
741
+ typingDiv.className = 'mb-4 flex justify-start';
742
+
743
+ const typingBubble = document.createElement('div');
744
+ typingBubble.className = 'chat-bubble bot-bubble px-4 py-3 shadow-sm';
745
+ typingBubble.innerHTML = '<div class="typing-indicator"><span></span><span></span><span></span></div>';
746
+
747
+ typingDiv.appendChild(typingBubble);
748
+ chatMessages.appendChild(typingDiv);
749
+ chatMessages.scrollTop = chatMessages.scrollHeight;
750
+
751
+ // After a delay, replace with actual message
752
+ setTimeout(() => {
753
+ chatMessages.removeChild(typingDiv);
754
+ addMessage('bot', message);
755
+ }, 1000 + Math.random() * 1000);
756
+ }
757
+
758
+ function sendMessage() {
759
+ const userInput = document.getElementById('user-input');
760
+ const message = userInput.value.trim();
761
+
762
+ if (message) {
763
+ addMessage('user', message);
764
+ userInput.value = '';
765
+
766
+ // Simple response logic
767
+ const lowerMsg = message.toLowerCase();
768
+ let response = "I'm not sure I understand. Could you rephrase that?";
769
+
770
+ if (lowerMsg.includes('hello') || lowerMsg.includes('hi')) {
771
+ response = sampleResponses.greeting;
772
+ } else if (lowerMsg.includes('model') || lowerMsg.includes('find')) {
773
+ response = sampleResponses.models;
774
+ } else if (lowerMsg.includes('create') || lowerMsg.includes('train')) {
775
+ response = sampleResponses.create;
776
+ } else if (lowerMsg.includes('chat') || lowerMsg.includes('talk')) {
777
+ response = sampleResponses.chat;
778
+ } else if (lowerMsg.includes('idea') || lowerMsg.includes('project')) {
779
+ response = sampleResponses.ideas;
780
+ } else if (lowerMsg.includes('help') || lowerMsg.includes('contribute')) {
781
+ response = sampleResponses.contribute;
782
+ } else if (lowerMsg.includes('install')) {
783
+ response = sampleResponses.install;
784
+ } else if (lowerMsg.includes('demo')) {
785
+ response = sampleResponses.demo;
786
+ } else if (lowerMsg.includes('tutorial') || lowerMsg.includes('learn')) {
787
+ response = sampleResponses.tutorial;
788
+ }
789
+
790
+ setTimeout(() => {
791
+ addBotMessage(response);
792
+ }, 500);
793
+ }
794
+ }
795
+
796
+ // Allow sending message with Enter key
797
+ document.getElementById('user-input').addEventListener('keypress', function(e) {
798
+ if (e.key === 'Enter') {
799
+ sendMessage();
800
+ }
801
+ });
802
+
803
+ // Initial welcome message
804
+ setTimeout(() => {
805
+ addBotMessage("Welcome to your personalized Hugging Face assistant! I can help you navigate the platform, find models, create AI applications, and contribute to the community. What would you like to explore first?");
806
+ }, 1000);
807
+ </script>
808
+ <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=XXXMARK/kotahi" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
809
+ </html>