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

npm install

Run Locally

npm run dev
# App will be live at http://localhost:3000

🐳 Docker Deployment (Synology NAS / linux/amd64)

Using Docker Compose (Recommended)

docker-compose up -d

Using Docker CLI

# 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 (App Router)
• Styling: Tailwind CSS + Custom Components
• State: Zustand
• Icons: Lucide React

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
   • Grok: grok.com
   • Meta: 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