I Stopped Paying for AI Image Generation
Claude Code TutorialsFresh📅 2025-12-02
Tutorial Overview
┌─────────────────────────────────────────────────────────────────────┐
│ LEARNING PATH │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ LEARN │
│ ───── │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ Watch │───►│ Understand │───►│ Follow │ │
│ │ Tutorial │ │ Concepts │ │ Along │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ PRACTICE │
│ ──────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Try It │───►│ Experiment │ │
│ │ Yourself │ │ & Adapt │ │
│ └─────────────┘ └─────────────┘ │
│ │ │
│ ▼ │
│ MASTER │
│ ────── │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ Build │───►│ Share & │ │
│ │ Your Own │ │ Iterate │ │
│ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘Key Takeaways
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] In the previous video, we built this AI image generation app using Claude Code and Nano Banana Pro. Now, of course, Nano Banana Pro is a paid service. So in this video, I wanted to show you free alternatives that you can run on your own machine for unlimited times. Now, just to recap what this app does, you can create avatars that you can reuse throughout your application. So this means you can simply create a new avatar, give them a name, a description, and upload a reference image. We can then use the image
[00:30] generation model like Nano Banana Pro to create images using that reference character. It also helps us to construct this prompt by giving us all bunch of presets. So from the scene settings, we can select a style like photo realistic, we can select something like the location, the lighting, then on the subjects, we can add a subject, we can select from our avatars, and then select things like the poses, action, we can set clothing, expressions, hair, etc. Then from this middle section, we
[01:02] can save presets, and we also get a preview of what that final prompt actually looks like. We can set the amount of images that we'd like to generate, the resolution, the aspect ratio, and finally, we can generate the images by clicking on generate. And finally, we can view all of our generations in our gallery. And as you can see, these generations look fantastic. And they are using our reference character, even when generating 3d rendered images, you can see all the characteristics like the tattoos in these images as well. I mean,
[01:33] just look at how realistic this looks. Nano Banana Pro is insane. But did you know we can actually do something very similar on consumer grade hardware. And this is completely free and local. We can install an app called comfy UI on our local machines. From here, we can provide a prompt, and we can actually copy the exact prompt that we used in Nano Banana. And of course, we can upload our reference image. So it's the exact same image that I used with Nano Banana. And then we can generate our image. And after a few seconds, we do
[02:05] get our result. And I mean, if I switch between Nano Banana Pro, and the generation from this free model, I think it looks absolutely insane. All the details are there, as well as that too. So in this video, we'll do something fun. We'll have a look at setting up comfy UI on our own machines. And then we'll use a coding agent like Claude code to edit this app. So no longer uses Nano Banana Pro, but instead uses comfy UI. So with all of that out of the way, let's set up comfy
[02:35] UI. Simply go to comfy.org, and then download and install comfy UI for your operating system. So when you start comfy UI for the first time, it might prompt you to download a few models, you can simply go ahead and do that. But after downloading all those dependencies, what you need to do is go to this menu, then go to browse templates. Now comfy UI gives you access to a bunch of really cool workflows, including image generation and video generation models. Now what we want is a workflow that allows
[03:05] you to edit images. So at the time of recording, I would recommend other flux to dev or the screen image edit model. They are both really good. Now I do want to mention that ZImage Turbo is also getting a lot of traction lately. But this is just an image generation model, it doesn't allow you to edit images yet. But they are going to release ZImageEdit in the near future. So definitely keep an eye out for that model. For now, let's simply go with either flux to dev or crane image edit.
[03:37] When you click on this workflow, you will have to download all the models. And afterwards, you'll be able to use this workflow. So let's just give it a spin. I'm going to upload an image like this reference image. And then for the prompt, let's just say, make your dress red. Let's run this. Now this is not a comfy UI tutorial. In fact, we won't spend much time in comfy UI at all. We're simply going to download these workflows and the models. Now depending on your hardware, you might want to use crane image edit instead of flux to flux to
[04:09] really is the larger of the two models. Alright, so narrative generation completed, we can click on Q and the dress was indeed changed to red, keeping all of the other characteristics. So what we need to do is save this workflow. So you can either just press control is or simply click on the menu file and save as and I'll just save it as image flux to now that's actually all we need at this stage. Next, let's move on to setting up our project. Now instead of
[04:39] reinventing the wheel, we'll actually just copy the same source code that we built in the previous video, we'll simply edit it and remove all the references to nano banana and point the image generation to comfy UI instead. So what you need to do is go to this get up repository for this nano banana pro prompt generator, then go to code and you can simply download the set file and extract its contents. Or if you've got get installed, all you have to do is clone this repository and then simply open up that project in your
[05:10] code editor. Then all we have to do is install all the dependencies. So you can simply run npm install, or I'm just going to run p npm install. Alright, after all the dependencies have been installed, I'm going to initiate this as a get repository that will allow us to create these checkpoints. So let's run git init, then I'm just going to go to source control. And let's just give this a description of init. And let's commit this. Cool, we don't have to publish the branch at this stage. Now
[05:41] let's try to run the dev server. So I'll just enter p npm run dev. Let's go to localize 3000. And here we can see our nano banana pro app. Of course, at the moment, we don't have any images, and we won't be able to sign in either because we haven't set up any of the auth credentials. Now let's discuss the changes that we want to make here. First, we don't need to use authentication, I'm simply going to run this application locally on my own machine. But of course, if you want auth, even if the project is running locally, you can do that as
[06:13] well. Simply follow along with setting up authentication in the previous video in cloud code, let's say, all right, so I want us to make drastic changes to this application, we no longer need to use auth. So please remove any logic related to authentication. Also, we don't need a homepage, the generate page should become the default page. This also means you have to remove any authentication tables from the database, and remove any user columns from any of
[06:43] the tables, we actually don't need to have any specific user references, just assume that all images that are generated are technically public. All right, so I'm just going to go into planning mode and ensure that thinking is on. Let's send this. Right, so now we have to answer a few clarifying questions. I asked you to Google AI API keybehandled without per user storage. All right, so this is important, we actually won't be using the Gemini API anymore. So I'll go with option three, and just
[07:15] say something like, we actually won't be using the Google AI API, or the Gemini SDK in this project anymore. So you can remove those dependencies as well, and simply stub the image generation step. All right, so let's send that the app currently has a like feature where users can like public images without user authentication, likes cannot be tracked per user, what should we do? Let's remove likes. Should we keep the
[07:46] gallery page at all? Currently, it shows my gallery, like the users images and public gallery, all public images without users to know my images concept. Let's go with option one, a single public gallery, then it's about these answers. All right, so we have our implementation plan. Okay, so I think we can actually go ahead and work with this plan. So I'll go to keep planning, as we don't want to make the actual changes in the same context window.
[08:16] Instead, we'll store this implementation plan in the project folder, we can do that by running this create feature command. So let's run this, the agent will simply look at our conversation up until now, and then create a new subfolder in this specs folder. And within the subfolder, it will create a requirements document, as well as our implementation plan. All right, cool. So we've got our implementation plan, which is sped up into phases and actionable tasks per phase. This means we can now free up
[08:47] the context by running the clear command. And now all we have to do is drag in this folder. And it's a, hey, please copy it and implement all of these phases, mark the tasks as complete once you're done. For complex implementation plans, I'll usually just implement one phase at a time. But I think these changes are small enough for the agent to get it right in a single context window. And by the way, do you like these types of projects, please let me know in the description below. And if you want to support my work, hit the like button and
[09:18] subscribe to my channel. Also go ahead and click that hype button and see what it does. So I'm just going to clear the chat. And something I always like to do is to ask the agent to do a code review. So I'll just pull in that folder again. And it's a, hey, we just finished implementing this feature, please do a thorough review of the code and resolve any critical issues. So I'm running cloud code in a dedicated terminal window at the moment, as cloud code seems to crash my IDE recently. And I'm not really sure what
[09:49] the problem could be. So you don't have to use a dedicated terminal window as I do, you're very welcome to use the integrated terminal in the IDE. Or of course, you can use something like cursor or whatever else. Our homepage is gone, and we can no longer sign in or sign out. That's perfect. And we still have all of these presets and the prompt builder. And we still have our gallery page and our avatars. Alright, so during this change, we made a lot of changes to the database, we removed all of the auth tables and any references to users.
[10:22] So what we need to do is migrate all of those DB changes. In fact, we actually still have to set up our database. So just like with the previous video, we will be using Docker desktop to host our local database. So simply install Docker desktop. And back in our project, let's look for this env.example file, then rename this file to .env. Then in this file, let's look for this Postgres URL variable. And we're just going to make one small change at the end of the file.
[10:52] Instead of dev, let's call this something like flux2, or comfy, or whatever. And let's copy this database name, let's save this file. Then let's also look for this docker compose file. Then look for this Postgres DB name, and let's replace this with a new database name. Then I'm just going to open up a new terminal session, and let's run Docker compose up dash d. This will create and start our new database. And if we switch over to Docker desktop, we can indeed see our
[11:24] new Postgres database. Now let's migrate all of this database changes to our database. So for that, we can run pnpm run DB generate, and that was successful. And then let's run npm run DB migrate. Right, so the migrate step is actually giving us this error. So I'm simply going to copy all of this. Let's go back to cloud code. And I'm going to clear the conversation. And it's a, hey, I'm getting the following error message when trying
[11:55] to migrate the database changes to our database. And it's based this and it's around this. All right, so agent actually made a few changes. So I'm just going to get the agent to do this migration, please can you run the DB migrate and generate commands? All right, cool. So the database migration was done. And by the way, if we wanted to see the contents of the database, we can just run npm run DB studio. And that will give us this URL. And if we open
[12:26] this, we can see that all the user tables were indeed removed. So we only have our avatar and generated images tables. So this is a small change, but I do want to rename the app. So I'll just say, hey, please rebrand the app to comfort UI image generator, or you can call it flux to image, gen, whatever you want. All right, so the branding was indeed changed. It's now called comfort UI image generator. Now let's just see if the basics work. Let's go to avatars.
[12:57] Let's try to create an avatar. I'll simply upload this image. Let's give our character a name like Luna. For the description, it's a female model 30 years old, long dark hair, arm tattoos, and let's create this avatar. And it seems to have worked. So if we refresh this page, our avatar is still there. Cool. Let's go to generate. And let's see if we can save presets. So for the style, let's go for photo realistic. And for the location, let's go with urban city for the lighting. Let's go
[13:29] with natural light for the camera and composition. Let's go with close up and under subject. Let's see if we can select our avatar, which we can then for the pose, let's do something like arms crossed for the action. Let's do smiling. And I'm just going to leave the rest on the default values. Then it saved this preset. I'll just call this urban city with Luna. It saved this. And that seems to have worked as well. If we refresh the app, we can go
[14:01] to load presets and we have our preset. Now at the moment, the image generation feature won't work because we haven't actually hooked it up to anything. We're simply starting the image generation process. So that takes me to the fun part of this video. We're going to call our comfort UI workflow to generate the image. So in comfort UI, open up your workflow, then go to menu, go to file and export API. Now if you don't see this option, what you have to do is go to
[14:31] settings and enable dev mode. This will allow you to export these workflows as APIs. Otherwise, let's export this and we can give it a name and then save it somewhere on our machine. What we can do then is move this file to our project. So what I'm going to do is open our project, then I'll just go to docs, technical, I'll just get a subfolder called comfy UI and I'll paste in that workflow. Now this is where the magic happens. We're going to ask Claude
[15:02] Cote to look at this workflow and then add it to our app. So I think you can just drag and drop it into the workflow, but I'll just manually tag it. Then let's say when we click on the generate button, we're stubbing the image generation process. Instead, we want to call an API on comfy UI that's running locally on our machine. I've attached the workflow that we need to call. So extend our app to use this comfy UI workflow instead. Allow the user to set certain attributes about the
[15:34] generation like different resolution options and maybe the amount of steps. Now this is really important. We need to tell Claude Cote where this comfy UI server is currently running. So we can actually go back to comfy UI. Let's go to settings, then let's go to server config and here you will find both the host and the port number. So I'm going to copy the host and I'm just going to add this to the prompt. Comfy UI is running on host this
[16:05] and port. I just copy this port number without the comma by the way and let's run this. And actually I'm just going to stop this as I do want to run this in plan mode first. Don't make any changes to the code yet. Let's create the implementation plan first. Like so. Let's send this. All right so let's have a look at these few clarifying questions. Should we keep the stop generator as a fallback when comfy UI is not running? Now we require comfy UI. Do you want real-time progress updates via WebSocket?
[16:36] Now I haven't really had any success with this in the past but I'll just say yes either way. Which settings should users be able to configure? Steps only? Steps plus guidance? Steps plus guidance plus seed? I think we can just go with option three and let's submit this. All right let's have a look at this implementation plan. So we're going to replace the stop image generator with the real comfy UI integration using the flux2 workflow and comfy UI is running on this location and that port.
[17:06] All right I think this is good enough so I'm going to switch over to change mode and let's run this create feature command. All right beautiful. We now have our comfy UI implementation plan and requirement file. So what I'll simply do is pull in this specs folder into our conversation and we'll just yolo this. Please go ahead and implement all the phases in this implementation plan. Update the tasks to complete once you're done. And that's it. Let's send this. All right so just a quick update. What I realized when
[17:38] I clicked on generate I instantly got an error message and that is because our app wasn't passing the reference image of the avatar so this image every year along to comfy UI. So I told Claude Cote that the reference image should never be empty. We are always expecting the user to add at least one subject with an avatar to this flow. And just to be clear we're referring to this image loader over here. If we did not select an image in comfy UI this workflow will file as well.
[18:09] So this is the same as calling this workflow within comfy UI without providing this reference image. And by the way if you wanted to allow the user to create images without a reference image what you can do is simply bypass these nodes. So you can just select a node and click on ctrl b and then just bypass all of these nodes as well. Then save this workflow with a different name and then upload this workflow into the agent as well. So you could have two separate workflows one that caters for reference images and
[18:41] another that doesn't. But so after making those changes let's try this again. So I'll just select the resolution as 1k. Let's make this landscape. And now we have all of these different settings representing the values from comfy UI. Let's try to generate this. And now it looks like something is happening on the right hand side. And if we go back to comfy UI you can see the image is being generated in the queue. And we can also see the image in our own app. Now that is awesome. And let's go to the gallery page
[19:12] where we can indeed see our image. This also shows us the prompt that we used initially. Now I do want to take this a step further. All of these models usually come with some kind of prompting guide. So I'll link to this article in the description as well. This gives us a lot of different settings and example prompts that you can use with flux2. So if you are following along with flux2 then copy this page. And then I'll simply clear the chat with clogged code. And I'm going to say. All right everything seems to be
[19:43] working correctly. We're able to generate images using comfy UI. Now we are using the flux2 model in this application. So what I wanted to do is to extend our prompt builder. So all the different options and properties we have. So they're really caring for all the nuances of using flux2. So add additional properties like the cameras and location or anything else we need based on this prompting guide. And then for each of these options add a large variety of templates and
[20:16] presets. And I'll just paste in that article as well. And let's see what Claude comes up with. So I'm basically expecting Claude to extend this left side section to really care for all the different settings that are available with flux2. And just like that we have a UI that's now fine tuned around this specific model. We now have things like these photography settings with camera models and different lens types, mood and atmosphere, the color palette etc. So let's give this
[20:48] one more spin. So I'll choose a camera model. Let's go with the 55mm lens. And for the mood we'll just go with peaceful and serene. And for the color palette let's go with sunset colors. And then of course for our subject let's select lunar. For the pose let's do something like setting with legs crossed. And I think that's actually all I'm going to do. Then in the middle we can actually see the prompt being generated with all those new settings. Let's go with 1K resolution. For
[21:20] the aspect ratio let's do portrait. And we'll just leave everything else as is. And let's generate this image. And just to confirm we can see the image being generated in Comfy UI. And of course we get our generated image. This video was a lot of fun to create. Please let me know down in the comments if you've got any questions about this series. Now if you are struggling with any of this you can join my community and I'll try my best to assist you. And there are a lot of other people in the community that's also able to help. Let me know if
[21:51] you've got any other ideas for more videos similar to this. Otherwise I'll see you in the next one. Bye bye.