KatUI

Welcome to KatUI simple documentation. Sorry that I do not have time to launch a dedicated documentation page. So I will put everything in this single webpage.

Installation

Coming soon.

Using KatUI

File Structure

Your repository should look similar to this

.
├── katzuki
│   ├── package.json
│   ├── package-lock.json
│   ├── README.md
│   ├── requirements.txt
│   ├── run-backend.sh
│   ├── run-frontend.sh
│   ├── run.py
│   ├── run.sh
│   ├── src
│   │   ├── App.test.tsx
│   │   ├── backend
│   │   │   └─── ...
│   │   ├── folder_paths.py
│   │   ├── frontend
│   │   │   └─── ...
│   │   ├── index.css
│   │   ├── index.tsx
│   │   ├── main.py
│   │   ├── nodes
│   │   │   ├── KatUIDebug
│   │   │   │   ├── debug.py
│   │   │   │   ├── debug.tsx
│   │   │   │   ├── main.py
│   │   │   │   └── requirements.txt
│   │   │   └─── math.py
│   │   ├── react-app-env.d.ts
│   │   ├── reportWebVitals.ts
│   │   ├── setupTests.ts
│   │   ├── storage
│   │   │   └── 000000000000000000
│   │   │       ├── input
│   │   │       ├── output
│   │   │       └── workflows
│   │   │           └── MVDreamNew.kat
│   │   └── workflows
│   ├── tsconfig.json
│   └── yarn.lock
├── LICENSE
└── README.md

On Linux, you can execute ./run.sh to launch both backend and frontend. Or, you can launch backend/frontend separately by running ./run-backend.sh and ./run-frontend.sh in two different terminals.

All plugins are installed under katzuki/src/nodes/ directory. Some plugins contain multiple files (e.g. KatUIDebug) and others is just one single python file (e.g. math.py).

All workflows are stored under katzuki/src/storage directory. For example katzuki/src/storage/000000000000000000/workflows/MVDreamNew.kat is a workflow that you can load on KatUI. You can load MVDreamNew.kat by pressing Load button and select Open on KatUI. All workflows ends with .kat.

The 000000000000000000 is a discord user id of a special type. Every workflow, input, or output under this user id will be shared accross all users. So 000000000000000000 is a public directory. In contrast, since we allow multiple users to use the same KatUI backend, if a workflow is under 330717357452427266, only this user can see the workflow.

Making Plugin

Lesson 1: Creating a Add Node

Let's walk you through how to implement a hello world plugin that does basic addition.

Firstly, create a directory under katzuki/src/nodes/. For example, we create YourPluginName directory like this:

.
└── katzuki
    └── src
        └── nodes
            └── YourPluginName
                ├── debug.py
                ├── debug.tsx
                ├── main.py
                └── requirements.txt

Then create a your_file_name.py and requirements.txt (optional)

.
└── katzuki
    └── src
        └── nodes
            └── YourPluginName
                ├── your_file_name.py
                └── requirements.txt

Then you can create a node in your_file_name.py. Copy paste the following code in your_file_name.py

from typing import Union
from backend.loader.decorator import KatzukiNode
from backend.nodes.builtin import BaseNode


class AddNode(BaseNode):

    @KatzukiNode()
    def __init__(self) -> None:
        pass

    def execute(self, a: Union[float, int, complex], b: Union[float, int, complex]) -> Union[float, int, complex]:
        return a + b

For requirement.txt, you can leave it empty for now since we don't need KatUI to automatically install any dependencies (we don't have dependencies).

Then, restart KatUI, you should be able to use your AddNode.

Lesson 2: Conventions and Tips

I will explain what is happening in your_file_name.py:

• BaseNode: you inherit BaseNode so that we know AddNode is meant to be loaded as a node.

• @KatzukiNode(): this is a decorator that must be added on top of your __init__ function of your node. By providing optional arguments, you can customize your node author, description, and many more things.

• def execute: you must provide a execute function and should name it exactly. This is the main function KatUI will run when you execute this node.

• a: Union[float, int, complex]: a is a argument provided to the node and Union[float, int, complex] is the type of argument a. Every argument must be typed or else your node will not be loaded correctly. See following sections if you want to use *args and **kwargs.

• -> Union[float, int, complex]: returning type of AddNode. It must be typed or else your node will not be loaded correctly. See following sections if you want to return multiple variables.

Large Plugin and Importing: If your plugin gets large, you want to separate your code in multiple files. You can create arbitrary many layers of directories as you like.

Importing Within and Across Plugins: You can import stuff in your plugin by from nodes.YourPluginName.your_file_name import AddNode. You can also import stuff from other plugin by doing from nodes.OtherPlugin.other_file_name import other_stuff. Since YourPluginName might be used in import by other plugins, it is recommended that you plugin name does not contain any special characters such as - which will be interpreted as minus by python. If you want relative import, put a __init__.py file in the directory and KatUI will register that directory as a package. If other plugin you want to import has a __init__.py, you can also do from OtherPlugin.other_file_name import other_stuff. Therefore, it is a good practice to create __init__.py.

Which File Will KatUI Load: KatUI will load all class as node if they inherit BaseNode. KatUI will not load any file that starts with _ or . (e.g. _will_not_load.py, __init__.py, or .some_folder/will_not_load.py) as nodes. However, if __init__.py presents, KatUI will register the directory as a module so that you can do relative import. You can also prevent KatUI from scanning into a directory and its subdirectories by adding .katignore file to the directory or by naming the directory starting with _ or .. (e.g. adding empty some_folder/.katignore will prevent detecting some_folder/will_not_load.py and some_folder/__init__.py)

Loading Order: KatUI will load files in outer directores first before going into subdirectories.

Lesson 3: Sharing Your Plugin

To share your plugin, you need to make your plugin into a separate repository. To do so, open a terminal in katzuki/src/nodes/YourPluginName and type git init. Then upload it to github. Make sure your repository is a PUBLIC REPOSITORY. Then, you can directly install it using PluginInstallerNode and select Plugins Repo tab. Type in your url and hit the + sign, it will automatically download your repository in the correct place.

To allow others to see your plugin without manually type in the url. Open a issue in Here and we will add your url to src/backend/nodes/remote_plugins.py.

Lesson 4: Making a More Complex Node

Coming soon.

Lesson 5: Making Custom UI in Typescript

Coming soon.