🛋️ CushyStudio

The AI and Generative Art platform for everyone

Cushy Studio is a cross-platform application allowing you to Discover, Run, Create and Share Generative workflows called Apps. It offers a complete suit of tools allowing you explore all of what generative art has to offer, have fun, or automate your work. It builds uppon proven technologies like ComfyUI, Stable Diffusion, ffmpeg, imagemagik, and many more. It features a professional UI with dockable panes, tabs, and a power-user tools to be efficient Cushy Apps.

Art blooms in bytes, vast,
In Cushy realms, ideas soar,
For all, art awakes.

2023-11-15_01-17-02.mp4

1. Introduction

To quote the header :

Cushy Studio is a cross-platform application allowing you to Discover, Run, Create and Share Generative workflows called Apps. It offers a complete suit of tools allowing you explore all of what generative art has to offer, have fun, or automate your work. It builds uppon proven technologies like ComfyUI, Stable Diffusion, ffmpeg, imagemagik, and many more. It features a professional UI with dockable panes, tabs, and a power-user tools to be efficient Cushy Apps.

1.1. Cushy Apps: generative AI workflows made simple and fun

Cushy Apps are self-contained applications empowering everyone to experience what AI has to offer in art and asset production.
Anyone can make Cushy apps to solve a particular need: By showing only showing you the right control that make sense for yout task, they are very easy to use. The philosophy behind Cushy apps is to empower you to simply express what you want.
CushyApps core are powered by battle-tested tools like ComfyUI, Konva, ffmpeg, imagemagik, and more.
For more advances users, or companies, Cushy Apps make it simple to automate any creation process, from game asset production, image post-processing, image generation, and even video generation. Developpers, dev citizens, or just advanced users can use the built-in TypeScript SDK to create their own Cushy Apps. streamline production workflow. They come with a nice and simple interface to make it easy to play experiment and play with those workflows.

image 1 - screenshot showcasing the Framed Avatar Maker app

Cushy Apps are

Easy to run, create, share.
interactive and real-time by design.
made to be used by everyone, from non-programmers to advanced users.

1.2. The Cushy library

CushyStudio comes packaged with core built-in Cushy Apps to get you started right away. But you can also create your own apps, or find more apps in the Cushy Library.

The Cushy Library is a collection of Cushy Apps made by the community. It is a place to share and discover new Cushy Apps. You can download Cushy Apps from the Cushy Library and use them in CushyStudio. You can also publish your own Cushy Apps to the Cushy Library.

image 2 - Built-in App library

1.3. Creator tools

while CushyStudio can be used with a simple two pane layout [App Form | App Outputs], it also comes packed with feature so you feel right at home for more complex need. It features a powerful dock system to organize your workspace, and a tab system to organize your content. It also comes with a built-in image editor, tools to compre image, etc. For ComfyUI users, it includes the full ComfyUI interface, extended with custom panels to make it easy to find and use your custom nodes.

image 2 - showcase multiple kind of panels to illustrate that CushyStudio comes Battery-inncluded

1.4. The Cushy WebApp

It doesn't exist yet, but it will be a simple companion web app made to allow you to share with one click any Cushy Apps with anyone, so they can run them even on mobile devices using cloud GPU. If you want your app to go viral, just publish your app, post the link on your preffered social platform, and let anyone use cloud GPUs to run your app. No setup needed, no installation, no hassle. Just one click and you're in.

2. Table of contents

1. Introduction
2. Table of contents
3. Quickstart Guide
4. Features
5. Quickstart Guide For Action Creators
6. Frequently Asked Questions:
7. Theming

2.1. Apps are simple to use.

✅ Non-technical Card interfaces
- Per use-case UI
- Simple widgets
🚂 Fast previews, real-time feedback
- Interactive at its core
- Real-time Apps with continuous generations
🖌️ Built-in commodities
- Image and Mask editors
- Modular Layout to stay organized and focuses

2.2. Apps are pleasant to make

