Skip to content

jimmm-ai/TimeUi-a-ComfyUi-Timeline-Node

Repository files navigation

TimeUi a ComfyUI Timeline Node System

Warning

The project is still in its early stages and there is no usable node at the moment. The only code available was made in HTML, JS, and CSS for the purpose of the presentation video of the project idea. I am still looking for developers to contribute to the project. I just pushed a very early code for the final node.

Track and follow how the project evolves from an idea to a fully functional node for ComfyUI!

Introduction

Hi everyone,

I've been working on the UX/UI of a timeline custom node system for ComfyUI over the past two weeks. The goal is to create a timeline similar to video/animation editing tools, without relying on traditional timeframe code. You can effortlessly add, delete, or rearrange rows, providing a streamlined user experience.

TimeUI_global.mp4

Image Upload and Management

Users can upload images directly into the nodes or attach other "upload image" nodes, simplifying the workflow. You can also add a second instance of the timeline within the same row, allowing you to loop images for easier management of complex animations. For example, seamlessly loop a repeating background or sequence within your animation.

TimeUI_Img_management.mp4

Customization and Settings

Each row in the timeline includes various settings for customization. Toggle the visibility of image masks with a click, enhancing control over image adjustments. Nodes can work independently or with other external nodes. Easily toggle settings like IP adapter, Image Negative, Attn Mask, Clip vision, Mask, and more to fine-tune outputs.

TimeUI_Settings.mp4

Time Format and Duration

You can change the time format of the timeline and the animation duration, in frames or seconds. The nodes will update the time formats in the timeline ruler, displaying the number of frames or seconds that each image takes on the timeline handler.

TimeUI_time_format.mp4

Bezier Curve Feature

At the bottom of the nodes, there is a button to view the Bezier curve result of the current timeline, similar to the "KfCurveDraw" nodes. This feature is still under design.

TimeUI_curves.mp4

Call for Collaboration

This project is a work in progress, and I welcome any suggestions or contributions from the community. Let's collaborate to make this a powerful tool for everyone!

I have created a GitHub repository for this. Since I am not a professional developer, I developed this in HTML, JS, and CSS with the help of ChatGPT for the purpose of the video presentation. I really want to find the right community ready to create this with me.

I know these are not the right languages to code a node, which is why I need the community to build this with me as an open-source node.

I am not very familiar with common GitHub practices, so if someone has experience in ComfyUI node development and can become my sidekick on this project, please send me a message.

Vision and Inspiration

I believe these nodes can bridge complex node setups and a full web UI, making it easier for less experienced users to get started before moving on to more advanced solutions. This idea came from using workflows by various developers over the last two months.

Feel free to contact me! Don't hesitate to reach out and tell me if I am doing something wrong with this platform's habits. Let's make something amazing together!


MIT License