Update app.py

app.py

@@ -9,18 +9,13 @@ HF_TOKEN = os.getenv("HF_TOKEN")
 
 api = HfApi(token=HF_TOKEN)
 
-# --- 자연어 정렬 함수 (mymuse2가 mymuse10보다 앞에 오도록 설정) ---
 def natural_sort_key(s):
     return [int(text) if text.isdigit() else text.lower() for text in re.split(r'(\d+)', s)]
 
 def get_lora_samples(sort_desc=False):
-    """데이터셋에서 이미지를 가져와 자연어 기준으로 정렬합니다."""
     try:
-        # 캐시를 방지하고 최신 목록을 가져오기 위해 list_repo_files 호출
         files = api.list_repo_files(repo_id=REPO_ID, repo_type=REPO_TYPE)
         samples = [f for f in files if f.startswith("LoRA_Samples/") and f.lower().endswith(('.png', '.jpg', '.jpeg'))]
-        
-        # 파일명 기준 정렬 실행
         samples.sort(key=lambda x: natural_sort_key(os.path.basename(x)), reverse=sort_desc)
         return samples
     except Exception as e:
@@ -28,20 +23,33 @@ def get_lora_samples(sort_desc=False):
         return []
 
 def update_gallery_data(sort_desc=False):
-    """버튼 클릭 시 갤러리 데이터와 상태 값을 동적으로 갱신하기 위한 래퍼 함수"""
     paths = get_lora_samples(sort_desc=sort_desc)
     gallery_val = [(hf_hub_url(repo_id=REPO_ID, repo_type=REPO_TYPE, filename=p), os.path.splitext(os.path.basename(p))[0]) for p in paths]
     return gallery_val, paths
 
 def generate_download_links(image_path):
     if not image_path:
-        return "<div style='color: #94a3b8; text-align: center; margin-top: 120px;'>왼쪽 목록에서 로라 카드를 클릭하면<br>버전별 상태 정보 및 다운로드 창이 활성화됩니다.</div>"
+        return "<div style='color: #94a3b8; text-align: center; margin-top: 140px; font-size: 15px;'>왼쪽 목록에서 로라 카드를 클릭하면<br>버전별 상태 정보 및 다운로드 창이 활성화됩니다.</div>"
     
     filename = os.path.splitext(os.path.basename(image_path))[0]
+    img_url = hf_hub_url(repo_id=REPO_ID, repo_type=REPO_TYPE, filename=image_path)
     target_folders = ["Qwen2509", "Qwen2512", "Zit"]
     
-    html_output = f"<h3 style='margin-top:0; font-size: 18px; color: #1e293b;'>📦 {filename} LoRA 다운로드 링크</h3>"
-    html_output += "<table class='download-table'><thead><tr><th>버전 / 폴더</th><th>다운로드 링크</th></tr></thead><tbody>"
+    # 1. 상단 이미지 배치 및 2. 하단 텍스트 내용 유기적 결합 (HTML 레이아웃)
+    html_output = f"""
+    <div style='display: flex; flex-direction: column; align-items: center; gap: 20px;'>
+        <div style='width: 100%; max-width: 280px; aspect-ratio: 3/4; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);'>
+            <img src='{img_url}' style='width: 100%; height: 100%; object-fit: cover;' alt='{filename} preview'/>
+        </div>
+        
+        <div style='width: 100%;'>
+            <h3 style='margin: 10px 0 5px 0; font-size: 18px; color: #1e293b; display: flex; align-items: center; gap: 6px;'>📦 {filename} LoRA 다운로드 링크</h3>
+            <table class='download-table'>
+                <thead>
+                    <tr><th>버전 / 폴더</th><th>다운로드 링크</th></tr>
+                </thead>
+                <tbody>
+    """
     
     all_files = api.list_repo_files(repo_id=REPO_ID, repo_type=REPO_TYPE)
     
@@ -55,7 +63,12 @@ def generate_download_links(image_path):
         else:
             html_output += f"<tr><td><b>{folder}</b></td><td style='color: #ef4444;'>파일 없음</td></tr>"
             
-    html_output += "</tbody></table>"
+    html_output += """
+                </tbody>
+            </table>
+        </div>
+    </div>
+    """
     return html_output
 
 # --- 스타일시트 ---
