add random code

app.py

@@ -353,85 +353,117 @@ for cls in EX_CACHE:
         if EX_CACHE[cls][kind]:
             EX_CACHE[cls][kind] = ensure_muted_copy(EX_CACHE[cls][kind])
 
+# GLOBAL_CSS = """
+# /* ===== 공통 변수 투명화 (v3/v4 둘다) ===== */
+# :root, .gradio-container {
+#   --body-background-fill: transparent !important;
+#   --background-fill-primary: transparent !important;
+#   --background-fill-secondary: transparent !important;
+#   --block-background-fill: transparent !important;
+#   --block-border-color: transparent !important;
+#   --panel-background-fill: transparent !important;
+#   --panel-border-color: transparent !important;
+#   --section-header-background-fill: transparent !important;
+#   --shadow-drop: 0 0 0 rgba(0,0,0,0) !important;
+#   --shadow-spread: 0 0 0 rgba(0,0,0,0) !important;
+# }
+
+# /* ===== v4(Tailwind 기반)에서 자주 쓰이는 배경/테두리/그림자 제거 ===== */
+# .gradio-container .bg-white,
+# .gradio-container .bg-gray-50,
+# .gradio-container .bg-gray-100,
+# .gradio-container .bg-slate-50,
+# .gradio-container .bg-neutral-50,
+# .gradio-container .bg-secondary,
+# .gradio-container .border,
+# .gradio-container .shadow,
+# .gradio-container .shadow-sm,
+# .gradio-container .shadow-md,
+# .gradio-container .ring-1,
+# .gradio-container .ring,
+# .gradio-container .gr-card,
+# .gradio-container .prose > *:where(hr) {
+#   background: transparent !important;
+#   box-shadow: none !important;
+#   border-color: transparent !important;
+# }
+
+# /* ===== v3 컴포넌트 계열 ===== */
+# .gradio-container .gr-panel,
+# .gradio-container .gr-group,
+# .gradio-container .gr-box,
+# .gradio-container .gr-row,
+# .gradio-container .gr-column,
+# .gradio-container .gr-accordion,
+# .gradio-container .gr-block,
+# .gradio-container .gr-form,
+# .gradio-container .gr-tabs,
+# .gradio-container .gr-tabitem,
+# .gradio-container .gr-section-header {
+#   background: transparent !important;
+#   box-shadow: none !important;
+#   border: none !important;
+# }
+
+# /* 구분선/헤더 바 제거 */
+# .gradio-container hr,
+# .gradio-container .gr-divider,
+# .gradio-container .gr-accordion .label {
+#   background: transparent !important;
+#   border: none !important;
+#   box-shadow: none !important;
+# }
+
+# /* 바깥쪽 페이지 배경도 강제로 투명/흰색으로 */
+# html, body, .gradio-container { background: transparent !important; }
+
+# /* 기존 CSS 아래에 추가 */
+# #eval [class*="bg-"],
+# #eval [class*="border"],
+# #eval [class*="shadow"],
+# #eval .gr-panel, #eval .gr-group, #eval .gr-box, #eval .gr-row, #eval .gr-column,
+# #eval .gr-block, #eval .gr-form, #eval .gr-section-header, #eval .gr-accordion {
+#   background: transparent !important;
+#   border-color: transparent !important;
+#   box-shadow: none !important;
+# }
+# #eval .gr-form, #eval .gr-panel { background: transparent !important; box-shadow:none !important; border:none !important; }
+# html, body, .gradio-container {
+#   overflow-y: auto !important;
+#   height: auto !important;
+# }
+# """
 GLOBAL_CSS = """
-/* ===== 공통 변수 투명화 (v3/v4 둘다) ===== */
-:root, .gradio-container {
-  --body-background-fill: transparent !important;
-  --background-fill-primary: transparent !important;
-  --background-fill-secondary: transparent !important;
-  --block-background-fill: transparent !important;
-  --block-border-color: transparent !important;
-  --panel-background-fill: transparent !important;
-  --panel-border-color: transparent !important;
-  --section-header-background-fill: transparent !important;
-  --shadow-drop: 0 0 0 rgba(0,0,0,0) !important;
-  --shadow-spread: 0 0 0 rgba(0,0,0,0) !important;
-}
-
-/* ===== v4(Tailwind 기반)에서 자주 쓰이는 배경/테두리/그림자 제거 ===== */
-.gradio-container .bg-white,
-.gradio-container .bg-gray-50,
-.gradio-container .bg-gray-100,
-.gradio-container .bg-slate-50,
-.gradio-container .bg-neutral-50,
-.gradio-container .bg-secondary,
-.gradio-container .border,
-.gradio-container .shadow,
-.gradio-container .shadow-sm,
-.gradio-container .shadow-md,
-.gradio-container .ring-1,
-.gradio-container .ring,
-.gradio-container .gr-card,
-.gradio-container .prose > *:where(hr) {
-  background: transparent !important;
-  box-shadow: none !important;
-  border-color: transparent !important;
+/* === 상위 래퍼가 overflow를 잠가도 스크롤 가능하게 === */
+html, body, #root, #root > div, .gradio-container {
+  height: auto !important;
+  min-height: 100% !important;
+  overflow-y: auto !important;
 }
 
-/* ===== v3 컴포넌트 계열 ===== */
-.gradio-container .gr-panel,
-.gradio-container .gr-group,
-.gradio-container .gr-box,
+/* Gradio v4 내부 컨테이너들이 높이를 고정/클립하지 않도록 */
+.gradio-container .prose,
 .gradio-container .gr-row,
 .gradio-container .gr-column,
 .gradio-container .gr-accordion,
-.gradio-container .gr-block,
-.gradio-container .gr-form,
-.gradio-container .gr-tabs,
-.gradio-container .gr-tabitem,
-.gradio-container .gr-section-header {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
+.gradio-container .gr-group,
+.gradio-container .gr-panel,
+.gradio-container .gr-box {
+  max-height: none !important;
+  height: auto !important;
+  overflow: visible !important;
 }
 
-/* 구분선/헤더 바 제거 */
-.gradio-container hr,
-.gradio-container .gr-divider,
-.gradio-container .gr-accordion .label {
-  background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
+/* 배경만 투명 처리(시각 스타일만, 레이아웃 속성은 건드리지 않음) */
+:root, .gradio-container {
+  --body-background-fill: transparent !important;
+  --background-fill-primary: transparent !important;
+  --background-fill-secondary: transparent !important;
 }
-
-/* 바깥쪽 페이지 배경도 강제로 투명/흰색으로 */
 html, body, .gradio-container { background: transparent !important; }
 
-/* 기존 CSS 아래에 추가 */
-#eval [class*="bg-"],
-#eval [class*="border"],
-#eval [class*="shadow"],
-#eval .gr-panel, #eval .gr-group, #eval .gr-box, #eval .gr-row, #eval .gr-column,
-#eval .gr-block, #eval .gr-form, #eval .gr-section-header, #eval .gr-accordion {
-  background: transparent !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
-}
-#eval .gr-form, #eval .gr-panel { background: transparent !important; box-shadow:none !important; border:none !important; }
-html, body, .gradio-container {
-  overflow-y: auto !important;
-  height: auto !important;
-}
+/* (선택) 시작 버튼 항상 보이게 */
+#start_btn { position: sticky; top: 8px; z-index: 100; }
 """
 
 # -------------------- UI --------------------