[Doc request] Add an example guide of how to use it in Svelte (and deploy to HF Spaces)

[julien-c]

Similar to the cool React guide, would be awesome to showcase how to use transformers.js from Svelte (and how to deploy the resulting app to Spaces)

No need to do a SvelteKit version IMO, Svelte would be sufficient

Maybe a good first issue for the community?

[itsajay1029]

Can you assign this issue to me and explain on what needs to be done ? @julien-c

[xenova]

@itsajay1029 that would be amazing! Thanks! 🤗

In the tutorials I have made so far for the docs (e.g., see the react tutorial), I've just given a step-by-step process for how to use transformers.js in the respective environment (react, electron, node.js, etc.). This provides new users with a starting point/template for applications that they will build.

So, if you can create a sample Svelte application (which does something simple like text classification), that would be awesome! You can structure it in a similar way to the react tutorial, just replacing react-specific syntax with svelte syntax. You can reuse the last step (for deploying to Spaces).

If you have a specific idea for another type of application, maybe something like whisper web, feel free to suggest them and we can brainstorm! In general, it's probably best to just keep it as simple as possible, but it is nice to have some variety in the docs!

[ElclarkKuhu]

Here is what I do to use Transformers.js on SvelteKit.

<script lang="ts">
    import { onMount, onDestroy } from 'svelte';

    import { languages } from '$lib/languages';
    import { pipeline } from '@xenova/transformers';
    import type { Pipeline } from '@xenova/transformers';

    let source = '';
    let target = '';

    let src_lang = 'eng_Latn';
    let tgt_lang = 'fra_Latn';

    let ready = false;
    let translationPipeline: Pipeline;

    // Make sure only load the model on the client
    onMount(async () => {
        function progress_callback(progress: any) {
            if (progress.task === 'translation' && progress.status === 'ready') {
                ready = true;
            }
        }
        translationPipeline = await pipeline('translation', 'Xenova/nllb-200-distilled-600M', {
            progress_callback
        });
    });

    // Make sure to dispose the model when the component is destroyed
    onDestroy(() => {
        translationPipeline?.dispose();
    });

    const translate = async () => {
        if (!ready) return;
        if (!source) return;

        const result = await translationPipeline(source, { src_lang, tgt_lang });
        console.log(result);
        target = result[0].translation_text;
    };
</script>

[xenova]

Progress being made here!

[julien-c]

maybe still useful to do a raw Svelte one too?

[xenova]

That would be great! @radames do you think you'll be able to adapt your sveltekit-static version to be raw svelte too?

[radames]

great point @julien-c I'll add another example with Svelte only!