update

Gradio_Config/gradio_base.py

@@ -0,0 +1,559 @@
+# coding=utf-8
+# Copyright 2023  The AIWaves Inc. team.
+
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Emoji comes from this website:
+# https://emojipedia.org/
+import subprocess
+from gradio_config import GradioConfig as gc
+import gradio as gr
+from typing import List, Tuple, Any
+import time
+import socket
+import psutil
+import os
+from abc import abstractmethod
+
+def convert2list4agentname(sop):
+    """
+    Extract the agent names of all states
+    return:
+        only name: [name1, name2, ...]
+        agent_name: [name1(role1), name2(role2), ...]
+    """
+    only_name = []  
+    agent_name = [] 
+    roles_to_names = sop.roles_to_names
+    for state_name,roles_names in roles_to_names.items():
+        for role,name in roles_names.items():
+            agent_name.append(f"{name}({role})")
+            only_name.append(name)
+    agent_name = list(set(agent_name))
+    agent_name.sort()
+    return agent_name, only_name
+
+def is_port_in_use(port):
+    """Check if the port is available"""
+    for conn in psutil.net_connections():
+        if conn.laddr.port == port:
+            return True
+    return False
+
+def check_port(port):
+    """Determine available ports"""
+    if os.path.isfile("PORT.txt"):
+        port = int(open("PORT.txt","r",encoding='utf-8').readlines()[0])
+    else:
+        for i in range(10):
+            if is_port_in_use(port+i) == False:
+                port += i
+                break
+        with open("PORT.txt", "w") as f:
+            f.writelines(str(port))
+    return port
+
+# Determine some heads
+SPECIAL_SIGN = {
+    "START": "<START>",
+    "SPLIT": "<SELFDEFINESEP>",
+    "END": "<ENDSEP>"
+}
+HOST = "127.0.0.1"
+# The starting port number for the search.
+PORT = 15000                
+PORT = check_port(PORT)
+    
+def print_log(message:str):
+    print(f"[{time.ctime()}]{message}")
+
+global_dialog = {
+    "user": [],
+    "agent": {},
+    "system": []
+}
+
+class UIHelper:
+    """Static Class"""
+
+    @classmethod
+    def wrap_css(cls, content, name) -> str:
+        """
+        Description:
+            Wrap CSS around each output, and return it in HTML format for rendering with Markdown.
+        Input:
+            content: Output content 
+            name: Whose output is it
+        Output:
+            HTML
+        """
+        assert name in gc.OBJECT_INFO, \
+            f"The current name `{name}` is not registered with an image. The names of the currently registered agents are in `{gc.OBJECT_INFO.keys()}`. Please use `GradioConfig.add_agent()` from `Gradio_Config/gradio_config.py` to bind the name of the new agent."
+        output = ""
+        info = gc.OBJECT_INFO[name]
+        if info["id"] == "USER":
+            output = gc.BUBBLE_CSS["USER"].format(
+                info["bubble_color"],                   # Background-color
+                info["text_color"],                     # Color of the agent's name 
+                name,                                   # Agent name
+                info["text_color"],                     # Font color
+                info["font_size"],                      # Font size
+                content,                                # Content
+                info["head_url"]                        # URL of the avatar
+            )
+        elif info["id"] == "SYSTEM":
+            output = gc.BUBBLE_CSS["SYSTEM"].format(
+                info["bubble_color"],                   # Background-color
+                info["font_size"],                      # Font size
+                info["text_color"],                     # Font color
+                name,                                   # Agent name
+                content                                 # Content
+            )
+        elif info["id"] == "AGENT":
+            output = gc.BUBBLE_CSS["AGENT"].format(
+                info["head_url"],                       # URL of the avatar
+                info["bubble_color"],                   # Background-color
+                info["text_color"],                     # Font color
+                name,                                   # Agent name
+                info["text_color"],                     # Font color
+                info["font_size"],                      # Font size
+                content,                                # Content
+            )
+        else:
+            assert False, f"Id `{info['id']}` is invalid. The valid id is in ['SYSTEM', 'AGENT', 'USER']"
+        return output
+
+    @classmethod
+    def novel_filter(cls, content, agent_name):
+        
+        """比如<CONTENT>...</CONTENT>，就应该输出CONTENT:..."""
+        IS_RECORDER = agent_name.lower() in ["recorder", "summary"]
+        if IS_RECORDER:
+            BOLD_FORMAT = """<div style="color: #000000; display:inline">
+    <b>{}</b>
+</div>
+<span style="color: black;">
+"""
+        else:
+            BOLD_FORMAT = "<b>{}</b>"
+        CENTER_FORMAT = """<div style="background-color: #F0F0F0; text-align: center; padding: 5px; color: #000000">
+    <b>{}</b>
+</div>
+"""
+        START_FORMAT = "<{}>"
+        END_FORMAT = "</{}>"
+        mapping = {
+            "TARGET": "🎯 Current Target: ",
+            "NUMBER": "🍖 Required Number: ",
+            "THOUGHT": "🤔 Overall Thought: ",
+            "FIRST NAME": "⚪ First Name: ",
+            "LAST NAME": "⚪ Last Name: ",
+            "ROLE": "🤠 Character Properties: ",
+            "RATIONALES": "🤔 Design Rationale: ",
+            "BACKGROUND": "🚊 Character Background: ",
+            "ID": "🔴 ID: ",
+            "TITLE": "🧩 Chapter Title: ",
+            "ABSTRACT": "🎬 Abstract: ",
+            "CHARACTER INVOLVED": "☃️ Character Involved: ",
+            "ADVICE": "💬 Advice:",
+            "NAME": "📛 Name: ",
+            "GENDER": "👩‍👩‍👦‍👦 Gender: ",
+            "AGE": "⏲️ Age: ",
+            "WORK": "👨‍🔧 Work: ",
+            "PERSONALITY": "🧲 Character Personality: ",
+            "SPEECH STYLE": "🗣️ Speaking Style: ",
+            "RELATION": "🏠 Relation with Others: ",
+            "WORD COUNT": "🎰 Word Count: ",
+            "CHARACTER DESIGN": "📈 Character Design: ",
+            "CHARACTER REQUIRE": "📈 Character Require: ",
+            "CHARACTER NAME": "📈 Character Naming Analysis: ",
+            "CHARACTER NOW": "📈 Character Now: ",
+            "OUTLINE DESIGN": "📈 Outline Design: ",
+            "OUTLINE REQUIRE": "📈 Outline Require: ",
+            "OUTLINE NOW": "📈 Outline Now: ",
+            "SUB TASK": "🎯 Current Sub Task: ",
+            "CHARACTER ADVICE": "💬 Character Design Advice: ",
+            "OUTLINE ADVANTAGE": "📈 Outline Advantage: ",
+            "OUTLINE DISADVANTAGE": "📈 Outline Disadvantage: ",
+            "OUTLINE ADVICE": "💬 Outline Advice: ",
+            "NEXT": "➡️ Next Advice: ",
+            "TOTAL NUMBER": "🔢 Total Number: "
+        }
+        for i in range(1, 10):
+            mapping[f"CHARACTER {i}"] = f"🦄 Character {i}"
+            mapping[f"SECTION {i}"] = f"🏷️ Chapter {i}"
+        for key in mapping:
+            if key in [f"CHARACTER {i}" for i in range(1, 10)] \
+                    or key in [f"SECTION {i}" for i in range(1, 10)] \
+                    :
+                content = content.replace(
+                    START_FORMAT.format(key), CENTER_FORMAT.format(mapping[key])
+                )
+            elif key in ["TOTAL NUMBER"]:
+                content = content.replace(
+                    START_FORMAT.format(key), CENTER_FORMAT.format(mapping[key]) + """<span style="color: black;">"""
+                )
+                content = content.replace(
+                    END_FORMAT.format(key), "</span>"
+                )
+            else:
+                content = content.replace(
+                    START_FORMAT.format(key), BOLD_FORMAT.format(mapping[key])
+                )
+
+            content = content.replace(
+                END_FORMAT.format(key), "</span>" if IS_RECORDER else ""
+            )
+        return content
+    
+    @classmethod
+    def singleagent_filter(cls, content, agent_name):
+        return content
+    
+    @classmethod
+    def debate_filter(cls, content, agent_name):
+        return content
+    
+    @classmethod
+    def code_filter(cls, content, agent_name):
+        # return content.replace("```python", "<pre><code>").replace("```","</pre></code>")
+        return content
+    
+    @classmethod
+    def general_filter(cls, content, agent_name):
+        return content
+    
+    @classmethod
+    def filter(cls, content: str, agent_name: str, ui_name: str):
+        """
+        Description:
+            Make certain modifications to the output content to enhance its aesthetics when content is showed in gradio.
+        Input:
+            content: output content
+            agent_name: Whose output is it
+            ui_name: What UI is currently launching
+        Output:
+            Modified content
+        """
+        mapping = {
+            "SingleAgentUI": cls.singleagent_filter,
+            "DebateUI": cls.debate_filter,
+            "NovelUI": cls.novel_filter,
+            "CodeUI": cls.code_filter,
+            "GeneralUI": cls.general_filter
+        }
+        if ui_name in mapping:
+            return mapping[ui_name](content, agent_name)
+        else:
+            return content
+
+class Client:
+    """
+    For inter-process communication, this is the client. 
+    `gradio_backend.PY` serves as the backend, while `run_gradio` is the frontend. 
+    Communication between the frontend and backend is accomplished using Sockets.
+    """
+    # =======================Radio Const String======================
+    SINGLE_MODE = "Single Mode"
+    AUTO_MODE = "Auto Mode"
+    MODE_LABEL = "Select the execution mode"
+    MODE_INFO = "Single mode refers to when the current agent output ends, it will stop running until you click to continue. Auto mode refers to when you complete the input, all agents will continue to output until the task ends."
+    # ===============================================================
+    mode = AUTO_MODE
+    FIRST_RUN:bool = True
+    # if last agent is user, then next agent will be executed automatically rather than click button 
+    LAST_USER:bool = False
+    
+    receive_server = None
+    send_server = None
+    current_node = None
+    cache = {}
+
+    def __init__(self, host=HOST, port=PORT, bufsize=1024):
+        assert Client.mode in [Client.SINGLE_MODE, Client.AUTO_MODE]
+        self.SIGN = SPECIAL_SIGN
+        self.bufsize = bufsize
+        assert bufsize > 0
+        self.client_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+        self.client_socket.connect((host, port))
+        while True:
+            data = self.client_socket.recv(self.bufsize).decode('utf-8')
+            if data == "hi":
+                self.client_socket.send("hello agent".encode('utf-8'))
+                time.sleep(1)
+            elif data == "check":
+                break
+        print_log("Client: connecting successfully......")
+
+    def start_server(self):
+        while True:
+            message = yield
+            if message == 'exit':
+                break
+            self.send_message(message=message)
+
+    def send_message(self, message):
+        """Send the messaget to the server."""
+        if isinstance(message, list) or isinstance(message, dict):
+            message = str(message)
+        assert isinstance(message, str)
+        message = message + self.SIGN["SPLIT"]
+        self.client_socket.send(message.encode('utf-8'))
+
+    def receive_message(self, end_identifier: str = None, split_identifier: str = SPECIAL_SIGN["SPLIT"]) -> List:
+        """Receive messages from the server, and it will block the process. Supports receiving long text."""
+        remaining = ""
+        while True:
+            # receive message
+            dataset = self.client_socket.recv(self.bufsize)
+            try:
+                # If decoding fails, it indicates that the current transmission is a long text.
+                dataset = dataset.decode('utf-8')
+            except UnicodeDecodeError:
+                if not isinstance(remaining, bytes):
+                    remaining = remaining.encode('utf-8')
+                assert isinstance(dataset, bytes)
+                remaining += dataset
+                try:
+                    dataset = remaining.decode('utf-8')
+                    remaining = ""
+                except UnicodeDecodeError:
+                    continue
+            assert isinstance(remaining, str)
+            dataset = remaining + dataset
+            list_dataset = dataset.split(split_identifier)
+            if len(list_dataset) == 1:
+                # If there is only one result from the split, it indicates that the current sequence itself has not yet ended.
+                remaining = list_dataset[0]
+                continue
+            else:
+                remaining = list_dataset[-1]
+            # Recieve successfully
+            list_dataset = list_dataset[:-1]
+            return_value = []
+            for item in list_dataset:
+                if end_identifier is not None and item == end_identifier:
+                    break
+                return_value.append(item)
+            identifier = yield return_value
+            if identifier is not None:
+                end_identifier, split_identifier = identifier
+
+    def listening_for_start_(self):
+        """
+        When the server starts, the client is automatically launched. 
+        At this point, process synchronization is required, 
+        such as sending client data to the server for rendering, 
+        then the server sending the modified data back to the client, 
+        and simultaneously sending a startup command. 
+        Once the client receives the data, it will start running.
+        """
+        Client.receive_server = self.receive_message()
+        # Waiting for information from the server.
+        data: list = next(Client.receive_server)
+        assert len(data) == 1
+        data = eval(data[0])
+        assert isinstance(data, dict)
+        Client.cache.update(data)
+        # Waiting for start command from the server.
+        data:list = Client.receive_server.send(None)
+        assert len(data) == 1
+        assert data[0] == "<START>"
+
+class WebUI:
+    """
+    The base class for the frontend, which encapsulates some functions for process information synchronization. 
+    When a new frontend needs to be created, you should inherit from this class, 
+    then implement the `construct_ui()` method and set up event listeners. 
+    Finally, execute `run()` to load it.
+    """
+    
+    def receive_message(
+        self,
+        end_identifier:str=None,
+        split_identifier:str=SPECIAL_SIGN["SPLIT"]
+    )->List:
+        """This is the same as in Client class."""
+        yield "hello"
+        remaining = ""
+        while True:
+            dataset = self.client_socket.recv(self.bufsize)
+            try:
+                dataset = dataset.decode('utf-8')
+            except UnicodeDecodeError:
+                if not isinstance(remaining, bytes):
+                    remaining = remaining.encode('utf-8')
+                assert isinstance(dataset, bytes)
+                remaining += dataset
+                try:
+                    dataset = remaining.decode('utf-8')
+                    remaining = ""
+                except UnicodeDecodeError:
+                    continue
+            assert isinstance(remaining, str)
+            dataset = remaining + dataset
+            list_dataset = dataset.split(split_identifier)
+            if len(list_dataset) == 1:
+                remaining = list_dataset[0]
+                continue
+            else:
+                remaining = list_dataset[-1]
+            list_dataset = list_dataset[:-1]
+            return_value = []
+            for item in list_dataset:
+                if end_identifier is not None and item == end_identifier:
+                    break
+                return_value.append(item)
+            identifier = yield return_value
+            if identifier is not None:
+                end_identifier, split_identifier = identifier
+
+    def send_message(self, message:str):
+        """Send message to client."""
+        SEP = self.SIGN["SPLIT"]
+        self.client_socket.send(
+            (message+SEP).encode("utf-8")
+        )
+    
+    def _connect(self):
+        # check 
+        if self.server_socket:
+            self.server_socket.close()
+            assert not os.path.isfile("PORT.txt")
+            self.socket_port = check_port(PORT)
+        # Step1. initialize
+        self.server_socket = socket.socket(
+            socket.AF_INET, socket.SOCK_STREAM
+        )
+        # Step2. binding ip and port
+        self.server_socket.bind((self.socket_host, self.socket_port))
+        # Step3. run client
+        self._start_client()
+
+        # Step4. listening for connect
+        self.server_socket.listen(1)
+
+        # Step5. test connection
+        client_socket, client_address = self.server_socket.accept()
+        print_log("server: establishing connection......")
+        self.client_socket = client_socket
+        while True:
+            client_socket.send("hi".encode('utf-8'))
+            time.sleep(1)
+            data = client_socket.recv(self.bufsize).decode('utf-8')
+            if data == "hello agent":
+                client_socket.send("check".encode('utf-8'))
+                print_log("server: connect successfully")
+                break
+        assert os.path.isfile("PORT.txt")
+        os.remove("PORT.txt")
+        if self.receive_server:
+            del self.receive_server
+        self.receive_server = self.receive_message()
+        assert next(self.receive_server) == "hello"
+    
+    @abstractmethod
+    def render_and_register_ui(self):
+        # You need to implement this function. 
+        # The function's purpose is to bind the name of the agent with an image. 
+        # The name of the agent is stored in `self.cache[]`, 
+        # and the function for binding is in the method `add_agents` of the class `GradioConfig` in `Gradio_Config/gradio_config.py``.
+        # This function will be executed in `self.first_recieve_from_client()`
+        pass
+    
+    def first_recieve_from_client(self, reset_mode:bool=False):
+        """
+        This function is used to receive information from the client and is typically executed during the initialization of the class.
+        If `reset_mode` is False, it will bind the name of the agent with an image.
+        """
+        self.FIRST_RECIEVE_FROM_CLIENT = True
+        data_list:List = self.receive_server.send(None)
+        assert len(data_list) == 1
+        data = eval(data_list[0])
+        assert isinstance(data, dict)
+        self.cache.update(data)
+        if not reset_mode:
+            self.render_and_register_ui()
+    
+    def _second_send(self, message:dict):
+        # Send the modified message.
+        # It will be executed in `self.send_start_cmd()` automtically.
+        self.send_message(str(message))
+    
+    def _third_send(self):
+        # Send start command.
+        # It will be executed in `self.send_start_cmd()` automtically.
+        self.send_message(self.SIGN['START'])
+    
+    def send_start_cmd(self, message:dict={"hello":"hello"}):
+        # If you have no message to send, you can ignore the args `message`.
+        assert self.FIRST_RECIEVE_FROM_CLIENT, "Please make sure you have executed `self.first_recieve_from_client()` manually."
+        self._second_send(message=message)
+        time.sleep(1)
+        self._third_send()
+        self.FIRST_RECIEVE_FROM_CLIENT = False
+    
+    def __init__(
+        self,
+        client_cmd: list,           # ['python','test.py','--a','b','--c','d']
+        socket_host: str = HOST,
+        socket_port: int = PORT,
+        bufsize: int = 1024,
+        ui_name: str = ""
+    ):
+        self.ui_name = ui_name
+        self.server_socket = None
+        self.SIGN = SPECIAL_SIGN
+        self.socket_host = socket_host
+        self.socket_port = socket_port
+        self.bufsize = bufsize
+        self.client_cmd = client_cmd
+        
+        self.receive_server = None
+        self.cache = {}
+        assert self.bufsize > 0
+        self._connect()
+
+    def _start_client(self):
+        print(f"server: excuting `{' '.join(self.client_cmd)}` ...")
+        self.backend = subprocess.Popen(self.client_cmd)
+        
+    def _close_client(self):
+        print(f"server: killing `{' '.join(self.client_cmd)}` ...")
+        self.backend.terminate()
+    
+    def reset(self):
+        print("server: restarting ...")
+        self._close_client()
+        time.sleep(1)
+        self._connect()
+
+    def render_bubble(self, rendered_data, agent_response, node_name, render_node_name:bool=True):
+        # Rendered bubbles (HTML format) are used for gradio output.
+        output = f"**{node_name}**<br>" if render_node_name else ""
+        for item in agent_response:
+            for agent_name in item:
+                content = item[agent_name].replace("\n", "<br>")
+                content = UIHelper.filter(content, agent_name, self.ui_name)
+                output = f"{output}<br>{UIHelper.wrap_css(content, agent_name)}"
+        rendered_data[-1] = [rendered_data[-1][0], output]
+        return rendered_data
+
+    def run(self,share: bool = True):
+        self.demo.queue()
+        self.demo.launch(share=share)
+
+
+if __name__ == '__main__':
+    pass

