Update app.py

app.py

@@ -190,7 +190,7 @@ custom_css = """
     font-weight: 300;
 }
 
-/* 이미지 업로드 영역 스타일 */
+/* 이미지 업로드 영역 스타일 - 오버레이 문제 해결 */
 .image-container {
     background: rgba(255, 255, 255, 0.95);
     border-radius: 16px;
@@ -206,31 +206,76 @@ custom_css = """
     border-color: rgba(102, 126, 234, 0.6);
 }
 
-/* Gradio 이미지 업로드 컴포넌트 내부 스타일 */
-.gr-image {
+/* Gradio 이미지 컴포넌트 오버레이 제거 */
+.gr-image .wrap {
+    background: transparent !important;
+}
+
+.gr-image .wrap.svelte-sq3j11 {
     position: relative !important;
 }
 
-.gr-image .upload-container {
+/* 업로드 플레이스홀더 배경 투명하게 */
+.gr-image .placeholder {
+    background: rgba(248, 250, 252, 0.8) !important;
+    z-index: 0 !important;
+}
+
+/* 이미지 업로드 영역의 기본 배경 */
+.gr-image .image-container {
     background: transparent !important;
+    position: relative !important;
 }
 
-.gr-image .image-frame {
-    background: rgba(248, 250, 252, 0.5) !important;
-    border: 2px dashed rgba(102, 126, 234, 0.4) !important;
+/* 업로드된 이미지가 전체 영역을 차지하도록 */
+.gr-image img {
+    border-radius: 12px !important;
+    position: relative !important;
+    z-index: 10 !important;
+    max-width: 100% !important;
+    height: auto !important;
+    display: block !important;
 }
 
-/* 업로드 플레이스홀더 이미지가 보이도록 조정 */
-.gr-image .placeholder-image {
-    opacity: 0.7 !important;
-    z-index: 1 !important;
+/* 플레이스홀더 아이콘과 텍스트를 배경으로 */
+.gr-image .placeholder svg,
+.gr-image .placeholder-content {
+    opacity: 0.5 !important;
+    z-index: 0 !important;
 }
 
-/* 업로드된 이미지 컨테이너 */
-.gr-image img {
+/* 업로드 영역 전체를 클릭 가능하게 */
+.gr-image .upload-container {
+    background: transparent !important;
+    border: 2px dashed rgba(102, 126, 234, 0.3) !important;
     border-radius: 12px !important;
+    min-height: 400px !important;
+    position: relative !important;
+    cursor: pointer !important;
+}
+
+/* 업로드된 이미지 컨테이너 */
+.gr-image .image-preview {
     position: relative !important;
-    z-index: 2 !important;
+    z-index: 5 !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* 이미지가 업로드되면 플레이스홀더 숨기기 */
+.gr-image:has(img) .placeholder {
+    display: none !important;
+}
+
+/* 버튼들이 이미지를 가리지 않도록 */
+.gr-image .controls {
+    position: absolute !important;
+    bottom: 10px !important;
+    right: 10px !important;
+    z-index: 20 !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    border-radius: 8px !important;
+    padding: 5px !important;
 }
 
 /* 라벨 스타일 */