docs: add Svelte tutorial#1589
Conversation
Add a step-by-step tutorial showing how to build a multilingual translation app using Svelte and Vite with Transformers.js. The tutorial mirrors the existing React tutorial structure and covers project setup, Web Worker usage for ML inference, UI components, and deployment to Hugging Face Spaces. Closes huggingface#171
|
The docs for this PR live here. All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update. |
| </script> | ||
|
|
||
| <div class="progress-container"> | ||
| <div class="progress-bar" style="width: {percentage}%"> |
There was a problem hiding this comment.
I would avoid inline style, it could conflict with strict CSP
There was a problem hiding this comment.
Fixed in dd33f16: switched to Svelte's style:width directive, which avoids inline style attributes entirely.
Avoids CSP conflicts for strict Content-Security-Policy environments.
nico-martin
left a comment
nico-martin
left a comment
There was a problem hiding this comment.
Hi @mvanhorn, Thank you very much for the PR. I love to see more examples for different integrations!
There are a couple of small this I mentioned in the files. But otherwise the Transformers.js integration looks solid.
|
|
||
| Useful links: | ||
|
|
||
| - [Source code](https://github.com/huggingface/transformers.js/tree/main/examples/svelte-translator) |
There was a problem hiding this comment.
Does not exist. Do you want to add the source here?
https://github.com/huggingface/transformers.js-examples/
|
|
||
| First, let's create some child components. Create a folder called `lib` in the `src` directory, and create the following files: | ||
|
|
||
| 1. `LanguageSelector.svelte`: This component will allow the user to select the input and output languages. Check out the full list of languages [here](https://github.com/huggingface/transformers.js-examples/tree/main/react-translator/src/components/LanguageSelector.jsx). |
There was a problem hiding this comment.
I think this should then also point to the svelte example.
| {#if ready === false} | ||
| <label>Loading models... (only run once)</label> | ||
| {/if} | ||
| {#each progressItems as data (data.file)} |
There was a problem hiding this comment.
Since version 4.0 we have a new progress_total item in the progress_callback:
const pipe = await pipeline(
"feature-extraction",
"onnx-community/all-MiniLM-L6-v2-ONNX",
{
progress_callback: (i) => i.status === "progress_total" && console.log(i.progress),
}
);
I would suggest to only pass the total progress doen to the UI and show that here because in the end thats what is important for the users.
| }); | ||
|
|
||
| function onMessageReceived(e) { | ||
| switch (e.data.status) { |
There was a problem hiding this comment.
see comment on line 177
pngwn
left a comment
pngwn
left a comment
There was a problem hiding this comment.
Thanks for the PR @mvanhorn! I left an inline comment about using the sv CLI instead of create-vite. Other than that, the main issue with the PR is that it is using the older Svelte 3/4 syntax. The syntax changed quite a bit in version 5 which has been out for some time, so I think it makes sense to use that syntax here.
The main change is migrating the reactivity system to use runes.
| For this tutorial, we will use [Vite](https://vitejs.dev/) to initialise our project. Vite is a build tool that allows us to quickly set up a Svelte application with minimal configuration. Run the following command in your terminal: | ||
|
|
||
| ```bash | ||
| npm create vite@latest svelte-translator -- --template svelte |
There was a problem hiding this comment.
The canonical way to create a svelte app is with the svelte CLI sv create.
sv create only scaffolds SvelteKit projects, so the tutorial now targets the minimal template end to end: src/routes/+page.svelte instead of App.svelte, components under src/lib, the Web Worker created inside onMount (SvelteKit server-renders by default), and the deploy step uses adapter-static for the Static Space.
|
Done in 307482e - you were right that sv is the way. Since sv create scaffolds SvelteKit projects (there's no plain-SPA template), I migrated the whole tutorial to the SvelteKit minimal template rather than just swapping the scaffold command: src/routes/+page.svelte instead of App.svelte, components under src/lib, the worker created in onMount (with a note on why, since Kit SSRs by default), and the deploy step now points at adapter-static for the Static Space. |
5 participants
Summary
_toctree.yml(placed between React and Next.js)Closes #171
Test plan
_toctree.ymlordering is correct and the page appears in the sidebar