Update app.py

app.py

@@ -71,28 +71,6 @@ Choose one of the three tasks below ... and start to play!
             
         )
         with gr.Column():
-            # data = pd.DataFrame(
-            #     {
-            #         "Role": ["AI 🤖", "HUMAN 👨👩"],
-            #         "Scores": [0, 0],
-            #     }
-            # )
-            # plot = gr.BarPlot(
-            #     data,
-            #     x="Role",
-            #     y="Scores",
-            #     color="Role",
-            #     vertical=False,
-            #     y_lim=[0,10],
-            #     color_legend_position='none', 
-            #     height=250, 
-            #     width=500,
-            #     show_label=False,
-            #     container=False,
-            # )
-            # tooltip=["Role", "Scores"],
-            
-            # button_reset = gr.Button("Reset Scores")
             logo = gr.Image('logo.png', height=230, width=640, min_width=80, show_label=False, show_share_button=False, interactive=False, container=False)
 
             gr.Markdown(
@@ -103,40 +81,25 @@ Choose one of the three tasks below ... and start to play!
                 ''' ### <p style="text-align: center;"> Machine &ensp; ''' + str(int(0)) + ''' &ensp; VS &ensp; ''' + str(int(0)) + ''' &ensp; Human </p>'''
             )
             
-            # score_robot = gr.Markdown(
-            #     ''' ## Robot: ''' + str(int(num2.value))
-            # )
-
-            # score_human = gr.Markdown(
-            #     ''' ## Human: ''' + str(int(num1.value))
-            # )
-                
-        # button_reset.click(reset_scores, outputs=[num1, num2, tot_scores, plot])
-            
     with gr.Tab("Like or Dislike"):
         text_en = gr.Textbox(label="", value="en", visible=False)
         text_nl = gr.Textbox(label="", value="nl", visible=False)
         
         lang_selected = gr.Textbox(label="", value="", visible=False)
-        num_selected = gr.Number(value=0, container=False, show_label=False, visible=False)
+        num_selected_1 = gr.Number(value=0, container=False, show_label=False, visible=False)
 
         with gr.Row():
             with gr.Column():
                 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> ''')
-                    # gr.Markdown(''' <h2 style="text-align: center;"> or </h2> ''')
                     sample_button_nl = gr.Button("Click to get a review in Dutch.", size='sm')
 
-                # h1 = gr.HighlightedText(label="Review:", interactive=True, show_legend=True, combine_adjacent=False, color_map={"+": "red", "-": "green"})
-
                 input_text = gr.Textbox(label="Review:", value="HELLO! Hallo!", visible=False, container=False)
                 interpretation1 = gr.components.Interpretation(input_text)
 
-                # image_1_1 = gr.Image('icon_user.png', height=80, width=80, min_width=80, show_label=False, show_share_button=False, interactive=False)
                 slider_1_1 = gr.Slider(label="Human: Dislike ——> Like", container=True, min_width=200, height=80, show_label=True, interactive=True)
-                # checkbox_1 = gr.CheckboxGroup(label="Which words are the guesses based on?", interactive=True)
-                user_important = gr.Textbox(label="Which words are the guesses based on?", placeholder="Enter words that you think are important..")
+                user_important = gr.Textbox(label="Which words are the guesses based on?", placeholder="Enter words that you think are important.")
                 
             gr.Markdown(
             ''' ## Like or Dislike
@@ -149,34 +112,17 @@ Choose one of the three tasks below ... and start to play!
             
             * Step 3. Check the word highlighting to understand how AI made its decision.
             '''
-            ) 
-            # gr.Markdown(
-            # ''' ## Like or Dislike
-            
-            # In this game, you will fight against AI in guessing the scores of the reviews:
-            
-            # * Step 1. Get an English/Dutch review and guess the corresponding score.
-            
-            # * Step 2. Check the score guessed by AI. The one with the correct/close answer wins.
-            
-            # * Step 3. (See how AI made the decision.)
-
-            # Simple enough? Let's have fun!
-            # '''
-            # )         
+            )      
         
         with gr.Row():
             with gr.Column():
                 chat_button_1 = gr.Button("Click to see AI's answer.", size='sm')
                 slider_1_2 = gr.Slider(label="AI: Dislike ——> Like", container=True, min_width=200, height=80, show_label=True, interactive=True)
                 interpre_button = gr.Button("See how AI gets the answer.", size='sm')