@@ -63,18 +76,16 @@ custom_css = """
 body, .gradio-container { background-color: #f4f6f9 !important; font-family: sans-serif !important; }
 #lora-gallery { background: transparent !important; border: none !important; box-shadow: none !important; }
 #lora-gallery .gallery-item { background: #ffffff !important; border-radius: 12px !important; border: 1px solid #e2e8f0 !important; padding: 14px !important; }
-#info-panel { background: #ffffff !important; border-radius: 16px !important; border: 1px solid #e2e8f0 !important; padding: 24px !important; min-height: 450px; }
+#info-panel { background: #ffffff !important; border-radius: 16px !important; border: 1px solid #e2e8f0 !important; padding: 24px !important; min-height: 500px; }
 .download-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 15px; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
 .download-table th { background-color: #f8fafc; color: #64748b; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid #e2e8f0; }
 .download-table td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid #e2e8f0; color: #334155; }
 .btn-download { color: #2563eb !important; font-weight: 600; text-decoration: none; }
 .btn-download:hover { text-decoration: underline; }
-/* 버튼 스타일 커스텀 */
 .nav-btn { font-weight: 600 !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; }
 """
 
 with ui.Blocks(css=custom_css) as demo:
-    # 타이틀 영역과 우측 버튼 단축 라인을 일렬 배치하기 위한 상단 툴바 구성
     with ui.Row():
         ui.Markdown("# ✨ mymuse LoRA Management Center")
         with ui.Row(elem_id="action-bar"):
@@ -85,7 +96,6 @@ with ui.Blocks(css=custom_css) as demo:
     with ui.Row():
         # 왼쪽 그리드 영역
         with ui.Column(scale=2):
-            # 초기 데이터 로드 (오름차순)
             initial_paths = get_lora_samples(sort_desc=False)
             initial_gallery = [(hf_hub_url(repo_id=REPO_ID, repo_type=REPO_TYPE, filename=p), os.path.splitext(os.path.basename(p))[0]) for p in initial_paths]
             
@@ -98,34 +108,29 @@ with ui.Blocks(css=custom_css) as demo:
                 show_label=False,
                 elem_id="lora-gallery"
             )
-            # 현재 정렬된 파일 경로들을 들고 있는 상태 변수
             paths_holder = ui.State(value=initial_paths)
 
-        # 오른쪽 정보 출력 영역
+        # 오른쪽 정보 출력 영역 (상단 이미지 + 하단 정보 구조 반영)
         with ui.Column(scale=1):
             with ui.HTML(elem_id="info-panel") as output_area:
-                output_area.value = "<div style='color: #94a3b8; text-align: center; margin-top: 140px; font-size: 15px;'>왼쪽 목록에서 로라 카드를 클릭하면<br>버전별 상태 정보 및 다운로드 창이 활성화됩니다.</div>"
+                output_area.value = "<div style='color: #94a3b8; text-align: center; margin-top: 180px; font-size: 15px;'>왼쪽 목록에서 로라 카드를 클릭하면<br>버전별 상태 정보 및 다운로드 창이 활성화됩니다.</div>"
 
-    # --- 이벤트 맵핑 (상단 제어 버튼 동작 구현) ---
-    
-    # 1. 오름차순 버튼 클릭 시
+    # --- 이벤트 핸들링 ---
     btn_asc.click(
         fn=lambda: update_gallery_data(sort_desc=False),
         inputs=[],
         outputs=[gallery, paths_holder]
     )
     
-    # 2. 내림차순 버튼 클릭 시
     btn_desc.click(
         fn=lambda: update_gallery_data(sort_desc=True),
         inputs=[],
         outputs=[gallery, paths_holder]
     )
     
-    # 3. 새로고침 버튼 클릭 시 (기본 오름차순 갱신 및 우측 패널 초기화)
     def refresh_all():
         gallery_val, paths = update_gallery_data(sort_desc=False)
-        reset_html = "<div style='color: #94a3b8; text-align: center; margin-top: 140px; font-size: 15px;'>왼쪽 목록에서 로라 카드를 클릭하면<br>버전별 상태 정보 및 다운로드 창이 활성화됩니다.</div>"
+        reset_html = "<div style='color: #94a3b8; text-align: center; margin-top: 180px; font-size: 15px;'>왼쪽 목록에서 로라 카드를 클릭하면<br>버전별 상태 정보 및 다운로드 창이 활성화됩니다.</div>"
         return gallery_val, paths, reset_html
 
     btn_refresh.click(
@@ -134,7 +139,6 @@ with ui.Blocks(css=custom_css) as demo:
         outputs=[gallery, paths_holder, output_area]
     )
 
-    # 4. 카드 선택 이벤트
     def on_select(evt: ui.SelectData, paths):
         return generate_download_links(paths[evt.index])