Update app.py

app.py

@@ -1,63 +1,100 @@
 import time
 import gradio as gr
 import random
+import json
+import os
+import threading
 from datasets import load_dataset
 
-# 1. 데이터셋 로드 및 전역 변수로 저장 (메모리 내에서 업데이트)
-global_data = list(load_dataset("gaeunseo/Taskmaster_sample_data", split="train"))
+# 파일 경로와 동시 접근을 위한 Lock 선언
+DATA_FILE = "global_data.json"
+data_lock = threading.Lock()
+
+def initialize_global_data():
+    """
+    DATA_FILE이 존재하지 않으면, Dataset을 로드하여 파일에 저장합니다.
+    이미 파일이 있으면 파일에서 데이터를 읽어 반환합니다.
+    """
+    if not os.path.exists(DATA_FILE):
+        ds = load_dataset("gaeunseo/Taskmaster_sample_data", split="train")
+        data = list(ds)
+        with data_lock:
+            with open(DATA_FILE, "w", encoding="utf-8") as f:
+                json.dump(data, f, ensure_ascii=False, indent=2)
+        return data
+    else:
+        with data_lock:
+            with open(DATA_FILE, "r", encoding="utf-8") as f:
+                data = json.load(f)
+        return data
+
+def load_global_data():
+    """파일에서 global_data를 읽어옵니다."""
+    with data_lock:
+        with open(DATA_FILE, "r", encoding="utf-8") as f:
+            data = json.load(f)
+    return data
+
+def save_global_data(data):
+    """데이터를 파일에 저장합니다."""
+    with data_lock:
+        with open(DATA_FILE, "w", encoding="utf-8") as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+
+# 파일에 저장된 global_data 초기화
+global_data = initialize_global_data()
 
 def get_random_row_from_dataset():
     """
-    Hugging Face Dataset의 train split에서
-    conversation_id별로 그룹화한 후, 
-    모든 행의 used 컬럼이 False이고, 그룹 내에 overlapping 컬럼이 "TT"인 행이 존재하는 그룹들 중
+    DATA_FILE에 저장된 global_data에서,
+    conversation_id별로 그룹화한 후,
+      - 모든 행의 used 컬럼이 False인 그룹이고,
+      - 그룹 내에 overlapping 컬럼이 "TT"인 행이 존재하는 그룹들 중에서
     랜덤하게 하나의 그룹을 선택하고, 해당 그룹 내에서 overlapping 컬럼이 "TT"인 행을 선택하여 반환합니다.
-    반환 전 해당 행의 used 값을 True로 업데이트합니다.
+    반환 전에 해당 행의 used 값을 True로 업데이트하고 파일에 저장합니다.
     """
     global global_data
-    # conversation_id별로 그룹화
+    global_data = load_global_data()
+    # conversation_id별 그룹화
     conversation_groups = {}
     for row in global_data:
         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 r["used"] for r in group) and any(r["overlapping"] == "TT" for r in group)
     ]
-    
     if not valid_groups:
-        return None  # 유효한 대화 그룹이 없으면 None 반환
-    
-    # 유효한 그룹 중 랜덤하게 하나 선택
+        return None
     chosen_group = random.choice(valid_groups)
-    # 선택된 그룹 내에서 overlapping 컬럼이 "TT"인 행을 선택 (여러 개라면 첫 번째)
+    chosen_row = None
     for row in chosen_group:
         if row["overlapping"] == "TT":
-            row["used"] = True  # 해당 행을 사용함으로 업데이트
-            return row
+            row["used"] = True  # 업데이트
+            chosen_row = row
+            break
+    save_global_data(global_data)
+    return chosen_row
 
-# 2. 초기 대화 가져오기 (human_message, ai_message)
-#    Dataset의 text 컬럼은 "[turn]"을 기준으로 대화가 구분되어 있다고 가정합니다.
+# 초기 대화 불러오기  
 row = get_random_row_from_dataset()
 if row is None:
     human_message = "No valid conversation available."
     ai_message = "No valid conversation available."
-    conversation_id = "none"
 else:
     raw_text = row['text']
+    # text 컬럼은 "[turn]"을 기준으로 대화가 구분되어 있다고 가정합니다.
     human_message = raw_text.split("[turn]")[0].strip()
     ai_message = raw_text.split("[turn]")[1].strip()
-    conversation_id = row['conversation_id']
 
 #############################################
-# 인터페이스 관련 함수 (말풍선, 타이핑 효과, 클릭 편집)
+# 채팅 인터페이스 관련 함수 (말풍선, 타이핑 효과, 편집 기능)
 #############################################
 
 def get_initial_human_html():
     """
-    페이지 로드 시, 빈 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%;">"""
@@ -82,35 +119,37 @@ def stream_human_message():
     emoji_html = "<div class='emoji'>🧑</div>"
     wrapper_end = "</div>"
 
