mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Merge pull request #14744 from supabase/docs/ai-deployment
Docs: Link to Hugging Face edge function docs
This commit is contained in:
5 files changed
+32
-23
No files matched your search
@@ -0,0 +1,5 @@
|
||||
## Deployment
|
||||
|
||||
If you have your own infrastructure for deploying Python apps, you can continue to use `vecs` as described in this guide.
|
||||
|
||||
Alternatively if you would like to quickly deploy using Supabase, check out our guide on using the [Hugging Face Inference API](/docs/guides/ai/hugging-face) in Edge Functions using TypeScript.
|
||||
@@ -9,6 +9,8 @@ export const meta = {
|
||||
|
||||
[Hugging Face](https://huggingface.co) is an open source hub for AI/ML models and tools. With over 100,000 machine learning models available, Hugging Face provides a great way to integrate specialized AI & ML tasks into your application.
|
||||
|
||||
Hugging Face exposes an [Inference API](https://huggingface.co/inference-api) you can use to execute AI tasks remotely on Hugging Face servers. This opens the doors to using Hugging Face with languages like TypeScript and can be deployed using [Edge Functions](/docs/guides/functions).
|
||||
|
||||
## AI Tasks
|
||||
|
||||
Below are some of the types of tasks you can perform with Hugging Face:
|
||||
@@ -40,7 +42,7 @@ See a [full list of tasks](https://huggingface.co/tasks).
|
||||
|
||||
## Access token
|
||||
|
||||
You should first generate a Hugging Face access token for your app:
|
||||
First generate a Hugging Face access token for your app:
|
||||
|
||||
https://huggingface.co/settings/tokens
|
||||
|
||||
@@ -59,13 +61,9 @@ To ensure you don't experience any unexpected downtime or errors, we recommend c
|
||||
|
||||
</Admonition>
|
||||
|
||||
## Integrate with Supabase
|
||||
## Edge Functions
|
||||
|
||||
Supabase aims to make it as easy as possible to integrate with third-party tools like Hugging Face.
|
||||
|
||||
### Edge functions
|
||||
|
||||
When building any application, you should never trust the client frontend with secrets or credentials. Here this means you should never use your Hugging Face access token directly from your frontend. Supabase solves this using [Edge Functions](/docs/guides/functions), server side TypeScript functions that spin up on-demand only as you need them. Since Edge Functions run on a server, you can safely give them access to your Hugging Face access token.
|
||||
Edge Functions are server-side TypeScript functions that run on-demand. Since Edge Functions run on a server, you can safely give them access to your Hugging Face access token.
|
||||
|
||||
<Admonition type="info">
|
||||
|
||||
@@ -73,13 +71,13 @@ You will need the `supabase` CLI [installed](/docs/guides/cli) for the following
|
||||
|
||||
</Admonition>
|
||||
|
||||
To create a new edge function, navigate to your local project and initialize Supabase if you haven't already:
|
||||
To create a new Edge Function, navigate to your local project and initialize Supabase if you haven't already:
|
||||
|
||||
```shell
|
||||
supabase init
|
||||
```
|
||||
|
||||
Then create an edge function:
|
||||
Then create an Edge Function:
|
||||
|
||||
```shell
|
||||
supabase functions new text-to-image
|
||||
@@ -91,7 +89,7 @@ Create a file called `.env.local` to store your Hugging Face access token:
|
||||
HUGGING_FACE_ACCESS_TOKEN=<your-token-here>
|
||||
```
|
||||
|
||||
Let's modify the edge function to import Hugging Face's inference client and perform a text-to-image request:
|
||||
Let's modify the Edge Function to import Hugging Face's inference client and perform a `text-to-image` request:
|
||||
|
||||
```ts
|
||||
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
|
||||
@@ -116,31 +114,31 @@ serve(async (req) => {
|
||||
})
|
||||
```
|
||||
|
||||
This function creates a new instance of `HfInference` using the `HUGGING_FACE_ACCESS_TOKEN` environment variable.
|
||||
1. This function creates a new instance of `HfInference` using the `HUGGING_FACE_ACCESS_TOKEN` environment variable.
|
||||
|
||||
It expects a POST request that includes a JSON request body. The JSON body should include a parameter called `prompt` that represents the text-to-image prompt that we will pass to Hugging Face's inference API.
|
||||
1. It expects a POST request that includes a JSON request body. The JSON body should include a parameter called `prompt` that represents the text-to-image prompt that we will pass to Hugging Face's inference API.
|
||||
|
||||
Next we call `textToImage()`, passing in the user's prompt along with the model that we would like to use for the image generation. Today Hugging Face recommends `stabilityai/stable-diffusion-2`, but you can change this to any other text-to-image model. You can see a list of which models are supported for each task by navigating to their [models page](https://huggingface.co/models?pipeline_tag=text-to-image) and filtering by task.
|
||||
1. Next we call `textToImage()`, passing in the user's prompt along with the model that we would like to use for the image generation. Today Hugging Face recommends `stabilityai/stable-diffusion-2`, but you can change this to any other text-to-image model. You can see a list of which models are supported for each task by navigating to their [models page](https://huggingface.co/models?pipeline_tag=text-to-image) and filtering by task.
|
||||
|
||||
We set `use_cache` to `false` so that repeat queries with the same prompt will produce new images. If the task and model you are using is deterministic (will always produce the same result based on the same input), consider setting `use_cache` to `true` for faster responses.
|
||||
1. We set `use_cache` to `false` so that repeat queries with the same prompt will produce new images. If the task and model you are using is deterministic (will always produce the same result based on the same input), consider setting `use_cache` to `true` for faster responses.
|
||||
|
||||
The `image` result returned from the API will be a `Blob`. We can pass the `Blob` directly into a `new Response()` which will automatically set the content type and body of the response from the `image`.
|
||||
1. The `image` result returned from the API will be a `Blob`. We can pass the `Blob` directly into a `new Response()` which will automatically set the content type and body of the response from the `image`.
|
||||
|
||||
Finally let's serve the edge function locally to test it:
|
||||
Finally let's serve the Edge Function locally to test it:
|
||||
|
||||
```shell
|
||||
supabase functions serve --env-file .env.local --no-verify-jwt
|
||||
```
|
||||
|
||||
Remember to pass in the `.env.local` file using the `--env-file` parameter so that the edge function can access the `HUGGING_FACE_ACCESS_TOKEN`.
|
||||
Remember to pass in the `.env.local` file using the `--env-file` parameter so that the Edge Function can access the `HUGGING_FACE_ACCESS_TOKEN`.
|
||||
|
||||
<Admonition type="info">
|
||||
|
||||
For demo purposes we set `--no-verify-jwt` to make it easy to test the edge function without passing in a JWT token. In a real application you will need to pass the JWT as a `Bearer` token in the `Authorization` header.
|
||||
For demo purposes we set `--no-verify-jwt` to make it easy to test the Edge Function without passing in a JWT token. In a real application you will need to pass the JWT as a `Bearer` token in the `Authorization` header.
|
||||
|
||||
</Admonition>
|
||||
|
||||
At this point, you can make an API request to your edge function using your preferred frontend framework (Next.js, React, Expo, etc). We can also test from the terminal using `curl`:
|
||||
At this point, you can make an API request to your Edge Function using your preferred frontend framework (Next.js, React, Expo, etc). We can also test from the terminal using `curl`:
|
||||
|
||||
```shell
|
||||
curl --output result.jpg --location --request POST 'http://localhost:54321/functions/v1/text-to-image' \
|
||||
@@ -148,7 +146,7 @@ curl --output result.jpg --location --request POST 'http://localhost:54321/funct
|
||||
--data '{"query":"Llama wearing sunglasses"}'
|
||||
```
|
||||
|
||||
Your generated image will save to `result.jpg`:
|
||||
In this example, your generated image will save to `result.jpg`:
|
||||
|
||||
<img
|
||||
src="/docs/img/ai/hugging-face/llama-sunglasses-example.png"
|
||||
@@ -157,6 +155,12 @@ Your generated image will save to `result.jpg`:
|
||||
height="400"
|
||||
/>
|
||||
|
||||
## Next steps
|
||||
|
||||
You can now create an Edge Function that invokes a Hugging Face task using your model of choice.
|
||||
|
||||
Try running some other [AI tasks](#ai-tasks).
|
||||
|
||||
## Resources
|
||||
|
||||
- Official [Hugging Face site](https://huggingface.co/).
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import StepHikeCompact from '~/components/StepHikeCompact'
|
||||
|
||||
export const meta = {
|
||||
id: 'ai-vecs-python-client',
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import StepHikeCompact from '~/components/StepHikeCompact'
|
||||
|
||||
export const meta = {
|
||||
id: 'ai-vecs-python-client',
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Layout from '~/layouts/DefaultGuideLayout'
|
||||
import StepHikeCompact from '~/components/StepHikeCompact'
|
||||
import HuggingFaceDeployment from '~/components/MDX/ai/quickstart_hf_deployment.mdx'
|
||||
|
||||
export const meta = {
|
||||
id: 'ai-vecs-python-client',
|
||||
@@ -54,6 +54,8 @@ You can view the inserted items in the [Table Editor](https://app.supabase.com/p
|
||||
|
||||
|
||||
|
||||
<HuggingFaceDeployment />
|
||||
|
||||
## Next steps
|
||||
|
||||
You can now start building your own applications with Vecs. Check our [examples](/docs/guides/ai#examples) for ideas.
|
||||
|
||||
Reference in new issue
Block a user