Gradio_Config/gradio_config.py

@@ -0,0 +1,437 @@
+# coding=utf-8
+# Copyright 2023  The AIWaves Inc. team.
+
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import json
+from PIL import Image
+import requests
+from typing import List, Tuple
+
+class GradioConfig:
+    # How many avatars are currently registered
+    POINTER = 0
+    
+    # Avatar image. You can add or replace.
+    AGENT_HEAD_URL = [
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306241687579617434043.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306241687592097408547.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686726561699613.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686726561275758.jpg",
+        "https://img.touxiangwu.com/uploads/allimg/2021090300/ry5k31wt33c.jpg",
+        "https://img.touxiangwu.com/uploads/allimg/2021090300/0ls2gmwhrf5.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/02/202302281677545695326193.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/03/202303271679886128550253.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686711344407060.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686711345834296.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/05/202305171684311194291520.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/05/202305171684311196958993.jpg",
+        "https://img.touxiangwu.com/uploads/allimg/2021082612/vr0bkov0dwl.jpg",
+        "https://img.touxiangwu.com/uploads/allimg/2021082612/auqx5zfsv5g.jpg",
+        "https://img.touxiangwu.com/uploads/allimg/2021082612/llofpivtwls.jpg",
+        "https://img.touxiangwu.com/uploads/allimg/2021082612/3j2sdot3ye0.jpg",
+        "https://img.touxiangwu.com/2020/3/nQfYf2.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/08/202308131691918068774532.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/08/202308131691918068289945.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/08/202308131691918069785183.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686726561292003.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686726561578616.jpg",
+        "https://img.touxiangwu.com/zb_users/upload/2023/06/202306141686726564597524.jpg"
+    ]
+    USER_HEAD_URL = "https://img.touxiangwu.com/zb_users/upload/2023/05/202305301685407468585486.jpg"
+    
+    # The css style of gradio.Chatbot
+    CSS = """
+    #chatbot1 .user {
+        background-color:transparent;
+        border-color:transparent;
+    }
+    #chatbot1 .bot {
+        background-color:transparent;
+        border-color:transparent;
+    }
+    #btn {color: red; border-color: red;}
+    """
+ 
+    ID = ["USER", "AGENT", "SYSTEM"]
+    
+    # Bubble template
+    BUBBLE_CSS = {
+        # Background-color Name-color Name-content Font-color Font-size Content Avatar-URL
+        "USER": """
+    <div style="display: flex; align-items: flex-start; justify-content: flex-end;">
+        <div style="background-color: {}; border-radius: 20px 0px 20px 20px; padding: 15px; min-width: 100px; max-width: 300px;">
+            <p style="margin: 0; padding: 0; color: {}; font-weight: bold; font-size: 18px;">{}</p>
+            <p style="margin: 0; padding: 0; color: {}; font-size: {}px;">{}</p>
+        </div>
+        <img src="{}" alt="USER" style="width: 50px; height: 50px; border-radius: 50%; margin-left: 10px;">
+    </div>
+        """,
+
+        # Avatar-URL Background-color Name-color Name-Content Font-color Font-size Content
+        "AGENT": """
+    <div style="display: flex; align-items: flex-start;">
+        <img src="{}" alt="AGENT" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">
+        <div style="background-color: {}; border-radius: 0px 20px 20px 20px; padding: 15px; min-width: 100px; max-width: 600px;">
+            <p style="margin: 0; padding: 0; color: {}; font-weight: bold; font-size: 18px;">{}</p>
+            <p style="margin: 0; padding: 0; color: {}; font-size: {}px;">{}</p>
+        </div>
+    </div>
+        """,
+
+        # Backrgound-color Font-size Font-color Name Content
+        "SYSTEM": """
+    <div style="display: flex; align-items: center; justify-content: center;">
+        <div style="background-color: {}; border-radius: 20px; padding: 1px; min-width: 200px; max-width: 1000px;">
+            <p style="margin: 0; padding: 0; text-align: center; font-size: {}px; font-weight: bold; font-family: '微软雅黑', sans-serif; color: {};">{}:{}</p>
+        </div>
+    </div>
+        """
+    }
+
+    ROLE_2_NAME = {}
+    
+    OBJECT_INFO = {
+
+        "User": {
+            # https://img-blog.csdnimg.cn/img_convert/7c20bc39ac69b6972a22e18762d02db3.jpeg
+            "head_url": USER_HEAD_URL,
+            "bubble_color": "#95EC69",
+            "text_color": "#000000",
+            "font_size": 0,
+            "id": "USER"
+        },
+
+        "System": {
+            # https://img-blog.csdnimg.cn/img_convert/e7e5887cfff67df8c2205c2ef0e5e7fa.png
+            "head_url": "https://img.touxiangwu.com/zb_users/upload/2023/03/202303141678768524747045.jpg",
+            "bubble_color": "#7F7F7F",  ##FFFFFF
+            "text_color": "#FFFFFF",  ##000000
+            "font_size": 0,
+            "id": "SYSTEM"
+        },
+
+        "wait": {
+            "head_url": "https://img.touxiangwu.com/zb_users/upload/2022/12/202212011669881536145501.jpg",
+            "bubble_color": "#E7CBA6",
+            "text_color": "#000000",
+            "font_size": 0,
+            "id": "AGENT"
+        },
+
+        "Recorder": {
+            "head_url": "https://img.touxiangwu.com/zb_users/upload/2023/02/202302281677545695326193.jpg",
+            "bubble_color": "#F7F7F7",
+            "text_color": "#000000",
+            "font_size": 0,
+            "id": "AGENT"
+        }
+    }
+
+    @classmethod
+    def color_for_img(cls, url):
+        """
+        Extract the main colors from the picture and set them as the background color, 
+        then determine the corresponding text color.
+        """
+
+        def get_main_color(image):
+            image = image.convert("RGB")
+            width, height = image.size
+            pixels = image.getcolors(width * height)
+            most_common_pixel = max(pixels, key=lambda item: item[0])
+            return most_common_pixel[1]
+
+        def is_dark_color(rgb_color):
+            r, g, b = rgb_color
+            luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+            return luminance < 0.5
+
+        def download_image(url):
+            print(f"binding: {url}")
+            response = requests.get(url)
+            if response.status_code == 200:
+                with open('image.jpg', 'wb') as f:
+                    f.write(response.content)
+
+        def rgb_to_hex(color):
+            return "#{:02X}{:02X}{:02X}".format(color[0], color[1], color[2])
+
+        def get_color(image_url):
+            download_image(image_url)
+
+            image = Image.open("image.jpg")
+            main_color = get_main_color(image)
+            is_dark = is_dark_color(main_color)
+
+            if is_dark:
+                font_color = "#FFFFFF"
+            else:
+                font_color = "#000000"
+
+            return rgb_to_hex(main_color), font_color
+
+        return get_color(url)
+
+    @classmethod
+    def init(cls, JSON):
+        # Deprecated
+        with open(JSON) as f:
+            sop = json.load(f)
+        cnt = 0
+        FISRT_NODE = True
+        fisrt_node_roles = []
+        for node_name in sop['nodes']:
+            node_info = sop['nodes'][node_name]
+            agent_states = node_info['agent_states']
+            for agent_role in agent_states:
+                name = agent_states[agent_role]['style']['name']
+                cls.ROLE_2_NAME[agent_role] = name
+                if FISRT_NODE:
+                    fisrt_node_roles.append(agent_role)
+                bubble_color, text_color = cls.color_for_img(cls.AGENT_HEAD_URL[cnt])
+                cls.OBJECT_INFO[name] = {
+                    "head_url": f"{cls.AGENT_HEAD_URL[cnt]}",
+                    "bubble_color": bubble_color,
+                    "text_color": text_color,
+                    "font_size": 0,
+                    "id": "AGENT"
+                }
+                cnt += 1
+            if FISRT_NODE:
+                FISRT_NODE = False
+        print(cls.OBJECT_INFO)
+        for usr_name in cls.OBJECT_INFO:
+            if cls.OBJECT_INFO[usr_name]["id"] == "SYSTEM":
+                cls.OBJECT_INFO[usr_name]["font_size"] = 12
+            elif cls.OBJECT_INFO[usr_name]["id"] in ["USER", "AGENT"]:
+                cls.OBJECT_INFO[usr_name]["font_size"] = 16
+            else:
+                assert False
+        return fisrt_node_roles
+
+    @classmethod
+    def add_agent(cls, agents_name:List):
+        for name in agents_name:
+            bubble_color, text_color = cls.color_for_img(cls.AGENT_HEAD_URL[cls.POINTER])
+            cls.OBJECT_INFO[name] = {
+                "head_url": f"{cls.AGENT_HEAD_URL[cls.POINTER]}",
+                "bubble_color": bubble_color,
+                "text_color": text_color,
+                "font_size": 0,
+                "id": "AGENT"
+            }
+            cls.POINTER += 1
+        for usr_name in cls.OBJECT_INFO:
+            if cls.OBJECT_INFO[usr_name]["id"] == "SYSTEM":
+                cls.OBJECT_INFO[usr_name]["font_size"] = 12
+            elif cls.OBJECT_INFO[usr_name]["id"] in ["USER", "AGENT"]:
+                cls.OBJECT_INFO[usr_name]["font_size"] = 16
+            else:
+                assert False
+
+
+class StateConfig:
+    """UI configuration for the step progress bar (indicating the current node)"""
+    
+    CSS = """
+:root {
+        --gradient-start: 100%;
+        --gradient-end: 0%;
+ }
+.container.progress-bar-container {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  overflow-x: auto;
+  padding-bottom: 30px;
+  padding-top: 20px
+}
+.container.progress-bar-container::-webkit-scrollbar {
+  width: 8px;
+  background-color: transparent;
+}
+
+.container.progress-bar-container::-webkit-scrollbar-thumb {
+  background-color: transparent;
+}
+
+.progress-bar-container .progressbar {
+  counter-reset: step;
+  white-space: nowrap;
+}
+.progress-bar-container .progressbar li {
+  list-style: none;
+  display: inline-block;
+  width: 200px;
+  position: relative;
+  text-align: center;
+  cursor: pointer;
+  white-space: normal;
+}
+.progress-bar-container .progressbar li:before {
+  content: counter(step);
+  counter-increment: step;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border: 1px solid #ddd;
+  border-radius: 100%;
+  display: block;
+  text-align: center;
+  margin: 0 auto 10px auto;
+  background-color: #ffffff;
+}
+.progress-bar-container .progressbar li:after {
+  content: attr(data-content);
+  position: absolute;
+  width: 87%;
+  height: 2px;
+  background-color: #dddddd;
+  top: 15px;
+  left: -45%;
+}
+.progress-bar-container .progressbar li:first-child:after {
+  content: none;
+}
+.progress-bar-container .progressbar li.active {
+  color: green;
+}
+.progress-bar-container .progressbar li.active:before {
+  border-color: green;
+  background-color: green;
+  color: white;
+}
+.progress-bar-container .progressbar li.active + li:after {
+  background: linear-gradient(to right, green var(--gradient-start), lightgray var(--gradient-end));
+}
+.progress-bar-container .small-element {
+  transform: scale(0.8);
+}
+.progress-bar-container .progressbar li span {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.progress-bar-container .progressbar li .data-content {
+  position: absolute;
+  width: 100%;
+  top: -10px;
+  left: -100px;
+  text-align: center;
+}
+"""
+    
+    FORMAT = """
+<html>
+    <head>
+        <style>
+            {}
+        </style>
+    </head>
+    <body>
+        <br>
+        <center>
+            <div class="container progress-bar-container">
+                <ul class="progressbar">
+                    {}
+                </ul>
+            </div>
+        </center>
+    </body>
+</html>
+"""
+    
+    STATES_NAME:List[str] = None
+    
+    @classmethod
+    def _generate_template(cls, types:str)->str:
+        # normal: A state with no execution.
+        # active-show-up: Active state, and content displayed above the horizontal line.
+        # active-show-down: Active state, and content displayed below the horizontal line.
+        # active-show-both: Active state, and content displayed both above and below the horizontal line.
+        # active-show-none: Active state, with no content displayed above the horizontal line.
+        
+        assert types.lower() in ["normal","active-show-up", "active-show-down", "active-show-both", "active", "active-show-none"]
+        both_templates = """<li class="active" style="--gradient-start: {}%; --gradient-end: {}%;">
+	<div class="data-content">
+		<center>
+            <p style="line-height: 1px;"></p>
+			{}
+			<p>
+				{}
+			</p>
+		</center>
+	</div>
+	<span>{}</span>
+</li>"""
+
+        if types.lower() == "normal":
+            templates = "<li><span>{}</span></li>"
+        elif types.lower() == "active":
+            templates = """<li class="active"><span>{}</span></li>"""
+        elif types.lower() == "active-show-up":
+            templates = both_templates.format("{}","{}", "{}", "", "{}")
+        elif types.lower() == "active-show-down":
+            templates = both_templates.format("{}","{}", "", "{}", "{}")
+        elif types.lower() == "active-show-both":
+            templates = both_templates
+        elif types.lower() == "active-show-none":
+            templates = """<li class="active" style="--gradient-start: {}%; --gradient-end: {}%;">
+	<span>{}</span>
+</li>"""
+        else:
+            assert False
+        return templates
+            
+    @classmethod
+    def update_states(cls, current_states:List[int], current_templates:List[str], show_content:List[Tuple[str]])->str:
+        assert len(current_states) == len(current_templates)
+        # You can dynamically change the number of states.
+        # assert len(current_states) == len(cls.STATES_NAME)
+        css_code = []
+        for idx in range(len(current_states)):
+            if idx == 0:
+                if current_states[idx] != 0:
+                    css_code = [f"{cls._generate_template('active').format(cls.STATES_NAME[idx])}"]
+                else:
+                    css_code = [f"{cls._generate_template('normal').format(cls.STATES_NAME[idx])}"]
+                continue
+            if current_states[idx-1] == 0:
+                # new_code = f"{cls._generate_template('normal').format(*(show_content[idx]))}"
+                new_code = f"{cls._generate_template('normal').format(cls.STATES_NAME[idx])}"
+            else:
+                new_code = f"{cls._generate_template(current_templates[idx]).format(current_states[idx-1], 100-current_states[idx-1],*(show_content[idx-1]), cls.STATES_NAME[idx])}"
+            if current_states[idx-1] != 100 or (current_states[idx]==0 and current_states[idx-1]==100):
+                new_code = new_code.replace("""li class="active" ""","""li """)
+            css_code.append(new_code)
+        return "\n".join(css_code)
+    
+    @classmethod
+    def create_states(cls, states_name:List[str], manual_create_end_nodes:bool=False):
+        # Create states
+        if manual_create_end_nodes:
+            states_name.append("Done")
+        css_code = ""
+        cls.STATES_NAME: List[str] = states_name
+        for name in states_name:
+            css_code = f"{css_code}\n{cls._generate_template('normal').format(name)}"
+        return css_code
+    
+
+if __name__ == '__main__':
+    pass

