UI Parsing

from vlmrun.client import VLMRun

# Initialize the VLMRun client
client = VLMRun(api_key="<VLMRUN_API_KEY>")

# Parse UI elements in the image
response = client.agent.completions.create(
    model="vlmrun-orion-1:auto",
    messages=[
        {
          "role": "user",
          "content": [
            {"type": "text", "text": "Analyze all UI elements in this mobile app screenshot"},
            {"type": "image_url", "image_url": {"url": "https://storage.googleapis.com/vlm-data-public-prod/hub/examples/web.ui-automation/win11.jpeg", "detail": "auto"}}
          ]
        }
    ],
)

print(response.choices[0].message.content)

from vlmrun.client import VLMRun
from pydantic import BaseModel, Field

# Define the response schema
class UIElement(BaseModel):
  type: str = Field(..., description="Type of UI element")
  text: str | None = Field(None, description="Text content of the element")
  interactive: bool = Field(..., description="Whether the element is interactive")
  xywh: tuple[float, float, float, float] = Field(..., description="Bounding box coordinates")

class UIResponse(BaseModel):
  elements: list[UIElement] = Field(..., description="List of detected UI elements")

# Initialize the VLMRun client
client = VLMRun(api_key="<VLMRUN_API_KEY>")

# Parse UI elements with structured output
response = client.agent.completions.create(
    model="vlmrun-orion-1:auto",
    messages=[
        {
          "role": "user",
          "content": [
            {"type": "text", "text": "Analyze all UI elements in this mobile app screenshot"},
            {"type": "image_url", "image_url": {"url": "https://storage.googleapis.com/vlm-data-public-prod/hub/examples/web.ui-automation/win11.jpeg", "detail": "auto"}}
          ]
        }
    ],
    response_format={"type": "json_schema", "schema": UIResponse.model_json_schema()},
)

# Validate the response
result = UIResponse.model_validate_json(response.choices[0].message.content)
# >>> UIResponse(elements=[UIElement(type="button", text="Sign In", ...), ...])

import { VlmRun } from "vlmrun";

const client = new VlmRun({
  apiKey: "<VLMRUN_API_KEY>",
  baseURL: "https://api.vlm.run/v1"
});

const response = await client.agent.completions.create({
  model: "vlmrun-orion-1:auto",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "Analyze all UI elements in this mobile app screenshot" },
        { type: "image_url", image_url: { url: "https://storage.googleapis.com/vlm-data-public-prod/hub/examples/web.ui-automation/win11.jpeg", detail: "auto" } }
      ]
    }
  ]
});

console.log(response.choices[0].message.content);

import { VlmRun } from "vlmrun";
import { z } from "zod";
import { zodToJsonSchema } from "zod-to-json-schema";

// Define the response schema with Zod
const UIResponseSchema = z.object({
  elements: z.array(z.object({
    type: z.string().describe("Type of UI element"),
    text: z.string().nullable().describe("Text content of the element"),
    interactive: z.boolean().describe("Whether the element is interactive"),
    xywh: z.array(z.number()).describe("Bounding box coordinates")
  })).describe("List of detected UI elements")
});

// Initialize the VLMRun client
const client = new VlmRun({
  apiKey: "<VLMRUN_API_KEY>",
  baseURL: "https://api.vlm.run/v1"
});

// Parse UI elements with structured output
const response = await client.agent.completions.create({
  model: "vlmrun-orion-1:auto",
  messages: [
    {
      role: "user",
      content: [
        { type: "text", text: "Analyze all UI elements in this mobile app screenshot" },
        { type: "image_url", image_url: { url: "https://storage.googleapis.com/vlm-data-public-prod/hub/examples/web.ui-automation/win11.jpeg", detail: "auto" } }
      ]
    }
  ],
  response_format: {
    type: "json_schema",
    schema: zodToJsonSchema(UIResponseSchema)
  }
});

const result = UIResponseSchema.parse(JSON.parse(response.choices[0].message.content));