Update app_gradio.py

app_gradio.py

@@ -1,5 +1,7 @@
 from __future__ import annotations
 
+import os
+
 import gradio as gr
 
 from megumin_agent.chat import chat_once
@@ -7,6 +9,10 @@ from megumin_agent.chat import create_chat_services
 
 
 SERVICES = create_chat_services()
+MEGUMIN_IMAGE_URL = os.getenv(
+    "MEGUMIN_IMAGE_URL",
+    "https://huggingface.co/datasets/Junhoee/megumin-chat/resolve/main/메구밍사진.png",
+)
 
 MEGUMIN_SVG = """
 <svg viewBox="0 0 420 560" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Megumin inspired illustration">
@@ -52,15 +58,10 @@ MEGUMIN_SVG = """
 
 CUSTOM_CSS = """
 :root {
-  --megumin-bg: #17070f;
-  --megumin-wine: #5d0f1f;
-  --megumin-gold: #f2b64a;
-  --megumin-cream: #fff1de;
   --megumin-panel: rgba(255, 244, 232, 0.12);
   --megumin-panel-strong: rgba(255, 244, 232, 0.18);
   --megumin-line: rgba(255, 216, 169, 0.22);
-  --megumin-text: #fff5ea;
-  --megumin-muted: rgba(255, 245, 234, 0.78);
+  --megumin-text: #fff8ef;
   --megumin-shadow: 0 24px 80px rgba(7, 1, 4, 0.42);
 }
 
@@ -117,10 +118,6 @@ body, .gradio-container {
   z-index: 1;
 }
 
-.shell > .gr-block {
-  background: transparent !important;
-}
-
 .layout {
   align-items: stretch;
   gap: 20px;
@@ -135,11 +132,7 @@ body, .gradio-container {
   overflow: hidden;
 }
 
-.profile-panel, .visual-panel {
-  min-height: 780px;
-}
-
-.chat-panel {
+.profile-panel, .visual-panel, .chat-panel {
   min-height: 780px;
 }
 
@@ -151,7 +144,7 @@ body, .gradio-container {
   font-size: 0.82rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: rgba(255, 217, 174, 0.76);
+  color: rgba(255, 217, 174, 0.82);
   margin-bottom: 10px;
 }
 
@@ -160,17 +153,26 @@ body, .gradio-container {
   line-height: 1.1;
   font-weight: 800;
   margin: 0;
-  color: var(--megumin-cream);
+  color: #ffffff;
+}
+
+.panel-copy,
+.box-title,
+.example-box li,
+.visual-note p,
+.chat-header p,
+.status-pill,
+.quote,
+.quote small {
+  color: #ffffff !important;
 }
 
 .panel-copy {
   margin: 12px 0 0;
   font-size: 0.98rem;
-  line-height: 1.7;
-  color: var(--megumin-muted);
+  line-height: 1.75;
 }
 
-.persona-box,
 .example-box,
 .visual-note {
   margin: 18px 24px 0;
@@ -184,18 +186,14 @@ body, .gradio-container {
   margin: 0 0 10px;
   font-size: 0.95rem;
   font-weight: 700;
-  color: #ffd7a0;
 }
 
-.persona-box ul,
 .example-box ul {
   margin: 0;
   padding-left: 1.1rem;
-  color: var(--megumin-muted);
   line-height: 1.7;
 }
 
-.persona-box li,
 .example-box li {
   margin: 0 0 0.45rem;
 }
@@ -212,13 +210,7 @@ body, .gradio-container {
   margin: 0;
   font-size: 2rem;
   font-weight: 800;
-  color: var(--megumin-cream);
-}
-
-.chat-header p {
-  margin: 8px 0 0;
-  line-height: 1.6;
-  color: var(--megumin-muted);
+  color: #ffffff;
 }
 
 .status-pill {
@@ -228,7 +220,6 @@ body, .gradio-container {
   padding: 10px 14px;
   border-radius: 999px;
   background: rgba(255, 209, 143, 0.12);
-  color: #ffe5bc;
   font-size: 0.85rem;
   border: 1px solid rgba(255, 213, 157, 0.18);
 }
@@ -245,11 +236,6 @@ body, .gradio-container {
   padding: 0 20px 14px;
 }
 
-.chatbot-wrap .bubble-wrap,
-.chatbot-wrap .message-row {
-  font-size: 0.98rem;
-}
-
 .chatbot-wrap .message,
 .chatbot-wrap .bubble {
   backdrop-filter: blur(10px);
@@ -275,14 +261,9 @@ body, .gradio-container {
   padding: 0 20px 20px;
 }
 
-.input-zone .gr-textbox,
-.input-zone .gr-button {
-  min-height: 52px;
-}
-
 .input-zone textarea,
 .input-zone input {
-  color: var(--megumin-text) !important;
+  color: #ffffff !important;
 }
 
 .input-zone .gr-textbox,
@@ -292,6 +273,15 @@ body, .gradio-container {
   border-color: rgba(255, 226, 186, 0.16) !important;
 }
 
+.input-actions {
+  gap: 12px;
+}
+
+.input-actions .gr-button {
+  width: 100%;
+  min-height: 52px;
+}
+
 .input-zone .gr-button-primary {
   background: linear-gradient(135deg, #f19f35 0%, #d84f34 100%) !important;
   color: #fff8ef !important;
@@ -299,11 +289,7 @@ body, .gradio-container {
 }
 
 .input-zone .gr-button-secondary {
-  color: var(--megumin-text) !important;
-}
-
-.visual-panel {
-  position: relative;
+  color: #fff8ef !important;
 }
 
 .visual-frame {
@@ -323,26 +309,22 @@ body, .gradio-container {
   border: 1px solid rgba(255, 226, 186, 0.16);
 }
 
-.visual-card .portrait {
+.portrait-image,
+.portrait-fallback {
   width: 100%;
   max-width: 360px;
   margin: 0 auto;
   display: block;
 }
 
-.quote {
-  font-size: 1.12rem;
-  line-height: 1.7;
-  color: #fff0d4;
+.portrait-image {
+  border-radius: 24px;
+  object-fit: cover;
+  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.24);
 }
 
-.quote small {
-  display: block;
-  margin-top: 10px;
-  color: rgba(255, 232, 197, 0.72);
-  font-size: 0.82rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.portrait-fallback {
+  display: none;
 }
 
 @media (max-width: 1200px) {
@@ -367,27 +349,18 @@ PROFILE_HTML = """
     <div class="eyebrow">Character Guide</div>
     <h2 class="panel-title">메구밍 프로필</h2>
     <p class="panel-copy">
