BUILDING INTERFACE

Interactive Setup

Making the backhand and frontend system seems a bit too unrealistic considering the short period of times I had. I gave it a try, and it seemed unrealistically impossible to code this as I had no idea on the resources I need to download. I was afraid that I might even ruined the whole workflow because of this. The comfyUI community is also very active, hence, changes on the nodes are very much updated. I need to be careful when deleting or installing the missing nodes that I have built as it will messed up the workflow.

Hence, I decided to go for a plan B. This plan will involves me creating the interface inside the comfyUI interface program itself. I know it sounds absurd and unreasonable.

How will I make it understandable? how can the visitors navigate through the interface without knowing the program?

Well, this would be my challenge to make it accessible and understandable for the viewers to navigate. I could make use of the materials I have and transform them into something visual, such as using the node boxes as vectors and the default colors to make contrast between each canvas.

Basically, I will treat the program as an illustrator program, where I work in iterative process and make multiple outcomes with the materials I have.

There are customization features that I can take advantage of within the program. Although its limited, I thought this would be a fun process to work with a program in unconventional way.

Graphical Elements

I began by re-organizing my workflows. The first objective was to hide the unecessary elements such as, the model loader and text encoders (stuff that will stay the same and are unlikely be tweaked during the generation process).

Nodes as Graphic Vectors

I had to find a way to hide the unnecessary nodes. To do this, I used the nodes as a vector box to hide the widgets and parameters except for the preview images and videos. I further played around with the boxes to create types, borders and arrows, to create visual instructions of what these nodes are.

I can also adjust the lite graphs shapes (wires) into straight, linear and spline shapes. I tried to create types by connecting the wires into the boxes, writing the letters “C.M.E.” After further tweaking and playing around I decided to go with just using the text boxes without the lite graph to create the types for my interface.

Default Colors

I thought the way the default colors look on the interface are quite nice. There are two different tones on it. Using the function that are used to group up the nodes, I made it into the canvas background. I decided to use 3 colors for the canvas: cyan, green and purple. Each canvas will function as a slide-show presentation: Introduction, Process, Input, and Output.

This process has helped me to build the visual identity of my project. The types that I have made with the node boxes, and the default colors that I used that have a specific style to it. It all makes more sense to me, and to others.

Navigation

In order for people to navigate through the different canvases that I made, I decided to use the arrow keys as buttons, treating them more like presentation slides. As it would be impossible to fit everything in one canvas, I thought that this was the best option to make it easier and straightforward for people to interact with the interface. One complication that I thought of was that people might zoomed in and out in accident. To avoid that, I hope people would just read the instruction before interacting with the interface.

Setting Up for Open Studio

Overall, I felt satisfied with the outcomes I have created so far. For most of the times, I struggled with presenting my outcomes to people. Curating my works for the open studio made me realized how important it is to format your works in different mediums.

Although the works are complete, there were certain things that I wished it could have been better due to the space that I occupied. However, these things are beyond my control, such as the narrow space, little light, and the concave wall where the projector screen was on.