Update app.py

app.py

@@ -22,15 +22,14 @@ def blob_to_base64_html(blob_data):
     try:
         if isinstance(blob_data, (bytes, bytearray)):
             encoded = base64.b64encode(blob_data).decode('utf-8')
-
-            return f'''
-            <img src="data:image/png;base64,{encoded}"
-                 style="width: 50%; max-height: 400px; object-fit: contain; 
-                        cursor: zoom-in; border: 1px solid #ccc; border-radius: 4px; 
-                        padding: 2px; background-color: white; margin: 5px 0; display: block;"
-                 onclick="window.open(this.src)">
-            '''
-
+            # 💡 [핵심] img를 1200px짜리 div로 강제로 감싸서 Gradio가 못 건드리게 합니다.
+            # width: 1200px !important 를 사용하여 어떤 상황에서도 크게 만듭니다.
+            return f"""
+            <div style="width: 1200px !important; margin: 10px 0;">
+                <img src='data:image/png;base64,{encoded}' 
+                     style='width: 100% !important; height: auto !important; display: block; border: 1px solid #ddd;' />
+            </div>
+            """
         return str(blob_data)
     except Exception as e:
         return str(blob_data)
@@ -665,29 +664,28 @@ table th:nth-child(6):nth-last-child(1), table td:nth-child(6):nth-last-child(1)
 /* -------------------------- */
 /* 기본 테이블 & 스크롤 설정  */
 /* -------------------------- */
-thead th { 
-    font-size: 18px !important;
-    position: sticky;
-    top: 0; 
-    background: white; 
-    z-index: 10;
-} 
-.dataframe { 
-    max-height: none !important; 
-    overflow-y: visible !important; 
-} 
-.dataframe > div { 
-    max-height: none !important; 
-    overflow: visible !important; 
-} 
-td { 
-    font-size: 18px !important;
-    white-space: pre-wrap !important;
-    word-break: break-word !important;
-    line-height: 1.6; 
-    padding: 10px; 
+.dataframe {
+    display: block !important;
+    overflow-x: auto !important;
+    white-space: nowrap !important;
+}
+
+/* 2. 모든 셀 상단 정렬 (이게 적용되어야 번호가 맨 위에 붙습니다) */
+.dataframe td {
     vertical-align: top !important;
-} 
+    padding: 15px !important;
+    white-space: normal !important; /* 글자는 자동 줄바꿈 허용 */
+}
+
+/* 3. 이미지 칸(Description)이 너무 좁아지지 않게 방어 */
+.dataframe td:nth-child(2) {
+    min-width: 1250px !important;
+}
+
+/* 4. Gradio 기본 이미지 제한 해제 */
+.dataframe img {
+    max-width: none !important;
+}
 
 """
 if __name__ == "__main__":