Variations (img2img) + Image to video: Use another source image (yours or not)

With the on-site generator, in 🕘 Queue tab or 📃 Feed tab, you can ask for Variations (img2img). It will copy generation configuration to 🖌️ generator form tab and image to the source image of the form.

Here I explain how to change this source image by another. The idea is to update the local variable of the browser (inside localStorage) to set the wanted image.

Constraints :

• The generator API used by form requires the URL to begin with https://orchestration.civitai.com

• The image in https://orchestration.civitai.com are deleted after 30 days, so it only works with recent images generated by civitai generator
  

- Explanation text (screencast) :

1/ Open the on-site civitai generator and ask for a Variations (img2img) from your generation 🕘 Queue tab or 📃 Feed tab. The page (sidebar) now displays the generation form.

2/ In a new browser tab open a post with images created with Civitai generator (little yellow triangle at bottom right of the image in list, not always displayed)

Example : https://civitai.com/posts/9181511

3/ Right click on the image then copy image link

For example the url is https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/c2d72860-7137-4672-b3cd-f5b48b438ac0/width=700,original=false,optimized=true/BJFMDDB1FPW6ASAEFAR1B458J0.jpeg

4/ In this URL select the ID without the extension at the image a the end of the URL

If the ID has this format it should work, if not it will not work for sure : BJFMDDB1FPW6ASAEFAR1B458J0

If the ID has different format it could be because image was upload and not generated by civitai generator.

5/ Come back to the generator form and open the console of your browser (key : F12)

Select this code, update the code variable with the previous found ID then copy past to the console en run it (if you never pasted in the console your browser will ask you too type something to be sure you know what you do)

var code = "GKQP9A8VAA9WX7H8MZA2MZ0FY0";
var src="https://orchestration.civitai.com/v2/consumer/blobs/" + code;

var generation_form = JSON.parse(localStorage.getItem("generation-form-2")) 

generation_form.state.image = src; localStorage.setItem("generation-form-2", JSON.stringify(generation_form))

6/ In the on-site generator go to 🕘 Queue tab or 📃 Feed tab then back to the 🖌️ generator form tab (to update the form view)

The source image has changed 🤗

If the image is not display it will not work.

7/ Configure the Denoise strength then click on Generate

If you like 🤩 this feature up vote this feature request : https://feedback.civitai.com/fr/u/66097e396d98c7a2eb57a6f6 ✌️😉

🎁Little extras🎁

A) It works with Flux source image

Event if Variations (img2img) is not available for Flux image results, you can get the generation ID of a flux image to use it as source image for another model. An image file is a image file so it works as source image.

B) It works with Image to video

It also work for Image to video with this other script because the source URL is not stored at the same location in localStorage:

var code = "BJFMDDB1FPW6ASAEFAR1B458J0";
var src="https://orchestration.civitai.com/v2/consumer/blobs/" + code;
var localStorageKey = "haiper-img2vid";
var generation_form = JSON.parse(localStorage.getItem(localStorageKey)) generation_form.state.sourceImageUrl = src; localStorage.setItem(localStorageKey, JSON.stringify(generation_form))

A day, I could make a script that update both locations (for Variations (img2img) and Image to video) ...