Update app.py

app.py

@@ -11,7 +11,7 @@ from sentence_transformers import SentenceTransformer
 from openai import OpenAI
 
 # =====================================================
-# PATHS
+# CONFIG
 # =====================================================
 BUILD_DIR = "brainchat_build"
 CHUNKS_PATH = os.path.join(BUILD_DIR, "chunks.pkl")
@@ -19,19 +19,9 @@ TOKENS_PATH = os.path.join(BUILD_DIR, "tokenized_chunks.pkl")
 EMBED_PATH = os.path.join(BUILD_DIR, "embeddings.npy")
 CONFIG_PATH = os.path.join(BUILD_DIR, "config.json")
 
-LOGO_CANDIDATES = [
-    "Brain chat-09.png",
-    "brainchat_logo.png.png",
-    "Brain Chat Imagen.svg",
-    "logo.png",
-    "logo.svg",
-]
-
+LOGO_FILE = "logo.png"
 OPENAI_MODEL = os.getenv("OPENAI_MODEL", "gpt-4o-mini")
 
-# =====================================================
-# GLOBALS
-# =====================================================
 BM25 = None
 CHUNKS = None
 EMBEDDINGS = None
@@ -120,7 +110,12 @@ def make_sources(records):
     seen = set()
     lines = []
     for r in records:
-        key = (r.get("book"), r.get("section_title"), r.get("page_start"), r.get("page_end"))
+        key = (
+            r.get("book"),
+            r.get("section_title"),
+            r.get("page_start"),
+            r.get("page_end"),
+        )
         if key in seen:
             continue
         seen.add(key)
@@ -140,7 +135,7 @@ def language_instruction(language_mode: str) -> str:
         return "Answer only in Spanish."
     if language_mode == "Bilingual":
         return "Answer first in English, then provide a Spanish version under the heading 'Español:'."
-    return "If the user's message is in Spanish, answer in Spanish. Otherwise answer in English."
+    return "If the user's message is in Spanish, answer in Spanish; otherwise answer in English."
 
 
 def choose_quiz_count(user_text: str, selector: str) -> int:
@@ -156,12 +151,12 @@ def choose_quiz_count(user_text: str, selector: str) -> int:
 
 
 def build_tutor_prompt(mode: str, language_mode: str, question: str, context: str) -> str:
