# Replacing images at runtime

**URL:** <https://discuss.huggingface.co/t/replacing-images-at-runtime/37965>\
**Category:** 🔒 Gradio\
**Created:** [April 27, 2023, 10:28pm UTC](https://discuss.huggingface.co/t/replacing-images-at-runtime/37965 "2023-04-27T22:28:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![philipalden](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/philipalden/32/15701_2.png) [@philipalden](https://discuss.huggingface.co/u/philipalden)\
**Post date:** [April 27, 2023, 10:28pm UTC](https://discuss.huggingface.co/t/replacing-images-at-runtime/37965/1 "2023-04-27T22:28:32Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [April 27, 2023, 10:52pm UTC](https://discuss.huggingface.co/t/replacing-images-at-runtime/37965/2 "2023-04-27T22:52:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![philipalden](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/philipalden/32/15701_2.png) [@philipalden](https://discuss.huggingface.co/u/philipalden)\
**Post date:** [April 27, 2023, 11:08pm UTC](https://discuss.huggingface.co/t/replacing-images-at-runtime/37965/3 "2023-04-27T23:08:13Z")

</div>

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()

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [April 28, 2023, 4:26am UTC](https://discuss.huggingface.co/t/replacing-images-at-runtime/37965/4 "2023-04-28T04:26:11Z")

</div>

hi @philipalden , maybe you want to explore Gradio [`every` functionally.](https://gradio.app/docs/#blocks-load:~:text=Instance%20Method%20%2D%20Run%20this%20event%20%27every%27%20number%20of%20seconds.%20Interpreted%20in%20seconds.%20Queue%20must%20be%20enabled)

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`

```python
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

> **[Gradio Picture Slideshow - a Hugging Face Space by radames](https://huggingface.co/spaces/radames/gradio_picture_slideshow)**
>
> Discover amazing ML apps made by the community

---

<div class="post-metadata">

**Author:** ![philipalden](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/philipalden/32/15701_2.png) [@philipalden](https://discuss.huggingface.co/u/philipalden)\
**Post date:** [April 28, 2023, 2:02pm UTC](https://discuss.huggingface.co/t/replacing-images-at-runtime/37965/5 "2023-04-28T14:02:13Z")

</div>

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