-    # 초기 상태 (빈 말풍선과 이모티콘)
+    # 초기 상태: 빈 말풍선과 이모티콘
     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
-        yield current_html
-        time.sleep(0.05)
+         bubble_content += f"<span data-index='{i}'>{ch}</span>"
+         current_html = wrapper_start + bubble_start + bubble_content + bubble_end + emoji_html + wrapper_end
+         yield current_html
+         time.sleep(0.05)
 
 def submit_edit(edited_text):
     """
     Submit 버튼 클릭 시 호출되는 함수.
     1. 편집된 human 메시지(✂️ 앞부분)를 새 행으로 global_data에 추가합니다.
-    2. get_random_row_from_dataset() 함수를 통해 새로운 대화(row)를 가져오고,
-       전역 변수 human_message와 ai_message를 업데이트합니다.
-    3. 초기 상태의 human 말풍선 HTML과 ai 말풍선 HTML을 반환하여 인터페이스를 리셋합니다.
+    2. get_random_row_from_dataset()을 통해 새로운 대화를 가져오고, 전역 변수 human_message와 ai_message를 업데이트합니다.
+    3. 초기 상태의 human 말풍선와 ai 말풍선 HTML을 반환하여 인터페이스를 리셋합니다.
     """
-    global global_data, human_message, ai_message, conversation_id
-    # 새 행 생성 (새로운 conversation_id는 임의 생성)
+    global global_data, human_message, ai_message
+    # 새 행 생성 (새 conversation_id는 임의로 생성)
     new_row = {
-         "conversation_id": conversation_id,
-         "overlapping": "I1",
-         "text": f"{edited_text}[turn]\n{ai_message}",
+         "conversation_id": "edited_" + str(random.randint(1000,9999)),
          "used": False,
+         "overlapping": "",
+         "text": edited_text,
+         "human_message": edited_text,
+         "ai_message": ""
     }
+    global_data = load_global_data()
     global_data.append(new_row)
+    save_global_data(global_data)
     
-    # 새로운 대화 행을 가져옴 (이전에 사용되지 않은 대화)
     new_row_data = get_random_row_from_dataset()
     if new_row_data is None:
          human_message = "No valid conversation available."
@@ -120,7 +159,6 @@ def submit_edit(edited_text):
          human_message = raw_text.split("[turn]")[0].strip()
          ai_message = raw_text.split("[turn]")[1].strip()
     
-    # 새로 업데이트된 말풍선 HTML 반환 (human은 빈 상태, ai는 새 메시지)
     new_human_html = get_initial_human_html()
     new_ai_html = f"""
         <div class="ai-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-start; gap: 5px; width: 100%;">
@@ -130,34 +168,34 @@ def submit_edit(edited_text):
     """
     return new_human_html, new_ai_html
 
+def download_global_data():
+    """
+    Download Data 버튼 클릭 시, global_data.json 파일의 경로를 반환하여 다운로드할 수 있도록 합니다.
+    """
+    return DATA_FILE
+
 #############################################
 # Gradio 인터페이스 구성
 #############################################
 
 with gr.Blocks() as demo:
-    # (A) 페이지 상단에 단 한 번 로드될 스크립트:
-    #     - Human 말풍선 내의 <span data-index="...">를 클릭하면 ✂️ 이모티콘이 해당 위치에 삽입되고,
-    #       클릭한 위치 이후의 텍스트 색상이 회색으로 변경됩니다.
+    # (A) 페이지 상단 스크립트: Human 말풍선 내의 각 <span data-index="...">를 클릭하면,
+    #     해당 위치에 ✂️ 아이콘이 삽입되고, 그 이후 텍스트가 회색으로 변경됩니다.
     gr.HTML(
         """
         <script>
         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;
                 var container = span.closest("div.speech-bubble.human");
-                // 기존의 ✂️ 이모티콘(클래스 "scissor") 제거
                 var oldScissors = container.querySelectorAll("span.scissor");
                 oldScissors.forEach(function(s) { s.remove(); });
-                // 모든 span 색상 초기화
                 var spans = container.querySelectorAll("span[data-index]");
                 spans.forEach(function(s) { s.style.color = ''; });
-                // 클릭한 span 바로 뒤에 ✂️ 아이콘 삽입
                 var scissor = document.createElement('span');
                 scissor.textContent = '✂️';
                 scissor.classList.add("scissor");
                 container.insertBefore(scissor, span.nextSibling);
-                // 클릭한 span 이후의 모든 span 텍스트 색상을 회색으로 변경
                 var cutIndex = parseInt(span.getAttribute("data-index"));
                 spans.forEach(function(s) {
                     var idx = parseInt(s.getAttribute("data-index"));
@@ -171,20 +209,16 @@ with gr.Blocks() as demo:
         """
     )
     