-      홍마족 최고의 천재를 자처하는 폭렬마법사입니다. 과장된 어휘와 당당한 태도를 즐��지만,
-      의외로 정이 많고 귀여운 것에는 한없이 약합니다. 질문이 들어오면 메구밍다운 자존심과 말투를 유지한 채,
-      설정 정보와 유사 답변 사례를 함께 참고해 답합니다.
+      이 멋진 세계에 축복을!의 등장인물로, 폭렬마법만을 고집하는 홍마족 아크 위저드입니다.
+      자존심 강하고 허세 넘치는 말투를 즐기지만, 동료들에게는 의외로 진심을 보이는 면도 있습니다.
+      이 챗봇은 메구밍의 말투와 감정선을 유지하면서 원작 설정까지 함께 참고해 답합니다.
     </p>
   </div>
-  <div class="persona-box">
-    <p class="box-title">페르소나 핵심</p>
-    <ul>
-      <li>기본은 한국어 존댓말, 1인칭 유지</li>
-      <li>연극적이고 당당하지만 읽기 쉬운 답변</li>
-      <li>본인을 모욕하면 "어이, "로 시작해 맞받아침</li>
-      <li>원작 설정은 사실 RAG, 말투는 페르소나 RAG로 보강</li>
-    </ul>
-  </div>
   <div class="example-box">
     <p class="box-title">예시 질문</p>
     <ul>
       <li>메구밍, 카즈마 씨를 어떻게 생각하십니까?</li>
       <li>폭렬마법을 가르쳐 준 사람은 누구인가요?</li>
       <li>아쿠아의 세이크리드 브레이크 스펠이 무엇인지 설명해 주세요.</li>
-      <li>홍마족다운 자기소개를 한 번만 들려주시겠습니까?</li>
+      <li>홍마족다운 자기소개를 한 번 들려주시겠습니까?</li>
       <li>메구밍이라는 이름이 웃기다고 하면 어떻게 받아치시겠습니까?</li>
     </ul>
   </div>
@@ -400,13 +373,19 @@ VISUAL_HTML = f"""
     <div>
       <div class="eyebrow">Explosion Archive</div>
       <div class="visual-card">
-        <div class="portrait">{MEGUMIN_SVG}</div>
+        <img
+          class="portrait-image"
+          src="{MEGUMIN_IMAGE_URL}"
+          alt="Megumin"
+          onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
+        />
+        <div class="portrait-fallback">{MEGUMIN_SVG}</div>
       </div>
       <div class="visual-note">
         <p class="box-title">이 페이지의 분위기</p>
         <p class="panel-copy">
-          어두운 저녁빛 속에 폭렬마법의 잔광이 감도는 무드로 꾸몄습니다.
-          중앙의 반투명 채팅 패널은 실제로 메구밍과 마주 서서 대화를 주고받는 느낌을 주도록 설계했습니다.
+          어두운 저녁빛과 폭렬마법의 잔광이 감도는 무드로 구성했습니다.
+          중앙의 반투명 채팅 패널은 실제로 메구밍과 마주 앉아 이야기를 주고받는 느낌을 주도록 설계했습니다.
         </p>
       </div>
     </div>
@@ -460,11 +439,8 @@ with gr.Blocks(title="Megumin RAG Chat", fill_height=True) as demo:
                         <div class="chat-header">
                           <div>
                             <div class="eyebrow">Megumin Dialogue Chamber</div>
-                            <h1>메구밍과 폭렬 대화</h1>
-                            <p>
-                              메구밍 페르소나와 코노스바 설정 RAG를 함께 활용해,
-                              메구밍 본인처럼 답하는 대화 세션입니다.
-                            </p>
+                            <h1>메구밍 Chatbot</h1>
+                            <p>메구밍과 자유롭게 대화해보세요!</p>
                           </div>
                           <div class="status-pill">
                             <span class="status-dot"></span>
@@ -491,8 +467,9 @@ with gr.Blocks(title="Megumin RAG Chat", fill_height=True) as demo:
                                 max_lines=4,
                                 scale=8,
                             )
-                            send_button = gr.Button("Send", variant="primary", scale=1)
-                        clear_button = gr.Button("Clear", variant="secondary")
+                            with gr.Column(scale=1, elem_classes=["input-actions"]):
+                                send_button = gr.Button("Send", variant="primary")
+                                clear_button = gr.Button("Clear", variant="secondary")
             with gr.Column(scale=4, min_width=320):
                 gr.HTML(VISUAL_HTML)