ZetaForge Use Case Example: A Multimedia AI-generated Storybook — Part II
We’ll take a simple, yet complex example. Imagine you want to teach a something to your kid, but not in the most obvious way; you want to use a story! You want the story to be personalized based on the kids likes and interests so they can connect to it. To make it more exciting, you want to use AI to generate the story, draw the illustrations, and add audio to the book. To put all the pieces together and make a storybook that is accessible online, you would want to create the book using whatever technology you want (we’ll use a simple HTML-based layout) and deploy it somewhere (to make it easy, we’ll use GitHub Pages). Let’s list these components:
- Story Generator
- Illustrator
- Narrator
- Book Creator
- Deployer
Okay! Now that we know what we want to build, let’s jump into code.
Installing ZetaForge
ZetaForge lives here: https://github.com/zetane/zetaforge.
After setting up your Python virtual environment, you can install ZetaForge using pip:
pip install zetaforge
Or, if you feel fancy, you can install the dev version by cloning the repo and installing ZetaForge from the source:
git clone https://github.com/zetane/zetaforge
cd zetaforge
pip install .
Launching ZetaForge
💡 ZetaForge uses Kubernetes under the hood. To use ZetaForge, you need to have Docker installed and have Kubernetes enabled on your container runtime. For example, if you are using Docker Desktop, you should follow these instructions to enable Kubernetes on Docker Desktop.
💡 If you are on a Mac, we recommend you to use OrbStack. It is a fast and convenient alternative to Docker Desktop.
If you installed with pip, launching ZetaForge is as simple as running the following command:
zetaforge launch
For the more experienced dev users, you need to start the frontend and the server separately. To start the server, simply run:
go run .
And to start the frontend, enter the following lines of code:
cd frontend
npm install
npm run dev
Now, you should see something like this:
You may see the window in the dark mode. You can switch the theme from Settings
on the top menu.
There are some other options on the top bar, including File
which is the menu we use when we want to save/load a Block/Pipeline or create a new workspace. Under Settings
, we can optionally set an OpenAI API key that can be used for AI-assisted coding as we see shortly. The Help
tab is also there to give you quick access to learning resources and official documentation, the community Discord channel which is where you can ask all your questions, and a link to the GitHub repo. We will get back to the rest (Run
, Rebuild
, andLog
) later.
We have the Block Library on the left side, which has two tabs; Core Blocks and Core Pipelines. The Core Blocks tab includes a few Block examples that we thought were mostly useful, and the Core Pipelines tab includes example Pipelines that you can run right away.
Running Your First Pipeline
Head to the Core Pipelines tab from the left sidebar, and drag and drop a demo Pipeline to your workspace. For this example, we use the Canny Edge Pipeline. As you are probably familiar with, Canny Edge is an edge extraction algorithm. It takes in minimum and maximum threshold values and extracts edges from objects in an image. We modified the code and added a step value as well to see multiple steps of the edge extraction.
To run Canny Edge, pick your favorite image using the File
Block and provide some values to range_min
, range_max
, and step
, as shown in the image below:
Now, click on the Run
button to run the Pipeline.
You can see the Log window pop-up. The logs are always accessible by clicking the Log
button on the top menu.
Wait for a few seconds until you see the Status: Completed
line. This means that the execution was successful. You will now see a preview of Canny Edge output in the previously empty box on top of the View Images
Block, as shown below:
If you want to enlarge the visualization, click on the little eye icon on the View Images
header; an HTML-based image viewer with Canny Edge outputs will open in your browser. You should see something like this:
This was just an example, but imagine it was a Pipeline with multiple components (aka, Blocks) that your colleagues have built. Running that pipeline would just be as easy as this example! No complicated installation process, no package dependency incompatibilities, and no time wasted.
Now that we have run our first Pipeline, let me take advantage of this example and show you something cool.
If you want to see the source code of the Canny Edge Block that we just used, you can click on the code icon (</>) on the Block header and view the code, or edit it to try something else. All the code is accessible and editable on the platform with a click.
ZetaForge is not low-code. It’s full-code.
I will get back to how you can modify a Block or even create your own customized block next.