AI Integration

Chameleon integrates multiple AI providers for text, image, and video generation using the Vercel AI SDK.

Overview

Chameleon supports 7 AI providers across 3 content types:

Image Generation

• ✅ OpenAI - DALL-E 3, DALL-E 2
• ✅ Replicate - Flux Schnell (fast & affordable)
• ✅ Kling - High-quality images

Video Generation

• ✅ Seedance - Volcengine ARK (recommended)
• ✅ Kling - Professional video quality

Text Generation (API only)

• ✅ OpenAI - GPT-4, GPT-3.5 Turbo
• ✅ DeepSeek - DeepSeek Chat, DeepSeek Coder
• ✅ OpenRouter - Access to multiple models
• ✅ SiliconFlow - DeepSeek R1 and more

Quick Start

For End Users

1. Visit AI Generator:

   • Navigate to /ai-generator
   • Select image or video generation
   • Choose provider and model
   • Enter prompt
   • Click generate

2. Check Credits:

   • View balance in top right
   • Different providers have different costs
   • Recharge at /pricing if needed

3. View Results:

   • Results appear when ready
   • Download immediately (URLs expire)
   • Check history for past generations

For Developers

1. Configure API Keys:

   • Method 1: /admin/ai-config (UI, recommended)
   • Method 2: Environment variables

2. Use Generation APIs:

   // Create generation
   POST /api/generator/generate
   
   // Query status
   POST /api/generator/query
   
   // Get history
   POST /api/generator/history
   

3. Or use AI SDK directly:

   import { generateImage } from "ai";
   import { openai } from "@ai-sdk/openai";
   
   const { images } = await generateImage({
     model: openai.image("dall-e-3"),
     prompt: "A sunset over mountains",
   });
   

AI Providers

OpenAI

• Website: openai.com
• API Key: platform.openai.com/api-keys
• Features: Text (GPT-4), Image (DALL-E 3)
• Pricing: Pay per use
• SDK: @ai-sdk/openai

Kling AI

• Website: klingai.com
• Features: Image, Video generation
• Quality: High-end professional
• SDK: Custom implementation

Seedance (Volcengine)

• Website: volcengine.com
• Features: Video generation
• Quality: Excellent, fast processing
• SDK: Custom implementation
• Note: Requires ARK API key

DeepSeek

• Website: deepseek.com
• Features: Text generation (Chat, Code)
• Advantage: Cost-effective
• SDK: @ai-sdk/deepseek

Replicate

• Website: replicate.com
• Features: Image generation (Flux models)
• Advantage: Affordable, fast
• SDK: @ai-sdk/replicate

OpenRouter

• Website: openrouter.ai
• Features: Access to 100+ models
• Advantage: Model variety
• SDK: @openrouter/ai-sdk-provider

SiliconFlow

• Website: siliconflow.cn
• Features: Text generation
• Advantage: Good Chinese language support
• SDK: @ai-sdk/openai-compatible

Configuration

Admin AI Config (Recommended)

Configure providers in the UI:

1. Login as admin
2. Visit /admin/ai-config
3. Click provider name to add
4. Enter API key
5. Enable provider
6. Save

Benefits:

• No code changes needed
• Easy to update keys
• Enable/disable providers instantly
• Keys cached for performance

Environment Variables (Fallback)

OPENAI_API_KEY="sk-proj-xxx"
KLING_ACCESS_KEY="xxx"
SEEDANCE_API_KEY="xxx"
DEEPSEEK_API_KEY="sk-xxx"
REPLICATE_API_TOKEN="r8_xxx"
OPENROUTER_API_KEY="sk-or-xxx"
SILICONFLOW_API_KEY="sk-xxx"

Priority: Database config > Environment variables

Credit Costs

AI Type	Provider	Cost (Credits)
Image	OpenAI DALL-E	5
Image	Replicate Flux	3
Image	Kling	4
Video	Seedance	10
Video	Kling	10
Text	Any provider	1

Configure costs in: src/services/constant.ts

Usage Examples

Generate Image

import { experimental_generateImage as generateImage } from "ai";
import { openai } from "@ai-sdk/openai";

const { images } = await generateImage({
  model: openai.image("dall-e-3"),
  prompt: "A futuristic city at night",
  n: 1, // Number of images
  size: "1024x1024",
});

console.log("Image URL:", images[0].url);

Generate Video

import { generateVideo } from "@/aisdk/generate-video";
import { seedance } from "@/aisdk/seedance";

const { videos } = await generateVideo({
  model: seedance.video("doubao-seedance-1-0-pro-250528"),
  prompt: "A cat playing with yarn",
  n: 1,
});