config.json

@@ -0,0 +1,492 @@
+{
+    "config": {
+        "API_KEY": "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",
+        "PROXY": "http://127.0.0.1:7890",
+        "MAX_CHAT_HISTORY": "1000",
+        "TOP_K": "1"
+    },
+    "LLM_type": "OpenAI",
+    "LLM": {
+        "temperature": 0.3,
+        "model": "gpt-3.5-turbo-16k-0613",
+        "log_path": "logs/god"
+    },
+    "root": "design_state",
+    "relations": {
+        "design_state": {
+            "0": "design_state",
+            "1": "develop_state"
+        },
+        "develop_state": {
+            "0": "develop_state",
+            "1": "debug_state"
+        },
+        "debug_state": {
+            "0": "debug_state",
+            "1": "end_state"
+        }
+    },
+    "agents": {
+        "Alice": {
+            "style": "august",
+            "roles": {
+                "design_state": "Boss",
+                "develop_state": "Boss",
+                "debug_state": "Boss"
+            }
+        },
+        "Bob": {
+            "style": "professional",
+            "roles": {
+                "design_state": "Architect_1"
+            }
+        },
+        "Belle": {
+            "style": "professional",
+            "roles": {
+                "design_state": "Architect_2"
+            }
+        },
+        "Candy": {
+            "style": "professional",
+            "roles": {
+                "develop_state": "Developer_1",
+                "debug_state": "Developer_1"
+            }
+        },
+        "Carl": {
+            "style": "professional",
+            "roles": {
+                "develop_state": "Developer_2",
+                "debug_state": "Developer_2"
+            }
+        },
+        "David": {
+            "style": "professional",
+            "roles": {
+                "debug_state": "Debugger"
+            }
+        },
+        "Eva": {
+            "style": "professional",
+            "roles": {
+                "debug_state": "Coder"
+            }
+        },
+        "Michael": {
+            "style": "professional",
+            "roles": {
+                "design_state": "Leader",
+                "develop_state": "Leader",
+                "debug_state": "Leader"
+            }
+        }
+    },
+    "states": {
+        "end_state": {
+            "agent_states": {}
+        },
+        "design_state": {
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 0.3,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/god"
+            },
+            "roles": [
+                "Boss",
+                "Architect_1",
+                "Leader",
+                "Architect_2"
+            ],
+            "controller": {
+                "controller_type": "order",
+                "max_chat_nums": 4,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end"
+            },
+            "environment_prompt": "Imagine a scenario where the boss has presented a requirement. The architect is tasked with proposing a Python framework based on this requirement. The leader's role is to provide feedback on the architect's proposal, and another architect will finalize the framework based on the leader's comments.The target game <game>a snake game with python</game>",
+            "begin_role": "Boss",
+            "begin_query": "Please write code for the target game",
+            "agent_states": {
+                "Boss": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Boss"
+                    },
+                    "style": {
+                        "role": "Boss",
+                        "style": "august"
+                    },
+                    "task": {
+                        "task": "Present the project requirements to the team and articulate the project's objectives clearly."
+                    },
+                    "rule": {
+                        "rule": "It's crucial to communicate the project's objectives, key deliverables, and any specific requirements comprehensively. This ensures that the entire team understands the project's significance and direction."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "Prepare a comprehensive project overview that encompasses the project's scope, objectives, any constraints, and desired outcomes. This document should outline the required features, performance goals, and budget constraints, for example."
+                    }
+                },
+                "Architect_1": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Architect"
+                    },
+                    "style": {
+                        "role": "Architect",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Propose a Python framework based on the BOSS's requirements."
+                    },
+                    "rule": {
+                        "rule": "Thoroughly analyze the project requirements, evaluate potential technologies, and select suitable design principles to meet the project's needs."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "Create a detailed architectural proposal document, including the rationale for choosing the proposed framework and accompanying design diagrams. For instance, provide an architectural diagram outlining the framework's high-level structure and a detailed explanation of why this architecture was selected."
+                    }
+                },
+                "Leader": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Leader"
+                    },
+                    "style": {
+                        "role": "Leader",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "evaluate the architecture proposal and provide specific feedback for improvement"
+                    },
+                    "rule": {
+                        "rule": " Offer constructive feedback aligned with the project's objectives to enhance the proposed framework."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "Review Architect1's proposal meticulously and provide written feedback. Ensure the feedback is specific and includes actionable suggestions for improvement. For instance, you can point out areas that need improvement and explain how suggested changes align with project goals."
+                    }
+                },
+                "Architect_2": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Architect"
+                    },
+                    "style": {
+                        "role": "Architect_2",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Finalize the Python framework based on Leader's feedback."
+                    },
+                    "rule": {
+                        "rule": " Integrate Leader's feedback into the architectural proposal and make necessary adjustments to refine the framework."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "Revise the architectural proposal document to reflect the improvements suggested by Leader. Provide clear documentation of the changes made, including any revised design diagrams and explanations for incorporating Leader's feedback."
+                    },
+                    "ExtractComponent": {
+                        "extract_words": [
+                            "system"
+                        ],
+                        "system_prompt": "Please extract the modified system as completely as possible.",
+                        "last_prompt": ""
+                    }
+                }
+            }
+        },
+        "develop_state": {
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 0.3,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/god"
+            },
+            "roles": [
+                "Boss",
+                "Developer_1",
+                "Leader",
+                "Developer_2"
+            ],
+            "controller": {
+                "controller_type": "order",
+                "max_chat_nums": 4,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end"
+            },
+            "environment_prompt": "In this scenario, the boss has provided a requirement. The developer's task is to write code based on the architecture proposed by the architect. The leader evaluates the written code for elegance, readability, and functionality, providing feedback. Another developer makes necessary modifications to the code.The target game <game>a snake game with python</game>",
+            "begin_role": "Boss",
+            "begin_query": "Please write code for the target game",
+            "agent_states": {
+                "Boss": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Boss"
+                    },
+                    "style": {
+                        "role": "Boss",
+                        "style": "august"
+                    },
+                    "task": {
+                        "task": "Communicate the project requirements and vision to the team."
+                    },
+                    "rule": {
+                        "rule": "Clearly define the project's objectives, functionality, and any specific requirements."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "Create a detailed project brief that outlines the scope, objectives, and specific features required for the project in a clear and concise manner. This document should provide a comprehensive understanding of what the project aims to achieve."
+                    }
+                },
+                "Developer_1": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Developer"
+                    },
+                    "style": {
+                        "role": "Developer",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "write elegant, readable, extensible, and efficient code"
+                    },
+                    "rule": {
+                        "rule": "write code that conforms to standards like PEP8, is modular, easy to read, and maintainable. Output the code only,Ensure that the code adheres to the architectural guidelines, coding standards, and best practices."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "Follow the architectural proposal closely while writing code. Document the code adequately, use meaningful variable names, and maintain proper code structure. For example, provide code snippets that demonstrate adherence to coding standards and architectural design.  Output the code only."
+                    },
+                    "CustomizeComponent": {
+                        "template": "You need to write code based on the following framework: {system}",
+                        "keywords": [
+                            "system"
+                        ]
+                    }
+                },
+                "Leader": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Leader"
+                    },
+                    "style": {
+                        "role": "Leader",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Evaluate the written code for elegance, readability, and functionality."
+                    },
+                    "rule": {
+                        "rule": "Provide constructive feedback that helps improve code quality and alignment with project goals."
+                    },
+                    "demonstrations": {
+                        "demonstrations": " Thoroughly review the code written by Developer1. Offer feedback on code organization, naming conventions, code efficiency, and any functional improvements needed. For instance, provide specific examples of code sections that require refinement and explain how these changes enhance code quality."
+                    }
+                },
+                "Developer_2": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Developer"
+                    },
+                    "style": {
+                        "role": "Developer",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": " Make necessary modifications to the code based on Leader's feedback."
+                    },
+                    "rule": {
+                        "rule": "make code modifications that conform to standards like PEP8, are modular, easy to read, and maintainable. Output the modified code only,Incorporate Leader's feedback into the code and address any issues or improvements identified."
+                    },
+                    "demonstrations": {
+                        "demonstrations": " Review the feedback provided by Leader and apply the suggested modifications to the code. Document the changes made and ensure that the updated code aligns with the project's goals and architectural guidelines. Provide examples of code segments before and after the modifications to illustrate the improvements. Output the modified code only."
+                    },
+                    "ExtractComponent": {
+                        "extract_words": [
+                            "code"
+                        ],
+                        "system_prompt": "Please extract the modified code as completely as possible.",
+                        "last_prompt": ""
+                    }
+                }
+            }
+        },
+        "debug_state": {
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 0.3,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/god"
+            },
+            "roles": [
+                "Boss",
+                "Debugger",
+                "Developer_1",
+                "Leader",
+                "Developer_2",
+                "Coder"
+            ],
+            "controller": {
+                "controller_type": "order",
+                "max_chat_nums": 6,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end"
+            },
+            "environment_prompt": "In this scenario, the boss has provided a requirement. The debugger simulates a compiler to determine whether the code is runnable and provides feedback. The developer writes code based on the debugger's feedback. The leader evaluates whether the final code meets the boss's requirements and provides feedback for further modifications. The coder writes the final code to a file.The target game <game>a snake game with python</game>",
+            "begin_role": "Boss",
+            "begin_query": "Please make the code both runnable and more efficient.",
+            "agent_states": {
+                "Boss": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Boss"
+                    },
+                    "style": {
+                        "role": "Boss",
+                        "style": "august"
+                    },
+                    "task": {
+                        "task": " Communicate the project requirements and vision to the team."
+                    },
+                    "rule": {
+                        "rule": "Clearly define the project's objectives, functionality, and any specific requirements."
+                    },
+                    "demonstrations": {
+                        "demonstrations": " Create a detailed project brief that outlines the scope, objectives, and specific features required for the project in a clear and concise manner. This document should provide a comprehensive understanding of what the project aims to achieve."
+                    }
+                },
+                "Debugger": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Debugger"
+                    },
+                    "style": {
+                        "role": "Debugger",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Simulate a compiler to determine whether the code is runnable and provide feedback."
+                    },
+                    "rule": {
+                        "rule": "Thoroughly test the code for syntax errors, logical issues, and other potential problems. Offer detailed feedback that helps the developer understand and resolve any issues.Please pay special attention to some logic bugs in the game, such as whether the game can run normally."
+                    },
+                    "demonstrations": {
+                        "demonstrations": " Run the code provided by Developer1 through a simulated compiler or debugger. Document any errors, warnings, or issues encountered during the process. Provide feedback that includes specific examples of code problems and suggested solutions."
+                    },
+                    "CustomizeComponent": {
+                        "template": "You need to Run the following code: {code}, through a simulated compiler or debugger. Document any errors, warnings, or issues encountered during the process. Provide feedback that includes specific examples of code problems and suggested solutions.",
+                        "keywords": [
+                            "code"
+                        ]
+                    }
+                },
+                "Developer_1": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Developer"
+                    },
+                    "style": {
+                        "role": "Developer",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "write elegant, readable, extensible, and efficient code based on the debugger's feedback."
+                    },
+                    "rule": {
+                        "rule": "write code that conforms to standards like PEP8, is modular, easy to read, and maintainable.Address the issues identified by the Debugger and ensure that the code meets the project's requirements."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "  Review the feedback provided by the Debugger and make the necessary modifications to the code. Document the changes made and ensure that the code is free of errors and warnings. Provide examples of code segments before and after the modifications. Output the modified code only."
+                    }
+                },
+                "Leader": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Leader"
+                    },
+                    "style": {
+                        "role": "Leader",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Evaluate whether the final code meets the boss's requirements and provide feedback for further modifications."
+                    },
+                    "rule": {
+                        "rule": " Assess the code's alignment with the project's objectives, functionality, and quality standards. Offer constructive feedback to enhance the code's overall quality."
+                    },
+                    "demonstrations": {
+                        "demonstrations": "  Carefully review the code provided by Developer1 after addressing Debugger's feedback. Offer feedback on code organization, readability, and any functional improvements needed. Provide specific examples of code sections that require further refinement and explain how these changes enhance the code's quality."
+                    }
+                },
+                "Developer_2": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Developer"
+                    },
+                    "style": {
+                        "role": "Developer",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Make further modifications to the code based on Leader's feedback."
+                    },
+                    "rule": {
+                        "rule": "Incorporate Leader's feedback into the code and address any issues or improvements identified.,make code modifications that conform to standards like PEP8, are modular, easy to read, and maintainable. Output the modified code only"
+                    },
+                    "demonstrations": {
+                        "demonstrations": "  Review the feedback provided by Leader and apply the suggested modifications to the code. Document the changes made and ensure that the updated code aligns with the project's goals and quality standards. Provide examples of code segments before and after the modifications. Output the modified code only."
+                    },
+                    "ExtractComponent": {
+                        "extract_words": [
+                            "code"
+                        ],
+                        "system_prompt": "Please extract the modified code as completely as possible.",
+                        "last_prompt": ""
+                    }
+                },
+                "Coder": {
+                    "LLM_type": "OpenAI",
+                    "LLM": {
+                        "temperature": 0.3,
+                        "model": "gpt-3.5-turbo-16k-0613",
+                        "log_path": "logs/Coder"
+                    },
+                    "style": {
+                        "role": "Coder",
+                        "style": "professional"
+                    },
+                    "CodeComponent": {
+                        "file_name": "rps_game.py",
+                        "keyword": "code"
+                    }
+                }
+            }
+        }
+    }
+}

