Hugging Face's logo

Spaces:
radames
/
Candle-BERT-Semantic-Similarity-Wasm
Running

App Files Community
1
radames commited on
Commit
ccbe9af
•
1 Parent(s): b802856

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +28 -23
index.html CHANGED
@@ -19,7 +19,6 @@
19
  }
20
  </style>
21
  <script src="https://cdn.tailwindcss.com"></script>
22
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
23
  <script type="module" src="./code.js"></script>
24
  <script type="module">
25
  import { hcl } from "https://cdn.skypack.dev/d3-color@3";
@@ -75,6 +74,14 @@
75
  });
76
 
77
  modelSelectEl.addEventListener("change", (e) => {
 
 
 
 
 
 
 
 
78
  if (currInputText === "" || isCalculating) return;
79
  populateOutputArea(textAreaEl.value);
80
  calculateEmbeddings(textAreaEl.value);
@@ -230,6 +237,14 @@
230
  searchWikiEl.reportValidity();
231
  }
232
  });
 
 
 
 
 
 
 
 
233
  </script>
234
  </head>
235
  <body class="container max-w-4xl mx-auto p-4">
@@ -251,16 +266,14 @@
251
  <a
252
  href="https://huggingface.co/sentence-transformers/"
253
  target="_blank"
254
- class="underline hover:text-blue-500 hover:no-underline"
255
- >
256
  Sentence Transformers
257
  </a>
258
  and
259
  <a
260
  href="https://huggingface.co/intfloat/"
261
  target="_blank"
262
- class="underline hover:text-blue-500 hover:no-underline"
263
- >
264
  Liang Wang - e5 Models
265
  </a>
266
  </p>
@@ -270,8 +283,8 @@
270
  <label for="model" class="font-medium block">Models Options: </label>
271
  <select
272
  id="model"
273
- class="border-2 border-gray-500 rounded-md font-light interactive disabled:cursor-not-allowed w-full max-w-max"
274
- >
275
  <option value="intfloat_e5_small_v2" selected>
276
  intfloat/e5-small-v2 (133 MB)
277
  </option>
@@ -293,8 +306,7 @@
293
  <h3 class="font-medium">Examples:</h3>
294
  <form
295
  id="form-wiki"
296
- class="flex text-xs rounded-md justify-between w-min gap-3"
297
- >
298
  <input type="submit" hidden />
299
 
300
  <button data-example class="disabled:cursor-not-allowed interactive">
@@ -311,30 +323,25 @@
311
  id="search-wiki"
312
  title="Search Wikipedia article by title"
313
  class="font-light py-0 mx-1 resize-none outline-none w-32 disabled:cursor-not-allowed interactive"
314
- placeholder="Load Wikipedia article..."
315
- />
316
  <button
317
  title="Search Wikipedia article and load into input"
318
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal px-2 py-1 rounded disabled:bg-gray-300 disabled:cursor-not-allowed interactive"
319
- >
320
  Load
321
  </button>
322
  </form>
323
  </div>
324
  <form
325
  id="form"
326
- class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center"
327
- >
328
  <input type="submit" hidden />
329
  <input
330
  type="text"
331
  id="search-input"
332
  class="font-light w-full px-3 py-2 mx-1 resize-none outline-none interactive disabled:cursor-not-allowed"
333
- placeholder="Search query here..."
334
- />
335
  <button
336
- class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 w-16 rounded disabled:bg-gray-300 disabled:cursor-not-allowed interactive"
337
- >
338
  Search
339
  </button>
340
  </form>
@@ -350,15 +357,13 @@
350
  <div
351
  id="input-container"
352
  tabindex="0"
353
- class="min-h-[250px] bg-slate-100 text-gray-500 rounded-md p-4 flex flex-col gap-2 relative"
354
- >
355
  <textarea
356
  id="input-area"
357
  hidden
358
  value=""
359
  placeholder="Input text to perform semantic similarity search..."
360
- class="flex-1 resize-none outline-none left-0 right-0 top-0 bottom-0 m-4 absolute interactive disabled:invisible"
361
- ></textarea>
362
  <p id="output-area" class="grid-rows-2">
363
  Input text to perform semantic similarity search...
364
  </p>
 
19
  }
20
  </style>