console.log("Video URL:", videos[0]);

Generate Text (Streaming)

import { streamText } from "ai";
import { openai } from "@ai-sdk/openai";

const result = streamText({
  model: openai("gpt-4"),
  prompt: "Explain quantum computing in simple terms",
});

for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

Architecture

AI SDK Structure

src/aisdk/
├── index.ts                 # Main exports
├── kling/                   # Kling AI provider
│   ├── kling-provider.ts
│   ├── kling-image-model.ts
│   └── kling-video-model.ts
├── seedance/                # Seedance provider
│   ├── seedance-provider.ts
│   ├── seedance-video-model.ts
│   └── text2video.ts
└── generate-video/          # Video generation wrapper
    └── index.ts

Service Layer

src/services/
├── generation.ts           # Generation orchestration
├── ai-config.ts            # AI provider key management
└── constant.ts             # Credit costs configuration

API Routes

src/app/api/
├── generator/
│   ├── generate/route.ts   # Create task
│   ├── query/route.ts      # Query status
│   └── history/route.ts    # Get history
└── demo/
    ├── gen-text/route.ts   # Demo text
    ├── gen-image/route.ts  # Demo image
    └── gen-stream-text/route.ts  # Demo streaming

Provider Comparison

When to Use Each Provider

OpenAI DALL-E 3:

• Need highest quality
• Budget is not tight
• Realistic photos required
• Professional use cases

Replicate Flux:

• Need many images quickly
• Cost-conscious
• Good enough quality
• Rapid prototyping

Kling:

• Asian aesthetics
• Need both image and video from same provider
• Moderate quality needs

Seedance:

• Video generation priority
• Need fast processing
• High quality video
• Chinese language prompts

Extending AI Features

Add New Provider

1. Create provider SDK:

   // src/aisdk/newprovider/index.ts
   export const newprovider = createProvider({
     id: "newprovider",
     // Implement VideoModelV1 or ImageModelV1
   });
   

2. Update service:

   // src/services/generation.ts
   case "newprovider":
     model = newprovider.video(modelName);
     break;
   

3. Update constants:

   // src/services/constant.ts
   video: { newprovider: 15 }
   

4. Update UI:

   // src/components/console/ai-generator/ModelSelector.tsx
   video: [
     { provider: "newprovider", models: ["model-1"] }
   ]
   

Add New AI Type

To add audio generation, face swap, etc.:

1. Update database schema
2. Create new service functions
3. Add UI components
4. Configure credit costs

Monitoring

Track Usage

-- Generations by provider
SELECT provider, ai_type, COUNT(*) as total, 
       SUM(credits_cost) as total_credits
FROM generations
WHERE status = 'completed'
GROUP BY provider, ai_type;

-- Success rate
SELECT provider,
       COUNT(*) as total,
       SUM(CASE WHEN status = 'completed' THEN 1 ELSE 0 END) as success,
       ROUND(100.0 * SUM(CASE WHEN status = 'completed' THEN 1 ELSE 0 END) / COUNT(*), 2) as success_rate
FROM generations
GROUP BY provider;

Error Analysis

-- Failed generations
SELECT provider, model, error_message, COUNT(*) as count
FROM generations
WHERE status = 'failed'
AND created_at > NOW() - INTERVAL '7 days'
GROUP BY provider, model, error_message
ORDER BY count DESC;

Best Practices

For Users

1. Start with cheaper providers (Replicate for images)
2. Refine prompts before using expensive providers
3. Download results immediately (URLs expire)
4. Monitor credit usage

For Developers

1. Handle timeouts gracefully (video can take 5+ minutes)
2. Implement retry logic for network errors
3. Cache API keys (already implemented, 5-min TTL)
4. Log all errors for debugging
5. Monitor costs (set up alerts)

Security

1. API keys in database are cached but not encrypted
2. Never expose API keys in client-side code
3. Use environment variables as fallback only
4. Rotate keys regularly (every 90 days)
5. Monitor usage for unauthorized access

Cost Management

Estimating Costs

Example Monthly Budget:

• 1000 users
• Each generates 5 images/month → 5000 images
• Using Replicate (3 credits) → 15,000 credits
• Each user buys 100 credits → Need to sell 150 packages

Provider costs:

• OpenAI DALL-E 3: ~$0.04 per image
• Replicate Flux: ~$0.003 per image
• Seedance video: ~$0.10 per video

Set your credit value accordingly!

Next Steps

• AI Generator Guide - Use the UI
• Image Generation - Image details
• Video Generation - Video details
• AI APIs - API reference
• Credit System - How credits work