```
### JavaScript Core Functions
```javascript
// scripts/aipixel-core.js
const AiPixelPerfect = {
apiEndpoint: process.env.NEXT_PUBLIC_API_ENDPOINT,
currentDesign: null,
// Generate design from prompt
async generateDesign(prompt, options = {}) {
const response = await fetch(`${this.apiEndpoint}/synthesize`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
prompt: prompt,
variations: options.variations || 4,
resolution: options.resolution || 2048,
style_weight: options.styleWeight || 0.5,
language: options.language || 'en'
})
});
if (!response.ok) {
throw new Error(`Synthesis failed: ${response.statusText}`);
}
const data = await response.json();
return data.variations;
},
// Refine selected design
async refineDesign(designId, adjustments) {
const response = await fetch(`${this.apiEndpoint}/refine/${designId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
brightness: adjustments.brightness,
contrast: adjustments.contrast,
saturation: adjustments.saturation,
style_weight: adjustments.styleWeight
})
});
return await response.json();
},
// Export to external platform
async exportDesign(designId, platform, options = {}) {
const response = await fetch(`${this.apiEndpoint}/export/${designId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
platform: platform, // 'figma', 'adobe', 'canva'
format: options.format || 'png',
maintain_layers: options.maintainLayers || false,
target_project: options.targetProject || null
})
});
return await response.json();
}
};
// Example usage in UI
async function generateDesign() {
const prompt = document.getElementById('design-prompt').value;
const variationsGrid = document.getElementById('variations-grid');
try {
const variations = await AiPixelPerfect.generateDesign(prompt, {
variations: 4,
resolution: 2048
});
variationsGrid.innerHTML = '';
variations.forEach((variation, index) => {
const img = document.createElement('img');
img.src = variation.url;
img.alt = `Variation ${index + 1}`;
img.onclick = () => selectVariation(variation.id);
variationsGrid.appendChild(img);
});
variationsGrid.classList.remove('hidden');
} catch (error) {
console.error('Generation failed:', error);
alert('Failed to generate design. Please try again.');
}
}
function selectVariation(variationId) {
AiPixelPerfect.currentDesign = variationId;
document.getElementById('refinement-panel').classList.remove('hidden');
}
async function applyRefinements() {
const adjustments = {
brightness: document.getElementById('brightness').value / 100,
contrast: document.getElementById('contrast').value / 100,
saturation: document.getElementById('saturation').value / 100,
styleWeight: document.getElementById('style-weight').value / 100
};
const refined = await AiPixelPerfect.refineDesign(
AiPixelPerfect.currentDesign,
adjustments
);
// Update preview with refined image
console.log('Refined design:', refined.url);
}
```
## API Integration
### RESTful API Client
```javascript
// api/aipixel-client.js
class AiPixelPerfectClient {
constructor(apiKey, baseUrl = 'https://api.aipixelperfect.com') {
this.apiKey = apiKey;
this.baseUrl = baseUrl;
}
async request(endpoint, method = 'GET', body = null) {
const options = {
method,
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${this.apiKey}`
}
};
if (body) {
options.body = JSON.stringify(body);
}
const response = await fetch(`${this.baseUrl}${endpoint}`, options);
if (!response.ok) {
const error = await response.json();
throw new Error(error.message || 'API request failed');
}
return await response.json();
}
// Generate designs from prompt
async synthesize(prompt, options = {}) {
return await this.request('/synthesize', 'POST', {
prompt,
variations: options.variations || 4,
resolution: options.resolution || 2048,
style_weight: options.styleWeight || 0.5,
language: options.language || 'en',
seed: options.seed || null
});
}
// Get design status
async getDesignStatus(designId) {
return await this.request(`/designs/${designId}`);
}
// Download design
async downloadDesign(designId, format = 'png') {
const response = await fetch(
`${this.baseUrl}/designs/${designId}/download?format=${format}`,
{
headers: {
'Authorization': `Bearer ${this.apiKey}`
}
}
);
return await response.blob();
}
// Create custom style
async createStyle(name, referenceImages, options = {}) {
const formData = new FormData();
formData.append('name', name);
formData.append('description', options.description || '');
referenceImages.forEach((image, index) => {
formData.append(`reference_${index}`, image);
});
const response = await fetch(`${this.baseUrl}/styles`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.apiKey}`
},
body: formData
});
return await response.json();
}
// List available styles
async listStyles() {
return await this.request('/styles');
}
}
// Usage example
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
async function generateAndExport() {
const result = await client.synthesize(
'minimalist logo for tech startup, blue and white color scheme',
{
variations: 4,
resolution: 4096,
styleWeight: 0.7
}
);
console.log('Generated designs:', result.variations);
// Download the first variation
const blob = await client.downloadDesign(result.variations[0].id, 'png');
const url = URL.createObjectURL(blob);
console.log('Download URL:', url);
}
```
## Collaboration Features
### Real-Time Annotation System
```javascript
// collaboration/annotations.js
class DesignAnnotation {
constructor(websocketUrl, designId) {
this.ws = new WebSocket(websocketUrl);
this.designId = designId;
this.annotations = [];
this.ws.onmessage = (event) => {
const data = JSON.parse(event.data);
this.handleAnnotation(data);
};
}
// Add annotation to design
addAnnotation(x, y, radius, comment, type = 'circle') {
const annotation = {
design_id: this.designId,
type: type,
position: { x, y },
radius: radius,
comment: comment,
timestamp: Date.now(),
author: process.env.USER_ID
};
this.ws.send(JSON.stringify({
action: 'add_annotation',
data: annotation
}));
return annotation;
}
// Handle incoming annotations
handleAnnotation(data) {
if (data.action === 'annotation_added') {
this.annotations.push(data.annotation);
this.renderAnnotation(data.annotation);
}
}
// Render annotation on canvas
renderAnnotation(annotation) {
const canvas = document.getElementById('annotation-canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(
annotation.position.x,
annotation.position.y,
annotation.radius,
0,
2 * Math.PI
);
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.stroke();
// Add comment tooltip
const tooltip = document.createElement('div');
tooltip.className = 'annotation-tooltip';
tooltip.style.left = `${annotation.position.x}px`;
tooltip.style.top = `${annotation.position.y - 30}px`;
tooltip.textContent = annotation.comment;
document.body.appendChild(tooltip);
}
// Submit design for review
async submitForReview(reviewers) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/reviews/submit`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
design_id: this.designId,
reviewers: reviewers,
annotations: this.annotations
})
}
);
return await response.json();
}
}
```
## Common Patterns
### Batch Design Generation
```javascript
async function batchGenerate(prompts, baseOptions = {}) {
const results = [];
for (const prompt of prompts) {
try {
const variations = await AiPixelPerfect.generateDesign(prompt, {
...baseOptions,
variations: 1 // Single variation per prompt for efficiency
});
results.push({
prompt: prompt,
design: variations[0],
status: 'success'
});
} catch (error) {
results.push({
prompt: prompt,
design: null,
status: 'failed',
error: error.message
});
}
// Rate limiting: wait 1 second between requests
await new Promise(resolve => setTimeout(resolve, 1000));
}
return results;
}
// Usage
const prompts = [
'modern website hero image with gradient background',
'product photography of smartwatch on wooden table',
'abstract geometric pattern for textile design'
];
const designs = await batchGenerate(prompts, { resolution: 2048 });
```
### Style Transfer Workflow
```javascript
async function applyCustomStyle(prompt, styleId, options = {}) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/styled`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
prompt: prompt,
style_id: styleId,
style_strength: options.styleStrength || 0.75,
resolution: options.resolution || 2048,
preserve_structure: options.preserveStructure || true
})
}
);
return await response.json();
}
// Create and apply custom brand style
async function createBrandStyle(brandName, referenceFiles) {
const client = new AiPixelPerfectClient(process.env.AIPIXELPERFECT_API_KEY);
// Create style from brand assets
const style = await client.createStyle(
`${brandName}-brand-style`,
referenceFiles,
{ description: `Official brand style for ${brandName}` }
);
// Generate designs using the brand style
const designs = await applyCustomStyle(
'social media banner for product launch',
style.id,
{ styleStrength: 0.8 }
);
return designs;
}
```
### Progressive Refinement
```javascript
async function progressiveRefine(initialPrompt, iterations = 3) {
let currentPrompt = initialPrompt;
let bestDesign = null;
for (let i = 0; i < iterations; i++) {
const variations = await AiPixelPerfect.generateDesign(currentPrompt, {
variations: 4,
seed: i * 1000 // Different seed each iteration
});
// Simulate selection (in real app, user would choose)
bestDesign = variations[0];
// Refine prompt based on result
currentPrompt = await enhancePrompt(currentPrompt, bestDesign);
console.log(`Iteration ${i + 1}: ${currentPrompt}`);
}
return bestDesign;
}
async function enhancePrompt(originalPrompt, designResult) {
// Use AI to suggest prompt improvements
// In practice, this would call a prompt enhancement endpoint
return `${originalPrompt}, enhanced details, professional quality`;
}
```
## Export Integrations
### Figma Export
```javascript
async function exportToFigma(designId, figmaFileKey, nodeId = null) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/export/${designId}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({
platform: 'figma',
target_file: figmaFileKey,
target_node: nodeId,
figma_token: process.env.FIGMA_ACCESS_TOKEN,
format: 'png',
scale: 2
})
}
);
const result = await response.json();
return result.figma_url;
}
```
### Adobe Creative Cloud Export
```javascript
async function exportToAdobe(designId, adobeProjectId) {
const blob = await AiPixelPerfect.client.downloadDesign(designId, 'psd');
const formData = new FormData();
formData.append('file', blob, 'design.psd');
formData.append('project_id', adobeProjectId);
const response = await fetch(
'https://api.adobe.io/cc/storage/upload',
{
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.ADOBE_ACCESS_TOKEN}`,
'x-api-key': process.env.ADOBE_API_KEY
},
body: formData
}
);
return await response.json();
}
```
## Troubleshooting
### Common Issues
**Issue: Synthesis times out after 30 seconds**
```javascript
// Solution: Use async status polling for complex prompts
async function synthesizeWithPolling(prompt, options = {}) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/synthesize/async`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({ prompt, ...options })
}
);
const { job_id } = await response.json();
// Poll for completion
while (true) {
const status = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/jobs/${job_id}`,
{
headers: { 'Authorization': `Bearer ${process.env.API_KEY}` }
}
);
const data = await status.json();
if (data.status === 'completed') {
return data.result;
} else if (data.status === 'failed') {
throw new Error(data.error);
}
await new Promise(resolve => setTimeout(resolve, 2000));
}
}
```
**Issue: Generated designs don't match prompt expectations**
```javascript
// Solution: Use detailed, structured prompts
function buildStructuredPrompt(subject, style, lighting, mood, details = []) {
return [
`Subject: ${subject}`,
`Style: ${style}`,
`Lighting: ${lighting}`,
`Mood: ${mood}`,
details.length > 0 ? `Details: ${details.join(', ')}` : ''
].filter(Boolean).join(' | ');
}
const prompt = buildStructuredPrompt(
'corporate office interior',
'modern minimalist',
'natural daylight from large windows',
'professional and welcoming',
['wooden desks', 'ergonomic chairs', 'green plants', 'clean lines']
);
```
**Issue: Copyright conflict warnings on prompt**
```javascript
// Solution: Check prompt before synthesis
async function validatePrompt(prompt) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_ENDPOINT}/validate/prompt`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
},
body: JSON.stringify({ prompt })
}
);
const result = await response.json();
if (result.conflicts && result.conflicts.length > 0) {
console.warn('Potential copyright conflicts:', result.conflicts);
console.log('Suggested alternatives:', result.alternatives);
return false;
}
return true;
}
// Use before generation
const isValid = await validatePrompt('logo similar to Nike swoosh');
if (!isValid) {
console.error('Prompt may infringe on existing IP');
}
```
**Issue: Multilingual prompts not generating culturally appropriate designs**
```javascript
// Solution: Explicitly set language and cultural context
async function generateWithCulturalContext(prompt, language, region) {
return await AiPixelPerfect.generateDesign(prompt, {
language: language,
cultural_context: region, // 'japan', 'latin_america', 'middle_east', etc.
respect_local_aesthetics: true
});
}
// Example: Japanese design
const jpDesign = await generateWithCulturalContext(
'伝統的な日本の庭園',
'ja',
'japan'
);
```
## Performance Optimization
### Caching Strategy
```javascript
class DesignCache {
constructor() {
this.cache = new Map();
this.maxSize = 50;
}
getCacheKey(prompt, options) {
return `${prompt}-${JSON.stringify(options)}`;
}
async getCached(prompt, options) {
const key = this.getCacheKey(prompt, options);
if (this.cache.has(key)) {
const cached = this.cache.get(key);
if (Date.now() - cached.timestamp < 3600000) { // 1 hour
return cached.data;
}
}
return null;
}
setCached(prompt, options, data) {
const key = this.getCacheKey(prompt, options);
if (this.cache.size >= this.maxSize) {
const firstKey = this.cache.keys().next().value;
this.cache.delete(firstKey);
}
this.cache.set(key, {
data: data,
timestamp: Date.now()
});
}
}
const designCache = new DesignCache();
async function generateWithCache(prompt, options) {
const cached = await designCache.getCached(prompt, options);
if (cached) {
console.log('Returning cached design');
return cached;
}
const result = await AiPixelPerfect.generateDesign(prompt, options);
designCache.setCached(prompt, options, result);
return result;
}
```
## Configuration Reference
### Resolution Presets
- `512`: Quick preview (draft quality)
- `1024`: Standard web graphics
- `2048`: High-quality prints and presentations
- `4096`: Professional photography replacement
- `8192`: Large format prints and billboards
### Style Weight Guidelines
- `0.0 - 0.3`: Subtle style influence, prompt-dominant
- `0.4 - 0.6`: Balanced style and prompt
- `0.7 - 1.0`: Strong style application, may override prompt details
### Language Codes
Use ISO 639-1 codes: `en`, `es`, `fr`, `de`, `ja`, `zh`, `ar`, `hi`, `pt`, `ru`, etc.