Comfyui 101 Let's Build A Basic Front End UI!

Key Takeaways

Hello good people of YouTube. This is Compy 101 where we're going to create a basic pipeline. Now, if this happens to be your first video on my channel and you're new to Compy, this is not the video for you. I encourage you to check out part one all the way up to part 9 before you tackle this video. And we're going to move pretty quickly. Now, just to double check, I'm going to put on the screen the custom nodes that you need to build this workflow. Now the goal here is to create a very basic front end. Consider it more as an exercise and pretty much we have everything we need already here and I think we can do both standard generation and image to image. Now at this point we're just going to disconnect all these connections and we're basically going to take the sampler and put it on the right side. So let's disconnect all these for now. I think these ones are okay to leave. So, we're going to select these three. Put it on the right here for now. Everything here we're going to use for a basic front end. So, first let's disconnect flux guidance and we'll bring it over here for now. And we'll move the size picker and we'll bring preview image down here. So, the way I'm trying to think of this is that I want my prompt box to be at the top, the negative prompt just below. As we move further in this process, we're probably going to move a lot of these around quite a bit. We can leave these connected for now, but what we're going to add here, we're going to set the model input. So, add set node. And we're going to call this model with Laura. And we're going to connect that. And let's close it for now. Just leave it there. We can close these two. Let's put our flux guidance underneath. And we can put our size picker there. And let's put our preview image here. And this will be sort of our viewing interface here. And while we're at it, we might as well put a compare node for image to image. So let's doubleclick, type in image compare. The one we want is RG3. We've used this before and you know it with the image A and B. Might as well change the color now so it's uh easier to discern between the two. And we'll measure them up. Oh, I got we got to do the tabs. So, let's rightclick over preview image. Go under properties, enable tabs. We'll click on that. Let's rightclick again. Properties under has second tab. Let's click on that. Enable it. It's up to you if you want to rename preview image. Just doubleclick. But I do want to change send back to something else. So let's rightclick again. Properties. Second tab text. We'll click on that and we'll just put compare. Now we'll move this up a little bit. So now we can toggle between the two. So for conditioning on flux guidance, we want to rightclick set node and let's call this flux guidance. We'll connect that just to have visibility. We'll move everything to the left here. And basically what we're doing now is creating all our settings steps, cfg, scheduler, sampler, and then we'll connect it to the sampler. So let's go through all these first. So, we do need to connect this conditioning to our positive prompt. We may as well change this now. Positive prompt. Give it a color. Negative prompt. And we're going to rightclick set node and call this posos conditioning for positive not piece of you know what. And we're going to connect that. And we'll do the same for the negative prompt. NEG conditioning. So back to our flux guidance, we want to get node and select POSOS conditioning. There we go. For the empty latent size picker, we want to set that. And let's just call it latent. Connect that. Now, if you're getting a little lost, what we can do is look at the sampler to get some hints on what we need. So we already have model positive negative latent. We're going to need seed steps CFD sampler. Now while we're here, we might as well do this now. I don't think we've covered this before, but you can convert the nodes to have an input. And how you do that is you rightclick. You'll see an option here, convert widget to input. And then you see all of these we can convert. So convert to seed input. Now once we convert this you see it's going to give us an input. So let's do the same for all of these. Now we don't need to do it for dnoising because this is for standard generation but when we do image to image we'll convert this later. Awesome. Now let's go back and create those nodes. So double click and type in seed. The one that I like to use is from RG3. So click on the RG3 one. Looks kind of cool, right? We also need step. These few ones are optional. I'll show you two ways. Now, with the flux continuum nodes, if we rightclick in add node and look for flux continuum under sliders, you'll see there's d noiseise, step, guidance, batch, whole bunch of other stuff. So, let's choose step slider. It's up to you if you like this style of slider. I'm going to use it for now because it looks really cool. But if you're the type of person that likes to input the numbers if you notice here, and basically this node is an integer node. So if we doubleclick and type in integer, there's one here from Chris tools called primitive integer. And if we click on that one, you see that the input is both blue. So we can use it for the same thing. So instead of the slider, we can just put in like 20 steps. So, it's up to you if you want to input it or use the slider. For now, I'm going to use the slider because it's pretty cool. Okay, samplers andulers. So, if we double click and we type in sampler, there's your basic sampler selector. And then we can do the same thing for type inuler selector. There we go. Now, for CFG, I believe there is a CFG node called CFG literal. This should work. This node is known as a float node. It gives you a certain value, but it's range to a certain point. I think the max is 100. Yes, the max is 100 on this. But let's say for whatever reason you wanted a higher CFG, which is highly unlikely. The other thing we can do is type in float and just select the one from Comfy Core. So, we have our float primitive. And this one will allow us to go higher in terms of CFG, but again, highly unlikely we're going to need to go that high. And then we can just change the name to CFG. So, let's uh get organized here. I'm going to hit Ctrl A, rightclick, and just change the shape to box. And let's hide these guys behind. So, we'll hide this there. And you want to order it in the way where you work. So I typically would put guidance. So this stuff I'll put near the bottom. Uh CFG I'll put with flux guidance cuz they're similar. Then I'll put my steps sampler and scheduleuler. Don't worry about being too tidy and accurate at this point because you're probably going to want to move stuff around later. The next thing to do is follow the same exercise. We just need to set these so that we can pick it up in the sampler. So once again, rightclick, set node. We'll just call this CFG. We're going to connect that. Let's duplicate this one. We'll call this steps. Connect this. Duplicate this one. Call this sampler. Do the same thing for scheduler. Uh we already did this one. Yep. Seed. We still have to do. Yep. So, let's grab this guy. We'll call this seed connect. And did we miss any? Great. So, the same thing. We're going to hide them. Put them behind these nodes. We'll leave them for now. And then we're going to head over to the sampler. And like clockwork, we're going to set all of these up with get nodes. So, rightclick, get node. And for the model one, remember because we're using the Laura, we need to select the one that we called model with Laura. See there, model with Laura. We'll connect that. Close it. Put it here for now. For the positive input, we're going to select flux guidance. And I'll explain to you how this is going to work when we use SDXL. We'll close that off. And let's open this up and change this to negative conditioning. Duplicate. Close. And basically repeat the process. We're going to look for latent connect. Duplicate. Close the previous. Next is seed. Select seed. So you see why we set the front end first. You wouldn't be able to select anything if we didn't set it up. Right now, we're going to do steps, CFG, the sampler, and scheduler. Connect that. Close. Pretty cool. So, again, you can organize this any which way you want. I like to keep them sort of like that for now. And then here going to close this off. And actually I'm just going to leave this guy here. Okay. Now this is going to be a little bit different over the VAE decode. We're going to add a set node. And the way we name this is very important. We're going to go capital O and type output space dash space text to image. Now I'm going to do short form. So, txt to image. The space dash space and the capital O is very important. I'll show you why in a second. We're going to go ahead and connect this. Now, we're going to go back over here and anywhere on the workflow. Let's doubleclick. Type in output. You see this node output get? We're going to click on that. This is going to select each workflow that we build. So, if I click on here, you see there's this teeny drop-down for text to image. This is critical for this pipeline setup because this is what's going to select the workflow that we want to use. Image to image, controlling it, upscaling, whatever the case may be. And you can only use one of these per workflow. Now, in order for this to work, we need to add some nodes to this. So, again, let's doubleclick and type in image path. This is from the KJ nodes package. And we're going to connect image to image here. And we're going to set this as send. And we'll connect it like that. What we can do, let's hide these for now. And we'll move this guy over here. And then we'll hide these behind for now. Get them out of the way. So somewhere above this workflow, let's double click. We're going to bring up the same image pass node. We'll zoom in here. And the get node, we're going to select what we just set up, which was send. We want to connect that. This one, we're going to set and call this final. And while we're here, we might as well group this. So, select everything, rightclick outside of the nodes, add group for selected nodes. We'll just call this section final image. And we might as well do this here as well. We can call this text to image. Okay, one last thing to do. Let's move the compare node over. And then we're going to rightclick, add get node, and we're going to select final image or just final and connect it here. We're also going to connect that to image A for later when we do image to image. So once again, let's do a quick little test and make sure everything is working. And I think with these, we can just close them for now. We'll just leave them open, but close these two. I'm just going to test with SDXL because again, Flux bogs my system down. And I'm going to turn off the other models. Let's leave it at real cartoon. Make sure these are off. We'll just use the same prompt. Close these guys off. We don't need the Laura. We're going to toggle that off. Now, instead of bypassing, we can just make this zero since we're not using flux. CFG, let's make it six. 20 steps is fine. Oiler normal. 1024. All good. Okay. Fingers crossed. There we go. What we could do, see how we have text to image here? If we want to see the sampler, just click on the arrow and it's going to bring us to the preview here. That's the downside of doing this type of front end. You don't get to see the preview. So, having the bypass switch there, we can at least go here really quickly and come back to it. So, what I suggest doing is we're going to copy this one and put it at the side here. And we're going to arrange this a little better as well. So, we can now from this point just click on the arrow for AIO model. It'll bring us back here. And there you go. So, we have the start of a cool front-end interface. Now, we're not going to clean it up just yet. I want to do a few adjustments so we can at least do image to image. So, let's double click and search for load image. And then we're going to set this to load image. We'll connect it. We don't need load mask just yet. So we'll leave it empty for now. The other node we need is the image resizer. So let's type in image resize. For this input, we want to add a get node and select load image. We'll connect that. Close these off for now. And then here we want to set to image resize. And we can think about where we're going to put those nodes. I'm just going to put this underneath for now. And typically I like to have my load image node probably in this area here. So we'll just put it here. And we'll hide this guy behind. And this one we'll put underneath. Now, I'm not going to use this node just yet, but I'll set it up for later. So, my image is 832 by 1152. Yeah, right there. Interpolation. I like lensos. We're going to keep proportions. Leave that on always. And that should be it for the front end. Now, if we go back to the text to image area here, what we can do is basically just copy and paste this. So, I'm going to select everything. Actually, let's select the switch. You might have to hold control and select the border or the header up top. Hit Ctrl C to copy. Put your mouse just underneath. CtrlV. We'll move it just under. And we have to do a few tweaks here. Okay. Now, let's open up the latent and let's disconnect that. While we're here, let's doubleclick and add VA endode. Now, if you recall from previous videos, when we do image to image, we don't need an empty latent image node because the image is going to act as the latent image, right? That's what it uses. So, we can convert this one to image resize. There we go. And we're going to connect that to pixels. And then we're going to duplicate this and select VAE. And we'll connect that. And then we can connect the latent back to the K sampler. Now remember earlier we didn't use the D noiseise input here. But now that we're using image to image, we need a means to D noiseis. So we're going to rightclick convert widget to input and select D noiseise. So we have this input now. So let's doubleclick and type in D noiseis. Once again I'm going to use the D noiseise slider from Flux Continuum. If you just want to input the number, you can do the same thing we did with CFG by using a primitive float. Let's close this guy off and slide this over here. And let's actually make a bit of room here so we can fit the other nodes. And then we're going to take our D noiseis slider and bring it over to this side here. So let's rightclick set node. We'll call this D noiseis connect. So, we're going to do the same. Get node, select D noiseis, connect it here. So, let's test it out. I'm going to upload a different image. I'm going to upload this guy. Actually, we need to do one more thing here. We need to convert this guy to image to image. So, we're just going to change the text to image to image. There we go. So, now we want to change this. You see now we have text to image and image to image. All right. So because we have two workflows now standard generation and image to image since we changed that output switch it's only going to use this workflow. So let's set our D noising slider to 7 so that it's really obvious. I'm still going to go SDXL just because it's faster with my setup. And everything else I guess we can leave the same. And let's go ahead and click run. Awesome. Now, what we didn't do actually was put the load image here. So, we're going to do that. Rightclick, get node, load image. Connect it to B because we want to do a before and after, right? So let's uh just put this on top so that we can make sure it's working. And let's try that again. There you go. So we can do a compare. Now we have the slider or we can do the click view, but I'll leave it for now. Yeah, everything is working. Now one thing I realized I use the preview image because when we do more the advanced pipeline, there's a way to set up the output differently. So right now we're not saving any of the images. So I think just to keep it simple, we're going to delete this node and we're going to use a save image node now. So that way at least if you want to use this workflow, we can just put our folder address here if we wanted to. But again, once we do the more advanced one, I'll show you how we can use the preview image. But we'll set it up the same way. And I'm going to enable the tabs here. So now it's going to save whatever we generate. Now before you tidy it up, what I suggest is that you save it. Name it whatever you want. I'm just calling mine basic pipeline. Confirm. Going to overwrite. And that way I can come back to it. So here is where you could start kind of fiddling with the setup just to get a feel of how you want it to look. So, I'm just going to do a quick time lapse of how I'm going to set this [Music] up. All right. So, it's not exactly even, and that's fine. Just keep in mind that if you're going to add upscaling, control it in painting, we're going to have a lot more of these nodes to fill up the space. So, don't fall in love with your initial setup. just have it neat enough where you can actually work from it. And one last tip is that we're gonna do sort of a naming convention here. Final image, we're going to put a one before it. Text to image, we're going to put a two. We're going to call this image to image if you haven't already. And we're going to put three. And then what we're going to do over our bypass switchers, we're going to rightclick, go into properties, and under sort, we're going to change position on the drop-down, select alpha numeric, and that way it puts all the workflows at the top, and it'll keep the models at the bottom. These will always be on. You're really only going to use this switcher for the model that you want to use. Now, we'll have to do it for the rest of these, or you can just duplicate the other one. I'm just going to change it manually. And let's go back over here. Now, as I said, this is a little overkill for these basic setups, but you can imagine when we add more things like inpainting control net, you can have a very functional front end all on the same workspace. But eventually we're going to aim for something like this where we're actually creating a pretty complex pipeline. I don't know if I said it in the beginning, but this whole video has been inspired by the developer of Flux Continuum. I'm going to leave a link to his video if you want to try out his workflow. But this is how I learned how to do this. This exercise that we went through today is the foundational basis to understand how to create a pipeline. And to be honest, I'm still kind of putting my head around it because there's many ways to make this more efficient. Now, if you happen to come across this video and you're totally confused, there are 10 other videos to watch in this series called Comfy 101. Make sure to check them out. They should be on the screen right now. Until that next video, my friends, I'll see you when I see you.