Gradio Static Progress bar

Beginners
1

I am working with gradio app for displaying static progress bar,
I want to fetch the values from completed_tasks and total_tasks values and pass onto the progress_bar for displaying the progress .
I not good at javascript (this code been generated by ChatGPT)

import gradio as gr


def update_progress_bar(completed_tasks, total_tasks):
    return f"Progress: {completed_tasks}/{total_tasks}"


js = """
function createProgressBar(completedTasks, totalTasks) {
    var progressBarContainer = document.createElement('div');
    progressBarContainer.id = 'progress-bar-container';
    progressBarContainer.style.width = '80%';
    progressBarContainer.style.margin = '20px auto';
    progressBarContainer.style.border = '1px solid #ccc';
    progressBarContainer.style.borderRadius = '5px';
    progressBarContainer.style.overflow = 'hidden';

    var progressBar = document.createElement('div');
    progressBar.id = 'progress-bar';
    progressBar.style.width = (completedTasks / totalTasks) * 100 + '%';
    progressBar.style.backgroundColor = '#4CAF50';
    progressBar.style.height = '30px';
    progressBar.style.textAlign = 'center';
    progressBar.style.lineHeight = '30px';
    progressBar.style.color = 'white';

    progressBar.innerText = 'Progress: ' + completedTasks + '/' + totalTasks;

    progressBarContainer.appendChild(progressBar);

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(progressBarContainer, gradioContainer.firstChild);
    
    var tasksCompleted = document.getElementById('[h2]')
    console.log(tasksCompleted);
    //Loop through each element and get the value of 'data-testid'
    elements.forEach(function(element) {
        //var testDataId = element.getAttribute('data-testid');
        console.log(testDataId); // Log the value of 'data-testid' for each element
     });
    return 'Progress bar created';
}
"""

with gr.Blocks(
    js=js,
) as demo:
    completed_tasks = gr.Textbox(
        label="completed tasks", interactive=True, elem_id="completed_task", value="5"
    )
    total_tasks = gr.Textbox(
        label="Total tasks", value="10", interactive=True, elem_id="total_task"
    )
    total = gr.Label(
        value=f"{total_tasks.value}", elem_id="completed_label", render=False,
    ) 
    completed_label = gr.Label(
        value=f"{completed_tasks.value}", elem_id="completed_label", render=True
    )
    progress = gr.Textbox(interactive=False , js = f"createProgressBar({})")
    # completed_tasks.change(update_progress_bar, completed_tasks, total_tasks, progress)
    completed_tasks.change(
        update_progress_bar, inputs=[completed_tasks, total_tasks], outputs=progress
    )

demo.launch()

Ran this code in gradio playground:

image
image980×588 13.7 KB