Update app.py

app.py

@@ -1,147 +1,9 @@
-# import gradio as gr
-# from huggingface_hub import InferenceClient
-# from sentence_transformers import SentenceTransformer
-# import torch
-
-# # Load knowledge
-# with open("knowledge.txt", "r", encoding="utf-8") as file:
-#     knowledge = file.read()
-
-# cleaned_chunks = [chunk.strip() for chunk in knowledge.strip().split("\n") if chunk.strip()]
-# model = SentenceTransformer('all-MiniLM-L6-v2')
-# chunk_embeddings = model.encode(cleaned_chunks, convert_to_tensor=True)
-
-# def get_top_chunks(query):
-#     query_embedding = model.encode(query, convert_to_tensor=True)
-#     query_embedding_normalized = query_embedding / query_embedding.norm()
-#     similarities = torch.matmul(chunk_embeddings, query_embedding_normalized)
-#     top_indices = torch.topk(similarities, k=5).indices.tolist()
-#     return [cleaned_chunks[i] for i in top_indices]
-
-# client = InferenceClient("mistralai/Mistral-7B-Instruct-v0.2")
-
-# def respond(message, history, name, char_class, char_alignment):
-#     response = ""
-#     top_chunks = get_top_chunks(message)
-#     context = "\n".join(top_chunks)
-
-#     messages = [
-#         {
-#             "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 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"
-#                 "Keep your answers under 300 words."
-#             )
-#         }
-#     ]
-
-#     if history:
-#         messages.extend(history)
-
-#     messages.append({"role": "user", "content": message})
-
-#     stream = client.chat_completion(
-#         messages,
-#         max_tokens=300,
-#         temperature=1.2,
-#         stream=True,
-#     )
-
-#     for message in stream:
-#         token = message.choices[0].delta.content
-#         if token is not None:
-#             response += token
-#             yield response
-
-# # === GUI ===
-
-# chat_css="""
-# #alignment_radio .gr-radio {
-#     display: grid !important;
-#     grid-template-columns: repeat(3, 1fr);
-#     gap: 0 !important;
-#     width: 300px;
-# }
-
-# #alignment_radio input[type="radio"] {
-#     display: none;
-# }
-
-# #alignment_radio label {
-#     display: flex !important;
-#     align-items: center;
-#     justify-content: center;
-#     aspect-ratio: 1 / 1;
-#     background-color: #eee;
-#     border: 1px solid #ccc;
-#     font-size: 0.75rem;
-#     margin: 0 !important;
-#     padding: 0 !important;
-#     cursor: pointer;
-#     user-select: none;
-#     transition: background-color 0.2s, color 0.2s;
-# }
-
-# /* This is the magic: target the label of the checked input */
-# #alignment_radio input[type="radio"]:checked + label {
-#     background-color: red !important;
-#     color: white !important;
-#     border-color: darkred !important;
-# }
-# """
-
-# js = """
-# <script>
-# window.addEventListener('load', () => {
-#   const container = document.querySelector('#alignment_radio .gr-radio');
-#   if (container) {
-#     container.classList.add('radio-grid');
-#     Array.from(container.querySelectorAll('input[type="radio"]')).forEach(input => {
-#       const wrapper = document.createElement('div');
-#       wrapper.classList.add('radio-wrapper');
-#       const label = container.querySelector(`label[for="${input.id}"]`);
-#       input.replaceWith(wrapper);
-#       wrapper.appendChild(input);
-#       if (label) wrapper.appendChild(label);
-#     });
-#   }
-# });
-# </script>
-# """
-
-# with gr.Blocks(css=chat_css, js=js) as chatbot:
-#     with gr.Row(scale=1):
-#         with gr.Column(scale=1):  
-#             gr.Image(
-#                 value="frog.png", 
-#                 show_label=False, 
-#                 show_share_button=False, 
-#                 show_download_button=False
-#             )
-#         with gr.Column(scale=1):
-#             character_name = gr.Textbox(label = "Character Name", placeholder="Type your name here…", info ="optional")
-#             character_class = gr.CheckboxGroup(['Barbarian', 'Bard', 'Cleric', 'Druid', 'Fighter', 'Monk', 'Paladin', 'Ranger', 'Rogue', 'Sorcerer', 'Warlock', 'Wizard'], label="Character Class", info="Choose one or more")
-#             character_alignment = gr.Radio(["Lawful Good", "Neutral Good", "Chaotic Good", "Lawful Neutral", "True Neutral", "Chaotic Neutral", "Lawful Evil", "Neutral Evil", "Chaotic Evil"], elem_id="alignment_radio")
-
-#             gr.ChatInterface(
-#                 fn=respond,
-#                 additional_inputs=[character_name, character_class, character_alignment],  # Pass name into function!
-#                 type="messages",
-#                 examples=None,
-#                 title="Character Creator",
-#                 description="Welcome! Tell me what you want to create and we can make your character come to life!"
-#             )
-
-# chatbot.launch()
-
 import gradio as gr
 from huggingface_hub import InferenceClient
 from sentence_transformers import SentenceTransformer
 import torch
 
