Update UI docs (#397)

* Update console docs * WIP: Update mesop docs * WIP: Update mesop docs * Update mesop docs
airtai · Oct 15, 2024 · fb64a21 · fb64a21
1 parent 120e683
commit fb64a21
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 37 deletions.
diff --git a/docs/docs/en/user-guide/ui/console/basics.md b/docs/docs/en/user-guide/ui/console/basics.md
@@ -4,6 +4,16 @@
 
 Below is an example that demonstrates how to set up a simple learning conversation between a student and a teacher using **[ConsoleUI](../../../../api/fastagency/ui/console/ConsoleUI/)**.
 
+## Installation
+
+Before getting started, make sure you have installed FastAgency with support for the AutoGen runtime by running the following command:
+
+```bash
+pip install "fastagency[autogen]"
+```
+
+This installation includes the AutoGen runtime, allowing you to build multi-agent workflows and integrate external APIs seamlessly.
+
 ## Example: Student and Teacher Learning Chat
 
 This example demonstrates how to create a workflow where a student agent interacts with a teacher agent. The student asks questions, and the teacher provides responses, simulating a learning environment. The interaction is facilitated through the console using **[ConsoleUI](../../../../api/fastagency/ui/console/ConsoleUI/)**.
@@ -23,7 +33,7 @@ We begin by importing the necessary modules from **FastAgency** and **AutoGen**.
 - **[AutoGenWorkflows](../../../../api/fastagency/runtimes/autogen/AutoGenWorkflows/)**: Manages the creation and execution of multi-agent workflows.
 
 #### 2. **Configure the Language Model (LLM)**
-Next, we configure the language model that will power the agents. In this case, we're using **GPT-4o**, and the API key is retrieved from the environment.
+Next, we configure the language model that will power the agents. In this case, we're using **gpt-4o-mini**, and the API key is retrieved from the environment.
 
 ```python
 {! docs_src/getting_started/main_console.py [ln:9-19] !}
@@ -45,13 +55,13 @@ Here, we define a simple workflow where the **Student Agent** interacts with the
 Finally, we instantiate **[ConsoleUI](../../../../api/fastagency/ui/console/ConsoleUI/)** to link the workflow to a text-based console interface. This allows the user to interact with the agents via the terminal.
 
 ```python
-{! docs_src/getting_started/main_console.py [ln:55] !}
+{! docs_src/getting_started/main_console.py [ln:54] !}
 ```
 
 - **Explanation**: Here, we set up the **ConsoleUI** as the user interface for the workflow, which will allow the entire agent interaction to take place within the terminal.
 
 
-## Complete Application Code
+### Complete Application Code
 
 <details>
 <summary>main.py</summary>
@@ -72,14 +82,78 @@ fastagency run
 This will launch the console interface, allowing you to input messages as the student and observe how the teacher agent responds.
 
 !!! note
-    Ensure that your OpenAI API key is set in the environment, as the agents rely on it to interact using GPT-4o. If the API key is not correctly configured, the application may fail to retrieve LLM-powered responses.
+    Ensure that your **OpenAI API key** is set in the environment, as the agents rely on it to interact using **gpt-4o-mini**. If the API key is not correctly configured, the application may fail to retrieve LLM-powered responses.
+
+### Output
+
+Once you run it, FastAgency automatically detects the appropriate app to execute and runs it.
+
+```console
+╭─ Python module file ─╮
+│                      │
+│  🐍 main.py          │
+│                      │
+╰──────────────────────╯
+
+
+╭─ Importable FastAgency app ─╮
+│                             │
+│  from main import app       │
+│                             │
+╰─────────────────────────────╯
+
+╭─ AutoGenWorkflows -> User [workflow_started] ────────────────────────────────╮
+│                                                                              │
+│ {                                                                            │
+│   "name": "simple_learning",                                                 │
+│   "description": "Student and teacher                                        │
+│ learning chat",                                                              │
+│   "params": {}                                                               │
+│ }                                                                            │
+╰──────────────────────────────────────────────────────────────────────────────╯
+
+╭─ Workflow -> User [text_input] ──────────────────────────────────────────────╮
+│                                                                              │
+│ I can help you learn about mathematics. What subject you would like to       │
+│  explore?:                                                                   │
+╰──────────────────────────────────────────────────────────────────────────────╯
+```
+
+Enter a math topic you're interested in, such as **What is the triangle inequality?** and press Enter.
+
+This will start the task, letting you watch the agents collaborate in real time to complete it. When the task is finished, you'll see an **output similar to the example below**
+
+```console
+╭─ AutoGenWorkflows -> User [workflow_completed] ──────────────────────────────╮
+│                                                                              │
+│ {                                                                            │
+│   "result": "The triangle inequality states that for any triangle,           │
+│ the sum of the lengths of any two sides must be greater than the             │
+│ length of the third side. It can be expressed mathematically as \\(a +       │
+│  b > c\\), \\(a + c > b\\), and \\(b + c > a\\). \n\nIn higher               │
+│ dimensions, the triangle inequality applies to vector spaces, stating        │
+│ that for any two vectors \\(\\mathbf{u}\\) and \\(\\mathbf{v}\\), the        │
+│ inequality \\(\\|\\mathbf{u} + \\mathbf{v}\\| \\leq \\|\\mathbf{u}\\|        │
+│ + \\|\\mathbf{v}\\|\\) holds, where \\(\\|\\cdot\\|\\) denotes the           │
+│ norm of the vector. This principle helps determine the relationship          │
+│ between the lengths of vectors and their sums, confirming that the           │
+│ triangle inequality is a fundamental concept in both geometry and            │
+│ linear algebra."                                                             │
+│ }                                                                            │
+╰──────────────────────────────────────────────────────────────────────────────╯
+
+2024-10-15 16:36:20,047 [INFO] Workflow 'simple_learning' completed with result: The triangle inequality states that for any triangle, the sum of the lengths of any two sides must be greater than the length of the third side. It can be expressed mathematically as \(a + b > c\), \(a + c > b\), and \(b + c > a\).
+
+In higher dimensions, the triangle inequality applies to vector spaces, stating that for any two vectors \(\mathbf{u}\) and \(\mathbf{v}\), the inequality \(\|\mathbf{u} + \mathbf{v}\| \leq \|\mathbf{u}\| + \|\mathbf{v}\|\) holds, where \(\|\cdot\|\) denotes the norm of the vector. This principle helps determine the relationship between the lengths of vectors and their sums, confirming that the triangle inequality is a fundamental concept in both geometry and linear algebra.
+```
+
 
-### Debugging Tips
+## Debugging Tips
 If you encounter issues running the application, ensure that:
 
 - The OpenAI API key is correctly set in your environment variables.
 - All necessary packages are installed, especially the `fastagency[autogen]` dependencies.
-- The API connection to GPT-4o is functional and responds as expected.
+- The API connection to gpt-4o-mini is functional and responds as expected.
 
 ---
 

diff --git a/docs/docs/en/user-guide/ui/mesop/basics.md b/docs/docs/en/user-guide/ui/mesop/basics.md
@@ -2,6 +2,8 @@
 
 **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI/)** in FastAgency offers a web-based interface for interacting with multi-agent workflows. Unlike the **ConsoleUI**, which is text-based and runs in the command line, MesopUI provides a user-friendly browser interface, making it ideal for applications that need a more engaging, graphical interaction. MesopUI is perfect for building interactive web applications and enabling users to interact with agents in a more intuitive way.
 
+Below, we’ll demonstrate how to set up a basic student-teacher conversation using **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI/)**.
+
 ## Installation
 
 To install **FastAgency** with MesopUI support, use the following command:
@@ -12,8 +14,6 @@ pip install "fastagency[autogen,mesop]"
 
 This command ensures that the required dependencies for both **AutoGen** and **Mesop** are installed.
 
-Below, we’ll demonstrate how to set up a basic student-teacher conversation using **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI/)**.
-
 ## Usage
 
 You can simply create Mesop based UI by importing and instantiating the `MesopUI` class with no parameters:
@@ -43,7 +43,7 @@ You can pass a custom [SecurityPolicy](https://google.github.io/mesop/api/page/#
 
 {! docs_src/user_guide/ui/mesop/main_mesop.py [ln:9] !}
 
-{! docs_src/user_guide/ui/mesop/main_mesop.py [ln:61] !}
+{! docs_src/user_guide/ui/mesop/main_mesop.py [ln:60] !}
 
 ui = MesopUI(security_policy=security_policy)
 ```
@@ -59,7 +59,7 @@ All [Styles](https://google.github.io/mesop/api/style/){target="_blank"} used in
 
 {! docs_src/user_guide/ui/mesop/main_mesop.py [ln:9] !}
 
-{! docs_src/user_guide/ui/mesop/main_mesop.py [ln:63-86] !}
+{! docs_src/user_guide/ui/mesop/main_mesop.py [ln:62-86] !}
 
 ui = MesopUI(styles=styles)
 ```
@@ -105,13 +105,13 @@ Here, we define a simple workflow where the **Student Agent** interacts with the
 Finally, we instantiate **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI/)** to link the workflow to a web-based interface. This allows the user to interact with the agents through a web browser.
 
 ```python
-{! docs_src/user_guide/ui/mesop/main_mesop.py [ln:61-90] !}
+{! docs_src/user_guide/ui/mesop/main_mesop.py [ln:59-90] !}
 ```
 
 - **Explanation**: Here, we set up the **MesopUI** as the user interface for the workflow, which will allow the entire agent interaction to take place through a web-based platform.
 
 
-## Complete Application Code
+### Complete Application Code
 
 <details>
 <summary>main.py</summary>
@@ -123,43 +123,46 @@ Finally, we instantiate **[MesopUI](../../../../api/fastagency/ui/mesop/MesopUI/
 
 ### Running the Application
 
-Once the workflow is set up, you can run the application either:
-
-- **locally** using the [FastAgency CLI](../../../cli/), or
-
-- **publicly** using the WSGI HTTP Server such as [Gunicorn](https://gunicorn.org/).
+There are two options of running a Mesop application:
 
-=== "Local deployment"
+1. Using [`fastagency`](../../../../cli/cli/) command line:
 
-    Navigate to the directory where the script is located and run the following command:
+    !!! note "Terminal (using [fastagency](../../../../cli/cli/))"
+        ```
+        fastagency run
+        ```
 
-    ```bash
-    fastagency run
-    ```
+    !!! danger "Currently not working on **MacOS**"
+        The above command is currently not working on **MacOS**, please use the alternative way of starting the application from below ([#362](https://github.com/airtai/fastagency/issues/362){target="_blank"}).
 
-    This will launch a local web server, and you will be able to access the MesopUI interface through your browser. The web interface will display the interaction between the student and teacher agents, allowing you to input questions and see the teacher’s responses.
+2. Using [Gunicorn](https://gunicorn.org/){target="_blank"} WSGI HTTP server:
 
-=== "Public deployment"
-    Assuming that you installed gunicorn first using something like this:
+    The preferred way to run the Mesop application is using a Python WSGI HTTP server like [Gunicorn](https://gunicorn.org/){target="_blank"}. First, you need to install it using package manager such as `pip` and then run it as follows:
 
-    ```console
-    pip install "fastagency[autogen,mesop]" gunicorn
-    ```
+    !!! note "Terminal (using [Gunicorn](https://gunicorn.org/){target="_blank"})"
+        ```
+        pip install gunicorn
+        gunicorn main:app
+        ```
 
-    you can start the Mesop app by navigating to the directory where the script `main.py` is located and running the following command:
+---
 
-    ```bash
-    gunicorn --bind 0.0.0.0:8080 main:app
-    ```
+!!! note
+    Ensure that your OpenAI API key is set in the environment, as the agents rely on it to interact using **gpt-4o-mini**. If the API key is not correctly configured, the application may fail to retrieve LLM-powered responses.
 
-    This will launch a *publicly available* web server, and you will be able to access the MesopUI interface through your browser. The web interface will display the interaction between the student and teacher agents, allowing you to input questions and see the teacher’s responses.
+### Output
 
----
+The outputs will vary based on the interface, here is the output of the last terminal starting UI:
 
-!!! note
-    Ensure that your OpenAI API key is set in the environment, as the agents rely on it to interact using GPT-4o. If the API key is not correctly configured, the application may fail to retrieve LLM-powered responses.
+```console
+[2024-10-15 16:57:44 +0530] [36365] [INFO] Starting gunicorn 23.0.0
+[2024-10-15 16:57:44 +0530] [36365] [INFO] Listening at: http://127.0.0.1:8000 (36365)
+[2024-10-15 16:57:44 +0530] [36365] [INFO] Using worker: sync
+[2024-10-15 16:57:44 +0530] [36366] [INFO] Booting worker with pid: 36366
+```
+![Initial message](../../../getting-started/images/chat.png)
 
-### Debugging Tips
+## Debugging Tips
 If you encounter issues running the application, ensure that:
 
 - The OpenAI API key is correctly set in your environment variables.