Update app.py

app.py

@@ -333,53 +333,189 @@ train:
   train_unet: true
 '''
 
-theme = gr.themes.Monochrome(
-    text_size=gr.themes.Size(lg="18px", md="15px", sm="13px", xl="22px", xs="12px", xxl="24px", xxs="9px"),
-    font=[gr.themes.GoogleFont("Source Sans Pro"), "ui-sans-serif", "system-ui", "sans-serif"],
-)
 
 
-css = """
-h1{font-size: 2em}
-h3{margin-top: 0}
-#component-1{text-align:center}
-.tabitem{border: 0px}
-.group_padding{padding: .55em}
-"""
+# 테마 설정 부분을 현재 코드와 동일하게 수정
+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)"
+)
+
+# CSS 스타일 통합
+css = '''
+/* 기본 스타일 */
+h1 {
+    font-size: 3em;
+    text-align: center;
+    margin-bottom: 0.5em;
+}
+
+h3 {
+    margin-top: 0;
+    font-size: 1.2em;
+}
+
+/* 컴포넌트 스타일 */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* 입력 필드 스타일 */
+.input-group {
+    background: var(--block-background-fill);
+    padding: 15px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* 버튼 스타일 */
+.button {
+    height: 40px;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+}
+
+.button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+/* 이미지 업로드 영역 */
+.image-upload-area {
+    border: 2px dashed var(--input-border-color);
+    border-radius: 12px;
+    padding: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* 캡션 영역 */
+.caption-area {
+    background: var(--block-background-fill);
+    padding: 15px;
+    border-radius: 12px;
+    margin-top: 20px;
+}
+
+.caption-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 10px;
+}
+
+/* 고급 옵션 영역 */
+.advanced-options {
+    background: var(--block-background-fill);
+    padding: 15px;
+    border-radius: 12px;
+    margin-top: 20px;
+}
+
+/* 진행 상태 표시 */
+.progress-area {
+    background: var(--block-background-fill);
+    padding: 15px;
+    border-radius: 12px;
+    margin-top: 20px;
+    text-align: center;
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+    .caption-row {
+        flex-direction: column;
+    }
+}
+
+/* 스크롤바 스타일 */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--background-fill-primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary-500);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-600);
+}
+'''
 
-with gr.Blocks(theme=theme, css=css) as demo:
+# Gradio 앱 수정
+with gr.Blocks(theme=custom_theme, css=css) as demo:
     gr.Markdown(
         """# 🆔 Gini LoRA 학습
-### 이미지들(최대 150장 미만)을 업로드하세요. """
+        ### 이미지들(최대 150장 미만)을 업로드하세요."""
     )
     
-    with gr.Tab("Train"):  # 탭 이름 변경
-        with gr.Column():  # main_ui 대신 직접 Column 사용
-            with gr.Group():
+    with gr.Tab("Train"):
+        with gr.Column(elem_classes="container"):
+            # LoRA 설정 그룹
+            with gr.Group(elem_classes="input-group"):
                 with gr.Row():
                     lora_name = gr.Textbox(
-                        label="The name of your LoRA",
-                        info="This has to be a unique name",
-                        placeholder="e.g.: Persian Miniature Painting style, Cat Toy",
+                        label="LoRA 이름",
+                        info="고유한 이름이어야 합니다",
+                        placeholder="예: Persian Miniature Painting style, Cat Toy"
                     )
                     concept_sentence = gr.Textbox(
-                        label="Trigger word/sentence",
-                        info="Trigger word or sentence to be used",
-                        placeholder="uncommon word like p3rs0n or trtcrd, or sentence like 'in the style of CNSTLL'",
-                        interactive=True,
+                        label="트리거 단어/문장",
+                        info="사용할 트리거 단어나 문장",
+                        placeholder="p3rs0n이나 trtcrd같은 특이한 단어, 또는 'in the style of CNSTLL'같은 문장"
                     )
-                # model_warning 변수 추가
+                
                 model_warning = gr.Markdown(visible=False)
-
                 which_model = gr.Radio(
-                    ["[dev] (high quality model)"], 
-                    label="Base model", 
+                    ["[dev] (high quality model)"],
+                    label="기본 모델",
                     value="[dev] (high quality model)"
                 )
 
-     
-                    
-            with gr.Group(visible=True) as image_upload:
+            # 이미지 업로드 영역
+            with gr.Group(visible=True, elem_classes="image-upload-area") as image_upload:
+
                 with gr.Row():
                     images = gr.File(
                         file_types=["image", ".txt"],