image-step-by-step

Local web GUI for turning images in raw_images/ into step-by-step highlight sequences with editable scenes, multiple shape types, metadata round-tripping, and rendered output files.

Quick Start

pnpm install
pnpm dev

Open the local Vite URL and:

1. Pick an image from the left gallery.
2. Draw areas with Rectangle, Circle, or Pen Tool.
3. Reposition shapes by dragging them, or resize selected rectangle/circle shapes from the 8 handles.
4. Use scenes to build step-by-step progressions.
5. Click Render Steps to write images and metadata into output/{image-name}/.

Features

• Lightroom-style layout with gallery, main editor, and scene strip
• Scene duplication, rename-ready scene labels, and per-scene previews
• Multiple shapes per scene with overlap-union behavior
• Editor-only strokes and resize handles for better visibility
• Zoom controls and hand-pan navigation in the main canvas area
• Exported metadata.json for reloading scenes and settings later

Export

Rendering writes:

output/{image-name}/step_0.{source-ext}
output/{image-name}/step_1.{source-ext}
output/{image-name}/step_2.{source-ext}
output/{image-name}/metadata.json

• step_0 is the original image
• later steps preserve highlighted areas and apply the uncovered white overlay elsewhere
• metadata.json stores shapes, scene ordering, editor settings, and selection state

Citation

If you use this project, please cite it:

BibTeX

@software{lin2026imagestepbystep,
  author = {Lin, Hsieh-Ting},
  title = {{image-step-by-step}: Local Web GUI for Stepwise Image Highlight Editing},
  year = {2026},
  url = {https://github.com/htlin222/image-step-by-step},
  version = {0.1.0}
}

License

This project is licensed under the MIT License.