Spaces:
Runtime error
Runtime error
| import gradio as gr | |
| from utils import ( | |
| initial_state, | |
| format_todos, | |
| add_task, | |
| toggle_complete, | |
| delete_task | |
| ) | |
| # Initialize global constants | |
| INITIAL_TODOS = initial_state() | |
| with gr.Blocks(title="Gradio Todo App") as demo: | |
| gr.HTML(""" | |
| <div style="text-align: center; max-width: 700px; margin: 0 auto;"> | |
| <h1>Simple Todo List</h1> | |
| <p style="margin-top: -10px; margin-bottom: 20px;"> | |
| Built with | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--primary-500); text-decoration: underline;">anycoder</a> | |
| </p> | |
| </div> | |
| """) | |
| # --- State Management --- | |
| todo_state = gr.State(value=INITIAL_TODOS) | |
| # --- Input and Adding Tasks --- | |
| with gr.Row(): | |
| new_task_input = gr.Textbox( | |
| placeholder="What needs to be done?", | |
| label="New Task", | |
| scale=3 | |
| ) | |
| add_btn = gr.Button("Add Task", variant="primary", scale=1) | |
| # --- Todo List Display --- | |
| # We use Dataframe and rely on the 'select' event to handle actions | |
| todo_display = gr.Dataframe( | |
| value=format_todos(INITIAL_TODOS), | |
| headers=["Task Description", "Status"], | |
| row_count=(1, "dynamic"), | |
| col_count=(2, "fixed"), | |
| datatype=["str", "str"], | |
| interactive=True, | |
| label="Tasks", | |
| show_row_numbers=True, | |
| wrap=True, | |
| line_breaks=True, | |
| height=300 | |
| ) | |
| # --- Action Buttons (triggered by Dataframe selection) --- | |
| with gr.Row(): | |
| complete_btn = gr.Button("Toggle Complete (Select Row First)", variant="secondary") | |
| delete_btn = gr.Button("Delete Task (Select Row First)", variant="stop") | |
| # --- Event Handling --- | |
| # 1. Adding a new task | |
| add_btn.click( | |
| fn=add_task, | |
| inputs=[todo_state, new_task_input], | |
| outputs=[todo_state, todo_display, new_task_input] | |
| ) | |
| new_task_input.submit( | |
| fn=add_task, | |
| inputs=[todo_state, new_task_input], | |
| outputs=[todo_state, todo_display, new_task_input] | |
| ) | |
| # 2. Handling actions upon selection + button click | |
| # When a user clicks a row and then the Toggle button | |
| complete_btn.click( | |
| fn=toggle_complete, | |
| inputs=[todo_state, todo_display], | |
| outputs=[todo_state, todo_display] | |
| ) | |
| # When a user clicks a row and then the Delete button | |
| delete_btn.click( | |
| fn=delete_task, | |
| inputs=[todo_state, todo_display], | |
| outputs=[todo_state, todo_display] | |
| ) | |
| demo.queue() | |
| if __name__ == "__main__": | |
| demo.launch() |