79 lines
2.3 KiB
Markdown
79 lines
2.3 KiB
Markdown
# kv-pix (V2)
|
|
|
|
A modern, lightweight AI Image Generator powered by Google ImageFX (Whisk), Grok, and Meta AI. Built with Next.js 14, TypeScript, and Tailwind CSS.
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Prerequisites
|
|
- Node.js 18+
|
|
- Whisk/Grok/Meta Cookies (from respective services)
|
|
|
|
### Installation
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Run Locally
|
|
```bash
|
|
npm run dev
|
|
# App will be live at http://localhost:3000
|
|
```
|
|
|
|
## 🐳 Docker Deployment (Synology NAS / linux/amd64)
|
|
|
|
### Using Docker Compose (Recommended)
|
|
```bash
|
|
docker-compose up -d
|
|
```
|
|
|
|
### Using Docker CLI
|
|
```bash
|
|
# Build
|
|
docker build -t kv-pix:latest .
|
|
|
|
# Run
|
|
docker run -d -p 3001:3000 --name kv-pix kv-pix:latest
|
|
```
|
|
|
|
### Synology Container Manager
|
|
1. Pull the image or build locally.
|
|
2. Create a container from the image.
|
|
3. Map port `3000` (container) to your desired host port (e.g., `3001`).
|
|
4. Start the container.
|
|
5. Access the app at `http://<NAS_IP>:3001`.
|
|
|
|
## 🏗️ Architecture
|
|
- **Framework**: [Next.js 14](https://nextjs.org/) (App Router)
|
|
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) + Custom Components
|
|
- **State**: [Zustand](https://github.com/pmndrs/zustand)
|
|
- **Icons**: [Lucide React](https://lucide.dev/)
|
|
|
|
### Project Structure
|
|
```
|
|
app/ # Pages and API Routes
|
|
components/ # React UI Components
|
|
lib/ # Core Logic (whisk-client, meta-client, grok-client)
|
|
data/ # Prompt library JSON
|
|
public/ # Static assets
|
|
```
|
|
|
|
## ✨ Features
|
|
- **Multi-Provider**: Google Whisk (ImageFX), Grok (xAI), Meta AI (Imagine)
|
|
- **Prompt Library**: Curated prompts organized by categories and sources
|
|
- **Upload History**: Reuse previously uploaded reference images
|
|
- **Reference Chips**: Drag-and-drop references for Subject/Scene/Style
|
|
- **Video Generation**: Animate images with Whisk Animate (Veo)
|
|
- **Responsive Gallery**: Masonry layout with smooth animations
|
|
- **Dark Mode**: Material 3 inspired aesthetic
|
|
|
|
## 🍪 Cookie Configuration
|
|
1. Go to the respective service:
|
|
- Whisk: [ImageFX](https://labs.google/fx/tools/image-fx)
|
|
- Grok: [grok.com](https://grok.com)
|
|
- Meta: [meta.ai](https://www.meta.ai)
|
|
2. Open DevTools (F12) -> Application -> Cookies.
|
|
3. Copy the cookie string (or use a "Get Cookies" extension to copy as JSON).
|
|
4. Paste into the **Settings** menu in the app.
|
|
|
|
## 📝 License
|
|
MIT
|