Replacing images at runtime

🔒 Gradio
1

I’m trying to update images at runtime where a new image is generated through the Replicate API based on chatbot/user interaction ideally with gr.Blocks().

I’ve attempted to just make a simple slideshow player but it’s not updating. Any ideas would be much appreciated!

2

hi @philipalden , we probably need more context here to help you,
Could you please provide a code snippet example?

3

Hi Radames, Thanks for responding so quickly!

This is just for the slideshow player I mentioned:

import os
import gradio as gr
from gradio import State
import time
import threading

Directory containing images

image_directory = “”

List all image files in the directory

image_files = [f for f in os.listdir(image_directory) if f.endswith((“.png”, “.jpg”, “.jpeg”))]

Initial image configuration

INITIAL_IMAGE = os.path.join(image_directory, image_files[0])
IMAGE_WIDTH = 768
IMAGE_HEIGHT = 768
image_state = State(INITIAL_IMAGE)

Set the image displayed in the Gradio interface

def set_image(image_path):
image_state.value = image_path

def update_image():
for image_file in image_files:
image_path = os.path.join(image_directory, image_file)
set_image(image_path)
time.sleep(1)

def start_slideshow():
thread = threading.Thread(target=update_image)
thread.start()

with gr.Blocks() as slideshow:
with gr.Row():
image = gr.Image(value=INITIAL_IMAGE).style(width=IMAGE_WIDTH, height=IMAGE_HEIGHT)

with gr.Row():
    update_button = gr.Button("Start Slideshow")

    update_button.click(start_slideshow)

if name == “main”:
slideshow.launch()

4

hi @philipalden , maybe you want to explore Gradio every functionally.

btw, in order to update the component value, you need to use Gradio component event methods, such as, click, change, load, etc

here is an example using every

import gradio as gr
import requests
from PIL import Image
URL = "https://source.unsplash.com/random/500x500/?nature,fruit"


def refresh():
    image = Image.open(requests.get(URL, stream=True).raw)
    return image


with gr.Blocks(show_footer=False) as blocks:
    image = gr.Image(show_label=False)
    blocks.load(fn=refresh, inputs=None, outputs=image,
                show_progress=False, every=1)

blocks.queue(api_open=False)
blocks.launch()

live demo

1 Like
5

Thank you for this @radames and the suggestion to use every

1 Like