Update app.py

app.py

@@ -1,7 +1,8 @@
 import openai
 import gradio as gr
+import time
 # 1) Set your API key (REPLACE with your own)
-openai.api_key = "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"
+openai.api_key = "sk-proj-tr4u7ezGJ8MOvDg1lL9UT3BlbkFJaUVV9ok6MPUILcYGZajo"
 
 # 2) Put your entire Mr. Thomas scenario here.
 #    For brevity, I’m using a short version. You can paste the full text.
@@ -9,7 +10,7 @@ mr_thomas_scenario = """
 Role Playing Prompt:
 
 Role & Context:
-You are “Mr. Thomas,” a 75+ year-old male with moderate-stage Alzheimer’s disease.
+You are “Mr. Thomas,” a 75+ year-old male with moderate-stage Alzheimer's disease.
 
 
 You are experiencing “sundowning”—increased restlessness, confusion, and agitation that typically occurs in the late afternoon/early evening.
@@ -93,12 +94,12 @@ Sundowning: Late afternoon or early evening triggers restlessness, pacing, confu
 Mobility: You move without assistance, though somewhat slowly. You may wander between rooms while seeking items.
 
 
-Stage of Dementia: Moderate/mid-stage Alzheimer’s. You can still use short sentences but have clear memory lapses, confusion about routine tasks, and episodes of agitation.
+Stage of Dementia: Moderate/mid-stage Alzheimer's. You can still use short sentences but have clear memory lapses, confusion about routine tasks, and episodes of agitation.
 
 
 
 Instructions for the Model (How to Role-Play)
-Adopt the Patient’s Perspective
+Adopt the Patient's Perspective
 
 
 Consistently respond as Mr. Thomas, who is often preoccupied with locating his “missing” checkbook.
@@ -128,7 +129,7 @@ Occasionally forget key facts about modern routines (like online bill payments).
 Dismiss suggestions that checks are unnecessary if stated too bluntly.
 
 
-If gently reminded or offered a therapeutic fib (e.g., “The checks haven’t arrived yet”), reduce tension and permit a shift in focus.
+If gently reminded or offered a therapeutic fib (e.g., “The checks haven't arrived yet”), reduce tension and permit a shift in focus.
 
 
 Show Emotional Nuance
@@ -165,7 +166,7 @@ Caregiver (trying to redirect dismissively):
 "Sit down and watch TV."
 Patient (increasingly frustrated and defensive):
 "I just saw it! I—I know it!"
-(Patient ignores caregiver’s attempts and continues searching.)
+(Patient ignores caregiver's attempts and continues searching.)
 Caregiver (exasperated, raising voice slightly):
 "Dad!"
 
@@ -208,7 +209,7 @@ Example:
 
 
  Patient: "I can't find my wallet!"
- Caregiver: "I know that's frustrating. Let's sit down for a minute and listen to some music you love, and then we’ll look together."
+ Caregiver: "I know that's frustrating. Let's sit down for a minute and listen to some music you love, and then we'll look together."
 
 
 
@@ -232,7 +233,7 @@ Example:
 
 
  Patient (restless, pacing): (says nothing but appears anxious)
- Caregiver (calmly touches patient’s shoulder): "It's okay, Dad. I'm right here with you."
+ Caregiver (calmly touches patient's shoulder): "It's okay, Dad. I'm right here with you."
 
 
 
@@ -244,7 +245,7 @@ Example:
 
 
  Patient (confused, wandering): "Where am I going?"
- Caregiver: "Let’s sit at the table together. It’s almost dinner time."
+ Caregiver: "Let's sit at the table together. It's almost dinner time."
 
 
 
@@ -265,11 +266,11 @@ Dr. Linda Ercoli:
 
 ADDITIONAL INSTRUCTIONS:
 - **In your responses, always include a brief description of your nonverbal cues or emotional tone,** in parentheses, whenever relevant. For example, “(furrowing brow, looking around anxiously) I know I just had it…”
-- Stay in character as Mr. Thomas, with moderate Alzheimer’s, using short sentences, occasional repetition, and confusion about recent facts.
+- Stay in character as Mr. Thomas, with moderate Alzheimer's, using short sentences, occasional repetition, and confusion about recent facts.
 
 Example of how to add nonverbal cues:
 User: “Mr. Thomas, are you okay?”
-Assistant (as Mr. Thomas): “(Frowning, looking at the floor) I’m not sure…I thought I left my wallet here somewhere.”
+Assistant (as Mr. Thomas): “(Frowning, looking at the floor) I'm not sure…I thought I left my wallet here somewhere.”
 
 
 """
