Create app.py

app.py

@@ -0,0 +1,110 @@
+import time
+import gradio as gr
+
+# --- 스트리밍 함수: 한 글자씩 출력 (타이핑 효과)
+def stream_text(text):
+    out = ""
+    for ch in text:
+        out += ch
+        time.sleep(0.05)  # 글자당 지연 (0.05초)
+        yield out
+
+# --- 하단의 원본 문장을 HTML로 생성하는 함수
+# 현재 컷 인덱스(cut_index)보다 앞쪽은 회색으로 표시(이미 잘린 부분),
+# 현재 컷 인덱스 글자에는 ✂️ 이모티콘을 붙여 표시하고, 그 이후의 글자는 기본 스타일로 표시
+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을 활용)
+custom_js = """
+<script>
+function handleClick(index) {
+    // 클릭한 글자의 인덱스를 숨겨진 input에 저장한 후,
+    // 숨겨진 버튼을 강제로 클릭해 Python 콜백을 트리거합니다.
+    document.getElementById("click_index").value = index;
+    document.getElementById("trigger_button").click();
+}
+</script>
+"""
+
+# --- "Start" 버튼 클릭 시: 
+# 원본 문장과 현재 컷 인덱스(0)를 상태로 저장하고,
+# 상단에는 스트리밍용 제너레이터를, 하단에는 HTML 표시를 생성합니다.
+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" 버튼 클릭 시: 
+# 현재 상태(원본 문장와 현재 컷 인덱스)에서 잘린 후의 문장을 스트리밍으로 출력
+def stream_current(original_sentence, current_cut):
+    new_text = original_sentence[current_cut:]
+    return stream_text(new_text)
+
+# --- HTML의 특정 글자를 클릭(숨은 버튼을 통해)하면 실행되는 콜백 함수
+# 클릭한 인덱스(index)가 현재 컷 인덱스보다 크면(즉, 아직 잘리지 않은 부분에서 클릭되면)
+# 현재 컷 인덱스를 갱신하고, 하단 HTML 표시를 업데이트합니다.
+def update_cut(index, original_sentence, current_cut):
+    index = int(index)
+    new_cut = current_cut
+    if index > current_cut:
+        new_cut = index
+    clickable = get_clickable_html(original_sentence, new_cut) + custom_js
+    return original_sentence, new_cut, clickable
+
+# --- 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로 표시 (각 글자가 클릭 가능)
+    clickable_display = gr.HTML(label="Clickable Text")
+    
+    # 아래 두 컴포넌트는 HTML 내 JavaScript와 연동하여 사용 (숨김)
+    click_index = gr.Textbox(visible=False, elem_id="click_index")
+    trigger_button = gr.Button("trigger", visible=False, elem_id="trigger_button")
+    
+    # 원본 문장과 현재 컷 인덱스를 상태로 저장
+    original_sentence_state = gr.State("")
+    current_cut_state = gr.State(0)
+    
+    # ① "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 함수 실행
+    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" 버튼 클릭 시: 현재 상태의 문장(잘린 후)을 스트리밍
+    stream_btn.click(
+        stream_current,
+        inputs=[original_sentence_state, current_cut_state],
+        outputs=stream_box,
+        stream=True
+    )
+
+demo.launch()