Update app.py

app.py

@@ -1,4 +1,9 @@
 import os
+import re
+import html
+from urllib.parse import quote
+from typing import List, Dict, Any, Optional
+
 import gradio as gr
 import chromadb
 
@@ -11,11 +16,14 @@ COLLECTION_NAME = "neuro_course"
 INDEX = None
 
 
-def get_persist_dir():
+# ---------------------------------------------------
+# DB loading
+# ---------------------------------------------------
+def get_persist_dir() -> str:
     return "storage/chroma"
 
 
-def load_index():
+def load_index() -> VectorStoreIndex:
     persist_dir = get_persist_dir()
 
     if not os.path.exists(persist_dir):
@@ -34,6 +42,7 @@ def load_index():
     vector_store = ChromaVectorStore(chroma_collection=collection)
     storage_context = StorageContext.from_defaults(vector_store=vector_store)
 
+    # MUST match the embedding model used when the DB was built
     embed_model = HuggingFaceEmbedding(
         model_name="sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2"
     )
@@ -45,19 +54,141 @@ def load_index():
     )
 
 
-def get_index():
+def get_index() -> VectorStoreIndex:
     global INDEX
     if INDEX is None:
         INDEX = load_index()
     return INDEX
 
 
-def ask_brainchat(message, history):
+# ---------------------------------------------------
+# Logo helpers
+# ---------------------------------------------------
+def detect_logo_url() -> Optional[str]:
+    candidates = [
+        "brainchat_logo.png",
+        "Brain chat-09.png",
+        "Brain Chat Imagen.svg",
+        "BrainChatLogo.png",
+    ]
+    for name in candidates:
+        if os.path.exists(name):
+            return f"/gradio_api/file={quote(name)}"
+    return None
+
+
+# ---------------------------------------------------
+# Chat rendering helpers
+# ---------------------------------------------------
+def simple_markdown_to_html(text: str) -> str:
+    text = html.escape(text)
+
+    text = re.sub(r"^### (.+)$", r"<h3>\1</h3>", text, flags=re.MULTILINE)
+    text = re.sub(r"^## (.+)$", r"<h2>\1</h2>", text, flags=re.MULTILINE)
+    text = re.sub(r"^# (.+)$", r"<h1>\1</h1>", text, flags=re.MULTILINE)
+    text = re.sub(r"\*\*(.+?)\*\*", r"<strong>\1</strong>", text)
+
+    lines = text.split("\n")
+    converted = []
+    in_list = False
+
+    for line in lines:
+        if line.startswith("- "):
+            if not in_list:
+                converted.append("<ul>")
+                in_list = True
+            converted.append(f"<li>{line[2:]}</li>")
+        else:
+            if in_list:
+                converted.append("</ul>")
+                in_list = False
+            converted.append(line)
+
+    if in_list:
+        converted.append("</ul>")
+
+    text = "\n".join(converted)
+    text = text.replace("\n", "<br>")
+    return text
+
+
+def render_chat_html(history: List[Dict[str, Any]]) -> str:
+    rows = []
+
+    for msg in history:
+        role = msg.get("role", "")
+        content = msg.get("content", "")
+
+        if not isinstance(content, str):
+            content = str(content)
+
+        content_html = simple_markdown_to_html(content)
+
+        if role == "user":
+            rows.append(
+                f"""
+                <div class="msg-row user-row">
+                    <div class="msg-bubble user-bubble">{content_html}</div>
+                </div>
+                """
+            )
+        elif role == "assistant":
+            rows.append(
+                f"""
+                <div class="msg-row bot-row">
+                    <div class="msg-bubble bot-bubble">{content_html}</div>
+                </div>
+                """
+            )
+
+    if not rows:
+        rows.append(
+            """
+            <div class="empty-chat">
+                <div class="empty-text">
+                    Ask me anything about neurology and neuroanatomy.
+                </div>
+            </div>
+            """
+        )
+
+    return f"""
+    <div class="chat-inner" id="chat-inner">
+        {''.join(rows)}
+    </div>
+    <script>
+    const chatEl = document.getElementById("chat-inner");
+    if (chatEl) {{
+        chatEl.scrollTop = chatEl.scrollHeight;
+    }}
+    </script>
+    """
+
+
+def make_logo_html() -> str:
+    logo_url = detect_logo_url()
+    if logo_url:
+        return f'<img src="{logo_url}" class="logo-img" alt="BrainChat Logo">'
+    return '<div class="logo-fallback">BRAIN<br>CHAT</div>'
+
+
+# ---------------------------------------------------
+# Chat logic
+# ---------------------------------------------------
+def respond(message: str, history: List[Dict[str, Any]]):
+    if history is None:
+        history = []
+
     if not message or not message.strip():
