Update app.py

app.py

@@ -7,41 +7,44 @@ ai_message = "Hello, how can I help you?"
 
 def stream_human_message():
     """
-    Human 메시지를 한 글자씩 타이핑 효과로 스트리밍합니다.
-    각 문자는 <span> 태그로 생성되며, 클릭 시 후속 동작은 페이지 상단에 미리 로드한 스크립트에서 처리합니다.
+    Human 메시지를 한 글자씩 타이핑하는 효과로 스트리밍합니다.
+    각 글자는 <span> 태그로 감싸지며, Start Typing 버튼을 누르면 새롭게 생성되어 기존의 ✂️ 위치 및 회색 처리 등이 리셋됩니다.
     """
+    # 초기 말풍선 컨테이너 생성
     html = "<div id='human_message' class='speech-bubble human'>"
-    yield html  # 초기 컨테이너만 출력
+    yield html  # 초기 컨테이너 출력
     # 한 글자씩 추가
     for i, ch in enumerate(human_message):
         html += f"<span data-index='{i}'>{ch}</span>"
         yield html
-        time.sleep(0.05)
+        time.sleep(0.05)  # 타이핑 효과 딜레이
     html += "</div>"
     yield html
 
-# Gradio 인터페이스 구성
 with gr.Blocks() as demo:
-    # 페이지 상단에 한 번만 로드할 스크립트 추가 (이벤트 위임 방식 사용)
+    # 페이지 상단에 단 한 번 로드될 스크립트: 이벤트 위임 방식으로 클릭 이벤트 처리
     gr.HTML(
         """
         <script>
-        // 전역 플래그: 한 번만 처리하도록
-        window.cutDone = false;
-        // 부모 컨테이너에 이벤트 위임으로 클릭 이벤트 처리
+        // 문서 전체에서 클릭 이벤트를 감지하여, human 말풍선 내의 span 요소에 대해 처리합니다.
         document.addEventListener("click", function(event) {
-            if (window.cutDone) return;  // 이미 처리한 경우
-            // 클릭한 요소가 data-index 속성을 가진 span 인지 확인
-            if (event.target && event.target.matches("span[data-index]")) {
+            // human 말풍선 내부의 data-index 속성을 가진 span이 클릭된 경우에만 처리
+            if (event.target && event.target.matches("div.speech-bubble.human span[data-index]")) {
                 var span = event.target;
-                window.cutDone = true;
-                // 클릭한 span 바로 뒤에 ✂️ 이모티콘 삽입
+                var container = span.parentNode;
+                // 기존에 삽입된 모든 scissor 요소 제거
+                var oldScissors = container.querySelectorAll("span.scissor");
+                oldScissors.forEach(function(s) { s.remove(); });
+                // 모든 span의 회색 스타일 제거
+                var spans = container.querySelectorAll("span[data-index]");
+                spans.forEach(function(s) { s.style.color = ''; });
+                // 클릭한 span 뒤에 ✂️ 아이콘을 삽입 (클래스 "scissor" 추가)
                 var scissor = document.createElement('span');
                 scissor.textContent = '✂️';
-                span.parentNode.insertBefore(scissor, span.nextSibling);
-                // 클릭한 문자의 data-index 값을 기준으로 이후 문자들의 색상을 회색으로 변경
+                scissor.classList.add('scissor');
+                container.insertBefore(scissor, span.nextSibling);
+                // 클릭한 문자 이후의 모든 span에 대해 텍스트 색상을 회색으로 변경
                 var cutIndex = parseInt(span.getAttribute('data-index'));
-                var spans = span.parentNode.querySelectorAll('span[data-index]');
                 spans.forEach(function(s) {
                     var idx = parseInt(s.getAttribute('data-index'));
                     if (idx > cutIndex) {
@@ -54,15 +57,17 @@ with gr.Blocks() as demo:
         """
     )
     
-    # CSS 스타일 적용 (말풍선 모양 및 배치)
+    # CSS 스타일: 말풍선 모양 및 배치 설정
     gr.HTML(
         """
         <style>
+        /* 전체 채팅 영역: 세로 배치 */
         .chat-container {
           display: flex;
           flex-direction: column;
           gap: 10px;
         }
+        /* 공통 말풍선 스타일 */
         .speech-bubble {
           position: relative;
           padding: 10px 15px;
@@ -72,6 +77,7 @@ with gr.Blocks() as demo:
           font-size: 16px;
           line-height: 1.4;
         }
+        /* Human 말풍선: 오른쪽 정렬, 초록색 배경 및 오른쪽 꼬리 */
         .human {
           background: #d0f0d0;
           align-self: flex-end;
@@ -86,6 +92,7 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent transparent transparent #d0f0d0;
         }
+        /* AI 말풍선: 왼쪽 정렬, 회색 배경 및 왼쪽 꼬리 */
         .ai {
           background: #e0e0e0;
           align-self: flex-start;
@@ -98,7 +105,7 @@ with gr.Blocks() as demo:
           top: 10px;
           border-width: 10px 10px 10px 0;
           border-style: solid;
-          border-color: transparent #e0e0e0 transparent transparent;
+          border-color: transparent #e0f0e0 transparent transparent;
         }
         </style>
         """
@@ -106,12 +113,12 @@ with gr.Blocks() as demo:
     
     gr.Markdown("## Chat Interface")
     with gr.Column(elem_classes="chat-container"):
-        # 위쪽에 Human 메시지 (스트리밍 업데이트)
+        # 위쪽: Human 말풍선 (스트리밍 업데이트됨)
         human_bubble = gr.HTML("")
-        # 아래쪽에 AI 메시지 (고정)
+        # 아래쪽: AI 말풍선 (고정 메시지)
         ai_bubble = gr.HTML(f"<div id='ai_message' class='speech-bubble ai'>{ai_message}</div>")
     
-    # 타이핑 효과를 시작할 버튼
+    # 타이핑 시작 버튼: 버튼 클릭 시 stream_human_message가 호출되어 새 HTML을 생성 (즉, ✂️ 위치가 리셋됨)
     start_button = gr.Button("Start Typing")
     start_button.click(fn=stream_human_message, outputs=human_bubble)