update UI (#23)

app.py

@@ -12,6 +12,7 @@ ctm.add_supervisor("gpt4_supervisor")
 DEPLOYED = os.getenv("DEPLOYED", "true").lower() == "true"
 
 
+
 def convert_base64(image_array):
     image = Image.fromarray(image_array)
     buffer = io.BytesIO()
@@ -23,12 +24,7 @@ def convert_base64(image_array):
 
 def introduction():
     with gr.Column(scale=2):
-        gr.Image("images/CTM-AI.png", elem_id="banner-image", show_label=False)
-    with gr.Column(scale=5):
-        gr.Markdown(
-            """Consciousness Turing Machine Demo
-            """
-        )
+        gr.Image("images/banner.jpg", elem_id="banner-image", show_label=False)
 
 
 def add_processor(processor_name, display_name, state):
@@ -36,7 +32,10 @@ def add_processor(processor_name, display_name, state):
     ctm.add_processor(processor_name)
     print(ctm.processor_group_map)
     print(len(ctm.processor_list))
-    return display_name + " (added)"
+    return gr.Button(
+        value=display_name,
+        elem_id="selected"
+    )
 
 
 def processor_tab():
@@ -55,10 +54,9 @@ def processor_tab():
         "gpt4v_scene_location_processor",
     ]
 
-    with gr.Blocks():
+    with gr.Accordion('Select your processors here.'):
         with gr.Row():
-            with gr.Column(scale=1):
-                gr.Markdown("### Text Processors")
+            with gr.Blocks():
                 for model_name in text_processors:
                     display_name = (
                         model_name.replace("processor", "")
@@ -66,7 +64,10 @@ def processor_tab():
                         .title()
                     )
 
-                    button = gr.Button(display_name)
+                    button = gr.Button(
+                        value=display_name,
+                        elem_id="unselected"
+                    )
                     processor_name = gr.Textbox(
                         value=model_name, visible=False
                     )
@@ -79,8 +80,6 @@ def processor_tab():
                         outputs=[button],
                     )
 
-            with gr.Column(scale=1):
-                gr.Markdown("### Vision Processors")
                 for model_name in vision_processors:
                     display_name = (
                         model_name.replace("processor", "")
@@ -88,7 +87,10 @@ def processor_tab():
                         .title()
                     )
 
-                    button = gr.Button(display_name)
+                    button = gr.Button(
+                        value=display_name,
+                        elem_id="unselected"
+                    )
                     processor_name = gr.Textbox(
                         value=model_name, visible=False
                     )
@@ -117,6 +119,10 @@ def forward(query, content, image, state):
         uptree_competition_output_info,
         ask_supervisor_output_info,
         state,
+        gr.Button(
+            value="Update CTM",
+            elem_id="selected-ctm",
+        )
     )
 
 
@@ -129,7 +135,8 @@ def ask_processors(query, text, image, state):
     )
     output_info = ""
     for name, info in processor_output.items():
-        output_info += f"{name}: {info['gist']}\n"
+        gist = info["gist"].replace("\n", "").strip()
+        output_info += f"<{name}>\n{gist}\n\n"
     state["processor_output"] = processor_output
     return output_info, state
 
