Hugging Face's logo

Spaces:
librarian-bots
/
huggingface-semantic-search
Running

App Files Community
2
davanstrien HF Staff commited on
Commit
9bbc59c
·
1 Parent(s): 59846b5

mobile friendly

Browse files
Files changed (1) hide show
  1. index.html +91 -94
index.html CHANGED
@@ -13,20 +13,22 @@
13
  <h1 class="text-3xl font-bold text-gray-800">Hub Semantic Search</h1>
14
 
15
  <div
16
- class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-xl shadow-sm border border-blue-100 mb-8"
17
  >
18
  <h2
19
- class="text-xl font-semibold mb-4 text-gray-800 flex items-center gap-2"
20
  >
21
  <i data-lucide="search" class="text-blue-500"></i>
22
  Welcome to Hub Semantic Search
23
  </h2>
24
- <p class="text-gray-700 mb-4">
25
  Find and explore the 🤗 Hub using via semantic search on LLM generated
26
  summaries!
27
  </p>
28
 
29
- <div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-md mb-4">
 
 
30
  <p class="flex items-center gap-2">
31
  <i data-lucide="info"></i> Currently supporting dataset search only.
32
  Model search coming soon!
@@ -36,7 +38,7 @@
36
  <button
37
  onclick="toggleAccordion()"
38
  id="accordionButton"
39
- class="text-blue-500 hover:text-blue-700 flex items-center gap-2 mb-4"
40
  >
41
  <i
42
  data-lucide="chevron-right"
@@ -47,21 +49,20 @@
47
  </button>
48
 
49
  <div id="accordionContent" class="hidden">
50
- <ul class="list-disc list-inside space-y-2 text-gray-600 ml-4">
 
 
51
  <li>
52
  <strong>AI-Generated Summaries:</strong> Each dataset is indexed
53
- using a concise, one-sentence summary generated by a large
54
- language model trained on thousands of Hugging Face dataset cards
55
  </li>
56
  <li>
57
- <strong>Semantic Search:</strong> Enter keywords or descriptions
58
- to find semantically similar resources based on these AI-generated
59
- summaries
60
  </li>
61
  <li>
62
- <strong>Find Similar:</strong> Enter a dataset ID (e.g.,
63
- "airtrain-ai/fineweb-edu-fortified") to discover related resources
64
- using semantic matching
65
  </li>
66
  </ul>
67
  </div>
@@ -72,14 +73,14 @@
72
  <button
73
  onclick="switchTab('search')"
74
  id="searchTab"
75
- class="tab-trigger active px-6 py-3 flex items-center gap-2 border-b-2 border-transparent hover:bg-gray-50 transition-colors"
76
  >
77
  <i data-lucide="search"></i> Search
78
  </button>
79
  <button
80
  onclick="switchTab('similar')"
81
  id="similarTab"
82
- class="tab-trigger px-6 py-3 flex items-center gap-2 border-b-2 border-transparent hover:bg-gray-50 transition-colors"
83
  >
84
  <i data-lucide="arrow-right"></i> Find Similar
85
  </button>
@@ -181,83 +182,79 @@
181
  // Create result card
