Update app.py

app.py

@@ -7,17 +7,14 @@ ai_message = "Hello, how can I help you?"
 
 def stream_human_message():
     """
-    Human 메시지를 문자 단위로 타이핑하는 것처럼 스트리밍하면서,
-    각 문자에 클릭 이벤트를 부여하여, 클릭 시 해당 문자 이후에 ✂️ 이모티콘 삽입 및 잔여 문자 회색 처리를 수행합니다.
-    
-    제너레이터 함수로 구현하여, 매번 yield로 HTML을 반환함으로써 스트리밍 효과를 냅니다.
+    Human 메시지를 한 글자씩 타이핑하는 효과로 스트리밍하면서,
+    각 문자에 클릭 이벤트(handleClick)를 부여합니다.
     """
-    # 페이지에 삽입할 JavaScript 코드 (한 번만 실행되도록 전역 플래그 사용)
     js_script = """
     <script>
     if (window.cutDone === undefined) { window.cutDone = false; }
     function handleClick(span) {
-        if (window.cutDone) return;  // 이미 클릭한 경우 무시
+        if (window.cutDone) return;
         window.cutDone = true;
         // 클릭한 span 바로 뒤에 ✂️ 이모티콘 삽입
         var scissor = document.createElement('span');
@@ -35,41 +32,84 @@ def stream_human_message():
     }
     </script>
     """
-    # Human 말풍선의 HTML 컨테이너 시작 (오른쪽 정렬, 배경색 등 스타일 지정)
-    html = js_script + (
-        "<div id='human_message' style='text-align: right; background-color: #d0f0d0; "
-        "padding: 10px; border-radius: 10px; display: inline-block;'>"
-    )
-    # 초기 상태: 아직 내용이 없을 때 yield
+    # Human 말풍선 컨테이너 (CSS 클래스 'speech-bubble human'를 적용)
+    html = js_script + "<div id='human_message' class='speech-bubble human'>"
     yield html
-    # 메시지를 한 글자씩 추가하며 yield (타이핑 효과)
+    # 한 글자씩 <span> 태그로 추가 (클릭 시 handleClick(this) 호출)
     for i, ch in enumerate(human_message):
         html += f"<span data-index='{i}' onclick='handleClick(this)'>{ch}</span>"
         yield html
-        time.sleep(0.05)  # 타이핑 효과를 위한 딜레이 (0.05초)
-    # 컨테이너 종료 태그 추가
+        time.sleep(0.05)  # 타이핑 효과 딜레이 (0.05초)
     html += "</div>"
     yield html
 
 # Gradio 인터페이스 구성
 with gr.Blocks() as demo:
     gr.Markdown("## Chat Interface")
-    with gr.Row():
-        # 왼쪽: AI 말풍선 (고정 텍스트)
-        with gr.Column():
-            ai_bubble = gr.HTML(
-                f"<div style='text-align: left; background-color: #e0e0e0; padding: 10px; "
-                "border-radius: 10px; display: inline-block;'>"
-                f"{ai_message}"
-                "</div>"
-            )
-        # 오른쪽: Human 말풍선 (스트리밍 텍스트)
-        with gr.Column():
-            human_bubble = gr.HTML("")
+    # CSS 스타일을 적용하여 말풍선 모양과 배치 설정
+    gr.HTML(
+        """
+        <style>
+        /* 채팅 전체 컨테이너 (세로 배치) */
+        .chat-container {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+        }
+        /* 공통 말풍선 스타일 */
+        .speech-bubble {
+          position: relative;
+          padding: 10px 15px;
+          border-radius: 15px;
+          max-width: 70%;
+          font-family: sans-serif;
+          font-size: 16px;
+          line-height: 1.4;
+        }
+        /* Human 말풍선 (오른쪽 정렬, 말풍선 꼬리 오른쪽) */
+        .human {
+          background: #d0f0d0;
+          align-self: flex-end;
+          margin-right: 10px;
+        }
+        .human::after {
+          content: "";
+          position: absolute;
+          right: -10px;
+          top: 10px;
+          border-width: 10px 0 10px 10px;
+          border-style: solid;
+          border-color: transparent transparent transparent #d0f0d0;
+        }
+        /* AI 말풍선 (왼쪽 정렬, 말풍선 꼬리 왼쪽) */
+        .ai {
+          background: #e0e0e0;
+          align-self: flex-start;
+          margin-left: 10px;
+        }
+        .ai::after {
+          content: "";
+          position: absolute;
+          left: -10px;
+          top: 10px;
+          border-width: 10px 10px 10px 0;
+          border-style: solid;
+          border-color: transparent #e0e0e0 transparent transparent;
+        }
+        </style>
+        """
+    )
+    
+    # 채팅 메시지들이 담길 컨테이너 (세로 배치)
+    with gr.Column(elem_classes="chat-container"):
+        # 위쪽에 Human 메시지 (스트리밍 업데이트됨)
+        human_bubble = gr.HTML("")
+        # 아래쪽에 AI 메시지 (고정)
+        ai_bubble = gr.HTML(f"<div id='ai_message' class='speech-bubble ai'>{ai_message}</div>")
     
     # 타이핑 효과를 시작할 버튼
     start_button = gr.Button("Start Typing")
-    # 제너레이터 함수를 click 이벤트에 등록 (stream 인자 없이도 제너레이터 함수의 yield가 순차적으로 반영됩니다)
+    # 제너레이터 함수 사용 (stream=True 없이 yield 방식으로 스트리밍)
     start_button.click(fn=stream_human_message, outputs=human_bubble)
 
 demo.launch()