Update app.py

app.py

@@ -7,56 +7,62 @@ ai_message = "Hello, how can I help you?"
 
 def stream_human_message():
     """
-    Human 메시지를 한 글자씩 타이핑하는 효과로 스트리밍하면서,
-    각 문자에 클릭 이벤트(handleClick)를 부여합니다.
+    Human 메시지를 한 글자씩 타이핑 효과로 스트리밍합니다.
+    각 문자는 <span> 태그로 생성되며, 클릭 시 후속 동작은 페이지 상단에 미리 로드한 스크립트에서 처리합니다.
     """
-    js_script = """
-    <script>
-    if (window.cutDone === undefined) { window.cutDone = false; }
-    function handleClick(span) {
-        if (window.cutDone) return;
-        window.cutDone = true;
-        // 클릭한 span 바로 뒤에 ✂️ 이모티콘 삽입
-        var scissor = document.createElement('span');
-        scissor.textContent = '✂️';
-        span.parentNode.insertBefore(scissor, span.nextSibling);
-        // 클릭한 문자의 data-index 값을 기준으로 이후 문자들의 색상을 회색으로 변경
-        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) {
-                s.style.color = 'grey';
-            }
-        });
-    }
-    </script>
-    """
-    # Human 말풍선 컨테이너 (CSS 클래스 'speech-bubble human'를 적용)
-    html = js_script + "<div id='human_message' class='speech-bubble human'>"
-    yield html
-    # 한 글자씩 <span> 태그로 추가 (클릭 시 handleClick(this) 호출)
+    html = "<div id='human_message' class='speech-bubble human'>"
+    yield html  # 초기 컨테이너만 출력
+    # 한 글자씩 추가
     for i, ch in enumerate(human_message):
-        html += f"<span data-index='{i}' onclick='handleClick(this)'>{ch}</span>"
+        html += f"<span data-index='{i}'>{ch}</span>"
         yield html
-        time.sleep(0.05)  # 타이핑 효과 딜레이 (0.05초)
+        time.sleep(0.05)
     html += "</div>"
     yield html
 
 # Gradio 인터페이스 구성
 with gr.Blocks() as demo:
-    gr.Markdown("## Chat Interface")
-    # CSS 스타일을 적용하여 말풍선 모양과 배치 설정
+    # 페이지 상단에 한 번만 로드할 스크립트 추가 (이벤트 위임 방식 사용)
+    gr.HTML(
+        """
+        <script>
+        // 전역 플래그: 한 번만 처리하도록
+        window.cutDone = false;
+        // 부모 컨테이너에 이벤트 위임으로 클릭 이벤트 처리
+        document.addEventListener("click", function(event) {
+            if (window.cutDone) return;  // 이미 처리한 경우
+            // 클릭한 요소가 data-index 속성을 가진 span 인지 확인
+            if (event.target && event.target.matches("span[data-index]")) {
+                var span = event.target;
+                window.cutDone = true;
+                // 클릭한 span 바로 뒤에 ✂️ 이모티콘 삽입
+                var scissor = document.createElement('span');
+                scissor.textContent = '✂️';
+                span.parentNode.insertBefore(scissor, span.nextSibling);
+                // 클릭한 문자의 data-index 값을 기준으로 이후 문자들의 색상을 회색으로 변경
+                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) {
+                        s.style.color = 'grey';
+                    }
+                });
+            }
+        });
+        </script>
+        """
+    )
+    
+    # CSS 스타일 적용 (말풍선 모양 및 배치)
     gr.HTML(
         """
         <style>
-        /* 채팅 전체 컨테이너 (세로 배치) */
         .chat-container {
           display: flex;
           flex-direction: column;
           gap: 10px;
         }
-        /* 공통 말풍선 스타일 */
         .speech-bubble {
           position: relative;
           padding: 10px 15px;
@@ -66,7 +72,6 @@ with gr.Blocks() as demo:
           font-size: 16px;
           line-height: 1.4;
         }
-        /* Human 말풍선 (오른쪽 정렬, 말풍선 꼬리 오른쪽) */
         .human {
           background: #d0f0d0;
           align-self: flex-end;
@@ -81,7 +86,6 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent transparent transparent #d0f0d0;
         }
-        /* AI 말풍선 (왼쪽 정렬, 말풍선 꼬리 왼쪽) */
         .ai {
           background: #e0e0e0;
           align-self: flex-start;
@@ -100,16 +104,15 @@ with gr.Blocks() as demo:
         """
     )
     
-    # 채팅 메시지들이 담길 컨테이너 (세로 배치)
+    gr.Markdown("## Chat Interface")
     with gr.Column(elem_classes="chat-container"):
-        # 위쪽에 Human 메시지 (스트리밍 업데이트됨)
+        # 위쪽에 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")
-    # 제너레이터 함수 사용 (stream=True 없이 yield 방식으로 스트리밍)
     start_button.click(fn=stream_human_message, outputs=human_bubble)
 
 demo.launch()