Update app.py

app.py

@@ -522,6 +522,44 @@ def update_history(new_image, history):
         history.insert(0, new_image)
     return history
 
+custom_theme = gr.themes.Base(
+    primary_hue="blue",
+    secondary_hue="purple",
+    neutral_hue="slate",
+).set(
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_dark="*primary_600",
+    button_primary_background_fill_hover="*primary_400",
+    button_primary_border_color="*primary_500",
+    button_primary_border_color_dark="*primary_600",
+    button_primary_text_color="white",
+    button_primary_text_color_dark="white",
+    button_secondary_background_fill="*neutral_100",
+    button_secondary_background_fill_dark="*neutral_700",
+    button_secondary_background_fill_hover="*neutral_50",
+    button_secondary_text_color="*neutral_800",
+    button_secondary_text_color_dark="white",
+    background_fill_primary="*neutral_50",
+    background_fill_primary_dark="*neutral_900",
+    block_background_fill="white",
+    block_background_fill_dark="*neutral_800",
+    block_label_background_fill="*primary_500",
+    block_label_background_fill_dark="*primary_600",
+    block_label_text_color="white",
+    block_label_text_color_dark="white",
+    block_title_text_color="*neutral_800",
+    block_title_text_color_dark="white",
+    input_background_fill="white",
+    input_background_fill_dark="*neutral_800",
+    input_border_color="*neutral_200",
+    input_border_color_dark="*neutral_700",
+    input_placeholder_color="*neutral_400",
+    input_placeholder_color_dark="*neutral_400",
+    shadow_spread="8px",
+    shadow_inset="0px 2px 4px 0px rgba(0,0,0,0.05)",
+    border_radius_large="12px",
+)
+
 css = '''
 #gen_btn{height: 100%}
 #title{text-align: center}
@@ -564,13 +602,6 @@ css = '''
     overflow-y: auto !important;
 }
 
-.gallery-item {
-    width: 100% !important;
-    height: 200px !important;
-    margin: 0 !important;
-    padding: 5px !important;
-    box-sizing: border-box !important;
-}
 
 .gallery-item img {
     width: 100% !important;
@@ -579,11 +610,7 @@ css = '''
     border-radius: 4px !important;
 }
 
-.gallery-item:hover {
-    transform: scale(1.05);
-    z-index: 1;
-    transition: transform 0.2s ease;
-}
+.
 
 /* 갤러리 컨테이너 강제 너비 설정 */
 .gradio-container {
@@ -596,7 +623,45 @@ css = '''
     width: 100% !important;
     margin: 0 !important;
 }
+/* 입체감 있는 버튼 */
+.button_total {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+}
+
+.button_total:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* 갤러리 아이템 입체감 */
+.gallery-item {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.gallery-item:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
 
+/* 입체감 있는 컨테이너 */
+#lora_gallery {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
+}
+
+/* 입체감 있는 입력 필드 */
+input, textarea {
+    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+}
+
+input:focus, textarea:focus {
+    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
 #footer {visibility: hidden;}
 '''
 
@@ -614,7 +679,7 @@ with gr.Blocks(css=css, delete_cache=(60, 3600)) as app:
     )
 
 # Gallery 컴포넌트 수정
-    with gr.Row(elem_id="lora_gallery", equal_height=True):
+    with gr.Row(theme=custom_theme, elem_id="lora_gallery", equal_height=True):
         gallery = gr.Gallery(
             value=[(item["image"], item["title"]) for item in loras],
             label="LoRA Explorer Gallery",