Update app.py

app.py

@@ -1,49 +1,120 @@
 import gradio as gr
 import stone
-import tempfile
-import os
-
-def get_palette(image):
-    """
-    Detects dominant skin colors in the uploaded image
-    and returns an HTML row of color swatches.
-    """
-    # Save the upload to a temp file
+import tempfile, os
+
+def detect_and_palette(image):
+    # 1) Save upload to a temp file
     with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
         image.save(tmp, format="PNG")
         tmp_path = tmp.name
 
     try:
-        # Run the stone classifier
-        result = stone.process(tmp_path, image_type="auto", return_report_image=False)
+        # 2) Run stone with return_report_image=True to get annotated face image
+        result = stone.process(
+            tmp_path,
+            image_type="auto",
+            return_report_image=True
+        )
     finally:
         os.remove(tmp_path)
 
     faces = result.get("faces", [])
     if not faces:
-        return "<p>No face detected.</p>"
+        return None, "<p>No face detected.</p>"
+
+    # 3) Grab the first annotated image (PIL.Image)
+    report_images = result.get("report_images", [])
+    annotated_img = report_images[0]
 
-    # Extract the hex codes of the dominant colors
+    # 4) Extract dominant skin-tone hex codes
     colors = [c["color"] for c in faces[0]["dominant_colors"]]
+    swatches_html = "".join(
+        f'<div style="background:{hexcode}; width:50px; height:50px; '
+        'display:inline-block; margin:2px; border-radius:4px;"></div>'
+        for hexcode in colors
+    )
+    swatches_html = f"<div style='display:flex; flex-wrap:wrap;'>{swatches_html}</div>"
+
+    # Return the annotated face image + HTML swatches
+    return annotated_img, swatches_html
+
+# Build the Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("## 🤳 Face‑Based Skin Tone Palette")
+    gr.Markdown("Upload a clear portrait to detect your face and extract your skin‑tone palette.")
+
+    with gr.Row():
+        inp = gr.Image(type="pil", label="Your Photo")
+        btn = gr.Button("Analyze")
+
+    img_out = gr.Image(type="pil", label="Detected Face Region")
+    swatches_out = gr.HTML(label="Skin‑Tone Palette")
+
+    btn.click(
+        fn=detect_and_palette,
+        inputs=inp,
+        outputs=[img_out, swatches_out]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+import gradio as gr
+import stone
+import tempfile, os
+
+def detect_and_palette(image):
+    # 1) Save upload to a temp file
+    with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as tmp:
+        image.save(tmp, format="PNG")
+        tmp_path = tmp.name
+
+    try:
+        # 2) Run stone with return_report_image=True to get annotated face image
+        result = stone.process(
+            tmp_path,
+            image_type="auto",
+            return_report_image=True
+        )
+    finally:
+        os.remove(tmp_path)
 
-    # Build HTML swatches
+    faces = result.get("faces", [])
+    if not faces:
+        return None, "<p>No face detected.</p>"
+
+    # 3) Grab the first annotated image (PIL.Image)
+    report_images = result.get("report_images", [])
+    annotated_img = report_images[0]
+
+    # 4) Extract dominant skin-tone hex codes
+    colors = [c["color"] for c in faces[0]["dominant_colors"]]
     swatches_html = "".join(
         f'<div style="background:{hexcode}; width:50px; height:50px; '
         'display:inline-block; margin:2px; border-radius:4px;"></div>'
         for hexcode in colors
     )
-    return f"<div style='display:flex; flex-wrap:wrap;'>{swatches_html}</div>"
+    swatches_html = f"<div style='display:flex; flex-wrap:wrap;'>{swatches_html}</div>"
 
-# Define the Gradio interface
+    # Return the annotated face image + HTML swatches
+    return annotated_img, swatches_html
+
+# Build the Gradio interface
 with gr.Blocks() as demo:
-    gr.Markdown("# 🎨 Skin Color Palette API")
-    gr.Markdown("Upload a clear portrait to extract a palette of your skin's dominant tones.")
+    gr.Markdown("## 🤳 Face‑Based Skin Tone Palette")
+    gr.Markdown("Upload a clear portrait to detect your face and extract your skin‑tone palette.")
+
     with gr.Row():
         inp = gr.Image(type="pil", label="Your Photo")
-        btn = gr.Button("Generate Palette")
-    out = gr.HTML(label="Color Palette")
+        btn = gr.Button("Analyze")
 
-    btn.click(fn=get_palette, inputs=inp, outputs=out)
+    img_out = gr.Image(type="pil", label="Detected Face Region")
+    swatches_out = gr.HTML(label="Skin‑Tone Palette")
+
+    btn.click(
+        fn=detect_and_palette,
+        inputs=inp,
+        outputs=[img_out, swatches_out]
+    )
 
 if __name__ == "__main__":
     demo.launch()