Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
julien-c opened this issue Jun 29, 2023 · 7 comments · May be fixed by #254
Open

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

julien-c opened this issue Jun 29, 2023 · 7 comments · May be fixed by #254
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed

Comments

@julien-c
Copy link
Member

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?

@julien-c julien-c added the enhancement New feature or request label Jun 29, 2023
@xenova xenova added help wanted Extra attention is needed good first issue Good for newcomers labels Jun 29, 2023
@itsajay1029
Copy link

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

@xenova
Copy link
Collaborator

xenova commented Jul 3, 2023

@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
Copy link

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 xenova linked a pull request Aug 19, 2023 that will close this issue
@xenova
Copy link
Collaborator

xenova commented Aug 19, 2023

Progress being made here!

@julien-c
Copy link
Member Author

maybe still useful to do a raw Svelte one too?

@xenova
Copy link
Collaborator

xenova commented Aug 21, 2023

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

@radames
Copy link

radames commented Aug 21, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants