Update app.py

app.py

@@ -7,48 +7,61 @@ ai_message = "Hello, how can I help you?"
 
 def stream_human_message():
     """
-    Human 메시지를 한 글자씩 타이핑하는 효과로 스트리밍합니다.
-    각 글자는 <span> 태그로 감싸지며, Start Typing 버튼을 누르면 새롭게 생성되어 기존의 ✂️ 위치 및 회색 처리 등이 리셋됩니다.
+    Human 메시지를 한 글자씩 타이핑 효과로 스트리밍하면서,
+    오른쪽에 🧑 이모티콘이 있는 wrapper 안에 말풍선을 구성합니다.
+    Start Typing을 누르면 이전 상태가 리셋됩니다.
     """
-    # 초기 말풍선 컨테이너 생성
-    html = "<div id='human_message' class='speech-bubble human'>"
-    yield html  # 초기 컨테이너 출력
-    # 한 글자씩 추가
-    for i, ch in enumerate(human_message):
-        html += f"<span data-index='{i}'>{ch}</span>"
-        yield html
-        time.sleep(0.05)  # 타이핑 효과 딜레이
-    html += "</div>"
+    bubble_content = ""
+    # wrapper 시작: 전체 너비를 채우고, 오른쪽 정렬하는 flex 컨테이너
+    wrapper_start = (
+        """<div class="human-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-end; gap: 5px; width: 100%;">"""
+    )
+    # 말풍선 컨테이너 시작
+    bubble_start = """<div id="human_message" class="speech-bubble human">"""
+    bubble_end = "</div>"
+    # 오른쪽에 고정될 이모티콘
+    emoji_html = "<div class='emoji'>🧑</div>"
+    wrapper_end = "</div>"
+    
+    # 초기 빈 말풍선과 이모티콘 출력
+    html = wrapper_start + bubble_start + bubble_end + emoji_html + wrapper_end
     yield html
 
+    # 한 글자씩 추가하여 streaming 업데이트
+    for i, ch in enumerate(human_message):
+         bubble_content += f"<span data-index='{i}'>{ch}</span>"
+         current_html = wrapper_start + bubble_start + bubble_content + bubble_end + emoji_html + wrapper_end
+         yield current_html
+         time.sleep(0.05)
+
 with gr.Blocks() as demo:
-    # 페이지 상단에 단 한 번 로드될 스크립트: 이벤트 위임 방식으로 클릭 이벤트 처리
+    # 전역적으로 한 번만 로드되는 스크립트: 이벤트 위임으로 동적으로 추가되는 span의 클릭 이벤트 처리
     gr.HTML(
         """
         <script>
-        // 문서 전체에서 클릭 이벤트를 감지하여, human 말풍선 내의 span 요소에 대해 처리합니다.
+        // human 말풍선 내부의 span[data-index]에 대해 클릭 이벤트 처리
         document.addEventListener("click", function(event) {
-            // human 말풍선 내부의 data-index 속성을 가진 span이 클릭된 경우에만 처리
             if (event.target && event.target.matches("div.speech-bubble.human span[data-index]")) {
                 var span = event.target;
-                var container = span.parentNode;
-                // 기존에 삽입된 모든 scissor 요소 제거
+                // 가장 가까운 human 말풍선 컨테이너 선택
+                var container = span.closest("div.speech-bubble.human");
+                // 기존에 삽입된 ✂️ 이모티콘(클래스 "scissor") 제거
                 var oldScissors = container.querySelectorAll("span.scissor");
                 oldScissors.forEach(function(s) { s.remove(); });
-                // 모든 span의 회색 스타일 제거
+                // 모든 span의 색상을 원래 색으로 초기화
                 var spans = container.querySelectorAll("span[data-index]");
                 spans.forEach(function(s) { s.style.color = ''; });
-                // 클릭한 span 뒤에 ✂️ 아이콘을 삽입 (클래스 "scissor" 추가)
+                // 클릭한 span 바로 뒤에 ✂️ 이모티콘 삽입
                 var scissor = document.createElement('span');
                 scissor.textContent = '✂️';
-                scissor.classList.add('scissor');
+                scissor.classList.add("scissor");
                 container.insertBefore(scissor, span.nextSibling);
-                // 클릭한 문자 이후의 모든 span에 대해 텍스트 색상을 회색으로 변경
-                var cutIndex = parseInt(span.getAttribute('data-index'));
+                // 클릭한 span 이후의 모든 span 텍스트 색상을 회색으로 변경
+                var cutIndex = parseInt(span.getAttribute("data-index"));
                 spans.forEach(function(s) {
-                    var idx = parseInt(s.getAttribute('data-index'));
+                    var idx = parseInt(s.getAttribute("data-index"));
                     if (idx > cutIndex) {
-                        s.style.color = 'grey';
+                        s.style.color = "grey";
                     }
                 });
             }
@@ -57,17 +70,18 @@ with gr.Blocks() as demo:
         """
     )
     
