Update app.py

app.py

@@ -1,102 +1,76 @@
-import time
 import gradio as gr
+import time
 
-# 한 글자씩 스트리밍 출력 (타이핑 효과)
-def stream_text(text):
-    out = ""
-    for ch in text:
-        out += ch
-        time.sleep(0.05)  # 글자당 지연 (0.05초)
-        yield out
+# 메시지 내용 설정
+human_message = "Hello. I'd like to find a round trip commercial airline flight from San Francisco to Denver."
+ai_message = "Hello, how can I help you?"
 
-# 원본 문장을 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:
-            # 아직 클릭 가능한 부분
-            html += f"<span style='cursor:pointer;' onclick='handleClick({i})'>{ch}</span>"
+def stream_human_message():
+    """
+    Human의 메시지를 문자 단위로 타이핑하는 것처럼 스트리밍합니다.
+    각 문자는 <span> 태그로 감싸서 onclick 이벤트로 사용자가 클릭할 수 있도록 합니다.
+    클릭 시 JavaScript 함수 handleClick()가 호출되어,
+    해당 문자의 바로 뒤에 ✂️ 이모티콘을 삽입하고 그 뒤의 문자들은 회색으로 표시됩니다.
+    """
+    # 클릭 이벤트 처리를 위한 JavaScript 코드.
+    # (페이지에 단 한 번만 로드되도록 window.cutDone 플래그로 중복 실행을 방지합니다.)
+    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 메시지를 감싸는 HTML 컨테이너 시작 (오른쪽 정렬, 배경 및 테두리 스타일)
+    html = script + (
+        "<div id='human_message' "
+        "style='text-align: right; background-color: #d0f0d0; padding: 10px; "
+        "border-radius: 10px; display: inline-block;'>"
+    )
+    # 초기 상태: 아직 내용이 없을 때
+    yield html
+    # 문자 하나씩 <span> 태그로 추가하면서 스트리밍 효과를 줍니다.
+    for i, ch in enumerate(human_message):
+        html += f"<span data-index='{i}' onclick='handleClick(this)'>{ch}</span>"
+        yield html
+        time.sleep(0.05)  # 타이핑 효과를 위한 딜레이 (0.05초)
+    # 컨테이너 종료 태그 추가
     html += "</div>"
-    return html
-
-# HTML에 삽입할 자바스크립트
-custom_js = """
-<script>
-function handleClick(index) {
-    document.getElementById("click_index").value = index;
-    document.getElementById("trigger_button").click();
-}
-</script>
-"""
-
-# "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" 버튼 클릭 시 실행되는 함수
-def stream_current(original_sentence, current_cut):
-    new_text = original_sentence[current_cut:]
-    return stream_text(new_text)
-
-# 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
+    yield html
 
 # Gradio 인터페이스 구성
 with gr.Blocks() as demo:
+    gr.Markdown("## Chat Interface")
     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 내 자바스크립트와 연동할 숨겨진 컴포넌트들
-    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 내 글자 클릭 → 숨겨진 버튼 클릭 시: 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 인수(stream=True)를 제거합니다.
-    stream_btn.click(
-        stream_current,
-        inputs=[original_sentence_state, current_cut_state],
-        outputs=stream_box
-    )
+        # 왼쪽: AI 말풍선 (고정 텍스트)
+        with gr.Column():
+            ai_bubble = gr.HTML(
+                f"<div style='text-align: left; background-color: #e0e0e0; padding: 10px; "
+                "border-radius: 10px; display: inline-block;'>"
+                f"{ai_message}"
+                "</div>"
+            )
+        # 오른쪽: 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)
 
 demo.launch()