Update app.py

app.py

@@ -167,10 +167,9 @@ def respond(message, history, name, char_class, char_alignment):
         {
             "role": "system",
             "content": (
-                f"You are a chatbot that helps users create characters for role-playing games."
-                f"The user might also provide the following information, please include their inputs in your response: \n"
-                f"Character name: {name}, Character Class: {char_class}, Character Alignment: {char_alignment}."
-                f"Use the following knowledge to inform your answers:\n\n{context}\n\n"
+                f"You are a chatbot that helps users create characters for role-playing games.\n"
+                f"The user might provide: Character name: {name}, Class: {char_class}, Alignment: {char_alignment}.\n"
+                f"Use the following knowledge:\n\n{context}\n\n"
                 "Keep your answers under 300 words."
             )
         }
@@ -194,20 +193,19 @@ def respond(message, history, name, char_class, char_alignment):
             response += token
             yield response
 
-# === Character alignment setup ===
+# === Alignment UI Setup ===
 alignment_choices = [
     "Lawful Good", "Neutral Good", "Chaotic Good",
     "Lawful Neutral", "True Neutral", "Chaotic Neutral",
     "Lawful Evil", "Neutral Evil", "Chaotic Evil"
 ]
 
-# === CSS for buttons ===
 chat_css = """
 #alignment_container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     width: 300px;
-    gap: 0px;
+    gap: 0;
 }
 .alignment-btn {
     aspect-ratio: 1 / 1;
@@ -217,7 +215,6 @@ chat_css = """
     margin: 0;
     padding: 0;
     cursor: pointer;
-    transition: background-color 0.2s, color 0.2s;
 }
 .alignment-btn.selected {
     background-color: red !important;
@@ -226,16 +223,15 @@ chat_css = """
 }
 """
 
+# Function to update button classes
+def update_alignment(choice):
+    return [gr.Button.update(variant="secondary", elem_classes=["alignment-btn", "selected"] if choice == c else ["alignment-btn"]) for c in alignment_choices], choice
+
 # === GUI ===
 with gr.Blocks(css=chat_css) as chatbot:
-    with gr.Row(scale=1):
+    with gr.Row():
         with gr.Column(scale=1):  
-            gr.Image(
-                value="frog.png", 
-                show_label=False, 
-                show_share_button=False, 
-                show_download_button=False
-            )
+            gr.Image("frog.png", show_label=False)
         with gr.Column(scale=1):
             character_name = gr.Textbox(label="Character Name", placeholder="Type your name here…", info="optional")
             character_class = gr.CheckboxGroup(
@@ -246,31 +242,13 @@ with gr.Blocks(css=chat_css) as chatbot:
             selected_alignment = gr.State("")
 
             with gr.Row(elem_id="alignment_container"):
-                buttons = []
-                for choice in alignment_choices:
-                    btn = gr.Button(choice, elem_classes=["alignment-btn"])
-                    buttons.append(btn)
+                buttons = [gr.Button(value=c, elem_classes=["alignment-btn"]) for c in alignment_choices]
 
-            # Alignment button logic
             for btn, choice in zip(buttons, alignment_choices):
                 btn.click(
-                    fn=lambda c=choice: c,
-                    inputs=None,
-                    outputs=selected_alignment
-                ).then(
-                    fn=None,
-                    inputs=None,
-                    outputs=None,
-                    _js=f"""
-                    () => {{
-                        document.querySelectorAll('.alignment-btn').forEach(b => b.classList.remove('selected'));
-                        document.querySelectorAll('.alignment-btn').forEach(b => {{
-                            if (b.innerText === "{choice}") {{
-                                b.classList.add('selected');
-                            }}
-                        }});
-                    }}
-                    """
+                    fn=update_alignment,
+                    inputs=[gr.State(choice)],
+                    outputs=[buttons, selected_alignment]
                 )
 
             gr.ChatInterface(