Skip to content

Getting Started

carefree0910 edited this page Apr 13, 2023 · 27 revisions

🚧🚧 WIP 🚧🚧. If you encountered any problems, feel free to open an issue/a discussion!

The best way to get started is probably going for the examples, especially the Stable Diffusion example. However, if you want a step-by-step guidance, this is the right place to go!

Installation

carefree-drawboard 🎨 requires the following to get started:

pip install carefree-drawboard
npm install --global yarn

Your first carefree-drawboard 🎨 App

Create a folder (e.g., my_fancy_app) wherever you like, get into it, and run

cfdraw init

When you run this command for the first time, we will use yarn to install the javascript dependencies for you.

This command will write two files to your folder (my_fancy_app). After which you can run the app in development mode:

cfdraw run

And you should see your app running at http://localhost:5123. Now you can play with the generated app.py file and see warm reload (yeah, not hot enough because we rely on the reload provided by uvicorn 🤣).

Notice that the generated template implements a Gaussian Blur plugin, which requires an image to pop up. You can upload an image either by dropping on directly to the drawboard 🎨, or by clicking the Plus button at the top right corner and select Upload Image.

Adjust Styles

Styles are maintained under the settings property, which should return an IPluginSettings instance. The easiest and (maybe) also the most important thing we need to do is assigning a nice-looking icon to our plugin. We can achieve this by specifying an src argument to the returned IPluginSettings instance:

class Plugin(IHttpFieldsPlugin):
    @property
    def settings(self) -> IPluginSettings:
        return IPluginSettings(
            src="..."
            ...

Here, the src should be a url of the desired image. If you don't have one in hand, you may try use this one.

After saving the modifications, you should be able to see the icon of your plugin changes, cool!

You can play with other fields in IPluginSettings to see what will happen!

Clone this wiki locally