Update app.py

app.py

@@ -11,21 +11,22 @@ DATA_FILE = "global_data.csv"
 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 = ds.to_pandas()
-        if "used" not in data.columns:
-            data["used"] = False
-        if "overlapping" not in data.columns:
-            data["overlapping"] = ""
-        if "text" not in data.columns:
-            data["text"] = ""
-        data.to_csv(DATA_FILE, index=False)
+        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:
-            df = pd.read_csv(DATA_FILE)
-        return df
+            with open(DATA_FILE, "r", encoding="utf-8") as f:
+                data = json.load(f)
+        return data
 
 def load_global_data():
     with data_lock:
@@ -39,23 +40,37 @@ def save_global_data(df):
 global_data = initialize_global_data()
 
 def get_random_row_from_dataset():
+    """
+    DATA_FILE에 저장된 global_data에서,
+    conversation_id별로 그룹화한 후,
+      - 모든 행의 used 컬럼이 False인 그룹이고,
+      - 그룹 내에 overlapping 컬럼이 "TT"인 행이 존재하는 그룹들 중에서
+    랜덤하게 하나의 그룹을 선택하고, 해당 그룹 내에서 overlapping 컬럼이 "TT"인 행을 선택하여 반환합니다.
+    반환 전에 해당 행의 used 값을 True로 업데이트하고 파일에 저장합니다.
+    """
     global global_data
-    global_data = load_global_data()  # 최신 데이터 로드
-    groups = global_data.groupby('conversation_id')
-    valid_groups = []
-    for cid, group in groups:
-        if group['used'].apply(lambda x: bool(x) == False).all() and (group['overlapping'] == "TT").any():
-            valid_groups.append((cid, group))
+    global_data = load_global_data()
+    # conversation_id별 그룹화
+    conversation_groups = {}
+    for row in global_data:
+        cid = row["conversation_id"]
+        conversation_groups.setdefault(cid, []).append(row)
+    # 조건에 맞는 그룹 필터링
+    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
-    chosen_cid, chosen_group = random.choice(valid_groups)
-    global_data.loc[global_data['conversation_id'] == chosen_cid, 'used'] = True
+    chosen_group = random.choice(valid_groups)
+    chosen_row = None
+    for row in chosen_group:
+        if row["overlapping"] == "TT":
+            row["used"] = True  # 업데이트
+            chosen_row = row
+            break
     save_global_data(global_data)
-    chosen_rows = chosen_group[chosen_group['overlapping'] == "TT"]
-    if chosen_rows.empty:
-        return None
-    chosen_row = chosen_rows.iloc[0]
-    return chosen_row.to_dict()
+    return chosen_row
 
 row = get_random_row_from_dataset()
 if row is None:
@@ -71,6 +86,9 @@ else:
 #############################################
 
 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%;">"""
     )
@@ -81,6 +99,10 @@ def get_initial_human_html():
     return wrapper_start + bubble_start + bubble_end + emoji_html + wrapper_end
 
 def stream_human_message():
+    """
+    Start Typing 버튼 클릭 시, 전역 변수 human_message의 내용을 한 글자씩 타이핑 효과로 출력.
+    이전 상태(✂️ 아이콘, 회색 처리 등)는 리셋됩니다.
+    """
     bubble_content = ""
     wrapper_start = (
         """<div class="human-wrapper" style="display: flex; align-items: flex-end; justify-content: flex-end; gap: 5px; width: 100%;">"""
@@ -90,10 +112,10 @@ def stream_human_message():
     emoji_html = "<div class='emoji'>🧑</div>"
     wrapper_end = "</div>"
 
-    # 초기 상태
+    # 초기 상태: 빈 말풍선과 이모티콘
     yield wrapper_start + bubble_start + bubble_end + emoji_html + wrapper_end
 
-    # 한 글자씩 타이핑 효과 적용
+    # 한 글자씩 추가 (타이핑 효과)
     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
@@ -101,19 +123,25 @@ def stream_human_message():
          time.sleep(0.05)
 
 def submit_edit(edited_text):
-    global human_message, ai_message
-    data = load_global_data()
+    """
+    Submit 버튼 클릭 시 호출되는 함수.
+    1. 편집된 human 메시지(✂️ 앞부분)를 새 행으로 global_data에 추가합니다.
+    2. get_random_row_from_dataset()을 통해 새로운 대화를 가져오고, 전역 변수 human_message와 ai_message를 업데이트합니다.
+    3. 초기 상태의 human 말풍선와 ai 말풍선 HTML을 반환하여 인터페이스를 리셋합니다.
+    """
+    global global_data, human_message, ai_message
+    # 새 행 생성 (새 conversation_id는 임의로 생성)
     new_row = {
-         "conversation_id": "edited_" + str(random.randint(1000, 9999)),
+         "conversation_id": "edited_" + str(random.randint(1000,9999)),
          "used": False,
          "overlapping": "",
          "text": edited_text,
          "human_message": edited_text,
          "ai_message": ""
     }
-    new_df = pd.DataFrame([new_row])
-    data = pd.concat([data, new_df], ignore_index=True)
-    save_global_data(data)
+    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:
@@ -143,22 +171,17 @@ with gr.Blocks() as demo:
         """
         <script>
         document.addEventListener("click", function(event) {
-            // human 메시지의 span을 클릭하면 처리
             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");
-                // 이전에 추가된 ✂️ 아이콘 제거
                 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의 data-index를 기준으로 그 뒤 텍스트 회색 처리
                 var cutIndex = parseInt(span.getAttribute("data-index"));
                 spans.forEach(function(s) {
                     var idx = parseInt(s.getAttribute("data-index"));
@@ -166,20 +189,31 @@ with gr.Blocks() as demo:
                         s.style.color = "grey";
                     }
                 });
-                // 여기서 바로 human 메시지에서 ✂️ 이전 텍스트를 hidden input에 업데이트
-                var edited_text = container.innerText.split("✂️")[0];
-                var hiddenInput = document.getElementById("edited_text_input");
-                if(hiddenInput) {
-                    hiddenInput.value = edited_text;
-                }
             }
         });
         </script>
         """
     )
     
-    # (B) 더 이상 submit 클릭 시 별도의 스크립트로 업데이트할 필요 없음
-    # 원래 있던 DOMContentLoaded 스크립트는 제거합니다.
+    # (B) 추가 스크립트: Submit 버튼 클릭 시, human_message div의 innerText에서 "✂️"를 기준으로 편집된 텍스트(앞부분)를 숨김 텍스트박스에 업데이트
+    gr.HTML(
+        """
+        <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            var submitBtn = document.getElementById("submit_btn");
+            if(submitBtn){
+                submitBtn.addEventListener("click", function(){
+                    var humanDiv = document.getElementById("human_message");
+                    if(humanDiv){
+                        var edited_text = humanDiv.innerText.split("✂️")[0];
+                        document.getElementById("edited_text_input").value = edited_text;
+                    }
+                });
+            }
+        });
+        </script>
+        """
+    )
     
     # (C) CSS 스타일
     gr.HTML(