gradio_backend.py

@@ -0,0 +1,138 @@
+import yaml
+import os
+import argparse
+import sys
+sys.path.append("../../../src/agents")
+sys.path.append("../../Gradio_Config")
+from agents.SOP import SOP
+from agents.Agent import Agent
+from agents.Environment import Environment
+from agents.Memory import Memory
+from gradio_base import Client
+from run_gradio import DebateUI
+
+def process(action):
+    response = action.response
+    send_name = action.name
+    send_role = action.role
+    if not action.is_user:
+        print(f"{send_name}({send_role}):{response}")
+    memory = Memory(send_role, send_name, response)
+    return memory
+
+def gradio_process(action,current_state):
+    response = action.response
+    all = ""
+    for i,res in enumerate(response):
+        all+=res
+        state = 10
+        if action.is_user:
+            state = 30
+        elif action.state_begin:
+            state = 12
+            action.state_begin = False
+        elif i>0:
+            state = 11
+        send_name = f"{action.name}({action.role})"
+        Client.send_server(str([state, send_name, res, current_state.name]))
+        if state == 30:
+            # print("client: waiting for input.")
+            data: list = next(Client.receive_server)
+            content = ""
+            for item in data:
+                if item.startswith("<USER>"):
+                    content = item.split("<USER>")[1]
+                    break
+            # print(f"client: recieved `{content}` from server")
+            action.response = content
+            break
+        else:
+            action.response = all
+
+def block_when_next(current_agent, current_state):
+    if Client.LAST_USER:
+        assert not current_agent.is_user
+        Client.LAST_USER = False
+        return
+    if current_agent.is_user:
+        # if next turn is user, we don't handle it here
+        Client.LAST_USER = True
+        return
+    if Client.FIRST_RUN:
+        Client.FIRST_RUN = False
+    else:
+        # block current process
+        if Client.mode == Client.SINGLE_MODE:
+            Client.send_server(str([98, f"{current_agent.name}({current_agent.state_roles[current_state.name]})", " ", current_state.name]))
+            data: list = next(Client.receive_server)
+
+
+def init(config): 
+    if not os.path.exists("logs"):
+        os.mkdir("logs")
+    sop = SOP.from_config(config)
+    agents,roles_to_names,names_to_roles = Agent.from_config(config)
+    environment = Environment.from_config(config)
+    environment.agents = agents
+    environment.roles_to_names,environment.names_to_roles = roles_to_names,names_to_roles
+    sop.roles_to_names,sop.names_to_roles = roles_to_names,names_to_roles
+    for name,agent in agents.items():
+        agent.environment = environment
+    return agents,sop,environment
+
+def run(agents,sop,environment):
+    while True:      
+        current_state,current_agent= sop.next(environment,agents)
+        block_when_next(current_agent, current_state)
+        if sop.finished:
+            print("finished!")
+            Client.send_server(str([99, ' ', ' ', current_state.name]))
+            os.environ.clear()
+            break
+        action = current_agent.step(current_state,"")   #component_dict = current_state[self.role[current_node.name]]   current_agent.compile(component_dict) 
+        gradio_process(action,current_state)
+        memory = process(action)
+        environment.update_memory(memory,current_state)
+        
+
+def prepare(agents, sop, environment):
+    client = Client()
+    Client.send_server = client.send_message
+    content = sop.states['Affirmative_Task_Allocation_state'].begin_query
+    parse_data = DebateUI.extract(content)
+    client.send_message(
+        {
+            "theme": f"{parse_data[0]}",
+            "positive": f"{parse_data[1]}",
+            "negative": f"{parse_data[2]}",
+            "agents_name": DebateUI.convert2list4agentname(sop)[0],
+            "only_name":  DebateUI.convert2list4agentname(sop)[0],
+            "default_cos_play_id": -1
+        }
+    )
+    client.listening_for_start_()
+    client.mode = Client.mode = client.cache["mode"]
+    # cover config and then start
+    if Client.cache["cosplay"] is not None:
+        agents[Client.cache["cosplay"]].is_user = True
+    sop.states['Negative_Task_Allocation_state'] = sop.states['Affirmative_Task_Allocation_state'].begin_query = \
+        DebateUI.merge(
+            theme=Client.cache["theme"], positive=Client.cache["positive"], negative=Client.cache["negative"],
+            origin_content=sop.states['Affirmative_Task_Allocation_state'].begin_query
+        )
+
+
+if __name__ == '__main__':
+    parser = argparse.ArgumentParser(description='A demo of chatbot')
+    parser.add_argument('--agent', type=str, help='path to SOP json', default="config.json")
+    args = parser.parse_args()
+    
+    agents,sop,environment = init(args.agent)
+    
+    # add ==============================
+    prepare(agents, sop, environment)
+    # ==================================
+
+    run(agents,sop,environment)
+
+

