Thomas G. Lopes commited on
Commit
36ed2d0
·
1 Parent(s): 55b300a
src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte CHANGED
@@ -5,18 +5,18 @@
5
  import http from "highlight.js/lib/languages/http";
6
  import javascript from "highlight.js/lib/languages/javascript";
7
  import python from "highlight.js/lib/languages/python";
8
- import { createEventDispatcher, onDestroy } from "svelte";
9
 
10
  import { token } from "$lib/stores/token";
 
11
  import type { InferenceProvider } from "@huggingface/inference";
12
  import IconCopyCode from "../Icons/IconCopyCode.svelte";
 
13
  import {
14
  getInferenceSnippet,
15
  type GetInferenceSnippetReturn,
16
  type InferenceSnippetLanguage,
17
  } from "./inferencePlaygroundUtils";
18
- import { keys, fromEntries, entries } from "$lib/utils/object";
19
- import IconExternal from "../Icons/IconExternal.svelte";
20
 
21
  hljs.registerLanguage("javascript", javascript);
22
  hljs.registerLanguage("python", python);
@@ -65,7 +65,7 @@
65
  return [lang, 0];
66
  })
67
  );
68
- $: selectedSnippet = snippetsByLang[lang][selectedSnippetIdxByLang[lang]]!;
69
 
70
  type InstallInstructions = {
71
  title: string;
@@ -74,7 +74,7 @@
74
  };
75
  $: installInstructions = (function getInstallInstructions(): InstallInstructions | undefined {
76
  if (lang === "javascript") {
77
- const isHugging = selectedSnippet.client.includes("hugging");
78
  const toInstall = isHugging ? "@huggingface/inference" : "openai";
79
  const docs = isHugging
80
  ? "https://huggingface.co/docs/huggingface.js/inference/README"
@@ -85,7 +85,7 @@
85
  docs,
86
  };
87
  } else if (lang === "python") {
88
- const isHugging = selectedSnippet.client.includes("hugging");
89
  const toInstall = isHugging ? "huggingface_hub" : "openai";
90
  const docs = isHugging
91
  ? "https://huggingface.co/docs/huggingface_hub/guides/inference"
@@ -105,16 +105,17 @@
105
  return "YOUR_HF_TOKEN";
106
  }
107
 
108
- function highlight(code: string, language: InferenceSnippetLanguage) {
 
109
  return hljs.highlight(code, { language: language === "curl" ? "http" : language }).value;
110
  }
111
 
112
- function copy(el: HTMLElement, _content: string) {
113
- let timeout: Timer;
114
- let content = _content;
115
 
116
- function update(_content: string) {
117
- content = _content;
118
  }
119
 
120
  function onClick() {
@@ -206,7 +207,7 @@
206
  <pre
207
  class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
208
  installInstructions.content,
209
- selectedSnippet.language
210
  )}</pre>
211
  {/if}
212
 
@@ -223,7 +224,7 @@
223
  </label>
224
  <button
225
  class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
226
- use:copy={selectedSnippet.content}
227
  >
228
  <IconCopyCode classNames="text-xs" /> Copy code
229
  </button>
@@ -231,7 +232,7 @@
231
  </div>
232
  <pre
233
  class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
234
- selectedSnippet.content,
235
- selectedSnippet.language ?? lang
236
  )}</pre>
237
  </div>
 
5
  import http from "highlight.js/lib/languages/http";
6
  import javascript from "highlight.js/lib/languages/javascript";
7
  import python from "highlight.js/lib/languages/python";
8
+ import { createEventDispatcher } from "svelte";
9
 
10
  import { token } from "$lib/stores/token";
11
+ import { entries, fromEntries, keys } from "$lib/utils/object";
12
  import type { InferenceProvider } from "@huggingface/inference";
13
  import IconCopyCode from "../Icons/IconCopyCode.svelte";
14
+ import IconExternal from "../Icons/IconExternal.svelte";
15
  import {
16
  getInferenceSnippet,
17
  type GetInferenceSnippetReturn,
18
  type InferenceSnippetLanguage,
19
  } from "./inferencePlaygroundUtils";
 
 
20
 
21
  hljs.registerLanguage("javascript", javascript);
22
  hljs.registerLanguage("python", python);
 
65
  return [lang, 0];
66
  })
67
  );
68
+ $: selectedSnippet = snippetsByLang[lang][selectedSnippetIdxByLang[lang]];
69
 
70
  type InstallInstructions = {
71
  title: string;
 
74
  };
75
  $: installInstructions = (function getInstallInstructions(): InstallInstructions | undefined {
76
  if (lang === "javascript") {
77
+ const isHugging = selectedSnippet?.client.includes("hugging");
78
  const toInstall = isHugging ? "@huggingface/inference" : "openai";
79
  const docs = isHugging
80
  ? "https://huggingface.co/docs/huggingface.js/inference/README"
 
85
  docs,
86
  };
87
  } else if (lang === "python") {
88
+ const isHugging = selectedSnippet?.client.includes("hugging");
89
  const toInstall = isHugging ? "huggingface_hub" : "openai";
90
  const docs = isHugging
91
  ? "https://huggingface.co/docs/huggingface_hub/guides/inference"
 
105
  return "YOUR_HF_TOKEN";
106
  }
107
 
108
+ function highlight(code?: string, language?: InferenceSnippetLanguage) {
109
+ if (!code || !language) return "";
110
  return hljs.highlight(code, { language: language === "curl" ? "http" : language }).value;
111
  }
112
 
113
+ function copy(el: HTMLElement, _content?: string) {
114
+ let timeout: ReturnType<typeof setTimeout>;
115
+ let content = _content ?? "";
116
 
117
+ function update(_content?: string) {
118
+ content = _content ?? "";
119
  }
120
 
121
  function onClick() {
 
207
  <pre
208
  class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
209
  installInstructions.content,
210
+ selectedSnippet?.language
211
  )}</pre>
212
  {/if}
213
 
 
224
  </label>
225
  <button
226
  class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
227
+ use:copy={selectedSnippet?.content}
228
  >
229
  <IconCopyCode classNames="text-xs" /> Copy code
230
  </button>
 
232
  </div>
233
  <pre
234
  class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
235
+ selectedSnippet?.content,
236
+ selectedSnippet?.language
237
  )}</pre>
238
  </div>