Update src/app.py

src/app.py

@@ -76,7 +76,6 @@ def _process(
     img: Image.Image,
     bbox: BoundingBox | None,
 ) -> tuple[tuple[Image.Image, Image.Image], gr.DownloadButton]:
-    # enforce max dimensions for pymatting performance reasons
     if img.width > 2048 or img.height > 2048:
         orig_res = max(img.width, img.height)
         img.thumbnail((2048, 2048))
@@ -117,37 +116,127 @@ def process_bbox(prompts: dict[str, Any]) -> tuple[tuple[Image.Image, Image.Imag
 def on_change_bbox(prompts: dict[str, Any] | None):
     return gr.update(interactive=prompts is not None)
 
-TITLE = """
-<center>
-  <h1 style="font-size: 1.5rem; margin-bottom: 0.5rem;">
-    Object Cutter With Bounding Box
-  </h1>
-
-  <p>
-    Create high-quality HD cutouts for any object in your image using bounding box selection.
-    <br>
-    The object will be available on a transparent background, ready to paste elsewhere.
-  </p>
-
-  <p>
-    This space uses the
-    <a
-        href="https://huggingface.co/finegrain/finegrain-box-segmenter"
-        target="_blank"
-    >Finegrain Box Segmenter model</a>,
-    trained with a mix of natural data curated by Finegrain and
-    <a
-        href="https://huggingface.co/datasets/Nfiniteai/product-masks-sample"
-        target="_blank"
-    >synthetic data provided by Nfinite</a>.
-  </p>
-</center>
-"""
-
-with gr.Blocks() as demo:
-    gr.HTML(TITLE)
+css = '''
+.gradio-container { 
+    max-width: 1100px !important; 
+    margin: auto;
+}
+
+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: 3rem;
+    padding: 2rem;
+    background: linear-gradient(to bottom, #FFF7ED, white);
+    border-radius: 12px;
+    font-family: 'Pretendard', sans-serif;
+}
+
+.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;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-decoration: none;
+    display: inline-block;
+    transition: all 0.3s;
+    margin-top: 1rem;
+    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
+}
+
+.visit-button:hover {
+    background-color: #C2410C;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(234, 88, 12, 0.25);
+}
+
+.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;
+}
+'''
+
+with gr.Blocks(
+    theme=gr.themes.Soft(
+        primary_hue=gr.themes.Color(
+            c50="#FFF7ED",
+            c100="#FFEDD5",
+            c200="#FED7AA",
+            c300="#FDBA74",
+            c400="#FB923C",
+            c500="#F97316",
+            c600="#EA580C",
+            c700="#C2410C",
+            c800="#9A3412",
+            c900="#7C2D12",
+            c950="#431407",
+        ),
+        secondary_hue="zinc",
+        neutral_hue="zinc",
+        font=("Pretendard", "sans-serif")
+    ),
+    css=css
+) as demo:
+    gr.HTML(
+        """
+        <h1>끝장AI 이미지 객체 추출기</h1>
+        <div class="subtitle">
+            이미지에서 원하는 객체를 손쉽게 분리하여 투명 배경으로 추출하세요.<br>
+            고품질의 HD 이미지 추출을 지원합니다.
+        </div>
+        """
+    )
     
-    with gr.Row():
+    with gr.Row(elem_classes="container-wrapper"):
         with gr.Column():
             annotator = image_annotator(
                 image_type="pil",
@@ -155,12 +244,13 @@ with gr.Blocks() as demo:
                 show_download_button=False,
                 show_share_button=False,
                 single_box=True,
-                label="Input",
+                label="원본 이미지",
+                elem_classes="image-container"
             )
-            btn = gr.ClearButton(value="Cut Out Object", interactive=False)
+            btn = gr.ClearButton(value="객체 추출하기", interactive=False)
         with gr.Column():
-            oimg = ImageSlider(label="Before / After", show_download_button=False)
-            dlbt = gr.DownloadButton("Download Cutout", interactive=False)
+            oimg = ImageSlider(label="추출 결과", show_download_button=False, elem_classes="image-container")
+            dlbt = gr.DownloadButton("이미지 다운로드", interactive=False)
 
     btn.add(oimg)
 
@@ -198,4 +288,18 @@ with gr.Blocks() as demo:
         cache_examples=True,
     )
 
+    gr.HTML(
+        """
+        <div class='footer-content'>
+            <p style='font-size: 1.1rem; font-weight: 500; color: #1F2937;'>끝장AI가 제공하는 고급 AI 도구를 더 경험하고 싶으신가요?</p>
+            <a href='https://finalendai.com' target='_blank' class='visit-button'>
+                끝장AI 방문하기
+            </a>
+            <p style='margin-top: 1.5rem; color: #6B7280; font-size: 0.9rem;'>
+                © 2024 끝장AI. All rights reserved.
+            </p>
+        </div>
+        """
+    )
+
 demo.launch(share=False)