1. update README

2. adjust sample image location
3. adjust some display texts in app.py

README.md

@@ -9,4 +9,108 @@ app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🎯 Text-Guided Image Segmentation Demo
+
+基於 **Grounding DINO** 和 **SAM (Segment Anything Model)** 的文字引導圖片分割應用，使用 Gradio 構建互動式介面。
+
+## 🚀 快速開始
+
+### 安裝依賴
+
+```bash
+pip install -r requirements.txt
+```
+
+### 運行應用
+
+```bash
+gradio app.py
+```
+
+或
+
+```bash
+python app.py
+```
+
+應用將在 `http://localhost:7860` 啟動。
+
+## 📦 依賴項
+
+- `gradio` - 互動式 Web 介面
+- `transformers` - Hugging Face 模型庫
+- `torch` - PyTorch 深度學習框架
+- `Pillow` - 圖像處理
+- `numpy` - 數值計算
+
+## 🎮 使用方法
+
+1. **上傳圖片**：點擊或拖拽圖片到輸入區域
+2. **輸入文字提示**：
+   - 單個物件：`car`、`person`、`sky`
+   - 多個物件：`car. sky. road.`（用句號分隔）
+3. **點擊 Segment 按鈕**：開始分割
+4. **查看結果**：
+   - 左側顯示分割遮罩（不同物件用不同顏色）
+   - 右側顯示除錯資訊（檢測數量、標籤、信心度）
+
+## 🎨 顏色標示
+
+檢測到的物件會按順序使用以下顏色作為mask：
+
+1. 🔴 紅色
+2. 🟢 綠色
+3. 🔵 藍色
+4. 🟡 黃色
+
+## 🔧 技術架構
+
+### 模型
+
+- **Grounding DINO** (`IDEA-Research/grounding-dino-base`)
+  - 用於零樣本物件檢測
+  - 根據文字描述定位物件
+  
+- **SAM** (`facebook/sam-vit-base`)
+  - 用於精確分割
+  - 基於檢測框生成高質量遮罩
+
+### 工作流程
+
+```
+輸入圖片 + 文字提示
+    ↓
+Grounding DINO 檢測物件
+    ↓
+SAM 生成分割遮罩
+    ↓
+多物件遮罩疊加（不同顏色）
+    ↓
+輸出結果
+```
+
+## 💡 使用技巧
+
+### 提高檢測準確度
+
+1. **使用具體描述**：`blue car` 比 `car` 更精確
+2. **調整閾值**：當前閾值為 0.15，可在 source code 中調整
+3. **多次嘗試**：嘗試不同的文字表達方式或是使用英文描述
+
+## 📝 程式碼結構
+
+```
+text-image-seg/
+├── app.py
+├── requirements.txt
+├── README.md
+├── sample_images/
+├── .gitattributes
+└── .gitignore
+```
+
+## 🔗 相關資源
+
+- [Grounding DINO](https://github.com/IDEA-Research/GroundingDINO)
+- [Segment Anything Model (SAM)](https://github.com/facebookresearch/segment-anything)
+- [Gradio 文檔](https://www.gradio.app/docs)

app.py

@@ -142,8 +142,8 @@ def segment_and_display(image, text):
     
     result_image, debug_info = segment_image_with_text(image, text)
     
-    output_text = f"檢測到 {debug_info.get('num_detections', 0)} 個物件\n"
-    output_text += f"原始文字提示: '{debug_info.get('original_prompt', text)}'\n"
+    output_text = f"檢測到 {debug_info.get('num_detections', 0)} 個物件\n---\n"
+    output_text += f"輸入文字: '{debug_info.get('original_prompt', text)}'\n---\n"
     
     if 'labels' in debug_info and len(debug_info['labels']) > 0:
         output_text += "檢測結果:\n"
@@ -151,7 +151,6 @@ def segment_and_display(image, text):
             color_map = ['紅色', '綠色', '藍色', '黃色']
             color_name = color_map[i % len(color_map)]
             output_text += f"  {i+1}. {label} (信心度: {score:.2f}, 顏色: {color_name})\n"
-    
     if 'error' in debug_info:
         output_text += f"\n錯誤: {debug_info['error']}"
     
@@ -159,7 +158,7 @@ def segment_and_display(image, text):
 
 
 with gr.Blocks() as demo:
-    gr.Markdown("# Text-Guided Image Segmentation")
+    gr.Markdown("# Text-Guided Image Segmentation Demo")
     gr.Markdown("""
     ### 使用說明
     1. 上傳一張圖片 (有提供預設圖片方便 demo)
@@ -170,7 +169,7 @@ with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column(scale=1):
             # 預設圖片 car.jpg
-            image_input = gr.Image(label="Input Image", value="car.jpg")
+            image_input = gr.Image(label="Input Image", value="sample_images/car.jpg")
             text_input = gr.Textbox(
                 label="Text Prompt", 
                 placeholder="e.g. 'car. sky. road.'",