Update app.py

app.py

@@ -1,9 +1,147 @@
+# 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()
 
@@ -30,7 +168,8 @@ 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 Character name: {name}, Character Class: {char_class}, Character Alignment: {char_alignment}"
+                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"
                 "Keep your answers under 300 words."
             )
@@ -55,63 +194,40 @@ def respond(message, history, name, char_class, char_alignment):
             response += token
             yield response
 
-# === GUI ===
+# === Character alignment setup ===
+alignment_choices = [
+    "Lawful Good", "Neutral Good", "Chaotic Good",
+    "Lawful Neutral", "True Neutral", "Chaotic Neutral",
+    "Lawful Evil", "Neutral Evil", "Chaotic Evil"
+]
 
-chat_css="""
-#alignment_radio .gr-radio {
-    display: grid !important;
+# === CSS for buttons ===
+chat_css = """
+#alignment_container {
+    display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 0 !important;
     width: 300px;
+    gap: 0px;
 }
-
-#alignment_radio input[type="radio"] {
-    display: none;
-}
-
-#alignment_radio label {
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
+.alignment-btn {
     aspect-ratio: 1 / 1;
     background-color: #eee;
-    border: 1px solid #ccc;
+    border: 1px solid #aaa;
     font-size: 0.75rem;
-    margin: 0 !important;
-    padding: 0 !important;
+    margin: 0;
+    padding: 0;
     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 {
+.alignment-btn.selected {
     background-color: red !important;
-    color: white !important;
-    border-color: darkred !important;
+    color: white;
+    border-color: darkred;
 }
 """
 
-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:
+# === GUI ===
+with gr.Blocks(css=chat_css) as chatbot:
     with gr.Row(scale=1):
         with gr.Column(scale=1):  
             gr.Image(
@@ -121,17 +237,49 @@ with gr.Blocks(css=chat_css, js=js) as chatbot:
                 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")
+            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 = []
+                for choice in alignment_choices:
+                    btn = gr.Button(choice, elem_classes=["alignment-btn"])
+                    buttons.append(btn)
+
+            # Click logic for all alignment buttons
+            for btn, choice in zip(buttons, alignment_choices):
+                btn.click(
+                    fn=lambda c=choice: c,
+                    inputs=None,
+                    outputs=selected_alignment
+                ).then(
+                    None,
+                    None,
+                    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');
+                            }}
+                        }});
+                    }}
+                    """
+                )
 
+            # Chat interface
             gr.ChatInterface(
                 fn=respond,
-                additional_inputs=[character_name, character_class, character_alignment],  # Pass name into function!
+                additional_inputs=[character_name, character_class, selected_alignment],
                 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()
+chatbot.launch()