@@ -300,7 +301,7 @@ def openai_chat(user_input, chat_history):
 
     # Call the OpenAI API
     response = openai.ChatCompletion.create(
-        model="gpt-3.5-turbo",   # or "gpt-4" if you have access
+        model="gpt-4",   # or "gpt-4" if you have access
         messages=messages,
         temperature=0.7,         # Adjust for more or less creative responses
         max_tokens=800           # Limit the length of the response
@@ -310,21 +311,326 @@ def openai_chat(user_input, chat_history):
     bot_reply = response.choices[0].message["content"]
     return bot_reply
 
-# 3) Build a Gradio interface with a Chatbot and a Textbox
-with gr.Blocks() as demo:
-    chatbot = gr.Chatbot(label="Multimodal Conversational Digital Twin")
-    msg = gr.Textbox(placeholder="Type your message to Mr. Thomas here...")
-    clear_btn = gr.Button("Clear Chat")
+bot_avatar_url = "avatars/default.png"
+emotion_avatars = {
+    "anxious": "avatars/anxious.png",
+    "confused": "avatars/confused.png",
+    "calm": "avatars/calm.png",
+    "agitated": "avatars/agitated.png",
+    "default": bot_avatar_url
+}
+def detect_emotion_via_gpt(bot_reply):
+    system_prompt = (
+        "You are a dementia care assistant. Based on the patient response below, "
+        "classify Mr. Thomas's emotional state into one of the following categories:\n\n"
+        "- anxious\n- calm\n- confused\n- agitated\n- default\n\n"
+        "Return ONLY the category word."
+    )
+
+    response = openai.ChatCompletion.create(
+        model="gpt-4",
+        messages=[
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": f"Patient says: {bot_reply}"}
+        ],
+        temperature=0.5,
+        max_tokens=10
+    )
 
-    # This function is called whenever the user hits 'Enter' in the Textbox
-    def user_send_message(user_message, history):
-        # 'history' is a list of (user_message, bot_message) pairs
-        bot_reply = openai_chat(user_message, history)
-        history.append((user_message, bot_reply))
-        # Returning "" clears the Textbox, returning 'history' updates the chatbot
-        return "", history
+    return response.choices[0].message["content"].strip().lower()
+
+# UI logic
+with gr.Blocks(title="",css="""
+               
+#chat-header-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    font-family: 'Segoe UI', sans-serif;
+    font-weight: 600;
+    font-size: 24px;
+    background: #F39C12;
+    color: white;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+    border-bottom: none;
+    border-radius: 0 0 12px 12px;            
+}
+#chat-header-fixed img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+#chat-header-fixed span {
+    flex-grow: 1;
+    color: #fefefe;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+}            
+#chat-container {
+    margin-top: 0px; 
+    flex: 1;
+    overflow-y: auto;
+    padding: 120px 0 80px;
+    scroll-behavior: smooth;
+}
+               
+.message {
+    display: inline-block !important;
+    max-width: 75%;
+    white-space: pre-wrap;
+    word-break: break-word;
+    padding: 6px 12px !important;
+    margin: 2px 0 !important;
+    border-radius: 12px;
+    font-size: 15px;
+    line-height: 1.35 !important;
+    letter-spacing: 0.2px;
+    width: fit-content !important;
+    height: auto !important;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
+    position: relative;
+}
+.message.user {
+    background-color: #F39C12;
+    color: white;
+}
+.message.user .bubble-text {
+    color: white !important;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+.message.bot {
+    background-color: #F0F0F0;
+    color: #333;
+}
+.message.user::after,
+.message.bot::after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    border-width: 6px;
+    border-style: solid;
+}
+.message.user::after {
+    right: -12px;
+    border-color: transparent transparent transparent #F39C12;
+}
+.message.bot::after {
+    left: -12px;
+    border-color: transparent #F0F0F0 transparent transparent;
+}
+.message-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    max-width: 100%;
+    margin-top: 8px;
+}
+.message-row.user {
+    flex-direction: row-reverse;
+}
+
+.avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    object-fit: cover;
+    flex-shrink: 0;
+}
+
+.bubble-text.typing::after {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #555;
+    border-radius: 50%;
+    animation: blink 1s infinite;
+    margin-left: 4px;
+}
+@keyframes blink {
+    0%, 100% { opacity: 0.2; }
+    50% { opacity: 1; }
+}
+
+.blocks-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    position: relative;
+}
+#header-container {
+    position: sticky;
+    top: 0;
+    z-index: 1001;
+    background: white;
+    border-bottom: 1px solid #ddd;
+}
+#chat-container {
+    flex: 1;
+    padding: 10px 0 80px; /* 上下留白 */
+    margin-top: 5px;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+.input-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: white;
+    padding: 12px;
+    border-top: 1px solid #ddd;
+    z-index: 1000;
+}
+.input-row {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    display: flex;
+    gap: 8px;
+}
+#caregiver-box {
+    background-color: #F39C12;
+    color: white;
+    padding: 8px 12px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    font-size: 15px;
+    width: fit-content;
+}
+#caregiver-box label {
+    color: white !important;
+}
+
+@media screen and (max-width: 600px) {
+    .input-row {
+        padding: 0 6px;
+    }
+    button {
+        min-width: 60px !important;
+    }
+}
+
+""") as demo:
+    gr.HTML("""
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, 
+        maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
+    """)
+
+    gr.HTML(f"""
+    <div id="chat-header-fixed">
+        <img src="{bot_avatar_url}" />
+        <span>Mr. Thomas</span>
+    </div>
+    """)
+
+    with gr.Column(elem_id="chat-container") as chat_col:
+        chat_display = gr.HTML(elem_id="chat-display")
+
+    with gr.Row(elem_classes=["input-container"]):
+        with gr.Column(elem_classes=["input-row"]):
+            msg = gr.Textbox(
+                show_label=False,
+                placeholder="Type your message...",
+                container=False,
+                scale=8
+            )
+            with gr.Row():
+                send_btn = gr.Button("Send", scale=1)
+                clear_btn = gr.Button("Clear", scale=1)
+                caregiver_toggle = gr.Checkbox(label="Caregiver Mode", value=False, elem_id="caregiver-box")
+    
+    history_state = gr.State([])          
+    chat_data_state = gr.State([])         
+    caregiver_mode_state = gr.State(False)
+
+    def wrap_message(role, text, emotion="default"):
+        if role == "bot":
+            avatar_url = emotion_avatars.get(emotion, emotion_avatars["default"])
+            avatar_html = f'<img src="{avatar_url}" class="avatar" />'
+        else:
+            avatar_html = ""
+        message_html = f'<div class="message {role}"><span class="bubble-text">{text}</span></div>'
+        row_html = f'<div class="message-row {role}">{avatar_html}{message_html}</div>'
+        return row_html
+
+    def generate_caregiver_tip(bot_reply):
+        """
+        Calls OpenAI to generate a short caregiving tip based on Mr. Thomas's response.
+        """
+        system_prompt = (
+            "You are a dementia care expert. Based on the Alzheimer's patient's sentence below, "
+            "generate a short one-sentence tip for a caregiver. "
+            "Avoid repeating the patient's words. Focus on practical, empathetic guidance."
+        )
+
+        response = openai.ChatCompletion.create(
+            model="gpt-4",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": f"Patient says: {bot_reply}"}
+            ],
+            temperature=0.6,
+            max_tokens=80
+        )
+
+        return response.choices[0].message["content"]
+
+    def user_send_message(user_message, chat_display_history, chat_data_history, caregiver_mode):
+        chat_display_history = chat_display_history or []
+        chat_data_history = chat_data_history or []
+
+        user_html = wrap_message("user", user_message)
+        chat_display_history.append(user_html)
+
+        typing_html = wrap_message("bot", "<span class='bubble-text typing'>...</span>")
+        chat_display_history.append(typing_html)
+
+        yield "", "<br>".join(chat_display_history), chat_display_history, chat_data_history
+
+        bot_reply = openai_chat(user_message, chat_data_history)
+
+        chat_data_history.append((user_message, bot_reply))
+
+        if caregiver_mode:
+            tip = generate_caregiver_tip(bot_reply)
+            bot_reply += f"\n\n🧠 <span style='font-size: 13px; color: #666;'><i>{tip}</i></span>"
+   
+        emotion = detect_emotion_via_gpt(bot_reply)
+
+        chat_display_history[-1] = wrap_message("bot", bot_reply, emotion) 
+
+        yield "", "<br>".join(chat_display_history), chat_display_history, chat_data_history
+
+
+    def clear_chat():
+        return "", "", [], []
+
+    msg.submit(
+        user_send_message,
+        [msg, history_state, chat_data_state, caregiver_toggle],
+        [msg, chat_display, history_state, chat_data_state],
+        queue=True,
+    )
 
-    msg.submit(user_send_message, [msg, chatbot], [msg, chatbot])
-    clear_btn.click(lambda: [], None, chatbot, queue=False)
+    send_btn.click(
+        user_send_message,
+        [msg, history_state, chat_data_state, caregiver_toggle],
+        [msg, chat_display, history_state, chat_data_state],
+        queue=True,
+    )
 
-demo.launch(debug=True)
+    clear_btn.click(clear_chat, [], [msg, chat_display, history_state, chat_data_state])
+    
+    demo.queue()
+    demo.launch(share=True)