Replacing images at runtime
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!
2023-04-27T22:52:55Z
hi@philipalden, we probably need more context here to help you,Could you please provide a code snippet example?
2023-04-27T23:08:13Z
Hi Radames, Thanks for responding so quickly!This is just for the slideshow player I mentioned:import osimport gradio as grfrom gradio import Stateimport timeimport threadingDirectory containing imagesimage_directory = “”List all image files in the directoryimage_files = [f for f in os.listdir(image_directory) if f.endswith((“.png”, “.jpg”, “.jpeg”))]Initial image configurationINITIAL_IMAGE = os.path.join(image_directory, image_files[0])IMAGE_WIDTH = 768IMAGE_HEIGHT = 768image_state = State(INITIAL_IMAGE)Set the image displayed in the Gradio interfacedef set_image(image_path):image_state.value = image_pathdef 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)ifname== “main”:slideshow.launch()
2023-04-28T04:26:11Z
hi@philipalden, maybe you want to explore Gradioeveryfunctionally.btw, in order to update the component value, you need to use Gradio component event methods, such as, click, change, load, etchere is an example usingeveryimport 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 demohuggingface.coGradio Picture Slideshow - a Hugging Face Space by radamesDiscover amazing ML apps made by the community
2023-04-28T14:02:13Z
Thank you for this@radamesand the suggestion to use every