Create app.py

app.py

@@ -0,0 +1,125 @@
+import os
+import gradio as gr
+from transformers import AutoModelForImageSegmentation
+import torch
+from torchvision import transforms
+from PIL import Image
+import timm
+
+# --- 1. 初始化模型 ---
+model_id = "briaai/RMBG-2.0"
+print(f"正在載入模型: {model_id} ...")
+
+hf_token = os.getenv("HF_TOKEN")
+if not hf_token:
+    print("⚠️ 警告: 未偵測到 HF_TOKEN")
+
+try:
+    model = AutoModelForImageSegmentation.from_pretrained(
+        model_id, trust_remote_code=True, token=hf_token
+    )
+    device = torch.device("cpu")
+    model.to(device)
+    model.eval()
+    print("✅ 模型載入成功！")
+except Exception as e:
+    print(f"❌ 模型載入失敗: {e}")
+
+# --- 2. 圖像處理 ---
+def process_image(input_image):
+    if input_image is None:
+        return None
+    
+    image_size = (1024, 1024)
+    transform_image = transforms.Compose([
+        transforms.Resize(image_size),
+        transforms.ToTensor(),
+        transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225])
+    ])
+    
+    input_images = transform_image(input_image).unsqueeze(0).to(device)
+    
+    with torch.no_grad():
+        preds = model(input_images)[-1].sigmoid().cpu()
+    
+    pred = preds[0].squeeze()
+    pred_pil = transforms.ToPILImage()(pred)
+    mask = pred_pil.resize(input_image.size)
+    image = input_image.convert("RGBA")
+    image.putalpha(mask)
+    return image
+
+# --- 3. 手動 CSS 美化 (這是重點！) ---
+# 我們不依賴 theme 參數，直接用 CSS 寫樣式
+custom_css = """
+/* 全域字體與背景 */
+.gradio-container {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
+    background-color: #f7f9fc !important; /* 淡淡的藍灰色背景 */
+}
+
+/* 隱藏預設的頁腳 */
+footer {display: none !important;}
+
+/* 按鈕美化 */
+button.primary {
+    background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%) !important; /* 紫色漸層 */
+    border: none !important;
+    color: white !important;
+    font-weight: bold !important;
+    border-radius: 25px !important; /* 圓角按鈕 */
+    transition: transform 0.2s;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+button.primary:hover {
+    transform: scale(1.02); /* 滑鼠移過去會放大一點 */
+    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
+}
+
+/* 圖片框美化 */
+.image-container {
+    border-radius: 15px !important;
+    overflow: hidden;
+    border: 2px solid #e2e8f0;
+    background-color: white;
+}
+
+/* 標題樣式 */
+h1 {
+    text-align: center;
+    color: #1e293b;
+    font-weight: 800 !important;
+}
+"""
+
+# --- 4. 建立介面 ---
+with gr.Blocks(css=custom_css) as app:
+    
+    # 偷渡 HTML Meta Tags (嘗試觸發 PWA)
+    gr.HTML("""
+    <div style="display: none;">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="theme-color" content="#f7f9fc">
+    </div>
+    """)
+
+    with gr.Column():
+        gr.Markdown("# ✨ AI 智能去背")
+        gr.Markdown("上傳圖片，一鍵移除背景 (RMBG-2.0)")
+        
+        with gr.Row():
+            # 左邊：輸入區
+            with gr.Column():
+                input_img = gr.Image(type="pil", label="📸 上傳或拍照", elem_classes="image-container")
+                # 這裡把 variant="primary" 加上去，讓 CSS 抓到它變成紫色按鈕
+                btn = gr.Button("🚀 開始去背", variant="primary", size="lg")
+            
+            # 右邊：輸出區
+            with gr.Column():
+                output_img = gr.Image(type="pil", label="✨ 去背完成 (長按儲存)", elem_classes="image-container")
+
+    btn.click(fn=process_image, inputs=input_img, outputs=output_img)
+
+if __name__ == "__main__":
+    app.launch()