How to Build a Fully Interactive Multi-Page NiceGUI Application with Real-Time Dashboard, CRUD Operations, File Upload, and Async Chat


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 · Tutorial Demo")



Source link

  • Related Posts

    Fastino Labs Open-Sources GLiGuard: A 300M Parameter Safety Moderation Model That Matches or Exceeds Accuracy of Models 23–90x Its Size

    As LLM-powered applications move into production — and as AI agents take on more consequential tasks like browsing the web, writing and executing code, and interacting with external services —…

    Mira Murati’s Thinking Machines Lab Introduces Interaction Models: A Native Multimodal Architecture for Real-Time Human-AI Collaboration

    Most AI systems today work in turns. You type or speak, the model waits, processes your input, and then responds. That’s the entire interaction loop. Thinking Machines Lab, an AI…

    Leave a Reply

    Your email address will not be published. Required fields are marked *