Update app.py

app.py

@@ -104,97 +104,7 @@ pipe.safety_checker = safety_checker.StableDiffusionSafetyChecker.from_pretraine
     "CompVis/stable-diffusion-safety-checker"
 )
 
-# CSS 스타일
-css = """
-footer {display: none !important}
-.gradio-container {
-    max-width: 1200px;
-    margin: auto;
-}
-.contain {
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 12px;
-    padding: 20px;
-}
-.generate-btn {
-    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
-    border: none !important;
-    color: white !important;
-}
-.generate-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-.title {
-    text-align: center;
-    font-size: 2.5em;
-    font-weight: bold;
-    margin-bottom: 1em;
-    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-.tabs {
-    margin-top: 20px;
-    border-radius: 10px;
-    overflow: hidden;
-}
-.tab-nav {
-    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%);
-    padding: 10px;
-}
-.tab-nav button {
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    margin: 0 5px;
-    border-radius: 5px;
-    transition: all 0.3s ease;
-}
-.tab-nav button.selected {
-    background: rgba(255, 255, 255, 0.2);
-}
-.image-upload-container {
-    border: 2px dashed #4B79A1;
-    border-radius: 10px;
-    padding: 20px;
-    text-align: center;
-    transition: all 0.3s ease;
-}
-.image-upload-container:hover {
-    border-color: #283E51;
-    background: rgba(75, 121, 161, 0.1);
-}
-"""
-
-# CSS에 추가할 스타일
-additional_css = """
-.primary-btn {
-    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
-    font-size: 1.2em !important;
-    padding: 12px 20px !important;
-    margin-top: 20px !important;
-}
-hr {
-    border: none;
-    border-top: 1px solid rgba(75, 121, 161, 0.2);
-    margin: 20px 0;
-}
-.input-section {
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    padding: 20px;
-    margin-bottom: 20px;
-}
-.output-section {
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 12px;
-    padding: 20px;
-}
-"""
 
-# 기존 CSS에 새로운 스타일 추가
-css = css + additional_css
 
 def save_image(image):
     """Save the generated image and return the path"""
@@ -305,6 +215,108 @@ def get_random_seed():
 def update_seed():
     return get_random_seed()
 
+# CSS 스타일
+css = """
+footer {display: none !important}
+.gradio-container {
+    max-width: 1200px;
+    margin: auto;
+}
+.contain {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 12px;
+    padding: 20px;
+}
+.generate-btn {
+    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
+    border: none !important;
+    color: white !important;
+}
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+.title {
+    text-align: center;
+    font-size: 2.5em;
+    font-weight: bold;
+    margin-bottom: 1em;
+    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.tabs {
+    margin-top: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+}
+.tab-nav {
+    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%);
+    padding: 10px;
+}
+.tab-nav button {
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    margin: 0 5px;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+}
+.tab-nav button.selected {
+    background: rgba(255, 255, 255, 0.2);
+}
+.image-upload-container {
+    border: 2px dashed #4B79A1;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+.image-upload-container:hover {
+    border-color: #283E51;
+    background: rgba(75, 121, 161, 0.1);
+}
+.primary-btn {
+    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
+    font-size: 1.2em !important;
+    padding: 12px 20px !important;
+    margin-top: 20px !important;
+}
+hr {
+    border: none;
+    border-top: 1px solid rgba(75, 121, 161, 0.2);
+    margin: 20px 0;
+}
+.input-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+.output-section {
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 12px;
+    padding: 20px;
+}
+.example-images {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+    margin-bottom: 20px;
+}
+.example-images img {
+    width: 100%;
+    height: 150px;
+    object-fit: cover;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+.example-images img:hover {
+    transform: scale(1.05);
+}
+"""
+
 with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     gr.HTML('<div class="title">AI Image Generator & Caption</div>')
     gr.HTML('<div style="text-align: center; margin-bottom: 2em;">Upload an image for caption or create from text description</div>')
@@ -319,11 +331,26 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
                 elem_classes=["image-upload-container"]
             )
             
+            # 예시 이미지 갤러리 추가
+            example_images = [
+                "1.jpg",
+                "2.jpg", 
+                "3.jpg",
+                "4.jpg"
+            ]
+            gr.Examples(
+                examples=example_images,
+                inputs=input_image,
+                label="Example Images",
+                examples_per_page=4
+            )
+            
+            # Florence 모델 선택 - 숨김 처리
             florence_model = gr.Dropdown(
                 choices=list(florence_models.keys()),
                 label="Caption Model",
                 value='gokaygokay/Florence-2-Flux-Large',
-                visible=True
+                visible=False
             )
             
             caption_button = gr.Button(
@@ -433,4 +460,4 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch(allowed_paths=[PERSISTENT_DIR])                
+    demo.launch(allowed_paths=[PERSISTENT_DIR])