Upload ui.py

src/ui.py

@@ -1,21 +1,38 @@
 from __future__ import annotations
 
+import html
+import time
 from pathlib import Path
 
 from src.agents.small_agent import SmallPersonalAgent
 
 DEMO_VIDEO_URL = "https://youtu.be/_XBxRnCvHXc"
+INITIAL_MESSAGE = "I am MM1. Who are you?"
 
 
 def hubertus_video_message() -> str:
     return (
-        "Here is a message from Hubertus, the inventor:\n\n"
         "Hi, seems you are a little like me. "
         f"meet me here: {DEMO_VIDEO_URL}\n\n"
         "Lg Hubertus"
     )
 
 
+def hubertus_video_message_html() -> str:
+    text = html.escape(hubertus_video_message()).replace("\n", "<br>")
+    text = text.replace(
+        html.escape(DEMO_VIDEO_URL),
+        f'<a href="{DEMO_VIDEO_URL}" target="_blank" rel="noopener noreferrer">{DEMO_VIDEO_URL}</a>',
+    )
+    return f'<div class="hubertus-glitch">{text}</div>'
+
+
+def initial_history():
+    import gradio as gr
+
+    return [gr.ChatMessage(role="assistant", content=INITIAL_MESSAGE)]
+
+
 def create_app(base_dir: str | Path = "data"):
     import gradio as gr
 
@@ -27,18 +44,39 @@ def create_app(base_dir: str | Path = "data"):
         history = history or []
         history.append(gr.ChatMessage(role="user", content=message))
         history.append(gr.ChatMessage(role="assistant", content=answer))
-        if turn_count == 2:
+        yield history, "", turn_count
+        if turn_count == 1:
+            time.sleep(2.5)
             history.append(
                 gr.ChatMessage(
                     role="assistant",
-                    content=hubertus_video_message(),
+                    content=hubertus_video_message_html(),
                 )
             )
-        return history, "", turn_count
+            yield history, "", turn_count
+
+    css = """
+    .hubertus-glitch {
+      border: 1px solid #00f5ff;
+      border-radius: 8px;
+      padding: 14px 16px;
+      color: #f2ffff;
+      background: linear-gradient(135deg, rgba(0,245,255,.18), rgba(255,0,170,.14));
+      box-shadow: 0 0 18px rgba(0,245,255,.22), inset 0 0 24px rgba(255,0,170,.08);
+      text-shadow: 1px 0 #ff2bd6, -1px 0 #00f5ff;
+      animation: mm1-glitch-pulse 1.2s infinite alternate;
+    }
+    .hubertus-glitch a { color: #8ffcff; font-weight: 700; }
+    @keyframes mm1-glitch-pulse {
+      from { filter: hue-rotate(0deg); transform: translateX(0); }
+      to { filter: hue-rotate(12deg); transform: translateX(.5px); }
+    }
+    """
 
     with gr.Blocks(title="MM1") as demo:
+        gr.HTML(f"<style>{css}</style>")
         gr.Markdown("# MM1")
-        chatbot = gr.Chatbot(height=560, show_label=False, placeholder="Say anything. I will keep up.")
+        chatbot = gr.Chatbot(value=initial_history(), height=560, show_label=False, sanitize_html=False)
         turn_count = gr.State(0)
         with gr.Row():
             msg = gr.Textbox(label="Message", scale=5, placeholder="Talk to MM1...")