Thomas G. Lopes
commited on
Commit
·
36ed2d0
1
Parent(s):
55b300a
fix ci
Browse files
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
|
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
|
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
|
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
|
|
|
109 |
return hljs.highlight(code, { language: language === "curl" ? "http" : language }).value;
|
110 |
}
|
111 |
|
112 |
-
function copy(el: HTMLElement, _content
|
113 |
-
let timeout:
|
114 |
-
let content = _content;
|
115 |
|
116 |
-
function update(_content
|
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
|
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
|
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
|
235 |
-
selectedSnippet
|
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>
|