ML5-svelte

This project implements an _easy_ way to use ml5js as a component in svelte. The examples use ml5 and p5 together. Variables can be bound to svelte variables, so there are lots of possibilities to interact with UI element and machine learning models. For example using input via webcam or microphone, or using text input to generate new text from external machine learning APIs.

Many thanks to the contributors of the P5 and ML5 community for developing these great tools! You can find the projects here:

- Ml5
- P5

Usage

$3

``ps pnpm i ml5-svelte`

Add the component to your code.

Now add p5-svelte to your project (ex. src/App.svelte):

`svelte

`Facemesh Example ported from ML5`



	This example modifies the code found here: 		>ML5 Facemesh	>

{#if sketch} {/if}`

`Additional: How to use the huggingface example?`

This is an additional example for usage of APIs from huggingface ml service. This has nothing to do with the ml5 usage and is only for the context in which this svelte component library was created: A lecture at the University of Applied Sciences @hfg-gmuend

Create an account on huggingface. Then go into your account settings and set up an API key for your account. Duplicate the .env.example file and rename it to .env . Paste the API key behind the VITE_HUGGINGFACE_API_TOKEN variable in the .env` file.