{"id":88497,"date":"2026-05-06T16:07:30","date_gmt":"2026-05-06T16:07:30","guid":{"rendered":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/"},"modified":"2026-05-06T16:07:30","modified_gmt":"2026-05-06T16:07:30","slug":"how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat","status":"publish","type":"post","link":"https:\/\/youzum.net\/fr\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/","title":{"rendered":"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat"},"content":{"rendered":"

In this tutorial, we build a fully interactive, multi-page web application using NiceGUI<\/strong><\/a>. We start by setting up the environment and designing a reusable layout that includes navigation, theming, and dark mode support. As we move forward, we implement a live dashboard with real-time metrics and charts, demonstrating reactive bindings and timed updates. We then extend the application with a complete CRUD-based todo system, followed by a validated form with dialogs and user feedback mechanisms. We also incorporate file upload functionality with dynamic previews and conclude the feature set with an asynchronous chat interface that simulates real-time interaction. Also, we ensure that the app runs seamlessly in Colab by using background threading and dynamic port allocation.<\/p>\n

\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
import sys\nimport subprocess\nsubprocess.run([sys.executable, \"-m\", \"pip\", \"install\", \"-q\", \"nicegui\"], check=True)\n\n\nimport threading, time, random, asyncio, base64, socket\nfrom datetime import datetime\nfrom nicegui import ui, events\n\n\n\n\nclass State:\n   def __init__(self):\n       self.todos = [\n           {\"id\": 1, \"task\": \"Explore NiceGUI\",      \"done\": True,  \"priority\": \"High\"},\n           {\"id\": 2, \"task\": \"Build a dashboard\",    \"done\": False, \"priority\": \"Medium\"},\n           {\"id\": 3, \"task\": \"Deploy to production\", \"done\": False, \"priority\": \"Low\"},\n       ]\n       self.next_id = 4\n       self.metrics = {\"users\": 1247, \"revenue\": 8420, \"orders\": 53}\n       self.series = [random.uniform(20, 80) for _ in range(20)]\n       self.messages = [{\"role\": \"assistant\",\n                         \"text\": \"Hi! Type something and I will echo it back.\"}]\n\n\nstate = State()\n\n\n\n\ndef page_shell(active: str) -> None:\n   dark = ui.dark_mode()\n   drawer = ui.left_drawer(value=True).classes(\"bg-grey-2\")\n   with drawer:\n       ui.label(\"Navigation\").classes(\"text-lg font-bold p-2\")\n       for label, path, icon in [\n           (\"Dashboard\", \"\/\",       \"dashboard\"),\n           (\"Todos\",     \"\/todos\",  \"check_circle\"),\n           (\"Form\",      \"\/form\",   \"edit_note\"),\n           (\"Upload\",    \"\/upload\", \"upload_file\"),\n           (\"Chat\",      \"\/chat\",   \"chat\"),\n       ]:\n           cls = \"w-full\" + (\" bg-primary text-white\" if label == active else \"\")\n           ui.button(label,\n                     on_click=lambda p=path: ui.navigate.to(p),\n                     icon=icon).classes(cls).props(\"flat align=left no-caps\")\n\n\n   with ui.header(elevated=True).classes(\"items-center justify-between bg-primary\"):\n       with ui.row().classes(\"items-center\"):\n           ui.button(on_click=drawer.toggle, icon=\"menu\").props(\"flat color=white\")\n           ui.label(\"\"\ud83d\ude80\" NiceGUI Tutorial\").classes(\"text-xl font-semibold text-white\")\n       ui.button(icon=\"dark_mode\", on_click=dark.toggle).props(\"flat color=white\")\n\n\n   with ui.footer().classes(\"bg-grey-3 text-black justify-center\"):\n       ui.label(\"Built with NiceGUI \u00b7 Tutorial Demo\")<\/code><\/pre>\n<\/div>\n<\/div>\n
We install and import all required libraries, then initialize our application state. We define a central State class to manage todos, metrics, chart data, and chat messages across the app. We also built a reusable layout function that provides navigation, a header, a footer, and dark mode support for all pages.<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
@ui.page(\"\/\")\ndef dashboard():\n   page_shell(\"Dashboard\")\n   with ui.column().classes(\"w-full p-6 gap-6\"):\n       ui.label(\"Live Dashboard\").classes(\"text-3xl font-bold\")\n\n\n       with ui.row().classes(\"gap-4 flex-wrap\"):\n           for key, label, color, icon in [\n               (\"users\",   \"Users\",   \"primary\",  \"group\"),\n               (\"revenue\", \"Revenue\", \"positive\", \"attach_money\"),\n               (\"orders\",  \"Orders\",  \"warning\",  \"shopping_cart\"),\n           ]:\n               with ui.card().classes(\"w-60\"):\n                   with ui.row().classes(\"items-center justify-between w-full\"):\n                       ui.label(label).classes(\"text-gray-500\")\n                       ui.icon(icon, size=\"md\").classes(f\"text-{color}\")\n                   ui.label().classes(f\"text-3xl font-bold text-{color}\") \n                       .bind_text_from(state.metrics, key, backward=lambda v: f\"{v:,}\")\n\n\n       with ui.card().classes(\"w-full\"):\n           ui.label(\"Live stream (updates every second)\").classes(\"text-lg font-semibold\")\n           chart = ui.echart({\n               \"tooltip\": {\"trigger\": \"axis\"},\n               \"xAxis\":   {\"type\": \"category\", \"data\": list(range(len(state.series)))},\n               \"yAxis\":   {\"type\": \"value\"},\n               \"series\":  [{\"data\": list(state.series), \"type\": \"line\",\n                            \"smooth\": True, \"areaStyle\": {}}],\n           }).classes(\"h-64 w-full\")\n\n\n           def tick():\n               state.series.append(random.uniform(20, 80))\n               state.series.pop(0)\n               chart.options[\"series\"][0][\"data\"] = list(state.series)\n               chart.update()\n               state.metrics[\"users\"]   += random.randint(-2, 4)\n               state.metrics[\"revenue\"] += random.randint(-100, 200)\n               state.metrics[\"orders\"]  = max(0, state.metrics[\"orders\"] + random.randint(-1, 3))\n\n\n           ui.timer(1.0, tick)<\/code><\/pre>\n<\/div>\n<\/div>\n
We create the dashboard page and structure it with responsive UI components. We bind metric cards directly to the state to enable automatic updates and display real-time values. We also implement a live chart using ECharts and dynamically update both the chart and the metrics using a timer.<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
@ui.page(\"\/todos\")\ndef todos_page():\n   page_shell(\"Todos\")\n   with ui.column().classes(\"w-full p-6 gap-4 max-w-4xl mx-auto\"):\n       ui.label(\"Todos\").classes(\"text-3xl font-bold\")\n\n\n       with ui.card().classes(\"w-full\"):\n           with ui.row().classes(\"w-full items-center gap-2\"):\n               task_input   = ui.input(placeholder=\"What needs doing?\").classes(\"flex-grow\")\n               priority_sel = ui.select([\"Low\", \"Medium\", \"High\"], value=\"Medium\").classes(\"w-36\")\n\n\n               def add_todo():\n                   if not task_input.value or not task_input.value.strip():\n                       ui.notify(\"Task cannot be empty\", type=\"warning\"); return\n                   state.todos.append({\n                       \"id\":       state.next_id,\n                       \"task\":     task_input.value.strip(),\n                       \"done\":     False,\n                       \"priority\": priority_sel.value,\n                   })\n                   state.next_id += 1\n                   task_input.value = \"\"\n                   todo_list.refresh()\n                   ui.notify(\"Added!\", type=\"positive\")\n\n\n               ui.button(\"Add\", icon=\"add\", on_click=add_todo).props(\"color=primary\")\n               task_input.on(\"keydown.enter\", add_todo)\n\n\n       @ui.refreshable\n       def todo_list():\n           if not state.todos:\n               ui.label(\"Nothing here yet \"\ud83c\udf89\"\").classes(\"text-gray-500\"); return\n           for todo in state.todos:\n               with ui.card().classes(\"w-full\"):\n                   with ui.row().classes(\"w-full items-center gap-3\"):\n                       ui.checkbox(value=todo[\"done\"],\n                                   on_change=lambda e, t=todo: t.update(done=e.value))\n                       lbl = ui.label(todo[\"task\"]).classes(\"flex-grow text-lg\")\n                       if todo[\"done\"]:\n                           lbl.style(\"text-decoration: line-through; opacity: 0.5\")\n                       color = {\"High\": \"red\", \"Medium\": \"orange\", \"Low\": \"green\"}[todo[\"priority\"]]\n                       ui.badge(todo[\"priority\"], color=color)\n\n\n                       def make_del(t=todo):\n                           def _del():\n                               state.todos.remove(t)\n                               todo_list.refresh()\n                               ui.notify(\"Removed\", type=\"info\")\n                           return _del\n\n\n                       ui.button(icon=\"delete\", on_click=make_del()) \n                           .props(\"flat color=red round dense\")\n\n\n       todo_list()<\/code><\/pre>\n<\/div>\n<\/div>\n
We implement a complete CRUD-based todo system with add, update, and delete functionality. We handle user input validation and dynamically refresh the UI using NiceGUI\u2019s refreshable components. We also enhance the UI with checkboxes, badges, and notifications to improve interactivity and feedback.<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
@ui.page(\"\/form\")\ndef form_page():\n   page_shell(\"Form\")\n   with ui.column().classes(\"w-full p-6 max-w-2xl mx-auto gap-4\"):\n       ui.label(\"Profile Form\").classes(\"text-3xl font-bold\")\n       with ui.card().classes(\"w-full gap-2\"):\n           name  = ui.input(\"Name\",  validation={\"Required\":         lambda v: bool(v)})\n           email = ui.input(\"Email\", validation={\"Must be an email\": lambda v: \"@\" in (v or \"\")})\n           age   = ui.number(\"Age\", value=18, min=0, max=120)\n           ui.label(\"Subscription plan\").classes(\"mt-2 text-gray-600\")\n           plan  = ui.radio([\"Free\", \"Pro\", \"Enterprise\"], value=\"Free\").props(\"inline\")\n           agree = ui.checkbox(\"I accept the terms\")\n\n\n           async def submit():\n               if not (name.value and \"@\" in (email.value or \"\") and agree.value):\n                   ui.notify(\"Please fix the form first\", type=\"negative\"); return\n               with ui.dialog() as d, ui.card():\n                   ui.label(\"Submitted!\").classes(\"text-xl font-bold\")\n                   ui.label(f\"Name:  {name.value}\")\n                   ui.label(f\"Email: {email.value}\")\n                   ui.label(f\"Age:   {age.value}\")\n                   ui.label(f\"Plan:  {plan.value}\")\n                   ui.button(\"OK\", on_click=d.close).props(\"color=primary\")\n               d.open()\n\n\n           ui.button(\"Submit\", on_click=submit).props(\"color=primary\")\n\n\n\n\n@ui.page(\"\/upload\")\ndef upload_page():\n   page_shell(\"Upload\")\n   with ui.column().classes(\"w-full p-6 max-w-3xl mx-auto gap-4\"):\n       ui.label(\"File Upload\").classes(\"text-3xl font-bold\")\n       result = ui.column().classes(\"w-full\")\n\n\n       def handle_upload(e: events.UploadEventArguments):\n           content = e.content.read()\n           with result:\n               with ui.card().classes(\"w-full\"):\n                   ui.label(f\"\"\ud83d\udcce\" {e.name}\").classes(\"font-semibold\")\n                   ui.label(f\"Size: {len(content):,} bytes \u00b7 type: {e.type}\")\n                   if e.type and e.type.startswith(\"image\/\"):\n                       b64 = base64.b64encode(content).decode()\n                       ui.image(f\"data:{e.type};base64,{b64}\").classes(\"w-64 rounded\")\n                   else:\n                       try:\n                           ui.code(content[:500].decode(\"utf-8\", errors=\"replace\"))\n                       except Exception:\n                           pass\n           ui.notify(f\"Uploaded {e.name}\", type=\"positive\")\n\n\n       ui.upload(on_upload=handle_upload, multiple=True, auto_upload=True).classes(\"w-full\")<\/code><\/pre>\n<\/div>\n<\/div>\n
We build a form with validation rules and handle submission using an asynchronous function. We display user input in a dialog upon successful submission and ensure proper validation before processing. We also implement a file upload feature that supports multiple files and provides image previews and content previews for other file types.<\/p>\n
\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
Copy Code<\/span>Copied<\/span>Use a different Browser<\/span><\/a><\/div>\n<\/div>\n
@ui.page(\"\/chat\")\ndef chat_page():\n   page_shell(\"Chat\")\n   with ui.column().classes(\"w-full p-6 max-w-3xl mx-auto gap-4\"):\n       ui.label(\"Chat (echo bot)\").classes(\"text-3xl font-bold\")\n\n\n       @ui.refreshable\n       def chat_log():\n           for m in state.messages:\n               ui.chat_message(\n                   m[\"text\"],\n                   name=\"You\" if m[\"role\"] == \"user\" else \"Bot\",\n                   sent=m[\"role\"] == \"user\",\n                   stamp=datetime.now().strftime(\"%H:%M\"),\n               )\n\n\n       with ui.card().classes(\"w-full\"):\n           chat_log()\n\n\n       async def send():\n           text = (entry.value or \"\").strip()\n           if not text:\n               return\n           state.messages.append({\"role\": \"user\", \"text\": text})\n           entry.value = \"\"\n           chat_log.refresh()\n           await asyncio.sleep(1)\n           reply = f'You said: \"{text}\" \u2014 that is {len(text)} characters!'\n           state.messages.append({\"role\": \"assistant\", \"text\": reply})\n           chat_log.refresh()\n\n\n       with ui.row().classes(\"w-full items-center\"):\n           entry = ui.input(placeholder=\"Type a message\u2026\") \n               .classes(\"flex-grow\").on(\"keydown.enter\", send)\n           ui.button(icon=\"send\", on_click=send).props(\"color=primary round\")\n\n\n\n\ndef _free_port() -> int:\n   s = socket.socket()\n   s.bind((\"\", 0))\n   port = s.getsockname()[1]\n   s.close()\n   return port\n\n\nPORT = _free_port()\n\n\n\n\ndef _serve():\n   ui.run(host=\"0.0.0.0\", port=PORT, reload=False, show=False,\n          title=\"NiceGUI Tutorial\", storage_secret=\"colab-demo\")\n\n\nthreading.Thread(target=_serve, daemon=True).start()\ntime.sleep(4)\n\n\n\n\ntry:\n   from google.colab import output\n   from google.colab.output import eval_js\n   output.serve_kernel_port_as_iframe(PORT, height=\"850\")\n   print(f\"App running on port {PORT}\")\n   print(\"Open in a new browser tab:\")\n   print(eval_js(f\"google.colab.kernel.proxyPort({PORT})\"))\nexcept ImportError:\n   print(f\"Not in Colab \u2014 open http:\/\/localhost:{PORT} in your browser\")<\/code><\/pre>\n<\/div>\n<\/div>\n
We develop an asynchronous chat interface that simulates real-time interaction. We manage chat messages in the shared state and dynamically refresh the chat log after each message. Also, we configure the app to run on a dynamically selected free port in a background thread and expose it within the Colab environment.<\/p>\n
In conclusion, we developed a comprehensive understanding of how to build and structure modern web applications using NiceGUI. We brought together multiple advanced concepts such as state management, reactive UI updates, routing, asynchronous workflows, and real-time visualization into a single cohesive system. We also addressed practical challenges, such as running web servers in notebook environments and ensuring component reusability. This end-to-end implementation demonstrates the flexibility and power of NiceGUI and also equips us with the skills to prototype, test, and scale interactive applications efficiently.<\/p>\n
\n
Check out\u00a0the\u00a0Full Codes with Notebook here<\/a><\/strong>.\u00a0<\/strong>Also,\u00a0feel free to follow us on\u00a0Twitter<\/mark><\/a><\/strong>\u00a0and don\u2019t forget to join our\u00a0130k+ ML SubReddit<\/a><\/strong>\u00a0and Subscribe to\u00a0our Newsletter<\/a><\/strong>. Wait! are you on telegram?\u00a0now you can join us on telegram as well.<\/a><\/strong><\/p>\n
Need to partner with us for promoting your GitHub Repo OR Hugging Face Page OR Product Release OR Webinar etc.?\u00a0Connect with us<\/mark><\/a><\/strong><\/p>\n
The post How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat<\/a> appeared first on MarkTechPost<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
In this tutorial, we build a fully interactive, multi-page web application using NiceGUI. We start by setting up the environment and designing a reusable layout that includes navigation, theming, and dark mode support. As we move forward, we implement a live dashboard with real-time metrics and charts, demonstrating reactive bindings and timed updates. We then extend the application with a complete CRUD-based todo system, followed by a validated form with dialogs and user feedback mechanisms. We also incorporate file upload functionality with dynamic previews and conclude the feature set with an asynchronous chat interface that simulates real-time interaction. Also, we ensure that the app runs seamlessly in Colab by using background threading and dynamic port allocation. Copy CodeCopiedUse a different Browser import sys import subprocess subprocess.run([sys.executable, “-m”, “pip”, “install”, “-q”, “nicegui”], check=True) import threading, time, random, asyncio, base64, socket from datetime import datetime from nicegui import ui, events class State: def __init__(self): self.todos = [ {“id”: 1, “task”: “Explore NiceGUI”, “done”: True, “priority”: “High”}, {“id”: 2, “task”: “Build a dashboard”, “done”: False, “priority”: “Medium”}, {“id”: 3, “task”: “Deploy to production”, “done”: False, “priority”: “Low”}, ] self.next_id = 4 self.metrics = {“users”: 1247, “revenue”: 8420, “orders”: 53} self.series = [random.uniform(20, 80) for _ in range(20)] self.messages = [{“role”: “assistant”, “text”: “Hi! Type something and I will echo it back.”}] state = State() def page_shell(active: str) -> None: dark = ui.dark_mode() drawer = ui.left_drawer(value=True).classes(“bg-grey-2”) with drawer: ui.label(“Navigation”).classes(“text-lg font-bold p-2”) for label, path, icon in [ (“Dashboard”, “\/”, “dashboard”), (“Todos”, “\/todos”, “check_circle”), (“Form”, “\/form”, “edit_note”), (“Upload”, “\/upload”, “upload_file”), (“Chat”, “\/chat”, “chat”), ]: cls = “w-full” + (” bg-primary text-white” if label == active else “”) ui.button(label, on_click=lambda p=path: ui.navigate.to(p), icon=icon).classes(cls).props(“flat align=left no-caps”) with ui.header(elevated=True).classes(“items-center justify-between bg-primary”): with ui.row().classes(“items-center”): ui.button(on_click=drawer.toggle, icon=”menu”).props(“flat color=white”) ui.label(” NiceGUI Tutorial”).classes(“text-xl font-semibold text-white”) ui.button(icon=”dark_mode”, on_click=dark.toggle).props(“flat color=white”) with ui.footer().classes(“bg-grey-3 text-black justify-center”): ui.label(“Built with NiceGUI \u00b7 Tutorial Demo”) We install and import all required libraries, then initialize our application state. We define a central State class to manage todos, metrics, chart data, and chat messages across the app. We also built a reusable layout function that provides navigation, a header, a footer, and dark mode support for all pages. Copy CodeCopiedUse a different Browser @ui.page(“\/”) def dashboard(): page_shell(“Dashboard”) with ui.column().classes(“w-full p-6 gap-6”): ui.label(“Live Dashboard”).classes(“text-3xl font-bold”) with ui.row().classes(“gap-4 flex-wrap”): for key, label, color, icon in [ (“users”, “Users”, “primary”, “group”), (“revenue”, “Revenue”, “positive”, “attach_money”), (“orders”, “Orders”, “warning”, “shopping_cart”), ]: with ui.card().classes(“w-60”): with ui.row().classes(“items-center justify-between w-full”): ui.label(label).classes(“text-gray-500″) ui.icon(icon, size=”md”).classes(f”text-{color}”) ui.label().classes(f”text-3xl font-bold text-{color}”) .bind_text_from(state.metrics, key, backward=lambda v: f”{v:,}”) with ui.card().classes(“w-full”): ui.label(“Live stream (updates every second)”).classes(“text-lg font-semibold”) chart = ui.echart({ “tooltip”: {“trigger”: “axis”}, “xAxis”: {“type”: “category”, “data”: list(range(len(state.series)))}, “yAxis”: {“type”: “value”}, “series”: [{“data”: list(state.series), “type”: “line”, “smooth”: True, “areaStyle”: {}}], }).classes(“h-64 w-full”) def tick(): state.series.append(random.uniform(20, 80)) state.series.pop(0) chart.options[“series”][0][“data”] = list(state.series) chart.update() state.metrics[“users”] += random.randint(-2, 4) state.metrics[“revenue”] += random.randint(-100, 200) state.metrics[“orders”] = max(0, state.metrics[“orders”] + random.randint(-1, 3)) ui.timer(1.0, tick) We create the dashboard page and structure it with responsive UI components. We bind metric cards directly to the state to enable automatic updates and display real-time values. We also implement a live chart using ECharts and dynamically update both the chart and the metrics using a timer. Copy CodeCopiedUse a different Browser @ui.page(“\/todos”) def todos_page(): page_shell(“Todos”) with ui.column().classes(“w-full p-6 gap-4 max-w-4xl mx-auto”): ui.label(“Todos”).classes(“text-3xl font-bold”) with ui.card().classes(“w-full”): with ui.row().classes(“w-full items-center gap-2″): task_input = ui.input(placeholder=”What needs doing?”).classes(“flex-grow”) priority_sel = ui.select([“Low”, “Medium”, “High”], value=”Medium”).classes(“w-36”) def add_todo(): if not task_input.value or not task_input.value.strip(): ui.notify(“Task cannot be empty”, type=”warning”); return state.todos.append({ “id”: state.next_id, “task”: task_input.value.strip(), “done”: False, “priority”: priority_sel.value, }) state.next_id += 1 task_input.value = “” todo_list.refresh() ui.notify(“Added!”, type=”positive”) ui.button(“Add”, icon=”add”, on_click=add_todo).props(“color=primary”) task_input.on(“keydown.enter”, add_todo) @ui.refreshable def todo_list(): if not state.todos: ui.label(“Nothing here yet “).classes(“text-gray-500”); return for todo in state.todos: with ui.card().classes(“w-full”): with ui.row().classes(“w-full items-center gap-3”): ui.checkbox(value=todo[“done”], on_change=lambda e, t=todo: t.update(done=e.value)) lbl = ui.label(todo[“task”]).classes(“flex-grow text-lg”) if todo[“done”]: lbl.style(“text-decoration: line-through; opacity: 0.5”) color = {“High”: “red”, “Medium”: “orange”, “Low”: “green”}[todo[“priority”]] ui.badge(todo[“priority”], color=color) def make_del(t=todo): def _del(): state.todos.remove(t) todo_list.refresh() ui.notify(“Removed”, type=”info”) return _del ui.button(icon=”delete”, on_click=make_del()) .props(“flat color=red round dense”) todo_list() We implement a complete CRUD-based todo system with add, update, and delete functionality. We handle user input validation and dynamically refresh the UI using NiceGUI\u2019s refreshable components. We also enhance the UI with checkboxes, badges, and notifications to improve interactivity and feedback. Copy CodeCopiedUse a different Browser @ui.page(“\/form”) def form_page(): page_shell(“Form”) with ui.column().classes(“w-full p-6 max-w-2xl mx-auto gap-4”): ui.label(“Profile Form”).classes(“text-3xl font-bold”) with ui.card().classes(“w-full gap-2”): name = ui.input(“Name”, validation={“Required”: lambda v: bool(v)}) email = ui.input(“Email”, validation={“Must be an email”: lambda v: “@” in (v or “”)}) age = ui.number(“Age”, value=18, min=0, max=120) ui.label(“Subscription plan”).classes(“mt-2 text-gray-600”) plan = ui.radio([“Free”, “Pro”, “Enterprise”], value=”Free”).props(“inline”) agree = ui.checkbox(“I accept the terms”) async def submit(): if not (name.value and “@” in (email.value or “”) and agree.value): ui.notify(“Please fix the form first”, type=”negative”); return with ui.dialog() as d, ui.card(): ui.label(“Submitted!”).classes(“text-xl font-bold”) ui.label(f”Name: {name.value}”) ui.label(f”Email: {email.value}”) ui.label(f”Age: {age.value}”) ui.label(f”Plan: {plan.value}”) ui.button(“OK”, on_click=d.close).props(“color=primary”) d.open() ui.button(“Submit”, on_click=submit).props(“color=primary”) @ui.page(“\/upload”) def upload_page(): page_shell(“Upload”) with ui.column().classes(“w-full p-6 max-w-3xl mx-auto gap-4”): ui.label(“File Upload”).classes(“text-3xl font-bold”) result = ui.column().classes(“w-full”) def handle_upload(e: events.UploadEventArguments): content = e.content.read() with result: with ui.card().classes(“w-full”): ui.label(f” {e.name}”).classes(“font-semibold”) ui.label(f”Size: {len(content):,} bytes \u00b7 type: {e.type}”) if e.type and e.type.startswith(“image\/”): b64 = base64.b64encode(content).decode() ui.image(f”data:{e.type};base64,{b64}”).classes(“w-64 rounded”) else: try: ui.code(content[:500].decode(“utf-8″, errors=”replace”)) except Exception: pass ui.notify(f”Uploaded {e.name}”, type=”positive”) ui.upload(on_upload=handle_upload, multiple=True, auto_upload=True).classes(“w-full”) We build a form with validation rules and handle submission using an asynchronous function. We display user input in a dialog upon successful submission and ensure proper validation before processing. We also implement a file upload feature that supports multiple files and provides image previews and content previews for other file types. Copy CodeCopiedUse a different Browser @ui.page(“\/chat”) def chat_page(): page_shell(“Chat”) with ui.column().classes(“w-full p-6 max-w-3xl mx-auto gap-4”): ui.label(“Chat (echo bot)”).classes(“text-3xl font-bold”) @ui.refreshable def chat_log(): for m in state.messages: ui.chat_message( m[“text”], name=”You” if m[“role”] == “user” else “Bot”, sent=m[“role”] == “user”, stamp=datetime.now().strftime(“%H:%M”), ) with ui.card().classes(“w-full”): chat_log() async def send(): text = (entry.value or “”).strip() if not text: return state.messages.append({“role”: “user”, “text”: text}) entry.value = “” chat_log.refresh() await asyncio.sleep(1) reply = f’You said: “{text}” \u2014 that is {len(text)} characters!’ state.messages.append({“role”: “assistant”, “text”: reply}) chat_log.refresh() with ui.row().classes(“w-full items-center”): entry = ui.input(placeholder=”Type a message\u2026”) .classes(“flex-grow”).on(“keydown.enter”, send)<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pmpro_default_level":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_pvb_checkbox_block_on_post":false,"footnotes":""},"categories":[52,5,7,1],"tags":[],"class_list":["post-88497","post","type-post","status-publish","format-standard","hentry","category-ai-club","category-committee","category-news","category-uncategorized","pmpro-has-access"],"acf":[],"yoast_head":"\nHow to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat - YouZum<\/title>\n<meta name=\"description\" content=\"\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e42\u0e14\u0e23\u0e19\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/youzum.net\/fr\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat - YouZum\" \/>\n<meta property=\"og:description\" content=\"\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e42\u0e14\u0e23\u0e19\" \/>\n<meta property=\"og:url\" content=\"https:\/\/youzum.net\/fr\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\" \/>\n<meta property=\"og:site_name\" content=\"YouZum\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DroneAssociationTH\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-06T16:07:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png\" \/>\n<meta name=\"author\" content=\"admin NU\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin NU\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\"},\"author\":{\"name\":\"admin NU\",\"@id\":\"https:\/\/yousum.gpucore.co\/#\/schema\/person\/97fa48242daf3908e4d9a5f26f4a059c\"},\"headline\":\"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat\",\"datePublished\":\"2026-05-06T16:07:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\"},\"wordCount\":592,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/yousum.gpucore.co\/#organization\"},\"image\":{\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png\",\"articleSection\":[\"AI\",\"Committee\",\"News\",\"Uncategorized\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\",\"url\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\",\"name\":\"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat - YouZum\",\"isPartOf\":{\"@id\":\"https:\/\/yousum.gpucore.co\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png\",\"datePublished\":\"2026-05-06T16:07:30+00:00\",\"description\":\"\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e42\u0e14\u0e23\u0e19\",\"breadcrumb\":{\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage\",\"url\":\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png\",\"contentUrl\":\"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/youzum.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/yousum.gpucore.co\/#website\",\"url\":\"https:\/\/yousum.gpucore.co\/\",\"name\":\"YouSum\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/yousum.gpucore.co\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/yousum.gpucore.co\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/yousum.gpucore.co\/#organization\",\"name\":\"Drone Association Thailand\",\"url\":\"https:\/\/yousum.gpucore.co\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/yousum.gpucore.co\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/youzum.net\/wp-content\/uploads\/2024\/11\/tranparent-logo.png\",\"contentUrl\":\"https:\/\/youzum.net\/wp-content\/uploads\/2024\/11\/tranparent-logo.png\",\"width\":300,\"height\":300,\"caption\":\"Drone Association Thailand\"},\"image\":{\"@id\":\"https:\/\/yousum.gpucore.co\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/DroneAssociationTH\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/yousum.gpucore.co\/#\/schema\/person\/97fa48242daf3908e4d9a5f26f4a059c\",\"name\":\"admin NU\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/yousum.gpucore.co\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/youzum.net\/wp-content\/uploads\/avatars\/2\/1746849356-bpfull.png\",\"contentUrl\":\"https:\/\/youzum.net\/wp-content\/uploads\/avatars\/2\/1746849356-bpfull.png\",\"caption\":\"admin NU\"},\"url\":\"https:\/\/youzum.net\/fr\/members\/adminnu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat - YouZum","description":"\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e42\u0e14\u0e23\u0e19","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/youzum.net\/fr\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/","og_locale":"fr_FR","og_type":"article","og_title":"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat - YouZum","og_description":"\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e42\u0e14\u0e23\u0e19","og_url":"https:\/\/youzum.net\/fr\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/","og_site_name":"YouZum","article_publisher":"https:\/\/www.facebook.com\/DroneAssociationTH\/","article_published_time":"2026-05-06T16:07:30+00:00","og_image":[{"url":"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png","type":"","width":"","height":""}],"author":"admin NU","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"admin NU","Dur\u00e9e de lecture estim\u00e9e":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#article","isPartOf":{"@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/"},"author":{"name":"admin NU","@id":"https:\/\/yousum.gpucore.co\/#\/schema\/person\/97fa48242daf3908e4d9a5f26f4a059c"},"headline":"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat","datePublished":"2026-05-06T16:07:30+00:00","mainEntityOfPage":{"@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/"},"wordCount":592,"commentCount":0,"publisher":{"@id":"https:\/\/yousum.gpucore.co\/#organization"},"image":{"@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage"},"thumbnailUrl":"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png","articleSection":["AI","Committee","News","Uncategorized"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/","url":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/","name":"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat - YouZum","isPartOf":{"@id":"https:\/\/yousum.gpucore.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage"},"image":{"@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage"},"thumbnailUrl":"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png","datePublished":"2026-05-06T16:07:30+00:00","description":"\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e42\u0e14\u0e23\u0e19","breadcrumb":{"@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#primaryimage","url":"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png","contentUrl":"https:\/\/s.w.org\/images\/core\/emoji\/17.0.2\/72x72\/1f680.png"},{"@type":"BreadcrumbList","@id":"https:\/\/youzum.net\/how-to-build-a-fully-interactive-multi-page-nicegui-application-with-real-time-dashboard-crud-operations-file-upload-and-async-chat\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/youzum.net\/"},{"@type":"ListItem","position":2,"name":"How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat"}]},{"@type":"WebSite","@id":"https:\/\/yousum.gpucore.co\/#website","url":"https:\/\/yousum.gpucore.co\/","name":"YouSum","description":"","publisher":{"@id":"https:\/\/yousum.gpucore.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yousum.gpucore.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/yousum.gpucore.co\/#organization","name":"Drone Association Thailand","url":"https:\/\/yousum.gpucore.co\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/yousum.gpucore.co\/#\/schema\/logo\/image\/","url":"https:\/\/youzum.net\/wp-content\/uploads\/2024\/11\/tranparent-logo.png","contentUrl":"https:\/\/youzum.net\/wp-content\/uploads\/2024\/11\/tranparent-logo.png","width":300,"height":300,"caption":"Drone Association Thailand"},"image":{"@id":"https:\/\/yousum.gpucore.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DroneAssociationTH\/"]},{"@type":"Person","@id":"https:\/\/yousum.gpucore.co\/#\/schema\/person\/97fa48242daf3908e4d9a5f26f4a059c","name":"admin NU","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/yousum.gpucore.co\/#\/schema\/person\/image\/","url":"https:\/\/youzum.net\/wp-content\/uploads\/avatars\/2\/1746849356-bpfull.png","contentUrl":"https:\/\/youzum.net\/wp-content\/uploads\/avatars\/2\/1746849356-bpfull.png","caption":"admin NU"},"url":"https:\/\/youzum.net\/fr\/members\/adminnu\/"}]}},"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"admin NU","author_link":"https:\/\/youzum.net\/fr\/members\/adminnu\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/youzum.net\/fr\/category\/ai-club\/\" rel=\"category tag\">AI<\/a> <a href=\"https:\/\/youzum.net\/fr\/category\/committee\/\" rel=\"category tag\">Committee<\/a> <a href=\"https:\/\/youzum.net\/fr\/category\/news\/\" rel=\"category tag\">News<\/a> <a href=\"https:\/\/youzum.net\/fr\/category\/uncategorized\/\" rel=\"category tag\">Uncategorized<\/a>","rttpg_excerpt":"In this tutorial, we build a fully interactive, multi-page web application using NiceGUI. We start by setting up the environment and designing a reusable layout that includes navigation, theming, and dark mode support. As we move forward, we implement a live dashboard with real-time metrics and charts, demonstrating reactive bindings and timed updates. We then\u2026","_links":{"self":[{"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/posts\/88497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/comments?post=88497"}],"version-history":[{"count":0,"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/posts\/88497\/revisions"}],"wp:attachment":[{"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/media?parent=88497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/categories?post=88497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/youzum.net\/fr\/wp-json\/wp\/v2\/tags?post=88497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}