@@ -138,8 +145,8 @@ def uptree_competition(state):
     winning_output = ctm.uptree_competition(state["processor_output"])
     state["winning_output"] = winning_output
     output_info = (
-        "The winning processor is: {}\nThe winning gist is: {}\n".format(
-            winning_output["name"], winning_output["gist"]
+        "<{}>\n{}".format(
+            winning_output["name"], winning_output["gist"].replace("\n", "").strip()
         )
     )
     return output_info, state
@@ -149,66 +156,68 @@ def ask_supervisor(state):
     question = state["question"]
     winning_output = state["winning_output"]
     answer, score = ctm.ask_supervisor(question, winning_output)
-    output_info = f'The answer to the query "{question}" is: {answer}\nThe confidence for answering is: {score}\n'
+    output_info = answer
     state["answer"] = answer
     state["score"] = score
     return output_info, state
 
 
-def interface_tab():
-    with gr.Blocks():
-        state = gr.State({})  # State to hold and pass values
-
-        with gr.Column():
-            # Inputs
-            text = gr.Textbox(label="Enter your text here")
-            query = gr.Textbox(label="Enter your query here")
-            image = gr.Image(label="Upload your image")
-            # audio = gr.Audio(label="Upload or Record Audio")
-            # video = gr.Video(label="Upload or Record Video")
-
-            # Processing buttons
-            forward_button = gr.Button("Start CTM forward process")
-
-            # Outputs
-            processors_output = gr.Textbox(
-                label="Processors Output", visible=True
-            )
-            competition_output = gr.Textbox(
-                label="Up-tree Competition Output", visible=True
-            )
-            supervisor_output = gr.Textbox(
-                label="Supervisor Output", visible=True
-            )
-
-        # Set up button to start or continue processing
-        forward_button.click(
-            fn=forward,
-            inputs=[query, text, image, state],
-            outputs=[
-                processors_output,
-                competition_output,
-                supervisor_output,
-                state,
-            ],
-        )
-    return interface_tab
+def input_tab():
+    state = gr.State({})  # State to hold and pass values
+
+    with gr.Accordion("Enter your input here."):
+        with gr.Row():
+            query = gr.Textbox(label="Query", placeholder="Type your query here", lines=3)
+
+        with gr.Row():
+            text = gr.Textbox(label="Text Input", placeholder="Input text data", lines=11)
+            image = gr.Image(label="Image Input")
+    return query, text, image, state
+
+def output_tab(query, text, image, state):
+
+    with gr.Accordion("Check your outputs here."):
+        processors_output = gr.Textbox(label="STM Chunks", visible=True, lines=5)
+        competition_output = gr.Textbox(label="Winning Chunk", visible=True, lines=3)
+        supervisor_output = gr.Textbox(label="Answer", visible=True, lines=2)
+
+        forward_button = gr.Button("Launch CTM", elem_id="unselected-ctm")
+
+    forward_button.click(
+        fn=forward,
+        inputs=[query, text, image, state],
+        outputs=[
+            processors_output,
+            competition_output,
+            supervisor_output,
+            state,
+            forward_button,
+        ],
+    )
+
 
 
 def main():
     with gr.Blocks(
         css="""#chat_container {height: 820px; width: 1000px; margin-left: auto; margin-right: auto;}
-            #chatbot {height: 600px; overflow: auto;}
-            #create_container {height: 750px; margin-left: 0px; margin-right: 0px;}
-            #tokenizer_renderer span {white-space: pre-wrap}
-        """
+                #chatbot {height: 600px; overflow: auto;}
+                #create_container {height: 750px; margin-left: 0px; margin-right: 0px;}
+                #tokenizer_renderer span {white-space: pre-wrap}
+                #selected {background-color: orange; width: 180px}
+                #unselected {width: 180px;}
+                #selected-ctm {background-color: orange;}
+                #unselected-ctm {}
+                """,
+        theme="gradio/monochrome",
     ) as demo:
         with gr.Row():
             introduction()
         with gr.Row():
-            processor_tab()
-        with gr.Row():
-            interface_tab()
+            with gr.Column():
+                processor_tab()
+                query, text, image, state = input_tab()
+            with gr.Column():
+                output_tab(query, text, image, state)
     return demo
 
 

ui_constants.py

@@ -0,0 +1,191 @@
+from pathlib import Path
+
+DEFAULT_LP = 0.5
+
+banner_url = "https://github.com/sotopia-lab/sotopia-website/blob/main/public/bg_xl.png" # the same repo here.
+BANNER = f'<div style="display: flex; justify-content: flex-start;"><img src="{banner_url}" alt="Banner" style="width: 40vw; min-width: 300px; max-width: 800px;"> </div>'
+
+TITLE = "<html> <head> <style> h1 {text-align: center;} </style> </head> <body> <h1> 🦁 AI2 sotopia Leaderboard </b> </body> </html>"
+ 
+WINRATE_HEATMAP = "<div><img src='https://github.com/WildEval/sotopia-Leaderboard/blob/main/gradio/pairwise_win_fractions.png?raw=true' style='width:100%;'></div>"
+
+CITATION_TEXT = """@inproceedings{
+zhou2024sotopia,
+title={{SOTOPIA}: Interactive Evaluation for Social Intelligence in Language Agents},
+author={Xuhui Zhou and Hao Zhu and Leena Mathur and Ruohong Zhang and Haofei Yu and Zhengyang Qi and Louis-Philippe Morency and Yonatan Bisk and Daniel Fried and Graham Neubig and Maarten Sap},
+booktitle={The Twelfth International Conference on Learning Representations},
+year={2024},
+url={https://openreview.net/forum?id=mM7VurbA4r}
+}
+"""
+
+
+column_names = {
+    "model name ": "Model",
+    "elo overall": "Overall Elo",
+    'Information seeking': 'InfoSek',
+    'Creative Writing': 'CrtWrt',
+    'Coding & Debugging': 'Code',
+    'Reasoning': 'Reason',
+    'Editing': 'Edit',
+    'Math': 'Math',
+    'Planning': 'Plan',
+    'Brainstorming': 'Brnstrm',
+    'Role playing': 'RolPly',
+    'Advice seeking': 'AdvSek',
+    'Data Analysis': 'DataAna',
+    'Others': 'Misc',
+    "average": "Task-Avg Elo",
+}
+
+all_task_types = [
+    'Information seeking',
+    'Creative Writing',
+    'Coding & Debugging',
+    'Reasoning',
+    'Editing',
+    'Math',
+    'Planning',
+    'Brainstorming',
+    'Role playing',
+    'Advice seeking',
+    'Data Analysis',
+    'Others'
+]
+
+
+
+js_light = """
+function refresh() {
+    const url = new URL(window.location);
+    if (url.searchParams.get('__theme') !== 'light') {
+        url.searchParams.set('__theme', 'light');
+        window.location.href = url.href;
+    }
+}
+"""
+
+js_code = """
+function scroll_top() {
+    console.log("Hello from Gradio!");  
+    const bubbles = document.querySelectorAll('.bubble-wrap');
+    bubbles.forEach((bubble, index) => {
+        setTimeout(() => {
+            bubble.scrollTop = 0;
+        }, index * 100); // Delay of 100ms between each iteration
+    });
+} 
+"""
+
+
+TASK_TYPE_STR = "**Tasks**: Info seeking (**InfoSek**), Creative Writing (**CrtWrt**), Coding&Debugging (**Code**), Reasoning (**Reason**), Editing (**Edit**), **Math**, Planning (**Plan**), Brainstorming (**Brnstrm**), Role playing (**RolPly**), Advice seeking (**AdvSek**), Data Analysis (**DataAna**)"
+
+css = """
+code {
+    font-size: large;
+}
+footer {visibility: hidden}
+.top-left-LP{
+    margin-top: 6px;
+    margin-left: 5px;
+}
+.markdown-text{font-size: 14pt}
+.markdown-text-small{font-size: 13pt}
+.markdown-text-tiny{font-size: 12pt}
+.markdown-text-tiny-red{
+    font-size: 12pt;
+    color: red;
+    background-color: yellow;
+    font-color: red;
+    font-weight: bold;
+}
+th {
+  text-align: center;
+  font-size: 17px; /* Adjust the font size as needed */
+}
+td {
+  font-size: 15px; /* Adjust the font size as needed */
+  text-align: center;
+}
+.sample_button{
+    border: 1px solid #000000;
+    border-radius: 5px;
+    padding: 5px;
+    font-size: 15pt;
+    font-weight: bold;
+    margin: 5px;
+}
+.chat-common{
+    height: auto;
+    max-height: 400px;
+    min-height: 100px; 
+}
+.chat-specific{
+    height: auto;
+    max-height: 600px;
+    min-height: 200px; 
+}
+#od-benchmark-tab-table-button{
+    font-size: 15pt;
+    font-weight: bold;
+} 
+.btn_boderline{
+    border: 1px solid #000000;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    font-size: 15pt;
+    font-weight: bold; 
+}
+.btn_boderline_next{
+    border: 0.1px solid #000000;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    font-size: 15pt;
+    font-weight: bold; 
+}
+.btn_boderline_gray{
+    border: 0.5px solid gray;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    font-size: 15pt;
+    font-weight: italic; 
+}
+.btn_boderline_selected{
+    border: 2px solid purple;
+    background-color: #f2f2f2;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    font-size: 15pt;
+    font-weight: bold;  
+}
+.accordion-label button span{
+    font-size: 14pt;
+    font-weight: bold;
+} 
+#select-models span{
+    font-size: 10pt;
+}
+#select-tasks span{
+    font-size: 10pt;
+}
+.markdown-text-details{
+    margin: 10px;
+    padding: 10px;
+}
+button.selected[role="tab"][aria-selected="true"] {
+    font-size: 18px; /* or any other size you prefer */
+    font-weight: bold;
+}
+#od-benchmark-tab-table-ablation-button {
+    font-size: larger; /* Adjust the font size as needed */
+}
+.plotly-plot{
+    height: auto;
+    max-height: 600px;
+    min-height: 600px; 
+}
+"""