add ui readme

Author: ShilinHe

.asset/ui_screenshot_1.png

@@ -41,7 +41,7 @@
     },
     {
       "name": "KeywordDetector",
-      "keyword_exclude": ""
+      "keyword_exclude": "key"
     },
     {
       "name": "MailchimpDetector"

.asset/ui_screenshot_2.png

@@ -0,0 +1,32 @@
+# How to Run UI
+
+1. Follow the instruction in the repo's [README](../../README.md) to clone the repo and make configurations
+
+```bash
+git clone https://github.com/microsoft/TaskWeaver.git
+cd TaskWeaver
+# install the requirements
+pip install -r requirements.txt
+```
+
+```json
+{
+"llm.api_key": "the api key",
+"llm.model": "the model name, e.g., gpt-4"
+}
+```
+
+2. Install the `chainlit` package by `pip install chainlit` if you don't have it in your env.
+
+3. Start the service by running the following command.
+
+```bash
+cd playground/UI/
+chainlit run app.py
+```
+
+4. Open the browser with http://localhost:8000 and you can start the trial. 
+
+5. Below are some screenshots:
+![TaskWeaver UI Screenshot 1](../../.asset/ui_screenshot_1.png)
+![TaskWeaver UI Screenshot 2](../../.asset/ui_screenshot_2.png)

.secrets.baseline

@@ -12,7 +12,4 @@ TaskWeaver is a code-first agent framework for seamlessly planning and executing
 
 We can't wait to see what you create with TaskWeaver!
 
-## How to Run
-```chainlit run app.py```
-
 **Start the Conversation!**