Update app.py

app.py

@@ -1,5 +1,5 @@
-import gradio as gr
 import time
+import gradio as gr
 
 # 메시지 내용 설정
 human_message = "Hello. I'd like to find a round trip commercial airline flight from San Francisco to Denver."
@@ -7,14 +7,13 @@ ai_message = "Hello, how can I help you?"
 
 def stream_human_message():
     """
-    Human의 메시지를 문자 단위로 타이핑하는 것처럼 스트리밍합니다.
-    각 문자는 <span> 태그로 감싸서 onclick 이벤트로 사용자가 클릭할 수 있도록 합니다.
-    클릭 시 JavaScript 함수 handleClick()가 호출되어,
-    해당 문자의 바로 뒤에 ✂️ 이모티콘을 삽입하고 그 뒤의 문자들은 회색으로 표시됩니다.
+    Human 메시지를 문자 단위로 타이핑하는 것처럼 스트리밍하면서,
+    각 문자에 클릭 이벤트를 부여하여, 클릭 시 해당 문자 이후에 ✂️ 이모티콘 삽입 및 잔여 문자 회색 처리를 수행합니다.
+    
+    제너레이터 함수로 구현하여, 매번 yield로 HTML을 반환함으로써 스트리밍 효과를 냅니다.
     """
-    # 클릭 이벤트 처리를 위한 JavaScript 코드.
-    # (페이지에 단 한 번만 로드되도록 window.cutDone 플래그로 중복 실행을 방지합니다.)
-    script = """
+    # 페이지에 삽입할 JavaScript 코드 (한 번만 실행되도록 전역 플래그 사용)
+    js_script = """
     <script>
     if (window.cutDone === undefined) { window.cutDone = false; }
     function handleClick(span) {
@@ -36,15 +35,14 @@ def stream_human_message():
     }
     </script>
     """
-    # human 메시지를 감싸는 HTML 컨테이너 시작 (오른쪽 정렬, 배경 및 테두리 스타일)
-    html = script + (
-        "<div id='human_message' "
-        "style='text-align: right; background-color: #d0f0d0; padding: 10px; "
-        "border-radius: 10px; display: inline-block;'>"
+    # 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
     yield html
-    # 문자 하나씩 <span> 태그로 추가하면서 스트리밍 효과를 줍니다.
+    # 메시지를 한 글자씩 추가하며 yield (타이핑 효과)
     for i, ch in enumerate(human_message):
         html += f"<span data-index='{i}' onclick='handleClick(this)'>{ch}</span>"
         yield html
@@ -68,9 +66,10 @@ with gr.Blocks() as demo:
         # 오른쪽: Human 말풍선 (스트리밍 텍스트)
         with gr.Column():
             human_bubble = gr.HTML("")
-    # 스트리밍(타이핑 효과)를 시작할 버튼
+    
+    # 타이핑 효과를 시작할 버튼
     start_button = gr.Button("Start Typing")
-    start_button.click(fn=stream_human_message, outputs=human_bubble, stream=True)
+    # 제너레이터 함수를 click 이벤트에 등록 (stream 인자 없이도 제너레이터 함수의 yield가 순차적으로 반영됩니다)
+    start_button.click(fn=stream_human_message, outputs=human_bubble)
 
 demo.launch()
-