21
  <script src="https://cdn.tailwindcss.com"></script>
 
22
  <script type="module" src="./code.js"></script>
23
  <script type="module">
24
  import { hcl } from "https://cdn.skypack.dev/d3-color@3";
 
74
  });
75
 
76
  modelSelectEl.addEventListener("change", (e) => {
77
+ const query = new URLSearchParams(window.location.search);
78
+ query.set("model", modelSelectEl.value);
79
+ window.history.replaceState(
80
+ {},
81
+ "",
82
+ `${window.location.pathname}?${query}`
83
+ );
84
+ window.parent.postMessage({ queryString: "?" + queryString }, "*")
85
  if (currInputText === "" || isCalculating) return;
86
  populateOutputArea(textAreaEl.value);
87
  calculateEmbeddings(textAreaEl.value);
 
237
  searchWikiEl.reportValidity();
238
  }
239
  });
240
+ document.addEventListener("DOMContentLoaded", () => {
241
+ const query = new URLSearchParams(window.location.search);
242
+ const modelID = query.get("model");
243
+ if (modelID) {
244
+ modelSelectEl.value = modelID;
245
+ modelSelectEl.dispatchEvent(new Event("change"));
246
+ }
247
+ });
248
  </script>
249
  </head>
250
  <body class="container max-w-4xl mx-auto p-4">
 
266
  <a
267
  href="https://huggingface.co/sentence-transformers/"
268
  target="_blank"
269
+ class="underline hover:text-blue-500 hover:no-underline">
 
270
  Sentence Transformers
271
  </a>
272
  and
273
  <a
274
  href="https://huggingface.co/intfloat/"
275
  target="_blank"
276
+ class="underline hover:text-blue-500 hover:no-underline">
 
277
  Liang Wang - e5 Models
278
  </a>
279
  </p>
 
283
  <label for="model" class="font-medium block">Models Options: </label>
284
  <select
285
  id="model"
286
+ class="border-2 border-gray-500 rounded-md font-light interactive disabled:cursor-not-allowed w-full max-w-max">
287
+ <option value="gte_tiny">gte_tiny (45.5 MB)</option>
288
  <option value="intfloat_e5_small_v2" selected>
289
  intfloat/e5-small-v2 (133 MB)
290
  </option>
 
306
  <h3 class="font-medium">Examples:</h3>
307
  <form
308
  id="form-wiki"
309
+ class="flex text-xs rounded-md justify-between w-min gap-3">
 
310
  <input type="submit" hidden />
311
 
312
  <button data-example class="disabled:cursor-not-allowed interactive">
 
323
  id="search-wiki"
324
  title="Search Wikipedia article by title"
325
  class="font-light py-0 mx-1 resize-none outline-none w-32 disabled:cursor-not-allowed interactive"
326
+ placeholder="Load Wikipedia article..." />
 
327
  <button
328
  title="Search Wikipedia article and load into input"
329
+ class="bg-gray-700 hover:bg-gray-800 text-white font-normal px-2 py-1 rounded disabled:bg-gray-300 disabled:cursor-not-allowed interactive">
 
330
  Load
331
  </button>
332
  </form>
333
  </div>
334
  <form
335
  id="form"
336
+ class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center">
 
337
  <input type="submit" hidden />
338
  <input
339
  type="text"
340
  id="search-input"
341
  class="font-light w-full px-3 py-2 mx-1 resize-none outline-none interactive disabled:cursor-not-allowed"
342
+ placeholder="Search query here..." />
 
343
  <button
344
+ class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 w-16 rounded disabled:bg-gray-300 disabled:cursor-not-allowed interactive">
 
345
  Search
346
  </button>
347
  </form>
 
357
  <div
358
  id="input-container"
359
  tabindex="0"
360
+ class="min-h-[250px] bg-slate-100 text-gray-500 rounded-md p-4 flex flex-col gap-2 relative">
 
361
  <textarea
362
  id="input-area"
363
  hidden
364
  value=""
365
  placeholder="Input text to perform semantic similarity search..."
366
+ class="flex-1 resize-none outline-none left-0 right-0 top-0 bottom-0 m-4 absolute interactive disabled:invisible"></textarea>
 
367
  <p id="output-area" class="grid-rows-2">
368
  Input text to perform semantic similarity search...
369
  </p>