Skip to content

mfloresz/pixeo

BranchesTags

Repository files navigation

App Icon

Pixeo

A modern web application for generating, editing, and organizing images with the Chutes AI platform. It combines AI workflows with a local visual editor built with Vue 3, TypeScript, and Tailwind CSS.

📸 Screenshots

Image Generation Inpaint/Enhance Library Settings Editor
Generate Enhance Library Settings Editor

✨ Features

  • Image Generation: Create high-quality images using advanced AI models like Z Image Turbo, Qwen Image, FLUX.1 Dev, and more.
  • Image Editing: Edit existing images with specialized models like Qwen Image Edit.
  • Inpaint/Enhance: Locally enhance and edit images by drawing masks and using AI-powered inpainting with ONNX models in the browser.
  • Visual Editor: A fully-featured graphical editor for creating designs with text, shapes, images, layers, groups, and frames. Projects are saved locally and can be reopened later.
    • Start from a blank canvas, a template, an example layout, or a recent project
    • Layer management with drag-and-drop reordering, visibility, locking, grouping, and ungrouping
    • Text tools with formatting and text effects
    • Shape tools including rectangles, circles, ellipses, stars, polygons, arrows, arcs, wedges, rings, lines, and paths
    • Image import from your library, crop mode, and image filters
    • Snapping, multi-selection, zoom controls, undo/redo, and context menus
    • Color panel with 540+ curated colors from Coolors.co
    • Gradient support with multiple categories
    • Auto-save every 5 minutes with thumbnail generation
    • Export to PNG, JPG, WebP, or ZIP project archives
    • Automatic migration of older projects that still embed base64 images
  • Personal Library: Store and manage all your generated content locally.
  • Intuitive Interface: A tabbed workspace for Generate/Edit, Inpaint/Enhance, Editor, Library, and Settings.
  • Multi-language Support: Available in Spanish and English.
  • Local Storage: Uses SQLite/OPFS to save content without needing a server, with legacy IndexedDB migration support.
  • Real-time Notifications: Receive immediate feedback on your generation progress.
  • Prompt Optimization: Some models support automatic prompt enhancement for better results.

⚠️ Project Status

  • Image Generation: ✅ Working
  • Image Editing: ✅ Working
  • Inpaint/Enhance: ✅ Working
  • Visual Editor: ✅ Working
  • Video Generation: Not Implemented
  • Text to Speech: Not Implemented

Note: Some models may be outdated. If you find any model that doesn't work properly, please report it.

🚀 Technologies

  • Framework: Vue 3 with Composition API
  • Language: TypeScript
  • Bundler: Vite
  • Styles: Tailwind CSS with shadcn/ui components
  • State Management: Pinia
  • Internationalization: vue-i18n
  • Icons: Lucide Vue Next
  • Notifications: vue-sonner
  • Storage: IndexedDB with idb
  • UI Components: Radix UI with class-variance-authority
  • Canvas: Konva with vue-konva
  • Color Extraction: extract-colors

📦 Installation

  1. Clone the repository:
git clone <repository-url>
cd pixeo
  1. Install dependencies:
npm install
# or
bun install
  1. Start the development server:
npm run dev
# or
bun run dev
  1. Open your browser at http://localhost:5173

🛠️ Available Scripts

  • npm run dev - Start the development server
  • npm run build - Build the application for production
  • npm run preview - Preview the production build
  • npm run lint - Run ESLint to verify code

🎯 Usage

Initial Setup

  1. Go to the Settings tab
  2. Enter your Chutes AI API key
  3. The application will automatically verify your available quota

Generate Content

  1. Select the Generate/Edit tab
  2. Choose the mode: Image or Edit
  3. Select an available model
  4. Configure resolution and advanced parameters
  5. Write your prompt
  6. (Optional) Enable "Optimize Prompt" if available for the selected model
  7. Click "Generate"

Enhance Images (Inpaint)

  1. Go to the Library tab and zoom into any generated image
  2. Click the Enhance button in the zoom modal
  3. The image will load into the Inpaint/Enhance tab
  4. Draw masks on areas you want to enhance or modify
  5. Adjust brush size as needed
  6. The AI will process the image locally in your browser using ONNX models
  7. Compare original and enhanced versions with the toggle
  8. Download the enhanced result

Visual Editor

