DOCSEARCHbyAlgolia
Submit Docs

carefree-drawboard Documentation

website·Indexed 31 days ago

https://carefree0910.me/carefree-drawboard-doc/docs/getting-started

Documentation for carefree-drawboard, an infinite drawboard designed as an 'AI Operation System'. It includes guides on hosting, production deployment, CLI usage, and a comprehensive API reference for creating plugins using interfaces like IPluginInfo, IChatPlugin, and IFieldsPlugin.

Tokens
21.1K
Snippets
84
Records
161
Agent score
52%

What's inside carefree-drawboard

  1. Overview of carefree-drawboard

    carefree-drawboard 🎨 is a full-stack Python framework designed for building Infinite Drawboard-based web applications. It is designed to be pure Python, declarative, extensible, and AI-oriented (supporting technologies like Stable Diffusion and GPTs), acting as an 'AI operation system'.

  2. Understand the carefree-drawboard plugin architecture

    carefree-drawboard is built on the principle that everything is a plugin on an infinite drawboard. Plugins are designed to be decoupled and extensible, allowing them to be implemented in any language (including Python via the cfdraw package) as long as they adhere to a JSON-based declarative structure.

    Key plugin characteristics:

    • Declarative Construction: Every plugin must be constructible from JSON data.
    • UI Representation: Plugins appear as icon or text buttons. Clicking them either triggers an event or opens a panel with input fields to send data to the backend.
    • Positioning: Plugins control their visibility and position based on Pivots and Nodes. They can be 'global' (anchored to a drawboard corner, e.g., rt for upper right) or 'specific' (appearing only when a specific node type, like ImageNode, is selected).
    • Middleware: A middleware system is used to convert raw backend results (e.g., strings or PIL images) into the required frontend data structures.

  3. Understand the AI Operation System concept in carefree-drawboard

    The carefree-drawboard acts as an 'AI Operation System' by integrating multiple AI models at the backend and displaying their responses within a browser-based infinite space. In this architecture, AI models are treated as 'software' that can be utilized together in a single frontend environment. Key examples of this integration include combining Image Captioning with Stable Diffusion, and decoupling complex workflows like ControlNet into reusable plugins.

  4. Understand the carefree-drawboard plugin architecture

    A plugin in carefree-drawboard typically consists of two components: a plugin button (used to trigger the expansion of the panel) and an expand panel (where users interact with the plugin). For simple actions like Delete, Download, Undo, or Redo, the expand panel is omitted and the action is triggered directly by the button.

    The typical workflow is: User clicks button $\rightarrow$ Panel expands $\rightarrow$ User interacts/fills inputs $\rightarrow$ User clicks Submit $\rightarrow$ Panel collapses and button shows progress $\rightarrow$ Backend processes data $\rightarrow$ Drawboard updates.

  5. Position plugins using Pivot values

    The Pivot concept is used to determine the positioning of plugins. The following supported pivot values are available:

    • lt: Left top corner
    • top: Top center
    • rt: Right top corner
    • left: Middle left
    • center: Middle center
    • right: Middle right
    • lb: Left bottom corner
    • bottom: Bottom center
    • rb: Right bottom corner

  6. Apply the Apache License 2.0 to a project

    To apply the Apache License 2.0 to your work, include a boilerplate notice in the appropriate comment syntax for your file format. Replace the bracketed fields with your own identifying information. It is recommended to include the file or class name and a description of the purpose on the same page as the copyright notice to facilitate identification in third-party archives.
    Copyright [year] [or copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

  7. Deploy carefree-drawboard in Production using Unified mode

    The --unified mode uses AssetsEndpoint to serve frontend assets directly via the FastAPI backend server. This allows you to use a single public URL bound to the backend port (8123).

    Caveat: This mode is recommended for small projects or demos. For large-scale production, using a dedicated web server (like Nginx) or a CDN via --prod mode is preferred for better performance and scalability.

    cfdraw run --unified

  8. Trace Node creation using Injections

    carefree-drawboard uses an injections field within the meta property of each Node to trace the history of how a node was created.

    • Standalone Creation: If a node is created without deriving parameters from other nodes, the injections field remains empty.
    • Derived Creation: If parameters are derived from other Node(s), the injections field records which property was derived and the source Node providing the value.

    Automatic vs Manual Maintenance:

    • Automatic: injections are maintained automatically when using IImageField.
    • Manual: For all other cases, developers must maintain the injections field manually to ensure traceability. The built-in method set_injection is provided for this purpose.

  10. Install carefree-drawboard via pip

    To install the standard version of carefree-drawboard, use pip. It is also recommended to install yarn globally via npm to ensure frontend packages are handled correctly. After the initial installation, you can run cfdraw install to set up necessary frontend dependencies.
    pip install carefree-drawboard
npm install --global yarn
cfdraw install

  12. Implement custom visibility logic with nodeConstraintValidator

    When nodeConstraint and nodeConstraintRules are insufficient, use nodeConstraintValidator to specify a custom validator registered via register_node_validator. This allows for deep inspection of node data (e.g., checking specific text content).
    @register_node_validator("hello_world")
def validate_variation(data: ISocketRequest) -> bool:
    if data.nodeData.type != SingleNodeType.TEXT:
        return False
    return data.nodeData.text == "Hello World"

class Plugin(IFieldsPlugin):
    @property
    def settings(self) -> IPluginSettings:
        return IPluginSettings(
            ...,
            nodeConstraintValidator="hello_world",
        )