182
  function createResultCard(result) {
183
  const cardHtml = `
184
- <div class="card bg-white p-6 rounded-lg shadow hover:shadow-md transition-shadow">
185
- <div class="flex items-start justify-between">
186
- <div class="space-y-2 w-full">
187
- <div class="flex items-center justify-between">
188
- <div class="flex items-center gap-2">
189
- <i data-lucide="database" class="text-blue-500"></i>
190
- <h3 class="text-lg font-semibold">${
191
- result.dataset_id
192
- }</h3>
193
- </div>
194
- <div class="flex items-center gap-2">
195
- <div class="flex items-center gap-4 text-sm text-gray-500 mr-4">
196
- <span class="flex items-center gap-1">
197
- <i data-lucide="heart" class="w-4 h-4"></i>
198
- ${result.likes}
199
- </span>
200
- <span class="flex items-center gap-1">
201
- <i data-lucide="download" class="w-4 h-4"></i>
202
- ${result.downloads}
203
- </span>
204
- </div>
205
- <span class="bg-blue-50 px-2 py-1 rounded text-sm">
206
- ${(result.similarity * 100).toFixed(
207
- 1
208
- )}% match
209
- </span>
210
- <button
211
- onclick="findSimilarFromResult('${
212
- result.dataset_id
213
- }')"
214
- class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
215
- >
216
- <i data-lucide="arrow-right"></i>
217
- Find Similar
218
- </button>
219
- </div>
220
- </div>
221
- <p class="text-sm text-gray-600">${result.summary}</p>
222
-
223
- <!-- Add preview section that starts hidden -->
224
- <div id="preview-section-${
225
- result.dataset_id
226
- }" class="mt-4 border-t pt-4 hidden">
227
- <button
228
- onclick="togglePreview('${result.dataset_id}')"
229
- class="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800"
230
- >
231
- <i data-lucide="chevron-right" id="preview-icon-${
232
- result.dataset_id
233
- }" class="transition-transform"></i>
234
- Preview Dataset
235
- </button>
236
- <div id="preview-content-${
237
- result.dataset_id
238
- }" class="hidden mt-4">
239
- <iframe
240
- src="https://huggingface.co/datasets/${
241
- result.dataset_id
242
- }/embed/viewer/default/train"
243
- frameborder="0"
244
- width="100%"
245
- height="560px"
246
- ></iframe>
247
- </div>
248
- </div>
249
-
250
- <a href="https://huggingface.co/datasets/${
251
- result.dataset_id
252
- }"
253
- target="_blank"
254
- class="inline-flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700 mt-2">
255
- <i data-lucide="external-link" class="w-4 h-4"></i>
256
- View on Hugging Face Hub
257
- </a>
258
- </div>
259
- </div>
260
- </div>
261
  `;
262
 
263
  // After rendering the card, check if preview is available
@@ -440,7 +437,7 @@
440
  </button>`
441
  : results.length >= MAX_RESULTS
442
  ? `<div class="text-center mt-4 p-6 bg-blue-50 rounded-lg">
443
- <p class="text-gray-700 mb-3">�� You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
444
  <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
445
  <a href="https://huggingface.co/docs/datasets/upload_dataset"
446
  target="_blank"
 
13
  <h1 class="text-3xl font-bold text-gray-800">Hub Semantic Search</h1>
14
 
15
  <div
16
+ class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl shadow-sm border border-blue-100 mb-6"
17
  >
18
  <h2
19
+ class="text-lg font-semibold mb-2 text-gray-800 flex items-center gap-2"
20
  >
21
  <i data-lucide="search" class="text-blue-500"></i>
22
  Welcome to Hub Semantic Search
23
  </h2>
24
+ <p class="text-gray-700 mb-2 text-sm">
25
  Find and explore the 🤗 Hub using via semantic search on LLM generated
26
  summaries!
27
  </p>
28
 
29
+ <div
30
+ class="bg-blue-100 text-blue-800 px-3 py-1.5 rounded-md mb-2 text-sm"
31
+ >
32
  <p class="flex items-center gap-2">
33
  <i data-lucide="info"></i> Currently supporting dataset search only.
34
  Model search coming soon!
 
38
  <button
39
  onclick="toggleAccordion()"
40
  id="accordionButton"
41
+ class="text-blue-500 hover:text-blue-700 flex items-center gap-2 text-sm"
42
  >
43
  <i
44
  data-lucide="chevron-right"
 
49
  </button>
50
 
51
  <div id="accordionContent" class="hidden">
52
+ <ul
53
+ class="list-disc list-inside space-y-1 text-gray-600 ml-4 mt-2 text-sm"
54
+ >
55
  <li>
56
  <strong>AI-Generated Summaries:</strong> Each dataset is indexed
57
+ using a concise summary generated by an LLM
 
58
  </li>
59
  <li>
60
+ <strong>Semantic Search:</strong> Find semantically similar
61
+ resources based on these summaries
 
62
  </li>
63
  <li>
64
+ <strong>Find Similar:</strong> Discover related resources using
65
+ semantic matching
 
66
  </li>
67
  </ul>
68
  </div>
 
73
  <button
74
  onclick="switchTab('search')"
75
  id="searchTab"
76
+ class="tab-trigger active px-4 sm:px-6 py-3 flex items-center gap-2 border-b-2 border-transparent hover:bg-gray-50 transition-colors flex-1 justify-center"
77
  >
78
  <i data-lucide="search"></i> Search
79
  </button>
80
  <button
81
  onclick="switchTab('similar')"
82
  id="similarTab"
83
+ class="tab-trigger px-4 sm:px-6 py-3 flex items-center gap-2 border-b-2 border-transparent hover:bg-gray-50 transition-colors flex-1 justify-center"
84
  >
85
  <i data-lucide="arrow-right"></i> Find Similar
86
  </button>
 
182
  // Create result card
183
  function createResultCard(result) {
184
  const cardHtml = `
185
+ <div class="card bg-white p-4 sm:p-6 rounded-lg shadow hover:shadow-md transition-shadow">
186
+ <div class="space-y-2 w-full">
187
+ <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
188
+ <div class="flex items-center gap-2">
189
+ <i data-lucide="database" class="text-blue-500"></i>
190
+ <h3 class="text-lg font-semibold">${
191
+ result.dataset_id
192
+ }</h3>
193
+ </div>
194
+ <div class="flex flex-wrap items-center gap-2">
195
+ <div class="flex items-center gap-4 text-sm text-gray-500">
196
+ <span class="flex items-center gap-1">
197
+ <i data-lucide="heart" class="w-4 h-4"></i>
198
+ ${result.likes}
199
+ </span>
200
+ <span class="flex items-center gap-1">
201
+ <i data-lucide="download" class="w-4 h-4"></i>
202
+ ${result.downloads}
203
+ </span>
204
+ </div>
205
+ <span class="bg-blue-50 px-2 py-1 rounded text-sm">
206
+ ${(result.similarity * 100).toFixed(1)}% match
207
+ </span>
208
+ <button
209
+ onclick="findSimilarFromResult('${
210
+ result.dataset_id
211
+ }')"
212
+ class="flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700"
213
+ >
214
+ <i data-lucide="arrow-right"></i>
215
+ Find Similar
216
+ </button>
217
+ </div>
218
+ </div>
219
+ <p class="text-sm text-gray-600">${result.summary}</p>
220
+
221
+ <!-- Add preview section that starts hidden -->
222
+ <div id="preview-section-${
223
+ result.dataset_id
224
+ }" class="mt-4 border-t pt-4 hidden">
225
+ <button
226
+ onclick="togglePreview('${result.dataset_id}')"
227
+ class="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800"
228
+ >
229
+ <i data-lucide="chevron-right" id="preview-icon-${
230
+ result.dataset_id
231
+ }" class="transition-transform"></i>
232
+ Preview Dataset
233
+ </button>
234
+ <div id="preview-content-${
235
+ result.dataset_id
236
+ }" class="hidden mt-4">
237
+ <iframe
238
+ src="https://huggingface.co/datasets/${
239
+ result.dataset_id
240
+ }/embed/viewer/default/train"
241
+ frameborder="0"
242
+ width="100%"
243
+ height="560px"
244
+ ></iframe>
245
+ </div>
246
+ </div>
247
+
248
+ <a href="https://huggingface.co/datasets/${
249
+ result.dataset_id
250
+ }"
251
+ target="_blank"
252
+ class="inline-flex items-center gap-1 text-sm text-blue-500 hover:text-blue-700 mt-2">
253
+ <i data-lucide="external-link" class="w-4 h-4"></i>
254
+ View on Hugging Face Hub
255
+ </a>
256
+ </div>
257
+ </div>
 
 
 
 
258
  `;
259
 
260
  // After rendering the card, check if preview is available
 
437
  </button>`
438
  : results.length >= MAX_RESULTS
439
  ? `<div class="text-center mt-4 p-6 bg-blue-50 rounded-lg">
440
+ <p class="text-gray-700 mb-3">You've reached the end of our dataset journey! (${MAX_RESULTS} results)</p>
441
  <p class="text-gray-600 mb-4">Can't find what you're looking for? Why not create and share your own dataset?</p>
442
  <a href="https://huggingface.co/docs/datasets/upload_dataset"
443
  target="_blank"