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, read1_written, func1_written, change_lang
from game2 import func2
from game3 import func3


def ret_en():
    return 'en'

def ret_nl():
    return 'nl'
    
def reset_scores():
    data = pd.DataFrame(
        {
            "Role": ["AI 🤖", "HUMAN 👨👩"],
            "Scores": [0, 0],
        }
    )
    tot_scores = ''' ### <p style="text-align: center;"> Machine &ensp; ''' + str(int(0)) + ''' &ensp; VS &ensp; ''' + str(int(0)) + ''' &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, [], ""
    
with gr.Blocks(theme=gr.themes.Default(text_size=gr.themes.sizes.text_md)) as demo:
    pre_load_1 = pipeline("sentiment-analysis", model="nlptown/bert-base-multilingual-uncased-sentiment")
    
    with gr.Row():
        num1 = gr.Number(value=0, container=False, show_label=False, visible=False)        
        num2 = gr.Number(value=0, container=False, show_label=False, visible=False)
        
        placeholder = gr.Markdown(
            ''' ## Welcome to the Language Model Explanation Challenge!
Language Models (LMs) are powerful AI tools to understand and generate human language.<br />
However, they sometimes make mistakes... and it's hard to know why!<br /><br />
Are *humans* or *machines* better at understanding language?<br />
&rarr; Play a game against AI to find out!<br /><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 /><br />
          
Can you outsmart the AI?<br />
&rarr; Try to write a text that will trick it into the wrong decision<br /><br />
            
Choose one of the three tasks below ... and start to play!
            '''
           
            #* **Like or Dislike** provides a movie/food/book review. You (and AI) are required to guess its score.
            #The one with the correct or close answer win the score.
            
            #* **Human or Machine** provides a paragraph. You (and AI) need to judge if it is written by humans or machines.
            #The one with the correct or close answer win the score.
            
            #* **Man or Woman** allows you to write a text. 
            #If you could successfully trick the AI into guessing the wrong gender, you get the score.
            
        )
        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")
            gr.Markdown(
                ''' ## Today's Scores
                '''
            )
            tot_scores = gr.Markdown(
                ''' ### <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)

        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?")
                
            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 100 (=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.
            '''
            ) 
            # 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(
                ''' # Now try your own reviews!
                '''
        )

        with gr.Row():
            with gr.Column():
                text_written = gr.Textbox(label="Review: ", placeholder="Input 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)
                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 answer.", size='sm')
                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

    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])

    # 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"):
        with gr.Row():
            text_input_2 = gr.Textbox()
            text_output_2 = gr.Label()
        text_button_2 = gr.Button("Check")
    with gr.Tab("Man or Woman"):
        with gr.Row():
            text_input_3 = gr.Textbox()
            text_output_3 = gr.Label()
        text_button_3 = gr.Button("Guess")



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