Skip to content

Commit 0f4a573

Browse files
mishig25mishig25
authored
[Svelte] Inference Snippet component (#549)
1 parent f6b8b7b commit 0f4a573

21 files changed

+773
-18
lines changed

‎README.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ This is the package we use to build the documentation of our Hugging Face repos.
2222
+ [Anchor link](#anchor-link)
2323
+ [LaTeX](#latex)
2424
+ [Code Blocks](#code-blocks)
25+
+ [Inference Snippet](#inference-snippet)
2526
* [Writing API documentation (Python)](#writing-api-documentation-python)
2627
+ [Autodoc](#autodoc)
2728
+ [Code Blocks from file references](#code-blocks-from-file-references)
@@ -389,6 +390,65 @@ Syntax:
389390

390391
Example: [here](https://github.com/huggingface/text-generation-inference/blob/724199aaf172590c3658018c0e6bc6152cda4c2f/docs/source/basic_tutorials/launcher.md?plain=1#L3)
391392

393+
### Inference Snippet
394+
395+
The `InferenceSnippet` component is used to render an interactive interface for AI model inference. It uses [huggingface/huggingface.js](https://github.com/huggingface/huggingface.js) under the hood to get the snippets.
396+
397+
#### Props
398+
399+
Below is a description of the props that can be passed to this component:
400+
401+
- **modelId** (string, required):
402+
The identifier of the AI model to be used for inference. This should be a valid model ID, such as `"deepseek-ai/DeepSeek-R1"`.
403+
404+
- **pipeline** (string, required):
405+
Specifies the type of pipeline to be used for inference. Common values include `"text-generation"`, `"text-classification"`, etc.
406+
407+
- **conversational** (boolean, optional):
408+
If set to `true`, the component will enable conversational mode, allowing for multi-turn interactions for `text-generation` models.
409+
410+
- **providers** (array of strings, required):
411+
A list of provider names that support the specified model and pipeline. Example: `["fireworks-ai", "cerebras", "cohere", "hyperbolic"]`.
412+
413+
#### Example Usage
414+
415+
```svelte
416+
<InferenceSnippet
417+
modelId="deepseek-ai/DeepSeek-R1"
418+
pipeline="text-generation"
419+
conversational
420+
providers={["fireworks-ai", "cerebras", "cohere", "hyperbolic"]}
421+
/>
422+
```
423+
424+
```svelte
425+
<InferenceSnippet
426+
modelId="deepseek-ai/DeepSeek-R1"
427+
pipeline="text-generation"
428+
conversational
429+
providers={["fireworks-ai"]}
430+
/>
431+
```
432+
433+
```svelte
434+
<InferenceSnippet
435+
modelId="black-forest-labs/FLUX.1-dev"
436+
pipeline="text-to-image"
437+
providers={["black-forest-labs", "replicate", "fal-ai"]}
438+
/>
439+
```
440+
441+
#### Adding new inference provider
442+
443+
Step 1: get latest `huggingface/huggingface.js` by running the command below:
444+
445+
```
446+
cd kit
447+
npm run update-inference-providers
448+
```
449+
450+
Step 2: add an icon for the new provider in `kit/src/lib/InferenceSnippet/InferenceSnippet.svelte`.
451+
392452
## Writing API documentation (Python)
393453

394454
### Autodoc

‎kit/README.md‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎kit/package-lock.json‎

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎kit/package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@
1010
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1111
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
1212
"lint": "prettier --check --plugin prettier-plugin-svelte .",
13-
"format": "prettier --write --plugin prettier-plugin-svelte ."
13+
"format": "prettier --write --plugin prettier-plugin-svelte .",
14+
"update-inference-providers": "npm ci && npm i @huggingface/inference@latest && npm i @huggingface/tasks@latest"
1415
},
1516
"devDependencies": {
17+
"@huggingface/inference": "^3.6.2",
18+
"@huggingface/tasks": "^0.18.4",
1619
"@sveltejs/adapter-auto": "^2.0.0",
1720
"@sveltejs/adapter-static": "^2.0.3",
1821
"@sveltejs/kit": "^1.20.4",

‎kit/src/lib/CodeBlock.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
export let code = "";
55
export let highlighted = "";
66
export let wrap = false;
7+
export let classNames = "";
78
89
function handleMouseOver() {
910
hideCopyButton = false;
@@ -14,7 +15,7 @@
1415
</script>
1516

1617
<div
17-
class="code-block relative"
18+
class="code-block relative {classNames}"
1819
on:mouseover={handleMouseOver}
1920
on:focus={handleMouseOver}
2021
on:mouseout={handleMouseOut}

‎kit/src/lib/InferenceSnippet/IconInferenceBlackForest.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 26 26"
16+
>
17+
<path
18+
fill-rule="evenodd"
19+
clip-rule="evenodd"
20+
d="M13.1146 5L22.5938 18.9541L20.7344 18.9687L13.1146 7.54511L6.55208 17.528H14.6458L16.1042 18.9687C16.1042 19.0468 4 18.9541 4 18.9541L13.1146 5ZM21.3906 9.46122C21.3979 9.47585 21.6969 9.95853 22.0615 10.5436C22.4188 11.1287 22.7615 11.6918 22.9583 12.0063H19.8229L20.2458 11.3262C20.2458 11.3262 20.8365 10.3827 21.026 10.0463C21.2229 9.70988 21.3833 9.44659 21.3906 9.46122Z"
21+
fill="currentColor"
22+
/>
23+
<path d="M19.6305 18.9541H17.917L13.4326 12.0794H15.2555L19.6305 18.9541Z" fill="currentColor" />
24+
<path d="M13.224 15.9556H10.1979L11.6563 13.5787L13.224 15.9556Z" fill="currentColor" />
25+
</svg>

‎kit/src/lib/InferenceSnippet/IconInferenceCerebras.svelte‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 26 26"
16+
fill="none"
17+
>
18+
<path
19+
d="M15 22C10.0294 22 6 17.9706 6 13C6 8.02939 10.0294 4 15 4M10.3635 18.5622C7.2966 15.989 6.89677 11.417 9.46998 8.35026C12.0432 5.28338 16.6151 4.88355 19.6819 7.45675M12.4088 17.8643C9.72407 16.447 8.69627 13.1212 10.1136 10.4368C11.5308 7.75157 14.8559 6.72427 17.5411 8.14156M15 16.746C12.9314 16.746 11.2543 15.0689 11.2543 13.0003C11.2543 10.9316 12.9314 9.25454 15 9.25454"
20+
stroke="#F15A29"
21+
stroke-width="1.5"
22+
stroke-miterlimit="10"
23+
/>
24+
</svg>

‎kit/src/lib/InferenceSnippet/IconInferenceCohere.svelte‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 26 26"
16+
>
17+
<!-- <rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#E9E6DE" /> -->
18+
<path
19+
fill-rule="evenodd"
20+
clip-rule="evenodd"
21+
d="M9.48 14.92C10.0133 14.92 11.08 14.8933 12.5733 14.28C14.3067 13.56 17.72 12.28 20.2 10.9467C21.9333 10.0133 22.68 8.78667 22.68 7.13333C22.68 4.86667 20.84 3 18.5467 3H8.94667C5.66667 3 3 5.66667 3 8.94667C3 12.2267 5.50667 14.92 9.48 14.92Z"
22+
fill="#39594D"
23+
/>
24+
<path
25+
fill-rule="evenodd"
26+
clip-rule="evenodd"
27+
d="M11.1066 19C11.1066 17.4 12.0666 15.9333 13.5599 15.32L16.5732 14.0666C19.6399 12.8133 22.9999 15.0533 22.9999 18.36C22.9999 20.92 20.9199 23 18.3599 23H15.0799C12.8932 23 11.1066 21.2133 11.1066 19Z"
28+
fill="#D18EE2"
29+
/>
30+
<path
31+
d="M6.44 15.6934C4.54667 15.6934 3 17.24 3 19.1334V19.5867C3 21.4534 4.54667 23 6.44 23C8.33333 23 9.88 21.4534 9.88 19.56V19.1067C9.85333 17.24 8.33333 15.6934 6.44 15.6934Z"
32+
fill="#FF7759"
33+
/>
34+
</svg>

‎kit/src/lib/InferenceSnippet/IconInferenceFal.svelte‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 26 26"
16+
>
17+
<path
18+
fill-rule="evenodd"
19+
clip-rule="evenodd"
20+
d="M16.5899 2.37891C16.9579 2.37891 17.2529 2.67812 17.2881 3.04443C17.6019 6.31174 20.2023 8.91191 23.4698 9.22569C23.8361 9.26089 24.1353 9.55582 24.1353 9.92378V16.0761C24.1353 16.4441 23.8361 16.739 23.4698 16.7742C20.2023 17.088 17.6019 19.6881 17.2881 22.9555C17.2529 23.3218 16.9579 23.621 16.5899 23.621H10.4373C10.0692 23.621 9.77432 23.3218 9.73912 22.9555C9.42534 19.6881 6.82494 17.088 3.5574 16.7742C3.19109 16.739 2.89185 16.4441 2.89185 16.0761V9.92378C2.89185 9.55582 3.19109 9.26089 3.55741 9.22569C6.82494 8.91191 9.42534 6.31174 9.73912 3.04443C9.77432 2.67812 10.0692 2.37891 10.4373 2.37891H16.5899ZM7.15714 12.982C7.15714 16.5163 10.0192 19.3814 13.5498 19.3814C17.0804 19.3814 19.9426 16.5163 19.9426 12.982C19.9426 9.44762 17.0804 6.58248 13.5498 6.58248C10.0192 6.58248 7.15714 9.44762 7.15714 12.982Z"
21+
fill="currentColor"
22+
/>
23+
</svg>

‎kit/src/lib/InferenceSnippet/IconInferenceFireworks.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script lang="ts">
2+
export let classNames = "";
3+
</script>
4+
5+
<svg
6+
class={classNames}
7+
xmlns="http://www.w3.org/2000/svg"
8+
xmlns:xlink="http://www.w3.org/1999/xlink"
9+
aria-hidden="true"
10+
focusable="false"
11+
role="img"
12+
width="1em"
13+
height="1em"
14+
preserveAspectRatio="xMidYMid meet"
15+
viewBox="0 0 26 26"
16+
>
17+
<path
18+
d="M19.7941 2.5H6.20588C4.15918 2.5 2.5 4.15918 2.5 6.20588V19.7941C2.5 21.8408 4.15918 23.5 6.20588 23.5H19.7941C21.8408 23.5 23.5 21.8408 23.5 19.7941V6.20588C23.5 4.15918 21.8408 2.5 19.7941 2.5Z"
19+
fill="#5019C5"
20+
/>
21+
<path
22+
fill-rule="evenodd"
23+
clip-rule="evenodd"
24+
d="M12.9917 14.8005C12.4958 14.8005 12.0508 14.5061 11.861 14.0503L9.57335 8.58789H10.9123L12.9995 13.5848L15.0847 8.58789H16.4237L14.1223 14.0523C13.9316 14.5061 13.4875 14.8005 12.9917 14.8005ZM15.9767 17.4106C15.4828 17.4106 15.0398 17.1181 14.8481 16.6663C14.6554 16.2105 14.7551 15.6902 15.1034 15.3371L19.2699 11.1168L19.7902 12.3442L15.9758 16.2007L21.4128 16.1704L21.9331 17.3979L15.9777 17.4125L15.9758 17.4106H15.9767ZM4.58722 16.1684L4.06689 17.3959L4.06885 17.394L10.0242 17.4076C10.5162 17.4076 10.9612 17.1162 11.1529 16.6633C11.3466 16.2085 11.2458 15.6863 10.8977 15.3342L6.73113 11.1138L6.2108 12.3413L10.0242 16.1988L4.58722 16.1684Z"
25+
fill="white"
26+
/>
27+
</svg>

0 commit comments

Comments
 (0)