Upload 2 files

app.py

@@ -0,0 +1,187 @@
+import gradio as gr
+import numpy as np
+from PIL import Image
+import io
+import base64
+
+def calculate_crop_box(image, target_ratio=1170/391):
+    """
+    計算保持目標比例的最大裁切框
+    """
+    width, height = image.size
+    current_ratio = width / height
+    
+    if current_ratio > target_ratio:
+        # 圖片較寬，需要裁切寬度
+        new_width = int(height * target_ratio)
+        left = (width - new_width) // 2
+        top = 0
+        right = left + new_width
+        bottom = height
+    else:
+        # 圖片較高，需要裁切高度
+        new_height = int(width / target_ratio)
+        left = 0
+        top = (height - new_height) // 2
+        right = width
+        bottom = top + new_height
+    
+    return (left, top, right, bottom)
+
+def process_image(image, crop_data=None):
+    """
+    處理圖片：裁切並調整為目標尺寸
+    """
+    if image is None:
+        return None, "請上傳圖片"
+    
+    # 如果有裁切數據，使用用戶選擇的區域
+    if crop_data is not None:
+        # Gradio 的 Image 組件在編輯模式下會返回包含裁切信息的數據
+        # 這裡我們處理裁切後的圖片
+        processed_image = image
+    else:
+        # 如果沒有裁切數據，自動計算最佳裁切區域
+        crop_box = calculate_crop_box(image)
+        processed_image = image.crop(crop_box)
+    
+    # 調整為目標尺寸
+    target_size = (1170, 391)
+    final_image = processed_image.resize(target_size, Image.Resampling.LANCZOS)
+    
+    return final_image, f"圖片已處理完成！尺寸：{final_image.size}"
+
+def auto_crop_preview(image):
+    """
+    自動裁切預覽
+    """
+    if image is None:
+        return None, "請上傳圖片"
+    
+    crop_box = calculate_crop_box(image)
+    cropped = image.crop(crop_box)
+    
+    # 創建預覽圖片，顯示裁切區域
+    preview = image.copy()
+    from PIL import ImageDraw
+    draw = ImageDraw.Draw(preview)
+    
+    # 繪製裁切框
+    draw.rectangle(crop_box, outline="red", width=3)
+    
+    return preview, f"建議裁切區域：{crop_box}"
+
+# 創建 Gradio 界面
+with gr.Blocks(title="圖片裁切工具", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🖼️ 圖片裁切工具")
+    gr.Markdown("### 將任意尺寸的圖片按 1170:391 比例裁切並調整為目標尺寸")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            # 圖片上傳區域
+            input_image = gr.Image(
+                label="上傳圖片",
+                type="pil",
+                height=400
+            )
+            
+            # 按鈕區域
+            with gr.Row():
+                preview_btn = gr.Button("🔍 預覽裁切區域", variant="secondary")
+                process_btn = gr.Button("✂️ 裁切並處理", variant="primary")
+                
+        with gr.Column(scale=1):
+            # 輸出區域
+            output_image = gr.Image(
+                label="處理後圖片",
+                type="pil",
+                height=400
+            )
+            
+            # 狀態信息
+            status_text = gr.Textbox(
+                label="狀態",
+                value="等待圖片上傳...",
+                interactive=False
+            )
+    
+    # 預覽功能
+    with gr.Row():
+        preview_image = gr.Image(
+            label="裁切區域預覽（紅框顯示建議裁切區域）",
+            type="pil",
+            height=300,
+            visible=False
+        )
+    
+    # 進階設置
+    with gr.Accordion("🔧 進階設置", open=False):
+        gr.Markdown("### 目標尺寸設置")
+        with gr.Row():
+            target_width = gr.Number(
+                label="目標寬度",
+                value=1170,
+                precision=0
+            )
+            target_height = gr.Number(
+                label="目標高度", 
+                value=391,
+                precision=0
+            )
+        
+        quality_slider = gr.Slider(
+            label="輸出品質",
+            minimum=1,
+            maximum=100,
+            value=95,
+            step=1
+        )
+    
+    # 使用說明
+    with gr.Accordion("📖 使用說明", open=False):
+        gr.Markdown("""
+        ### 如何使用：
+        1. **上傳圖片**：點擊上傳區域選擇您的圖片
+        2. **預覽裁切**：點擊「預覽裁切區域」查看建議的裁切區域
+        3. **手動編輯**：在上傳的圖片上直接拖拽選擇裁切區域
+        4. **處理圖片**：點擊「裁切並處理」生成最終圖片
+        5. **下載結果**：右鍵點擊處理後的圖片選擇「另存為」
+        
+        ### 功能特色：
+        - ✨ 自動計算最佳裁切比例
+        - 🎯 支援手動選擇裁切區域
+        - 📏 保持 1170:391 的精確比例
+        - 🖼️ 高品質圖片輸出
+        - 💾 簡單的下載流程
+        """)
+    
+    # 事件綁定
+    preview_btn.click(
+        fn=auto_crop_preview,
+        inputs=[input_image],
+        outputs=[preview_image, status_text]
+    ).then(
+        fn=lambda: gr.update(visible=True),
+        outputs=[preview_image]
+    )
+    
+    process_btn.click(
+        fn=process_image,
+        inputs=[input_image],
+        outputs=[output_image, status_text]
+    )
+    
+    # 當圖片上傳時自動更新狀態
+    input_image.change(
+        fn=lambda img: "圖片已上傳，可以開始處理！" if img is not None else "請上傳圖片",
+        inputs=[input_image],
+        outputs=[status_text]
+    )
+
+# 啟動應用程式
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True
+    )

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=4.0.0
+pillow>=9.0.0
+numpy>=1.21.0