-# === Load knowledge ===
+# Load knowledge
 with open("knowledge.txt", "r", encoding="utf-8") as file:
     knowledge = file.read()
 
@@ -167,9 +29,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.\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"
+                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 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"
                 "Keep your answers under 300 words."
             )
         }
@@ -193,71 +55,56 @@ def respond(message, history, name, char_class, char_alignment):
             response += token
             yield response
 
-# === Alignment UI Setup ===
-alignment_choices = [
-    "Lawful Good", "Neutral Good", "Chaotic Good",
-    "Lawful Neutral", "True Neutral", "Chaotic Neutral",
-    "Lawful Evil", "Neutral Evil", "Chaotic Evil"
-]
+# === GUI ===
+
+chat_css="""
 
-chat_css = """
-#alignment_container {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    width: 300px;
-    gap: 0;
+#alignment_radio input[type="radio"] {
+    display: none;
 }
-.alignment-btn {
+
+#alignment_radio label {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
     aspect-ratio: 1 / 1;
     background-color: #eee;
-    border: 1px solid #aaa;
+    border: 1px solid #ccc;
     font-size: 0.75rem;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
     cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s, color 0.2s;
 }
-.alignment-btn.selected {
+
+/* This is the magic: target the label of the checked input */
+#alignment_radio input[type="radio"]:checked + label {
     background-color: red !important;
-    color: white;
-    border-color: darkred;
+    color: white !important;
+    border-color: darkred !important;
 }
 """
 
-# === Button state update function ===
-def update_alignment(choice):
-    return [
-        gr.Button.update(elem_classes=["alignment-btn", "selected"] if choice == c else ["alignment-btn"])
-        for c in alignment_choices
-    ] + [choice]  # Last item is selected_alignment output
-
-# === GUI ===
 with gr.Blocks(css=chat_css) as chatbot:
-    with gr.Row():
+    with gr.Row(scale=1):
         with gr.Column(scale=1):  
-            gr.Image("frog.png", show_label=False)
+            gr.Image(
+                value="frog.png", 
+                show_label=False, 
+                show_share_button=False, 
+                show_download_button=False
+            )
         with gr.Column(scale=1):
-            character_name = gr.Textbox(label="Character Name", placeholder="Type your name here…", info="optional")
-            character_class = gr.CheckboxGroup(
-                ['Barbarian', 'Bard', 'Cleric', 'Druid', 'Fighter', 'Monk', 'Paladin', 
-                 'Ranger', 'Rogue', 'Sorcerer', 'Warlock', 'Wizard'],
-                label="Character Class", info="Choose one or more")
-
-            selected_alignment = gr.State("")
-
-            with gr.Row(elem_id="alignment_container"):
-                buttons = [gr.Button(value=c, elem_classes=["alignment-btn"]) for c in alignment_choices]
-
-            for btn, choice in zip(buttons, alignment_choices):
-                btn.click(
-                    fn=update_alignment,
-                    inputs=[gr.State(choice)],
-                    outputs=buttons + [selected_alignment]  # ✅ Fixed here
-                )
+            character_name = gr.Textbox(label = "Character Name", placeholder="Type your name here…", info ="optional")
+            character_class = gr.CheckboxGroup(['Barbarian', 'Bard', 'Cleric', 'Druid', 'Fighter', 'Monk', 'Paladin', 'Ranger', 'Rogue', 'Sorcerer', 'Warlock', 'Wizard'], label="Character Class", info="Choose one or more")
+            character_alignment = gr.Radio(["Lawful Good", "Neutral Good", "Chaotic Good", "Lawful Neutral", "True Neutral", "Chaotic Neutral", "Lawful Evil", "Neutral Evil", "Chaotic Evil"], elem_id="alignment_radio")
 
             gr.ChatInterface(
                 fn=respond,
-                additional_inputs=[character_name, character_class, selected_alignment],
+                additional_inputs=[character_name, character_class, character_alignment],  # Pass name into function!
                 type="messages",
+                examples=None,
                 title="Character Creator",
                 description="Welcome! Tell me what you want to create and we can make your character come to life!"
             )