Update app.py

app.py

@@ -1,33 +1,85 @@
 import time
 import gradio as gr
+import random
+from datasets import load_dataset
 
-# 메시지 내용 설정
-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?"
+def get_random_row_from_dataset():
+    """
+    Hugging Face Dataset repository 'gaeunseo/Taskmaster_sample_data'의 train split에서
+    conversation_id별로 그룹화한 후, 같은 conversation_id를 가진 모든 행들의 used 컬럼이 False이고,
+    그 그룹 내에 overlapping 컬럼이 "TT"인 행이 존재하는 그룹들 중에서 랜덤하게 하나의 그룹을 선택하고,
+    해당 그룹 내에서 overlapping 컬럼이 "TT"인 행을 선택하여 반환합니다.
+    """
+    # 데이터셋 로드 (split 이름은 상황에 맞게 조정)
+    ds = load_dataset("gaeunseo/Taskmaster_sample_data", split="train")
+    
+    # conversation_id별로 행들을 그룹화
+    conversation_groups = {}
+    for row in ds:
+        cid = row["conversation_id"]
+        conversation_groups.setdefault(cid, []).append(row)
+    
+    # 모든 행들의 used 컬럼이 False이고, 그룹 내에 overlapping 컬럼이 "TT"인 행이 존재하는 그룹만 필터링
+    valid_groups = [
+        group for group in conversation_groups.values() 
+        if all(not row["used"] for row in group) and any(row["overlapping"] == "TT" for row in group)
+    ]
+    
+    if not valid_groups:
+        return None  # 유효한 대화 그룹이 없으면 None 반환
+    
+    # 유효한 그룹 중 랜덤하게 하나 선택
+    chosen_group = random.choice(valid_groups)
+    # 선택된 그룹 내에서 overlapping 컬럼이 "TT"인 행을 선택 (여러 개라면 첫 번째 것을 사용)
+    for row in chosen_group:
+        if row["overlapping"] == "TT":
+            return text
+
+# 데이터셋에서 하나의 행을 가져와서 human_message와 ai_message에 할당
+row = get_random_row_from_dataset()
+if row is None:
+    human_message = "No valid conversation available."
+    ai_message = "No valid conversation available."
+else:
+    raw_text = row['text']
+    human_message = raw_text.split("[turn]")[0].strip()
+    ai_message = raw_text.split("[turn]")[1].strip()
+
+#############################################
+# 이후 아래는 기존 채팅 인터페이스 코드 (말풍선, 이모티콘, 타이핑 효과, 클릭 인터랙션) 입니다.
+#############################################
+
+def get_initial_human_html():
+    """
+    페이지 로드 시 Human 말풍선(빈 내용)과 오른쪽에 🧑 이모티콘이 보이도록 초기 HTML 반환
+    """
+    wrapper_start = (
+        """<div class="human-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-end; gap: 5px; width: 100%;">"""
+    )
+    bubble_start = """<div id="human_message" class="speech-bubble human">"""
+    bubble_end = "</div>"
+    emoji_html = "<div class='emoji'>🧑</div>"
+    wrapper_end = "</div>"
+    return wrapper_start + bubble_start + bubble_end + emoji_html + wrapper_end
 
 def stream_human_message():
     """
-    Human 메시지를 한 글자씩 타이핑 효과로 스트리밍하면서,
-    오른쪽에 🧑 이모티콘이 있는 wrapper 안에 말풍선을 구성합니다.
-    Start Typing을 누르면 이전 상태가 리셋됩니다.
+    Start Typing 버튼 클릭 시 human_message를 한 글자씩 타이핑 효과로 출력.
+    이전 상태(✂️ 아이콘, 회색 처리 등)는 리셋됩니다.
     """
     bubble_content = ""
-    # wrapper 시작: 전체 너비를 채우고, 오른쪽 정렬하는 flex 컨테이너
     wrapper_start = (
         """<div class="human-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-end; gap: 5px; width: 100%;">"""
     )
-    # 말풍선 컨테이너 시작
     bubble_start = """<div id="human_message" class="speech-bubble human">"""
     bubble_end = "</div>"
-    # 오른쪽에 고정될 이모티콘
     emoji_html = "<div class='emoji'>🧑</div>"
     wrapper_end = "</div>"
-    
-    # 초기 빈 말풍선과 이모티콘 출력
-    html = wrapper_start + bubble_start + bubble_end + emoji_html + wrapper_end
-    yield html
 
-    # 한 글자씩 추가하여 streaming 업데이트
+    # 초기 상태 (빈 말풍선과 이모티콘)
+    yield wrapper_start + bubble_start + bubble_end + emoji_html + wrapper_end
+
+    # human_message를 한 글자씩 추가 (타이핑 효과)
     for i, ch in enumerate(human_message):
          bubble_content += f"<span data-index='{i}'>{ch}</span>"
          current_html = wrapper_start + bubble_start + bubble_content + bubble_end + emoji_html + wrapper_end
@@ -35,23 +87,24 @@ def stream_human_message():
          time.sleep(0.05)
 
 with gr.Blocks() as demo:
-    # 전역적으로 한 번만 로드되는 스크립트: 이벤트 위임으로 동적으로 추가되는 span의 클릭 이벤트 처리
+    # 페이지 상단에 단 한 번 로드될 스크립트:
+    # - Human 말풍선 내의 ��� <span data-index="...">를 클릭하면 ✂️ 이모티콘이 해당 위치에 삽입되고,
+    #   그 이후의 텍스트 색상이 회색으로 변경되도록 이벤트 위임 방식으로 처리합니다.
     gr.HTML(
         """
         <script>
-        // human 말풍선 내부의 span[data-index]에 대해 클릭 이벤트 처리
         document.addEventListener("click", function(event) {
+            // Human 말풍선 내의 <span data-index="...">가 클릭되었을 때만 처리
             if (event.target && event.target.matches("div.speech-bubble.human span[data-index]")) {
                 var span = event.target;
-                // 가장 가까운 human 말풍선 컨테이너 선택
                 var container = span.closest("div.speech-bubble.human");
                 // 기존에 삽입된 ✂️ 이모티콘(클래스 "scissor") 제거
                 var oldScissors = container.querySelectorAll("span.scissor");
                 oldScissors.forEach(function(s) { s.remove(); });
-                // 모든 span의 색상을 원래 색으로 초기화
+                // 모든 span의 색상을 초기화
                 var spans = container.querySelectorAll("span[data-index]");
                 spans.forEach(function(s) { s.style.color = ''; });
-                // 클릭한 span 바로 뒤에 ✂️ 이모티콘 삽입
+                // 클릭한 span 바로 뒤에 ✂️ 아이콘 삽입
                 var scissor = document.createElement('span');
                 scissor.textContent = '✂️';
                 scissor.classList.add("scissor");
@@ -70,18 +123,18 @@ with gr.Blocks() as demo:
         """
     )
     
-    # CSS 스타일 적용
+    # CSS 스타일 (말풍선 모양, 이모티콘, 위치 등)
     gr.HTML(
         """
         <style>
-        /* 전체 채팅 영역: 세로 배치 및 간격 확보 */
+        /* 전체 채팅 영역 */
         .chat-container {
           display: flex;
           flex-direction: column;
           gap: 10px;
           width: 100%;
         }
-        /* 말풍선 기본 스타일 */
+        /* 공통 말풍선 스타일 */
         .speech-bubble {
           position: relative;
           padding: 10px 15px;
@@ -91,12 +144,11 @@ with gr.Blocks() as demo:
           font-size: 16px;
           line-height: 1.4;
         }
-        /* Human 말풍선: 배경색 및 오른쪽에 배치 (wrapper에서 정렬) */
+        /* Human 말풍선 (오른쪽 정렬, 초록 배경) */
         .human {
           background: #d0f0d0;
           margin-right: 10px;
         }
-        /* Human 말풍선의 꼬리 (오른쪽) */
         .human::after {
           content: "";
           position: absolute;
@@ -106,12 +158,11 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent transparent transparent #d0f0d0;
         }
-        /* AI 말풍선: 배경색 및 왼쪽에 배치 (wrapper에서 정렬) */
+        /* AI 말풍선 (왼쪽 정렬, 회색 배경) */
         .ai {
           background: #e0e0e0;
           margin-left: 10px;
         }
-        /* AI 말풍선의 꼬리 (왼쪽) */
         .ai::after {
           content: "";
           position: absolute;
@@ -121,7 +172,7 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent #e0e0e0 transparent transparent;
         }
-        /* Emoji 아이콘 스타일 */
+        /* 이모티콘 스타일 */
         .emoji {
           font-size: 24px;
           line-height: 1;
@@ -133,9 +184,10 @@ with gr.Blocks() as demo:
     gr.Markdown("## Chat Interface")
     
     with gr.Column(elem_classes="chat-container"):
-        # Human 메시지 (위쪽, streaming)
-        human_bubble = gr.HTML("")
-        # AI 메시지 (아래쪽, 고정) - 왼쪽에 🤖 이모티콘을 추가하는 wrapper 사용
+        # 페이지 로드 시 Human 말풍선(빈 메시지)과 오른쪽 🧑 이모티콘이 보이도록 초기 HTML 적용
+        human_bubble = gr.HTML(get_initial_human_html())
+        
+        # AI 말풍선: 왼쪽에 🤖 이모티콘과 함께 고정 메시지 출력
         ai_html = """
         <div class="ai-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-start; gap: 5px; width: 100%;">
           <div class="emoji">🤖</div>
@@ -144,7 +196,9 @@ with gr.Blocks() as demo:
         """
         ai_bubble = gr.HTML(ai_html)
     
+    # Start Typing 버튼을 누르면 human_message가 스트리밍(타이핑 효과)되며, 이전에 있던 ✂️/회색 처리 등은 리셋됩니다.
     start_button = gr.Button("Start Typing")
     start_button.click(fn=stream_human_message, outputs=human_bubble)
 
 demo.launch()
+