quivr/docs/examples/generate-images.mdx
Antoine Dewez a540a201e3
feat(frontend): Page Header + Begin of Studio (#2151)
# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
2024-02-06 16:05:07 -08:00

104 lines
3.7 KiB
Plaintext

---
title: Generate Images
---
You can use Quivr to Generate Images using Dall-E 3 from OpenAI or any other API based image generation tool.
This allows you to leverage image generation by creating a brain that is connected to Dall-E.
## OpenAI
<Info>
In order to have image generation in Quivr we will create a brain that is
connected to an API. You can find more info on this types of brains
[here](/getting-started/api-based-brains)
</Info>
<Steps>
<Step title="Create OpenAI Account">
Create an account on [OpenAI](https://platform.openai.com/)
</Step>
<Step title="Credit Card">
To get access to image generation, add your credit card in the `billing`
section
</Step>
<Step title="Create API Key">Create on API Key and save the result</Step>
</Steps>
<Warning>Do not share your API Key</Warning>
## Create a brain
Now it is time to create an App brain. This type of brain allows you to interact with APIs. And that is exactly what we need to do now. Let's get started.
<Warning>
Generating images costs around 2cts per image. Be carefull or you'll have a
surprised bill.
</Warning>
<Steps>
<Step title="Create a new Brain">
Go to the [Brains](https://www.quivr.app/studio) page and click on `Create
Brain`
</Step>
<Step title="Choose App Brain">
Select `App (Through API)` and click on `Next`
</Step>
<Step title="Name & Prompt">
1. Give your brain a name. 2. Add this as your description. ``` You generate
only one image and use markdown to display the url sent as a result and you
need to keep the entire url with all the parameters for the image to be
displayed correctly. Do not remove the signature and password in the url of
the image as it is a signed url. Also return the revised prompt below the
image in italic. If the user ask for a modification use the previous prompt
generated as base ``` 3. Click on `Next`
</Step>
<Step title="URL">
1. Select `POST` as the method 2. Add this as the url
`https://api.openai.com/v1/images/generations`
<img src="/images/openai-brain-url.png" />
</Step>
<Step title="Parameters">
1. Add `prompt` as a parameter and click on `Required`
<ParamField path="prompt" type="string">
Description of the image to generate
</ParamField>
2. Add `size` as a parameter and click on `Required`
<ParamField path="size" type="string">
By default 1024x1024 . But images can have a size of 1024x1024 (square),
1024x1792 (vertical) or 1792x1024 (horizontal) pixels
</ParamField>
3. Add `model` as a parameter and click on `Required`
<ParamField path="model" type="string">
Either dall-e-3 or dall-e-2. By default dall-e-3
</ParamField>
<img src="/images/openai-brain-params.png" />
</Step>
<Step title="Secrets">
1. Add `Authorization` as a secret
<ParamField path="Authorization" type="string">
Bearer YOUR_API_KEY
</ParamField>
**Add your API Key in the value** 2. Add `Content-Type` as a secret and
click on `Required`
<ParamField path="Content-Type" type="string">
application/json
</ParamField>
**Add `application/json` in the value**
<img src="/images/openai-brain-secrets.png" />
</Step>
<Step title="Create">Click on `Create`</Step>
<Step title="Generate your image">
Go to the chat and ask a question to your newly created brain.
<Tip>
You might have to type `@` and select your brain to be able to ask a
question to it.
</Tip>
<img src="/images/openai-brain-chat.png" />
</Step>
</Steps>
You can now use this brain to generate images. You can also use it to generate images in your own app throught the API.
Don't hesitate to share your creations on [Twitter](https://twitter.com/quivr_brain).
<Snippet file="commercial.mdx" />