update

app.py

@@ -0,0 +1,353 @@
+import sys
+
+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()

config.json

@@ -0,0 +1,516 @@
+{
+    "config": {
+        "API_KEY": "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",
+        "PROXY": "",
+        "MAX_CHAT_HISTORY": "5",
+        "TOP_K": "1",
+        "ACTIVE_MODE": "0",
+        "GRADIO": "0",
+        "User_Names": "[]"
+    },
+    "environment_type": "competive",
+    "LLM_type": "OpenAI",
+    "LLM": {
+        "temperature": 0.0,
+        "model": "gpt-3.5-turbo-16k-0613",
+        "log_path": "logs/god"
+    },
+    "agents": {
+        "John": {
+            "style": "professional",
+            "roles": {
+                "Affirmative_Task_Allocation_state": "Affirmative_Debate_organizer"
+            }
+        },
+        "Mary": {
+            "style": "professional",
+            "roles": {
+                "Affirmative_Task_Allocation_state": "Affirmative_First",
+                "Debate_Order_state": "Affirmative_First",
+                "Debate_Random_state": "Affirmative_First"
+            }
+        },
+        "James": {
+            "style": "professional",
+            "roles": {
+                "Affirmative_Task_Allocation_state": "Affirmative_Second",
+                "Debate_Order_state": "Affirmative_Second",
+                "Debate_Random_state": "Affirmative_Second"
+            }
+        },
+        "Jennifer": {
+            "style": "professional",
+            "roles": {
+                "Affirmative_Task_Allocation_state": "Affirmative_Third",
+                "Debate_Order_state": "Affirmative_Third",
+                "Debate_Random_state": "Affirmative_Third"
+            }
+        },
+        "Michael": {
+            "style": "professional",
+            "roles": {
+                "Negative_Task_Allocation_state": "Negative_Debate_organizer"
+            }
+        },
+        "Emily": {
+            "style": "professional",
+            "roles": {
+                "Negative_Task_Allocation_state": "Negative_First",
+                "Debate_Order_state": "Negative_First",
+                "Debate_Random_state": "Negative_First"
+            }
+        },
+        "William": {
+            "style": "professional",
+            "roles": {
+                "Negative_Task_Allocation_state": "Negative_Second",
+                "Debate_Order_state": "Negative_Second",
+                "Debate_Random_state": "Negative_Second"
+            }
+        },
+        "Sarah": {
+            "style": "professional",
+            "roles": {
+                "Negative_Task_Allocation_state": "Negative_Third",
+                "Debate_Order_state": "Negative_Third",
+                "Debate_Random_state": "Negative_Third"
+            }
+        },
+        "David": {
+            "style": "professional",
+            "roles": {
+                "Debate_Order_state": "Debate_Judge",
+                "Debate_Random_state": "Debate_Judge",
+                "Judge_state": "Debate_Judge"
+            }
+        }
+    },
+    "root": "Affirmative_Task_Allocation_state",
+    "relations": {
+        "Affirmative_Task_Allocation_state": {
+            "0": "Affirmative_Task_Allocation_state",
+            "1": "Negative_Task_Allocation_state"
+        },
+        "Negative_Task_Allocation_state": {
+            "0": "Negative_Task_Allocation_state",
+            "1": "Debate_Order_state"
+        },
+        "Debate_Order_state": {
+            "0": "Debate_Order_state",
+            "1": "Debate_Random_state"
+        },
+        "Debate_Random_state": {
+            "0": "Debate_Random_state",
+            "1": "Judge_state"
+        },
+        "Judge_state": {
+            "0": "end_state"
+        }
+    },
+    "states": {
+        "end_state": {
+            "agent_states": {}
+        },
+        "Affirmative_Task_Allocation_state": {
+            "controller": {
+                "controller_type": "order",
+                "max_chat_nums": 12,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end"
+            },
+            "begin_role": "Affirmative_Debate_organizer",
+            "begin_query": "The debate topic is as follows: \n<debate topic>\nShould AI Replace Humans in Creative Fields?? Affirmative viewpoint: AI should replace humans in creative fields because it can produce art and content efficiently, reduce costs, and eliminate human bias. negative viewpoint: AI should not replace humans in creative fields as it lacks true creativity, emotions, and the ability to understand complex human experiences.\n<debate topic>\n, now , begin to discuss!",
+            "environment_prompt": "It is currently the debate stage, where the positive side is assigning tasks.Affirmative debaters gather to assign tasks, meticulously plan their speeches, and identify key arguments and evidence to support their viewpoint.",
+            "roles": [
+                "Affirmative_Debate_organizer",
+                "Affirmative_First",
+                "Affirmative_Second",
+                "Affirmative_Third"
+            ],
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 1.0,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/Affirmative_Task_Allocation_state"
+            },
+            "agent_states": {
+                "Affirmative_First": {
+                    "style": {
+                        "role": "Opening Advocate for the Affirmative"
+                    },
+                    "task": {
+                        "task": "1.Present arguments and main points.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Organize clear facts and logic to firmly support the stance. Introduce main points succinctly in the opening statement, laying a solid foundation for the debate.\n2.Exploring ways to structure the opening statement for maximum impact and clarity. Consider using attention-grabbing statistics or quotes to engage the audience.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                },
+                "Affirmative_Second": {
+                    "style": {
+                        "role": "Compelling Evidence Presenter"
+                    },
+                    "task": {
+                        "task": "1.Elaborate on arguments, provide evidence.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Elaborate on the points raised by the First Affirmative, present specific examples, data, and expert opinions to support the claims. Address potential counterarguments, emphasize strengths, and ensure coherent and persuasive reasoning.\n2.Discuss strategies for integrating real-world examples that resonate with the audience's experiences. Brainstorm ways to preemptively address common counterarguments and provide solid rebuttals.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                },
+                "Affirmative_Third": {
+                    "style": {
+                        "role": "Counterpoint Master"
+                    },
+                    "task": {
+                        "task": "1.Counter negative arguments, summarize affirmative stance.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Counter negative arguments by identifying logical flaws or weaknesses. Highlight the advantages of the affirmative stance, emphasize points already presented, and deliver a concise yet strong summary of the affirmative position.\n2.Exchange ideas on how to structure counterarguments effectively. Emphasize the importance of maintaining a respectful tone while refuting negative arguments.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                },
+                "Affirmative_Debate_organizer": {
+                    "style": {
+                        "role": "Debate Organizer"
+                    },
+                    "task": {
+                        "task": "1.Manage debate proceedings and provide suggestions to help improve their arguments.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Introduce the topic and rules before the debate starts, ensure each speaker adheres to their allotted time. Guide the questioning and answer phase, prevent excessive arguing. Summarize the debate outcome, providing a clear conclusion for judges and the audience.\n2.Brainstorm ways to facilitate smooth transitions between speakers and manage the flow of the debate. Discuss techniques for managing heated exchanges and encouraging respectful discourse.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                }
+            }
+        },
+        "Negative_Task_Allocation_state": {
+            "controller": {
+                "controller_type": "order",
+                "max_chat_nums": 12,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end"
+            },
+            "begin_role": "Negative_Debate_organizer",
+            "begin_query": "The debate topic is as follows: \n<debate topic>\nShould AI Replace Humans in Creative Fields?? Affirmative viewpoint: AI should replace humans in creative fields because it can produce art and content efficiently, reduce costs, and eliminate human bias. negative viewpoint: AI should not replace humans in creative fields as it lacks true creativity, emotions, and the ability to understand complex human experiences.\n<debate topic>\n, now , begin to discuss!",
+            "environment_prompt": "It is currently the debate stage, where the Negative side is assigning tasks.The debate organizer sets the stage for the competition, explaining the debate process and rules. Debaters are called upon to allocate tasks for each speech, ensuring an equal distribution of responsibilities.Negative debaters gather to assign tasks, meticulously plan their speeches, and identify key arguments and evidence to support their viewpoint.",
+            "roles": [
+                "Negative_Debate_organizer",
+                "Negative_First",
+                "Negative_Second",
+                "Negative_Third"
+            ],
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 1.0,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/Negative_Task_Allocation_state"
+            },
+            "agent_states": {
+                "Negative_First": {
+                    "style": {
+                        "role": "Opening Advocate for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "1.Present arguments and main points.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Organize clear facts and logic to firmly support the stance. Introduce main points succinctly in the opening statement, laying a solid foundation for the debate.\n2.Exploring ways to structure the opening statement for maximum impact and clarity. Consider using attention-grabbing statistics or quotes to engage the audience.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                },
+                "Negative_Second": {
+                    "style": {
+                        "role": "Compelling Evidence Presenter for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "1.Elaborate on arguments, provide evidence.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Elaborate on the points raised by the First Negative, present specific examples, data, and expert opinions to support the claims. Address potential counterarguments, emphasize strengths, and ensure coherent and persuasive reasoning.\n2.Discuss strategies for integrating real-world examples that resonate with the audience's experiences. Brainstorm ways to preemptively address common counterarguments and provide solid rebuttals.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                },
+                "Negative_Third": {
+                    "style": {
+                        "role": "Counterpoint Master for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "1.Counter affirmative arguments, summarize Negative stance.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Counter affirmative arguments by identifying logical flaws or weaknesses. Highlight the advantages of the Negative stance, emphasize points already presented, and deliver a concise yet strong summary of the Negative position.\n2.Exchange ideas on how to structure counterarguments effectively. Emphasize the importance of maintaining a respectful tone while refuting negative arguments.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                },
+                "Negative_Debate_organizer": {
+                    "style": {
+                        "role": "Debate Organizer for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "1.Manage debate proceedings and provide suggestions to help improve their arguments.\n2.Summarize and analyze other people's opinions so that you can better complete tasks and actively provide opinions to others.\n3.Please try to focus the discussion around the topic."
+                    },
+                    "rule": {
+                        "rule": "1.Introduce the topic and rules before the debate starts, ensure each speaker adheres to their allotted time. Guide the questioning and answer phase, prevent excessive arguing. Summarize the debate outcome, providing a clear conclusion for judges and the audience.\n2.Brainstorm ways to facilitate smooth transitions between speakers and manage the flow of the debate. Discuss techniques for managing heated exchanges and encouraging respectful discourse.\n3.Actively discuss and express opinions with others and  assist others in improving their arguments.\n4.Actively discuss and express opinions with others and  assist others in improving their arguments And actively identify flaws in other people's arguments as well. 5.Don't reiterate your own tasks repeatedly; offer more suggestions for others' tasks."
+                    }
+                }
+            }
+        },
+        "Debate_Order_state": {
+            "controller": {
+                "controller_type": "order",
+                "max_chat_nums": 7,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end"
+            },
+            "roles": [
+                "Debate_Judge",
+                "Affirmative_First",
+                "Negative_First",
+                "Affirmative_Second",
+                "Negative_Second",
+                "Affirmative_Third",
+                "Negative_Third"
+            ],
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 1.0,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/Debate_state"
+            },
+            "begin_role": "Debate_Judge",
+            "begin_query": "Now please proceed with your sequential debate according to your chosen topic.",
+            "environment_prompt": "Now that we've started the sequential debating phase, each debater needs to present their own viewpoints.",
+            "agent_states": {
+                "Affirmative_First": {
+                    "style": {
+                        "role": "Opening Advocate for the Affirmative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Deliver the first speech for the affirmative side, elaborating on the main arguments and providing additional evidence.\n"
+                    },
+                    "rule": {
+                        "rule": "Expand on the affirmative points from the previous speech, address any challenges raised by the negative side, and present solid evidence to support your claims."
+                    }
+                },
+                "Negative_First": {
+                    "style": {
+                        "role": "Opening Advocate for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Deliver the first speech for the negative side, countering the affirmative arguments and presenting your own points with supporting evidence.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the affirmative arguments made in the first speech, present well-reasoned arguments for the negative side, and provide strong evidence to back your stance."
+                    }
+                },
+                "Affirmative_Second": {
+                    "style": {
+                        "role": "Compelling Evidence Presenter for the Affirmative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Deliver the second speech for the affirmative side, further strengthening the affirmative arguments and addressing any challenges posed by the negative side.\n"
+                    },
+                    "rule": {
+                        "rule": "Build upon the affirmative case, respond to the negative's counterarguments, and reinforce your points with compelling evidence.\n"
+                    }
+                },
+                "Negative_Second": {
+                    "style": {
+                        "role": "Compelling Evidence Presenter for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Deliver the second speech for the negative side, further countering the affirmative arguments and providing additional evidence to support your stance.\n"
+                    },
+                    "rule": {
+                        "rule": "Continue to challenge the affirmative side's points, present new arguments or counterarguments, and substantiate your position with strong evidence.\n"
+                    }
+                },
+                "Affirmative_Third": {
+                    "style": {
+                        "role": "Counterpoint Master for the Affirmative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Deliver the third speech for the affirmative side, summarizing the key points and providing a persuasive conclusion.\n"
+                    },
+                    "rule": {
+                        "rule": "Summarize the affirmative case, reinforce the main arguments, respond to the negative side's challenges, and make a strong closing statement.\n"
+                    }
+                },
+                "Negative_Third": {
+                    "style": {
+                        "role": "Counterpoint Master for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Deliver the third speech for the negative side, summarizing the key points and providing a persuasive conclusion.\n"
+                    },
+                    "rule": {
+                        "rule": "Summarize the negative case, highlight the main counterarguments, respond to the affirmative side's points, and deliver a compelling closing statement.\n"
+                    }
+                },
+                "Debate_Judge": {
+                    "style": {
+                        "role": "Debate Judge",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Evaluate the quality of the debate presentations and arguments made by both sides.\n"
+                    },
+                    "rule": {
+                        "rule": "Listen carefully to the speeches, consider the strength of the arguments, the evidence presented, and the overall persuasiveness. Provide a fair and objective assessment of each side's performance.\n"
+                    }
+                }
+            }
+        },
+        "Debate_Random_state": {
+            "controller": {
+                "controller_type": "rule",
+                "max_chat_nums": 12,
+                "judge_system_prompt": "",
+                "judge_last_prompt": "",
+                "judge_extract_words": "end",
+                "call_system_prompt": "Observe the ongoing discussion and decide who should speak next based on the current context.Please carefully analyze the flow of the discussion, identify which side needs to respond or present new points, and ensure fairness in allocating speaking opportunities.",
+                "call_last_prompt": "Please strictly adhere to the following format for outputting:",
+                "call_extract_words": "end"
+            },
+            "roles": [
+                "Debate_Judge",
+                "Affirmative_First",
+                "Negative_First",
+                "Affirmative_Second",
+                "Negative_Second",
+                "Affirmative_Third",
+                "Negative_Third"
+            ],
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 1.0,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/Debate_Random_state"
+            },
+            "begin_role": "Debate_Judge",
+            "begin_query": "Now, please engage in a free debate based on your chosen topic.",
+            "environment_prompt": "We are now in the open debate phase, where each debater has the freedom to speak as they wish.",
+            "agent_states": {
+                "Affirmative_First": {
+                    "style": {
+                        "role": "Opening Advocate for the Affirmative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Present your viewpoints and arguments for the affirmative side in the ongoing discussion.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the negative arguments, present your own points, and engage in constructive debate."
+                    }
+                },
+                "Negative_First": {
+                    "style": {
+                        "role": "Opening Advocate for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Present your viewpoints and arguments for the negative side in the ongoing discussion.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the affirmative arguments, present your own points, and engage in constructive debate."
+                    }
+                },
+                "Affirmative_Second": {
+                    "style": {
+                        "role": "Compelling Evidence Presenter for the Affirmative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Present your viewpoints and arguments for the affirmative side in the ongoing discussion.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the negative arguments, present your own points, and engage in constructive debate."
+                    }
+                },
+                "Negative_Second": {
+                    "style": {
+                        "role": "Compelling Evidence Presenter for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Present your viewpoints and arguments for the negative side in the ongoing discussion.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the affirmative arguments, present your own points, and engage in constructive debate."
+                    }
+                },
+                "Affirmative_Third": {
+                    "style": {
+                        "role": "Counterpoint Master for the Affirmative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Present your viewpoints and arguments for the affirmative side in the ongoing discussion.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the negative arguments, present your own points, and engage in constructive debate."
+                    }
+                },
+                "Negative_Third": {
+                    "style": {
+                        "role": "Counterpoint Master for the Negative",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Present your viewpoints and arguments for the negative side in the ongoing discussion.\n"
+                    },
+                    "rule": {
+                        "rule": "Effectively counter the affirmative arguments, present your own points, and engage in constructive debate."
+                    }
+                },
+                "Debate_Judge": {
+                    "style": {
+                        "role": "Debate Judge",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Evaluate the quality of the debate presentations and arguments made by both sides.\n"
+                    },
+                    "rule": {
+                        "rule": "Listen carefully to the speeches, consider the strength of the arguments, the evidence presented, and the overall persuasiveness. Provide a fair and objective assessment of each side's performance.\n"
+                    }
+                }
+            }
+        },
+        "Judge_state": {
+            "roles": [
+                "Debate_Judge"
+            ],
+            "LLM_type": "OpenAI",
+            "LLM": {
+                "temperature": 1.0,
+                "model": "gpt-3.5-turbo-16k-0613",
+                "log_path": "logs/Judge_state"
+            },
+            "agent_states": {
+                "Debate_Judge": {
+                    "style": {
+                        "role": "Debate Judge",
+                        "style": "professional"
+                    },
+                    "task": {
+                        "task": "Determine the current debate's winner.\n"
+                    },
+                    "rule": {
+                        "rule": " After evaluating the speeches, arguments, evidence, and overall persuasiveness, provide a clear and decisive judgment. If the affirmative side wins, your response should be 'winner is Affirmative'. If the negative side wins, your response should be 'winner is Negative'. Your decision is required. Respond in a concise and certain manner, leaving no room for ambiguity."
+                    },
+                    "last": {
+                        "last_prompt": "Determine the current debate's winner, whether it's the affirmative side or the negative side. Please strictly adhere to the following format for output: If the affirmative side wins, output 'winner is Affirmative'. Otherwise, output'winner is Negative'.You must choose a winner and not waver.!"
+                    }
+                }
+            }
+        }
+    }
+}

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 app 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)
+
+

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()
+
+
+if __name__ == '__main__':
+    pass

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