-                # h2 = gr.HighlightedText(label="Review:", interactive=True, show_legend=True, combine_adjacent=False, color_map={"+": "red", "-": "green"})
                 placeholder_text = gr.Textbox(label="Review:", value="HELLO! Hallo!", visible=False)
                 interpretation2 = gr.components.Interpretation(placeholder_text)
-                # image_1_2 = gr.Image('icon_robot.png', height=80, width=80, min_width=80, show_label=False, show_share_button=False, interactive=False)
             chatbot1 = gr.Chatbot(height=200, min_width=50, container=False) # height=300
         ####################################################################################################
-        # gr.Markdown(''' --- ''')
         gr.Markdown(''' *** ''')
 
         gr.Markdown(
@@ -196,16 +142,12 @@ Choose one of the three tasks below ... and start to play!
                 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
 
-    sample_button_en.click(read1, inputs=[text_en, num_selected], outputs=[interpretation1, lang_selected, num_selected])
-    sample_button_nl.click(read1, inputs=[text_nl, num_selected], outputs=[interpretation1, lang_selected, num_selected])
-    num_selected.change(reset_modules, outputs=[interpretation2, slider_1_1, slider_1_2, chatbot1, user_important])
-    chat_button_1.click(func1, inputs=[lang_selected, num_selected, slider_1_1, num1, num2, user_important], outputs=[slider_1_2, chatbot1, num1, num2, tot_scores])    
-    interpre_button.click(interpre1, inputs=[lang_selected, num_selected], outputs=[interpretation2])
-    
-    # sample_button_en_written.click(read1_written, inputs=[text_en], outputs=[text_written])
-    # sample_button_nl_written.click(read1_written, inputs=[text_nl], outputs=[text_written])
+    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])
+    num_selected_1.change(reset_modules, outputs=[interpretation2, slider_1_1, slider_1_2, chatbot1, user_important])
+    chat_button_1.click(func1, inputs=[lang_selected, num_selected_1, slider_1_1, num1, num2, user_important], outputs=[slider_1_2, chatbot1, num1, num2, tot_scores])    
+    interpre_button.click(interpre1, inputs=[lang_selected, num_selected_1], outputs=[interpretation2])
 
-    # lang_written.change(fn=change_lang, inputs=radio, outputs=lang_written_text)
     chat_button_2.click(func1_written, inputs=[text_written, slider_1_3, lang_written], outputs=[interpretation4, slider_1_4, chatbot2])
 
     with gr.Tab("Human or Machine"):
@@ -213,11 +155,62 @@ Choose one of the three tasks below ... and start to play!
             text_input_2 = gr.Textbox()
             text_output_2 = gr.Label()
         text_button_2 = gr.Button("Check")
-    with gr.Tab("Man or Woman"):
+    
+    
+    with gr.Tab("Male or Female"):
+        num_selected_3 = gr.Number(value=0, container=False, show_label=False, visible=False)
+
         with gr.Row():
-            text_input_3 = gr.Textbox()
-            text_output_3 = gr.Label()
-        text_button_3 = gr.Button("Guess")
+            with gr.Column():
+                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')
+
+                input_text_mf = gr.Textbox(label="Sentence:", value="HELLO! Hallo!", visible=False, container=False)
+                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.")
+                
+            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 score 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():
+                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)
+            chatbot_mf_1 = gr.Chatbot(height=200, min_width=50, container=False) # height=300
+        ####################################################################################################
+        gr.Markdown(''' *** ''')
+
+        gr.Markdown(
+                ''' # Now try your own reviews!
+                '''
+        )
+
+        with gr.Row():
+            with gr.Column():
+                text_written_mf = gr.Textbox(label="Sentence: ", placeholder="Enter your own 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)
+                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