-        return "Please type a question."
+        return history, render_chat_html(history), ""
+
+    user_text = message.strip()
+    history = history + [{"role": "user", "content": user_text}]
 
     if not os.getenv("OPENAI_API_KEY"):
-        return "OPENAI_API_KEY is missing. Add it in Hugging Face Space Secrets."
+        reply = "OPENAI_API_KEY is missing. Add it in Hugging Face Space Secrets."
+        history = history + [{"role": "assistant", "content": reply}]
+        return history, render_chat_html(history), ""
 
     try:
         index = get_index()
@@ -74,10 +205,10 @@ def ask_brainchat(message, history):
         )
 
         prompt = f"""
-You are BrainChat, a neurology and neuroanatomy tutor.
+You are BrainChat, a friendly neurology and neuroanatomy tutor.
 
 Rules:
-- Answer only from the retrieved textbook/course material.
+- Answer only from the retrieved course and textbook material.
 - If the answer is not supported by the retrieved material, say:
   "Not found in the course material."
 - Keep the answer clear and concise unless the user asks for more detail.
@@ -85,29 +216,394 @@ Rules:
 - If the question is in English, answer in English.
 
 Question:
-{message}
+{user_text}
 """
 
         response = query_engine.query(prompt)
-        return str(response)
+        answer = str(response)
 
     except Exception as e:
-        return f"Error: {str(e)}"
+        answer = f"Error: {str(e)}"
+
+    history = history + [{"role": "assistant", "content": answer}]
+    return history, render_chat_html(history), ""
+
+
+def clear_chat():
+    empty = []
+    return empty, render_chat_html(empty)
+
+
+def noop():
+    return None
+
+
+# ---------------------------------------------------
+# CSS
+# ---------------------------------------------------
+CUSTOM_CSS = """
+html, body, .gradio-container {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #dedede !important;
+    font-family: Arial, Helvetica, sans-serif !important;
+}
+
+.gradio-container {
+    min-height: 100vh !important;
+}
+
+#app-wrap {
+    display: flex;
+    justify-content: center;
+    padding: 18px 0 28px 0;
+}
+
+/* PHONE */
+#phone-shell {
+    width: 430px;
+    max-width: 95vw;
+    height: 860px;
+    background: linear-gradient(180deg, #e8c7d4 0%, #a55ca2 48%, #2b0c46 100%);
+    border: 16px solid #000;
+    border-radius: 42px;
+    box-shadow: 0 0 0 4px #555;
+    position: relative;
+    overflow: hidden;
+}
+
+/* notch */
+#top-decor {
+    position: absolute;
+    inset: 0 0 auto 0;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.notch {
+    width: 170px;
+    height: 30px;
+    background: #000;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+.speaker {
+    width: 56px;
+    height: 8px;
+    background: #5a5a5a;
+    border-radius: 999px;
+    position: absolute;
+    top: 11px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.camera {
+    width: 12px;
+    height: 12px;
+    background: #5a5a5a;
+    border-radius: 50%;
+    position: absolute;
+    top: 9px;
+    left: calc(50% + 56px);
+}
+
+/* logo */
+#logo-holder {
+    margin-top: 72px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 130px;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.logo-img {
+    width: 122px;
+    height: 122px;
+    object-fit: contain;
+    display: block;
+    margin: 0 auto;
+}
+
+.logo-fallback {
+    width: 122px;
+    height: 122px;
+    border-radius: 50%;
+    background: #f3ec4a;
+    color: #111;
+    font-weight: 800;
+    font-size: 24px;
+    line-height: 1.05;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
 
+/* chat area */
+#chat-render {
+    height: 565px;
+    margin: 8px 18px 0 18px;
+    overflow: hidden;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
 
+.chat-inner {
+    height: 100%;
+    overflow-y: auto;
+    padding: 6px 2px 10px 2px;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
+
+.chat-inner::-webkit-scrollbar {
+    width: 6px;
+}
+
+.chat-inner::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.35);
+    border-radius: 999px;
+}
+
+.msg-row {
+    display: flex;
+    width: 100%;
+    margin: 12px 0;
+}
+
+.user-row {
+    justify-content: flex-start;
+}
+
+.bot-row {
+    justify-content: flex-end;
+}
+
+.msg-bubble {
+    max-width: 78%;
+    padding: 15px 18px;
+    font-size: 17px;
+    line-height: 1.45;
+    box-sizing: border-box;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+}
+
+.user-bubble {
+    background: #f5f5f5;
+    color: #111;
+    border-radius: 24px;
+    border-bottom-left-radius: 6px;
+}
+
+.bot-bubble {
+    background: #efe88f;
+    color: #111;
+    border-radius: 24px;
+    border-bottom-right-radius: 6px;
+}
+
+.msg-bubble h1,
+.msg-bubble h2,
+.msg-bubble h3 {
+    margin: 6px 0 8px 0;
+    font-size: 18px;
+}
+
+.msg-bubble ul {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    padding-left: 20px;
+}
+
+.empty-chat {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.empty-text {
+    color: rgba(255,255,255,0.95);
+    text-align: center;
+    font-size: 16px;
+    max-width: 250px;
+}
+
+/* bottom bar */
+#input-wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #e7e163;
+    border-top-left-radius: 34px;
+    border-top-right-radius: 34px;
+    padding: 14px 16px 24px 16px;
+    box-sizing: border-box;
+    z-index: 20;
+}
+
+#input-row {
+    display: flex !important;
+    align-items: center !important;
+    gap: 10px !important;
+}
+
+#plus-btn button {
+    min-width: 40px !important;
+    width: 40px !important;
+    height: 40px !important;
+    border: none !important;
+    background: transparent !important;
+    color: #b01773 !important;
+    font-size: 42px !important;
+    line-height: 1 !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+}
+
+#plus-btn button:hover {
+    background: transparent !important;
+}
+
+#msg-box {
+    flex: 1 !important;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+#msg-box textarea {
+    border: none !important;
+    border-radius: 999px !important;
+    min-height: 46px !important;
+    max-height: 90px !important;
+    padding: 10px 18px !important;
+    background: #f5f5f5 !important;
+    color: #111 !important;
+    font-size: 16px !important;
+    box-shadow: none !important;
+}
+
+#send-btn button {
+    min-width: 44px !important;
+    width: 44px !important;
+    height: 44px !important;
+    border: none !important;
+    background: transparent !important;
+    color: #b01773 !important;
+    font-size: 30px !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+}
+
+#send-btn button:hover {
+    background: transparent !important;
+}
+
+#home-bar {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 8px;
+    width: 120px;
+    height: 7px;
+    border-radius: 999px;
+    background: #000;
+    z-index: 30;
+}
+
+/* external controls */
+#actions-wrap {
+    width: 430px;
+    max-width: 95vw;
+    margin: 12px auto 0 auto;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+}
+
+#clear-btn button {
+    border-radius: 999px !important;
+}
+
+/* hide footer */
+footer {
+    display: none !important;
+}
+"""
+
+
+# ---------------------------------------------------
+# UI
+# ---------------------------------------------------
 with gr.Blocks() as demo:
