From 061024e8f0606664e1aa2cfc40b005eeab002729 Mon Sep 17 00:00:00 2001 From: Lu Wilson Date: Thu, 18 Jan 2024 14:46:34 +0000 Subject: [PATCH] Update README.md --- README.md | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index babb6bb..6268f71 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ **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’s how: +Here are two ways of doing that. + +# Run it locally ## 1. Clone the repo @@ -61,3 +63,53 @@ 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**. + +![a](https://github.com/tldraw/draw-fast/assets/15892272/dce56531-ca82-473d-b2ef-fe13644c7fb3) + + +Import the repo by pasting in `https://github.com/tldraw/draw-fast` and clicking **Import**. +![b](https://github.com/tldraw/draw-fast/assets/15892272/000597fe-69e0-43a0-96fb-89ab242c31f3) + + +## 2. Setup the environment + +Click **Next** until you get to the **Set environment variables** screen. +![c](https://github.com/tldraw/draw-fast/assets/15892272/d321b780-c33c-4217-b647-f757182869f3) + + +On the **Set environment variables** screen, click **Add variable**. +![d](https://github.com/tldraw/draw-fast/assets/15892272/65699754-9a54-4406-a28b-285d94488997) + + +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). +![e](https://github.com/tldraw/draw-fast/assets/15892272/4c2a128c-a597-4578-87c4-44e73e29de86) + + +Click **Save**, then click **Next** until you get to the end of setup. + +![f](https://github.com/tldraw/draw-fast/assets/15892272/9467f645-5843-445c-b346-68f2617c1d02) + +Finally, click **Apply and restart**, and wait about 5 minutes. +![g](https://github.com/tldraw/draw-fast/assets/15892272/b9ba8c65-7b28-4e80-a760-6b1814244c7b) + + +## 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).