Update app.py

app.py

@@ -1,7 +1,7 @@
 import time
 import gradio as gr
 
-# --- 스트리밍 함수: 한 글자씩 출력 (타이핑 효과)
+# 한 글자씩 스트리밍 출력 (타이핑 효과)
 def stream_text(text):
     out = ""
     for ch in text:
@@ -9,54 +9,45 @@ def stream_text(text):
         time.sleep(0.05)  # 글자당 지연 (0.05초)
         yield out
 
-# --- 하단의 원본 문장을 HTML로 생성하는 함수
-# 현재 컷 인덱스(cut_index)보다 앞쪽은 회색으로 표시(이미 잘린 부분),
-# 현재 컷 인덱스 글자에는 ✂️ 이모티콘을 붙여 표시하고, 그 이후의 글자는 기본 스타일로 표시
+# 원본 문장을 HTML로 생성하는 함수
 def get_clickable_html(sentence, cut_index=0):
     html = "<div style='font-size:24px; font-family: monospace;'>"
     for i, ch in enumerate(sentence):
         if i < cut_index:
-            # 이미 잘린 부분은 회색으로 표시하며 클릭 불가
+            # 이미 잘린 부분: 회색 표시
             html += f"<span style='color:gray;'>{ch}</span>"
         elif i == cut_index:
-            # 현재 컷 위치: 파란색과 함께 ✂️ 이모티콘 표시
+            # 현재 컷 위치: 파란색에 ✂️ 이모티콘 표시
             html += f"<span style='cursor:pointer; color:blue;' onclick='handleClick({i})'>{ch}✂️</span>"
         else:
-            # 아직 클릭 가능한 부분: 클릭 시 handleClick(i) 호출
+            # 아직 클릭 가능한 부분
             html += f"<span style='cursor:pointer;' onclick='handleClick({i})'>{ch}</span>"
     html += "</div>"
     return html
 
-# --- HTML에 삽입할 자바스크립트 (숨겨진 Textbox와 Button을 활용)
+# HTML에 삽입할 자바스크립트
 custom_js = """
 <script>
 function handleClick(index) {
-    // 클릭한 글자의 인덱스를 숨겨진 input에 저장한 후,
-    // 숨겨진 버튼을 강제로 클릭해 Python 콜백을 트리거합니다.
     document.getElementById("click_index").value = index;
     document.getElementById("trigger_button").click();
 }
 </script>
 """
 
-# --- "Start" 버튼 클릭 시: 
-# 원본 문장과 현재 컷 인덱스(0)를 상태로 저장하고,
-# 상단에는 스트리밍용 제너레이터를, 하단에는 HTML 표시를 생성합니다.
+# "Start" 버튼 클릭 시 실행되는 함수
 def start_sentence(text):
     current_cut = 0
     clickable = get_clickable_html(text, current_cut) + custom_js
-    # 상단 스트리밍은 전체 문장을 순차적으로 출력
+    # 스트리밍은 전체 문장을 한 글자씩 출력
     return stream_text(text), text, current_cut, clickable
 
-# --- "Restart Streaming" 버튼 클릭 시: 
-# 현재 상태(원본 문장와 현재 컷 인덱스)에서 잘린 후의 문장을 스트리밍으로 출력
+# "Restart Streaming" 버튼 클릭 시 실행되는 함수
 def stream_current(original_sentence, current_cut):
     new_text = original_sentence[current_cut:]
     return stream_text(new_text)
 
-# --- HTML의 특정 글자를 클릭(숨은 버튼을 통해)하면 실행되는 콜백 함수
-# 클릭한 인덱스(index)가 현재 컷 인덱스보다 크면(즉, 아직 잘리지 않은 부분에서 클릭되면)
-# 현재 컷 인덱스를 갱신하고, 하단 HTML 표시를 업데이트합니다.
+# HTML의 특정 글자를 클릭할 때 실행되는 콜백 함수
 def update_cut(index, original_sentence, current_cut):
     index = int(index)
     new_cut = current_cut
@@ -65,19 +56,19 @@ def update_cut(index, original_sentence, current_cut):
     clickable = get_clickable_html(original_sentence, new_cut) + custom_js
     return original_sentence, new_cut, clickable
 
-# --- Gradio 인터페이스 구성
+# Gradio 인터페이스 구성
 with gr.Blocks() as demo:
     with gr.Row():
         inp = gr.Textbox(label="Enter text", placeholder="문장을 입력하세요...")
         start_btn = gr.Button("Start")
     # 상단 스트리밍 텍스트 출력 영역
     stream_box = gr.Textbox(label="Streaming Text", interactive=False)
-    # 현재 상태(잘린 후의 문장)를 스트리밍하는 버튼
+    # 현재 상태의 문장을 다시 스트리밍하는 버튼
     stream_btn = gr.Button("Restart Streaming")
-    # 하단 원본 문장을 HTML로 표시 (각 글자가 클릭 가능)
+    # 하단 원본 문장을 HTML로 표시 (각 글자 클릭 가능)
     clickable_display = gr.HTML(label="Clickable Text")
     
-    # 아래 두 컴포넌트는 HTML 내 JavaScript와 연동하여 사용 (숨김)
+    # HTML 내 자바스크립트와 연동할 숨겨진 컴포넌트들
     click_index = gr.Textbox(visible=False, elem_id="click_index")
     trigger_button = gr.Button("trigger", visible=False, elem_id="trigger_button")
     
@@ -85,26 +76,27 @@ with gr.Blocks() as demo:
     original_sentence_state = gr.State("")
     current_cut_state = gr.State(0)
     
-    # ① "Start" 버튼 클릭 시: 입력 문장을 상태에 저장하고 스트리밍과 하단 HTML을 초기화
+    # ① "Start" 버튼 클릭 시: 입력 문장을 상태에 ���장하고 스트리밍과 하단 HTML 초기화
     start_btn.click(
         start_sentence,
         inputs=inp,
         outputs=[stream_box, original_sentence_state, current_cut_state, clickable_display]
     )
     
-    # ② HTML 내 글자 클릭 → 숨겨진 trigger_button 클릭 시: update_cut 함수 실행
+    # ② HTML 내 글자 클릭 → 숨겨진 버튼 클릭 시: update_cut 함수 실행
     trigger_button.click(
         update_cut,
         inputs=[click_index, original_sentence_state, current_cut_state],
         outputs=[original_sentence_state, current_cut_state, clickable_display]
     )
     
-    # ③ "Restart Streaming" 버튼 클릭 시: 현재 상태의 문장(잘린 후)을 스트리밍
+    # ③ "Restart Streaming" 버튼 클릭 시: 현재 상태(잘린 후의 문장)를 스트리밍
+    # 여기서 stream 인수(stream=True)를 제거합니다.
     stream_btn.click(
         stream_current,
         inputs=[original_sentence_state, current_cut_state],
-        outputs=stream_box,
-        stream=True
+        outputs=stream_box
     )
 
 demo.launch()
+