Create app.py

app.py

@@ -0,0 +1,192 @@
+import cv2
+import numpy as np
+import gradio as gr
+
+def hsv_filter(image, 
+               h_low=0, h_high=179, 
+               s_low=0, s_high=255, 
+               v_low=0, v_high=255):
+    """
+    對輸入的圖像應用 HSV 過濾
+    
+    Args:
+        image: 輸入的圖像（來自網路攝像頭或上傳）
+        h_low, h_high: Hue（色調）的最低和最高值
+        s_low, s_high: Saturation（飽和度）的最低和最高值
+        v_low, v_high: Value（亮度）的最低和最高值
+    
+    Returns:
+        原始圖像、HSV 過濾遮罩和過濾後的結果
+    """
+    if image is None:
+        return None, None, None
+    
+    # 將圖像轉換為 HSV 色彩空間
+    hsv = cv2.cvtColor(image, cv2.COLOR_RGB2HSV)
+    
+    # 設置 HSV 過濾範圍
+    lower = np.array([h_low, s_low, v_low])
+    upper = np.array([h_high, s_high, v_high])
+    
+    # 建立遮罩
+    mask = cv2.inRange(hsv, lower, upper)
+    
+    # 使用遮罩從原始圖像中提取物體
+    result = cv2.bitwise_and(image, image, mask=mask)
+    
+    # 將遮罩轉換為 RGB 以便在 Gradio 中顯示
+    mask_rgb = cv2.cvtColor(mask, cv2.COLOR_GRAY2RGB)
+    
+    return image, mask_rgb, result
+
+def process_webcam(image, h_low, h_high, s_low, s_high, v_low, v_high):
+    """
+    處理網路攝像頭的輸入
+    
+    Args:
+        image: 來自網路攝像頭的圖像
+        h_low, h_high, s_low, s_high, v_low, v_high: HSV 過濾參數
+    
+    Returns:
+        處理後的圖像結果（原始、遮罩、過濾後）
+    """
+    # Gradio 的 webcam 輸入是 RGB 格式，OpenCV 使用 BGR
+    # 所以需要轉換顏色順序
+    image_bgr = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
+    
+    # 應用 HSV 過濾
+    orig, mask, result = hsv_filter(
+        cv2.cvtColor(image_bgr, cv2.COLOR_BGR2RGB),  # 轉回 RGB 給過濾函數
+        h_low, h_high, s_low, s_high, v_low, v_high
+    )
+    
+    return orig, mask, result
+
+def process_image(image, h_low, h_high, s_low, s_high, v_low, v_high):
+    """
+    處理上傳的圖像
+    
+    Args:
+        image: 上傳的圖像
+        h_low, h_high, s_low, s_high, v_low, v_high: HSV 過濾參數
+    
+    Returns:
+        處理後的圖像結果（原始、遮罩、過濾後）
+    """
+    if image is None:
+        return None, None, None
+    
+    return hsv_filter(image, h_low, h_high, s_low, s_high, v_low, v_high)
+
+# 建立 Gradio 界面
+with gr.Blocks(title="HSV 顏色過濾器") as demo:
+    gr.Markdown("# HSV 顏色過濾器")
+    gr.Markdown("使用滑桿調整 HSV 值範圍，實時過濾圖像中的顏色")
+    
+    with gr.Tab("網路攝像頭"):
+        with gr.Row():
+            # 網路攝像頭輸入
+            webcam_input = gr.Image(source="webcam", streaming=True, label="攝像頭輸入")
+        
+        with gr.Row():
+            # HSV 滑桿控制（用於網路攝像頭）
+            with gr.Column():
+                h_low_webcam = gr.Slider(0, 179, 0, step=1, label="H Low")
+                h_high_webcam = gr.Slider(0, 179, 179, step=1, label="H High")
+            with gr.Column():
+                s_low_webcam = gr.Slider(0, 255, 0, step=1, label="S Low")
+                s_high_webcam = gr.Slider(0, 255, 255, step=1, label="S High")
+            with gr.Column():
+                v_low_webcam = gr.Slider(0, 255, 0, step=1, label="V Low")
+                v_high_webcam = gr.Slider(0, 255, 255, step=1, label="V High")
+        
+        with gr.Row():
+            # 顯示結果
+            webcam_original = gr.Image(label="原始圖像")
+            webcam_mask = gr.Image(label="遮罩")
+            webcam_result = gr.Image(label="過濾結果")
+    
+    with gr.Tab("圖像上傳"):
+        with gr.Row():
+            # 圖像上傳區
+            upload_input = gr.Image(label="上傳圖像")
+        
+        with gr.Row():
+            # HSV 滑桿控制（用於上傳圖像）
+            with gr.Column():
+                h_low_upload = gr.Slider(0, 179, 0, step=1, label="H Low")
+                h_high_upload = gr.Slider(0, 179, 179, step=1, label="H High")
+            with gr.Column():
+                s_low_upload = gr.Slider(0, 255, 0, step=1, label="S Low")
+                s_high_upload = gr.Slider(0, 255, 255, step=1, label="S High")
+            with gr.Column():
+                v_low_upload = gr.Slider(0, 255, 0, step=1, label="V Low")
+                v_high_upload = gr.Slider(0, 255, 255, step=1, label="V High")
+        
+        with gr.Row():
+            # 顯示結果
+            upload_original = gr.Image(label="原始圖像")
+            upload_mask = gr.Image(label="遮罩")
+            upload_result = gr.Image(label="過濾結果")
+        
+        # 處理上傳圖像的按鈕
+        process_btn = gr.Button("處理圖像")
+        process_btn.click(
+            fn=process_image,
+            inputs=[
+                upload_input,
+                h_low_upload, h_high_upload,
+                s_low_upload, s_high_upload,
+                v_low_upload, v_high_upload
+            ],
+            outputs=[upload_original, upload_mask, upload_result]
+        )
+    
+    # 連接網路攝像頭輸入和滑桿變化到處理函數
+    webcam_input.change(
+        fn=process_webcam,
+        inputs=[
+            webcam_input,
+            h_low_webcam, h_high_webcam,
+            s_low_webcam, s_high_webcam,
+            v_low_webcam, v_high_webcam
+        ],
+        outputs=[webcam_original, webcam_mask, webcam_result]
+    )
+    
+    # 當滑桿值改變時，重新處理網路攝像頭圖像
+    h_low_webcam.change(lambda *args: process_webcam(*args), 
+        inputs=[webcam_input, h_low_webcam, h_high_webcam, s_low_webcam, s_high_webcam, v_low_webcam, v_high_webcam],
+        outputs=[webcam_original, webcam_mask, webcam_result])
+    h_high_webcam.change(lambda *args: process_webcam(*args), 
+        inputs=[webcam_input, h_low_webcam, h_high_webcam, s_low_webcam, s_high_webcam, v_low_webcam, v_high_webcam],
+        outputs=[webcam_original, webcam_mask, webcam_result])
+    s_low_webcam.change(lambda *args: process_webcam(*args), 
+        inputs=[webcam_input, h_low_webcam, h_high_webcam, s_low_webcam, s_high_webcam, v_low_webcam, v_high_webcam],
+        outputs=[webcam_original, webcam_mask, webcam_result])
+    s_high_webcam.change(lambda *args: process_webcam(*args), 
+        inputs=[webcam_input, h_low_webcam, h_high_webcam, s_low_webcam, s_high_webcam, v_low_webcam, v_high_webcam],
+        outputs=[webcam_original, webcam_mask, webcam_result])
+    v_low_webcam.change(lambda *args: process_webcam(*args), 
+        inputs=[webcam_input, h_low_webcam, h_high_webcam, s_low_webcam, s_high_webcam, v_low_webcam, v_high_webcam],
+        outputs=[webcam_original, webcam_mask, webcam_result])
+    v_high_webcam.change(lambda *args: process_webcam(*args), 
+        inputs=[webcam_input, h_low_webcam, h_high_webcam, s_low_webcam, s_high_webcam, v_low_webcam, v_high_webcam],
+        outputs=[webcam_original, webcam_mask, webcam_result])
+    
+    # 當滑桿值改變時，重新處理上傳的圖像
+    for slider in [h_low_upload, h_high_upload, s_low_upload, s_high_upload, v_low_upload, v_high_upload]:
+        slider.change(
+            fn=process_image,
+            inputs=[
+                upload_input,
+                h_low_upload, h_high_upload,
+                s_low_upload, s_high_upload,
+                v_low_upload, v_high_upload
+            ],
+            outputs=[upload_original, upload_mask, upload_result]
+        )
+
+# 啟動 Gradio 應用
+if __name__ == "__main__":
+    demo.launch()