run_gradio.py

@@ -0,0 +1,354 @@
+import sys
+sys.path.append("../../Gradio_Config")
+
+from gradio_base import UIHelper, WebUI
+import os
+from gradio_base import WebUI, UIHelper, PORT, HOST, Client
+from gradio_config import GradioConfig as gc
+from typing import List, Tuple, Any
+import gradio as gr
+import time
+
+class DebateUI(WebUI):
+    FORMAT = "{}\n<debate topic>\n{}\nAffirmative viewpoint:{}\nNegative viewpoint:{}\n<debate topic>{}"
+    AUDIENCE = "Audience" 
+    cache = {}
+    all_agents_name = []
+    receive_server = None
+
+    @classmethod
+    def extract(cls, content):
+        topic = content.split("<debate topic>")[1].split("Affirmative viewpoint:")[0]
+        positive = content.split("<debate topic>")[1].split("Affirmative viewpoint:")[1].split("negative viewpoint:")[0]
+        negative = content.split("<debate topic>")[1].split("Affirmative viewpoint:")[1].split("negative viewpoint:")[1]
+        return topic.strip(), positive.strip(), negative.strip()
+
+    @classmethod
+    def merge(cls, theme, positive, negative, origin_content) -> str:
+        return cls.FORMAT.format(
+            origin_content.split("<debate topic>")[0],
+            theme, positive, negative,
+            origin_content.split("<debate topic>")[-1]
+        )
+
+    @classmethod
+    def convert2list4agentname(cls, sop):
+        only_name = [] 
+        agent_name = []     
+        roles_to_names = sop.roles_to_names
+        for state_name,roles_names in roles_to_names.items():
+            for role,name in roles_names.items():
+                agent_name.append(f"{name}({role})")
+                only_name.append(name)
+        agent_name.append(cls.AUDIENCE)
+        agent_name = list(set(agent_name))
+        agent_name.sort()
+        return agent_name, only_name
+
+    def render_and_register_ui(self):
+        gc.add_agent(self.cache["only_name"])
+    
+    def __init__(
+        self,
+        client_cmd: list,
+        socket_host: str = HOST,
+        socket_port: int = PORT,
+        bufsize: int = 1024,
+        ui_name: str = "DebateUI"
+    ):
+        super(DebateUI, self).__init__(client_cmd, socket_host, socket_port, bufsize, ui_name)
+        self.first_recieve_from_client()
+        self.data_history = list()
+        self.caller = 0
+
+    def handle_message(self, history:list,
+            state, agent_name, token, node_name):
+        if state % 10 == 0:
+            self.data_history.append({agent_name: token})
+        elif state % 10 == 1:
+            # Same state. Need to add new bubble in same bubble.
+            self.data_history[-1][agent_name] += token
+        elif state % 10 == 2:
+            # New state. Need to add new bubble.
+            history.append([None, ""])
+            self.data_history.clear()
+            self.data_history.append({agent_name: token})
+        else:
+            assert False, "Invalid state."
+        render_data = self.render_bubble(history, self.data_history, node_name, render_node_name= True or state % 10 == 2)
+        return render_data
+
+    def start_button_when_click(self, theme, positive, negative, choose, mode):
+        """
+        inputs=[self.text_theme, self.text_positive, self.text_negative, self.radio_choose],
+        outputs=[self.chatbot, self.btn_send]
+        """
+        cosplay = None if choose == self.AUDIENCE else choose.split("(")[0]
+        message = dict(theme=theme, positive=positive, negative=negative, cosplay=cosplay, mode=mode)
+        self.send_start_cmd(message=message)
+        return gr.Chatbot.update(
+            visible=True
+        ), gr.Button.update(visible=False)
+
+    def start_button_after_click(self, history):
+        """
+        inputs=[self.chatbot],
+        outputs=[self.chatbot, self.text_user, self.btn_send, self.btn_reset, self.btn_next]
+        """
+        if self.caller == 0:
+            # not single mode
+            self.data_history = list()
+        self.caller = 0
+        receive_server = self.receive_server
+        while True:
+            data_list: List = receive_server.send(None)
+            for item in data_list:
+                data = eval(item)
+                assert isinstance(data, list)
+                state, agent_name, token, node_name = data
+                assert isinstance(state, int)
+                if state == 30:
+                    # user input
+                    yield history,\
+                        gr.Textbox.update(visible=True, interactive=True), \
+                        gr.Button.update(visible=True, interactive=True),\
+                        gr.Button.update(visible=True, interactive=True),\
+                        gr.Button.update(visible=False)
+                    return
+                elif state == 99:
+                    # finish
+                    yield history, gr.Textbox.update(visible=True, interactive=False, value="finish!"), \
+                        gr.Button.update(visible=True, interactive=False, value="finish!"), gr.Button.update(visible=True, interactive=True),\
+                            gr.Button.update(visible=False)
+                elif state == 98:
+                    yield history, \
+                          gr.Textbox.update(visible=False, interactive=False), \
+                          gr.Button.update(visible=False, interactive=False),\
+                            gr.Button.update(visible=False, interactive=False),\
+                            gr.Button.update(visible=True, value=f"Next Agent: 🤖{agent_name} | Next Node: ⭕{node_name}")
+                    return
+                else:
+                    history = self.handle_message(history, state, agent_name, token, node_name)
+                    yield history, \
+                          gr.Textbox.update(visible=False, interactive=False), \
+                          gr.Button.update(visible=False, interactive=False),\
+                            gr.Button.update(visible=False, interactive=False),\
+                                gr.Button.update(visible=False)
+
+    def send_button_when_click(self, text_user, history:list):
+        """
+        inputs=[self.text_user, self.chatbot],
+        outputs=[self.text_user, self.btn_send, self.chatbot]
+        """
+        history.append(
+            [UIHelper.wrap_css(text_user, "User"), None]
+        )
+        # print(f"server: send {text_user} to client")
+        self.send_message("<USER>"+text_user+self.SIGN["SPLIT"])
+        return gr.Textbox.update(value="", visible=False),\
+              gr.Button.update(visible=False), \
+                history,\
+                    gr.Button.update(visible=False)
+
+    def reset_button_when_click(self, history, text_positive, text_negative, text_theme, text_user, btn_send, btn_start, btn_reset):
+        """
+        self.chatbot, 
+        self.text_positive, 
+        self.text_negative, 
+        self.text_theme, 
+        self.text_user,
+        self.btn_send,
+        self.btn_start,
+        self.btn_reset
+        self.btn_next
+        """
+        self.caller = 0
+        return None, \
+            "", \
+                "", \
+                    "", \
+                        "", \
+                            gr.Button.update(value="Restarting...", interactive=False, visible=True),\
+                                gr.Button.update(value="Restarting...", interactive=False, visible=True),\
+                                    gr.Button.update(value="Restarting...", interactive=False, visible=True),\
+                                        gr.Button.update(value="Restarting...", interactive=False, visible=False)
+                            
+    def reset_button_after_click(self, history, text_positive, text_negative, text_theme, text_user, btn_send, btn_start, btn_reset):
+        self.reset()
+        self.first_recieve_from_client(reset_mode=True)
+        return gr.Chatbot.update(value=None, visible=False),\
+            gr.Textbox.update(value=f"{self.cache['positive']}", interactive=True, visible=True),\
+                gr.Textbox.update(value=f"{self.cache['negative']}", interactive=True, visible=True),\
+                    gr.Textbox.update(value=f"{self.cache['theme']}", interactive=True, visible=True),\
+                        gr.Textbox.update(value=f"", interactive=True, visible=False),\
+                            gr.Button.update(interactive=True, visible=False, value="Send"),\
+                                gr.Button.update(interactive=True, visible=True, value="Start"),\
+                                    gr.Button.update(interactive=False, visible=False, value="Restart"),\
+                                        gr.Button.update(interactive=True, visible=False, value="Next Agent")
+    
+    def btn_next_when_click(self):
+        yield gr.Button.update(visible=False)
+        self.send_message("nothing")
+        self.caller = 1         # will note clear the self.data_history
+        time.sleep(0.5)
+        return
+    
+    def construct_ui(
+        self,
+        theme:str=None,
+        positive:str=None,
+        negative:str=None,
+        agents_name:List=None,
+        default_cos_play_id:int=None
+    ):
+        theme = self.cache["theme"] if theme is None else theme
+        positive = self.cache["positive"] if positive is None else positive
+        negative = self.cache["negative"] if negative is None else negative
+        agents_name = self.cache["agents_name"] if agents_name is None else agents_name
+        default_cos_play_id = self.cache["default_cos_play_id"] if default_cos_play_id is None else default_cos_play_id
+        
+        with gr.Blocks(css=gc.CSS) as demo:
+            with gr.Row():
+                with gr.Column():
+                    self.radio_mode = gr.Radio(
+                        [Client.AUTO_MODE, Client.SINGLE_MODE],
+                        value=Client.AUTO_MODE,
+                        interactive=True,
+                        label = Client.MODE_LABEL,
+                        info = Client.MODE_INFO
+                    )
+                    self.text_theme = gr.Textbox(
+                        label="Debate Topic:",
+                        value=theme,
+                        placeholder="Please input the Debate Topic"
+                    )
+                    self.text_positive = gr.Textbox(
+                        label="Affirmative viewpoint:",
+                        value=positive,
+                        placeholder="Please input the Affirmative viewpoint"
+                    )
+                    self.text_negative = gr.Textbox(
+                        label="Negative viewpoint:",
+                        value=negative,
+                        placeholder="Please input the Negative viewpoint"
+                    )
+                    self.radio_choose = gr.Radio(
+                        agents_name,
+                        value=agents_name[default_cos_play_id],
+                        label="User'agent",
+                        interactive=True
+                    )
+                    self.btn_start = gr.Button(
+                        value="run"
+                    )
+                VISIBLE = False
+                with gr.Column():
+                    self.chatbot = gr.Chatbot(
+                        height= 650,
+                        elem_id="chatbot1",
+                        label="Dialog",
+                        visible=VISIBLE
+                    )
+                    self.btn_next = gr.Button(
+                        value="Next Agent Start",
+                        visible=False
+                    )
+                    self.text_user = gr.Textbox(
+                        label="Input",
+                        placeholder="Input here",
+                        visible=VISIBLE
+                    )
+                    self.btn_send = gr.Button(
+                        value="Send",
+                        visible=VISIBLE
+                    )
+                    self.btn_reset = gr.Button(
+                        value="Restart",
+                        visible=VISIBLE
+                    )
+                    
+            self.btn_start.click(
+                fn=self.start_button_when_click,
+                inputs=[self.text_theme, self.text_positive, self.text_negative, self.radio_choose, self.radio_mode],
+                outputs=[self.chatbot, self.btn_start]
+            ).then(
+                fn=self.start_button_after_click,
+                inputs=[self.chatbot],
+                outputs=[self.chatbot, self.text_user, self.btn_send, self.btn_reset, self.btn_next]
+            )
+            
+            self.btn_send.click(
+                fn=self.send_button_when_click,
+                inputs=[self.text_user, self.chatbot],
+                outputs=[self.text_user, self.btn_send, self.chatbot, self.btn_reset]
+            ).then(
+                fn=self.start_button_after_click,
+                inputs=[self.chatbot],
+                outputs=[self.chatbot, self.text_user, self.btn_send, self.btn_reset, self.btn_next]
+            )
+            
+            self.btn_reset.click(
+                fn=self.reset_button_when_click,
+                inputs=[
+                    self.chatbot, 
+                    self.text_positive, 
+                    self.text_negative, 
+                    self.text_theme, 
+                    self.text_user,
+                    self.btn_send,
+                    self.btn_start,
+                    self.btn_reset
+                ],
+                outputs=[
+                    self.chatbot, 
+                    self.text_positive, 
+                    self.text_negative, 
+                    self.text_theme, 
+                    self.text_user,
+                    self.btn_send,
+                    self.btn_start,
+                    self.btn_reset,
+                    self.btn_next
+                ]
+            ).then(
+                fn=self.reset_button_after_click,
+                inputs=[
+                    self.chatbot, 
+                    self.text_positive, 
+                    self.text_negative, 
+                    self.text_theme, 
+                    self.text_user,
+                    self.btn_send,
+                    self.btn_start,
+                    self.btn_reset
+                ],
+                outputs=[
+                    self.chatbot, 
+                    self.text_positive, 
+                    self.text_negative, 
+                    self.text_theme, 
+                    self.text_user,
+                    self.btn_send,
+                    self.btn_start,
+                    self.btn_reset,
+                    self.btn_next
+                ]
+            )
+            
+            self.btn_next.click(
+                fn=self.btn_next_when_click,
+                inputs=[],
+                outputs=[self.btn_next]
+            ).then(
+                fn=self.start_button_after_click,
+                inputs=[self.chatbot],
+                outputs=[self.chatbot, self.text_user, self.btn_send, self.btn_reset, self.btn_next]
+            )
+            
+        self.demo = demo
+
+
+if __name__ == '__main__':
+    ui = DebateUI(client_cmd=["python","gradio_backend.py"])
+    ui.construct_ui()
+    ui.run(share=True)