Refactor web ui interface. (#29)

LICENSE

@@ -208,4 +208,184 @@
 
 Some codes of tests/run.py is modified from
 https://github.com/alibaba/FederatedScope/blob/master/tests/run.py, which is
-also licensed under the terms of the Apache 2.0.
+also licensed under the terms of the Apache 2.0.
+
+
+--------------------------------------------------------------------------------
+
+Code in src/agentscope/web/static/js/socket.io.js is adapted from
+https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js (MIT License)
+
+Copyright (c) 2014-2021 Guillermo Rauch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+Code in src/agentscope/web/static/js/jquery-3.3.1.min.js is adapted from
+https://code.jquery.com/jquery-3.3.1.min.js (MIT License)
+
+Copyright (c) JS Foundation and other contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+Code in src/agentscope/web/static/js/bootstrap.bundle.min.js is adapted from
+https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
+ (MIT License)
+
+Copyright (c) 2011-2019 The Bootstrap Authors (https://github
+.com/twbs/bootstrap/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+Code in src/agentscope/web/static/js/bootstrap-table.min.js is adapted from
+https://unpkg.com/[email protected]/dist/bootstrap-table.min.js (MIT
+License)
+
+Copyright (c) wenzhixin <[email protected]> (http://wenzhixin.net.cn/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+Code in src/agentscope/web/static/css/bootstrap.min.css is adapted from
+https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css (MIT
+License)
+
+Copyright 2011-2019 The Bootstrap Authors
+Copyright 2011-2019 Twitter, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+--------------------------------------------------------------------------------
+
+Fonts in src/agentscope/web/static/fonts/KRYPTON.ttf is adapted from
+https://github.com/githubnext/monaspace (SIL Open Font License 1.1). These
+fonts are distributed with their original license. See https://github
+.com/githubnext/monaspace/blob/main/LICENSE for the full text of the license.
+The following font families are included:
+
+- Monaspace (with subfamilies: Krypton)
+
+Copyright (c) 2023, GitHub https://github.com/githubnext/monaspace
+with Reserved Font Name "Monaspace", including subfamilies: "Argon", "Neon",
+"Xenon", "Radon", and "Krypton"
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+Fonts in src/agentscope/web/static/fonts/OSWALD.ttf is adapted from
+https://fonts.google.com/specimen/Oswald (SIL Open Font License 1.1). These
+fonts are distributed with their original license. See https://github
+.com/googlefonts/OswaldFont/blob/main/OFL.txt for the full text of the license.
+
+Copyright 2016 The Oswald Project Authors (https://github
+.com/googlefonts/OswaldFont)
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------

docs/sphinx_doc/source/agentscope.web_ui.rst → docs/sphinx_doc/source/agentscope.web.rst

@@ -4,7 +4,7 @@ Web UI package
 app module
 -----------------------------
 
-.. automodule:: agentscope.web_ui.app
+.. automodule:: agentscope.web.app
    :members:
    :undoc-members: gradio_groupchat
    :show-inheritance:

docs/sphinx_doc/source/index.rst

@@ -35,7 +35,7 @@ AgentScope Documentation
    agentscope.service
    agentscope.rpc
    agentscope.utils
-   agentscope.web_ui
+   agentscope.web
    agentscope
 
 Indices and tables

docs/sphinx_doc/source/tutorial/102-concepts.md

@@ -29,7 +29,7 @@ AgentScope
 │   |   ├── service              # Services offering functions independent of memory and state.
 │   |   ├── utils                # Auxiliary utilities and helper functions.
 │   |   ├── message.py           # Definitions and implementations of messaging between agents.
-|   |   ├── web_ui               # WebUI used to show dialogs.
+|   |   ├── web                  # WebUI used to show dialogs.
 │   |   ├── prompt.py            # Prompt engineering module for model input.
 │   |   ├── ... ..
 │   |   ├── ... ..

docs/sphinx_doc/source/tutorial/105-logging.md

@@ -64,45 +64,32 @@ logger.error("The agent encountered an unexpected error while processing a reque
 
 ## Integrating logging with WebUI
 
-To visualize these logs, we provide a customized gradio component in `src/agentscope/web_ui`.
+To visualize these logs and running details, AgentScope provides a simple
+web interface.
 
 ### Quick Running
 
-For convince, we provide the pre-built app in a wheel file, you can run the WebUI in the following command:
+You can run the WebUI in the following python code:
 
-```shell
-pip install gradio_groupchat-0.0.1-py3-none-any.whl
-python app.py
-```
-
-After the init and entering the UI port printed by `app.py`, e.g., `http://127.0.0.1:7860/`, you can choose `run.log.demo` in the top-middle `FileSelector` window (it's a demo log file provided by us). Then, the dialog and system log should be shown correctly in the bottom windows.
+```python
+import agentscope
 
-![webui](https://img.alicdn.com/imgextra/i2/O1CN01hSaFue1EdL2yCEznc_!!6000000000374-2-tps-3066-1808.png)
+agentscope.web.init(
+    path_save="YOUR_SAVE_PATH"
+)
+```
 
-### For Other Customization
+By this way, you can see all the running instances and projects in `http://127.
+0.0.1:5000` as follows:
 
-To customize the backend, or the frontend of the provided WebUI, you can
+![webui](https://img.alicdn.com/imgextra/i3/O1CN01kpHFkn1HpeYEkn60I_!!6000000000807-0-tps-3104-1849.jpg)
 
-```shell
-# generate the template codes
-# for network connectivity problem, try to run
-# `npm config rm proxy && npm config rm https-proxy` first
-gradio cc create GroupChat --template Chatbot
-# replace the generated app.py into our built-in app.py
-cp -f app.py groupchat/demo
-# debug and develop your web_ui
-cd groupchat
-# edit the app.py, or other parts you want, reference link:
-# https://www.gradio.app/guides/custom-components-in-five-minutes
-gradio cc dev
-```
+By clicking a running instance, we can observe more details.
 
-If you want to release the modification, you can do
+![The running details](https://img.alicdn.com/imgextra/i2/O1CN01AZtsf31MIHm4FmjjO_!!6000000001411-0-tps-3104-1849.jpg)
 
-```shell
-gradio cc build
-pip install <path-to-whl>
-python app.py
-```
+### Note
+The WebUI is still under development. We will provide more features and
+better user experience in the future.
 
 [[Return to the top]](#logging-and-webui)

setup.py

@@ -44,6 +44,9 @@
     "requests",
     "openai>=1.3.0",
     "numpy",
+    "Flask==3.0.0",
+    "Flask-Cors==4.0.0",
+    "Flask-SocketIO==5.3.6",
 ]
 
 distribute_requires = minimal_requires + rpc_requires

src/agentscope/__init__.py

@@ -9,6 +9,7 @@
 from . import service
 from . import message
 from . import prompt
+from . import web
 
 # objects or function
 from .msghub import msghub

src/agentscope/_init.py

@@ -23,9 +23,9 @@ def init(
     project: Optional[str] = None,
     name: Optional[str] = None,
     save_dir: str = _DEFAULT_DIR,
-    save_log: bool = False,
-    save_code: bool = False,
-    save_api_invoke: bool = False,
+    save_log: bool = True,
+    save_code: bool = True,
+    save_api_invoke: bool = True,
     logger_level: LOG_LEVEL = _DEFAULT_LOG_LEVEL,
     agent_configs: Optional[Union[str, list, dict]] = None,
 ) -> Sequence[AgentBase]:
@@ -142,9 +142,19 @@ def init_process(
         logger_level (`LOG_LEVEL`, defaults to `"INFO"`):
             The logging level of logger.
     """
+    # Init logger
+    dir_log = str(file_manager.dir_log) if save_log else None
+    setup_logger(dir_log, logger_level)
+
+    # Load model configs if needed
+    if model_configs is not None:
+        read_model_configs(model_configs)
+
     # Init the runtime
-    _runtime.project = project
-    _runtime.name = name
+    if project is not None:
+        _runtime.project = project
+    if name is not None:
+        _runtime.name = name
     if runtime_id is not None:
         _runtime.runtime_id = runtime_id
 
@@ -153,11 +163,3 @@ def init_process(
 
     # Init monitor
     _ = MonitorFactory.get_monitor(db_path=file_manager.path_db)
-
-    # Init logger
-    dir_log = str(file_manager.dir_log) if save_log else None
-    setup_logger(dir_log, logger_level)
-
-    # Load model configs if needed
-    if model_configs is not None:
-        read_model_configs(model_configs)

src/agentscope/agents/user_agent.py

@@ -85,6 +85,8 @@ def reply(
             **kwargs,  # type: ignore[arg-type]
         )
 
+        self.speak(msg)
+
         # Add to memory
         self.memory.add(msg)
 

src/agentscope/web/README.md

@@ -0,0 +1,41 @@
+# AgentScope Web UI
+
+A user interface for AgentScope, which is a tool for monitoring and
+analyzing the communication of agents in a multi-agent application.
+
+## Quick Start
+To start a web UI, you can run the following python code:
+
+```python
+import agentscope
+
+agentscope.web.init(
+    path_save="YOUR_SAVE_PATH",
+    host="YOUR_WEB_IP",         # defaults to 127.0.0.1
+    port=5000                   # defaults to 5000
+)
+```
+The argument `path_save` refers to the saving directory of your application,
+which defaults to `./runs` in AgentScope.
+
+Note when running AgentScope applications, the argument `save_log` of
+`agentscope.init` function should be `True` to enable saving the logging files.
+```python
+import agentscope
+
+agentscope.init(
+    # ...
+    save_log=True,      # defaults to True
+    # ...
+)
+```
+## A Running Example
+
+The home page of web UI, which lists all available projects and runs in the
+given saving path.
+
+![The web UI](https://img.alicdn.com/imgextra/i3/O1CN01kpHFkn1HpeYEkn60I_!!6000000000807-0-tps-3104-1849.jpg)
+
+By clicking a running instance, we can observe more details.
+
+![The running details](https://img.alicdn.com/imgextra/i2/O1CN01AZtsf31MIHm4FmjjO_!!6000000001411-0-tps-3104-1849.jpg)