Upload 2 files

README.md

@@ -23,7 +23,7 @@ pinned: false
 - 아쿠아의 세이크리드 브레이크 스펠이 무엇인지 설명해 주세요.
 - 홍마족다운 자기소개를 한 번 들려주시겠습니까?
 
-첫 접속 시 메구밍이 먼저 인삿말을 건넵니다.
+첫 접속 시 메구밍이 먼저 인삿말을 건네고, 답변은 ADK SSE 스트리밍으로 점진적으로 표시됩니다.
 
 ## 이 Space의 특징
 
@@ -42,12 +42,24 @@ pinned: false
 python app_gradio.py
 ```
 
+메신저형 UI:
+
+```bash
+python app_gradio_messenger.py
+```
+
 Hugging Face Spaces 진입점:
 
 ```bash
 python app.py
 ```
 
+UI 선택:
+
+```bash
+MEGUMIN_UI=messenger
+```
+
 ## Hugging Face 구성
 
 앱 repo:

app_gradio_messenger.py

@@ -0,0 +1,592 @@
+from __future__ import annotations
+
+import html
+import os
+from threading import Lock
+
+import gradio as gr
+
+from megumin_agent.chat import ChatServices
+from megumin_agent.chat import create_chat_services
+from megumin_agent.chat import stream_chat
+
+
+INITIAL_GREETING = "내 이름은 메구밍! 홍마족 제일의 마법사이자, 폭렬 마법을 펼치는 자!"
+INITIAL_HISTORY = [{"role": "assistant", "content": INITIAL_GREETING}]
+
+SERVICES: ChatServices | None = None
+SERVICES_LOCK = Lock()
+MEGUMIN_IMAGE_URL = os.getenv(
+    "MEGUMIN_IMAGE_URL",
+    "https://huggingface.co/datasets/Junhoee/megumin-chat/resolve/main/%EB%A9%94%EA%B5%AC%EB%B0%8D%EC%82%AC%EC%A7%84.png",
+)
+
+MEGUMIN_SVG = """
+<svg viewBox="0 0 420 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Megumin inspired illustration">
+  <defs>
+    <linearGradient id="cape" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#7b0f1b"/>
+      <stop offset="100%" stop-color="#2c0610"/>
+    </linearGradient>
+    <linearGradient id="hat" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#41221f"/>
+      <stop offset="100%" stop-color="#120b12"/>
+    </linearGradient>
+    <linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#ffd86a"/>
+      <stop offset="100%" stop-color="#e59a22"/>
+    </linearGradient>
+  </defs>
+  <ellipse cx="212" cy="520" rx="120" ry="22" fill="rgba(20,6,10,0.28)"/>
+  <circle cx="300" cy="104" r="24" fill="rgba(255,114,61,0.28)"/>
+  <circle cx="334" cy="138" r="12" fill="rgba(255,201,115,0.32)"/>
+  <path d="M132 180 C116 258 106 344 114 454 L306 454 C314 344 304 258 288 180 Z" fill="url(#cape)"/>
+  <path d="M174 114 C136 136 120 164 124 206 C132 292 288 292 296 206 C300 164 284 136 246 114 Z" fill="#f6d4bf"/>
+  <path d="M152 114 C164 74 256 72 274 116 C262 102 240 94 210 94 C182 94 162 100 152 114 Z" fill="#5a2f1f"/>
+  <path d="M150 110 C120 124 92 170 104 198 C110 212 128 214 146 208 L140 168 C154 156 192 150 228 150 C266 150 298 158 312 170 L308 206 C326 212 344 210 350 198 C362 170 334 124 304 110 C284 88 250 76 210 76 C172 76 140 88 150 110 Z" fill="url(#hat)"/>
+  <path d="M120 138 L84 154 L108 178 L142 166 Z" fill="#d33b2d"/>
+  <path d="M310 142 L344 158 L320 180 L286 168 Z" fill="#d33b2d"/>
+  <path d="M170 274 C194 288 226 290 250 274" stroke="#6a2d1b" stroke-width="8" stroke-linecap="round" fill="none"/>
+  <circle cx="180" cy="210" r="11" fill="#4a1d14"/>
+  <circle cx="242" cy="210" r="11" fill="#4a1d14"/>
+  <path d="M132 108 L170 70 L206 116 Z" fill="url(#gold)"/>
+  <circle cx="164" cy="92" r="16" fill="#c71f2d"/>
+  <path d="M246 78 L340 28 L350 54 L264 96 Z" fill="#5a2f1f"/>
+  <circle cx="338" cy="32" r="16" fill="url(#gold)"/>
+  <path d="M292 186 L372 78 L388 92 L318 196 Z" fill="#5a2f1f"/>
+  <path d="M372 74 L388 48 L402 86 Z" fill="#ff8b2f"/>
+  <path d="M318 196 L364 250" stroke="#5a2f1f" stroke-width="12" stroke-linecap="round"/>
+  <path d="M340 238 C376 214 410 238 398 276 C386 316 330 318 316 274 C310 256 320 246 340 238 Z" fill="#ff7437" opacity="0.9"/>
+  <path d="M160 456 L188 300 L232 300 L260 456 Z" fill="#23131a"/>
+  <path d="M154 302 L114 454" stroke="#120b12" stroke-width="18" stroke-linecap="round"/>
+  <path d="M266 302 L306 454" stroke="#120b12" stroke-width="18" stroke-linecap="round"/>
+</svg>
+""".strip()
+
+CUSTOM_CSS = """
+:root {
+  --messenger-bg: #1a0d14;
+  --messenger-panel: rgba(255, 247, 238, 0.1);
+  --messenger-panel-strong: rgba(255, 247, 238, 0.14);
+  --messenger-line: rgba(255, 213, 158, 0.16);
+  --messenger-shadow: 0 18px 50px rgba(8, 2, 4, 0.34);
+  --user-bubble: #ffe6c7;
+  --assistant-bubble: #fff7f0;
+  --assistant-text: #1f1820;
+}
+
+body, .gradio-container {
+  background:
+    radial-gradient(circle at 12% 16%, rgba(255, 145, 71, 0.14), transparent 26%),
+    radial-gradient(circle at 82% 8%, rgba(217, 47, 78, 0.16), transparent 22%),
+    linear-gradient(135deg, #1a0d14 0%, #12070d 52%, #221520 100%);
+}
+
+.gradio-container {
+  max-width: 1680px !important;
+  padding: 18px !important;
+}
+
+.messenger-shell {
+  min-height: calc(100vh - 36px);
+}
+
+.messenger-layout {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  gap: 18px;
+  min-height: calc(100vh - 36px);
+}
+
+.messenger-panel {
+  background: linear-gradient(180deg, var(--messenger-panel-strong), var(--messenger-panel));
+  border: 1px solid var(--messenger-line);
+  border-radius: 24px;
+  box-shadow: var(--messenger-shadow);
+  backdrop-filter: blur(12px);
+  overflow: hidden;
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-head {
+  padding: 18px 18px 12px;
+  border-bottom: 1px solid var(--messenger-line);
+}
+
+.sidebar-head h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: #fff8ef;
+}
+
+.sidebar-head p {
+  margin: 8px 0 0;
+  color: rgba(255, 241, 227, 0.8);
+  font-size: 0.92rem;
+}
+
+.profile-list {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.profile-card {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 12px;
+  align-items: center;
+  padding: 10px;
+  border-radius: 16px;
+  background: rgba(255, 248, 239, 0.08);
+  border: 1px solid rgba(255, 229, 194, 0.12);
+}
+
+.profile-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  overflow: hidden;
+  background: rgba(255, 248, 239, 0.1);
+}
+
+.profile-avatar img,
+.profile-avatar .fallback {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.profile-title {
+  color: #fff9f2;
+  font-weight: 700;
+  font-size: 0.98rem;
+}
+
+.profile-snippet {
+  color: rgba(255, 240, 226, 0.72);
+  font-size: 0.84rem;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.chat-stage {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: calc(100vh - 36px);
+}
+
+.chat-head {
+  padding: 18px 20px 14px;
+  border-bottom: 1px solid var(--messenger-line);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.chat-head-main {
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  gap: 12px;
+  align-items: center;
+}
+
+.chat-head-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.chat-head-avatar img,
+.chat-head-avatar .fallback {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.chat-head-title {
+  color: #fff8ef;
+  font-size: 1.08rem;
+  font-weight: 700;
+}
+
+.chat-head-desc {
+  color: rgba(255, 239, 223, 0.75);
+  font-size: 0.86rem;
+  margin-top: 4px;
+}
+
+.chat-status {
+  color: rgba(255, 233, 203, 0.86);
+  font-size: 0.82rem;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: rgba(255, 239, 219, 0.08);
+  border: 1px solid rgba(255, 219, 169, 0.12);
+}
+
+.chat-history {
+  padding: 18px 18px 8px;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.message-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.message-row {
+  display: flex;
+  width: 100%;
+}
+
+.message-row.assistant {
+  justify-content: flex-start;
+}
+
+.message-row.user {
+  justify-content: flex-end;
+}
+
+.assistant-wrap {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr);
+  gap: 10px;
+  max-width: 78%;
+  align-items: start;
+}
+
+.assistant-avatar {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.assistant-avatar img,
+.assistant-avatar .fallback {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.bubble {
+  padding: 12px 14px;
+  border-radius: 18px;
+  line-height: 1.6;
+  font-size: 0.95rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.assistant-bubble {
+  background: var(--assistant-bubble);
+  color: var(--assistant-text);
+  border-top-left-radius: 8px;
+}
+
+.user-bubble {
+  max-width: 72%;
+  background: var(--user-bubble);
+  color: #2f1e1a;
+  border-top-right-radius: 8px;
+}
+
+.chat-compose {
+  padding: 14px 16px 16px;
+  border-top: 1px solid var(--messenger-line);
+}
+
+.compose-status {
+  margin-bottom: 10px;
+  color: rgba(255, 239, 223, 0.82);
+  font-size: 0.86rem;
+}
+
+.compose-row {
+  display: grid;
+  grid-template-columns: 1fr 112px;
+  gap: 10px;
+  align-items: stretch;
+}
+
+.compose-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.compose-row textarea,
+.compose-row input {
+  color: #111111 !important;
+}
+
+.compose-row .gr-textbox,
+.compose-row .gr-button,
+.compose-row .gr-form {
+  background: rgba(255, 248, 239, 0.08) !important;
+  border-color: rgba(255, 226, 186, 0.16) !important;
+}
+
+.compose-buttons .gr-button {
+  min-height: 46px;
+}
+
+.compose-row .gr-button-primary {
+  background: linear-gradient(135deg, #f19f35 0%, #d84f34 100%) !important;
+  color: #fff8ef !important;
+  border: none !important;
+}
+
+.compose-row .gr-button-secondary {
+  color: #fff8ef !important;
+}
+
+@media (max-width: 900px) {
+  .messenger-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    min-height: auto;
+  }
+
+  .chat-stage {
+    min-height: 70vh;
+  }
+}
+""".strip()
+
+
+def get_services() -> ChatServices:
+    global SERVICES
+    if SERVICES is None:
+        with SERVICES_LOCK:
+            if SERVICES is None:
+                SERVICES = create_chat_services()
+    return SERVICES
+
+
+def initial_history() -> list[dict[str, str]]:
+    return [dict(item) for item in INITIAL_HISTORY]
+
+
+def truncate_text(text: str, limit: int = 34) -> str:
+    compact = " ".join(str(text or "").split()).strip()
+    if len(compact) <= limit:
+        return compact
+    return compact[: limit - 3].rstrip() + "..."
+
+
+def render_avatar(size_class: str) -> str:
+    return f"""
+    <div class="{size_class}">
+      <img src="{MEGUMIN_IMAGE_URL}" alt="Megumin" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';" />
+      <div class="fallback">{MEGUMIN_SVG}</div>
+    </div>
+    """.strip()
+
+
+def render_sidebar(history: list[dict[str, str]]) -> str:
+    last_message = next(
+        (item["content"] for item in reversed(history) if item.get("content")),
+        INITIAL_GREETING,
+    )
+    return f"""
+    <div class="sidebar-head">
+      <h1>Characters</h1>
+      <p>현재 대화 중인 캐릭터를 여기에서 확인할 수 있습니다.</p>
+    </div>
+    <div class="profile-list">
+      <div class="profile-card">
+        {render_avatar("profile-avatar")}
+        <div>
+          <div class="profile-title">메구밍</div>
+          <div class="profile-snippet">{html.escape(truncate_text(last_message))}</div>
+        </div>
+      </div>
+    </div>
+    """.strip()
+
+
+def render_messages(history: list[dict[str, str]]) -> str:
+    rows: list[str] = []
+    for item in history:
+        role = item.get("role", "")
+        content = html.escape(item.get("content", ""))
+        if role == "assistant":
+            rows.append(
+                f"""
+                <div class="message-row assistant">
+                  <div class="assistant-wrap">
+                    {render_avatar("assistant-avatar")}
+                    <div class="bubble assistant-bubble">{content}</div>
+                  </div>
+                </div>
+                """.strip()
+            )
+        else:
+            rows.append(
+                f"""
+                <div class="message-row user">
+                  <div class="bubble user-bubble">{content}</div>
+                </div>
+                """.strip()
+            )
+    return f'<div class="message-col">{"".join(rows)}</div>'
+
+
+def begin_request(
+    message: str,
+    history: list[dict[str, str]],
+    session_id: str | None,
+):
+    if not message.strip():
+        return render_sidebar(history), render_messages(history), history, session_id, "", ""
+    status_text = "서비스 준비 중..." if SERVICES is None else "답변 생성 중..."
+    return render_sidebar(history), render_messages(history), history, session_id, message, status_text
+
+
+async def respond(
+    message: str,
+    history: list[dict[str, str]],
+    session_id: str | None,
+):
+    if not message.strip():
+        yield render_sidebar(history), render_messages(history), history, session_id, "", ""
+        return
+
+    updated_history = list(history)
+    updated_history.append({"role": "user", "content": message})
+    updated_history.append({"role": "assistant", "content": ""})
+    yield (
+        render_sidebar(updated_history),
+        render_messages(updated_history),
+        updated_history,
+        session_id,
+        "",
+        "답변 생성 중...",
+    )
+
+    active_session_id = session_id
+    got_reply = False
+    async for partial_text, active_session_id in stream_chat(
+        user_message=message,
+        services=get_services(),
+        session_id=session_id,
+    ):
+        got_reply = True
+        updated_history[-1] = {"role": "assistant", "content": partial_text}
+        yield (
+            render_sidebar(updated_history),
+            render_messages(updated_history),
+            updated_history,
+            active_session_id,
+            "",
+            "답변 생성 중...",
+        )
+
+    if not got_reply:
+        updated_history[-1] = {
+            "role": "assistant",
+            "content": "오늘은 마력의 흐름이 조금 불안정하군요. 잠시 후 다시 시도해 주시겠습니까?",
+        }
+
+    yield (
+        render_sidebar(updated_history),
+        render_messages(updated_history),
+        updated_history,
+        active_session_id,
+        "",
+        "",
+    )
+
+
+with gr.Blocks(title="Megumin Messenger", fill_height=True) as demo:
+    history_state = gr.State(value=initial_history())
+    session_state = gr.State(value=None)
+
+    with gr.Column(elem_classes=["messenger-shell"]):
+        with gr.Row(elem_classes=["messenger-layout"]):
+            with gr.Column(elem_classes=["messenger-panel", "sidebar"]):
+                sidebar_html = gr.HTML(render_sidebar(initial_history()))
+
+            with gr.Column(elem_classes=["messenger-panel", "chat-stage"]):
+                gr.HTML(
+                    f"""
+                    <div class="chat-head">
+                      <div class="chat-head-main">
+                        {render_avatar("chat-head-avatar")}
+                        <div>
+                          <div class="chat-head-title">메구밍</div>
+                          <div class="chat-head-desc">홍마족 최고의 폭렬마법사와 메신저처럼 대화해보세요.</div>
+                        </div>
+                      </div>
+                      <div class="chat-status">Megumin Messenger</div>
+                    </div>
+                    """.strip()
+                )
+                messages_html = gr.HTML(render_messages(initial_history()), elem_classes=["chat-history"])
+                with gr.Column(elem_classes=["chat-compose"]):
+                    runtime_status = gr.Markdown("", elem_classes=["compose-status"])
+                    with gr.Row(elem_classes=["compose-row"]):
+                        user_input = gr.Textbox(
+                            label="Message",
+                            placeholder="메��밍에게 메시지를 보내보세요.",
+                            lines=3,
+                            max_lines=5,
+                        )
+                        with gr.Column(elem_classes=["compose-buttons"]):
+                            send_button = gr.Button("Send", variant="primary")
+                            clear_button = gr.Button("Clear", variant="secondary")
+
+    submit_event = user_input.submit(
+        fn=begin_request,
+        inputs=[user_input, history_state, session_state],
+        outputs=[sidebar_html, messages_html, history_state, session_state, user_input, runtime_status],
+    )
+    submit_event.then(
+        fn=respond,
+        inputs=[user_input, history_state, session_state],
+        outputs=[sidebar_html, messages_html, history_state, session_state, user_input, runtime_status],
+    )
+
+    click_event = send_button.click(
+        fn=begin_request,
+        inputs=[user_input, history_state, session_state],
+        outputs=[sidebar_html, messages_html, history_state, session_state, user_input, runtime_status],
+    )
+    click_event.then(
+        fn=respond,
+        inputs=[user_input, history_state, session_state],
+        outputs=[sidebar_html, messages_html, history_state, session_state, user_input, runtime_status],
+    )
+
+    clear_button.click(
+        fn=lambda: (
+            render_sidebar(initial_history()),
+            render_messages(initial_history()),
+            initial_history(),
+            None,
+            "",
+            "",
+        ),
+        inputs=None,
+        outputs=[sidebar_html, messages_html, history_state, session_state, user_input, runtime_status],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", css=CUSTOM_CSS, ssr_mode=False)