How to build a simple countdown timer with Gradio

Beginners
1

I’m trying to buld a simple application that basically counts downward every second. I’m using Textbox with the every parameter. This is the code I have tried so far:

import gradio as gr

def reduce(count):
    def inner():
        return count.value - 1
    return inner

with gr.Blocks() as demo:
    time = gr.State(8)
    # time = 8
    timer = gr.Textbox(value=reduce(time), label="", every=1, interactive=False)

demo.launch()

I have tried various variation of this code without success. This current version does show an static “7” and nothing else. Am I missing something? Is there a better way to achieve such counter? What I fond most confusing about this is how to communicate the update of the reduce function. It’s not clear to me how the output of the function is used to update the value of time.

Thank you!

2

This is a simple countdown timer.

import gradio as gr

def update_textbox(inputs):
    countdown = list(reversed([str(i) for i in range(inputs + 1)]))
    countdown[-1] = "Time is up!"
    for i in countdown:
        yield gr.update(value=i)
        time.sleep(1)

with gr.Blocks() as demo:
    inputs = gr.Number(label="Enter the time in secs")
    text = gr.Textbox(label="Remaining time in secs", lines=1, interactive=True)
    btn = gr.Button("start")
    btn.click(fn=update_textbox, inputs=[inputs], outputs=text)

demo.launch()