-    # CSS 스타일: 말풍선 모양 및 배치 설정
+    # CSS 스타일 적용
     gr.HTML(
         """
         <style>
-        /* 전체 채팅 영역: 세로 배치 */
+        /* 전체 채팅 영역: 세로 배치 및 간격 확보 */
         .chat-container {
           display: flex;
           flex-direction: column;
           gap: 10px;
+          width: 100%;
         }
-        /* 공통 말풍선 스타일 */
+        /* 말풍선 기본 스타일 */
         .speech-bubble {
           position: relative;
           padding: 10px 15px;
@@ -77,12 +91,12 @@ with gr.Blocks() as demo:
           font-size: 16px;
           line-height: 1.4;
         }
-        /* Human 말풍선: 오른쪽 정렬, 초록색 배경 및 오른쪽 꼬리 */
+        /* Human 말풍선: 배경색 및 오른쪽에 배치 (wrapper에서 정렬) */
         .human {
           background: #d0f0d0;
-          align-self: flex-end;
           margin-right: 10px;
         }
+        /* Human 말풍선의 꼬리 (오른쪽) */
         .human::after {
           content: "";
           position: absolute;
@@ -92,12 +106,12 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent transparent transparent #d0f0d0;
         }
-        /* AI 말풍선: 왼쪽 정렬, 회색 배경 및 왼쪽 꼬리 */
+        /* AI 말풍선: 배경색 및 왼쪽에 배치 (wrapper에서 정렬) */
         .ai {
           background: #e0e0e0;
-          align-self: flex-start;
           margin-left: 10px;
         }
+        /* AI 말풍선의 꼬리 (왼쪽) */
         .ai::after {
           content: "";
           position: absolute;
@@ -105,20 +119,31 @@ with gr.Blocks() as demo:
           top: 10px;
           border-width: 10px 10px 10px 0;
           border-style: solid;
-          border-color: transparent #e0f0e0 transparent transparent;
+          border-color: transparent #e0e0e0 transparent transparent;
+        }
+        /* Emoji 아이콘 스타일 */
+        .emoji {
+          font-size: 24px;
+          line-height: 1;
         }
         </style>
         """
     )
     
     gr.Markdown("## Chat Interface")
+    
     with gr.Column(elem_classes="chat-container"):
-        # 위쪽: Human 말풍선 (스트리밍 업데이트됨)
+        # Human 메시지 (위쪽, streaming)
         human_bubble = gr.HTML("")
-        # 아래쪽: AI 말풍선 (고정 메시지)
-        ai_bubble = gr.HTML(f"<div id='ai_message' class='speech-bubble ai'>{ai_message}</div>")
+        # AI 메시지 (아래쪽, 고정) - 왼쪽에 🤖 이모티콘을 추가하는 wrapper 사용
+        ai_html = """
+        <div class="ai-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-start; gap: 5px; width: 100%;">
+          <div class="emoji">🤖</div>
+          <div id="ai_message" class="speech-bubble ai">""" + ai_message + """</div>
+        </div>
+        """
+        ai_bubble = gr.HTML(ai_html)
     
-    # 타이핑 시작 버튼: 버튼 클릭 시 stream_human_message가 호출되어 새 HTML을 생성 (즉, ✂️ 위치가 리셋됨)
     start_button = gr.Button("Start Typing")
     start_button.click(fn=stream_human_message, outputs=human_bubble)