Update app.py

app.py

@@ -52,46 +52,94 @@ examples = [
     ["An astronaut on mars in a futuristic cyborg suit"],
 ]
 
-css = """
+css = '''
 .gradio-container {
-    max-width: 1000px !important;
+    max-width: 1400px !important;
     margin: auto;
 }
+/* 이미지 크기 조정 */
+.image-container img {
+    max-height: 600px !important;
+}
+/* 이미지 슬라이더 크기 조정 */
+.image-slider {
+    height: 600px !important;
+    max-height: 600px !important;
+}
 h1 {
     text-align: center;
     font-family: 'Pretendard', sans-serif;
+    color: #EA580C;
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.subtitle {
+    text-align: center;
+    color: #4B5563;
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+    font-family: 'Pretendard', sans-serif;
 }
 .gr-button-primary {
     background-color: #F97316 !important;
+    border: none !important;
+    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2) !important;
 }
 .gr-button-primary:hover {
     background-color: #EA580C !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px rgba(234, 88, 12, 0.25) !important;
 }
 .footer-content {
     text-align: center;
-    margin-top: 2rem;
-    padding: 2rem 1rem;
+    margin-top: 3rem;
+    padding: 2rem;
+    background: linear-gradient(to bottom, #FFF7ED, white);
+    border-radius: 12px;
     font-family: 'Pretendard', sans-serif;
-    background-color: #F9FAFB;
-    border-radius: 0.5rem;
+}
+.footer-content a {
+    color: #EA580C;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+.footer-content a:hover {
+    color: #C2410C;
 }
 .visit-button {
     background-color: #EA580C;
     color: white !important;
-    padding: 0.75rem 1.5rem;
-    border-radius: 0.5rem;
-    font-weight: 500;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-weight: 600;
     text-decoration: none;
     display: inline-block;
+    transition: all 0.3s;
     margin-top: 1rem;
-    transition: all 0.2s ease-in-out;
+    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
+    font-size: 1.1rem;
 }
 .visit-button:hover {
     background-color: #C2410C;
-    transform: translateY(-1px);
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(234, 88, 12, 0.25);
+    color: white !important;
+}
+.container-wrapper {
+    background: white;
+    border-radius: 16px;
+    padding: 2rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+.image-container {
+    border-radius: 12px;
+    overflow: hidden;
+    border: 2px solid #F3F4F6;
 }
-"""
+'''
 
 # Gradio 인터페이스 생성
 with gr.Blocks(
@@ -120,10 +168,13 @@ with gr.Blocks(
             gr.HTML(
                 """
                 <h1>끝장AI FLUX.1 이미지 생성기</h1>
+                <div class="subtitle">
+                    강력한 AI 기술로 당신의 상상을 현실로 만들어보세요
+                </div>
                 """
             )
     
-    with gr.Group():
+    with gr.Group(elem_classes="container-wrapper"):
         with gr.Column():
             prompt = gr.Textbox(
                 label="프롬프트",