🚀 CushyStudio comes with amakes it easy to build actions
- Pre-configured ecosystem: NO SETUP NEEDED
- Built-in ComfyUI to Action converter
- Graphical Action builder (soon™️)
- A full TypeScript Action SDK + Compiler to go further
🧑‍💻 Powerful fully-type-safe typescript SDK
- A built-in standard library made to quickly build your dream workflow
- Use lambda to get completion only for the node that produces the value needed
- Every single value/enum is typed
🧠 ComfyUI engine At its core
- All custom nodes are supported
- Custom interface to explore and play with nodes
- Deep integration with ComfyUI Graph
- A well-thought interface to explore and play with nodes
💪 From 0 to 100 in no time
- Modularize, reuse, and grow your toolset
- Share your deck/cards with the world

2.3. Apps are easy to share

📦 one-click create your custom Deck
- one-click open a fully pre-configured vscode workspace ready to go
- No setup needed: injected globals so you can focus on your card logic
- No dependencies

3. Quickstart Guide

3.1. Installation

During Beta, CushyStudio install is done manually with git.

Ensure you have the following installed:

NodeJS (18 or higher)
ComfyUI
Git

Then, to install CushyStudio, run these commands in a terminal:

git clone https://github.com/rvion/CushyStudio
cd CushyStudio
npm install

3.2. Starting

You can start CushyStudio in two ways:

by running npm start in a terminal, at the root of you CushyStudio install
by running the 2_run.sh (mac, linux) or 2_run.bat (window)

3.3. Updating

you can update CushyStudio in 3 ways:

1. Using the update button in the top navbar
1. By running the 1_update.sh (mac, linux) or 1_update.sh (window)
1. By running in a terminal:
```
git pull
npm install
```

⚠️ some update will require you to close CushyStudio first, for npm install to work properly. If in-app (1) update fails, try to close Cushy and run other update methods (2, 3)

3.4. Core concepts

Library

3.5. Moving around

CushyStudio use a powerful dock system to organize your workspace.
every panel can be moved around, and even detached from the main window.

the top bar

3.6. Use built-in cards

Use the Library panel to select the CushyStudio/prompt card.
pick a model and click run to see it in action

3.7. Install custom cards

Open the Library panel to select the CushyStudio/prompt card.

3.8. create custom cards

4. Features

4.1. First class ComfyUI support

4.1.1. work with `Local`, `Remote`, and `Cloud` ComfyUI instances

Automatically download images in your local outputs folder
Automatically upload missing files
powerfull image hashing system to avoid duplicate uploads

4.1.2. parallelize load across multiple ComfyUI instances

✅ Quickly switch between various ComfyUI setups
✅ Parallelize work across multiple instances

Edit the list of ComfyUI setups in CONFIG.json or click the HOSTS button in the top bar to configure your instances.

2023-10-18_21-28-13.mp4

4.1.3. support ComfyUI workflow natively

🛋️ CushyStudio is directly compatible with ComfyUI workflow json format and images. Add them to the action folder to quickly use them inside CushyStudio.

you can convert them to actions in cone click t

4.2. Real-time enabled

2023-10-19_00-39-13.mp4

4.3. CivitAI integration

✅ Embedded Civitai browser
✅ Civitai custom ComfyUI Nodes support
✅ Dedicated Civitai input widgets to augment your allow your cards to select CivitAI models directly

4.4. Built-in full-featured Image Editor

Layers, effects, masks, blending modes, ...and more. Always one click away

4.5. Easy to extend

👉 In case you have a problem, check the logs and report what you see

Click here to see how to reveal the debug console

4.6. Create your own Cards to streamline any image or video production

Define your own UI
Build one or many prompts with custom logic in TypeScript
Type-safe experience pushed to the MAXIMUM
1. Every single value/enum is typed
2. A built-in standard library made to quickly build your dream workflow
3. Use lambda to get completion only for the node that produces the value needed

5. Quickstart Guide For Action Creators

Creating Apps is easy. In this section, we will

understand how CushyStudio works,
see how to create a custom deck
see how to edit your cards
see how to publish your deck on the library

5.1. How does `CushySudio` Work

On startup, CushyStudio connect to your ComfyUI server(s)
CushyStudio then scan you ComfyUI install and generates whole TypeScript SDK supporting all your custom nodes, assets, models instaleld, etc.
All your custom nodes, models, and images will be converted to enums, classes, helpers, etc, allowing you to create Apps with maximum type safety and completion. you can check the generated SDK at schema/global.d.ts.
- 👉 this file is updated after each ComfyUI connection.
- 👉 It means it will only be created after the first successful connection to your ComfyUI instance

