100 lines
3.4 KiB
Markdown
100 lines
3.4 KiB
Markdown
# Open Higgsfield AI
|
|
|
|
An open-source AI image generation studio powered by [Muapi.ai](https://muapi.ai). Generate stunning images using state-of-the-art models like Flux Schnell, Flux Dev, Nano Banana Pro, and more — all from a sleek, modern interface.
|
|
|
|
## ✨ Features
|
|
|
|
- **Multi-Model Support** — Switch between 20+ AI image generation models (Flux, Nano Banana, Ideogram, Midjourney, SDXL, and more)
|
|
- **Smart Controls** — Dynamic aspect ratio and resolution pickers that adapt to each model's capabilities
|
|
- **Generation History** — Browse, revisit, and download all your past generations (persisted in browser storage)
|
|
- **Image Download** — One-click download of generated images in full resolution
|
|
- **API Key Management** — Secure API key storage in browser localStorage (never sent to any server except Muapi)
|
|
- **Responsive Design** — Works seamlessly on desktop and mobile with dark glassmorphism UI
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- [Node.js](https://nodejs.org/) (v18+)
|
|
- A [Muapi.ai](https://muapi.ai) API key
|
|
|
|
### Setup
|
|
|
|
```bash
|
|
# Clone the repository
|
|
git clone https://github.com/Anil-matcha/Open-Higgsfield-AI.git
|
|
cd Open-Higgsfield-AI
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Start the development server
|
|
npm run dev
|
|
```
|
|
|
|
Open `http://localhost:5173` in your browser. You'll be prompted to enter your Muapi API key on first use.
|
|
|
|
### Production Build
|
|
|
|
```bash
|
|
npm run build
|
|
npm run preview
|
|
```
|
|
|
|
## 🏗️ Architecture
|
|
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── ImageStudio.js # Main studio with prompt, pickers, canvas, history
|
|
│ ├── Header.js # App header with settings and controls
|
|
│ ├── AuthModal.js # API key input modal
|
|
│ ├── SettingsModal.js # Settings panel for API key management
|
|
│ └── Sidebar.js # Navigation sidebar
|
|
├── lib/
|
|
│ ├── muapi.js # API client (submit + poll pattern, x-api-key auth)
|
|
│ └── models.js # Model definitions with endpoint mappings
|
|
├── styles/
|
|
│ ├── global.css # Global styles and animations
|
|
│ ├── studio.css # Studio-specific styles
|
|
│ └── variables.css # CSS custom properties
|
|
├── main.js # App entry point
|
|
└── style.css # Tailwind imports
|
|
```
|
|
|
|
## 🔌 API Integration
|
|
|
|
The app communicates with [Muapi.ai](https://muapi.ai) using a two-step pattern:
|
|
|
|
1. **Submit** — `POST /api/v1/{model-endpoint}` with prompt and parameters
|
|
2. **Poll** — `GET /api/v1/predictions/{request_id}/result` until status is `completed`
|
|
|
|
Authentication uses the `x-api-key` header. During development, a Vite proxy handles CORS by routing `/api` requests to `https://api.muapi.ai`.
|
|
|
|
## 🎨 Supported Models
|
|
|
|
| Model | Endpoint | Resolution Options |
|
|
|-------|----------|-------------------|
|
|
| Nano Banana | `nano-banana` | — |
|
|
| Nano Banana Pro | `nano-banana-pro` | 1K, 2K, 4K |
|
|
| Flux Schnell | `flux-schnell-image` | — |
|
|
| Flux Dev | `flux-dev-image` | — |
|
|
| Flux Dev LoRA | `flux-dev-lora` | — |
|
|
| Ideogram V2 | `ideogram-v2` | — |
|
|
| SDXL | `sdxl` | — |
|
|
| And 15+ more... | | |
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **Vite** — Build tool & dev server
|
|
- **Tailwind CSS v4** — Utility-first styling
|
|
- **Vanilla JS** — No framework, pure DOM manipulation
|
|
- **Muapi.ai** — AI model API gateway
|
|
|
|
## 📄 License
|
|
|
|
MIT
|
|
|
|
## 🙏 Credits
|
|
|
|
Built with [Muapi.ai](https://muapi.ai) — the unified API for AI image generation models.
|