-    # (B) 추가 스크립트:
-    #     - Submit 버튼 클릭 시, human_message div의 innerText에서 "✂️"를 기준으로 편집된 텍스트(앞부분)를
-    #       숨김 텍스트박스(edited_text_input)에 업데이트합니다.
+    # (B) 추가 스크립트: Submit 버튼 클릭 시, human_message div의 innerText에서 "✂️"를 기준으로 편집된 텍스트(앞부분)를 숨김 텍스트박스에 업데이트
     gr.HTML(
         """
         <script>
-        // DOMContentLoaded 이벤트 이후에 버튼 요소가 준비되었을 때 이벤트 리스너 등록
         document.addEventListener("DOMContentLoaded", function() {
             var submitBtn = document.getElementById("submit_btn");
             if(submitBtn){
                 submitBtn.addEventListener("click", function(){
                     var humanDiv = document.getElementById("human_message");
                     if(humanDiv){
-                        // innerText에서 "✂️"를 기준으로 앞부분 추출
                         var edited_text = humanDiv.innerText.split("✂️")[0];
                         document.getElementById("edited_text_input").value = edited_text;
                     }
@@ -199,14 +233,12 @@ with gr.Blocks() as demo:
     gr.HTML(
         """
         <style>
-        /* 전체 채팅 영역 */
         .chat-container {
           display: flex;
           flex-direction: column;
           gap: 10px;
           width: 100%;
         }
-        /* 공통 말풍선 스타일 */
         .speech-bubble {
           position: relative;
           padding: 10px 15px;
@@ -216,7 +248,6 @@ with gr.Blocks() as demo:
           font-size: 16px;
           line-height: 1.4;
         }
-        /* Human 말풍선 (오른쪽 정렬, 초록 배경) */
         .human {
           background: #d0f0d0;
           margin-right: 10px;
@@ -230,7 +261,6 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent transparent transparent #d0f0d0;
         }
-        /* AI 말풍선 (왼쪽 정렬, 회색 배경) */
         .ai {
           background: #e0e0e0;
           margin-left: 10px;
@@ -244,7 +274,6 @@ with gr.Blocks() as demo:
           border-style: solid;
           border-color: transparent #e0e0e0 transparent transparent;
         }
-        /* 이모티콘 스타일 */
         .emoji {
           font-size: 24px;
           line-height: 1;
@@ -256,9 +285,9 @@ with gr.Blocks() as demo:
     gr.Markdown("## Chat Interface")
     
     with gr.Column(elem_classes="chat-container"):
-        # Human 말풍선 (초기: 빈 메시지와 🧑 이모티콘)
+        # Human 말풍선 (초기: 빈 메시지 + 🧑 이모티콘)
         human_bubble = gr.HTML(get_initial_human_html())
-        # AI 말풍선 (왼쪽에 🤖 이모티콘과 함께 고정 메시지)
+        # AI 말풍선 (왼쪽: 🤖 이모티콘 + 메시지)
         ai_html = f"""
         <div class="ai-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-start; gap: 5px; width: 100%;">
           <div class="emoji">🤖</div>
@@ -267,20 +296,18 @@ with gr.Blocks() as demo:
         """
         ai_bubble = gr.HTML(ai_html)
     
-    # (D) 숨김 텍스트박스: 편집된 텍스트(✂️ 앞부분)를 저장 (visible=False)
+    # 숨김 텍스트박스 (편집된 텍스트 저장용)
     edited_text_input = gr.Textbox(visible=False, elem_id="edited_text_input")
     
-    # (E) 버튼 영역: Start Typing과 Submit 버튼을 같은 행에 배치
+    # 버튼 영역: Start Typing, Submit, Download Data 버튼을 같은 행에 배치
     with gr.Row():
         start_button = gr.Button("Start Typing")
-        # Submit 버튼에 elem_id "submit_btn"을 부여하여 JS에서 참조합니다.
         submit_button = gr.Button("Submit", elem_id="submit_btn")
+        download_button = gr.Button("Download Data")
     
-    # Start Typing 버튼: human_message 스트리밍 시작 (타이핑 효과)
+    # 버튼 이벤트 연결
     start_button.click(fn=stream_human_message, outputs=human_bubble)
-    
-    # Submit 버튼: hidden edited_text_input 값을 입력받아 submit_edit 함수 호출 → 새로운 대화로 업데이트
     submit_button.click(fn=submit_edit, inputs=edited_text_input, outputs=[human_bubble, ai_bubble])
-
+    download_button.click(fn=download_global_data, outputs=[], show_progress=False)
+    
 demo.launch()
-