updated README.md, requirements.txt, Added ui/gradio_ui.py

README.md

@@ -10,9 +10,21 @@ pinned: false
 
 # 🏗️ Auto Pick MobileCLIP API
 
-This Hugging Face Space hosts a production-ready API for ranking real estate images based on their suitability for virtual staging. It uses Apple's powerful and efficient **MobileCLIP2** model to analyze images against user-defined text prompts, providing a "stageability score."
+This Hugging Face Space hosts a powerful tool for automatically ranking images. It uses Apple's efficient **MobileCLIP2** model to score images against your criteria, making it perfect for auto-picking the best photos for real estate, e-commerce, or any other use case.
 
-The application is built with **FastAPI** for high performance and is containerized with **Docker** to ensure a consistent and reliable environment.
+The application provides two ways to interact:
+
+1. **A user-friendly Web UI** (built with Gradio) for interactive testing and demonstration.
+2. **A high-performance REST API** (built with FastAPI) for programmatic integration.
+
+## ✨ Web UI (Gradio)
+
+When you visit this Space, you are greeted with an interactive interface where you can:
+
+- **Upload an image** directly from your computer.
+- **Customize the prompts** to define what makes a "good" or "bad" image for your specific needs.
+- **Add an "aesthetic" prompt** to give bonus points for specific features (e.g., "contains a modern fireplace").
+- **See the score** calculated instantly.
 
 ## 🤔 How It Works
 
@@ -28,16 +40,16 @@ The API exposes a single endpoint for ranking images.
 
 ### Endpoint: `/api/v1/rank_image`
 
-* **Method:** `POST`
-* **Content-Type:** `multipart/form-data`
+- **Method:** `POST`
+- **Content-Type:** `multipart/form-data`
 
 #### Parameters
 
 1. `file`: The image file you want to analyze (`.jpg`, `.png`, etc.).
 2. `prompts` (Optional): A JSON string containing custom prompts. If not provided, default prompts are used.
-    * `prompt_good` (string): Describes an ideal room for staging.
-    * `prompt_bad` (string): Describes a room that is difficult to stage.
-    * `prompt_aesthetic` (string, optional): Describes a desirable feature to add bonus points for.
+    - `prompt_good` (string): Describes an ideal room for staging.
+    - `prompt_bad` (string): Describes a room that is difficult to stage.
+    - `prompt_aesthetic` (string, optional): Describes a desirable feature to add bonus points for.
 
 ---
 

app/main.py

@@ -1,14 +1,14 @@
 from fastapi import FastAPI
 from app.api.endpoints import staging
+from app.ui.gradio_ui import gradio_app 
 
 app = FastAPI(
-    title="Virtual Staging Ranker API",
-    description="An API to rank images based on their suitability for virtual staging using MobileCLIP2.",
+    title="Auto Pick MobileCLIP API", 
+    description="An API to rank images using MobileCLIP2. Ideal for auto-picking the best photos for real estate, e-commerce, and more.", # <-- CHANGED
     version="1.0.0"
 )
 
-app.include_router(staging.router, prefix="/api/v1", tags=["Staging"])
 
-@app.get("/")
-def read_root():
-    return {"message": "Welcome to the Staging Ranker API. Visit /docs for more info."}
+app.include_router(staging.router, prefix="/api/v1", tags=["Image Ranking"])
+
+app.mount("/", gradio_app) 

app/ui/gradio_ui.py

@@ -0,0 +1,70 @@
+import gradio as gr
+from PIL import Image
+from app.models.clip_model import staging_ranker
+from app.schemas.staging import StagingRequest
+
+def rank_image_ui(image, prompt_good, prompt_bad, prompt_aesthetic):
+    """
+    Bridge function between the Gradio UI and our model engine.
+    """
+    if image is None:
+        raise gr.Error("Please upload an image to rank.")
+
+    pil_image = Image.fromarray(image)
+
+    aesthetic = prompt_aesthetic if prompt_aesthetic.strip() else None
+    prompts = StagingRequest(
+        prompt_good=prompt_good,
+        prompt_bad=prompt_bad,
+        prompt_aesthetic=aesthetic
+    )
+
+    score = staging_ranker.compute_score(pil_image, prompts)
+
+    return round(score, 4)
+
+
+default_prompts = StagingRequest()
+
+with gr.Blocks(theme=gr.themes.Soft(), css=".gradio-container {max-width: 960px !important;}") as gradio_app:
+    gr.Markdown("# 🤖🖼️ Auto Pick MobileCLIP")
+    gr.Markdown("Upload an image and provide text prompts to score its quality and suitability. The higher the score, the better the match.")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            image_input = gr.Image(type="numpy", label="Upload Image")
+            
+            gr.Markdown("### Customize Scoring Prompts")
+            prompt_good_input = gr.Textbox(
+                label="✅ Good Prompt",
+                value=default_prompts.prompt_good,
+                lines=3
+            )
+            prompt_bad_input = gr.Textbox(
+                label="❌ Bad Prompt",
+                value=default_prompts.prompt_bad,
+                lines=3
+            )
+            prompt_aesthetic_input = gr.Textbox(
+                label="✨ Aesthetic 'Plus' Prompt (Optional)",
+                placeholder="e.g., 'features a modern fireplace' or 'hardwood floors'",
+                lines=2
+            )
+            
+            submit_button = gr.Button("Rank Image", variant="primary")
+
+        with gr.Column(scale=1):
+            output_score = gr.Number(label="🏆 Stageability Score", interactive=False)
+
+    submit_button.click(
+        fn=rank_image_ui,
+        inputs=[
+            image_input,
+            prompt_good_input,
+            prompt_bad_input,
+            prompt_aesthetic_input
+        ],
+        outputs=output_score
+    )
+
+    

requirements.txt

@@ -5,6 +5,6 @@ pydantic-settings
 python-multipart
 torch
 Pillow
-
+gradio
 git+https://github.com/mlfoundations/open_clip.git
 git+https://github.com/apple/ml-mobileclip