The Visual Editor lets you build designs locally with templates, layers, and editable objects.

  1. Select the Editor tab
  2. Choose a blank canvas, a template, an example layout, or a recent project
  3. Add elements from the toolbar or side panels:
    • Text: Add and edit text with fonts, size, alignment, styling, and effects
    • Shapes: Create rectangles, circles, ellipses, stars, polygons, arrows, arcs, wedges, rings, and lines
    • Images: Import images from your library, then crop or filter them when needed
  4. Use the layers panel or the right-click menu to reorder, duplicate, group, ungroup, lock, hide, or delete elements
  5. Customize colors using:
    • Built-in color picker
    • 540+ curated colors from Coolors.co
    • Gradient fills
    • Recent colors from your document
  6. Adjust zoom and snapping for precision work
  7. Export your design as PNG, JPG, WebP, or ZIP
  8. Save your project to the Library for later editing
  9. The editor also auto-saves every 5 minutes and migrates older base64-based projects when they are opened

Editor Features:

  • Layer management with visibility, locking, grouping, and multi-selection
  • Undo/Redo functionality
  • Auto-save with thumbnail generation
  • Canvas settings (size, background color, background image)
  • Position and size controls
  • Crop mode for images
  • Template gallery and recent projects

Prompt Optimization

Some models support automatic prompt optimization through specialized AI experts. When enabled, the original prompt is analyzed and rewritten to enhance visual details, properly handle text content in images, and specify artistic style appropriately.

This feature is available for the following models:

  • qwen-image - General image prompt enhancer
  • qwen-image-2512 - Portrait-focused image prompt enhancer
  • qwen-image-edit-2509 - Edit prompt enhancer
  • qwen-image-edit-2511 - Edit prompt enhancer (v2)
  • z-image-turbo - Visionary artist prompt enhancer

The optimization configuration is located in src/config/optimize_prompts.json.

Manage Library

  • The Library tab shows all your generated content and saved projects
  • View and edit saved editor projects directly from the library
  • Use zoom to view complete details
  • Download content individually
  • Export all content as ZIP
  • Clear the current session

🏗️ Project Architecture

src/
├── components/          # Reusable Vue components
│   ├── generate/        # Generation components
│   ├── editor/          # Visual Editor components
│   │   ├── sidebar/     # Editor sidebar panels (colors, layers, elements, etc.)
│   │   └── properties/  # Property editors for each layer type
│   ├── inpaint/         # Inpaint/enhance components
│   ├── library/         # Library components
│   ├── settings/        # Settings components
│   └── ui/              # Reusable UI components
├── config/              # Model and resolution configurations
│   └── styles/          # Style galleries for different models
├── i18n/                # Internationalization files
├── lib/                 # Utilities and helpers
├── services/            # API services (Chutes AI) and inpaint processor
├── stores/              # Global state with Pinia
└── types/               # TypeScript definitions

🤖 Supported Models

Image Generation

  • Z Image Turbo
  • Hunyuan Image 3
  • Qwen Image / Qwen Image 2512
  • HiDream
  • FLUX.1 Dev
  • JuggernautXL
  • Chroma
  • iLustMix
  • Neta Lumina
  • And more...

Image Editing

  • Qwen Image Edit 2509/2511

🌐 Internationalization

The application supports Spanish and English. Translation files are located in src/i18n/.

📱 Technical Features

  • Responsive Design: Works on desktop and mobile
  • Dark/Light Theme: Switch between modes with the button in the top bar
  • Offline Storage: Works without internet connection (except for generating content)
  • Editor Persistence: Projects are stored locally in SQLite/OPFS with thumbnails and project assets
  • Quota Management: Monitor your API usage in real-time
  • Detailed Logging: Log all operations in settings

🔧 Development

Model Structure

Models are configured in src/config/models_data.ts. Each model includes:

  • API endpoint
  • Available parameters
  • Supported resolutions
  • Parameter mapping

Adding New Models

  1. Add the configuration in models_data.ts
  2. Update exports in models.ts
  3. Restart the application

Resolution Customization

See src/config/custom_resolutions.md to learn how to define custom resolutions.

Color Palettes

The editor includes 540+ curated colors from Coolors.co, organized by tone. See src/stores/colors.ts and coolors-co.md for details.

Gradients

The editor supports gradient fills organized by category (cold, warm, monochrome, iridescent). See src/stores/gradients.ts for configuration.

This project is based on the original idea from chutes-img-ui.

💡 Technical Note

This application is vibe coded, which means it was built quickly and practically to fulfill its purpose. As such, it may not be properly optimized and could contain code that doesn't follow development best practices. Any improvement or optimization is welcome.

About

Web client for Chutes AI: generate images, edit photos, create videos, and convert text to speech from your browser.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Contributors

Languages