# nicegui

这个项目有点类似 [gradio](https://git.yoqi.me/python/gradio)，python 快速开发web前后端项目。

用户无需编写css，html，直接通过python代码快速布局，并使用 **fastapi** ，快速打通前后端。此外对接**sqlite**数据库。


目前还不成熟，组件不是很多。

## Usage

直接打开 https://github.com/zauberzeug/nicegui 下 examples目录查看代码，使用比较简单。



main.py
```
import frontend
from fastapi import FastAPI

app = FastAPI()


@app.get('/')
def read_root():
    return {'Hello': 'World'}


frontend.init(app)

```

**frontend.py**
```
from fastapi import FastAPI

from nicegui import app, ui


def init(fastapi_app: FastAPI) -> None:
    @ui.page('/show')
    def show():
        ui.label('Hello, FastAPI!')

        # NOTE dark mode will be persistent for each user across tabs and server restarts
        ui.dark_mode().bind_value(app.storage.user, 'dark_mode')
        ui.checkbox('dark mode').bind_value(app.storage.user, 'dark_mode')

    ui.run_with(
        fastapi_app,
        storage_secret='pick your private secret here',  # NOTE setting a secret is optional but allows for persistent storage per user
    )

```

启动：
```
uvicorn main:app --reload --log-level debug --port 8000
```


## 源码分析

首先 **nicegui 基于fastapi开发web框架**。

当执行启动命令，调用 uvicorn 命令，启动一个 FastAPI 实例app，在 frontend.py 中定义的UI，但是python不需要编译，那怎么渲染html页面呢？

比如添加
```
ui.label('Hello, FastAPI!')
```
代码，如何在页面上生成一个div呢？





**1、首先nicegui启动app实例：**

```
class App(FastAPI):

    def __init__(self, **kwargs) -> None:
        super().__init__(**kwargs)
        self.native = Native()
        self.storage = Storage()
        self.urls = ObservableSet()
```

继承 FastAPI，在启动app的时候，注入事件，比如：

```
app.add_middleware(GZipMiddleware)
app.add_middleware(RedirectWithPrefixMiddleware)
```

服务器相应请求前，对内容zip压缩。接下来设置静态资源文件目录：

```
app.mount(f'/_nicegui/{__version__}/static', static_files, name='static')

```

为了基于chatgpt等新AI应用流方式相应的快速开发，封装了 respond stream方式的调用：

```
@sio.on('event')
def on_event(sid: str, msg: Dict) -> None:
    client = get_client(sid)
    if not client or not client.has_socket_connection:
        return
    handle_event(client, msg)
```



2、

```
    @ui.page('/show')
    def show():
        ui.label('Hello, FastAPI!')

        # NOTE dark mode will be persistent for each user across tabs and server restarts
        ui.dark_mode().bind_value(app.storage.user, 'dark_mode')
        ui.checkbox('dark mode').bind_value(app.storage.user, 'dark_mode')

```