[Python] Gradio Image() component to download image with random names

I have 3 gr.Image() where they only have output when the LLM inference happen.

img1 = gr.Image(
label="Generated Image",
type="pil",
format="png",
interactive=False,
show_share_button=False,
elem_classes="generated-image"
)


The inference API call is something like this:

def inference_with_timer(model_key, prompt, api_key):
API_URL = models[model_key]
headers = {"Authorization": f"Bearer {api_key}"}
payload = {"inputs": prompt}
try:
start_time = time.time()
response = requests.post(API_URL, headers=headers, json=payload)
response.raise_for_status()
elapsed_time = round(time.time() - start_time, 2)
image = Image.open(BytesIO(response.content))
return image, f"{elapsed_time}s"
except Exception as e:
return str(e), "Error"


The built-in download button in the gr.Image() component has a default name: "image.{ext}". I want it to be random after each inference. How can I do so?

Some points to be noted:

1. 
   The download button on each image block is not present on the very first load.
   
   
2. 
   The download button on the first image block can be present while the other two can still be absent (as like #1)
   
   
3. 
   There could be 3 download buttons on each image block
   
   
4. 
   After the first inference, the download button will be there while the system could request for another inference
   

I need to update the download attribute of the 3 different anchor tags only when the new inference come.



What I tried so far


I tried using custom Javascript, but as I'm not a pro Python programmer, cannot understand how to let the JS understand the inference came or not, or came with a successful inference. Because even with a failed response/inference the src attribute has a value:

<img
src="https://mayeenulislam-imagen.hf.space/gradio_api/file=/home/user/app/500 Server Error: Internal Server Error for url: https:/api-inference.huggingface.co/models/black-forest-labs/FLUX.1-schnell"
alt=""
loading="lazy"
class="svelte-1pijsyv"
>


Hence, I need assistance from the experts.

Continue reading...