From ComfyUI to Web App hosted in the cloud in less than 5 minutes
In this guide, we're doing a walk-through on how to build this Web App using ViewComfy, it comes with user login, input customization, and multiple workflows. We're going to be using an IP Adapter workflow and Hunyuan Video with LoRAs.
You can also watch the step-by-step Video Guide
Setup ViewComfy App builder
To start using ViewComfy App builder, to install ViewComfy locally, you can go to this Guide that will guide you through the process.
The online editor is a great way to edit the UI, but the difference with the local version is that you can't run workflows.
Customize the UI
Download the workflow_api.json files from the following repositories:
And upload them to the ViewComfy App builder.
You can pick the inputs that you want to expose to your users by just deleting them, you can add preview images by adding image links to the preview image input.
Save your changes and go to the Playground tab and see what your app will look like.
if you click the Generate button ViewComfy is going to use your local ComfyUI instance to generate the image.
Multiple workflows in one app
A great feature of ViewComfy App builder is that you can add multiple workflows to the same app. You can do this by clicking the Add Workflow button in the Editor.
There you can drop the Hunyuan Video workflow and you will have two workflows in the same app.
(Vibe) Edit the input components
You can go further with the edition of the UI inputs, in the editor you can download the view_comfy.json by clicking Download as ViewComfy JSON.
The view_comfy.json file is a JSON file that contains the UI configuration for the app, you can edit it to change the inputs and the UI.
The ViewComfy App builder comes with a set of cursor rules that will make it super easy to edit the view_comfy.json file using your friendly LLM.
Example: edit the Title of the HunyuanVideo Lora Selectinput component:
Example: create a dropdown component with the available LoRAs:
In the Hunyuan workflow I have 3 different LoRAs that the user can choose from, so I want to create a select component with the available LoRAs. That component is not available in the editor but I can add it editing the view_comfy.json file but I'm going to ask the LLM to do it for me.
and the LLM edit the component from:
{
"title": "Lora",
"placeholder": "Lora",
"value": "studio_ghibli_hv_v03_19.safetensors",
"workflowPath": [ "42", "inputs", "lora"],
"valueType": "string",
"key": "42-inputs-lora"
},
to:
{
"title": "Lora",
"placeholder": "Lora",
"value": "studio_ghibli_hv_v03_19.safetensors",
"workflowPath": [ "42", "inputs", "lora"],
"valueType": "select",
"options": [
{
"label": "Studio Ghibli",
"value": "studio_ghibli_hv_v03_19.safetensors"
},
{
"label": "Fluid art styled animations",
"value": "fluidart-v1_hunyuanvideo_e28.safetensors"
},
{
"label": "Boring reality",
"value": "boring-reality-v1.safetensors"
}
],
},
if you drop the view_comfy.json file in the editor you will see the new component.
Example: Move from inputs to advancedInputs
You can move from basic inputs to advancedInputs by asking the LLM to do it for you.
Change the App name and picture
You can change the App name and picture by adding the following properties to the view_comfy.json file:
"appTitle": "pied piper",
"appImg": "https://rukminim2.flixcart.com/image/850/1000/jf8khow0/poster/3/g/w/small-silicon-valley-pied-piper-tv-show-poster-collection-original-imaf3r93tcdxgk4u.jpeg?q=20&crop=false"
Run your workflows locally or in the ViewComfy Serverless Cloud
ViewComfy App is versatile, you can run your workflows locally or in the ViewComfy Serverless Cloud. If you want to run the workflows locally you just need to click generate and the app will use your local ComfyUI instance to generate the image.
The advantage of running the workflows in the ViewComfy Serverless Cloud is that you can pick from a big range of GPUs:
- T4 16 GB
- L4 24 GB
- A10G 24 GB
- L40S 48 GB
- A100 40 GB
- A100-80GB 80GB, H100 80GB
and you will only pay for the time it takes to generate the image by the second.
Deploy your workflows in the ViewComfy Serverless Cloud and use it from ViewComfy App builder
To deploy your workflows in the ViewComfy Serverless Cloud you need to go to the ViewComfy Cloud and click on the Deploy Workflow button drop the workflow_api.json file and we're going to take care of installing all the custom nodes that your workflow needs and all the models that you need without you having to do anything.
Each workflow will come with the ComfyUI interface where you can interact with, use the manager to install extra nodes or more models from Hugging Face, CivitAI or your custom cloud storage like S3, GCP or Azure.
And with the URL of the Serverless API.
Create your API Keys and add the API URL to the ViewComfy
To use the API you need to create an API Key in the workflows page in the ViewComfy Cloud and add it to the ViewComfy App env. file.
Add them to the env. file at the root of the ViewComfy repository:
VIEWCOMFY_CLIENT_ID="3xYQy1XD6Oe5ZLE"
VIEWCOMFY_CLIENT_SECRET="S4ejVOlUOdcCKgdQ1pATTawObI3Wc"
Now you can use the API endpoint in the ViewComfy App builder, drop the view_comfy.json file and add the API URL to the ViewComfy Endpoint field.
Go to the Playground tab and click the Generate button, the app will use the ViewComfy Serverless Cloud to generate the image.
Deploy your ViewComfy App in the ViewComfy Serverless Cloud
The best way to deploy your ViewComfy App is to use the ViewComfy Cloud, you just need to drop the view_comfy.json file and you will get a fully working app hosted in our cloud, with user login/signup working out of the box ready for production workloads.
Go to the ViewComfy Apps in the ViewComfy Cloud and click on the Deploy App button
And in matter of seconds you will have your app deployed and ready to use.
Use the Invite Users button to invite your colleagues and team members to the app.
You can find the final view_comfy.json file in here view_comfy.json