5.2. What is an `Action` ?

An Action is a self containing

a widget definition ( "ui" function)
an execution logic ( "run" function)
- the "run" function will receive the widget value when you click the run button

Here is a very simple card that print the value you enter

card({
    ui: (form) => ({ name: form.str({}) }),
    run: (runtime) => runtime.print('Hello World')
})

5.3. What is an `Action` ?

A Deck is a folder containing

a list of Apps
a list of assets
a list of prefabs
some documentation about how to use those cards
some metadata for proper library indexing.

Decks are made to be shared.

You can download Decks from the Library panel
You can publish Decks from the Library panel

5.4. Create your first deck

click the [+ Create Deck] button at the top of the Library
enter your github username and deck name
1. 👉 your github username will be your dedicated namespace in the library
2. 👉 all your decks will live under the library/<username>/ folder
click [OK]
1. it will create those files
  1. library/<username>/<deckname>/readme.md
    - a readme file to explain what your deck is about
  2. library/<username>/<deckname>/cushy-deck.json
    - manifest that list all your cards for better library integration
  3. library/<username>/<deckname>/_prefab.ts
    - a file where you can place your prefabs.
    - it contains some example prefabs for you to build uppon
    - file starts with an _ so it's not listed in CushyStudio
  4. library/<username>/<deckname>/sample-card-1.ts
    - first sample action
  5. library/<username>/<deckname>/sample-action-2.ts
    - second sample action
Open the sample-action-1.ts card
click the [edit] button to open the card in vscode
- 👉 everything is preconfigure to run correctly in vscode and make you productive right away
- 👉 fo this, you need to open the whole CushyStudio folder within vscode
- 👉 (NOT just the action folder, NOR the action file itself)

card('demo1-basic', {
    author: 'rvion',
    ui: (form) => ({ positive: form.str({ label: 'Positive', default: 'flower' }), }),
    run: async (action, form) => {
        //  build a ComfyUI graph
        const graph = action.nodes
        const ckpt = graph.CheckpointLoaderSimple({ ckpt_name: 'albedobaseXL_v02.safetensors' })
        const seed = action.randomSeed()
        const sampler = graph.KSampler({
            seed: seed,
            steps: 20,
            cfg: 14,
            sampler_name: 'euler',
            scheduler: 'normal',
            denoise: 0.8,
            model: ckpt,
            positive: graph.CLIPTextEncode({ text: form.positive, clip: ckpt }),
            negative: graph.CLIPTextEncode({ text: '', clip: ckpt }),
            latent_image: graph.EmptyLatentImage({ width: 512, height: 512, batch_size: 1 }),
        })

        graph.SaveImage({
            images: graph.VAEDecode({ samples: sampler, vae: ckpt }),
            filename_prefix: 'ComfyUI',
        })

        // run the graph you built
        await action.PROMPT()
    },
})

An Card is a file containing

An UI definition (widgets, form, styles, default values, tabs, etc...)
A piece of code that runs your action
...And more

5.5. `Prefabs` so you don't repeat yourself

The simplest way to modularize your Apps is to build prefabs.

Prefabs allow you to re-use parts of your cards in other cards.
Prefabs allow you to re-use parts of your cards multiple times in your card
Prefabs are functions that can add widgets (ui part) or subgraphs (execution part).
Prefabs allow you to build complex cards very efficiently.

Best practices:

Usually, your Deck will contain one or many prefab files,
you can The main prefab used by the built-in deck here: library/CushyStudio/default/_prefab.ts:

5.5.1. prefabs are just functions.

👉 a ui prefab is a function that takes a formBuilder and returns a Widget.
👉 a run prefab is a function that takes a runtime and modify it's graph or perform other actions.
👉 a util prefab is an helper function that do whatever.

example:

// FILE: `_ui.ts`
import type { FormBuilder } from 'src/controls/FormBuilder'

