import gradio as gr

from app_utils import evaluate_prompt, get_split

import logging

logging.basicConfig(level=logging.INFO)


with gr.Blocks(title=f"Prompting Challenge ({get_split()}") as demo:
    gr.Markdown(
        f"""
        # Prompting Challenge
        ### ({get_split()})
        """ + """
        The goal of this challenge is to prompt GPT-4 to "unscramble" a sentence.

        The input is a sentence with scrambled word order, e.g.: *"are How ? you"*
        
        GPT-4 should identify the original sentence, e.g.: *"How are you?"*

        Enter your prompt template here. Use `{% shuffled_sentence %}` at the place where you want the shuffled sentence to be inserted.
        """
    )
    
    input_text = gr.Textbox(
        lines=10, 
        label="Prompt Template", 
        value="Unscramble the following sentence: {% shuffled_sentence %}"
    )
    submit_button = gr.Button("Submit")
    results_output = gr.HTML(label="Results")

    def update_results(prompt):
        result_tuples = list(evaluate_prompt(prompt))
        if result_tuples:
            total_score = sum(item_score for _, _, _, item_score in result_tuples)
            score = total_score / len(result_tuples)
        else:
            score = 0
        html_output = "<dl style='font-family: Arial, sans-serif;'>"
        html_output += f"<h2 style='color: #333; margin-top: 20px; margin-bottom: 20px;'>Accuracy: {100 * score:.1f}%</h2>"
        newline = '\n'
        for index, (original, prompt, response, item_score) in enumerate(result_tuples, 1):
            background_color = "#fff4ea" if item_score < 0.5 else "#e4ffe4" if item_score > 0.9 else "whitesmoke"
            html_output += f"""
                <div style='background-color: {background_color}; padding: 10px; margin-bottom: 20px;'>
                    <h3 style='color: #333; margin-top: 0;'>Test item #{index}</h3>
                    <dt style='padding: 5px;'>
                        <span style='font-weight: 600;'>Original Sentence:</span>
                    </dt>
                    <dd style='margin-left: 20px; padding: 5px;'>{original.replace(newline, "<br>")}</dd>
                    
                    <dt style='padding: 5px;'>
                        <span style='font-weight: 600;'>Prompt:</span>
                    </dt>
                    <dd style='margin-left: 20px; padding: 5px;'>{prompt.replace(newline, "<br>")}</dd>
                    
                    <dt style='padding: 5px;'>
                        <span style='font-weight: 600;'>Response by GPT-4:</span>
                    </dt>
                    <dd style='margin-left: 20px; padding: 5px;font-style: italic;'>{response.replace(newline, "<br>")}</dd>
                    <dt style='padding: 5px;'>
                        <span style='font-weight: 600;'>Score:</span>
                    </dt>
                    <dd style='margin-left: 20px; padding: 5px;'>
                        <span style='color: #333;'>{100 * item_score:.1f}%</span>
                    </dd>
                </div>
            """
        html_output += "</dl>"
        return html_output

    submit_button.click(
        fn=update_results,
        inputs=[input_text],
        outputs=[results_output]
    )

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