123 lines
3.4 KiB
Markdown
123 lines
3.4 KiB
Markdown
# Draw Fast
|
||
|
||
**Draw Fast** is a demo that shows how you can use the [**tldraw library**](https://tldraw.dev) with realtime image generation. The demo has now finished and we’ve taken it down. But you can still run it on your own machine and try it out.
|
||
|
||
Here are two ways of doing that.
|
||
|
||
- [Run it locally](#run-it-locally)
|
||
- [Run it in CodeSandbox](#run-it-in-codesandbox)
|
||
|
||
# Run it locally
|
||
|
||
Here's a video tutorial. Or read below for a written guide.
|
||
|
||
https://github.com/tldraw/draw-fast/assets/15892272/dd175168-f4db-455a-9c70-2736cd4403d0
|
||
|
||
## 1. Clone the repo
|
||
|
||
Clone this repo!
|
||
|
||
```
|
||
git clone https://github.com/tldraw/draw-fast
|
||
```
|
||
|
||
## 2. Get a Fal key
|
||
|
||
Go to [fal.ai](https://fal.ai)
|
||
|
||
Login with github, and get a key from the [keys page](https://www.fal.ai/dashboard/keys). (You can give it any name you want).
|
||
|
||
|
||
|
||
Copy your key.
|
||
|
||
|
||
|
||
## 3. Setup environment variables
|
||
|
||
Create a `.env` file in the root folder of your repo.
|
||
Paste your key there as `FAL_KEY`
|
||
|
||
Your file should something like this:
|
||
|
||
```
|
||
FAL_KEY=8bf6c68d-8711-426b-90c6-0d9636909fce:b774f2a649cfecbf56dce57db7966a73
|
||
```
|
||
|
||
## 4. Run it locally
|
||
|
||
In your terminal…
|
||
|
||
```
|
||
npm install
|
||
npm run dev
|
||
```
|
||
|
||
And open `localhost:3000`
|
||
|
||
## 5. Draw fast
|
||
|
||
Draw something in the rectangle!
|
||
Double-clicking the prompt to change it.
|
||
Click the small arrow to enter *lens mode*.
|
||
|
||
## 6. Share!
|
||
|
||
Record your screen and show us what you draw fast.
|
||
|
||
We’re [@tldraw on twitter](https://twitter.com/tldraw).
|
||
|
||
## Troubleshooting
|
||
|
||
If the generated images don’t appear, try running `npm install` and `npm run dev` again, or try waiting a while for your key to activate.
|
||
|
||
# Run it in CodeSandbox
|
||
|
||
## 1. Import the repo
|
||
|
||
Sign in on [CodeSandbox](https://codesandbox.io). Click on **Import repository**.
|
||
|
||
|
||
|
||
|
||
Import the repo by pasting in `https://github.com/tldraw/draw-fast` and clicking **Import**.
|
||
|
||
|
||
|
||
## 2. Setup the environment
|
||
|
||
Click **Next** until you get to the **Set environment variables** screen.
|
||
|
||
|
||
|
||
On the **Set environment variables** screen, click **Add variable**.
|
||
|
||
|
||
|
||
Name your key `FAL_KEY`.
|
||
|
||
You can get a key from [fal.ai](https://www.fal.ai/dashboard/keys)
|
||
Instructions on how to do that are [here](https://www.notion.so/Draw-Fast-help-038edf9a982847e19df078854c54c8dd?pvs=21).
|
||
|
||
|
||
|
||
Click **Save**, then click **Next** until you get to the end of setup.
|
||
|
||
|
||
|
||
Finally, click **Apply and restart**, and wait about 5 minutes.
|
||
|
||
|
||
|
||
## 3. Draw fast
|
||
|
||
Draw something in the rectangle!
|
||
Double-clicking the prompt to change it.
|
||
Click the small arrow to enter *lens mode*.
|
||
|
||
## 4. Share!
|
||
|
||
Record your screen and show us what you draw fast.
|
||
|
||
We’re [@tldraw on twitter](https://twitter.com/tldraw).
|