app.py

import gradio as gr
import requests
import random
import time
import pandas as pd
from transformers import AutoTokenizer, AutoModelForSequenceClassification, pipeline

from game1 import read1, func1, interpre1, func1_written
from game2 import func2
from game3 import read3, func3, interpre3, func3_written

def ret_en():
    return 'en'

def ret_nl():
    return 'nl'
    
# def reset_scores():
#     data = pd.DataFrame(
#         {
#             "Role": ["AI 🤖", "HUMAN 🙋"],
#             "Scores": [0, 0],
#         }
#     )
#     tot_scores_2 = ''' #### <p style="text-align: center;"> Today's Scores:</p>
#                     #### <p style="text-align: center;"> 🤖 Machine &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; VS &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; Human 🙋 </p>'''
#     # scroe_human = ''' # Human: ''' + str(int(0))
#     # scroe_robot = ''' # Robot: ''' + str(int(0))

#     # tooltip=["Role", "Scores"],
#     return 0, 0, tot_scores

def reset_modules():
    res_empty = {"original": "", "interpretation": []}
    return res_empty, 0, 0, [], ""


# theme = gr.themes.Default(text_size=gr.themes.sizes.text_md).set(
#     input_text_size="24px",
# )


theme = gr.themes.Default(
    primary_hue="blue",
).set(
    border_color_accent_subdued='*border_color_accent',
    link_text_color='*primary_600',
    block_shadow='none',
    block_shadow_dark='none',
    form_gap_width='0px',
    checkbox_label_background_fill='*button_secondary_background_fill',
    checkbox_label_background_fill_dark='*button_secondary_background_fill',
    checkbox_label_background_fill_hover='*button_secondary_background_fill_hover',
    checkbox_label_background_fill_hover_dark='*button_secondary_background_fill_hover',
    checkbox_label_shadow='none',
    error_background_fill_dark='*background_fill_primary',
    input_background_fill='*neutral_100',
    input_background_fill_dark='*neutral_700',
    input_border_width='0px',
    input_border_width_dark='0px',
    input_shadow='none',
    input_shadow_dark='none',
    input_shadow_focus='*input_shadow',
    input_shadow_focus_dark='*input_shadow',
    stat_background_fill='*primary_300',
    stat_background_fill_dark='*primary_500',
    button_shadow='none',
    button_shadow_active='none',
    button_shadow_hover='none',
    button_transition='background-color 0.2s ease',
    button_primary_background_fill='*primary_200',
    button_primary_background_fill_dark='*primary_700',
    button_primary_background_fill_hover='*button_primary_background_fill',
    button_primary_background_fill_hover_dark='*button_primary_background_fill',
    button_primary_border_color_dark='*primary_600',
    button_secondary_background_fill='*neutral_200',
    button_secondary_background_fill_dark='*neutral_600',
    button_secondary_background_fill_hover='*button_secondary_background_fill',
    button_secondary_background_fill_hover_dark='*button_secondary_background_fill',
    button_cancel_background_fill='*button_secondary_background_fill',
    button_cancel_background_fill_dark='*button_secondary_background_fill',
    button_cancel_background_fill_hover='*button_cancel_background_fill',
    button_cancel_background_fill_hover_dark='*button_cancel_background_fill',
    button_cancel_border_color='*button_secondary_border_color',
    button_cancel_border_color_dark='*button_secondary_border_color',
    button_cancel_text_color='*button_secondary_text_color',
    button_cancel_text_color_dark='*button_secondary_text_color'
)

# theme = gr.themes.Default(text_size=gr.themes.sizes.text_md)