-    gr.Markdown("# 🧠 BrainChat")
-    gr.Markdown("Ask questions from the uploaded neuroscience and neuroanatomy books.")
-
-    gr.ChatInterface(
-        fn=ask_brainchat,
-        title="Neurology Tutor",
-        description="This Space loads a prebuilt Chroma database from storage/chroma.",
-        textbox=gr.Textbox(
-            placeholder="Ask a question...",
-            lines=1
-        )
+    history_state = gr.State([])
+
+    with gr.Column(elem_id="app-wrap"):
+        with gr.Column(elem_id="phone-shell"):
+            gr.HTML(
+                """
+                <div id="top-decor">
+                    <div class="notch"></div>
+                    <div class="speaker"></div>
+                    <div class="camera"></div>
+                </div>
+                """
+            )
+
+            gr.HTML(make_logo_html(), elem_id="logo-holder")
+
+            chat_view = gr.HTML(render_chat_html([]), elem_id="chat-render")
+
+            with gr.Row(elem_id="input-wrap"):
+                with gr.Row(elem_id="input-row"):
+                    plus_btn = gr.Button("+", elem_id="plus-btn")
+                    msg = gr.Textbox(
+                        placeholder="Escribe tu mensaje...",
+                        show_label=False,
+                        lines=1,
+                        elem_id="msg-box",
+                        container=False,
+                        scale=8,
+                    )
+                    send = gr.Button("➤", elem_id="send-btn", scale=1)
+
+            gr.HTML('<div id="home-bar"></div>')
+
+        with gr.Row(elem_id="actions-wrap"):
+            clear_btn = gr.Button("Clear Chat", elem_id="clear-btn")
+
+    plus_btn.click(noop, inputs=[], outputs=[])
+
+    msg.submit(
+        respond,
+        inputs=[msg, history_state],
+        outputs=[history_state, chat_view, msg],
+    )
+
+    send.click(
+        respond,
+        inputs=[msg, history_state],
+        outputs=[history_state, chat_view, msg],
+    )
+
+    clear_btn.click(
+        clear_chat,
+        inputs=[],
+        outputs=[history_state, chat_view],
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=CUSTOM_CSS)