SpriteDX

In the last post, we decided to descope Playground from V1 version of SpriteDX. We have a bigger vision for Playground and we want to decouple it from the first launch.

The primary focus is to get some early user feedback on the pipelines early before we add new auxiliary features.

We’ve set an alpha release date to be 12/23. And I need these things done:

Character Pipeline
Progress Bar
Pipeline Editor
SpriteDX Package bundled with a ComfyUI bundled.

The next big thing in the list Pipeline Editor, but today, I will focus on Progress Bar. as I have less than 2 hours today.

Options

The Pipeline runs multiple ComfyUI workflows, and thus, it will take some time before the final output is ready. So, having a good progress bar is a must.

We considered a few options before:

Option 1: Having a progress bar on top of Generate button

Here is a mockup. Since the generation button is there, this feels like the natural place for this.

Option 2: Having the progress showing up as an spinner item in the Files Pane

Here is a mockup. This now shows the spinner on the folder that has ongoing generation. This is closer to how most of the other image generation tools like MidJournery does.

Given that our generation is multi-stage process, and that we may need to support multiple concurrent generations in the future, the Files Panel is the most flexible.

Also in mobile layout when user taps on Generate button, we would want to transition to Files panel and display the spinner there that something is being generated there.

Trade off is that user won’t be able to see the “% of progress“ clearly because we would simply be showing a spinner. We could replace it with a round progress bar, but since we are generating multiple files, progress bar on that that single file item will probably only be relevant to one single item.

Another tricky thing is that we will have to know, in advance, what specific files are going to be generated. It’s doable but not as obvious as packing everything into one linear progress bar.

Verdict

In my mind, I think we need to do both. The progress bar on top of Generate button will show overall progress and give a feel of ETA.

The progress bar on Files Panel will be informing users where their generated files will go.

For Today, I will work on the progress bar on top of Generate button.

Implementation

As part of progress bar implementation, we are introducing concept of “Jobs“ and “Tasks.”

export interface Task<I, O> {
  startedAt?: number;        // ms
  expectedDuration?: number; // ms
  completedAt?: number;      // ms
  message?: string;          // status text
  handler: (prevResult: I) => Promise<O>;
}

type AnyTask = Task<any, any>;

type CheckChain<Ts extends readonly AnyTask[]> =
  Ts extends readonly [Task<infer I1, infer O1>, Task<infer I2, infer O2>, ...infer Rest]
    ? [O1] extends [I2]
      ? Rest extends readonly AnyTask[]
        ? [Task<I1, O1>, Task<I2, O2>, ...CheckChain<Rest>]
        : never
      : never
    : Ts;

export interface Job<Ts extends readonly AnyTask[] = readonly AnyTask[]> {
  tasks: CheckChain<Ts>;
}