feat: 🚀 Add YOLO26 Gradio app implementation

Signed-off-by: Onuralp SEZER <onuralp@ultralytics.com>

README.md

@@ -1,7 +1,7 @@
 ---
 title: YOLO26
 emoji: 💻
-colorFrom: gray
+colorFrom: blue
 colorTo: purple
 sdk: gradio
 sdk_version: 6.4.0

app.py

@@ -0,0 +1,262 @@
+# Ultralytics 🚀 AGPL-3.0 License - https://ultralytics.com/license
+
+import tempfile
+import cv2
+import gradio as gr
+import numpy as np
+import PIL.Image as Image
+from ultralytics import YOLO
+from pathlib import Path
+
+
+MODEL_CHOICES = [
+    "yolo26n",
+    "yolo26s",
+    "yolo26m",
+    "yolo26n-seg",
+    "yolo26s-seg",
+    "yolo26m-seg",
+    "yolo26n-pose",
+    "yolo26s-pose",
+    "yolo26m-pose",
+    "yolo26n-obb",
+    "yolo26s-obb",
+    "yolo26m-obb",
+    "yolo26n-cls",
+    "yolo26s-cls",
+    "yolo26m-cls",
+]
+
+IMAGE_SIZE_CHOICES = [320, 640, 1024]
+CUSTOM_CSS = (Path(__file__).parent / "ultralytics.css").read_text()
+
+def predict_image(img, conf_threshold, iou_threshold, model_name, show_labels, show_conf, imgsz):
+    """Predicts objects in an image using a Ultralytics YOLO model with adjustable confidence and IOU thresholds."""
+    model = YOLO(model_name)
+    results = model.predict(
+        source=img,
+        conf=conf_threshold,
+        iou=iou_threshold,
+        imgsz=imgsz,
+        verbose=False,
+    )
+
+    for r in results:
+        im_array = r.plot(labels=show_labels, conf=show_conf)
+        im = Image.fromarray(im_array[..., ::-1])
+
+    return im
+
+
+def predict_video(video_path, conf_threshold, iou_threshold, model_name, show_labels, show_conf, imgsz):
+    """Predicts objects in a video using a Ultralytics YOLO model and returns the annotated video."""
+    if video_path is None:
+        return None
+
+    model = YOLO(model_name)
+
+    # Open the video
+    cap = cv2.VideoCapture(video_path)
+    if not cap.isOpened():
+        return None
+
+    # Get video properties
+    fps = int(cap.get(cv2.CAP_PROP_FPS))
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+
+    # Create temporary output file
+    temp_output = tempfile.NamedTemporaryFile(suffix=".mp4", delete=False)
+    output_path = temp_output.name
+    temp_output.close()
+
+    # Initialize video writer
+    fourcc = cv2.VideoWriter_fourcc(*"mp4v")
+    out = cv2.VideoWriter(output_path, fourcc, fps, (width, height))
+
+    while True:
+        ret, frame = cap.read()
+        if not ret:
+            break
+
+        # Run inference on the frame
+        results = model.predict(
+            source=frame,
+            conf=conf_threshold,
+            iou=iou_threshold,
+            imgsz=imgsz,
+            verbose=False,
+        )
+
+        # Get the annotated frame
+        annotated_frame = results[0].plot(labels=show_labels, conf=show_conf)
+        out.write(annotated_frame)
+
+    cap.release()
+    out.release()
+
+    return output_path
+
+# Cache model for streaming performance
+_model_cache = {}
+
+def get_model(model_name):
+    """Get or create a cached model instance."""
+    if model_name not in _model_cache:
+        _model_cache[model_name] = YOLO(model_name)
+    return _model_cache[model_name]
+
+
+def predict_webcam(frame, conf_threshold, iou_threshold, model_name, show_labels, show_conf, imgsz):
+    """Predicts objects in a webcam frame using a Ultralytics YOLO model (optimized for streaming)."""
+    if frame is None:
+        return None
+
+    # Use cached model for better streaming performance
+    model = get_model(model_name)
+
+    if isinstance(frame, np.ndarray):
+        # Gradio webcam sends RGB, but Ultralytics YOLO expects BGR for OpenCV operations
+        # Convert RGB to BGR for YOLO
+        frame_bgr = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)
+        
+        # Run inference
+        results = model.predict(
+            source=frame_bgr,
+            conf=conf_threshold,
+            iou=iou_threshold,
+            imgsz=imgsz,
+            verbose=False,
+        )
+
+        # YOLO's plot() returns BGR, convert back to RGB for Gradio display
+        annotated_frame = results[0].plot(labels=show_labels, conf=show_conf)
+        # Convert BGR to RGB for Gradio
+        return cv2.cvtColor(annotated_frame, cv2.COLOR_BGR2RGB)
+
+    return None
+
+
+# Create the Gradio app with tabs
+with gr.Blocks(title="Ultralytics YOLO26 Inference 🚀") as demo:
+    gr.Markdown(
+        """
+<div align="center">
+  <p>
+    <a href="https://www.ultralytics.com/blog/ultralytics-yolo26-the-new-standard-for-edge-first-vision-ai" target="_blank">
+      <img width="50%" src="https://raw.githubusercontent.com/ultralytics/assets/main/yolov8/banner-yolov8.png" alt="Ultralytics YOLO banner"></a>
+  </p>
+  <p style="margin: 3px 0;">
+    <a href="https://docs.ultralytics.com/zh/">中文</a> | <a href="https://docs.ultralytics.com/ko/">한국어</a> | <a href="https://docs.ultralytics.com/ja/">日本語</a> | <a href="https://docs.ultralytics.com/ru/">Русский</a> | <a href="https://docs.ultralytics.com/de/">Deutsch</a> | <a href="https://docs.ultralytics.com/fr/">Français</a> | <a href="https://docs.ultralytics.com/es">Español</a> | <a href="https://docs.ultralytics.com/pt/">Português</a> | <a href="https://docs.ultralytics.com/tr/">Türkçe</a> | <a href="https://docs.ultralytics.com/vi/">Tiếng Việt</a> | <a href="https://docs.ultralytics.com/ar/">العربية</a>
+  </p>
+
+  <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: 3px;">
+    <a href="https://github.com/ultralytics/ultralytics/actions/workflows/ci.yml"><img src="https://github.com/ultralytics/ultralytics/actions/workflows/ci.yml/badge.svg" alt="Ultralytics CI"></a>
+    <a href="https://pepy.tech/projects/ultralytics" style="position: relative; top: -3px;"><img src="https://static.pepy.tech/badge/ultralytics" alt="Ultralytics Downloads"></a>
+    <a href="https://zenodo.org/badge/latestdoi/264818686" style="position: relative; top: -3px;"><img src="https://zenodo.org/badge/264818686.svg" alt="Ultralytics YOLO Citation"></a>
+    <a href="https://discord.com/invite/ultralytics"><img alt="Ultralytics Discord" src="https://img.shields.io/discord/1089800235347353640?logo=discord&logoColor=white&label=Discord&color=blue"></a>
+    <a href="https://community.ultralytics.com/"><img alt="Ultralytics Forums" src="https://img.shields.io/discourse/users?server=https%3A%2F%2Fcommunity.ultralytics.com&logo=discourse&label=Forums&color=blue"></a>
+    <a href="https://www.reddit.com/r/ultralytics/"><img alt="Ultralytics Reddit" src="https://img.shields.io/reddit/subreddit-subscribers/ultralytics?style=flat&logo=reddit&logoColor=white&label=Reddit&color=blue"></a>
+  </div>
+  <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; margin-top: 3px;">
+    <a href="https://console.paperspace.com/github/ultralytics/ultralytics"><img src="https://assets.paperspace.io/img/gradient-badge.svg" alt="Run Ultralytics on Gradient"></a>
+    <a href="https://colab.research.google.com/github/ultralytics/ultralytics/blob/main/examples/tutorial.ipynb"><img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open Ultralytics In Colab"></a>
+    <a href="https://www.kaggle.com/models/ultralytics/yolo26" style="position: relative; top: -3px;"><img src="https://kaggle.com/static/images/open-in-kaggle.svg" alt="Open Ultralytics In Kaggle"></a>
+    <a href="https://mybinder.org/v2/gh/ultralytics/ultralytics/HEAD?labpath=examples%2Ftutorial.ipynb" style="position: relative; top: -3px;"><img src="https://mybinder.org/badge_logo.svg" alt="Open Ultralytics In Binder"></a>
+  </div>
+</div>
+
+**[YOLO26](https://docs.ultralytics.com/models/yolo26/)** is the latest flagship model from [Ultralytics](https://www.ultralytics.com/) — setting a new standard for **edge-first vision AI**. Engineered for maximum efficiency on edge devices while maintaining exceptional accuracy, YOLO26 builds on years of pioneering research in real-time computer vision.
+"""
+    )
+
+    with gr.Tabs():
+        # Image Tab
+        with gr.TabItem("📷 Image"):
+            with gr.Row():
+                with gr.Column():
+                    img_input = gr.Image(type="pil", label="Upload Image")
+                    img_conf = gr.Slider(minimum=0, maximum=1, value=0.25, label="Confidence threshold")
+                    img_iou = gr.Slider(minimum=0, maximum=1, value=0.7, label="IoU threshold")
+                    img_model = gr.Radio(choices=MODEL_CHOICES, label="Model Name", value="yolo26n")
+                    img_labels = gr.Checkbox(value=True, label="Show Labels")
+                    img_conf_show = gr.Checkbox(value=True, label="Show Confidence")
+                    img_size = gr.Radio(choices=IMAGE_SIZE_CHOICES, label="Image Size", value=640)
+                    img_btn = gr.Button("Detect Objects", variant="primary")
+                with gr.Column():
+                    img_output = gr.Image(type="pil", label="Result")
+
+            img_btn.click(
+                predict_image,
+                inputs=[img_input, img_conf, img_iou, img_model, img_labels, img_conf_show, img_size],
+                outputs=img_output,
+            )
+
+            gr.Examples(
+                examples=[
+                    ["https://ultralytics.com/images/bus.jpg", 0.25, 0.7, "yolo26n", True, True, 640],
+                    ["https://ultralytics.com/images/zidane.jpg", 0.25, 0.7, "yolo26n-seg", True, True, 640],
+                    ["https://ultralytics.com/images/boats.jpg", 0.25, 0.7, "yolo26n-obb", True, True, 1024],
+                ],
+                inputs=[img_input, img_conf, img_iou, img_model, img_labels, img_conf_show, img_size],
+            )
+
+        # Video Tab
+        with gr.TabItem("🎬 Video"):
+            with gr.Row():
+                with gr.Column():
+                    vid_input = gr.Video(label="Upload Video")
+                    vid_conf = gr.Slider(minimum=0, maximum=1, value=0.25, label="Confidence threshold")
+                    vid_iou = gr.Slider(minimum=0, maximum=1, value=0.7, label="IoU threshold")
+                    vid_model = gr.Radio(choices=MODEL_CHOICES, label="Model Name", value="yolo26n")
+                    vid_labels = gr.Checkbox(value=True, label="Show Labels")
+                    vid_conf_show = gr.Checkbox(value=True, label="Show Confidence")
+                    vid_size = gr.Radio(choices=IMAGE_SIZE_CHOICES, label="Image Size", value=640)
+                    vid_btn = gr.Button("Process Video", variant="primary")
+                with gr.Column():
+                    vid_output = gr.Video(label="Result")
+
+            vid_btn.click(
+                predict_video,
+                inputs=[vid_input, vid_conf, vid_iou, vid_model, vid_labels, vid_conf_show, vid_size],
+                outputs=vid_output,
+            )
+
+        # Webcam Tab - Real-time streaming
+        with gr.TabItem("📹 Webcam"):
+            gr.Markdown("### Real-time Webcam Detection")
+            gr.Markdown("Enable streaming for live detection as you move!")
+            with gr.Row():
+                with gr.Column():
+                    webcam_conf = gr.Slider(minimum=0, maximum=1, value=0.25, label="Confidence threshold")
+                    webcam_iou = gr.Slider(minimum=0, maximum=1, value=0.7, label="IoU threshold")
+                    webcam_model = gr.Radio(choices=MODEL_CHOICES, label="Model Name", value="yolo26n")
+                    webcam_labels = gr.Checkbox(value=True, label="Show Labels")
+                    webcam_conf_show = gr.Checkbox(value=True, label="Show Confidence")
+                    webcam_size = gr.Radio(choices=IMAGE_SIZE_CHOICES, label="Image Size", value=640)
+                with gr.Column():
+                    # Streaming webcam input with real-time output
+                    webcam_input = gr.Image(
+                        sources=["webcam"],
+                        type="numpy",
+                        label="Webcam (streaming)",
+                        streaming=True,
+                    )
+                    webcam_output = gr.Image(type="numpy", label="Detection Result")
+
+            # Stream event for real-time detection
+            webcam_input.stream(
+                predict_webcam,
+                inputs=[
+                    webcam_input,
+                    webcam_conf,
+                    webcam_iou,
+                    webcam_model,
+                    webcam_labels,
+                    webcam_conf_show,
+                    webcam_size,
+                ],
+                outputs=webcam_output,
+            )
+
+demo.launch(share=True, css=CUSTOM_CSS)

