These instructions are for using ComfyUI and Tampermonkey on Windows, on the same computer. Other scenarios likely work, but I don't have the hardware to test. If you have success using these directions (or modifications thereof) on other setups, please report in the comments. Thank you.
For some reason, I like to be able to click on images in my browser (Firefox) and have ComfyUI instantly change the image. Mostly, it is fun, but it also showcases how power a tool ComfyUI can be, particularly when paired with other tools. In this case, we will also be using Tampermonkey.
First, what exactly am I talking about? Let's say I'm browsing Google image results for women's sweaters and I get this:
and that Weekend Max Mara sweater catches my eye. Just as I'm sure you would, I start thinking, hey, how would Sean Connery look in that? So I alt-click on the image and magically before my eyes the page turns to this:
so, obviously not his color. I won't buy it for him and crisis averted. But now what about the Dale of Norway one next to it?
Yes! Perfect, I just need his shipping address.
So, what is happening is that (almost) any picture that I alt-click (which just means hold the alt button while I click on the image with my mouse) is seamlessly sent to ComfyUI in the background, processed with an image-to-image workflow (in this case, a ReActor face swap, but it could be anything) and the result instantly replaces the original image.
Requirements
To make the magic work we need to set up several things:
A web browser (I use Firefox, but I think Tampermonkey works on others as well).
ComfyUI running on the same computer
An image-to-image ComfyUI workflow with one image input. The workflow must be saved in API format
A Tampermonkey script that will intercept the Alt-Click action and do all the magic
ReActor Face Swap
For the example, I am going to use ReActor Face Swap. I chose this because it is very fast (takes like 2 seconds to do a face swap) and the workflow is very easy to set up.
To keep this article simple, I made a separate article: Review of Simple Reactor Face Swap in ComfyUI Read that if you don't already have a working workflow with face swap. At the end of the article we save an API workflow that does a face swap with Sean Connery using a saved face model of him. That workflow is attached, but you will need to either (1) follow the article to make the saved face model or (2) manually edit the .json workflow file with a text editor and replace "Sean Connery.safetensors" with the name of another face model you have saved.
Tampermonkey
Tampermonkey is a powerful extension for the firefox (and other) browser. It can modify the webpage in real time based upon code you give it. For this project, we will have Tampermonkey listen for an "alt-click" on an image (img). When it detects that, it will capture the image and send it to ComfyUI for us with the workflow that we have pasted into the script. It will also listen for the response and then put the result image in the place of the one you clicked on.
The Tampermonkey script we will start with is attached. This won't be a full tutorial on Tampermonkey, but I'll give you the basics to get the script installed and to modify it to do any image-to-image workflow in ComfyUI you have.
Install Tampermonkey
Click on the Firefox "open application menu" button:
Choose "Extensions and Themes":
Search for "tampermonkey":
The first result will almostly surely be this one (the one you want):
Click on it and then click install. I like to choose the option to "pin" it to the toolbar, which gives you this button:
Awesome. You have installed it!
Install the Tampermonkey Script
Go to the tampermonkey dashboard and click the plus to add a new script:
Delete everything in the text area and paste in the script attached here (ComfyUI Face Swap (Alt+Click)-1.0.txt). Then hit "file->save"
You have just installed the script! Make sure the switch on the dashboard is flipped to green, which means "on":
Tell ComfyUI to Accept Scripts
By default, ComfyUI will ignore things coming in from something like tampermonkey over the local network. To make this work, you will need to edit your startup script. My comfyui.bat file has the following line to start the server:
python main.py --lowvram(the --lowvram is because I have an 8GB VRAM GPU. If you are lucky and have a better GPU you probably don't have that). Anyway, add the bit at the end to whatever you do have:
python main.py --lowvram --enable-cors-header 'http://127.0.0.1:8188'CORS (Cross-Origin Resource Sharing) headers are security instructions that tell a browser whether it is safe for a website on one domain (like a custom web-based remote UI) to talk to your ComfyUI server running on another domain or port (typically 127.0.0.1:8188). By default, these "cross-origin" requests are blocked to prevent malicious sites from hijacking your local server. You need to enable CORS headers in ComfyUI if you want to be able to access it from Firefox (tampermonkey). This is also the place where you would need to modify it if you are running comfyui and your browser on different machines, but I'll leave that part as an exercise for the reader as it is out of the scope of this article.
Of course, you'll need to restart ComfyUI after making this change, but at this point, you should be ready to go from a ComfyUI standpoint!
The First Time It Runs
The first time you alt-click on an image with the tampermonkey script you will get the following pop up:
Click "always allow" and from this point on, the script should work. If you are using the default workflow, alt-click on an image will cause a face swap with Sean Connery. Congratulations! You are altering images in your browser in real-time with comfyui.
Customizations
It occurs to me that some of the readers may want to do even more than just put Sean's face on all the pages on the websites they visit. Let's look at doing a little customization!
Choose another face:
If you like the face swap (it's very fast and very fun) and just want to use a different face, the change is quite easy. Simply find the following line in the tampermonkey script (on or about line 67):
"face_model": "Sean Connery.safetensors"and simply change the name from Sean Connery to whatever your facemodel name is. If you need to see how to save a face model (it's very easy) just look at my article Review of Simple Reactor Face Swap in ComfyUI.
Choose another workflow:
The tampermonkey script will work with almost any image-to-image workflow. One important point is that it must have only one "load image" node. The script looks for the load image node in your workflow but there is no current way to handle more than one (it would be possible, but you would need to code the correct node number for the particular load image node you wanted, and that gets beyond the scope of this article).
There are only a few steps to replace the face swap workflow with whatever one you want to use. First, you must save your workflow in "API" format using this button:
If you don't have that button, you need to activate dev mode, which is found in settings:
Your saved workflow will be a .json file that you can open with any text editor (notepad++ is awesome, but you do you). Copy the whole thing, including the opening and closing brackets. Then, open the tampermonkey script (you can edit in tampermonkey itself or edit elsewhere and copy and paste the results). You are going to delete the old workflow and paste in your new one. The workflow starts with the { right after WORKFLOW =, in this case on line 15:
and it goes all the way to:
That } bracket on line 74 is the very end. So you will replace everything, including the start and end brackets (but not the semicolon or anything after it) with your api-saved workflow. And boom goes the dynamite, you should now have your new workflow applied whenever you alt-click.
The whole process is a lot less "cool" or "fun" with slow workflows, but anything you put in should work. I find it works best if you don't modify the size of the image in the workflow, so that whatever you get out is the same as what you put in, but tampermonkey will try to make it work regardless, so have fun playing around. As a plus, all of the images are also saved on your computer in your output directory (or elsewhere if you code that into your workflow).
Enjoy everyone, let me know if you have any cool or fun workflows for this.