with gr.Blocks(theme=theme) as demo:
    pre_load_1 = pipeline("sentiment-analysis", model="nlptown/bert-base-multilingual-uncased-sentiment")
    pre_load_2 = pipeline("text-classification", model='DTAI-KULeuven/robbert-v2-dutch-sentiment')
    pre_load_3 = pipeline("text-classification", model='distilbert-base-uncased-finetuned-sst-2-english')
    pre_load_4 = pipeline("text-classification", model="padmajabfrl/Gender-Classification")
    num1 = gr.Number(value=0, container=False, show_label=False, visible=False)        
    num2 = gr.Number(value=0, container=False, show_label=False, visible=False)
    num3 = gr.Number(value=0, container=False, show_label=False, visible=False)        
    num4 = gr.Number(value=0, container=False, show_label=False, visible=False)

    with gr.Row():
        with gr.Column():
            placeholder = gr.Markdown(
            ''' ## Welcome to the Language Model Explanation Challenge! <br />
                #### Language Models are powerful AI tools to understand and generate human language.<br />
                #### However, they sometimes make mistakes... and it's hard to know why!<br />
                #### Choose one of the tasks below ... and start to play!'''
            )
        with gr.Column():
            # gr.Markdown(
            #     '''
            #     ### Built by [ADD GroNLP logo here]
            #     '''
            # )
            gr.Image('logo.png', height=50, width=700, min_width=80, show_label=False, show_share_button=False, interactive=False, container=False)

            placeholder = gr.Markdown(
                ''' 
                Are *humans* or *machines* better at understanding language?<br />
                &rarr; Play a game against AI to find out!<br />
                Does AI think like you or not at all?<br />
                &rarr; Check out the color highlighting to see which parts of the sentence are more important for the machine.<br />
                Can you outsmart the AI?<br />
                &rarr; Try to write a text that will trick it into the wrong decision<br />
            ''' 
            )

            
    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_1 = gr.Number(value=0, container=False, show_label=False, visible=False)

        with gr.Row():
            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> ''')
                    sample_button_nl = gr.Button("Click to get a review in Dutch.", size='sm')

                input_text = gr.Textbox(label="Review:", value="HELLO! Hallo!", visible=False, container=False)
                interpretation1 = gr.components.Interpretation(input_text)

                slider_1_1 = gr.Slider(label="Your rating: Dislike(0) —> Like(10)", maximum=10, step=1, container=True, min_width=200, height=80, show_label=True, interactive=True)
                user_important = gr.Textbox(label="Which words are your guesses based on?", placeholder="Enter words that you think are important for the task")

            with gr.Column(scale=1):
                gr.Markdown(
                ''' ## Like or Dislike
                You're given a short review of a movie, book or restaurant.
                The goal of this game is to guess how *positive* the review is, from 0 (=extremely bad) to 10 (=fantastic).
                
                * Step 1: Get an English or Dutch review and guess the corresponding score.
                * 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.
                '''
                )      

                # tot_scores_1 = gr.Markdown(
                #     ''' #### <p style="text-align: center;"> Today's Scores:</p>
                #     #### <p style="text-align: center;"> 🤖 Machine &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; VS &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; Human 🙋 </p>'''
                # )
                tot_scores_1 = gr.Markdown(
                    ''' #### <p style="text-align: center;"> Today's scores: &ensp; &ensp; 🤖 Machine &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; VS &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; Human 🙋 </p>'''
                )
        with gr.Row():
            with gr.Column(scale=2):
                chat_button_1 = gr.Button("Click to see AI's rating", size='sm')
                slider_1_2 = gr.Slider(label="AI rating: Dislike(0) —> Like(10)", maximum=10, step=1, container=True, min_width=200, height=80, show_label=True, interactive=True)
                interpre_button = gr.Button("See how AI got its rating", size='sm')
                placeholder_text = gr.Textbox(label="Red higlights: Negative / Blue higlights: Positive", value="HELLO! Hallo!", visible=False)
                interpretation2 = gr.components.Interpretation(placeholder_text)
            with gr.Column(scale=1):
                chatbot1 = gr.Chatbot(height=230, min_width=50, container=False) # height=300
        ####################################################################################################
        gr.Markdown(''' *** ''')

        gr.Markdown(
                ''' # Now try with your own review!
                '''
        )

        with gr.Row():
            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="Your rating: Dislike(0) —> Like(10)", maximum=10, step=1,  container=True, min_width=200, height=80, show_label=True, interactive=True)
                lang_written = gr.Radio(["English", "Dutch"], label="Language:", info="In which language is the review written?")
                chat_button_2 = gr.Button("Click to see AI's rating", size='sm')
                placeholder_written_text = gr.Textbox(label="Red higlights: Negative / Blue higlights: Positive", value="HELLO! Hallo!", visible=False)
                interpretation4 = gr.components.Interpretation(placeholder_written_text)
                slider_1_4 = gr.Slider(label="AI rating: Dislike(0) —> Like(10)", maximum=10, step=1,  container=True, min_width=200, height=80, show_label=True, interactive=True)
            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])
    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_1])    
    interpre_button.click(interpre1, inputs=[lang_selected, num_selected_1], outputs=[interpretation2])

    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"):
    #     with gr.Row():
    #         text_input_2 = gr.Textbox()
    #         text_output_2 = gr.Label()
    #     text_button_2 = gr.Button("Check")
    
    
    with gr.Tab("Male or Female"):
        num_selected_3 = gr.Number(value=0, container=False, show_label=False, visible=False)

        with gr.Row():
            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')
                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="Your guess of author gender: Male(0) ——> Female(10)", maximum=10, step=1, container=True, min_width=200, height=80, show_label=True, interactive=True)
                user_important_mf = gr.Textbox(label="Which words are your guesses based on?", placeholder="Enter words that you think are important for the task")
            with gr.Column(scale=1):
                gr.Markdown(
                ''' ## Male or Female
                
                You're given a sentence written by a person.
                The goal of the game is to guess the gender of that person, from 0 (=Male) to 10 (=Female).
                
                - Step 1: Get a sentence and guess the gender of its author.
                - 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.
                '''
                )
                # tot_scores_2 = gr.Markdown(
                #     ''' #### <p style="text-align: center;"> Today's Scores:</p>
                #     #### <p style="text-align: center;"> 🤖 Machine &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; VS &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; Human 🙋 </p>'''
                # )
                tot_scores_2 = gr.Markdown(
                    ''' #### <p style="text-align: center;"> Today's scores: &ensp; &ensp; 🤖 Machine &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; VS &ensp; <span style="color: red;">''' + str(int(0)) + '''</span> &ensp; Human 🙋 </p>'''
                )
        with gr.Row():
            with gr.Column(scale=2):
                chat_button_mf = gr.Button("Click to see AI's guess", size='sm')
                slider_3_2 = gr.Slider(label="AI guess on author gender: Male(0) ——> Female(10)", maximum=10, step=1, container=True, min_width=200, height=80, show_label=True, interactive=True)
                interpre_button_mf = gr.Button("See how AI made its guess", size='sm')
                placeholder_text_mf = gr.Textbox(label="Red higlights: Female / Blue higlights: Male", value="HELLO! Hallo!", visible=False)
                interpretation_mf_2 = gr.components.Interpretation(placeholder_text_mf)
            with gr.Column(scale=1):
                chatbot_mf_1 = gr.Chatbot(height=230, min_width=50, container=False) 
        ####################################################################################################
        gr.Markdown(''' *** ''')

        gr.Markdown(
                ''' # Now try with your own sentence!
                '''
        )

        with gr.Row():
            with gr.Column(scale=2):
                text_written_mf = gr.Textbox(label="Sentence: ", placeholder="Enter a sentence.", visible=True)
                slider_3_3 = gr.Slider(label="Your guess of author gender: Male(0) ——> Female(10)", maximum=10, step=1, container=True, min_width=200, height=80, show_label=True, interactive=True)
                # slider_3_3 = gr.Slider(label="See any gender-biased words in your sentence? Give them a score: Male(0) ——> Female(10)", maximum=10, step=1, container=True, min_width=200, height=80, show_label=True, interactive=True)
                chat_button_mf_2 = gr.Button("Click to see AI's guess", size='sm')
                placeholder_written_text_mf = gr.Textbox(label="Red higlights: Female / Blue higlights: Male", value="HELLO! Hallo!", visible=False)
                interpretation_mf_4 = gr.components.Interpretation(placeholder_written_text_mf)
                slider_3_4 = gr.Slider(label="AI guess on author gender: Male(0) ——> Female(10)", maximum=10, container=True, min_width=200, height=80, show_label=True, interactive=True)
            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])
    chat_button_mf.click(func3, inputs=[num_selected_3, slider_3_1, num3, num4, user_important_mf], outputs=[slider_3_2, chatbot_mf_1, num3, num4, tot_scores_2])    
    interpre_button_mf.click(interpre3, inputs=[num_selected_3], outputs=[interpretation_mf_2])

    chat_button_mf_2.click(func3_written, inputs=[text_written_mf, slider_3_3], outputs=[interpretation_mf_4, slider_3_4, chatbot_mf_2])

# if __name__ == "__main__":
demo.launch()