requirements.txt

@@ -0,0 +1,2 @@
+gradio
+ultralytics

ultralytics.css

@@ -0,0 +1,70 @@
+/*
+ * Ultralytics 🚀 AGPL-3.0 License - https://ultralytics.com/license
+ *
+ * Ultralytics Gradio Theme CSS
+ * Use this CSS file for consistent Ultralytics blue (#042AFF) styling across Gradio apps
+ * Compatible with Gradio 6.x
+ *
+ * Usage in app.py:
+ *   from pathlib import Path
+ *   custom_css = Path("ultralytics.css").read_text()
+ *   demo.launch(css=custom_css)
+ */
+
+/* Override Gradio CSS variables for Ultralytics blue */
+.gradio-container {
+    --slider-color: #042AFF !important;
+    --checkbox-background-color-selected: #042AFF !important;
+    --checkbox-border-color-selected: #042AFF !important;
+    --checkbox-border-color-focus: #042AFF !important;
+    --button-primary-background-fill: #042AFF !important;
+    --button-primary-background-fill-hover: #0320CC !important;
+    --button-primary-border-color: #042AFF !important;
+    --color-accent: #042AFF !important;
+    --color-accent-soft: rgba(4, 42, 255, 0.15) !important;
+}
+
+/* Slider filled track */
+input[type="range"]::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, #042AFF var(--range_progress, 25%), var(--neutral-200, #e5e7eb) var(--range_progress, 25%)) !important;
+}
+input[type="range"]::-moz-range-progress {
+    background: #042AFF !important;
+}
+
+/* Radio and checkbox accent */
+input[type="radio"],
+input[type="checkbox"] {
+    accent-color: #042AFF !important;
+}
+
+/* Tab styling - remove orange, make blue */
+button[role="tab"] {
+    border-bottom-color: transparent !important;
+}
+button[role="tab"].selected,
+button[role="tab"][aria-selected="true"] {
+    background: transparent !important;
+    color: #042AFF !important;
+    border-bottom: 2px solid #042AFF !important;
+}
+
+/* Radio group selected item: blue background, white text */
+.wrap.selected,
+label.selected {
+    background: #042AFF !important;
+    border-color: #042AFF !important;
+    color: white !important;
+}
+label.selected span {
+    color: white !important;
+}
+
+/* Primary button */
+button.primary {
+    background: #042AFF !important;
+    border-color: #042AFF !important;
+}
+button.primary:hover {
+    background: #0320CC !important;
+}