// 📝 this is a ui prefab you can use in any card you want.
export const ui_startImage = (form: FormBuilder) =>
    form.group({
        items: () => ({
            startImage: form.imageOpt({ group: 'latent' }),
            width: form.int({ default: 512, group: 'latent', step: 128, min: 128, max: 4096 }),
            height: form.int({ default: 512, group: 'latent', step: 128, min: 128, max: 4096 }),
            batchSize: form.int({ default: 1, group: 'latent', min: 1, max: 20 }),
        }),
    })

5.5.2. Naming Conventions

5.5.3. Use a UI Prefab

To use a prefab in your card, you can simply import it and use it.

ui prefabs are made to be used in the ui function of your card.
run prefabs are made to be used in the run function of your card.
run prefabs are made to be used in the run function of your card.

// FILE: `card1.ts`
import { ui_startImage } from './_ui'

card({
    name: 'card1',
    ui: (formBuilder) => {
        return {
            a: ui_startImage(formBuilder), // 👈 HERE
            b: ui_startImage(formBuilder), // 👈 HERE
            c: formBuilder.int({ default: 1 }),
        }
    },
    run: async (flow, p) => {
        flow.print(`startImage: ${p.a.startImage}`)
        flow.print(`startImage: ${p.b.startImage}`)
    },
})

5.5.4. Execution Prefab

The resulting card looks like this:

5.6. Various Function notations

CushyStudio aims to be accessible to non-programmers, while still being powerful enough for advanced users. You don't need to know typescript to get started, you can just learn what you need along the way.

This section is not a typescript tutorial, but rather a list of points of attention you may need to pay attention when building cards if you're not a typescript develloper.

Be careful to understand those various notations for functions

5.6.1. the special `() => ({ })` notation to return objects in a single line

const fn = () => ({ a: 1 })
//               👆      👆

This is equivalent to:

const fn = () => {
    return {a: 1}
}

or to

function fn() {
    return {a: 1}
}

5.7. Publish your Deck

Publishing your deck/cards is easy!

When creating a deck, CushyStudio automatically
1. initialize the git repository for you.
2. configure remote to point to the GitHub repository with the same name as your deck 1.
Create a GitHub repository. (https://github.com/new)
Commit your deck files
1. you can one-click the publish button in your deck entry in the library
2. or youyou can follow instructions given by Git Hub on the new repository page
Open an issue asking to add your Deck to the Library.
- https://github.com/rvion/CushyStudio/issues/new/choose

SHOW EXAMPLE

cd library/rvion

git init
Initialized empty Git repository in /Users/loco/dev/CushyStudio/library/rvion/.git/

git add .

git commit -m "first commit"
[master (root-commit) 602fab1] first commit
 4 files changed, 146 insertions(+)
 create mode 100644 mask-face.ts
 create mode 100644 rembg.ts
 create mode 100644 replace-part.ts
 create mode 100644 test.ts

git remote add origin [email protected]:rvion/cushy-example-deck.git

Then open an issue asking there

6. Frequently Asked Questions:

In case you want to know more about the CLA, here are some answers to questions you might have: If your questions are not covered, you can take a look at the full FAQ: https://github.com/rvion/CushyStudio/blob/master/docs/FAQ.md

6.1. Q: Will CushyStudio remain open source and free?

A: Absolutely! I'm committed to keeping CushyStudio 100% open source and free to use as a tool. Create assets, art, games – you name it. It's your creation, and I'm just here to help you make it.

6.2. Q: Why the AGPL and not the GPLV3?

A: For now, CushyStudio is licensed under AGPL as I aim to guide the project towards sustainability. I plan to transition to GPLV3 in the future, once the project achieves a stable foundation. This choice is designed to safeguard the project and its dedicated community. Rest assured, utilizing CushyStudio for asset creation remains unrestricted. My primary intention is to prevent the unauthorized resale or commercialization of CushyStudio as a service.

6.3. Q: Any plans for a paid version of CushyStudio?

A: No, and that's a promise. CushyStudio will always be free and open source. While I do have plans to offer complementary services (like cloud GPU services), the core of CushyStudio will remain free for all. Again, I simply wish to prevent unauthorized resale or commercialization of CushyStudio as a service.

Thank you for your understanding and patience in going through this agreement. Together, let's make CushyStudio better for everyone! 💪🎉

couldnt-find-good-name / cushystudio Goto Github PK

cushystudio's Introduction