src/ui.py

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 (
        "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

    agent = SmallPersonalAgent(base_dir)

    def chat(message: str, history: list[dict], turn_count: int):
        answer, _trace, _external = agent.handle_message(message, auto_accept=True)
        turn_count = (turn_count or 0) + 1
        history = history or []
        history.append(gr.ChatMessage(role="user", content=message))
        history.append(gr.ChatMessage(role="assistant", content=answer))
        yield history, "", turn_count
        if turn_count == 1:
            time.sleep(2.5)
            history.append(
                gr.ChatMessage(
                    role="assistant",
                    content=hubertus_video_message_html(),
                )
            )
            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(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...")
            send = gr.Button("Send", variant="primary", scale=1)
        send.click(chat, [msg, chatbot, turn_count], [chatbot, msg, turn_count])
        msg.submit(chat, [msg, chatbot, turn_count], [chatbot, msg, turn_count])
    return demo