const promptInput = document.getElementById('promptInput');
const negativePromptInput = document.getElementById('negativePromptInput');
const seedInput = document.getElementById('seedInput');
const styleSelect = document.getElementById('styleSelect');
const renderQualitySelect = document.getElementById('renderQualitySelect');
const lightingSelect = document.getElementById('lightingSelect');
const controlNetSelect = document.getElementById('controlNetSelect');
const anatomyControlSelect = document.getElementById('anatomyControlSelect');
const generateButton = document.getElementById('generateButton');
const generatedImage = document.getElementById('generatedImage');
const loadingIndicator = document.getElementById('loading');
const technicalExplanation = document.querySelector('.technical-explanation');
// Prompt Enhancer Module
const promptEnhancerModule = {
enhancements: {
"a cat": "a photorealistic fluffy white cat sitting on a windowsill, soft light, shallow depth of field, 4k resolution",
"a fox": "a majestic red fox standing in a misty forest, golden hour lighting, detailed fur, realistic anatomy, 8k resolution",
"a landscape": "a breathtaking mountain landscape with vibrant colors, sunrise lighting, crisp details, epic panoramic view, high resolution"
},
enhance: async function(originalPrompt) {
// First, use the new advanced prompt engineering module
const semanticAnalysis = await promptEngineeringModule.analyzeAndCorrectPrompt(originalPrompt);
// Then enhance with style and quality details
const enhancedPrompt = promptEngineeringModule.enhancePrompt(semanticAnalysis, {
style: styleSelect.value,
renderQuality: renderQualitySelect.value,
lighting: lightingSelect.value
});
return enhancedPrompt;
}
};
// Advanced Prompt Engineering Module
const promptEngineeringModule = {
// Enhanced prompt generation with more specific details
enhancePrompt: function(originalPrompt, options = {}) {
const {
style = 'default',
renderQuality = 'standard',
lighting = 'default',
detailLevel = 'high'
} = options;
const styleMap = {
'default': '',
'photorealistic': 'photorealistic, high detail, sharp focus',
'anime': 'anime style, clean lines, vibrant colors',
'digital-art': 'digital art, crisp edges, stylized',
'studio-ghibli': 'Studio Ghibli style, soft colors, whimsical',
'oil-painting': 'oil painting texture, rich brush strokes',
'realistic': 'hyper-realistic, ultra-detailed',
'dreamscape': 'surreal, dreamy, soft focus'
};
const lightingMap = {
'default': '',
'cinematic': 'cinematic lighting, dramatic shadows',
'soft': 'soft, diffused light, gentle shadows',
'dramatic': 'high contrast, strong directional light',
'sunset': 'golden hour, warm tones, long shadows'
};
const qualityMap = {
'standard': '512x512 resolution',
'high': '768x768 resolution, enhanced details',
'ultra': '1024x1024 resolution, maximum detail',
'4k': '2048x2048 resolution, ultra high quality'
};
const detailLevelMap = {
'low': 'basic shapes, minimal detail',
'medium': 'clear definition, moderate detail',
'high': 'intricate details, sharp edges, textural complexity'
};
// Combine enhanced prompt with style and quality specifications
const enhancedPrompt = [
originalPrompt,
styleMap[style],
lightingMap[lighting],
qualityMap[renderQuality],
`${detailLevelMap[detailLevel]}, precise composition`
].filter(Boolean).join(', ');
return enhancedPrompt;
},
// Advanced semantic analysis and prompt correction
analyzeAndCorrectPrompt: async function(prompt) {
try {
const completion = await websim.chat.completions.create({
messages: [
{
role: "system",
content: `You are an expert prompt engineer for AI image generation.
Analyze the given prompt and:
1. Improve clarity and specificity
2. Add missing descriptive details
3. Ensure semantic consistency
4. Optimize for better image generation`
},
{
role: "user",
content: prompt
}
]
});
return completion.content || prompt;
} catch (error) {
console.warn("Prompt analysis fallback triggered:", error);
return prompt;
}
}
};
// Semantic Consistency Check Module
const semanticConsistencyModule = {
checks: [
{
name: "Anatomical Consistency",
check: async (prompt, imageUrl) => {
try {
const result = await websim.chat.completions.create({
messages: [
{
role: "system",
content: "Analyze the image for anatomical correctness based on the prompt. Report any inconsistencies concisely."
},
{
role: "user",
content: [
{ type: "text", text: `Check anatomical correctness for prompt: ${prompt}` },
{ type: "image_url", image_url: { url: imageUrl } }
]
}
]
});
return `Anatomical Check: ${result.content}`;
} catch (error) {
console.error("Anatomical consistency check failed:", error);
return `Anatomical Check: Error performing check - ${error.message}`;
}
}
},
{
name: "Prompt Adherence Check",
check: async (prompt, imageUrl) => {
try {
const result = await websim.chat.completions.create({
messages: [
{
role: "system",
content: "Compare the image against the provided prompt. Summarize how well the image matches the key elements of the prompt."
},
{
role: "user",
content: [
{ type: "text", text: `Check adherence to prompt: ${prompt}` },
{ type: "image_url", image_url: { url: imageUrl } }
]
}
]
});
return `Prompt Adherence: ${result.content}`;
} catch (error) {
console.error("Prompt adherence check failed:", error);
return `Prompt Adherence: Error performing check - ${error.message}`;
}
}
},
{
name: "Negative Prompt Check",
check: async (prompt, negativePrompt, imageUrl) => {
if (!negativePrompt || negativePrompt.trim() === '') {
return "Negative Prompt Check: No negative prompt provided.";
}
try {
const result = await websim.chat.completions.create({
messages: [
{
role: "system",
content: "Analyze the image to see if it contains elements explicitly mentioned in the negative prompt."
},
{
role: "user",
content: [
{ type: "text", text: `Check negative prompt: ${prompt} with negative prompt: ${negativePrompt}` },
{ type: "image_url", image_url: { url: imageUrl } }
]
}
]
});
return `Negative Prompt Check: ${result.content}`;
} catch (error) {
console.error("Negative prompt check failed:", error);
return `Negative Prompt Check: Error performing check - ${error.message}`;
}
}
}
],
performChecks: async function(prompt, negativePrompt, imageUrl) {
const results = [];
// Clear previous results while checks are running
const semanticCheckList = document.getElementById('semanticCheckList');
if (semanticCheckList) {
semanticCheckList.innerHTML = '
Running semantic checks...';
}
for (let check of this.checks) {
let checkResult;
if (check.name === "Negative Prompt Check") {
checkResult = await check.check(prompt, negativePrompt, imageUrl);
} else {
checkResult = await check.check(prompt, imageUrl);
}
results.push(checkResult);
}
return results;
}
};
// Layered Generation Module (basic placeholder)
const layeredGenerationModule = {
generateLayered: async function(prompt) {
// Placeholder for future implementation
console.log("Layered generation for:", prompt);
return null;
}
};
const styleMap = {
'default': {
prompt_prefix: '',
model: 'stable-diffusion-xl',
sampler: 'Euler a'
},
'photorealistic': {
prompt_prefix: 'highly detailed photorealistic, sharp focus, natural lighting',
model: 'realistic-vision-v5',
sampler: 'DPM++ 2M Karras'
},
'anime': {
prompt_prefix: 'anime style, clean lines, vibrant colors, sharp details, kyoto animation aesthetic',
model: 'deliberate-v2',
sampler: 'Euler a'
},
'digital-art': {
prompt_prefix: 'digital illustration, crisp edges, stylized, graphic novel aesthetic, high contrast',
model: 'dreamshaper-v8',
sampler: 'DDIM'
},
'studio-ghibli': {
prompt_prefix: 'Studio Ghibli style, soft color palette, whimsical, hand-drawn texture, Miyazaki-inspired',
model: 'ghibli-diffusion',
sampler: 'Euler'
},
'oil-painting': {
prompt_prefix: 'oil painting texture, rich brush strokes, impasto technique, canvas-like rendering',
model: 'anything-v5',
sampler: 'DPM++ SDE Karras'
},
'realistic': {
prompt_prefix: 'ultra-realistic, hyper-detailed, natural textures, precise anatomical accuracy',
model: 'realistic-vision-v5',
sampler: 'DPM++ 2M Karras'
},
'dreamscape': {
prompt_prefix: 'surreal, dreamy atmosphere, soft focus, ethereal lighting, blended reality',
model: 'stable-diffusion-xl',
sampler: 'Euler a'
}
};
function mapRenderQuality(quality) {
const qualityMap = {
"standard": {
width: 512,
height: 512,
description: "Standard Quality (512x512)"
},
"high": {
width: 768,
height: 768,
description: "High Quality (768x768)"
},
"ultra": {
width: 1024,
height: 1024,
description: "Ultra HD (1024x1024)"
},
"4k": {
width: 2048,
height: 2048,
description: "4K Ultra-Detailed (2048x2048)"
}
};
return qualityMap[quality] || qualityMap["standard"];
}
// Advanced Face Generation Module
const faceGenerationModule = {
// Advanced prompt engineering for high-quality face generation
enhanceFacePrompt: function(basePrompt, options = {}) {
const {
faceQuality = 'high',
symmetry = true,
style = 'photorealistic'
} = options;
const qualityPrefixes = {
'low': 'basic face details',
'medium': 'clear facial features, moderate detail',
'high': 'perfect symmetrical face, high resolution, soft studio lighting, crisp details',
'ultra': 'hyper-realistic face, professional DSLR photo quality, cinematic lighting, intricate skin texture'
};
const stylePrefixes = {
'photorealistic': 'DSLR photo style, natural skin tones, precise facial structure',
'anime': 'anime style, clean lines, large expressive eyes',
'artistic': 'stylized face, painterly details, soft color palette',
'sketch': 'pencil sketch style, delicate line work'
};
const symmetryPrefix = symmetry ? 'perfectly symmetrical, ' : '';
const enhancedPrompt = [
basePrompt,
symmetryPrefix,
qualityPrefixes[faceQuality],
stylePrefixes[style]
].filter(Boolean).join(', ');
return enhancedPrompt;
},
// Advanced face correction using AI techniques
correctFace: async function(imageUrl) {
try {
// Simulate using GFPGAN or CodeFormer for face enhancement
const result = await websim.chat.completions.create({
messages: [
{
role: "system",
content: "Analyze and correct facial details in the image. Improve symmetry, skin texture, and overall facial structure. Provide a URL to the corrected image or indicate if no correction was needed."
},
{
role: "user",
content: [
{ type: "text", text: "Enhance facial details" },
{ type: "image_url", image_url: { url: imageUrl } }
]
}
]
});
try {
const response = JSON.parse(result.content);
if (response && response.url) {
console.log("Face correction applied. New image URL:", response.url);
return response.url;
} else {
console.log("Face correction analysis:", result.content);
return imageUrl;
}
} catch (e) {
console.log("Face correction analysis (non-JSON response):", result.content);
return imageUrl;
}
} catch (error) {
console.error("Face correction failed:", error);
return null;
}
},
// Advanced semantic face analysis
analyzeFace: async function(imageUrl) {
try {
const result = await websim.chat.completions.create({
messages: [
{
role: "system",
content: `Perform comprehensive face analysis:
1. Check facial symmetry
2. Verify anatomical correctness
3. Assess style adherence
4. Detect any artifacts or inconsistencies
5. Provide a concise summary.`
},
{
role: "user",
content: [
{ type: "text", text: "Analyze face in image" },
{ type: "image_url", image_url: { url: imageUrl } }
]
}
]
});
return result.content;
} catch (error) {
console.error("Face analysis failed:", error);
return null;
}
}
};
async function generateImage(prompt, options = {}) {
const {
negativePrompt = '',
seed,
style = 'default',
renderQuality = 'standard',
lighting,
controlNetMode,
faceQuality,
faceStyle,
symmetry,
perspective,
objectPlacement,
lightSource,
depthPerception,
cfgScale,
steps
} = options;
// Get style-specific configuration
const styleConfig = styleMap[style] || styleMap['default'];
// Combine style-specific prefix with original prompt
let enhancedPrompt = `${styleConfig.prompt_prefix}, ${prompt}`;
// If face generation is detected, enhance the prompt
const isFacePrompt = prompt.toLowerCase().includes('face') ||
prompt.toLowerCase().includes('portrait');
if (isFacePrompt) {
enhancedPrompt = faceGenerationModule.enhanceFacePrompt(enhancedPrompt, {
faceQuality: faceQuality || 'high',
symmetry: symmetry !== false,
style: faceStyle || 'photorealistic'
});
}
// Enhanced Perspective Mapping
const perspectiveMap = {
'front-view': 'viewed straight on, front perspective',
'side-view': 'side angle view, profile perspective',
'overhead': 'viewed from above, overhead perspective',
'diagonal': 'diagonal angle, dynamic perspective',
'tilted-view': 'slightly tilted view, subtle angle'
};
const objectPlacementMap = {
'balanced': 'balanced composition, symmetric arrangement',
'asymmetric': 'asymmetric layout, dynamic positioning',
'rule-of-thirds': 'following rule of thirds, strategic placement',
'centered': 'centered focal point, symmetrical design'
};
const lightSourceMap = {
'left-side': 'light source from left side, creating defined shadows',
'right-side': 'light source from right side, dramatic shadowing',
'top-down': 'overhead lighting, creating vertical shadows',
'diagonal': 'diagonal light, creating depth and dimension',
'backlighting': 'backlight effect, silhouette and rim lighting',
'soft-ambient': 'soft, diffused ambient lighting'
};
const depthPerceptionMap = {
'shallow-depth': 'shallow depth of field, soft background blur',
'deep-depth': 'deep depth of field, entire scene in focus',
'layered-focus': 'layered focus, multiple depth levels',
'foreground-emphasis': 'foreground elements sharply focused'
};
// Enhance prompt with perspective and composition details
if (perspective) {
enhancedPrompt += `, ${perspectiveMap[perspective]}`;
}
if (objectPlacement) {
enhancedPrompt += `, ${objectPlacementMap[objectPlacement]}`;
}
if (lightSource) {
enhancedPrompt += `, ${lightSourceMap[lightSource]}`;
}
if (depthPerception) {
enhancedPrompt += `, ${depthPerceptionMap[depthPerception]}`;
}
// Use the enhanced mapRenderQuality function
const qualitySettings = mapRenderQuality(renderQuality);
try {
const result = await websim.imageGen({
prompt: enhancedPrompt,
negative_prompt: getCombinedNegativePrompt(negativePrompt),
seed: seed,
style: style === 'default' ? undefined : style,
width: qualitySettings.width,
height: qualitySettings.height,
lighting: lighting === 'default' ? undefined : lighting,
controlnet_mode: controlNetMode === 'none' ? undefined : controlNetMode,
sampler: styleConfig.sampler,
model: styleConfig.model,
cfg_scale: cfgScale,
steps: steps,
perspective: perspective,
object_placement: objectPlacement,
light_source: lightSource,
depth_perception: depthPerception
});
console.log(`Generating image with ${qualitySettings.description}`);
// Post-generation face correction
if (isFacePrompt && result.url) {
const correctedImageUrl = await faceGenerationModule.correctFace(result.url);
result.url = correctedImageUrl || result.url;
// Optional face analysis
const faceAnalysis = await faceGenerationModule.analyzeFace(result.url);
console.log("Face Analysis:", faceAnalysis);
}
return result;
} catch (error) {
console.error("Advanced Image Generation Error:", error);
throw error;
}
}
function getCombinedNegativePrompt(userNegativePrompt) {
const baseAnatomyPreventionPrompts = [
"deformed anatomy",
"extra limbs",
"duplicate body parts",
"unnatural proportions",
"malformed features",
"unrealistic anatomy",
"missing limbs",
"mutated",
"twisted",
"bad eyes",
"extra fingers",
"missing fingers"
];
const baseQualityPreventions = [
"low quality",
"blurry",
"watermark",
"text",
"disfigured",
"ugly",
"nonsensical",
"bad composition",
"poorly drawn",
"sketch",
"noise",
"grainy"
];
const textSpecificPreventions = [
"unreadable text",
"gibberish",
"nonsense text",
"broken letters",
"random symbols"
];
let combinedPrompts = [...baseAnatomyPreventionPrompts, ...baseQualityPreventions, ...textSpecificPreventions];
if (userNegativePrompt) {
combinedPrompts = combinedPrompts.concat(userNegativePrompt.split(',').map(p => p.trim()));
}
const uniquePrompts = [...new Set(combinedPrompts)].filter(p => p !== '');
return uniquePrompts.join(", ");
}
async function performSemanticChecks(prompt, imageUrl) {
const semanticCheckList = document.getElementById('semanticCheckList');
semanticCheckList.innerHTML = 'Running advanced semantic checks...';
try {
const result = await websim.chat.completions.create({
messages: [
{
role: "system",
content: `Perform a comprehensive semantic analysis of the image:
1. Check anatomical correctness
2. Verify prompt adherence
3. Detect any inconsistencies or artifacts
4. Suggest potential improvements`
},
{
role: "user",
content: [
{ type: "text", text: `Analyze image generated from prompt: ${prompt}` },
{ type: "image_url", image_url: { url: imageUrl } }
]
}
]
});
semanticCheckList.innerHTML = result.content
.split('\n')
.map(line => `${line}`)
.join('');
} catch (error) {
console.error("Advanced Semantic Check Failed:", error);
semanticCheckList.innerHTML = `Advanced semantic check failed: ${error.message}`;
}
}
const faceQualitySelect = document.createElement('select');
faceQualitySelect.id = 'faceQualitySelect';
faceQualitySelect.innerHTML = `
`;
const faceStyleSelect = document.createElement('select');
faceStyleSelect.id = 'faceStyleSelect';
faceStyleSelect.innerHTML = `
`;
const perspectiveSelect = document.createElement('select');
perspectiveSelect.id = 'perspectiveSelect';
perspectiveSelect.innerHTML = `
`;
const objectPlacementSelect = document.createElement('select');
objectPlacementSelect.id = 'objectPlacementSelect';
objectPlacementSelect.innerHTML = `
`;
const lightSourceSelect = document.createElement('select');
lightSourceSelect.id = 'lightSourceSelect';
lightSourceSelect.innerHTML = `
`;
const depthPerceptionSelect = document.createElement('select');
depthPerceptionSelect.id = 'depthPerceptionSelect';
depthPerceptionSelect.innerHTML = `
`;
document.querySelector('.style-grid').appendChild(
createControlGroup('🖼️ Face Quality:', faceQualitySelect)
);
document.querySelector('.style-grid').appendChild(
createControlGroup('🎨 Face Style:', faceStyleSelect)
);
document.querySelector('.style-grid').appendChild(
createControlGroup('📸 Perspective:', perspectiveSelect)
);
document.querySelector('.style-grid').appendChild(
createControlGroup('🖌️ Object Placement:', objectPlacementSelect)
);
document.querySelector('.style-grid').appendChild(
createControlGroup('💡 Light Source:', lightSourceSelect)
);
document.querySelector('.style-grid').appendChild(
createControlGroup('🔍 Depth Perception:', depthPerceptionSelect)
);
function createControlGroup(labelText, selectElement) {
const container = document.createElement('div');
container.className = 'style-item';
const label = document.createElement('label');
label.textContent = labelText;
container.appendChild(label);
container.appendChild(selectElement);
return container;
}
generateButton.addEventListener('click', async () => {
const userPrompt = promptInput.value.trim();
if (!userPrompt) {
alert('Please enter a prompt to generate an image!');
return;
}
// Show loading indicator
loadingIndicator.classList.remove('hidden');
// Hide previous image
generatedImage.src = "";
// Clear previous semantic check results
const semanticCheckList = document.getElementById('semanticCheckList');
if (semanticCheckList) {
semanticCheckList.innerHTML = '';
}
document.getElementById('semanticCheckResult').classList.add('hidden');
try {
// Enhanced image generation with more control
const imageGenerationOptions = {
negativePrompt: negativePromptInput.value.trim(),
seed: seedInput.value ? parseInt(seedInput.value, 10) : undefined,
style: styleSelect.value,
renderQuality: renderQualitySelect.value,
lighting: lightingSelect.value,
controlNetMode: controlNetSelect.value,
faceQuality: faceQualitySelect.value,
faceStyle: faceStyleSelect.value,
symmetry: true,
perspective: perspectiveSelect.value,
objectPlacement: objectPlacementSelect.value,
lightSource: lightSourceSelect.value,
depthPerception: depthPerceptionSelect.value,
cfgScale: parseFloat(document.getElementById('cfgScaleInput').value),
steps: parseInt(document.getElementById('stepsInput').value, 10)
};
const result = await generateImage(userPrompt, imageGenerationOptions);
if (result && result.url) {
generatedImage.src = result.url;
// Additional semantic checks and enhancements
// Show semantic check results panel
document.getElementById('semanticCheckResult').classList.remove('hidden');
await performSemanticChecks(userPrompt, result.url);
}
} catch (error) {
console.error("Image Generation Process Failed:", error);
alert("Image generation failed: " + error.message);
generatedImage.src = "";
} finally {
// Hide loading indicator
loadingIndicator.classList.add('hidden');
}
});