Upload app.py

app.py

@@ -3,6 +3,8 @@ import numpy as np
 from PIL import Image
 import io
 import base64
+import tempfile
+import os
 
 def calculate_crop_box(image, target_ratio=1170/391):
     """
@@ -30,7 +32,7 @@ def calculate_crop_box(image, target_ratio=1170/391):
 
 def process_image(image, crop_data=None):
     """
-    處理圖片：裁切並調整為目標尺寸
+    處理圖片：裁切並調整為目標尺寸，並保存為 JPG 格式
     """
     if image is None:
         return None, "請上傳圖片"
@@ -49,7 +51,21 @@ def process_image(image, crop_data=None):
     target_size = (1170, 391)
     final_image = processed_image.resize(target_size, Image.Resampling.LANCZOS)
     
-    return final_image, f"圖片已處理完成！尺寸：{final_image.size}"
+    # 轉換為 RGB 模式以確保 JPG 格式輸出
+    if final_image.mode in ('RGBA', 'LA', 'P'):
+        # 創建白色背景
+        rgb_image = Image.new('RGB', final_image.size, (255, 255, 255))
+        if final_image.mode == 'P':
+            final_image = final_image.convert('RGBA')
+        rgb_image.paste(final_image, mask=final_image.split()[-1] if final_image.mode == 'RGBA' else None)
+        final_image = rgb_image
+    
+    # 保存為 JPG 格式的臨時檔案
+    temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.jpg')
+    final_image.save(temp_file.name, format='JPEG', quality=95, optimize=True)
+    temp_file.close()
+    
+    return temp_file.name, f"圖片已處理完成！尺寸：{final_image.size}，格式：JPG"
 
 def auto_crop_preview(image):
     """
@@ -71,6 +87,28 @@ def auto_crop_preview(image):
     
     return preview, f"建議裁切區域：{crop_box}"
 
+def manual_crop_image(image, crop_coords):
+    """
+    手動裁切圖片
+    """
+    if image is None:
+        return None, "請上傳圖片"
+    
+    if crop_coords is None:
+        return auto_crop_preview(image)
+    
+    # 解析裁切座標
+    x, y, width, height = crop_coords
+    
+    # 執行裁切
+    cropped = image.crop((x, y, x + width, y + height))
+    
+    # 調整為目標尺寸
+    target_size = (1170, 391)
+    final_image = cropped.resize(target_size, Image.Resampling.LANCZOS)
+    
+    return final_image, f"手動裁切完成！裁切區域：({x}, {y}, {width}, {height})"
+
 # 創建 Gradio 界面
 with gr.Blocks(title="圖片裁切工具", theme=gr.themes.Soft()) as demo:
     gr.Markdown("# 🖼️ 圖片裁切工具")
@@ -78,24 +116,46 @@ with gr.Blocks(title="圖片裁切工具", theme=gr.themes.Soft()) as demo:
     
     with gr.Row():
         with gr.Column(scale=1):
-            # 圖片上傳區域
+            # 圖片上傳區域（支援裁切編輯）
             input_image = gr.Image(
-                label="上傳圖片",
+                label="上傳圖片（可直接在圖片上拖拽選擇裁切區域）",
                 type="pil",
-                height=400
+                height=400,
+                crop_size="1170:391",
+                interactive=True
+            )
+            
+            # 手動裁切圖片區域
+            crop_image = gr.Image(
+                label="手動裁切區域（拖拽選擇後點擊下方按鈕）",
+                type="pil", 
+                height=400,
+                tool="select",
+                interactive=True,
+                visible=False
             )
             
             # 按鈕區域
             with gr.Row():
-                preview_btn = gr.Button("🔍 預覽裁切區域", variant="secondary")
+                preview_btn = gr.Button("🔍 預覽建議區域", variant="secondary")
+                edit_btn = gr.Button("✏️ 手動編輯", variant="secondary")
                 process_btn = gr.Button("✂️ 裁切並處理", variant="primary")
+                reset_btn = gr.Button("🔄 重置", variant="secondary")
                 
         with gr.Column(scale=1):
             # 輸出區域
             output_image = gr.Image(
-                label="處理後圖片",
-                type="pil",
-                height=400
+                label="處理後圖片 (JPG格式)",
+                type="filepath",
+                height=400,
+                interactive=False
+            )
+            
+            # 下載按鈕
+            download_btn = gr.DownloadButton(
+                label="📥 下載 JPG 圖片",
+                variant="primary",
+                visible=False
             )
             
             # 狀態信息
@@ -142,18 +202,20 @@ with gr.Blocks(title="圖片裁切工具", theme=gr.themes.Soft()) as demo:
         gr.Markdown("""
         ### 如何使用：
         1. **上傳圖片**：點擊上傳區域選擇您的圖片
-        2. **預覽裁切**：點擊「預覽裁切區域」查看建議的裁切區域
-        3. **手動編輯**：在上傳的圖片上直接拖拽選擇裁切區域
-        4. **處理圖片**：點擊「裁切並處理」生成最終圖片
-        5. **下載結果**：右鍵點擊處理後的圖片選擇「另存為」
+        2. **自動裁切**：點擊��預覽建議區域」查看系統建議的裁切區域
+        3. **手動裁切**：點擊「手動編輯」後在圖片上拖拽選擇想要的區域
+        4. **處理圖片**：點擊「裁切並處理」生成 JPG 格式的最終圖片
+        5. **下載結果**：點擊「下載 JPG 圖片」按鈕下載處理後的圖片
         
         ### 功能特色：
         - ✨ 自動計算最佳裁切比例
-        - 🎯 支援手動選擇裁切區域
+        - 🎯 支援手動拖拽選擇裁切區域
         - 📏 保持 1170:391 的精確比例
-        - 🖼️ 高品質圖片輸出
-        - 💾 簡單的下載流程
+        - 🖼️ 輸出高品質 JPG 格式圖片
+        - 💾 簡單的一鍵下載功能
+        - 🔄 重置功能方便重新開始
         """)
+        
     
     # 事件綁定
     preview_btn.click(
@@ -165,9 +227,37 @@ with gr.Blocks(title="圖片裁切工具", theme=gr.themes.Soft()) as demo:
         outputs=[preview_image]
     )
     
+    edit_btn.click(
+        fn=lambda img: (gr.update(visible=True, value=img), gr.update(visible=False)),
+        inputs=[input_image],
+        outputs=[crop_image, input_image]
+    )
+    
+    reset_btn.click(
+        fn=lambda: (gr.update(visible=True, value=None), gr.update(visible=False, value=None), gr.update(visible=False), None, "請上傳圖片"),
+        outputs=[input_image, crop_image, preview_image, output_image, status_text]
+    )
+    
+    def process_and_download(image):
+        if image is None:
+            return None, "請上傳圖片", gr.update(visible=False)
+        
+        result_path, status = process_image(image)
+        if result_path:
+            return result_path, status, gr.update(visible=True, value=result_path)
+        else:
+            return None, status, gr.update(visible=False)
+    
     process_btn.click(
-        fn=process_image,
+        fn=process_and_download,
         inputs=[input_image],
+        outputs=[output_image, status_text, download_btn]
+    )
+    
+    # 裁切圖片處理
+    crop_image.select(
+        fn=manual_crop_image,
+        inputs=[crop_image, crop_image.select],
         outputs=[output_image, status_text]
     )