Image Comparison

Complete task payload from the RobotRock dashboard Examples gallery. Open Examples in your workspace to interact with the same task in the inbox UI.

Inbox preview

Rendered by the dashboard (static preview route). Matches docs light/dark mode. Handle actions are disabled; use the toolbar to submit this example to your inbox or view its configuration.

Task

{
  "type": "image-comparison",
  "name": "Image Comparison Review",
  "description": "Compare these images and select the best option"
}

Context

{
  "data": {
    "options": [
      {
        "image": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
        "source": "Design Team A",
        "resolution": "1920x1080"
      },
      {
        "image": "https://images.unsplash.com/photo-1518837695005-2083093ee35b",
        "source": "Design Team B",
        "resolution": "1920x1080"
      }
    ]
  },
  "ui": {
    "options": {
      "ui:widget": "compare",
      "ui:title": "Image Comparison",
      "items": {
        "image": {
          "ui:widget": "image"
        }
      }
    }
  }
}

Actions

[
  {
    "title": "Select Option A",
    "description": "Choose the first image option",
    "id": "select-a",
    "schema": {
      "type": "object",
      "required": [
        "selection-reason",
        "rating"
      ],
      "properties": {
        "selection-reason": {
          "type": "string",
          "title": "Selection Reason",
          "description": "Why did you choose option A?"
        },
        "rating": {
          "type": "integer",
          "title": "Image Rating",
          "description": "Rate this image from 1-10",
          "minimum": 1,
          "maximum": 10
        }
      }
    },
    "ui": {
      "selection-reason": {
        "ui:widget": "textarea",
        "ui:placeholder": "Enter your reasoning..."
      },
      "rating": {
        "ui:widget": "RatingWidget",
        "ui:options": {}
      }
    }
  },
  {
    "title": "Select Option B",
    "description": "Choose the second image option",
    "id": "select-b",
    "schema": {
      "type": "object",
      "properties": {
        "selection-reason": {
          "type": "string",
          "title": "Selection Reason",
          "description": "Why did you choose option B?"
        },
        "rating": {
          "type": "integer",
          "title": "Image Rating",
          "description": "Rate this image from 1-10",
          "minimum": 1,
          "maximum": 10
        }
      }
    },
    "ui": {
      "selection-reason": {
        "ui:widget": "textarea",
        "ui:placeholder": "Enter your reasoning..."
      },
      "rating": {
        "ui:widget": "RatingWidget",
        "ui:options": {
          "stars": 10
        }
      }
    }
  },
  {
    "title": "Request Revisions",
    "description": "Request changes to both images",
    "id": "request-revisions",
    "schema": {
      "type": "object",
      "properties": {
        "revision-request": {
          "type": "string",
          "title": "Revision Request",
          "description": "Describe the revisions needed"
        }
      }
    },
    "ui": {
      "revision-request": {
        "ui:widget": "textarea",
        "ui:placeholder": "Enter revision details..."
      }
    }
  }
]

Widgets used

RatingWidget
compare
image
textarea

See Context for widget reference.