ceramnote is a React + TypeScript single-page application for digitizing and annotating images of a physical ceramic tile database. It enables users to upload images, create and manage annotations, run AI-powered detection models, and export structured data for digital archiving or analysis.
-
Image Upload & Navigation
- Upload one or multiple images of ceramic tiles.
- Navigate between images using the custom scrollbar or keyboard shortcuts.
- Visual indicator for annotation density per image.
-
Annotation Tools
- Draw, select, and edit bounding box annotations on images.
- Inspector panel for editing annotation properties.
- Copy/paste annotation fields for efficient data entry.
-
AI Model Integration
- Load ONNX models (e.g., YOLO) for automated detection of tiles or features.
- Run inference on images to auto-generate annotations.
- Support for custom user-uploaded ONNX models.
-
Annotation Management
- View, select, and delete annotations.
- Keyboard navigation for rapid annotation review.
- Annotation grid for spatial navigation.
-
Export Functionality
- Export all or current image annotations as a ZIP file.
- ZIP includes cropped tile images and a JSON file with annotation data.
git clone https://github.com/yourusername/ceramnote.git
cd ceramnote
npm install
# or
yarn installnpm run dev
# or
yarn devOpen http://localhost:5173 in your browser.
- Click the Filebar at the top to upload one or more images of ceramic tiles.
- Use the AnnotationScrollbar (right panel) to navigate between images.
- Use the Toolbar (left panel) to select annotation tools (rectangle, selector, etc.).
- Draw bounding boxes on the canvas to create annotations.
- Select an annotation to edit its properties in the Inspector (left panel).
- Load built-in or custom ONNX models via the Filebar.
- Click Preprocess or press Space to run detection models and auto-generate annotations.
- Use keyboard shortcuts for navigation:
- Ctrl + ←/→: Switch images
- ←/→/↑/↓: Navigate annotation grid
- Delete: Delete selected annotation
- Copy/paste annotation fields using the Inspector.
- Click Export All or Export Current in the Filebar.
- Progress is shown in a modal loading bar (with cancel option).
- Downloaded ZIP contains:
- Cropped tile images (
images/) annotations.jsonwith all annotation data
- Cropped tile images (
- Model files should be placed in the
/modelsdirectory or uploaded via the UI.
- React + TypeScript
- Vite (build tool)
- TailwindCSS (styling)
- Radix UI (UI primitives)
- ONNX Runtime Web (AI inference)
- JSZip (exporting ZIP files)
- fast-average-color (color analysis)
- Custom annotation and tool system
npm run build
# or
yarn buildThe output will be in the dist/ directory. It can be run directly via
npm run preview
# or
yarn previewpodman build -t glazer-admin .
podman run -d --name glazer-admin -p 80:80 glazer-adminGlazer will run on port 80. Visit http://localhost to start annotating.
...TBA
For questions or support, please open an issue on GitHub.