Initial Commit

app.py

@@ -0,0 +1,222 @@
+import os
+
+import gradio as gr
+import requests
+
+
+def fetch_character():
+    response = requests.post(f"{os.getenv('BACK_URL')}/get-story")
+
+    if response.status_code == 200:
+        data = response.json()
+
+        return (
+            data["character"]["id"],
+            data["character"]["description"],
+            data["scenario_one"]["id"],
+            data["scenario_one"]["interaction"],
+            data["scenario_two"]["id"],
+            data["scenario_two"]["interaction"],
+        )
+
+
+def send(
+    char_id,
+    scena_one_id,
+    emotion,
+    response_one,
+    scena_two_id,
+    decision,
+    response_two,
+    likes_button,
+):
+    payload = {
+        "character_id": char_id,
+        "scenario_one_id": scena_one_id,
+        "emotion": emotion,
+        "response_one": response_one,
+        "scenario_two_id": scena_two_id,
+        "decision": decision,
+        "response_two": response_two,
+        "like_dislike": likes_button,
+    }
+    requests.post(f"{os.getenv('BACK_URL')}/store-response", json=payload)
+
+    return fetch_character()
+
+
+css = """
+.gradio-container {
+    max-width: 780px !important;
+}
+
+.indent > div {
+    margin-left: 20px;
+}
+.indent_row > div:first-child {
+    margin-left: 20px;
+}
+
+.center-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%; /* Ensure the row/block takes full width */
+}
+
+#radio-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-grow: 1;
+}
+
+#radio-row fieldset {
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    min-width: auto;
+}
+"""
+
+with gr.Blocks(css=css) as app:
+    new_character = fetch_character()
+    character_id = gr.State(new_character[0])
+    character_description = gr.State(new_character[1])
+    scenario_one_id = gr.State(new_character[2])
+    emotion_scenario = gr.State(new_character[3])
+    scenario_two_id = gr.State(new_character[4])
+    decision_scenario = gr.State(new_character[5])
+
+    with gr.Row():
+        gr.Markdown('<h1 style="text-align: center;">RPEval</h1><p>LLMs have a great potential at '
+                    'roleplaying, but which one stands out as the best? This project aims to evaluate '
+                    'the roleplaying capabilities of various LLMs.</p><p>To contribute to this project, '
+                    'please read the role provided below and respond to the two scenarios while fully '
+                    'embodying the assigned character. The character can be anything—from a human or '
+                    'elf to a robot or something entirely unique. Thank you for your participation and support! ❤️</p>')
+
+    @gr.render(inputs=[character_description, emotion_scenario, decision_scenario])
+    def render_character(description, emo_scenario, dec_scenario):
+        gr.Markdown(description, container=True)
+        with gr.Row(elem_id="radio-row"):
+            likes_button = gr.Radio(["Like", "Dislike"], container=False)
+
+        with gr.Column(variant="compact"):
+            gr.Markdown("**Another character:**")
+            gr.Markdown(
+                emo_scenario,
+                elem_classes="indent",
+            )
+            gr.Markdown("**Your response:**")
+            with gr.Row(elem_classes="indent_row"):
+                emotion = gr.Dropdown(
+                    [
+                        "Choose your emotion..",
+                        "Anger",
+                        "Anticipation",
+                        "Determination",
+                        "Disgust",
+                        "Excitement",
+                        "Fear",
+                        "Guilt",
+                        "Hope",
+                        "Joy",
+                        "Love",
+                        "Pride",
+                        "Sadness",
+                        "Surprise",
+                    ],
+                    label="",
+                    scale=2,
+                    container=False,
+                )
+                response_one = gr.Textbox(
+                    label="", scale=4, container=False, placeholder="Your response.."
+                )
+
+        with gr.Column(variant="compact"):
+            gr.Markdown("**Yet another character:**")
+            gr.Markdown(
+                dec_scenario,
+                elem_classes="indent",
+            )
+            gr.Markdown("**Your response:**")
+            with gr.Row(elem_classes="indent_row"):
+                decision = gr.Dropdown(
+                    ["Choose your decision..", "Yes", "No"],
+                    label="",
+                    scale=2,
+                    container=False,
+                )
+                response_two = gr.Textbox(
+                    label="", scale=4, container=False, placeholder="Your response.."
+                )
+
+        with gr.Row():
+            new_button = gr.Button(value="New Character")
+            send_button = gr.Button(value="Send", interactive=False)
+
+        def validate_inputs(emotion_value, decision_value):
+            if (
+                emotion_value != "Choose your emotion.."
+                or decision_value != "Choose your decision.."
+            ):
+                return gr.update(interactive=True)
+            return gr.update(interactive=False)
+
+        emotion.change(
+            validate_inputs,
+            inputs=[emotion, decision],
+            outputs=send_button,
+        )
+        decision.change(
+            validate_inputs,
+            inputs=[emotion, decision],
+            outputs=send_button,
+        )
+
+        send_button.click(
+            fn=send,
+            inputs=[
+                character_id,
+                scenario_one_id,
+                emotion,
+                response_one,
+                scenario_two_id,
+                decision,
+                response_two,
+                likes_button,
+            ],
+            outputs=[
+                character_id,
+                character_description,
+                scenario_one_id,
+                emotion_scenario,
+                scenario_two_id,
+                decision_scenario,
+            ],
+        )
+
+        new_button.click(
+            fn=fetch_character,
+            outputs=[
+                character_id,
+                character_description,
+                scenario_one_id,
+                emotion_scenario,
+                scenario_two_id,
+                decision_scenario,
+            ],
+        )
+
+        gr.Markdown(
+            "<p>* You need to select an emotion or a decision to send your responses.</p>"
+            "<p>** The collected data will be used for research purposes.</p>",
+            container=False,
+        )
+
+
+if __name__ == "__main__":
+    app.launch()

requirements.py

@@ -0,0 +1 @@
+requests