Update app.py

app.py

@@ -45,7 +45,7 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
         num1 = gr.Number(value=0, container=False, show_label=False, visible=False)        
         num2 = gr.Number(value=0, container=False, show_label=False, visible=False)
 
-        with gr.Column(scale=3):
+        with gr.Column(scale=2):
             placeholder = gr.Markdown(
                 ''' ## Welcome to the Language Model Explanation Challenge!
     Language Models (LMs) are powerful AI tools to understand and generate human language.<br />
@@ -90,7 +90,7 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
         num_selected_1 = gr.Number(value=0, container=False, show_label=False, visible=False)
 
         with gr.Row():
-            with gr.Column(scale=1):
+            with gr.Column(scale=2):
                 with gr.Row():
                     sample_button_en = gr.Button("Click to get a review in English.", size='sm')
                     # gr.Markdown(''' <p style="text-align: center;"> or </p> ''')
@@ -133,7 +133,7 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
         )
 
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=2):
                 text_written = gr.Textbox(label="Review: ", placeholder="Enter your own review about a movie/restaurant/book.", visible=True)
                 # image_1_3 = gr.Image('icon_user.png', height=80, width=80, min_width=80, show_label=False, show_share_button=False, interactive=False)
                 slider_1_3 = gr.Slider(label="Human: Dislike ——> Like", container=True, min_width=200, height=80, show_label=True, interactive=True)
@@ -142,7 +142,8 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
                 placeholder_written_text = gr.Textbox(label="Review: ", value="HELLO! Hallo!", visible=False)
                 interpretation4 = gr.components.Interpretation(placeholder_written_text)
                 slider_1_4 = gr.Slider(label="AI: Dislike ——> Like", container=True, min_width=200, height=80, show_label=True, interactive=True)
-            chatbot2 = gr.Chatbot(height=350, min_width=50, container=False) # height=300
+            with gr.Column(scale=1):
+                chatbot2 = gr.Chatbot(height=350, min_width=50, container=False) # height=300
 
     sample_button_en.click(read1, inputs=[text_en, num_selected_1], outputs=[interpretation1, lang_selected, num_selected_1])
     sample_button_nl.click(read1, inputs=[text_nl, num_selected_1], outputs=[interpretation1, lang_selected, num_selected_1])
@@ -163,7 +164,7 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
         num_selected_3 = gr.Number(value=0, container=False, show_label=False, visible=False)
 
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=2):
                 with gr.Row():
                     # gr.Markdown(''' <p style="text-align: center;"> or </p> ''')
                     sample_button_en_3 = gr.Button("Click to get a sentence.", size='sm')
@@ -171,29 +172,30 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
                 interpretation_mf_1 = gr.components.Interpretation(input_text_mf)
                 slider_3_1 = gr.Slider(label="Human: Male ——> Female", container=True, min_width=200, height=80, show_label=True, interactive=True)
                 user_important_mf = gr.Textbox(label="Which words are the guesses based on?", placeholder="Enter words that you think are important.")
+            with gr.Column(scale=1):
+                gr.Markdown(
+                ''' ## Male or Female
                 
-            gr.Markdown(
-            ''' ## Male or Female
-            
-            You're given a sentence spoken by a speaker.
-            The goal of this game is to guess the gender of the speaker, from 0 (=Male) to 100 (=Female).
-            
-            * Step 1. Get a sentence and guess the gender of the speaker.
-            
-            * Step 2. Check the gender guessed by AI. Who gets the most correct answer wins.
-            
-            * Step 3. Check the word highlighting to understand how AI made its decision.
-            '''
-            )      
+                You're given a sentence spoken by a speaker.
+                The goal of this game is to guess the gender of the speaker, from 0 (=Male) to 100 (=Female).
+                
+                * Step 1. Get a sentence and guess the gender of the speaker.
+                
+                * Step 2. Check the gender guessed by AI. Who gets the most correct answer wins.
+                
+                * Step 3. Check the word highlighting to understand how AI made its decision.
+                '''
+                )      
         
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=2):
                 chat_button_mf = gr.Button("Click to see AI's answer.", size='sm')
                 slider_3_2 = gr.Slider(label="AI: Male ——> Female", container=True, min_width=200, height=80, show_label=True, interactive=True)
                 interpre_button_mf = gr.Button("See how AI gets the answer.", size='sm')
                 placeholder_text_mf = gr.Textbox(label="Sentence:", value="HELLO! Hallo!", visible=False)
                 interpretation_mf_2 = gr.components.Interpretation(placeholder_text_mf)
-            chatbot_mf_1 = gr.Chatbot(height=200, min_width=50, container=False) # height=300
+            with gr.Column(scale=1):
+                chatbot_mf_1 = gr.Chatbot(height=200, min_width=50, container=False) # height=300
         ####################################################################################################
         gr.Markdown(''' *** ''')
 
@@ -203,14 +205,15 @@ with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as de
         )
 
         with gr.Row():
-            with gr.Column():
+            with gr.Column(scale=2):
                 text_written_mf = gr.Textbox(label="Sentence: ", placeholder="Enter your sentence.", visible=True)
                 slider_3_3 = gr.Slider(label="Human: Male ——> Female", container=True, min_width=200, height=80, show_label=True, interactive=True)
                 chat_button_mf_2 = gr.Button("Click to see AI's answer.", size='sm')
                 placeholder_written_text_mf = gr.Textbox(label="Sentence: ", value="HELLO! Hallo!", visible=False)
                 interpretation_mf_4 = gr.components.Interpretation(placeholder_written_text_mf)
                 slider_3_4 = gr.Slider(label="AI: Male ——> Female", container=True, min_width=200, height=80, show_label=True, interactive=True)
-            chatbot_mf_2 = gr.Chatbot(height=350, min_width=50, container=False) # height=300
+            with gr.Column(scale=1):
+                chatbot_mf_2 = gr.Chatbot(height=350, min_width=50, container=False) # height=300
 
     sample_button_en_3.click(read3, inputs=[num_selected_3], outputs=[interpretation_mf_1, num_selected_3])
     num_selected_3.change(reset_modules, outputs=[interpretation_mf_2, slider_3_1, slider_3_2, chatbot_mf_1, user_important_mf])