Update app.py

app.py

@@ -257,372 +257,312 @@ examples = [
 # ===== 커스텀 CSS (진한 붉은색 고급 디자인) =====
 custom_css = """
 :root {
-    --color-primary: #8F1A3A;
-    --color-secondary: #FF4B4B;
-    --color-accent: #B91C3C;
-    --color-dark-red: #7F1D1D;
-    --color-gold: #D4AF37;
-    --background-fill-primary: linear-gradient(135deg, #450A0A 0%, #7F1D1D 25%, #991B1B 50%, #B91C3C 75%, #DC2626 100%);
-    --glass-bg: rgba(255, 255, 255, 0.1);
-    --glass-border: rgba(255, 255, 255, 0.2);
-    --shadow-primary: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-    --shadow-secondary: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
-    --shadow-accent: 0 4px 15px rgba(185, 28, 60, 0.4);
+    --color-primary: #E91E63;
+    --color-secondary: #FCE4EC;
+    --color-accent: #F8BBD9;
+    --color-rose: #F06292;
+    --color-gold: #FFB74D;
+    --color-warm-gray: #F5F5F5;
+    --color-dark-gray: #424242;
+    --background-primary: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 50%, #EEEEEE 100%);
+    --background-accent: linear-gradient(135deg, #FCE4EC 0%, #F8BBD9 100%);
+    --text-primary: #212121;
+    --text-secondary: #757575;
+    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
+    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
+    --border-radius: 16px;
 }
 
 /* 전체 배경 */
 footer {visibility: hidden;}
 .gradio-container {
-    background: var(--background-fill-primary) !important;
+    background: var(--background-primary) !important;
     min-height: 100vh;
-    position: relative;
-}
-
-/* 배경에 패턴 추가 */
-.gradio-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: 
-        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
-        radial-gradient(circle at 75% 75%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
-    pointer-events: none;
-    z-index: 1;
-}
-
-/* 메인 콘텐츠 z-index */
-.gradio-container > * {
-    position: relative;
-    z-index: 2;
+    font-family: 'Inter', 'Noto Sans KR', sans-serif;
 }
 
 /* 타이틀 스타일 */
 .title {
-    color: #FFFFFF !important;
-    font-size: 3.5rem !important;
-    font-weight: 800 !important;
+    color: var(--text-primary) !important;
+    font-size: 3rem !important;
+    font-weight: 700 !important;
     text-align: center;
     margin: 2rem 0;
-    font-family: 'Playfair Display', serif;
-    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-    background: linear-gradient(135deg, #FFFFFF 0%, var(--color-gold) 50%, #FFFFFF 100%);
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-rose) 50%, var(--color-gold) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
+    letter-spacing: -0.02em;
 }
 
 .subtitle {
-    color: #F3F4F6 !important;
-    font-size: 1.3rem !important;
+    color: var(--text-secondary) !important;
+    font-size: 1.2rem !important;
     text-align: center;
     margin-bottom: 2rem;
-    font-style: italic;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    font-weight: 400;
 }
 
 .collection-link {
     text-align: center;
     margin-bottom: 2rem;
-    font-size: 1.1rem;
+    font-size: 1rem;
 }
 
 .collection-link a {
-    color: var(--color-gold);
+    color: var(--color-primary);
     text-decoration: none;
     transition: all 0.3s ease;
-    font-weight: 600;
-    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    font-weight: 500;
+    border-bottom: 1px solid transparent;
 }
 
 .collection-link a:hover {
-    color: #F59E0B;
-    text-shadow: 0 4px 8px rgba(245, 158, 11, 0.5);
+    color: var(--color-rose);
+    border-bottom-color: var(--color-rose);
 }
 
-/* 고급스러운 3D 박스 스타일 */
+/* 심플한 카드 스타일 */
 .model-description {
-    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid var(--glass-border);
-    border-radius: 20px;
-    padding: 30px;
-    margin: 25px 0;
-    box-shadow: 
-        var(--shadow-primary),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2),
-        0 0 30px rgba(185, 28, 60, 0.2);
-    position: relative;
-    overflow: hidden;
-    transform: translateZ(0);
-}
-
-.model-description::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
+    background: rgba(255, 255, 255, 0.9);
+    border: 1px solid rgba(233, 30, 99, 0.1);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    margin: 1.5rem 0;
+    box-shadow: var(--shadow-soft);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
 .model-description p {
-    color: #F9FAFB !important;
-    font-size: 1.1rem;
+    color: var(--text-primary) !important;
+    font-size: 1rem;
     line-height: 1.6;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    margin: 0;
 }
 
 /* 버튼 스타일 */
 button.primary {
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
-    color: #FFFFFF !important;
-    border: none !important;
-    box-shadow: 
-        var(--shadow-accent),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-    transition: all 0.3s ease !important;
+    background: var(--background-accent) !important;
+    color: var(--color-primary) !important;
+    border: 1px solid var(--color-accent) !important;
+    border-radius: 12px !important;
+    box-shadow: var(--shadow-soft) !important;
+    transition: all 0.2s ease !important;
     font-weight: 600 !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
+    font-size: 0.95rem !important;
 }
 
 button.primary:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 
-        0 20px 40px rgba(185, 28, 60, 0.4),
-        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
-    background: linear-gradient(135deg, var(--color-accent) 0%, #DC2626 100%) !important;
+    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%) !important;
+    transform: translateY(-1px) !important;
+    box-shadow: var(--shadow-medium) !important;
 }
 
 /* 입력 컨테이너 */
 .input-container {
-    background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(255, 255, 255, 0.08) 100%);
-    backdrop-filter: blur(25px);
-    -webkit-backdrop-filter: blur(25px);
-    border: 1px solid var(--glass-border);
-    border-radius: 20px;
-    padding: 25px;
-    margin-bottom: 2rem;
-    box-shadow: var(--shadow-secondary);
-    position: relative;
-    overflow: hidden;
-}
-
-.input-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--color-primary), var(--color-gold), var(--color-primary));
+    background: rgba(255, 255, 255, 0.8);
+    border: 1px solid rgba(233, 30, 99, 0.15);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    box-shadow: var(--shadow-soft);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
 }
 
 /* 고급 설정 */
 .advanced-settings {
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    padding: 20px;
-    margin-top: 1.5rem;
-    box-shadow: var(--shadow-secondary);
+    background: rgba(255, 255, 255, 0.6);
+    border: 1px solid rgba(233, 30, 99, 0.1);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin-top: 1rem;
+    box-shadow: var(--shadow-soft);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
 /* 예시 영역 */
 .example-region {
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 100%);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 16px;
-    padding: 20px;
-    margin-top: 1.5rem;
-    box-shadow: var(--shadow-secondary);
+    background: rgba(252, 228, 236, 0.3);
+    border: 1px solid rgba(233, 30, 99, 0.15);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin-top: 1rem;
+    box-shadow: var(--shadow-soft);
 }
 
-/* 프롬프트 입력칸 크기 2배 증가 + 스타일 */
+/* 프롬프트 입력칸 스타일 */
 .large-prompt textarea {
     min-height: 120px !important;
-    font-size: 16px !important;
+    font-size: 15px !important;
     line-height: 1.5 !important;
-    background: rgba(0, 0, 0, 0.3) !important;
-    border: 2px solid rgba(255, 255, 255, 0.2) !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 2px solid rgba(233, 30, 99, 0.2) !important;
     border-radius: 12px !important;
-    color: #FFFFFF !important;
-    backdrop-filter: blur(10px) !important;
+    color: var(--text-primary) !important;
     transition: all 0.3s ease !important;
+    padding: 1rem !important;
 }
 
 .large-prompt textarea:focus {
-    border-color: var(--color-gold) !important;
-    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
+    border-color: var(--color-primary) !important;
+    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1) !important;
+    outline: none !important;
 }
 
 .large-prompt textarea::placeholder {
-    color: rgba(255, 255, 255, 0.6) !important;
+    color: var(--text-secondary) !important;
+    font-style: italic;
 }
 
-/* 생성 버튼 작게 만들기 + 3D 효과 */
+/* 생성 버튼 */
 .small-generate-btn {
-    max-width: 120px !important;
-    height: 45px !important;
-    font-size: 14px !important;
-    padding: 10px 20px !important;
+    max-width: 140px !important;
+    height: 48px !important;
+    font-size: 15px !important;
+    padding: 12px 24px !important;
     border-radius: 12px !important;
-    position: relative !important;
-    overflow: hidden !important;
-}
-
-.small-generate-btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-    transition: left 0.5s ease;
-}
-
-.small-generate-btn:hover::before {
-    left: 100%;
+    font-weight: 600 !important;
 }
 
-/* 프롬프트 증강 섹션 스타일 */
+/* 프롬프트 증강 섹션 */
 .prompt-enhance-section {
-    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border: 1px solid rgba(212, 175, 55, 0.3);
-    border-radius: 15px;
-    padding: 20px;
-    margin-top: 15px;
-    box-shadow: 
-        0 8px 25px rgba(0, 0, 0, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.1);
-    position: relative;
-}
-
-.prompt-enhance-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 20px;
-    right: 20px;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
+    background: linear-gradient(135deg, rgba(255, 183, 77, 0.1) 0%, rgba(252, 228, 236, 0.2) 100%);
+    border: 1px solid rgba(255, 183, 77, 0.3);
+    border-radius: var(--border-radius);
+    padding: 1.2rem;
+    margin-top: 1rem;
+    box-shadow: var(--shadow-soft);
 }
 
 /* 스타일 프리셋 섹션 */
 .style-preset-section {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
-    backdrop-filter: blur(15px);
-    -webkit-backdrop-filter: blur(15px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 15px;
-    padding: 20px;
-    margin-top: 15px;
-    box-shadow: var(--shadow-secondary);
+    background: linear-gradient(135deg, rgba(248, 187, 217, 0.15) 0%, rgba(252, 228, 236, 0.2) 100%);
+    border: 1px solid rgba(233, 30, 99, 0.2);
+    border-radius: var(--border-radius);
+    padding: 1.2rem;
+    margin-top: 1rem;
+    box-shadow: var(--shadow-soft);
 }
 
-/* 라벨 텍스트 색상 및 한글 작은 글자 스타일 */
+/* 라벨 텍스트 */
 label {
-    color: #F9FAFB !important;
+    color: var(--text-primary) !important;
     font-weight: 600 !important;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
-}
-
-/* 한글 부분을 작게 표시하는 스타일 */
-label::after {
-    font-size: 0.8em !important;
-    opacity: 0.8 !important;
-    font-weight: 400 !important;
-}
-
-/* 체크박스와 라디오 버튼 라벨의 한글 부분 작게 */
-.gradio-checkbox label,
-.gradio-radio label {
-    font-size: 1rem !important;
+    font-size: 0.95rem !important;
 }
 
-/* 정보 텍스트 스타일 */
+/* 정보 텍스트 */
 .gr-info, .gr-textbox-info {
-    color: rgba(255, 255, 255, 0.8) !important;
+    color: var(--text-secondary) !important;
     font-size: 0.85rem !important;
-    font-style: italic !important;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
     line-height: 1.4 !important;
 }
 
-/* placeholder 텍스트 스타일 */
-.large-prompt textarea::placeholder {
-    color: rgba(255, 255, 255, 0.5) !important;
-    font-style: italic !important;
-}
-
-/* 슬라이더 라벨의 한글 부분 스타일링 */
-.gr-block.gr-box .gr-form .gr-form-gap .gr-form-gap label {
-    font-size: 0.95rem !important;
-}
-
-/* 아코디언 헤더의 한글 부분 작게 */
-.gr-accordion .gr-accordion-header {
-    font-size: 1.1rem !important;
-}
-
-/* 예시 마크다운의 한글 부분 작게 */
+/* 예시 마크다운 */
 .example-region h3 {
-    color: #F9FAFB !important;
+    color: var(--text-primary) !important;
     font-weight: 600 !important;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
+    margin-bottom: 1rem !important;
 }
 
-/* 라디오 버튼 및 체크박스 스타일 */
+/* 폼 요소들 */
 input[type="radio"], input[type="checkbox"] {
-    accent-color: var(--color-gold) !important;
+    accent-color: var(--color-primary) !important;
 }
 
-/* 슬라이더 스타일 */
 input[type="range"] {
-    accent-color: var(--color-gold) !important;
+    accent-color: var(--color-primary) !important;
 }
 
 /* 결과 이미지 컨테이너 */
 .image-container {
-    border-radius: 16px !important;
+    border-radius: var(--border-radius) !important;
     overflow: hidden !important;
-    box-shadow: var(--shadow-primary) !important;
-    background: rgba(0, 0, 0, 0.3) !important;
-    backdrop-filter: blur(10px) !important;
+    box-shadow: var(--shadow-medium) !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(233, 30, 99, 0.1) !important;
+}
+
+/* 슬라이더 컨테이너 스타일링 */
+.gr-slider {
+    margin: 0.5rem 0 !important;
 }
 
-/* 애니메이션 추가 */
-@keyframes shimmer {
-    0% { transform: translateX(-100%); }
-    100% { transform: translateX(100%); }
+/* 아코디언 스타일 */
+.gr-accordion {
+    border: 1px solid rgba(233, 30, 99, 0.15) !important;
+    border-radius: var(--border-radius) !important;
+    background: rgba(255, 255, 255, 0.7) !important;
 }
 
+.gr-accordion-header {
+    background: var(--background-accent) !important;
+    color: var(--color-primary) !important;
+    font-weight: 600 !important;
+    border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
+}
+
+/* 부드러운 애니메이션 */
 .model-description, .input-container, .prompt-enhance-section, .style-preset-section {
-    animation: fadeInUp 0.6s ease-out;
+    animation: fadeInUp 0.4s ease-out;
 }
 
 @keyframes fadeInUp {
     from {
         opacity: 0;
-        transform: translateY(30px);
+        transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
+
+/* 전체적인 텍스트 가독성 향상 */
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+/* 드롭다운 및 셀렉트 스타일 */
+select, .gr-dropdown {
+    background: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid rgba(233, 30, 99, 0.2) !important;
+    border-radius: 8px !important;
+    color: var(--text-primary) !important;
+}
+
+/* 체크박스와 라디오 버튼 개선 */
+.gr-checkbox, .gr-radio {
+    background: transparent !important;
+}
+
+/* 전체 컨테이너 여백 조정 */
+.gr-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 2rem 1rem !important;
+}
+
+/* 모바일 반응형 */
+@media (max-width: 768px) {
+    .title {
+        font-size: 2.2rem !important;
+    }
+    
+    .model-description, .input-container, .advanced-settings, .example-region {
+        padding: 1rem !important;
+        margin: 1rem 0 !important;
+    }
+    
+    .large-prompt textarea {
+        min-height: 100px !important;
+        font-size: 14px !important;
+    }
+}
 """
 
 # ===== Gradio UI =====