Text & Image Editor

Block-based editor for creating LLM prompts with text, annotated images, and variables. Features Slate.js rich text with @mentions and #variables.

Quick Start

# Install dependencies
npm install

# Start upload server (for image uploads)
cd server && npm install && npm start

# Run development server (new terminal)
npm run dev

Open http://localhost:5173

Features

Rich Text Editor (Slate.js)

• @mentions - Reference bounding boxes on images (@BOX_NAME)
• #variables - Insert string or boolean variables (#VAR_NAME)
• Click on tokens to see details (box preview / variable info)

Image Blocks

• Drag & drop images into the document
• Draw bounding boxes with mouse
• Name boxes in SCREAMING_SNAKE_CASE for @mention references
• Add descriptions to boxes

LLM-Ready Output

Generates OpenAI Vision API compatible format:

{
  "content": [
    { "type": "text", "text": "Analyze [box_id - abc123]" },
    { "type": "image", "image": "https://..." },
    { "type": "text", "text": "{\"image_id\":\"...\",\"image_size\":[1920,1080],\"boxes\":[...]}" }
  ]
}

Usage

1. Text: Click to type, use @ for box mentions, # for variables
2. Images: Drag image files into the editor
3. Boxes: Click and drag on images to draw bounding boxes
4. Box Names: Click a box to set its SCREAMING_SNAKE_CASE name
5. Mentions: Type @ to reference named boxes in text
6. Variables: Type # to insert or create variables

Token Format

| Token | Example | Output | |-------|---------|--------| | @mention | @MACHINE | [box_id - xyz123] | | #variable (string) | #USER_NAME | Replaced with value | | #variable (boolean) | #IS_ACTIVE | [CONDITION: if "..." then ... else ...] |

Box Metadata Format

{
  "image_id": "abc123",
  "image_size": [1920, 1080],
  "bbox_format": "xyxy",
  "bbox_units": "pixels",
  "boxes": [
    {
      "box_id": "xyz789",
      "label": "MACHINE",
      "semantic": "CNC machine",
      "bbox": [100, 200, 500, 600]
    }
  ]
}

Tech Stack

• React 18
• TypeScript
• Vite
• Slate.js (rich text)
• Express (upload server)