How to View Result Image from Output String in Gradio API

Question

I am trying to generate an AI-Art QR code with with the Hugging Face's Gradio Python Client API in Google Colab. The API call returns an output string /tmp/gradio/e7c2ab46e69f6712e387aa71344ee7a6b9848d67/tmplyvg8rd5.png which I cannot view using the multiple methods I have tried. (more details below)

The code I am using is from the API documentation, https://huggingface-projects-qr-code-ai-art-generator--58b6vlwzv.hf.space/?view=api, as an Unnamed Endpoint. I have edited the default parameters (specifically, adding a valid URL and nonzero components) to avoid a Value Error:

# Create a client and specify the API URL
client = Client("https://huggingface-projects-qr-code-ai-art-generator--58b6vlwzv.hf.space/")

# Make a prediction
result = client.predict(
    "https://my-url-here.com",      # str  in 'QR Code Content' Textbox component
    "red bus",                 # str  in 'Prompt' Textbox component
    "blue",                    # str  in 'Negative Prompt' Textbox component
    1,                         # int | float (numeric value between 0.0 and 50.0) in 'Guidance Scale' Slider component
    1,                         # int | float (numeric value between 0.0 and 5.0) in 'Controlnet Conditioning Scale' Slider component
    0.9,                       # int | float (numeric value between 0.0 and 1.0) in 'Strength' Slider component
    -1,                        # int | float (numeric value between -1 and 9999999999) in 'Seed' Slider component
    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",    # str (filepath or URL to image) in 'Init Image (Optional). Leave blank to generate image with SD 2.1' Image component
    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",    # str (filepath or URL to image) in 'QR Code Image (Optional). Leave blank to automatically generate QR code' Image component
    True,                      # bool  in 'Use QR code as init image' Checkbox component
    "DPM++ Karras SDE",        # str (Option from: ['DPM++ Karras SDE', 'DPM++ Karras', 'Heun', 'Euler', 'DDIM', 'DEIS']) in 'Sampler' Dropdown component
    fn_index=0
)

How can I view the output image?

To view the image, I have tried to attach the output string to the URL of the website, https://huggingface-projects-qr-code-ai-art-generator--58b6vlwzv.hf.space/, but the link points to a blank website with the message, {"detail":"Not Found"}.

I have tried to save the image locally as a .png file in Colab with the requests, shutil, urllib libraries from ChatGPT such as

# Get the image URL from the result
image_url = urljoin(client.api_url, result)

# Send a request to download the image
response = requests.get(image_url, stream=True)

# Save the image locally
save_path = "/content/generated_image.png"
with open(save_path, "wb") as f:
    shutil.copyfileobj(response.raw, f).

The urljoin function works fine and concatenates the Hugging Face URL and output string to create https://huggingface-projects-qr-code-ai-art-generator--58b6vlwzv.hf.space/tmp/gradio/e7c2ab46e69f6712e387aa71344ee7a6b9848d67/tmplyvg8rd5.png. The image saves locally as a Colab file, but it is damaged.

score 0 · Accepted Answer · answered Jul 05 '23 at 03:32

The path /tmp/gradio/e7c2ab46e69f6712e387aa71344ee7a6b9848d67/tmplyvg8rd5.png doesn't refer to a URL segment, but rather to a file on the filesystem. You can view it by either directly opening the file (you can find it using the Google Colab file explorer), or you can display it in the notebook using any popular Python image visualization library.

Here is a minimal working example using the popular Pillow, which you can install pip install Pillow.

from gradio_client import Client
from PIL import Image

# Create a client and specify the API URL
client = Client("https://huggingface-projects-qr-code-ai-art-generator--58b6vlwzv.hf.space/")

# Make a prediction
result = client.predict(
    "https://my-url-here.com",      # str  in 'QR Code Content' Textbox component
    "red bus",                 # str  in 'Prompt' Textbox component
    "blue",                    # str  in 'Negative Prompt' Textbox component
    1,                         # int | float (numeric value between 0.0 and 50.0) in 'Guidance Scale' Slider component
    1,                         # int | float (numeric value between 0.0 and 5.0) in 'Controlnet Conditioning Scale' Slider component
    0.9,                       # int | float (numeric value between 0.0 and 1.0) in 'Strength' Slider component
    -1,                        # int | float (numeric value between -1 and 9999999999) in 'Seed' Slider component
    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",    # str (filepath or URL to image) in 'Init Image (Optional). Leave blank to generate image with SD 2.1' Image component
    "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",    # str (filepath or URL to image) in 'QR Code Image (Optional). Leave blank to automatically generate QR code' Image component
    True,                      # bool  in 'Use QR code as init image' Checkbox component
    "DPM++ Karras SDE",        # str (Option from: ['DPM++ Karras SDE', 'DPM++ Karras', 'Heun', 'Euler', 'DDIM', 'DEIS']) in 'Sampler' Dropdown component
    fn_index=0
)

# View the image
Image.open(result)

How to View Result Image from Output String in Gradio API

1 Answers1