lichin-lin / tlidraw

Pushing pixels on 2d canvas

This repo contains a very basic example of how to use tldraw in a Next.js app.

Installation

• yarn to install all the dependencies

Start the web server

• yarn dev to setup the frontend service with command

Experiments

Here are some AI/Editing concept I am exploring, trigger different kinds of experiment with Cmd + k hotkey on the Mac.

1. AI: Fast diffusion (Latent Consistency Model) 🔗

1. You will need a real-time Latent Consistency Model python server (from ) for this experiment. follow the instruction and setup the backend service (you will need to do a git checkout ee4d659 to specifc version of the project).
2. Toggle the Command Menu (cmd + k) and select Fast diffusion (Latent Consistency Model) to start the function
3. Try to draw an illustration inside the frame. the UI will send the doodle + frame name (as the prompt) to the backend to generate the result

2. AI: remove background (client side only) 🔗

1. Update a photo and click to select it
2. Toggle the Command Menu (cmd + k) and select Remove background to start the function
3. wait for 5-8 second, and you will get the result

3. Editor: Linked list selection 🔗

1. Create some stickys and connect them with connectors
2. Toggle the Command Menu (cmd + k) and select Linked list selection to start the function
3. Click to select the parent sticky and move it around
4. You will see that the children stickys update the position as well.

4. Editor: Joystick control 🔗

1. Create some stickys and connect them all to a single sticky with connectors
2. Toggle the Command Menu (cmd + k) and select Joysticky control to start the function
3. Click to select the parent sticky, and control the Joystick
4. You will see that the children stickys update their position.

5. Editor: Crayon doodle 🔗

1. Toggle the Command Menu (cmd + k) and select Crayon effect to start the function
2. Switch to doodle mode and start to draw on the canvas

6. Editor: drag and drop 🔗

1. Toggle the Command Menu (cmd + k) and select sticker panel to start the function
2. drag the sticker in the side panel and drop it on the canvas