{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 集成 NiceGUI"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "from fastapi import FastAPI\n",
    "from nicegui import app as gui, ui"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "定义简单的 `ui`："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "@ui.page('/')\n",
    "def show():\n",
    "    ui.label('Hello, FastAPI!')\n",
    "\n",
    "    # NOTE 深色模式将为每个用户在标签页和服务器重启之间保持持久\n",
    "    ui.dark_mode().bind_value(gui.storage.user, 'dark_mode')\n",
    "    ui.checkbox('dark mode').bind_value(gui.storage.user, 'dark_mode')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "将 `ui` 附加到 `app`："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "app = FastAPI()\n",
    "ui.run_with(\n",
    "    app,\n",
    "    mount_path='/gui',  # NOTE 如果你希望传递给 `@ui.page` 的路径位于根目录，这个可以省略\n",
    "    storage_secret='在这里选择你的私人密钥',  # NOTE 设置密钥是可选的，但允许每个用户进行持久存储。\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "最后按照普通运行 `app` 的方式运行即可。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 附加 `dash` 到 `ui`\n",
    "\n",
    "你可能需要把 [](../dash/index) 集成到 `ui`，只需要，在定义 `app` 之前添加如下代码即可：\n",
    "\n",
    "```python\n",
    "from fastapi.middleware.wsgi import WSGIMiddleware\n",
    "dash_app = create_dash_app(requests_pathname_prefix=\"/dash\")\n",
    "gui.mount(\"/dash\", WSGIMiddleware(dash_app.server))\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "其中 `create_dash_app` 可以这样写：\n",
    "\n",
    "````python\n",
    "import sys\n",
    "import io\n",
    "from pathlib import Path\n",
    "import toml\n",
    "import numpy as np\n",
    "import dash\n",
    "from dash import dcc, html\n",
    "from dash.dependencies import Input, Output, State\n",
    "from d2py.tools.dashstyle.server import create_app, run_server\n",
    "\n",
    "def create_dash_app(requests_pathname_prefix: str = None) -> dash.Dash:\n",
    "    app = create_app(\n",
    "        __name__,\n",
    "        use_pages=True,\n",
    "        eager_loading=True, # 修复 dash.exceptions.DependencyException: Error loading dependency. \"plotly\" is not a registered library.\n",
    "        requests_pathname_prefix=requests_pathname_prefix)\n",
    "    app.scripts.config.serve_locally = False\n",
    "    dcc._js_dist[0]['external_url'] = 'https://cdn.plot.ly/plotly-basic-latest.min.js'\n",
    "    app.layout = html.Article([\n",
    "        html.H1('工具', className=\"w3-center\"),\n",
    "        html.Header([\n",
    "            html.Div(\n",
    "                dcc.Link(f\"{page['name']}\", href=page[\"relative_path\"]), className=\"w3-bar-item w3-button\") \n",
    "                for page in dash.page_registry.values()\n",
    "        ], className=\"w3-bar w3-light-grey\"),\n",
    "        dash.page_container,\n",
    "    ], className=\"w3-container w3-pale-yellow\", style={\"height\": \"800px\", \"width\": \"100%\"})\n",
    "    return app\n",
    "    \n",
    "````\n",
    "\n",
    "创建具有分页功能的 `dash` 子页面。"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}