Appearance

Rosepetal UI ​

Vue 3 + Vite application for AI-powered visual inspection platform.

Tech Stack ​

  • Vue 3.5+ with Composition API
  • Vite 7.x for development and building
  • TailwindCSS 3.4+ for styling
  • Fabric.js 5.x for canvas operations
  • Firebase 12.x for backend services
  • TypeScript support

Prerequisites ​

Clone rosepetal-model repository in the same parent directory as rosepetal-ui:

parent-directory/
├── rosepetal-ui/
└── rosepetal-model/

Create symlink in rosepetal-ui node_modules:

bash
cd rosepetal-ui/node_modules
ln -s ../../rosepetal-model .

Installation ​

Install dependencies:

bash
npm install

Build Fabric.js with eraser module:

bash
cd node_modules/fabric
node build.js modules=ALL requirejs exclude=gestures,accessors

Development ​

Start development server:

bash
npm run dev

Alternative dev server:

bash
npm run serve

Build ​

Production build:

bash
npm run build

Preview production build:

bash
npm run preview

Deployment ​

Firebase deployment:

bash
firebase login
firebase use <projectId>
npm run hosting

Multi-environment deployment:

bash
npm run deploy:all

Configuration ​

Update configuration:

bash
npm run uconfig

See Vite Configuration Reference for build customization.