imagenai
Version:
Core client library for Imagenai image generation API
221 lines (220 loc) • 9.54 kB
JavaScript
;
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImagenaiAltTagProcessor = void 0;
class ImagenaiAltTagProcessor {
constructor(client, options = {}) {
this.processedImages = new Set();
this.observer = null;
// Check if we're in a browser environment
if (typeof window === 'undefined') {
throw new Error('ImagenaiAltTagProcessor requires a browser environment. Use ImagenaiClient for Node.js/SSR.');
}
this.client = client;
this.options = Object.assign({ autoProcess: true, showLoading: true, placeholderImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0zMCAzMEg3MFY3MEgzMFYzMFoiIGZpbGw9IiNFNUU3RUIiLz4KPHN2ZyB4PSIzNSIgeT0iMzUiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTV2LTJoMnYySDl6bTAtNGgydi0ySDl2MnoiIGZpbGw9IiM5Q0EzQUYiLz4KPC9zdmc+Cjwvc3ZnPgo=', loadingImage: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSIjRjNGNEY2Ii8+CjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQwIiBzdHJva2U9IiMzQjgyRjMiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIiBzdHJva2UtZGFzaGFycmF5PSIzMTQuMTU5MjY1MzU4OTc5MzI2IiBzdHJva2UtZGFzaG9mZnNldD0iMCI+CjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgo8L2NpcmNsZT4KPC9zdmc+Cg==' }, options);
if (this.options.autoProcess) {
this.startAutoProcessing();
}
}
/**
* Start automatic processing of alt tags
*/
startAutoProcessing() {
// Process existing images
this.processAltTags();
// Watch for new images
this.startObserver();
}
/**
* Stop automatic processing
*/
stopAutoProcessing() {
if (this.observer) {
this.observer.disconnect();
this.observer = null;
}
}
/**
* Process all images with [IMAGENAI] alt tags
*/
processAltTags() {
return __awaiter(this, void 0, void 0, function* () {
const images = document.querySelectorAll('img[alt*="[IMAGENAI"]');
for (let i = 0; i < images.length; i++) {
const img = images[i];
if (!this.processedImages.has(img)) {
yield this.processImage(img);
}
}
});
}
/**
* Process a single image
*/
processImage(img) {
return __awaiter(this, void 0, void 0, function* () {
var _a, _b, _c, _d;
const config = this.parseAltTag(img.alt);
if (!config)
return;
// Mark as processed to avoid duplicates
this.processedImages.add(img);
try {
// Show loading state
if (this.options.showLoading) {
this.showLoadingState(img);
}
// Generate image
const result = yield this.client.generateImage(config);
// Replace with generated image
this.replaceImage(img, result);
// Call success callback
(_b = (_a = this.options).onImageGenerated) === null || _b === void 0 ? void 0 : _b.call(_a, img, result);
}
catch (error) {
console.error('Failed to generate image:', error);
// Show error state
this.showErrorState(img);
// Call error callback
(_d = (_c = this.options).onError) === null || _d === void 0 ? void 0 : _d.call(_c, img, error instanceof Error ? error : new Error('Unknown error'));
}
});
}
/**
* Parse alt text for [IMAGENAI:...] syntax
*/
parseAltTag(altText) {
const match = altText.match(/^\[IMAGENAI(?::([^\]]+))?\]\s*(.+)$/);
if (!match)
return null;
const params = match[1] || '';
const prompt = match[2].trim();
if (!prompt)
return null;
const config = { prompt };
// Parse parameters like "size=1024x1536,quality=high"
params.split(',').forEach(param => {
const [key, value] = param.split('=');
if (key && value) {
const trimmedKey = key.trim();
const trimmedValue = value.trim();
switch (trimmedKey) {
case 'size':
if (['1024x1024', '1024x1536', '1536x1024'].includes(trimmedValue)) {
config.size = trimmedValue;
}
break;
case 'quality':
if (['low', 'medium', 'high'].includes(trimmedValue)) {
config.quality = trimmedValue;
}
break;
}
}
});
return config;
}
/**
* Show loading state for an image
*/
showLoadingState(img) {
// Store original src
if (img.dataset && !img.dataset.originalSrc) {
img.dataset.originalSrc = img.src;
}
// Show loading image
img.src = this.options.loadingImage;
img.style.opacity = '0.7';
// Add loading class
img.classList.add('imagenai-loading');
}
/**
* Show error state for an image
*/
showErrorState(img) {
var _a;
// Restore original src or show placeholder
img.src = ((_a = img.dataset) === null || _a === void 0 ? void 0 : _a.originalSrc) || this.options.placeholderImage;
img.style.opacity = '1';
// Remove loading class
img.classList.remove('imagenai-loading');
// Add error class
img.classList.add('imagenai-error');
// Add error title
img.title = 'Failed to generate image. Check console for details.';
}
/**
* Replace image with generated result
*/
replaceImage(img, result) {
// Update image source
img.src = result.url;
img.style.opacity = '1';
// Remove loading class
img.classList.remove('imagenai-loading');
// Add success class
img.classList.add('imagenai-generated');
// Store metadata
img.dataset.generatedId = result.id;
img.dataset.generatedAt = result.createdAt;
img.dataset.prompt = result.prompt;
img.dataset.size = result.size;
// Update title with generation info
img.title = `Generated: ${result.prompt}\nSize: ${result.size}\nCreated: ${new Date(result.createdAt).toLocaleString()}`;
}
/**
* Start observing DOM changes for new images
*/
startObserver() {
this.observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
var _a;
if (node.nodeType === Node.ELEMENT_NODE) {
const element = node;
// Check if the added element is an image
if (element.tagName === 'IMG' && ((_a = element.alt) === null || _a === void 0 ? void 0 : _a.includes('[IMAGENAI'))) {
this.processImage(element);
}
// Check for images within the added element
const images = element.querySelectorAll('img[alt*="[IMAGENAI"]');
images.forEach(img => this.processImage(img));
}
});
});
});
this.observer.observe(document.body, {
childList: true,
subtree: true
});
}
/**
* Get processing statistics
*/
getStats() {
return {
totalProcessed: this.processedImages.size,
processedImages: Array.from(this.processedImages).map(img => ({
src: img.src,
alt: img.alt,
generatedId: img.dataset.generatedId,
generatedAt: img.dataset.generatedAt
}))
};
}
/**
* Clear processing history
*/
clearHistory() {
this.processedImages.clear();
}
}
exports.ImagenaiAltTagProcessor = ImagenaiAltTagProcessor;