Update app.py

app.py

@@ -1,16 +1,36 @@
 import gradio as gr
-from PIL import Image
+from transformers import DetrImageProcessor, DetrForObjectDetection
+import torch
+from PIL import Image, ImageDraw
 
-def process_image(img):
-    # Future: Convert image to Figma-compatible format (like SVG or .fig)
-    return "Image received. Converting to Figma design..."
+# Load the DETR layout model
+model_name = "cmarkea/detr-layout-detection"
+processor = DetrImageProcessor.from_pretrained(model_name)
+model = DetrForObjectDetection.from_pretrained(model_name)
 
-demo = gr.Interface(
-    fn=process_image,
+def detect_layout(image):
+    inputs = processor(images=image, return_tensors="pt")
+    outputs = model(**inputs)
+    target_sizes = torch.tensor([image.size[::-1]])  # H x W
+    results = processor.post_process_object_detection(outputs, target_sizes=target_sizes, threshold=0.7)[0]
+
+    draw = ImageDraw.Draw(image)
+    labels = []
+    for score, label, box in zip(results["scores"], results["labels"], results["boxes"]):
+        box = [round(i, 2) for i in box.tolist()]
+        draw.rectangle(box, outline="red", width=2)
+        label_name = model.config.id2label[label.item()]
+        draw.text((box[0] + 4, box[1]), f"{label_name} ({round(score.item(), 2)})", fill="red")
+        labels.append({"label": label_name, "score": round(score.item(), 2), "box": box})
+
+    return image, labels
+
+iface = gr.Interface(
+    fn=detect_layout,
     inputs=gr.Image(type="pil"),
-    outputs="text",
-    title="Image to Figma Layers",
-    description="Upload a PNG or JPEG image. This will be converted into editable Figma design layers."
+    outputs=[gr.Image(type="pil"), gr.JSON()],
+    title="Image to Figma Layers (with DETR)",
+    description="Upload a PNG or JPEG UI image to detect editable layers using a layout-aware DETR model."
 )
 
-demo.launch()
+iface.launch()