ZetaForge Use Case Example: A Multimedia AI-generated Storybook — Part II

Zahra Golpayegani
Zetane
Published in
5 min readJun 13, 2024

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:

  1. Story Generator
  2. Illustrator
  3. Narrator
  4. Book Creator
  5. 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:

ZetaForge main window.

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:

Running your first ZetaForge Pipeline; the Canny Edge Core Pipeline example.

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:

A completed ZetaForge Pipeline (Canny Edge) with visualizations.

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.

Continue to Part III

--

--

Zahra Golpayegani
Zetane
Writer for

Computer scientist and machine learning engineer