-    mode_map = {
-        "Explain": "Explain clearly like a friendly tutor using simple language and short headings if useful.",
-        "Detailed": "Give a fuller and more detailed explanation with key points and clinical relevance if supported by the context.",
+    styles = {
+        "Explain": "Explain clearly like a friendly tutor using simple language.",
+        "Detailed": "Give a more detailed explanation with key points and clinical relevance only when supported by context.",
         "Short Notes": "Write concise revision notes using short bullet points.",
         "Flashcards": "Create 6 flashcards in Q/A format using only the context.",
-        "Case-Based": "Create a short clinical scenario and then explain the concept using the context."
+        "Case-Based": "Create a short clinical case scenario and then explain the concept using the context.",
     }
 
     return f"""
@@ -175,7 +170,7 @@ Rules:
 - {language_instruction(language_mode)}
 
 Teaching style:
-{mode_map.get(mode, "Explain clearly like a tutor.")}
+{styles.get(mode, "Explain clearly like a friendly tutor.")}
 
 Context:
 {context}
@@ -192,9 +187,9 @@ You are BrainChat, an interactive tutor.
 Rules:
 - Use ONLY the provided context.
 - Create exactly {n_questions} quiz questions.
-- Keep each question short and clear.
-- Include a short answer key.
-- Return valid JSON only.
+- Keep questions short and clear.
+- Include a short answer key for each.
+- Return VALID JSON only.
 - {language_instruction(language_mode)}
 
 Return JSON in this format:
@@ -222,7 +217,9 @@ You are BrainChat, an interactive tutor.
 Evaluate the student's answers fairly using the answer keys.
 Accept semantically correct answers even if wording differs.
 
-Return valid JSON only in this format:
+Return VALID JSON only.
+
+Return JSON in this format:
 {{
   "score_obtained": 0,
   "score_total": 0,
@@ -251,7 +248,7 @@ Language:
 
 
 # =====================================================
-# OPENAI HELPERS
+# OPENAI
 # =====================================================
 def oai_text(prompt: str) -> str:
     ensure_loaded()
@@ -283,18 +280,10 @@ def oai_json(prompt: str) -> dict:
 # =====================================================
 # LOGO
 # =====================================================
-def find_logo_filename():
-    for name in LOGO_CANDIDATES:
-        if os.path.exists(name):
-            return name
-    return None
-
-
 def logo_url():
-    f = find_logo_filename()
-    if not f:
-        return None
-    return f"/gradio_api/file={quote(f)}"
+    if os.path.exists(LOGO_FILE):
+        return f"/gradio_api/file={quote(LOGO_FILE)}"
+    return None
 
 
 def render_logo():
@@ -305,9 +294,9 @@ def render_logo():
 
 
 # =====================================================
-# CHAT HTML RENDER
+# CHAT HTML
 # =====================================================
-def escape_and_format(text: str) -> str:
+def format_text(text: str) -> str:
     safe = (
         text.replace("&", "&")
             .replace("<", "&lt;")
@@ -323,8 +312,7 @@ def render_chat(history):
         return """
         <div class="bc-empty">
             <div class="bc-empty-text">
-                Choose a tutor mode above and ask a question.<br>
-                For quiz mode, type a topic such as <strong>cranial nerves</strong>.
+                Ask a question and choose a tutor mode above.
             </div>
         </div>
         """
@@ -332,7 +320,7 @@ def render_chat(history):
     rows = []
     for item in history:
         role = item["role"]
-        content = escape_and_format(item["content"])
+        content = format_text(item["content"])
 
         if role == "user":
             rows.append(
@@ -348,9 +336,9 @@ def render_chat(history):
         {''.join(rows)}
     </div>
     <script>
-        const el = document.getElementById("bc-chat-wrap");
-        if (el) {{
-            el.scrollTop = el.scrollHeight;
+        const chatWrap = document.getElementById("bc-chat-wrap");
+        if (chatWrap) {{
+            chatWrap.scrollTop = chatWrap.scrollHeight;
         }}
     </script>
     """
@@ -370,7 +358,6 @@ def respond(user_msg, history, mode, language_mode, quiz_count_mode, show_source
     try:
         history = history + [{"role": "user", "content": text}]
 
-        # quiz evaluation
         if quiz_state.get("active", False):
             evaluation = oai_json(
                 build_quiz_eval_prompt(
@@ -402,11 +389,9 @@ def respond(user_msg, history, mode, language_mode, quiz_count_mode, show_source
             quiz_state = {"active": False, "quiz_data": None, "language_mode": language_mode}
             return "", history, render_chat(history), quiz_state
 
-        # normal retrieval
         records = search_hybrid(text, shortlist_k=20, final_k=4)
         context = build_context(records)
 
-        # quiz generation
         if mode == "Quiz Me":
             n_questions = choose_quiz_count(text, quiz_count_mode)
             quiz_data = oai_json(build_quiz_generation_prompt(language_mode, text, context, n_questions))
@@ -414,9 +399,8 @@ def respond(user_msg, history, mode, language_mode, quiz_count_mode, show_source
             lines = []
             lines.append(f"**{quiz_data.get('title', 'Quiz')}**")
             lines.append(f"\n**Total questions:** {len(quiz_data.get('questions', []))}\n")
-            lines.append("Reply in ONE message with numbered answers, for example:")
-            lines.append("1. ...")
-            lines.append("2. ...\n")
+            lines.append("Reply in one message using numbered answers.")
+            lines.append("Example: 1. ... 2. ...\n")
 
             for i, q in enumerate(quiz_data.get("questions", []), start=1):
                 lines.append(f"**Q{i}.** {q.get('q','')}")
@@ -429,7 +413,6 @@ def respond(user_msg, history, mode, language_mode, quiz_count_mode, show_source
             quiz_state = {"active": True, "quiz_data": quiz_data, "language_mode": language_mode}
             return "", history, render_chat(history), quiz_state
 
-        # tutor modes
         answer = oai_text(build_tutor_prompt(mode, language_mode, text, context))
         if show_sources:
             answer = answer.strip() + "\n\n**Sources:**\n" + make_sources(records)
@@ -451,24 +434,22 @@ def clear_all():
 
 # =====================================================
 # CSS
-# dark but light-friendly, no black background
 # =====================================================
 CSS = """
 :root{
-  --page-bg: #d9d9dc;
-  --panel-bg: #4a4c59;
-  --chat-bg: #363846;
+  --page-bg: #d9d9dd;
+  --panel-bg: #555765;
+  --chat-bg: #4a4c59;
   --grad-top: #e8c7d4;
   --grad-mid: #a55ca2;
-  --grad-bot: #53246d;
+  --grad-bot: #5a2d77;
   --accent: #f4eb4b;
-  --accent-soft: #f7f1a7;
-  --user-bubble: #f8f8fb;
-  --bot-bubble: #f7f3b0;
-  --text-dark: #1b1630;
+  --accent-soft: #f5ef9a;
+  --user-bubble: #ffffff;
+  --bot-bubble: #f5efad;
+  --text-dark: #221735;
   --text-light: #ffffff;
-  --input-bg: #f3efc7;
-  --shadow: rgba(25, 20, 40, 0.18);
+  --shadow: rgba(30,20,50,0.18);
 }
 
 html, body, .gradio-container{
@@ -477,25 +458,36 @@ html, body, .gradio-container{
 }
 footer{display:none !important;}
 
-#bc-app{
-  max-width: 980px;
+#bc_app{
+  max-width: 1000px;
   margin: 18px auto;
 }
 
-.bc-top-panel{
-  background: var(--panel-bg);
-  border-radius: 18px;
-  padding: 16px;
+.bc-settings{
+  background: linear-gradient(180deg, #484b59 0%, #3f424f 100%);
+  border-radius: 20px;
+  padding: 14px;
   box-shadow: 0 10px 24px var(--shadow);
   margin-bottom: 14px;
 }
 
+.bc-howto{
+  margin-top: 8px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(255,255,255,0.10);
+  color: white;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
 .bc-phone{
   position: relative;
-  background: linear-gradient(180deg, var(--grad-top) 0%, var(--grad-mid) 52%, var(--grad-bot) 100%);
-  border-radius: 26px;
-  padding: 90px 14px 14px 14px;
+  background: linear-gradient(180deg, var(--grad-top) 0%, var(--grad-mid) 48%, var(--grad-bot) 100%);
+  border-radius: 30px;
+  padding: 92px 14px 14px 14px;
   box-shadow: 0 16px 34px var(--shadow);
+  min-height: 620px;
 }
 
 .bc-logo-holder{
@@ -536,27 +528,27 @@ footer{display:none !important;}
 }
 
 .bc-chat-shell{
-  background: var(--chat-bg);
-  border-radius: 18px;
+  background: rgba(74,76,89,0.92);
+  border-radius: 20px;
   padding: 16px;
-  min-height: 480px;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
+  min-height: 460px;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
 }
 
 .bc-chat-wrap{
   display: flex;
   flex-direction: column;
   gap: 14px;
-  max-height: 480px;
+  max-height: 460px;
   overflow-y: auto;
   padding-right: 4px;
 }
 
 .bc-chat-wrap::-webkit-scrollbar{
-  width: 7px;
+  width: 8px;
 }
 .bc-chat-wrap::-webkit-scrollbar-thumb{
-  background: rgba(255,255,255,0.25);
+  background: rgba(255,255,255,0.28);
   border-radius: 999px;
 }
 
@@ -579,17 +571,18 @@ footer{display:none !important;}
   line-height: 1.5;
   font-size: 15px;
   box-shadow: 0 10px 18px rgba(0,0,0,0.10);
-  color: var(--text-dark);
   word-wrap: break-word;
 }
 
 .bc-user-bubble{
   background: var(--user-bubble);
+  color: var(--text-dark);
   border-bottom-left-radius: 8px;
 }
 
 .bc-bot-bubble{
   background: var(--bot-bubble);
+  color: var(--text-dark);
   border-bottom-right-radius: 8px;
 }
 
@@ -597,10 +590,10 @@ footer{display:none !important;}
   display:flex;
   justify-content:center;
   align-items:center;
-  min-height: 420px;
+  min-height: 400px;
 }
 .bc-empty-text{
-  color: #fdfdfd;
+  color: white;
   text-align:center;
   opacity: 0.96;
   font-size: 16px;
@@ -621,7 +614,7 @@ footer{display:none !important;}
   width: 38px;
   height: 38px;
   border-radius: 999px;
-  background: rgba(255,255,255,0.30);
+  background: rgba(255,255,255,0.34);
   display:flex;
   align-items:center;
   justify-content:center;
@@ -632,7 +625,7 @@ footer{display:none !important;}
 }
 
 #bc_msg textarea{
-  background: rgba(255,255,255,0.38) !important;
+  background: rgba(255,255,255,0.42) !important;
   border: none !important;
   box-shadow: none !important;
   border-radius: 999px !important;
@@ -641,7 +634,7 @@ footer{display:none !important;}
   min-height: 42px !important;
 }
 #bc_msg textarea::placeholder{
-  color: rgba(27,22,48,0.80) !important;
+  color: rgba(34,23,53,0.72) !important;
 }
 
 #bc_send button{
@@ -649,14 +642,14 @@ footer{display:none !important;}
   height: 42px !important;
   border-radius: 999px !important;
   border: none !important;
-  background: rgba(255,255,255,0.32) !important;
+  background: rgba(255,255,255,0.34) !important;
   color: var(--text-dark) !important;
   font-size: 20px !important;
   font-weight: 900 !important;
   box-shadow: none !important;
 }
 #bc_send button:hover{
-  background: rgba(255,255,255,0.50) !important;
+  background: rgba(255,255,255,0.52) !important;
 }
 
 #bc_clear button{
@@ -664,7 +657,7 @@ footer{display:none !important;}
 }
 
 @media (max-width: 768px){
-  #bc-app{
+  #bc_app{
     max-width: 96vw;
   }
   .bc-bubble{
@@ -681,8 +674,8 @@ with gr.Blocks() as demo:
     history_state = gr.State([])
     quiz_state = gr.State({"active": False, "quiz_data": None, "language_mode": "Auto"})
 
-    with gr.Column(elem_id="bc-app"):
-        with gr.Group(elem_classes="bc-top-panel"):
+    with gr.Column(elem_id="bc_app"):
+        with gr.Group(elem_classes="bc-settings"):
             with gr.Row():
                 mode = gr.Dropdown(
                     choices=["Explain", "Detailed", "Short Notes", "Flashcards", "Case-Based", "Quiz Me"],
@@ -703,6 +696,16 @@ with gr.Blocks() as demo:
                 )
                 show_sources = gr.Checkbox(value=True, label="Show Sources")
 
+            gr.HTML("""
+            <div class="bc-howto">
+              <strong>How to use</strong><br>
+              1. Choose a tutor mode such as Explain, Detailed, Flashcards, or Quiz Me.<br>
+              2. Type your topic or question in the message box below.<br>
+              3. For Quiz Me, the next message you send will be evaluated automatically.<br>
+              4. Turn on Show Sources if you want references from the books.
+            </div>
+            """)
+
         with gr.Group(elem_classes="bc-phone"):
             gr.HTML(f'<div class="bc-logo-holder">{render_logo()}</div>')