Spaces:
Running
Running
Upload 3 files
Browse files- index.html +736 -18
- script.js +774 -0
- style.css +856 -17
index.html
CHANGED
|
@@ -1,19 +1,737 @@
|
|
| 1 |
-
<!doctype html>
|
| 2 |
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
<html>
|
| 2 |
+
<head>
|
| 3 |
+
<title>DeepAI mini</title>
|
| 4 |
+
<link rel="stylesheet" href="style.css">
|
| 5 |
+
<script type="importmap">
|
| 6 |
+
{
|
| 7 |
+
"imports": {
|
| 8 |
+
"three": "https://esm.sh/[email protected]",
|
| 9 |
+
"three/addons/": "https://esm.sh/[email protected]/examples/jsm/"
|
| 10 |
+
}
|
| 11 |
+
}
|
| 12 |
+
</script>
|
| 13 |
+
<script type="module" src="script.js"></script>
|
| 14 |
+
</head>
|
| 15 |
+
<body>
|
| 16 |
+
<h1>DeepAI mini</h1>
|
| 17 |
+
|
| 18 |
+
<div class="technical-info diffusion-stages">
|
| 19 |
+
<div class="component noise-generation">
|
| 20 |
+
<h3>🎲 Noise Initialization</h3>
|
| 21 |
+
<p>Random latent space noise generation</p>
|
| 22 |
+
</div>
|
| 23 |
+
<div class="component denoising-process">
|
| 24 |
+
<h3>🧹 Step-by-Step Denoising</h3>
|
| 25 |
+
<p>Gradual transformation of noise to meaningful structures</p>
|
| 26 |
+
</div>
|
| 27 |
+
<div class="component prompt-guidance">
|
| 28 |
+
<h3>✍️ Prompt-Driven Evolution</h3>
|
| 29 |
+
<p>Text guiding image formation</p>
|
| 30 |
+
</div>
|
| 31 |
+
</div>
|
| 32 |
+
|
| 33 |
+
<div class="input-area">
|
| 34 |
+
<div class="prompt-group">
|
| 35 |
+
<label for="promptInput">🖊️ Primary Prompt:</label>
|
| 36 |
+
<input type="text" id="promptInput" placeholder="Describe your desired image with style and detail...">
|
| 37 |
+
<div class="prompt-hint">Use descriptive language, specify style, subject, scene. Consider layered descriptions.</div>
|
| 38 |
+
</div>
|
| 39 |
+
|
| 40 |
+
<div class="prompt-group advanced-controls">
|
| 41 |
+
<label for="negativePromptInput">🚫 Negative Prompt:</label>
|
| 42 |
+
<input type="text" id="negativePromptInput" placeholder="What to exclude from the image...">
|
| 43 |
+
<div class="prompt-hint">e.g., low quality, blurry, watermark, extra limbs, deformed hands. These will be added to the prompt text.</div>
|
| 44 |
+
</div>
|
| 45 |
+
|
| 46 |
+
<div class="prompt-group style-controls">
|
| 47 |
+
<label>🎨 Style & Quality Options:</label>
|
| 48 |
+
<div class="style-grid">
|
| 49 |
+
<div class="style-item">
|
| 50 |
+
<label for="styleSelect">🖌️ Art Style (Primary):</label>
|
| 51 |
+
<select id="styleSelect">
|
| 52 |
+
<option value="default">Default</option>
|
| 53 |
+
<option value="photorealistic">Photorealistic</option>
|
| 54 |
+
<option value="anime">Anime</option>
|
| 55 |
+
<option value="digital-art">Digital Art</option>
|
| 56 |
+
<option value="studio-ghibli">Studio Ghibli</option>
|
| 57 |
+
<option value="oil-painting">Oil Painting</option>
|
| 58 |
+
<option value="realistic">Realistic</option>
|
| 59 |
+
<option value="dreamscape">Dreamscape</option>
|
| 60 |
+
<option value="cyberrealistic">CyberRealistic</option>
|
| 61 |
+
<option value="deliberate">Deliberate</option>
|
| 62 |
+
</select>
|
| 63 |
+
</div>
|
| 64 |
+
<div class="style-item">
|
| 65 |
+
<label for="styleBlendSelect"> Mixing (Secondary):</label>
|
| 66 |
+
<select id="styleBlendSelect">
|
| 67 |
+
<option value="">None</option>
|
| 68 |
+
<option value="photorealistic">Photorealistic</option>
|
| 69 |
+
<option value="anime">Anime</option>
|
| 70 |
+
<option value="digital-art">Digital Art</option>
|
| 71 |
+
<option value="studio-ghibli">Studio Ghibli</option>
|
| 72 |
+
<option value="oil-painting">Oil Painting</option>
|
| 73 |
+
<option value="realistic">Realistic</option>
|
| 74 |
+
<option value="dreamscape">Dreamscape</option>
|
| 75 |
+
<option value="cyberrealistic">CyberRealistic</option>
|
| 76 |
+
<option value="deliberate">Deliberate</option>
|
| 77 |
+
</select>
|
| 78 |
+
</div>
|
| 79 |
+
<div class="style-item">
|
| 80 |
+
<label for="renderQualitySelect">📸 Render Resolution:</label>
|
| 81 |
+
<select id="renderQualitySelect">
|
| 82 |
+
<option value="standard">Standard (512x512)</option>
|
| 83 |
+
<option value="high">High (768x768)</option>
|
| 84 |
+
<option value="ultra">Ultra HD (1024x1024)</option>
|
| 85 |
+
<option value="4k">4K Render (2048x2048)</option>
|
| 86 |
+
<option value="portrait-h">Portrait (768x1024)</option>
|
| 87 |
+
<option value="portrait-u">Portrait (896x1152)</option>
|
| 88 |
+
<option value="landscape-h">Landscape (1024x768)</option>
|
| 89 |
+
<option value="landscape-u">Landscape (1152x896)</option>
|
| 90 |
+
</select>
|
| 91 |
+
</div>
|
| 92 |
+
<div class="style-item">
|
| 93 |
+
<label for="lightingSelect">💡 Lighting:</label>
|
| 94 |
+
<select id="lightingSelect">
|
| 95 |
+
<option value="default">Default</option>
|
| 96 |
+
<option value="cinematic">Cinematic</option>
|
| 97 |
+
<option value="soft">Soft</option>
|
| 98 |
+
<option value="dramatic">Dramatic</option>
|
| 99 |
+
<option value="sunset">Sunset (Golden Hour)</option>
|
| 100 |
+
<option value="studio">Studio Lighting</option>
|
| 101 |
+
<option value="moonlight">Moonlight</option>
|
| 102 |
+
<option value="natural">Natural Lighting</option>
|
| 103 |
+
<option value="volumetric">Volumetric Lighting</option>
|
| 104 |
+
</select>
|
| 105 |
+
</div>
|
| 106 |
+
<div class="style-item">
|
| 107 |
+
<label for="cameraAngleSelect">📷 Camera Angle:</label>
|
| 108 |
+
<select id="cameraAngleSelect">
|
| 109 |
+
<option value="">Default</option>
|
| 110 |
+
<option value="low angle">Low Angle</option>
|
| 111 |
+
<option value="high angle">High Angle</option>
|
| 112 |
+
<option value="overhead view">Overhead View</option>
|
| 113 |
+
<option value="close-up">Close-up</option>
|
| 114 |
+
<option value="wide shot">Wide Shot</option>
|
| 115 |
+
<option value="dutch angle">Dutch Angle</option>
|
| 116 |
+
</select>
|
| 117 |
+
</div>
|
| 118 |
+
<div class="style-item">
|
| 119 |
+
<label for="cameraDepthSelect">🎯 Camera Depth/Lens:</label>
|
| 120 |
+
<select id="cameraDepthSelect">
|
| 121 |
+
<option value="">Default</option>
|
| 122 |
+
<option value="shallow depth of field">Shallow Depth of Field</option>
|
| 123 |
+
<option value="deep depth of field">Deep Depth of Field</option>
|
| 124 |
+
<option value="35mm lens">35mm lens</option>
|
| 125 |
+
<option value="50mm lens">50mm lens</option>
|
| 126 |
+
<option value="85mm lens">85mm lens</option>
|
| 127 |
+
<option value="cinematic film still">Cinematic Film Still</option>
|
| 128 |
+
<option value="film lens effect">Film Lens Effect</option>
|
| 129 |
+
<option value="vignette">Vignette</option>
|
| 130 |
+
<option value="chromatic aberration">Chromatic Aberration</option>
|
| 131 |
+
</select>
|
| 132 |
+
</div>
|
| 133 |
+
<div class="style-item">
|
| 134 |
+
<label for="perspectiveSelect">🔍 Scene Perspective:</label>
|
| 135 |
+
<select id="perspectiveSelect">
|
| 136 |
+
<option value="">Default</option>
|
| 137 |
+
<option value="front-view">Front View</option>
|
| 138 |
+
<option value="side-view">Side View</option>
|
| 139 |
+
<option value="overhead">Overhead View</option>
|
| 140 |
+
<option value="diagonal">Diagonal Perspective</option>
|
| 141 |
+
<option value="tilted-view">Slightly Tilted View</option>
|
| 142 |
+
</select>
|
| 143 |
+
</div>
|
| 144 |
+
<div class="style-item">
|
| 145 |
+
<label for="objectPlacementSelect">🧩 Object Placement:</label>
|
| 146 |
+
<select id="objectPlacementSelect">
|
| 147 |
+
<option value="">Default</option>
|
| 148 |
+
<option value="balanced">Balanced Composition</option>
|
| 149 |
+
<option value="asymmetric">Asymmetric Layout</option>
|
| 150 |
+
<option value="rule-of-thirds">Rule of Thirds</option>
|
| 151 |
+
<option value="centered">Centered Focal Point</option>
|
| 152 |
+
</select>
|
| 153 |
+
</div>
|
| 154 |
+
<div class="style-item">
|
| 155 |
+
<label for="lightSourceSelect">💡 Light Source Position:</label>
|
| 156 |
+
<select id="lightSourceSelect">
|
| 157 |
+
<option value="">Default</option>
|
| 158 |
+
<option value="left-side">Left Side</option>
|
| 159 |
+
<option value="right-side">Right Side</option>
|
| 160 |
+
<option value="top-down">Top Down</option>
|
| 161 |
+
<option value="diagonal">Diagonal Lighting</option>
|
| 162 |
+
<option value="backlighting">Back Lighting</option>
|
| 163 |
+
<option value="soft-ambient">Soft Ambient</option>
|
| 164 |
+
</select>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="style-item">
|
| 167 |
+
<label for="depthPerceptionSelect">📐 Depth Perception:</label>
|
| 168 |
+
<select id="depthPerceptionSelect">
|
| 169 |
+
<option value="">Default</option>
|
| 170 |
+
<option value="shallow-depth">Shallow Depth of Field</option>
|
| 171 |
+
<option value="deep-depth">Deep Depth of Field</option>
|
| 172 |
+
<option value="layered-focus">Layered Focus</option>
|
| 173 |
+
<option value="foreground-emphasis">Foreground Emphasis</option>
|
| 174 |
+
</select>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<div class="prompt-group realism-controls">
|
| 180 |
+
<label>✨ Realism & Detail Controls:</label>
|
| 181 |
+
<div class="realism-grid style-grid">
|
| 182 |
+
<div class="style-item">
|
| 183 |
+
<label for="eyeDetailSelect">👁️ Eye Detail:</label>
|
| 184 |
+
<select id="eyeDetailSelect">
|
| 185 |
+
<option value="default">Standard</option>
|
| 186 |
+
<option value="subtle">Subtle Realism (Iris, Sclera)</option>
|
| 187 |
+
<option value="hyperrealistic">Hyperrealistic Details (Veins, Asymmetry, Micro-reflections)</option>
|
| 188 |
+
</select>
|
| 189 |
+
</div>
|
| 190 |
+
<div class="style-item">
|
| 191 |
+
<label for="skinDetailSelect">🧖 Skin Detail:</label>
|
| 192 |
+
<select id="skinDetailSelect">
|
| 193 |
+
<option value="default">Standard</option>
|
| 194 |
+
<option value="textured">Realistic Texture (Pores, Tonal Variation)</option>
|
| 195 |
+
<option value="hyperrealistic">Hyperrealistic (Blemishes, Subsurface Scattering)</option>
|
| 196 |
+
</select>
|
| 197 |
+
</div>
|
| 198 |
+
<div class="style-item">
|
| 199 |
+
<label for="hairRealismSelect">💇 Hair Realism:</label>
|
| 200 |
+
<select id="hairRealismSelect">
|
| 201 |
+
<option value="default">Standard</option>
|
| 202 |
+
<option value="natural">Natural Strands (Directional Variation)</option>
|
| 203 |
+
<option value="flyaways">Flyaways & Frizz</option>
|
| 204 |
+
</select>
|
| 205 |
+
</div>
|
| 206 |
+
<div class="style-item">
|
| 207 |
+
<label for="backgroundEffectSelect">🌁 Background Effect:</label>
|
| 208 |
+
<select id="backgroundEffectSelect">
|
| 209 |
+
<option value="default">Detailed Background</option>
|
| 210 |
+
<option value="bokeh">Bokeh Blur (Shallow DOF)</option>
|
| 211 |
+
<option value="volumetric">Volumetric Light</option>
|
| 212 |
+
<option value="cinematic_blur">Cinematic Background Blur</option>
|
| 213 |
+
</select>
|
| 214 |
+
</div>
|
| 215 |
+
<div class="style-item">
|
| 216 |
+
<label for="lipRealismSelect">💋 Lip Realism:</label>
|
| 217 |
+
<select id="lipRealismSelect">
|
| 218 |
+
<option value="default">Standard</option>
|
| 219 |
+
<option value="soft_edges">Soft Edges & Gradient</option>
|
| 220 |
+
<option value="textured">Realistic Texture & Highlights</option>
|
| 221 |
+
<option value="slight_smudge">Slight Smudge Realism</option>
|
| 222 |
+
</select>
|
| 223 |
+
</div>
|
| 224 |
+
<div class="style-item">
|
| 225 |
+
<label for="fabricDetailSelect">👕 Fabric Detail:</label>
|
| 226 |
+
<select id="fabricDetailSelect">
|
| 227 |
+
<option value="default">Standard</option>
|
| 228 |
+
<option value="textured">Realistic Texture (Microtexture)</option>
|
| 229 |
+
<option value="detailed_folds">Detailed Folds & Shading</option>
|
| 230 |
+
<option value="specific_material">Specify Material Type (Cotton, Wool, etc.)</option>
|
| 231 |
+
</select>
|
| 232 |
+
</div>
|
| 233 |
+
<div class="style-item">
|
| 234 |
+
<label for="faceExpressionSelect">🙂 Face Expression:</label>
|
| 235 |
+
<select id="faceExpressionSelect">
|
| 236 |
+
<option value="default">Neutral</option>
|
| 237 |
+
<option value="slight_smile">Slight Smile</option>
|
| 238 |
+
<option value="subtle">Subtle Expression</option>
|
| 239 |
+
<option value="surprise">Surprise</option>
|
| 240 |
+
<option value="natural_emotion">Natural Emotion</option>
|
| 241 |
+
<option value="sad">Sad</option>
|
| 242 |
+
<option value="tearful">Tearful</option>
|
| 243 |
+
<option value="crying">Crying</option>
|
| 244 |
+
<option value="angry">Angry</option>
|
| 245 |
+
<option value="introverted">Introverted</option>
|
| 246 |
+
</select>
|
| 247 |
+
</div>
|
| 248 |
+
<div class="style-item">
|
| 249 |
+
<label for="photoStyleSelect">📷 Photo Style:</label>
|
| 250 |
+
<select id="photoStyleSelect">
|
| 251 |
+
<option value="default">Default</option>
|
| 252 |
+
<option value="vintage">Vintage</option>
|
| 253 |
+
<option value="film grain">Film Grain</option>
|
| 254 |
+
<option value="low light">Low Light</option>
|
| 255 |
+
<option value="bw">Black and White</option>
|
| 256 |
+
<option value="cinematic">Cinematic</option>
|
| 257 |
+
</select>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
|
| 262 |
+
<div class="prompt-group control-options">
|
| 263 |
+
<label>🕹️ Advanced Control:</label>
|
| 264 |
+
<div class="control-grid">
|
| 265 |
+
<div class="control-item">
|
| 266 |
+
<label for="seedInput">🎲 Seed:</label>
|
| 267 |
+
<input type="number" id="seedInput" placeholder="Reproducibility">
|
| 268 |
+
</div>
|
| 269 |
+
<div class="control-item">
|
| 270 |
+
<label for="cfgScaleInput">⚙️ CFG Scale:</label>
|
| 271 |
+
<input type="number" id="cfgScaleInput" value="7" min="1" max="30" step="0.1">
|
| 272 |
+
<div class="prompt-hint">Recommended: 5-7 for faces. Added to prompt text.</div>
|
| 273 |
+
</div>
|
| 274 |
+
<div class="control-item">
|
| 275 |
+
<label for="stepsInput">📈 Steps:</label>
|
| 276 |
+
<input type="number" id="stepsInput" value="30" min="10" max="100">
|
| 277 |
+
<div class="prompt-hint">Recommended: 30-40 for details. Added to prompt text.</div>
|
| 278 |
+
</div>
|
| 279 |
+
<div class="control-item">
|
| 280 |
+
<label for="controlNetSelect">🎭 Pose/Composition (via prompt):</label>
|
| 281 |
+
<select id="controlNetSelect">
|
| 282 |
+
<option value="none">None (Prompt guidance only)</option>
|
| 283 |
+
<option value="pose">Pose Guidance (via prompt)</option>
|
| 284 |
+
<option value="edge">Edge Control (via prompt)</option>
|
| 285 |
+
<option value="depth">Depth Map (via prompt)</option>
|
| 286 |
+
</select>
|
| 287 |
+
<div class="prompt-hint">Direct ControlNet not supported by this API. Influences prompt text only.</div>
|
| 288 |
+
</div>
|
| 289 |
+
</div>
|
| 290 |
+
</div>
|
| 291 |
+
|
| 292 |
+
<div class="prompt-group reference-image-upload hidden">
|
| 293 |
+
<label for="referenceImageInput">🖼️ Reference Image (Not supported by API):</label>
|
| 294 |
+
<input type="file" id="referenceImageInput" accept="image/*" disabled>
|
| 295 |
+
<div class="prompt-hint">Reference images for ControlNet/Img2Img are not supported by the websim.imageGen API.</div>
|
| 296 |
+
</div>
|
| 297 |
+
|
| 298 |
+
<div class="prompt-group anatomical-guidance">
|
| 299 |
+
<label>🧬 Anatomical Precision:</label>
|
| 300 |
+
<div class="anatomy-controls">
|
| 301 |
+
<div class="anatomy-item">
|
| 302 |
+
<label for="anatomyControlSelect">🔍 Body Structure:</label>
|
| 303 |
+
<select id="anatomyControlSelect">
|
| 304 |
+
<option value="default">Standard</option>
|
| 305 |
+
<option value="strict">Strict Anatomical Accuracy</option>
|
| 306 |
+
<option value="artistic">Artistic Interpretation</option>
|
| 307 |
+
<option value="stylized">Stylized Representation</option>
|
| 308 |
+
</select>
|
| 309 |
+
</div>
|
| 310 |
+
<div class="anatomy-hint">
|
| 311 |
+
<p>🚨 Models like SDXL have improved anatomical consistency. Use negative prompts for specifics (e.g. "extra limbs").</p>
|
| 312 |
+
</div>
|
| 313 |
+
</div>
|
| 314 |
+
</div>
|
| 315 |
+
|
| 316 |
+
<button id="generateButton">🚀 Generate with DeepAI mini</button>
|
| 317 |
+
</div>
|
| 318 |
+
|
| 319 |
+
<div id="loading" class="hidden">Generating through AI Pipeline...</div>
|
| 320 |
+
|
| 321 |
+
<div class="image-area">
|
| 322 |
+
<img id="generatedImage" src="" alt="DeepAI mini Generated Image">
|
| 323 |
+
</div>
|
| 324 |
+
|
| 325 |
+
<div class="ai-enhancement-panel">
|
| 326 |
+
<h2>🧠 AI-Powered Enhancements (via Chat API)</h2>
|
| 327 |
+
<div class="enhancement-controls">
|
| 328 |
+
<div class="enhancement-group">
|
| 329 |
+
<label for="promptEnhancerToggle">🚀 Prompt Enhancer</label>
|
| 330 |
+
<input type="checkbox" id="promptEnhancerToggle" checked disabled>
|
| 331 |
+
<div class="prompt-hint">Always active now (enhances prompt text).</div>
|
| 332 |
+
</div>
|
| 333 |
+
<div class="enhancement-group">
|
| 334 |
+
<label for="semanticCheckToggle">🔍 Semantic Consistency</label>
|
| 335 |
+
<input type="checkbox" id="semanticCheckToggle" checked>
|
| 336 |
+
<div class="prompt-hint">Uses Chat API to analyze result.</div>
|
| 337 |
+
</div>
|
| 338 |
+
<div class="enhancement-group">
|
| 339 |
+
<label for="faceCorrectionToggle">✨ Face Correction</label>
|
| 340 |
+
<input type="checkbox" id="faceCorrectionToggle" checked>
|
| 341 |
+
<div class="prompt-hint">Uses Chat API for potential face fixes.</div>
|
| 342 |
+
</div>
|
| 343 |
+
</div>
|
| 344 |
+
|
| 345 |
+
<div id="promptEnhancementResult" class="enhancement-result hidden">
|
| 346 |
+
<h3>✨ Enhanced Prompt Sent to AI</h3>
|
| 347 |
+
<p id="enhancedPromptText"></p>
|
| 348 |
+
</div>
|
| 349 |
+
|
| 350 |
+
<div id="faceCorrectionResult" class="enhancement-result hidden">
|
| 351 |
+
<h3>✨ Face Correction Analysis</h3>
|
| 352 |
+
<p id="faceCorrectionText"></p>
|
| 353 |
+
</div>
|
| 354 |
+
|
| 355 |
+
<div id="semanticCheckResult" class="enhancement-result hidden">
|
| 356 |
+
<h3>🕵️ Semantic Analysis</h3>
|
| 357 |
+
<ul id="semanticCheckList"><li>Run generation to see analysis.</li></ul>
|
| 358 |
+
</div>
|
| 359 |
+
</div>
|
| 360 |
+
|
| 361 |
+
<div class="technical-explanation">
|
| 362 |
+
<h2>🧠 Stable Diffusion Capabilities Overview</h2>
|
| 363 |
+
<p>Modern Stable Diffusion models, like SDXL, offer significant improvements in generating images with:</p>
|
| 364 |
+
<ul>
|
| 365 |
+
<li>✅ More accurate anatomy (hands, faces, body structures)</li>
|
| 366 |
+
<li>✅ Improved overall visual consistency</li>
|
| 367 |
+
<li>✅ Fewer 'strange' or distorted artifacts</li>
|
| 368 |
+
</ul>
|
| 369 |
+
<p>They also support a wide range of artistic styles, from photorealistic renders to various digital art and traditional painting styles.</p>
|
| 370 |
+
<div class="diffusion-details">
|
| 371 |
+
<div class="stage-visualization">
|
| 372 |
+
<h3>🎨 Supported Styles Examples (via Prompt):</h3>
|
| 373 |
+
<ul>
|
| 374 |
+
<li>Photorealistic (Realistic Vision)</li>
|
| 375 |
+
<li>Realistic + Artistic (DreamShaper)</li>
|
| 376 |
+
<li>Anime (Deliberate, MeinaMix)</li>
|
| 377 |
+
<li>Oil Painting, Digital Art, etc.</li>
|
| 378 |
+
<li>CyberRealistic, Deliberate (for better faces)</li>
|
| 379 |
+
</ul>
|
| 380 |
+
</div>
|
| 381 |
+
<div class="generation-parameters">
|
| 382 |
+
<h3>🛠️ Key Control Tools (via Prompt):</h3>
|
| 383 |
+
<ul>
|
| 384 |
+
<li>✍️ **Prompt Engineering:** Clear, detailed prompts.</li>
|
| 385 |
+
<li>🚫 **Negative Prompt:** Exclude unwanted elements (e.g., 'extra limbs').</li>
|
| 386 |
+
<li>🎭 **ControlNet:** Guide pose, composition, edges (e.g., Pose, Depth, Edge modes). *Note: Applied via prompt text.*</li>
|
| 387 |
+
<li>🎲 **Seed:** Ensure reproducibility for variations.</li>
|
| 388 |
+
<li>⚙️ **CFG Scale & Steps:** Control adherence and detail. *Note: Applied via prompt text.*</li>
|
| 389 |
+
</ul>
|
| 390 |
+
</div>
|
| 391 |
+
</div>
|
| 392 |
+
|
| 393 |
+
<div class="text-generation-info">
|
| 394 |
+
<h3>📝 Generating Text in Images:</h3>
|
| 395 |
+
<p>Generating legible and accurate text within images is a known challenge for many AI models. Here's how it's approached:</p>
|
| 396 |
+
<ul>
|
| 397 |
+
<li>✍️ **Prompting:** Use clear terms like "legible text", "reads 'Welcome'", "clear font".</li>
|
| 398 |
+
<li>🚫 **Negative Prompts:** Exclude bad text with phrases like "unreadable", "nonsense text", "broken letters".
|
| 399 |
+
<li>🎭 **Advanced Techniques:** Tools like ControlNet (using text masks/layouts) and Inpainting (fixing specific text areas) can help, but require specific model support. *Note: ControlNet applied via prompt text.*</li>
|
| 400 |
+
<li>💡 **Best Practice:** Often, the most reliable method is to generate the image first, then add the desired text using a separate image editing tool.</li>
|
| 401 |
+
</ul>
|
| 402 |
+
<div class="text-hint">
|
| 403 |
+
<p>Even advanced models may struggle with complex or lengthy text.</p>
|
| 404 |
+
</div>
|
| 405 |
+
</div>
|
| 406 |
+
|
| 407 |
+
<div class="how-it-works">
|
| 408 |
+
<h2>⚙️ How Stable Diffusion Works (via Prompt Guidance)</h2>
|
| 409 |
+
<ul>
|
| 410 |
+
<li>🧠 **Latent Diffusion Model (LDM):** Processes images in a compressed (latent) space for speed and efficiency, using a VAE to encode/decode. This approach allows the model to process data more efficiently and capture more details for higher quality results.</li>
|
| 411 |
+
<li>💬 **Text Encoder (CLIP):** Uses CLIP to understand the meaning of your text prompt and connect it to visual concepts. Trained on vast datasets of image-text pairs, it learns the semantic meaning of text descriptions and how they map to visual details.</li>
|
| 412 |
+
<li>🔄 **Diffusion Process:** Starts with pure noise and gradually refines it over steps, guided by the text prompt, until a coherent image emerges. This iterative process gradually adds detail and refines features in each step, improving overall quality.</li>
|
| 413 |
+
<li>🧩 **Cross-Attention:** Dynamically links parts of your prompt text to corresponding areas in the generated image. This attention mechanism ensures that specific words in the prompt influence the fine details in the relevant parts of the image.</li>
|
| 414 |
+
<li>📚 **Massive Training Data:** Trained on billions of image-text pairs (like LAION-5B), allowing it to understand and generate a vast array of subjects and styles. This extensive training data enables the model to learn about objects and details from many perspectives and lighting conditions.</li>
|
| 415 |
+
<li>📈 **Modular Design:** Supports extensions like LoRA, ControlNet, and DreamBooth for fine-tuning style, controlling composition, or learning specific concepts. These methods allow for fine-tuning the model's behavior to define and detail specific objects, characters, or scenes. *Note: ControlNet and LoRA influence simulated via prompt engineering.*</li>
|
| 416 |
+
<li>📊 **Samplers:** Uses various algorithms (Euler, DPM++, etc.) to control the denoising process, impacting quality and generation speed. Customizable samplers allow optimizing image generation for different detail levels and quality requirements, enabling faster, high-quality outputs. *Note: Sampler choice simulated via prompt engineering.*</li>
|
| 417 |
+
<li>✅ **Prompt & Negative Prompt System:** Explicitly uses both positive instructions and negative constraints to guide the generation towards desired and away from undesired outcomes. *Note: Negative prompt included in main prompt text.*</li>
|
| 418 |
+
<li>✨ **Zero-Shot Capability:** Can interpret and generate images for novel or unusual combinations of concepts it hasn't seen together before.</li>
|
| 419 |
+
<li>⚡ **Efficiency:** Designed to be relatively efficient, capable of running on systems with limited GPU memory compared to earlier models.</li>
|
| 420 |
+
<li>⚙️ **Conditional Image Generation:** The model can generate images conditioned on text descriptions or other guidance, controlling elements like realism, lighting, perspective, and fine details.</li>
|
| 421 |
+
<li>🧠 **Cognitive Perception:** The model understands relationships within the images it creates, placing objects and details correctly based on their learned properties (e.g., the correct shade and reflection of a "golden yellow rabbit").</li>
|
| 422 |
+
<li>📈 **Continuous Learning & Improvement:** As an open-source project, Stable Diffusion is constantly updated with new features and techniques, learning from user feedback to improve accuracy and detail over time.</li>
|
| 423 |
+
</ul>
|
| 424 |
+
<div class="text-hint">
|
| 425 |
+
<p>Understanding these concepts helps in writing better prompts and using advanced controls effectively.</p>
|
| 426 |
+
</div>
|
| 427 |
+
</div>
|
| 428 |
+
|
| 429 |
+
<div class="technical-section">
|
| 430 |
+
<h2>🔧 AI Visual Production Quality Improvement Methods (via Prompt)</h2>
|
| 431 |
+
<p>To achieve higher quality outputs, leverage these techniques:</p>
|
| 432 |
+
<ul>
|
| 433 |
+
<li>
|
| 434 |
+
<strong>1.1. Advanced Prompt Engineering:</strong>
|
| 435 |
+
<ul>
|
| 436 |
+
<li>**Layered Description:** Structure your prompt to describe the scene layer by layer (e.g., `[Environment], [Lighting], [Main Subject], [Style], [Color Palette], [Background Details]`).</li>
|
| 437 |
+
<li>**Weighted Sections:** Use syntax like `[subject]::2` or `[style]::1` (if supported by the model/API) to give certain prompt parts more or less emphasis. *Note: Weighting not directly supported by this API, use phrasing.*</li>
|
| 438 |
+
<li>**Negative Prompt Usage:** Crucial for excluding unwanted elements like `(deformed face, extra limbs, blurry, low quality, text, watermark)`. *Note: Included in main prompt text.*</li>
|
| 439 |
+
</ul>
|
| 440 |
+
</li>
|
| 441 |
+
</ul>
|
| 442 |
+
</div>
|
| 443 |
+
|
| 444 |
+
<div class="technical-section">
|
| 445 |
+
<h2>✨ MidJourney v6 Features (AI Terminology Updated)</h2>
|
| 446 |
+
<ul>
|
| 447 |
+
<li>
|
| 448 |
+
<strong>AI-enhanced Detail and Realism:</strong>
|
| 449 |
+
<p>The latest version of the AI produces much more realistic and detailed visuals. Thanks to advanced algorithms, the level of realism in every detail increases, while lighting interactions and texture become clearer. The AI meticulously processes each layer of the visuals, blending photorealism with artistic styles.</p>
|
| 450 |
+
</li>
|
| 451 |
+
<li>
|
| 452 |
+
<strong>AI-driven Emotional Depth:</strong>
|
| 453 |
+
<p>The AI processes the emotional expressions of characters in much greater depth. Human faces and animals are reflected with more distinct, realistic expressions. This deep perspective of the AI accurately portrays every detail in the visuals within a spiritual context.</p>
|
| 454 |
+
</li>
|
| 455 |
+
<li>
|
| 456 |
+
<strong>AI Temporal and Spatial Manipulation:</strong>
|
| 457 |
+
<p>The AI flawlessly manages the temporal and spatial dynamics of the visual. It presents visuals harmoniously in different time periods, environmental conditions, or perspectives. This feature also provides a significant advantage for animation and visual storytelling.</p>
|
| 458 |
+
</li>
|
| 459 |
+
<li>
|
| 460 |
+
<strong>AI Customizable Art Styles:</strong>
|
| 461 |
+
<p>Users can direct the AI towards customized art styles. Switching between artistic techniques or visual themes is extremely easy. The AI can flawlessly apply the exact visual style users want, for example, when creating a painting in the style of Van Gogh.</p>
|
| 462 |
+
</li>
|
| 463 |
+
<li>
|
| 464 |
+
<strong>AI Real-time Interaction:</strong>
|
| 465 |
+
<p>The AI quickly responds to each of the user's edits and feedback. This provides continuous interaction during the visual production process, allowing users to work dynamically with the AI. The desired result is quickly achieved by making instant visual changes.</p>
|
| 466 |
+
</li>
|
| 467 |
+
<li>
|
| 468 |
+
<strong>AI-enhanced Lighting and Shadowing:</strong>
|
| 469 |
+
<p>The AI applies light and shadow effects much more effectively to increase the visual's depth. With photorealistic lighting and detailed shadowing, every object and character is depicted more vividly.</p>
|
| 470 |
+
</li>
|
| 471 |
+
<li>
|
| 472 |
+
<strong>AI-optimized Shape and Texture Creation:</strong>
|
| 473 |
+
<p>MidJourney v6 utilizes the AI's texture processing power to make every surface realistic. Transitions between organic and mechanical forms become much smoother and more accurate.</p>
|
| 474 |
+
</li>
|
| 475 |
+
<li>
|
| 476 |
+
<strong>AI-Optimized Upscaling:</strong>
|
| 477 |
+
<p>Upscaling operations are applied without quality loss even at high resolution, thanks to the AI's detail preservation algorithms. Sharpness and details are maintained when visuals are enlarged.</p>
|
| 478 |
+
</li>
|
| 479 |
+
<li>
|
| 480 |
+
<strong>AI Style Consistency Across Variations:</strong>
|
| 481 |
+
<p>Even when the AI produces multiple variations on a specific style or theme, each result remains consistent and harmonious. Users can choose between completely different styles or tones using the same theme.</p>
|
| 482 |
+
</li>
|
| 483 |
+
<li>
|
| 484 |
+
<strong>AI Data-Driven Learning and Adaptation:</strong>
|
| 485 |
+
<p>MidJourney v6's AI is developed through dataset learning and becomes even smarter over time. It adapts to users' preferences and previous interactions, providing more customized results.</p>
|
| 486 |
+
</li>
|
| 487 |
+
</ul>
|
| 488 |
+
<p><strong>Summary:</strong> MidJourney v6, as an AI-supported visual production platform, offers users significantly more customization, realism, and interaction possibilities. The AI's processing power integrates visual details and artistic styles much more successfully. Users gain much more freedom and control in visual design, and the AI works meticulously on every visual, flawlessly completing all designs.</p>
|
| 489 |
+
</div>
|
| 490 |
+
|
| 491 |
+
<div class="dataset-info">
|
| 492 |
+
<h2>📚 AI Visual Generation Databases</h2>
|
| 493 |
+
<p>Stable Diffusion and similar text-to-image AI models are trained on massive databases containing millions of images and descriptions. These databases enable the model to generate realistic, creative, and aesthetic visuals.</p>
|
| 494 |
+
|
| 495 |
+
<div class="database-categories">
|
| 496 |
+
<div class="database-category">
|
| 497 |
+
<h3>🧠 1. LAION Databases (Large-scale AI Open Network)</h3>
|
| 498 |
+
<ul>
|
| 499 |
+
<li><strong>LAION-2B Database</strong>: Over 2 billion image-caption pairs from Creative Commons sources</li>
|
| 500 |
+
<li><strong>LAION-400M Database</strong>: 400 million refined examples</li>
|
| 501 |
+
<li><strong>LAION-Aesthetics Database</strong>: Filtered for artistic and high-quality content</li>
|
| 502 |
+
<li><strong>LAION-Human Database</strong>: Specialized human faces, poses, and scenes</li>
|
| 503 |
+
</ul>
|
| 504 |
+
</div>
|
| 505 |
+
|
| 506 |
+
<div class="database-category">
|
| 507 |
+
<h3>🌐 Other Key Databases</h3>
|
| 508 |
+
<ul>
|
| 509 |
+
<li><strong>Conceptual Captions (Google)</strong>: 3 million image-text pairs</li>
|
| 510 |
+
<li><strong>COCO Dataset</strong>: 330,000 images with object relationships</li>
|
| 511 |
+
<li><strong>OpenImages (Google)</strong>: 9+ million labeled images</li>
|
| 512 |
+
<li><strong>YFCC100M</strong>: 100 million public photos with rich metadata</li>
|
| 513 |
+
<li><strong>ImageNet</strong>: 14+ million categorized images</li>
|
| 514 |
+
<li><strong>WIT (Wikipedia Image-Text)</strong>: 37 million image-text pairs</li>
|
| 515 |
+
<li><strong>CC12M</strong>: 12 million high-quality image descriptions</li>
|
| 516 |
+
</ul>
|
| 517 |
+
</div>
|
| 518 |
+
|
| 519 |
+
<div class="database-category">
|
| 520 |
+
<h3>🎨 Specialized Style Databases</h3>
|
| 521 |
+
<ul>
|
| 522 |
+
<li><strong>Pinterest / Behance Datasets</strong>: Art styles and design compositions</li>
|
| 523 |
+
<li><strong>Danbooru</strong>: Anime and manga-focused images</li>
|
| 524 |
+
<li><strong>TextCaps & VizWiz</strong>: Image description datasets</li>
|
| 525 |
+
</ul>
|
| 526 |
+
</div>
|
| 527 |
+
|
| 528 |
+
<div class="database-category">
|
| 529 |
+
<h3>🔐 Commercial & Restricted Databases</h3>
|
| 530 |
+
<ul>
|
| 531 |
+
<li>Shutterstock</li>
|
| 532 |
+
<li>Getty Images</li>
|
| 533 |
+
<li>Adobe Stock</li>
|
| 534 |
+
<li>Instagram / Reddit / Tumblr filtered content</li>
|
| 535 |
+
</ul>
|
| 536 |
+
</div>
|
| 537 |
+
</div>
|
| 538 |
+
|
| 539 |
+
<div class="database-insights">
|
| 540 |
+
<h3>🚀 How These Databases Power AI Image Generation</h3>
|
| 541 |
+
<ul>
|
| 542 |
+
<li>Provide millions of image-text pairs for training</li>
|
| 543 |
+
<li>Enable understanding of complex visual relationships</li>
|
| 544 |
+
<li>Help models learn diverse artistic styles</li>
|
| 545 |
+
<li>Improve anatomical and contextual accuracy</li>
|
| 546 |
+
<li>Allow zero-shot learning of new concepts</li>
|
| 547 |
+
</ul>
|
| 548 |
+
</div>
|
| 549 |
+
</div>
|
| 550 |
+
|
| 551 |
+
<div class="control-and-error-reduction">
|
| 552 |
+
<h2>🚫 Controlling Output & Reducing Errors</h2>
|
| 553 |
+
<p>AI image generation models can sometimes produce unwanted artifacts like extra body parts or distorted features. Here's how these issues are addressed:</p>
|
| 554 |
+
<ul>
|
| 555 |
+
<li>
|
| 556 |
+
<strong>1. AI's Attention Mechanism:</strong>
|
| 557 |
+
<p>AI uses attention mechanisms to focus on specific words in the prompt, like "cat". However, complex phrasing or plural terms can sometimes confuse the model, leading to errors.</p>
|
| 558 |
+
<p>Solution: Newer models (SDXL, SD 2.1) have improved attention networks for better control over object count and placement.</p>
|
| 559 |
+
</li>
|
| 560 |
+
<li>
|
| 561 |
+
<strong>2. Prompt Engineering:</strong>
|
| 562 |
+
<p>Poorly written or overly complex prompts can mislead the AI. For example, prompting with <code>a cute cat, head, face, cute animal, big eyes</code> might inadvertently suggest multiple heads.</p>
|
| 563 |
+
<p>Solution: Use clear, specific prompts that explicitly define the desired outcome, like <code>a cute single cat with one head, symmetrical, detailed face, no distortion</code>.</p>
|
| 564 |
+
</li>
|
| 565 |
+
<li>
|
| 566 |
+
<strong>3. Problematic Training Data:</strong>
|
| 567 |
+
<p>Training datasets may contain images with errors (e.g., cats with two heads). The model might learn and repeat these flaws.</p>
|
| 568 |
+
<p>Solution:</p>
|
| 569 |
+
<ul>
|
| 570 |
+
<li><strong>Fine-tuning:</strong> Retraining the model with cleaner, high-quality data.</li>
|
| 571 |
+
<li><strong>Negative Prompt:</strong> Explicitly excluding unwanted features with terms like "deformed, extra head, mutation".</li>
|
| 572 |
+
</ul>
|
| 573 |
+
</li>
|
| 574 |
+
<li>
|
| 575 |
+
<strong>4. Negative Prompt Usage:</strong>
|
| 576 |
+
<p>Leveraging negative prompts is crucial for preventing unwanted elements.</p>
|
| 577 |
+
<p>Example:</p>
|
| 578 |
+
<p>Prompt: <code>a realistic cat sitting on a pillow</code></p>
|
| 579 |
+
<p>Negative prompt: <code>extra head, two heads, extra limbs, mutation, deformed</code></p>
|
| 580 |
+
</li>
|
| 581 |
+
<li>
|
| 582 |
+
<strong>5. Balancing Parameters (CFG Scale and Sampling Steps):</strong>
|
| 583 |
+
<p>Incorrect parameter settings can cause issues.</p>
|
| 584 |
+
<ul>
|
| 585 |
+
<li>High CFG Scale: Can force the AI too hard, leading to weird results.</li>
|
| 586 |
+
<li>Low Sampling Steps: The AI may not have enough steps to complete details properly.</li>
|
| 587 |
+
</ul>
|
| 588 |
+
<p>Solution: Optimal ranges are typically CFG Scale: 6–8 and Sampling Steps: 25–50.</p>
|
| 589 |
+
</li>
|
| 590 |
+
<li>
|
| 591 |
+
<strong>6. Post-processing & Face Correction:</strong>
|
| 592 |
+
<p>Some systems use automatic post-processing algorithms (like GFPGAN, CodeFormer) after initial generation to scan and fix issues, particularly with faces and anatomy.</p>
|
| 593 |
+
</li>
|
| 594 |
+
<li>
|
| 595 |
+
<strong>🎯 Conclusion:</strong>
|
| 596 |
+
<p>AI reduces these errors through:</p>
|
| 597 |
+
<ul>
|
| 598 |
+
<li>Preventing flawed outcomes with negative prompts.</li>
|
| 599 |
+
<li>Controlling object count via the attention mechanism.</li>
|
| 600 |
+
<li>Learning better from cleaned datasets.</li>
|
| 601 |
+
<li>Achieving balanced output with optimized sampling and CFG settings.</li>
|
| 602 |
+
<li>Advanced models (SDXL, SD 3.0) offering significantly better compositional accuracy.</li>
|
| 603 |
+
</ul>
|
| 604 |
+
</li>
|
| 605 |
+
</ul>
|
| 606 |
+
</div>
|
| 607 |
+
|
| 608 |
+
<div class="dataset-info">
|
| 609 |
+
<h2>📚 Potential MidJourney Databases & Training Strategy</h2>
|
| 610 |
+
<p>While MidJourney doesn't officially disclose its data sources, it is believed to be trained using data from a wide range of sources:</p>
|
| 611 |
+
|
| 612 |
+
<div class="database-categories">
|
| 613 |
+
<div class="database-category">
|
| 614 |
+
<h3>🌐 Probable Core Sources</h3>
|
| 615 |
+
<ul>
|
| 616 |
+
<li><strong>LAION-5B</strong>: A massive open-source dataset with 5 billion image-text pairs, likely a foundational source.</li>
|
| 617 |
+
<li><strong>Art Websites (Pinterest, DeviantArt, ArtStation)</strong>: Large number of examples possibly scraped for high-quality artistic content, style, and composition.</li>
|
| 618 |
+
<li><strong>Stock Photo Sites (Shutterstock, Getty Images, Unsplash)</strong>: Potential source for realistic imagery, though legal access methods are unclear.</li>
|
| 619 |
+
<li><strong>Flickr + Wikimedia Commons</strong>: Sources for Creative Commons licensed images, useful for diverse subjects like nature, cities, architecture, and portraits.</li>
|
| 620 |
+
</ul>
|
| 621 |
+
</div>
|
| 622 |
+
|
| 623 |
+
<div class="database-category">
|
| 624 |
+
<h3>🧪 Supplementary Sources</h3>
|
| 625 |
+
<ul>
|
| 626 |
+
<li><strong>Social Media (Reddit, Twitter, Tumblr)</strong>: Valuable for meme culture, fan art, and community-generated content.</li>
|
| 627 |
+
<li><strong>Academic Datasets (COCO, OpenImages, ImageNet)</strong>: Used for accurate object recognition and placement, helping the AI understand "real-world objects".</li>
|
| 628 |
+
</ul>
|
| 629 |
+
</div>
|
| 630 |
+
</div>
|
| 631 |
+
|
| 632 |
+
<div class="database-insights">
|
| 633 |
+
<h3>🚀 MidJourney's Distinct Training Strategy</h3>
|
| 634 |
+
<ul>
|
| 635 |
+
<li><strong>Style Prioritization</strong>: Trained with a focus on aesthetic arrangement and art style over strict photorealism.</li>
|
| 636 |
+
<li><strong>Quality Filtering</strong>: Low-quality images in the dataset are discarded, preferring high-quality examples.</li>
|
| 637 |
+
<li><strong>Fine-tuning</strong>: Uses internal datasets for specific adjustments to perform well in particular styles.</li>
|
| 638 |
+
<li><strong>Custom Tag System (Hypothetical)</strong>: Potentially uses a "hidden tagging system" for better analysis of prompt content.</li>
|
| 639 |
+
</ul>
|
| 640 |
+
</div>
|
| 641 |
+
</div>
|
| 642 |
+
|
| 643 |
+
<div class="ai-errors-solutions">
|
| 644 |
+
<h2>🚫 Common AI Image Generation Errors & Solutions</h2>
|
| 645 |
+
|
| 646 |
+
<div class="error-section">
|
| 647 |
+
<h3>1. AI Face Errors (Distorted faces, crooked eyes, missing teeth)</h3>
|
| 648 |
+
<p>🎯 **Cause:** AI models struggle with complex structures like human faces, especially at lower resolutions or with insufficient training data. They rely on learned patterns which can be incomplete or incorrect.</p>
|
| 649 |
+
<h4>✅ Solutions:</h4>
|
| 650 |
+
<ul>
|
| 651 |
+
<li>Use Face Fix AI plugins (e.g., GFPGAN or CodeFormer) during or after generation.</li>
|
| 652 |
+
<li>Work at higher resolutions (768x768 or 1024x1024) to allow for more detail.</li>
|
| 653 |
+
<li>Choose AI training models known for good face generation like SDXL or Realistic Vision.</li>
|
| 654 |
+
<li>Add descriptive terms to your prompt: "beautiful face, detailed skin, perfect symmetry, AI-enhanced facial structure".</li>
|
| 655 |
+
</ul>
|
| 656 |
+
</div>
|
| 657 |
+
|
| 658 |
+
<div class="error-section">
|
| 659 |
+
<h3>2. AI Body Anatomy Errors (Extra fingers, broken arms, distorted legs)</h3>
|
| 660 |
+
<p>🎯 **Cause:** AI still makes predictions based on limited patterns regarding human anatomy, sometimes leading to unrealistic results.</p>
|
| 661 |
+
<h4>✅ Solutions:</h4>
|
| 662 |
+
<ul>
|
| 663 |
+
<li>Use descriptive terms in your prompt: "anatomically correct body, realistic proportions, full body, AI-precision".</li>
|
| 664 |
+
<li>Manual correction using Inpainting (AI correction area) can fix specific errors.</li>
|
| 665 |
+
<li>Use AI models known for better anatomical training like DreamShaper, Juggernaut, or Anything v5.</li>
|
| 666 |
+
</ul>
|
| 667 |
+
</div>
|
| 668 |
+
|
| 669 |
+
<div class="error-section">
|
| 670 |
+
<h3>3. AI Inability to Write Numbers and Text (Corrupted text, unreadable logos)</h3>
|
| 671 |
+
<p>🎯 **Cause:** AI systems learn the visual appearance of text, not its meaning. Letters and numbers are seen as shapes, not symbols with semantic value.</p>
|
| 672 |
+
<h4>✅ Solutions:</h4>
|
| 673 |
+
<ul>
|
| 674 |
+
<li>Add the text using a graphic editor (Photoshop / Canva) after generating the image.</li>
|
| 675 |
+
<li>Instead of asking the AI to generate text directly, use ControlNet with a text mask.</li>
|
| 676 |
+
<li>Avoid requesting specific text in the prompt, or add phrases like "textless design, clean layout".</li>
|
| 677 |
+
</ul>
|
| 678 |
+
</div>
|
| 679 |
+
|
| 680 |
+
<div class="error-section">
|
| 681 |
+
<h3>4. AI Clothing and Texture Errors (Complex patterns, clashing clothes)</h3>
|
| 682 |
+
<p>🎯 **Cause:** AI models struggle to accurately render detailed or layered clothing, especially complex fabrics or patterns.</p>
|
| 683 |
+
<h4>✅ Solutions:</h4>
|
| 684 |
+
<ul>
|
| 685 |
+
<li>Add AI-supported descriptive terms to the prompt: "highly detailed clothing, clean fabric edges, realistic texture, AI-rendered patterns".</li>
|
| 686 |
+
<li>Use LoRA or TI (Textual Inversion) models specifically trained for clothing.</li>
|
| 687 |
+
<li>Correct flawed clothing generated by AI using the Inpaint tool.</li>
|
| 688 |
+
</ul>
|
| 689 |
+
</div>
|
| 690 |
+
|
| 691 |
+
<div class="error-section">
|
| 692 |
+
<h3>5. AI Background & Perspective Issues (Distorted ground, tilted objects, elements clashing with background)</h3>
|
| 693 |
+
<p>🎯 **Cause:** AI can find it challenging to maintain scene composition consistency, particularly when distinguishing between foreground and background.</p>
|
| 694 |
+
<h4>✅ Solutions:</h4>
|
| 695 |
+
<ul>
|
| 696 |
+
<li>Use prompt phrases like: "balanced composition, centered subject, clear background, AI-controlled perspective".</li>
|
| 697 |
+
<li>Use ControlNet to provide pose/depth information or reference photos.</li>
|
| 698 |
+
<li>Keep the background simple; less complex environments yield clearer AI results.</li>
|
| 699 |
+
</ul>
|
| 700 |
+
</div>
|
| 701 |
+
|
| 702 |
+
<div class="error-section">
|
| 703 |
+
<h3>6. General Lack of Detail in AI Images (Soft surfaces, blurry details)</h3>
|
| 704 |
+
<p>🎯 **Cause:** AI often applies excessive smoothing to reduce 'noise' in default settings, leading to a loss of fine detail.</p>
|
| 705 |
+
<h4>✅ Solutions:</h4>
|
| 706 |
+
<ul>
|
| 707 |
+
<li>Use descriptive words in the prompt: "ultra-detailed, intricate textures, 8k rendering, AI-enhanced clarity".</li>
|
| 708 |
+
<li>Enable High-res fix and then use an AI Refiner.</li>
|
| 709 |
+
<li>If your GPU isn't powerful, increase the 'Steps' value to 50–60 for sharper images.</li>
|
| 710 |
+
</ul>
|
| 711 |
+
</div>
|
| 712 |
+
|
| 713 |
+
<div class="error-section">
|
| 714 |
+
<h3>7. AI Visual Inconsistency (Same character looking different in various poses)</h3>
|
| 715 |
+
<p>🎯 **Cause:** AI systems generate each image from scratch and don't "remember" previous generations.</p>
|
| 716 |
+
<h4>✅ Solutions:</h4>
|
| 717 |
+
<ul>
|
| 718 |
+
<li>Use ControlNet to transfer pose information from a previous image.</li>
|
| 719 |
+
<li>Train an embedding, LoRA, or DreamBooth for a specific character.</li>
|
| 720 |
+
<li>Use prompt phrases like "same person, consistent appearance, AI-style match".</li>
|
| 721 |
+
</ul>
|
| 722 |
+
</div>
|
| 723 |
+
|
| 724 |
+
<div class="error-section">
|
| 725 |
+
<h3>🔧 Extra Tips for AI Performance and Quality:</h3>
|
| 726 |
+
<ul>
|
| 727 |
+
<li>Use `fp16`, `xformers`, `vae` optimizations for better performance.</li>
|
| 728 |
+
<li>Recommended Resolutions: 768x768 or 1024x1024.</li>
|
| 729 |
+
<li>Recommended Steps: 30–50.</li>
|
| 730 |
+
<li>Effective Negative prompt example: <br><code>"blurry, deformed, extra fingers, bad anatomy, low resolution, AI artifacts"</code></li>
|
| 731 |
+
</ul>
|
| 732 |
+
</div>
|
| 733 |
+
|
| 734 |
+
</div>
|
| 735 |
+
</div>
|
| 736 |
+
</body>
|
| 737 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,774 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const promptInput = document.getElementById('promptInput');
|
| 2 |
+
const negativePromptInput = document.getElementById('negativePromptInput');
|
| 3 |
+
const seedInput = document.getElementById('seedInput');
|
| 4 |
+
const styleSelect = document.getElementById('styleSelect');
|
| 5 |
+
const renderQualitySelect = document.getElementById('renderQualitySelect');
|
| 6 |
+
const lightingSelect = document.getElementById('lightingSelect');
|
| 7 |
+
const controlNetSelect = document.getElementById('controlNetSelect');
|
| 8 |
+
const anatomyControlSelect = document.getElementById('anatomyControlSelect');
|
| 9 |
+
const generateButton = document.getElementById('generateButton');
|
| 10 |
+
const generatedImage = document.getElementById('generatedImage');
|
| 11 |
+
const loadingIndicator = document.getElementById('loading');
|
| 12 |
+
const technicalExplanation = document.querySelector('.technical-explanation');
|
| 13 |
+
|
| 14 |
+
// Prompt Enhancer Module
|
| 15 |
+
const promptEnhancerModule = {
|
| 16 |
+
enhancements: {
|
| 17 |
+
"a cat": "a photorealistic fluffy white cat sitting on a windowsill, soft light, shallow depth of field, 4k resolution",
|
| 18 |
+
"a fox": "a majestic red fox standing in a misty forest, golden hour lighting, detailed fur, realistic anatomy, 8k resolution",
|
| 19 |
+
"a landscape": "a breathtaking mountain landscape with vibrant colors, sunrise lighting, crisp details, epic panoramic view, high resolution"
|
| 20 |
+
},
|
| 21 |
+
|
| 22 |
+
enhance: async function(originalPrompt) {
|
| 23 |
+
// First, use the new advanced prompt engineering module
|
| 24 |
+
const semanticAnalysis = await promptEngineeringModule.analyzeAndCorrectPrompt(originalPrompt);
|
| 25 |
+
|
| 26 |
+
// Then enhance with style and quality details
|
| 27 |
+
const enhancedPrompt = promptEngineeringModule.enhancePrompt(semanticAnalysis, {
|
| 28 |
+
style: styleSelect.value,
|
| 29 |
+
renderQuality: renderQualitySelect.value,
|
| 30 |
+
lighting: lightingSelect.value
|
| 31 |
+
});
|
| 32 |
+
|
| 33 |
+
return enhancedPrompt;
|
| 34 |
+
}
|
| 35 |
+
};
|
| 36 |
+
|
| 37 |
+
// Advanced Prompt Engineering Module
|
| 38 |
+
const promptEngineeringModule = {
|
| 39 |
+
// Enhanced prompt generation with more specific details
|
| 40 |
+
enhancePrompt: function(originalPrompt, options = {}) {
|
| 41 |
+
const {
|
| 42 |
+
style = 'default',
|
| 43 |
+
renderQuality = 'standard',
|
| 44 |
+
lighting = 'default',
|
| 45 |
+
detailLevel = 'high'
|
| 46 |
+
} = options;
|
| 47 |
+
|
| 48 |
+
const styleMap = {
|
| 49 |
+
'default': '',
|
| 50 |
+
'photorealistic': 'photorealistic, high detail, sharp focus',
|
| 51 |
+
'anime': 'anime style, clean lines, vibrant colors',
|
| 52 |
+
'digital-art': 'digital art, crisp edges, stylized',
|
| 53 |
+
'studio-ghibli': 'Studio Ghibli style, soft colors, whimsical',
|
| 54 |
+
'oil-painting': 'oil painting texture, rich brush strokes',
|
| 55 |
+
'realistic': 'hyper-realistic, ultra-detailed',
|
| 56 |
+
'dreamscape': 'surreal, dreamy, soft focus'
|
| 57 |
+
};
|
| 58 |
+
|
| 59 |
+
const lightingMap = {
|
| 60 |
+
'default': '',
|
| 61 |
+
'cinematic': 'cinematic lighting, dramatic shadows',
|
| 62 |
+
'soft': 'soft, diffused light, gentle shadows',
|
| 63 |
+
'dramatic': 'high contrast, strong directional light',
|
| 64 |
+
'sunset': 'golden hour, warm tones, long shadows'
|
| 65 |
+
};
|
| 66 |
+
|
| 67 |
+
const qualityMap = {
|
| 68 |
+
'standard': '512x512 resolution',
|
| 69 |
+
'high': '768x768 resolution, enhanced details',
|
| 70 |
+
'ultra': '1024x1024 resolution, maximum detail',
|
| 71 |
+
'4k': '2048x2048 resolution, ultra high quality'
|
| 72 |
+
};
|
| 73 |
+
|
| 74 |
+
const detailLevelMap = {
|
| 75 |
+
'low': 'basic shapes, minimal detail',
|
| 76 |
+
'medium': 'clear definition, moderate detail',
|
| 77 |
+
'high': 'intricate details, sharp edges, textural complexity'
|
| 78 |
+
};
|
| 79 |
+
|
| 80 |
+
// Combine enhanced prompt with style and quality specifications
|
| 81 |
+
const enhancedPrompt = [
|
| 82 |
+
originalPrompt,
|
| 83 |
+
styleMap[style],
|
| 84 |
+
lightingMap[lighting],
|
| 85 |
+
qualityMap[renderQuality],
|
| 86 |
+
`${detailLevelMap[detailLevel]}, precise composition`
|
| 87 |
+
].filter(Boolean).join(', ');
|
| 88 |
+
|
| 89 |
+
return enhancedPrompt;
|
| 90 |
+
},
|
| 91 |
+
|
| 92 |
+
// Advanced semantic analysis and prompt correction
|
| 93 |
+
analyzeAndCorrectPrompt: async function(prompt) {
|
| 94 |
+
try {
|
| 95 |
+
const completion = await websim.chat.completions.create({
|
| 96 |
+
messages: [
|
| 97 |
+
{
|
| 98 |
+
role: "system",
|
| 99 |
+
content: `You are an expert prompt engineer for AI image generation.
|
| 100 |
+
Analyze the given prompt and:
|
| 101 |
+
1. Improve clarity and specificity
|
| 102 |
+
2. Add missing descriptive details
|
| 103 |
+
3. Ensure semantic consistency
|
| 104 |
+
4. Optimize for better image generation`
|
| 105 |
+
},
|
| 106 |
+
{
|
| 107 |
+
role: "user",
|
| 108 |
+
content: prompt
|
| 109 |
+
}
|
| 110 |
+
]
|
| 111 |
+
});
|
| 112 |
+
|
| 113 |
+
return completion.content || prompt;
|
| 114 |
+
} catch (error) {
|
| 115 |
+
console.warn("Prompt analysis fallback triggered:", error);
|
| 116 |
+
return prompt;
|
| 117 |
+
}
|
| 118 |
+
}
|
| 119 |
+
};
|
| 120 |
+
|
| 121 |
+
// Semantic Consistency Check Module
|
| 122 |
+
const semanticConsistencyModule = {
|
| 123 |
+
checks: [
|
| 124 |
+
{
|
| 125 |
+
name: "Anatomical Consistency",
|
| 126 |
+
check: async (prompt, imageUrl) => {
|
| 127 |
+
try {
|
| 128 |
+
const result = await websim.chat.completions.create({
|
| 129 |
+
messages: [
|
| 130 |
+
{
|
| 131 |
+
role: "system",
|
| 132 |
+
content: "Analyze the image for anatomical correctness based on the prompt. Report any inconsistencies concisely."
|
| 133 |
+
},
|
| 134 |
+
{
|
| 135 |
+
role: "user",
|
| 136 |
+
content: [
|
| 137 |
+
{ type: "text", text: `Check anatomical correctness for prompt: ${prompt}` },
|
| 138 |
+
{ type: "image_url", image_url: { url: imageUrl } }
|
| 139 |
+
]
|
| 140 |
+
}
|
| 141 |
+
]
|
| 142 |
+
});
|
| 143 |
+
return `Anatomical Check: ${result.content}`;
|
| 144 |
+
} catch (error) {
|
| 145 |
+
console.error("Anatomical consistency check failed:", error);
|
| 146 |
+
return `Anatomical Check: Error performing check - ${error.message}`;
|
| 147 |
+
}
|
| 148 |
+
}
|
| 149 |
+
},
|
| 150 |
+
{
|
| 151 |
+
name: "Prompt Adherence Check",
|
| 152 |
+
check: async (prompt, imageUrl) => {
|
| 153 |
+
try {
|
| 154 |
+
const result = await websim.chat.completions.create({
|
| 155 |
+
messages: [
|
| 156 |
+
{
|
| 157 |
+
role: "system",
|
| 158 |
+
content: "Compare the image against the provided prompt. Summarize how well the image matches the key elements of the prompt."
|
| 159 |
+
},
|
| 160 |
+
{
|
| 161 |
+
role: "user",
|
| 162 |
+
content: [
|
| 163 |
+
{ type: "text", text: `Check adherence to prompt: ${prompt}` },
|
| 164 |
+
{ type: "image_url", image_url: { url: imageUrl } }
|
| 165 |
+
]
|
| 166 |
+
}
|
| 167 |
+
]
|
| 168 |
+
});
|
| 169 |
+
return `Prompt Adherence: ${result.content}`;
|
| 170 |
+
} catch (error) {
|
| 171 |
+
console.error("Prompt adherence check failed:", error);
|
| 172 |
+
return `Prompt Adherence: Error performing check - ${error.message}`;
|
| 173 |
+
}
|
| 174 |
+
}
|
| 175 |
+
},
|
| 176 |
+
{
|
| 177 |
+
name: "Negative Prompt Check",
|
| 178 |
+
check: async (prompt, negativePrompt, imageUrl) => {
|
| 179 |
+
if (!negativePrompt || negativePrompt.trim() === '') {
|
| 180 |
+
return "Negative Prompt Check: No negative prompt provided.";
|
| 181 |
+
}
|
| 182 |
+
try {
|
| 183 |
+
const result = await websim.chat.completions.create({
|
| 184 |
+
messages: [
|
| 185 |
+
{
|
| 186 |
+
role: "system",
|
| 187 |
+
content: "Analyze the image to see if it contains elements explicitly mentioned in the negative prompt."
|
| 188 |
+
},
|
| 189 |
+
{
|
| 190 |
+
role: "user",
|
| 191 |
+
content: [
|
| 192 |
+
{ type: "text", text: `Check negative prompt: ${prompt} with negative prompt: ${negativePrompt}` },
|
| 193 |
+
{ type: "image_url", image_url: { url: imageUrl } }
|
| 194 |
+
]
|
| 195 |
+
}
|
| 196 |
+
]
|
| 197 |
+
});
|
| 198 |
+
return `Negative Prompt Check: ${result.content}`;
|
| 199 |
+
} catch (error) {
|
| 200 |
+
console.error("Negative prompt check failed:", error);
|
| 201 |
+
return `Negative Prompt Check: Error performing check - ${error.message}`;
|
| 202 |
+
}
|
| 203 |
+
}
|
| 204 |
+
}
|
| 205 |
+
],
|
| 206 |
+
|
| 207 |
+
performChecks: async function(prompt, negativePrompt, imageUrl) {
|
| 208 |
+
const results = [];
|
| 209 |
+
// Clear previous results while checks are running
|
| 210 |
+
const semanticCheckList = document.getElementById('semanticCheckList');
|
| 211 |
+
if (semanticCheckList) {
|
| 212 |
+
semanticCheckList.innerHTML = '<li>Running semantic checks...</li>';
|
| 213 |
+
}
|
| 214 |
+
|
| 215 |
+
for (let check of this.checks) {
|
| 216 |
+
let checkResult;
|
| 217 |
+
if (check.name === "Negative Prompt Check") {
|
| 218 |
+
checkResult = await check.check(prompt, negativePrompt, imageUrl);
|
| 219 |
+
} else {
|
| 220 |
+
checkResult = await check.check(prompt, imageUrl);
|
| 221 |
+
}
|
| 222 |
+
results.push(checkResult);
|
| 223 |
+
}
|
| 224 |
+
return results;
|
| 225 |
+
}
|
| 226 |
+
};
|
| 227 |
+
|
| 228 |
+
// Layered Generation Module (basic placeholder)
|
| 229 |
+
const layeredGenerationModule = {
|
| 230 |
+
generateLayered: async function(prompt) {
|
| 231 |
+
// Placeholder for future implementation
|
| 232 |
+
console.log("Layered generation for:", prompt);
|
| 233 |
+
return null;
|
| 234 |
+
}
|
| 235 |
+
};
|
| 236 |
+
|
| 237 |
+
const styleMap = {
|
| 238 |
+
'default': {
|
| 239 |
+
prompt_prefix: '',
|
| 240 |
+
model: 'stable-diffusion-xl',
|
| 241 |
+
sampler: 'Euler a'
|
| 242 |
+
},
|
| 243 |
+
'photorealistic': {
|
| 244 |
+
prompt_prefix: 'highly detailed photorealistic, sharp focus, natural lighting',
|
| 245 |
+
model: 'realistic-vision-v5',
|
| 246 |
+
sampler: 'DPM++ 2M Karras'
|
| 247 |
+
},
|
| 248 |
+
'anime': {
|
| 249 |
+
prompt_prefix: 'anime style, clean lines, vibrant colors, sharp details, kyoto animation aesthetic',
|
| 250 |
+
model: 'deliberate-v2',
|
| 251 |
+
sampler: 'Euler a'
|
| 252 |
+
},
|
| 253 |
+
'digital-art': {
|
| 254 |
+
prompt_prefix: 'digital illustration, crisp edges, stylized, graphic novel aesthetic, high contrast',
|
| 255 |
+
model: 'dreamshaper-v8',
|
| 256 |
+
sampler: 'DDIM'
|
| 257 |
+
},
|
| 258 |
+
'studio-ghibli': {
|
| 259 |
+
prompt_prefix: 'Studio Ghibli style, soft color palette, whimsical, hand-drawn texture, Miyazaki-inspired',
|
| 260 |
+
model: 'ghibli-diffusion',
|
| 261 |
+
sampler: 'Euler'
|
| 262 |
+
},
|
| 263 |
+
'oil-painting': {
|
| 264 |
+
prompt_prefix: 'oil painting texture, rich brush strokes, impasto technique, canvas-like rendering',
|
| 265 |
+
model: 'anything-v5',
|
| 266 |
+
sampler: 'DPM++ SDE Karras'
|
| 267 |
+
},
|
| 268 |
+
'realistic': {
|
| 269 |
+
prompt_prefix: 'ultra-realistic, hyper-detailed, natural textures, precise anatomical accuracy',
|
| 270 |
+
model: 'realistic-vision-v5',
|
| 271 |
+
sampler: 'DPM++ 2M Karras'
|
| 272 |
+
},
|
| 273 |
+
'dreamscape': {
|
| 274 |
+
prompt_prefix: 'surreal, dreamy atmosphere, soft focus, ethereal lighting, blended reality',
|
| 275 |
+
model: 'stable-diffusion-xl',
|
| 276 |
+
sampler: 'Euler a'
|
| 277 |
+
}
|
| 278 |
+
};
|
| 279 |
+
|
| 280 |
+
function mapRenderQuality(quality) {
|
| 281 |
+
const qualityMap = {
|
| 282 |
+
"standard": {
|
| 283 |
+
width: 512,
|
| 284 |
+
height: 512,
|
| 285 |
+
description: "Standard Quality (512x512)"
|
| 286 |
+
},
|
| 287 |
+
"high": {
|
| 288 |
+
width: 768,
|
| 289 |
+
height: 768,
|
| 290 |
+
description: "High Quality (768x768)"
|
| 291 |
+
},
|
| 292 |
+
"ultra": {
|
| 293 |
+
width: 1024,
|
| 294 |
+
height: 1024,
|
| 295 |
+
description: "Ultra HD (1024x1024)"
|
| 296 |
+
},
|
| 297 |
+
"4k": {
|
| 298 |
+
width: 2048,
|
| 299 |
+
height: 2048,
|
| 300 |
+
description: "4K Ultra-Detailed (2048x2048)"
|
| 301 |
+
}
|
| 302 |
+
};
|
| 303 |
+
return qualityMap[quality] || qualityMap["standard"];
|
| 304 |
+
}
|
| 305 |
+
|
| 306 |
+
// Advanced Face Generation Module
|
| 307 |
+
const faceGenerationModule = {
|
| 308 |
+
// Advanced prompt engineering for high-quality face generation
|
| 309 |
+
enhanceFacePrompt: function(basePrompt, options = {}) {
|
| 310 |
+
const {
|
| 311 |
+
faceQuality = 'high',
|
| 312 |
+
symmetry = true,
|
| 313 |
+
style = 'photorealistic'
|
| 314 |
+
} = options;
|
| 315 |
+
|
| 316 |
+
const qualityPrefixes = {
|
| 317 |
+
'low': 'basic face details',
|
| 318 |
+
'medium': 'clear facial features, moderate detail',
|
| 319 |
+
'high': 'perfect symmetrical face, high resolution, soft studio lighting, crisp details',
|
| 320 |
+
'ultra': 'hyper-realistic face, professional DSLR photo quality, cinematic lighting, intricate skin texture'
|
| 321 |
+
};
|
| 322 |
+
|
| 323 |
+
const stylePrefixes = {
|
| 324 |
+
'photorealistic': 'DSLR photo style, natural skin tones, precise facial structure',
|
| 325 |
+
'anime': 'anime style, clean lines, large expressive eyes',
|
| 326 |
+
'artistic': 'stylized face, painterly details, soft color palette',
|
| 327 |
+
'sketch': 'pencil sketch style, delicate line work'
|
| 328 |
+
};
|
| 329 |
+
|
| 330 |
+
const symmetryPrefix = symmetry ? 'perfectly symmetrical, ' : '';
|
| 331 |
+
|
| 332 |
+
const enhancedPrompt = [
|
| 333 |
+
basePrompt,
|
| 334 |
+
symmetryPrefix,
|
| 335 |
+
qualityPrefixes[faceQuality],
|
| 336 |
+
stylePrefixes[style]
|
| 337 |
+
].filter(Boolean).join(', ');
|
| 338 |
+
|
| 339 |
+
return enhancedPrompt;
|
| 340 |
+
},
|
| 341 |
+
|
| 342 |
+
// Advanced face correction using AI techniques
|
| 343 |
+
correctFace: async function(imageUrl) {
|
| 344 |
+
try {
|
| 345 |
+
// Simulate using GFPGAN or CodeFormer for face enhancement
|
| 346 |
+
const result = await websim.chat.completions.create({
|
| 347 |
+
messages: [
|
| 348 |
+
{
|
| 349 |
+
role: "system",
|
| 350 |
+
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."
|
| 351 |
+
},
|
| 352 |
+
{
|
| 353 |
+
role: "user",
|
| 354 |
+
content: [
|
| 355 |
+
{ type: "text", text: "Enhance facial details" },
|
| 356 |
+
{ type: "image_url", image_url: { url: imageUrl } }
|
| 357 |
+
]
|
| 358 |
+
}
|
| 359 |
+
]
|
| 360 |
+
});
|
| 361 |
+
|
| 362 |
+
try {
|
| 363 |
+
const response = JSON.parse(result.content);
|
| 364 |
+
if (response && response.url) {
|
| 365 |
+
console.log("Face correction applied. New image URL:", response.url);
|
| 366 |
+
return response.url;
|
| 367 |
+
} else {
|
| 368 |
+
console.log("Face correction analysis:", result.content);
|
| 369 |
+
return imageUrl;
|
| 370 |
+
}
|
| 371 |
+
} catch (e) {
|
| 372 |
+
console.log("Face correction analysis (non-JSON response):", result.content);
|
| 373 |
+
return imageUrl;
|
| 374 |
+
}
|
| 375 |
+
|
| 376 |
+
} catch (error) {
|
| 377 |
+
console.error("Face correction failed:", error);
|
| 378 |
+
return null;
|
| 379 |
+
}
|
| 380 |
+
},
|
| 381 |
+
|
| 382 |
+
// Advanced semantic face analysis
|
| 383 |
+
analyzeFace: async function(imageUrl) {
|
| 384 |
+
try {
|
| 385 |
+
const result = await websim.chat.completions.create({
|
| 386 |
+
messages: [
|
| 387 |
+
{
|
| 388 |
+
role: "system",
|
| 389 |
+
content: `Perform comprehensive face analysis:
|
| 390 |
+
1. Check facial symmetry
|
| 391 |
+
2. Verify anatomical correctness
|
| 392 |
+
3. Assess style adherence
|
| 393 |
+
4. Detect any artifacts or inconsistencies
|
| 394 |
+
5. Provide a concise summary.`
|
| 395 |
+
},
|
| 396 |
+
{
|
| 397 |
+
role: "user",
|
| 398 |
+
content: [
|
| 399 |
+
{ type: "text", text: "Analyze face in image" },
|
| 400 |
+
{ type: "image_url", image_url: { url: imageUrl } }
|
| 401 |
+
]
|
| 402 |
+
}
|
| 403 |
+
]
|
| 404 |
+
});
|
| 405 |
+
|
| 406 |
+
return result.content;
|
| 407 |
+
} catch (error) {
|
| 408 |
+
console.error("Face analysis failed:", error);
|
| 409 |
+
return null;
|
| 410 |
+
}
|
| 411 |
+
}
|
| 412 |
+
};
|
| 413 |
+
|
| 414 |
+
async function generateImage(prompt, options = {}) {
|
| 415 |
+
const {
|
| 416 |
+
negativePrompt = '',
|
| 417 |
+
seed,
|
| 418 |
+
style = 'default',
|
| 419 |
+
renderQuality = 'standard',
|
| 420 |
+
lighting,
|
| 421 |
+
controlNetMode,
|
| 422 |
+
faceQuality,
|
| 423 |
+
faceStyle,
|
| 424 |
+
symmetry,
|
| 425 |
+
perspective,
|
| 426 |
+
objectPlacement,
|
| 427 |
+
lightSource,
|
| 428 |
+
depthPerception,
|
| 429 |
+
cfgScale,
|
| 430 |
+
steps
|
| 431 |
+
} = options;
|
| 432 |
+
|
| 433 |
+
// Get style-specific configuration
|
| 434 |
+
const styleConfig = styleMap[style] || styleMap['default'];
|
| 435 |
+
|
| 436 |
+
// Combine style-specific prefix with original prompt
|
| 437 |
+
let enhancedPrompt = `${styleConfig.prompt_prefix}, ${prompt}`;
|
| 438 |
+
|
| 439 |
+
// If face generation is detected, enhance the prompt
|
| 440 |
+
const isFacePrompt = prompt.toLowerCase().includes('face') ||
|
| 441 |
+
prompt.toLowerCase().includes('portrait');
|
| 442 |
+
|
| 443 |
+
if (isFacePrompt) {
|
| 444 |
+
enhancedPrompt = faceGenerationModule.enhanceFacePrompt(enhancedPrompt, {
|
| 445 |
+
faceQuality: faceQuality || 'high',
|
| 446 |
+
symmetry: symmetry !== false,
|
| 447 |
+
style: faceStyle || 'photorealistic'
|
| 448 |
+
});
|
| 449 |
+
}
|
| 450 |
+
|
| 451 |
+
// Enhanced Perspective Mapping
|
| 452 |
+
const perspectiveMap = {
|
| 453 |
+
'front-view': 'viewed straight on, front perspective',
|
| 454 |
+
'side-view': 'side angle view, profile perspective',
|
| 455 |
+
'overhead': 'viewed from above, overhead perspective',
|
| 456 |
+
'diagonal': 'diagonal angle, dynamic perspective',
|
| 457 |
+
'tilted-view': 'slightly tilted view, subtle angle'
|
| 458 |
+
};
|
| 459 |
+
|
| 460 |
+
const objectPlacementMap = {
|
| 461 |
+
'balanced': 'balanced composition, symmetric arrangement',
|
| 462 |
+
'asymmetric': 'asymmetric layout, dynamic positioning',
|
| 463 |
+
'rule-of-thirds': 'following rule of thirds, strategic placement',
|
| 464 |
+
'centered': 'centered focal point, symmetrical design'
|
| 465 |
+
};
|
| 466 |
+
|
| 467 |
+
const lightSourceMap = {
|
| 468 |
+
'left-side': 'light source from left side, creating defined shadows',
|
| 469 |
+
'right-side': 'light source from right side, dramatic shadowing',
|
| 470 |
+
'top-down': 'overhead lighting, creating vertical shadows',
|
| 471 |
+
'diagonal': 'diagonal light, creating depth and dimension',
|
| 472 |
+
'backlighting': 'backlight effect, silhouette and rim lighting',
|
| 473 |
+
'soft-ambient': 'soft, diffused ambient lighting'
|
| 474 |
+
};
|
| 475 |
+
|
| 476 |
+
const depthPerceptionMap = {
|
| 477 |
+
'shallow-depth': 'shallow depth of field, soft background blur',
|
| 478 |
+
'deep-depth': 'deep depth of field, entire scene in focus',
|
| 479 |
+
'layered-focus': 'layered focus, multiple depth levels',
|
| 480 |
+
'foreground-emphasis': 'foreground elements sharply focused'
|
| 481 |
+
};
|
| 482 |
+
|
| 483 |
+
// Enhance prompt with perspective and composition details
|
| 484 |
+
if (perspective) {
|
| 485 |
+
enhancedPrompt += `, ${perspectiveMap[perspective]}`;
|
| 486 |
+
}
|
| 487 |
+
|
| 488 |
+
if (objectPlacement) {
|
| 489 |
+
enhancedPrompt += `, ${objectPlacementMap[objectPlacement]}`;
|
| 490 |
+
}
|
| 491 |
+
|
| 492 |
+
if (lightSource) {
|
| 493 |
+
enhancedPrompt += `, ${lightSourceMap[lightSource]}`;
|
| 494 |
+
}
|
| 495 |
+
|
| 496 |
+
if (depthPerception) {
|
| 497 |
+
enhancedPrompt += `, ${depthPerceptionMap[depthPerception]}`;
|
| 498 |
+
}
|
| 499 |
+
|
| 500 |
+
// Use the enhanced mapRenderQuality function
|
| 501 |
+
const qualitySettings = mapRenderQuality(renderQuality);
|
| 502 |
+
|
| 503 |
+
try {
|
| 504 |
+
const result = await websim.imageGen({
|
| 505 |
+
prompt: enhancedPrompt,
|
| 506 |
+
negative_prompt: getCombinedNegativePrompt(negativePrompt),
|
| 507 |
+
seed: seed,
|
| 508 |
+
style: style === 'default' ? undefined : style,
|
| 509 |
+
width: qualitySettings.width,
|
| 510 |
+
height: qualitySettings.height,
|
| 511 |
+
lighting: lighting === 'default' ? undefined : lighting,
|
| 512 |
+
controlnet_mode: controlNetMode === 'none' ? undefined : controlNetMode,
|
| 513 |
+
sampler: styleConfig.sampler,
|
| 514 |
+
model: styleConfig.model,
|
| 515 |
+
cfg_scale: cfgScale,
|
| 516 |
+
steps: steps,
|
| 517 |
+
perspective: perspective,
|
| 518 |
+
object_placement: objectPlacement,
|
| 519 |
+
light_source: lightSource,
|
| 520 |
+
depth_perception: depthPerception
|
| 521 |
+
});
|
| 522 |
+
|
| 523 |
+
console.log(`Generating image with ${qualitySettings.description}`);
|
| 524 |
+
|
| 525 |
+
// Post-generation face correction
|
| 526 |
+
if (isFacePrompt && result.url) {
|
| 527 |
+
const correctedImageUrl = await faceGenerationModule.correctFace(result.url);
|
| 528 |
+
result.url = correctedImageUrl || result.url;
|
| 529 |
+
|
| 530 |
+
// Optional face analysis
|
| 531 |
+
const faceAnalysis = await faceGenerationModule.analyzeFace(result.url);
|
| 532 |
+
console.log("Face Analysis:", faceAnalysis);
|
| 533 |
+
}
|
| 534 |
+
|
| 535 |
+
return result;
|
| 536 |
+
} catch (error) {
|
| 537 |
+
console.error("Advanced Image Generation Error:", error);
|
| 538 |
+
throw error;
|
| 539 |
+
}
|
| 540 |
+
}
|
| 541 |
+
|
| 542 |
+
function getCombinedNegativePrompt(userNegativePrompt) {
|
| 543 |
+
const baseAnatomyPreventionPrompts = [
|
| 544 |
+
"deformed anatomy",
|
| 545 |
+
"extra limbs",
|
| 546 |
+
"duplicate body parts",
|
| 547 |
+
"unnatural proportions",
|
| 548 |
+
"malformed features",
|
| 549 |
+
"unrealistic anatomy",
|
| 550 |
+
"missing limbs",
|
| 551 |
+
"mutated",
|
| 552 |
+
"twisted",
|
| 553 |
+
"bad eyes",
|
| 554 |
+
"extra fingers",
|
| 555 |
+
"missing fingers"
|
| 556 |
+
];
|
| 557 |
+
|
| 558 |
+
const baseQualityPreventions = [
|
| 559 |
+
"low quality",
|
| 560 |
+
"blurry",
|
| 561 |
+
"watermark",
|
| 562 |
+
"text",
|
| 563 |
+
"disfigured",
|
| 564 |
+
"ugly",
|
| 565 |
+
"nonsensical",
|
| 566 |
+
"bad composition",
|
| 567 |
+
"poorly drawn",
|
| 568 |
+
"sketch",
|
| 569 |
+
"noise",
|
| 570 |
+
"grainy"
|
| 571 |
+
];
|
| 572 |
+
|
| 573 |
+
const textSpecificPreventions = [
|
| 574 |
+
"unreadable text",
|
| 575 |
+
"gibberish",
|
| 576 |
+
"nonsense text",
|
| 577 |
+
"broken letters",
|
| 578 |
+
"random symbols"
|
| 579 |
+
];
|
| 580 |
+
|
| 581 |
+
let combinedPrompts = [...baseAnatomyPreventionPrompts, ...baseQualityPreventions, ...textSpecificPreventions];
|
| 582 |
+
|
| 583 |
+
if (userNegativePrompt) {
|
| 584 |
+
combinedPrompts = combinedPrompts.concat(userNegativePrompt.split(',').map(p => p.trim()));
|
| 585 |
+
}
|
| 586 |
+
|
| 587 |
+
const uniquePrompts = [...new Set(combinedPrompts)].filter(p => p !== '');
|
| 588 |
+
|
| 589 |
+
return uniquePrompts.join(", ");
|
| 590 |
+
}
|
| 591 |
+
|
| 592 |
+
async function performSemanticChecks(prompt, imageUrl) {
|
| 593 |
+
const semanticCheckList = document.getElementById('semanticCheckList');
|
| 594 |
+
semanticCheckList.innerHTML = '<li>Running advanced semantic checks...</li>';
|
| 595 |
+
|
| 596 |
+
try {
|
| 597 |
+
const result = await websim.chat.completions.create({
|
| 598 |
+
messages: [
|
| 599 |
+
{
|
| 600 |
+
role: "system",
|
| 601 |
+
content: `Perform a comprehensive semantic analysis of the image:
|
| 602 |
+
1. Check anatomical correctness
|
| 603 |
+
2. Verify prompt adherence
|
| 604 |
+
3. Detect any inconsistencies or artifacts
|
| 605 |
+
4. Suggest potential improvements`
|
| 606 |
+
},
|
| 607 |
+
{
|
| 608 |
+
role: "user",
|
| 609 |
+
content: [
|
| 610 |
+
{ type: "text", text: `Analyze image generated from prompt: ${prompt}` },
|
| 611 |
+
{ type: "image_url", image_url: { url: imageUrl } }
|
| 612 |
+
]
|
| 613 |
+
}
|
| 614 |
+
]
|
| 615 |
+
});
|
| 616 |
+
|
| 617 |
+
semanticCheckList.innerHTML = result.content
|
| 618 |
+
.split('\n')
|
| 619 |
+
.map(line => `<li>${line}</li>`)
|
| 620 |
+
.join('');
|
| 621 |
+
} catch (error) {
|
| 622 |
+
console.error("Advanced Semantic Check Failed:", error);
|
| 623 |
+
semanticCheckList.innerHTML = `<li>Advanced semantic check failed: ${error.message}</li>`;
|
| 624 |
+
}
|
| 625 |
+
}
|
| 626 |
+
|
| 627 |
+
const faceQualitySelect = document.createElement('select');
|
| 628 |
+
faceQualitySelect.id = 'faceQualitySelect';
|
| 629 |
+
faceQualitySelect.innerHTML = `
|
| 630 |
+
<option value="low">Basic Quality</option>
|
| 631 |
+
<option value="medium">Medium Quality</option>
|
| 632 |
+
<option value="high" selected>High Quality</option>
|
| 633 |
+
<option value="ultra">Ultra Quality</option>
|
| 634 |
+
`;
|
| 635 |
+
|
| 636 |
+
const faceStyleSelect = document.createElement('select');
|
| 637 |
+
faceStyleSelect.id = 'faceStyleSelect';
|
| 638 |
+
faceStyleSelect.innerHTML = `
|
| 639 |
+
<option value="photorealistic" selected>Photorealistic</option>
|
| 640 |
+
<option value="anime">Anime Style</option>
|
| 641 |
+
<option value="artistic">Artistic</option>
|
| 642 |
+
<option value="sketch">Sketch Style</option>
|
| 643 |
+
`;
|
| 644 |
+
|
| 645 |
+
const perspectiveSelect = document.createElement('select');
|
| 646 |
+
perspectiveSelect.id = 'perspectiveSelect';
|
| 647 |
+
perspectiveSelect.innerHTML = `
|
| 648 |
+
<option value="front-view">Front View</option>
|
| 649 |
+
<option value="side-view">Side View</option>
|
| 650 |
+
<option value="overhead">Overhead View</option>
|
| 651 |
+
<option value="diagonal">Diagonal View</option>
|
| 652 |
+
<option value="tilted-view">Tilted View</option>
|
| 653 |
+
`;
|
| 654 |
+
|
| 655 |
+
const objectPlacementSelect = document.createElement('select');
|
| 656 |
+
objectPlacementSelect.id = 'objectPlacementSelect';
|
| 657 |
+
objectPlacementSelect.innerHTML = `
|
| 658 |
+
<option value="balanced">Balanced Composition</option>
|
| 659 |
+
<option value="asymmetric">Asymmetric Layout</option>
|
| 660 |
+
<option value="rule-of-thirds">Rule of Thirds</option>
|
| 661 |
+
<option value="centered">Centered Focal Point</option>
|
| 662 |
+
`;
|
| 663 |
+
|
| 664 |
+
const lightSourceSelect = document.createElement('select');
|
| 665 |
+
lightSourceSelect.id = 'lightSourceSelect';
|
| 666 |
+
lightSourceSelect.innerHTML = `
|
| 667 |
+
<option value="left-side">Left Side Lighting</option>
|
| 668 |
+
<option value="right-side">Right Side Lighting</option>
|
| 669 |
+
<option value="top-down">Top-Down Lighting</option>
|
| 670 |
+
<option value="diagonal">Diagonal Lighting</option>
|
| 671 |
+
<option value="backlighting">Backlighting</option>
|
| 672 |
+
<option value="soft-ambient">Soft Ambient Lighting</option>
|
| 673 |
+
`;
|
| 674 |
+
|
| 675 |
+
const depthPerceptionSelect = document.createElement('select');
|
| 676 |
+
depthPerceptionSelect.id = 'depthPerceptionSelect';
|
| 677 |
+
depthPerceptionSelect.innerHTML = `
|
| 678 |
+
<option value="shallow-depth">Shallow Depth of Field</option>
|
| 679 |
+
<option value="deep-depth">Deep Depth of Field</option>
|
| 680 |
+
<option value="layered-focus">Layered Focus</option>
|
| 681 |
+
<option value="foreground-emphasis">Foreground Emphasis</option>
|
| 682 |
+
`;
|
| 683 |
+
|
| 684 |
+
document.querySelector('.style-grid').appendChild(
|
| 685 |
+
createControlGroup('🖼️ Face Quality:', faceQualitySelect)
|
| 686 |
+
);
|
| 687 |
+
document.querySelector('.style-grid').appendChild(
|
| 688 |
+
createControlGroup('🎨 Face Style:', faceStyleSelect)
|
| 689 |
+
);
|
| 690 |
+
document.querySelector('.style-grid').appendChild(
|
| 691 |
+
createControlGroup('📸 Perspective:', perspectiveSelect)
|
| 692 |
+
);
|
| 693 |
+
document.querySelector('.style-grid').appendChild(
|
| 694 |
+
createControlGroup('🖌️ Object Placement:', objectPlacementSelect)
|
| 695 |
+
);
|
| 696 |
+
document.querySelector('.style-grid').appendChild(
|
| 697 |
+
createControlGroup('💡 Light Source:', lightSourceSelect)
|
| 698 |
+
);
|
| 699 |
+
document.querySelector('.style-grid').appendChild(
|
| 700 |
+
createControlGroup('🔍 Depth Perception:', depthPerceptionSelect)
|
| 701 |
+
);
|
| 702 |
+
|
| 703 |
+
function createControlGroup(labelText, selectElement) {
|
| 704 |
+
const container = document.createElement('div');
|
| 705 |
+
container.className = 'style-item';
|
| 706 |
+
|
| 707 |
+
const label = document.createElement('label');
|
| 708 |
+
label.textContent = labelText;
|
| 709 |
+
|
| 710 |
+
container.appendChild(label);
|
| 711 |
+
container.appendChild(selectElement);
|
| 712 |
+
|
| 713 |
+
return container;
|
| 714 |
+
}
|
| 715 |
+
|
| 716 |
+
generateButton.addEventListener('click', async () => {
|
| 717 |
+
const userPrompt = promptInput.value.trim();
|
| 718 |
+
|
| 719 |
+
if (!userPrompt) {
|
| 720 |
+
alert('Please enter a prompt to generate an image!');
|
| 721 |
+
return;
|
| 722 |
+
}
|
| 723 |
+
|
| 724 |
+
// Show loading indicator
|
| 725 |
+
loadingIndicator.classList.remove('hidden');
|
| 726 |
+
// Hide previous image
|
| 727 |
+
generatedImage.src = "";
|
| 728 |
+
// Clear previous semantic check results
|
| 729 |
+
const semanticCheckList = document.getElementById('semanticCheckList');
|
| 730 |
+
if (semanticCheckList) {
|
| 731 |
+
semanticCheckList.innerHTML = '';
|
| 732 |
+
}
|
| 733 |
+
document.getElementById('semanticCheckResult').classList.add('hidden');
|
| 734 |
+
|
| 735 |
+
|
| 736 |
+
try {
|
| 737 |
+
// Enhanced image generation with more control
|
| 738 |
+
const imageGenerationOptions = {
|
| 739 |
+
negativePrompt: negativePromptInput.value.trim(),
|
| 740 |
+
seed: seedInput.value ? parseInt(seedInput.value, 10) : undefined,
|
| 741 |
+
style: styleSelect.value,
|
| 742 |
+
renderQuality: renderQualitySelect.value,
|
| 743 |
+
lighting: lightingSelect.value,
|
| 744 |
+
controlNetMode: controlNetSelect.value,
|
| 745 |
+
faceQuality: faceQualitySelect.value,
|
| 746 |
+
faceStyle: faceStyleSelect.value,
|
| 747 |
+
symmetry: true,
|
| 748 |
+
perspective: perspectiveSelect.value,
|
| 749 |
+
objectPlacement: objectPlacementSelect.value,
|
| 750 |
+
lightSource: lightSourceSelect.value,
|
| 751 |
+
depthPerception: depthPerceptionSelect.value,
|
| 752 |
+
cfgScale: parseFloat(document.getElementById('cfgScaleInput').value),
|
| 753 |
+
steps: parseInt(document.getElementById('stepsInput').value, 10)
|
| 754 |
+
};
|
| 755 |
+
|
| 756 |
+
const result = await generateImage(userPrompt, imageGenerationOptions);
|
| 757 |
+
|
| 758 |
+
if (result && result.url) {
|
| 759 |
+
generatedImage.src = result.url;
|
| 760 |
+
|
| 761 |
+
// Additional semantic checks and enhancements
|
| 762 |
+
// Show semantic check results panel
|
| 763 |
+
document.getElementById('semanticCheckResult').classList.remove('hidden');
|
| 764 |
+
await performSemanticChecks(userPrompt, result.url);
|
| 765 |
+
}
|
| 766 |
+
} catch (error) {
|
| 767 |
+
console.error("Image Generation Process Failed:", error);
|
| 768 |
+
alert("Image generation failed: " + error.message);
|
| 769 |
+
generatedImage.src = "";
|
| 770 |
+
} finally {
|
| 771 |
+
// Hide loading indicator
|
| 772 |
+
loadingIndicator.classList.add('hidden');
|
| 773 |
+
}
|
| 774 |
+
});
|
style.css
CHANGED
|
@@ -1,28 +1,867 @@
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
h1 {
|
| 7 |
-
|
| 8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
+
font-family: 'Inter', sans-serif;
|
| 3 |
+
display: flex;
|
| 4 |
+
flex-direction: column;
|
| 5 |
+
align-items: center;
|
| 6 |
+
padding: 20px;
|
| 7 |
+
background: linear-gradient(135deg, #e0e4eb 0%, #a1a9b7 100%);
|
| 8 |
+
color: #2c3e50;
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
.technical-info {
|
| 12 |
+
display: flex;
|
| 13 |
+
justify-content: space-around;
|
| 14 |
+
width: 100%;
|
| 15 |
+
margin-bottom: 20px;
|
| 16 |
+
background: rgba(255, 255, 255, 0.1);
|
| 17 |
+
padding: 15px;
|
| 18 |
+
border-radius: 10px;
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
.component {
|
| 22 |
+
text-align: center;
|
| 23 |
+
background: rgba(255, 255, 255, 0.2);
|
| 24 |
+
padding: 10px;
|
| 25 |
+
border-radius: 8px;
|
| 26 |
+
transition: transform 0.3s ease;
|
| 27 |
+
}
|
| 28 |
+
|
| 29 |
+
.component:hover {
|
| 30 |
+
transform: scale(1.05);
|
| 31 |
+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 32 |
+
}
|
| 33 |
+
|
| 34 |
+
.component h3 {
|
| 35 |
+
margin: 0 0 10px;
|
| 36 |
+
color: #2980b9;
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.component p {
|
| 40 |
+
font-size: 0.9rem;
|
| 41 |
+
color: #34495e;
|
| 42 |
}
|
| 43 |
|
| 44 |
h1 {
|
| 45 |
+
color: #2c3e50;
|
| 46 |
+
margin-bottom: 30px;
|
| 47 |
+
text-align: center;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.input-area {
|
| 51 |
+
background: rgba(255, 255, 255, 0.3);
|
| 52 |
+
border-radius: 15px;
|
| 53 |
+
padding: 25px;
|
| 54 |
+
width: 100%;
|
| 55 |
+
max-width: 700px;
|
| 56 |
+
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
.prompt-group {
|
| 60 |
+
margin-bottom: 15px;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
input {
|
| 64 |
+
width: 100%;
|
| 65 |
+
padding: 12px;
|
| 66 |
+
border: 1px solid #bdc3c7;
|
| 67 |
+
border-radius: 6px;
|
| 68 |
+
font-size: 1rem;
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
#generateButton {
|
| 72 |
+
width: 100%;
|
| 73 |
+
padding: 12px;
|
| 74 |
+
background: linear-gradient(135deg, #2980b9 0%, #2c3e50 100%);
|
| 75 |
+
color: white;
|
| 76 |
+
border: none;
|
| 77 |
+
border-radius: 6px;
|
| 78 |
+
cursor: pointer;
|
| 79 |
+
transition: all 0.4s ease;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
#generateButton:hover {
|
| 83 |
+
transform: translateY(-3px);
|
| 84 |
+
box-shadow: 0 7px 14px rgba(0,0,0,0.2);
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
.image-area {
|
| 88 |
+
margin-top: 20px;
|
| 89 |
+
max-width: 100%;
|
| 90 |
+
border-radius: 15px;
|
| 91 |
+
overflow: hidden;
|
| 92 |
+
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
#generatedImage {
|
| 96 |
+
max-width: 100%;
|
| 97 |
+
height: auto;
|
| 98 |
+
display: block;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
#loading {
|
| 102 |
+
margin: 20px 0;
|
| 103 |
+
font-style: italic;
|
| 104 |
+
color: #2c3e50;
|
| 105 |
+
}
|
| 106 |
+
|
| 107 |
+
.advanced-controls, .control-options {
|
| 108 |
+
background: rgba(255, 255, 255, 0.2);
|
| 109 |
+
padding: 15px;
|
| 110 |
+
border-radius: 10px;
|
| 111 |
+
margin-bottom: 15px;
|
| 112 |
+
}
|
| 113 |
+
|
| 114 |
+
.style-grid {
|
| 115 |
+
display: grid;
|
| 116 |
+
grid-template-columns: repeat(3, 1fr);
|
| 117 |
+
gap: 10px;
|
| 118 |
+
background: rgba(255, 255, 255, 0.1);
|
| 119 |
+
padding: 15px;
|
| 120 |
+
border-radius: 10px;
|
| 121 |
+
}
|
| 122 |
+
|
| 123 |
+
.style-item {
|
| 124 |
+
display: flex;
|
| 125 |
+
flex-direction: column;
|
| 126 |
}
|
| 127 |
|
| 128 |
+
.style-item select {
|
| 129 |
+
width: 100%;
|
| 130 |
+
padding: 8px;
|
| 131 |
+
border-radius: 6px;
|
| 132 |
+
border: 1px solid #bdc3c7;
|
| 133 |
}
|
| 134 |
|
| 135 |
+
.prompt-hint {
|
| 136 |
+
font-size: 0.7rem;
|
| 137 |
+
color: #7f8c8d;
|
| 138 |
+
margin-top: 5px;
|
|
|
|
|
|
|
| 139 |
}
|
| 140 |
|
| 141 |
+
.technical-explanation {
|
| 142 |
+
background: rgba(255, 255, 255, 0.1);
|
| 143 |
+
border-radius: 10px;
|
| 144 |
+
padding: 20px;
|
| 145 |
+
margin-top: 20px;
|
| 146 |
+
text-align: left;
|
| 147 |
+
max-width: 700px;
|
| 148 |
+
width: 100%;
|
| 149 |
}
|
| 150 |
+
|
| 151 |
+
.technical-explanation h2 {
|
| 152 |
+
color: #2980b9;
|
| 153 |
+
margin-bottom: 15px;
|
| 154 |
+
}
|
| 155 |
+
|
| 156 |
+
.technical-explanation ul {
|
| 157 |
+
list-style-type: none;
|
| 158 |
+
padding: 0;
|
| 159 |
+
}
|
| 160 |
+
|
| 161 |
+
.technical-explanation li {
|
| 162 |
+
margin-bottom: 8px;
|
| 163 |
+
padding-left: 20px;
|
| 164 |
+
position: relative;
|
| 165 |
+
background: rgba(255, 255, 255, 0.1);
|
| 166 |
+
padding: 8px;
|
| 167 |
+
border-radius: 6px;
|
| 168 |
+
}
|
| 169 |
+
|
| 170 |
+
.technical-explanation li::before {
|
| 171 |
+
content: '•';
|
| 172 |
+
position: absolute;
|
| 173 |
+
left: 0;
|
| 174 |
+
color: #2980b9;
|
| 175 |
+
}
|
| 176 |
+
|
| 177 |
+
.diffusion-stages {
|
| 178 |
+
display: flex;
|
| 179 |
+
justify-content: space-around;
|
| 180 |
+
background: rgba(41, 128, 185, 0.1);
|
| 181 |
+
padding: 15px;
|
| 182 |
+
border-radius: 10px;
|
| 183 |
+
}
|
| 184 |
+
|
| 185 |
+
.noise-generation, .denoising-process, .prompt-guidance {
|
| 186 |
+
text-align: center;
|
| 187 |
+
background: rgba(255, 255, 255, 0.2);
|
| 188 |
+
padding: 10px;
|
| 189 |
+
border-radius: 8px;
|
| 190 |
+
transition: all 0.3s ease;
|
| 191 |
+
}
|
| 192 |
+
|
| 193 |
+
.noise-generation:hover, .denoising-process:hover, .prompt-guidance:hover {
|
| 194 |
+
transform: scale(1.05);
|
| 195 |
+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
| 196 |
+
}
|
| 197 |
+
|
| 198 |
+
.diffusion-details {
|
| 199 |
+
display: grid;
|
| 200 |
+
grid-template-columns: 1fr 1fr;
|
| 201 |
+
gap: 20px;
|
| 202 |
+
background: rgba(255, 255, 255, 0.1);
|
| 203 |
+
padding: 15px;
|
| 204 |
+
border-radius: 10px;
|
| 205 |
+
margin-top: 15px;
|
| 206 |
+
}
|
| 207 |
+
|
| 208 |
+
.stage-visualization ul, .generation-parameters ul, .how-it-works ul {
|
| 209 |
+
list-style-type: none;
|
| 210 |
+
padding: 0;
|
| 211 |
+
}
|
| 212 |
+
|
| 213 |
+
.stage-visualization li {
|
| 214 |
+
background: rgba(255, 255, 255, 0.2);
|
| 215 |
+
margin-bottom: 8px;
|
| 216 |
+
padding: 8px;
|
| 217 |
+
border-radius: 6px;
|
| 218 |
+
}
|
| 219 |
+
|
| 220 |
+
.stage-visualization li strong, .generation-parameters li strong {
|
| 221 |
+
color: #2c3e50;
|
| 222 |
+
}
|
| 223 |
+
|
| 224 |
+
.stage-visualization li::before, .generation-parameters li::before {
|
| 225 |
+
content: '';
|
| 226 |
+
}
|
| 227 |
+
|
| 228 |
+
.generation-parameters li {
|
| 229 |
+
margin-bottom: 8px;
|
| 230 |
+
background: rgba(41, 128, 185, 0.1);
|
| 231 |
+
padding: 8px;
|
| 232 |
+
border-radius: 6px;
|
| 233 |
+
}
|
| 234 |
+
|
| 235 |
+
.anatomical-guidance {
|
| 236 |
+
background: rgba(41, 185, 128, 0.1);
|
| 237 |
+
border-radius: 10px;
|
| 238 |
+
padding: 15px;
|
| 239 |
+
margin-top: 15px;
|
| 240 |
+
}
|
| 241 |
+
|
| 242 |
+
.anatomy-controls {
|
| 243 |
+
display: flex;
|
| 244 |
+
align-items: center;
|
| 245 |
+
justify-content: space-between;
|
| 246 |
+
}
|
| 247 |
+
|
| 248 |
+
.anatomy-item {
|
| 249 |
+
flex-grow: 1;
|
| 250 |
+
margin-right: 15px;
|
| 251 |
+
}
|
| 252 |
+
|
| 253 |
+
.anatomy-item label {
|
| 254 |
+
margin-bottom: 5px;
|
| 255 |
+
display: block;
|
| 256 |
+
}
|
| 257 |
+
|
| 258 |
+
.anatomy-item select {
|
| 259 |
+
width: 100%;
|
| 260 |
+
padding: 8px;
|
| 261 |
+
border-radius: 6px;
|
| 262 |
+
border: 1px solid #bdc3c7;
|
| 263 |
+
}
|
| 264 |
+
|
| 265 |
+
.anatomy-hint {
|
| 266 |
+
font-size: 0.8rem;
|
| 267 |
+
color: #34495e;
|
| 268 |
+
background: rgba(255, 255, 255, 0.3);
|
| 269 |
+
padding: 10px;
|
| 270 |
+
border-radius: 6px;
|
| 271 |
+
flex-shrink: 0;
|
| 272 |
+
max-width: 40%;
|
| 273 |
+
}
|
| 274 |
+
|
| 275 |
+
.anatomy-hint p {
|
| 276 |
+
margin: 0;
|
| 277 |
+
}
|
| 278 |
+
|
| 279 |
+
.text-generation-info {
|
| 280 |
+
background: rgba(185, 128, 41, 0.1);
|
| 281 |
+
border-radius: 10px;
|
| 282 |
+
padding: 15px;
|
| 283 |
+
margin-top: 20px;
|
| 284 |
+
}
|
| 285 |
+
|
| 286 |
+
.text-generation-info h3 {
|
| 287 |
+
color: #b58029;
|
| 288 |
+
margin-bottom: 10px;
|
| 289 |
+
}
|
| 290 |
+
|
| 291 |
+
.text-generation-info ul {
|
| 292 |
+
list-style-type: none;
|
| 293 |
+
padding: 0;
|
| 294 |
+
}
|
| 295 |
+
|
| 296 |
+
.text-generation-info li {
|
| 297 |
+
margin-bottom: 8px;
|
| 298 |
+
padding-left: 20px;
|
| 299 |
+
position: relative;
|
| 300 |
+
background: rgba(255, 255, 255, 0.1);
|
| 301 |
+
padding: 8px;
|
| 302 |
+
border-radius: 6px;
|
| 303 |
+
}
|
| 304 |
+
|
| 305 |
+
.text-generation-info li::before {
|
| 306 |
+
content: '•';
|
| 307 |
+
position: absolute;
|
| 308 |
+
left: 0;
|
| 309 |
+
color: #b58029;
|
| 310 |
+
}
|
| 311 |
+
|
| 312 |
+
.text-hint {
|
| 313 |
+
font-size: 0.8rem;
|
| 314 |
+
color: #34495e;
|
| 315 |
+
background: rgba(255, 255, 255, 0.3);
|
| 316 |
+
padding: 10px;
|
| 317 |
+
border-radius: 6px;
|
| 318 |
+
margin-top: 10px;
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
.text-hint p {
|
| 322 |
+
margin: 0;
|
| 323 |
+
}
|
| 324 |
+
|
| 325 |
+
.ai-enhancement-panel {
|
| 326 |
+
background: rgba(41, 185, 128, 0.1);
|
| 327 |
+
border-radius: 10px;
|
| 328 |
+
padding: 15px;
|
| 329 |
+
margin-top: 20px;
|
| 330 |
+
max-width: 700px;
|
| 331 |
+
width: 100%;
|
| 332 |
+
}
|
| 333 |
+
|
| 334 |
+
.enhancement-controls {
|
| 335 |
+
display: flex;
|
| 336 |
+
justify-content: space-around;
|
| 337 |
+
margin-bottom: 15px;
|
| 338 |
+
}
|
| 339 |
+
|
| 340 |
+
.enhancement-group {
|
| 341 |
+
display: flex;
|
| 342 |
+
flex-direction: column;
|
| 343 |
+
align-items: center;
|
| 344 |
+
}
|
| 345 |
+
|
| 346 |
+
.enhancement-group label {
|
| 347 |
+
margin-bottom: 5px;
|
| 348 |
+
font-size: 0.9rem;
|
| 349 |
+
}
|
| 350 |
+
|
| 351 |
+
.enhancement-result {
|
| 352 |
+
background: rgba(255, 255, 255, 0.2);
|
| 353 |
+
border-radius: 8px;
|
| 354 |
+
padding: 10px;
|
| 355 |
+
margin-top: 10px;
|
| 356 |
+
}
|
| 357 |
+
|
| 358 |
+
.enhancement-result.hidden {
|
| 359 |
+
display: none;
|
| 360 |
+
}
|
| 361 |
+
|
| 362 |
+
.enhancement-result h3 {
|
| 363 |
+
margin-top: 0;
|
| 364 |
+
color: #2980b9;
|
| 365 |
+
}
|
| 366 |
+
|
| 367 |
+
#semanticCheckList {
|
| 368 |
+
list-style-type: none;
|
| 369 |
+
padding: 0;
|
| 370 |
+
}
|
| 371 |
+
|
| 372 |
+
#semanticCheckList li {
|
| 373 |
+
margin-bottom: 5px;
|
| 374 |
+
padding: 5px;
|
| 375 |
+
background: rgba(41, 128, 185, 0.1);
|
| 376 |
+
border-radius: 4px;
|
| 377 |
+
}
|
| 378 |
+
|
| 379 |
+
.how-it-works {
|
| 380 |
+
background: rgba(185, 41, 128, 0.1);
|
| 381 |
+
border-radius: 10px;
|
| 382 |
+
padding: 15px;
|
| 383 |
+
margin-top: 20px;
|
| 384 |
+
}
|
| 385 |
+
|
| 386 |
+
.how-it-works h2 {
|
| 387 |
+
color: #b92980;
|
| 388 |
+
margin-bottom: 15px;
|
| 389 |
+
}
|
| 390 |
+
|
| 391 |
+
.how-it-works li {
|
| 392 |
+
margin-bottom: 8px;
|
| 393 |
+
padding-left: 20px;
|
| 394 |
+
position: relative;
|
| 395 |
+
background: rgba(255, 255, 255, 0.1);
|
| 396 |
+
padding: 8px;
|
| 397 |
+
border-radius: 6px;
|
| 398 |
+
}
|
| 399 |
+
|
| 400 |
+
.how-it-works li::before {
|
| 401 |
+
content: '•';
|
| 402 |
+
position: absolute;
|
| 403 |
+
left: 0;
|
| 404 |
+
color: #b92980;
|
| 405 |
+
}
|
| 406 |
+
|
| 407 |
+
.dataset-info {
|
| 408 |
+
background: rgba(41, 78, 185, 0.1);
|
| 409 |
+
border-radius: 10px;
|
| 410 |
+
padding: 15px;
|
| 411 |
+
margin-top: 20px;
|
| 412 |
+
}
|
| 413 |
+
|
| 414 |
+
.dataset-info h2 {
|
| 415 |
+
color: #294e80;
|
| 416 |
+
margin-bottom: 15px;
|
| 417 |
+
}
|
| 418 |
+
|
| 419 |
+
.dataset-info ul {
|
| 420 |
+
list-style-type: none;
|
| 421 |
+
padding: 0;
|
| 422 |
+
}
|
| 423 |
+
|
| 424 |
+
.dataset-info li {
|
| 425 |
+
margin-bottom: 8px;
|
| 426 |
+
padding-left: 20px;
|
| 427 |
+
position: relative;
|
| 428 |
+
background: rgba(255, 255, 255, 0.1);
|
| 429 |
+
padding: 8px;
|
| 430 |
+
border-radius: 6px;
|
| 431 |
+
}
|
| 432 |
+
|
| 433 |
+
.dataset-info li::before {
|
| 434 |
+
content: '•';
|
| 435 |
+
position: absolute;
|
| 436 |
+
left: 0;
|
| 437 |
+
color: #294e80;
|
| 438 |
+
}
|
| 439 |
+
|
| 440 |
+
.dataset-info .database-categories {
|
| 441 |
+
display: grid;
|
| 442 |
+
grid-template-columns: repeat(2, 1fr);
|
| 443 |
+
gap: 20px;
|
| 444 |
+
}
|
| 445 |
+
|
| 446 |
+
.dataset-info .database-category {
|
| 447 |
+
background: rgba(255, 255, 255, 0.1);
|
| 448 |
+
border-radius: 10px;
|
| 449 |
+
padding: 15px;
|
| 450 |
+
}
|
| 451 |
+
|
| 452 |
+
.dataset-info .database-category h3 {
|
| 453 |
+
color: #294e80;
|
| 454 |
+
margin-bottom: 10px;
|
| 455 |
+
}
|
| 456 |
+
|
| 457 |
+
.dataset-info .database-category ul {
|
| 458 |
+
list-style-type: none;
|
| 459 |
+
padding: 0;
|
| 460 |
+
}
|
| 461 |
+
|
| 462 |
+
.dataset-info .database-category li {
|
| 463 |
+
margin-bottom: 5px;
|
| 464 |
+
padding: 5px;
|
| 465 |
+
background: rgba(41, 78, 185, 0.05);
|
| 466 |
+
border-radius: 5px;
|
| 467 |
+
}
|
| 468 |
+
|
| 469 |
+
.dataset-insights {
|
| 470 |
+
margin-top: 20px;
|
| 471 |
+
background: rgba(41, 185, 128, 0.1);
|
| 472 |
+
border-radius: 10px;
|
| 473 |
+
padding: 15px;
|
| 474 |
+
}
|
| 475 |
+
|
| 476 |
+
.dataset-insights h3 {
|
| 477 |
+
color: #294e80;
|
| 478 |
+
margin-bottom: 10px;
|
| 479 |
+
}
|
| 480 |
+
|
| 481 |
+
.dataset-insights ul {
|
| 482 |
+
list-style-type: disc;
|
| 483 |
+
padding-left: 20px;
|
| 484 |
+
}
|
| 485 |
+
|
| 486 |
+
.dataset-insights li {
|
| 487 |
+
margin-bottom: 5px;
|
| 488 |
+
}
|
| 489 |
+
|
| 490 |
+
.control-and-error-reduction {
|
| 491 |
+
background: rgba(185, 41, 41, 0.1);
|
| 492 |
+
border-radius: 10px;
|
| 493 |
+
padding: 15px;
|
| 494 |
+
margin-top: 20px;
|
| 495 |
+
}
|
| 496 |
+
|
| 497 |
+
.control-and-error-reduction h2 {
|
| 498 |
+
color: #b92929;
|
| 499 |
+
margin-bottom: 15px;
|
| 500 |
+
}
|
| 501 |
+
|
| 502 |
+
.control-and-error-reduction ul {
|
| 503 |
+
list-style-type: none;
|
| 504 |
+
padding: 0;
|
| 505 |
+
}
|
| 506 |
+
|
| 507 |
+
.control-and-error-reduction li {
|
| 508 |
+
margin-bottom: 15px;
|
| 509 |
+
padding-left: 20px;
|
| 510 |
+
position: relative;
|
| 511 |
+
background: rgba(255, 255, 255, 0.1);
|
| 512 |
+
padding: 10px;
|
| 513 |
+
border-radius: 8px;
|
| 514 |
+
}
|
| 515 |
+
|
| 516 |
+
.control-and-error-reduction li::before {
|
| 517 |
+
content: '•';
|
| 518 |
+
position: absolute;
|
| 519 |
+
left: 0;
|
| 520 |
+
color: #b92929;
|
| 521 |
+
font-weight: bold;
|
| 522 |
+
top: 10px;
|
| 523 |
+
}
|
| 524 |
+
|
| 525 |
+
.control-and-error-reduction li strong {
|
| 526 |
+
color: #2c3e50;
|
| 527 |
+
}
|
| 528 |
+
|
| 529 |
+
.control-and-error-reduction ul ul {
|
| 530 |
+
list-style-type: disc;
|
| 531 |
+
padding-left: 30px;
|
| 532 |
+
margin-top: 10px;
|
| 533 |
+
margin-bottom: 0;
|
| 534 |
+
}
|
| 535 |
+
|
| 536 |
+
.control-and-error-reduction ul ul li {
|
| 537 |
+
margin-bottom: 5px;
|
| 538 |
+
padding: 5px;
|
| 539 |
+
background: rgba(255, 255, 255, 0.05);
|
| 540 |
+
border-radius: 5px;
|
| 541 |
+
position: relative;
|
| 542 |
+
padding-left: 0;
|
| 543 |
+
}
|
| 544 |
+
|
| 545 |
+
.control-and-error-reduction ul ul li::before {
|
| 546 |
+
content: '';
|
| 547 |
+
}
|
| 548 |
+
|
| 549 |
+
.control-and-error-reduction code {
|
| 550 |
+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
| 551 |
+
background-color: rgba(0, 0, 0, 0.05);
|
| 552 |
+
padding: 2px 4px;
|
| 553 |
+
border-radius: 4px;
|
| 554 |
+
font-size: 0.9em;
|
| 555 |
+
color: #34495e;
|
| 556 |
+
word-break: break-all;
|
| 557 |
+
}
|
| 558 |
+
|
| 559 |
+
.shading-explanation {
|
| 560 |
+
background: rgba(41, 185, 41, 0.1);
|
| 561 |
+
border-radius: 10px;
|
| 562 |
+
padding: 15px;
|
| 563 |
+
margin-top: 20px;
|
| 564 |
+
}
|
| 565 |
+
|
| 566 |
+
.shading-explanation h2 {
|
| 567 |
+
color: #29b529;
|
| 568 |
+
margin-bottom: 15px;
|
| 569 |
+
}
|
| 570 |
+
|
| 571 |
+
.shading-explanation ul {
|
| 572 |
+
list-style-type: none;
|
| 573 |
+
padding: 0;
|
| 574 |
+
}
|
| 575 |
+
|
| 576 |
+
.shading-explanation li {
|
| 577 |
+
margin-bottom: 15px;
|
| 578 |
+
padding-left: 20px;
|
| 579 |
+
position: relative;
|
| 580 |
+
background: rgba(255, 255, 255, 0.1);
|
| 581 |
+
padding: 10px;
|
| 582 |
+
border-radius: 8px;
|
| 583 |
+
}
|
| 584 |
+
|
| 585 |
+
.shading-explanation li::before {
|
| 586 |
+
content: '🔹';
|
| 587 |
+
position: absolute;
|
| 588 |
+
left: 0;
|
| 589 |
+
color: #2980b9;
|
| 590 |
+
font-weight: bold;
|
| 591 |
+
top: 10px;
|
| 592 |
+
}
|
| 593 |
+
|
| 594 |
+
.shading-explanation li strong {
|
| 595 |
+
color: #2c3e50;
|
| 596 |
+
}
|
| 597 |
+
|
| 598 |
+
.shading-explanation ul ul {
|
| 599 |
+
list-style-type: disc;
|
| 600 |
+
padding-left: 30px;
|
| 601 |
+
margin-top: 10px;
|
| 602 |
+
margin-bottom: 0;
|
| 603 |
+
}
|
| 604 |
+
|
| 605 |
+
.shading-explanation ul ul li {
|
| 606 |
+
margin-bottom: 5px;
|
| 607 |
+
padding: 5px;
|
| 608 |
+
background: rgba(255, 255, 255, 0.05);
|
| 609 |
+
border-radius: 5px;
|
| 610 |
+
position: relative;
|
| 611 |
+
padding-left: 0;
|
| 612 |
+
}
|
| 613 |
+
|
| 614 |
+
.shading-explanation ul ul li::before {
|
| 615 |
+
content: '';
|
| 616 |
+
}
|
| 617 |
+
|
| 618 |
+
.technical-section {
|
| 619 |
+
background: rgba(41, 185, 41, 0.1);
|
| 620 |
+
border-radius: 10px;
|
| 621 |
+
padding: 15px;
|
| 622 |
+
margin-top: 20px;
|
| 623 |
+
}
|
| 624 |
+
|
| 625 |
+
.technical-section h2 {
|
| 626 |
+
color: #29b529;
|
| 627 |
+
margin-bottom: 15px;
|
| 628 |
+
}
|
| 629 |
+
|
| 630 |
+
.technical-section ul {
|
| 631 |
+
list-style-type: none;
|
| 632 |
+
padding: 0;
|
| 633 |
+
}
|
| 634 |
+
|
| 635 |
+
.technical-section li {
|
| 636 |
+
margin-bottom: 15px;
|
| 637 |
+
padding-left: 20px;
|
| 638 |
+
position: relative;
|
| 639 |
+
background: rgba(255, 255, 255, 0.1);
|
| 640 |
+
padding: 10px;
|
| 641 |
+
border-radius: 8px;
|
| 642 |
+
}
|
| 643 |
+
|
| 644 |
+
.technical-section li::before {
|
| 645 |
+
content: '✨';
|
| 646 |
+
position: absolute;
|
| 647 |
+
left: 0;
|
| 648 |
+
color: #29b529;
|
| 649 |
+
font-weight: bold;
|
| 650 |
+
top: 10px;
|
| 651 |
+
}
|
| 652 |
+
|
| 653 |
+
.technical-section li strong {
|
| 654 |
+
color: #2c3e50;
|
| 655 |
+
}
|
| 656 |
+
|
| 657 |
+
.technical-section ul ul {
|
| 658 |
+
list-style-type: disc;
|
| 659 |
+
padding-left: 30px;
|
| 660 |
+
margin-top: 10px;
|
| 661 |
+
margin-bottom: 0;
|
| 662 |
+
}
|
| 663 |
+
|
| 664 |
+
.technical-section ul ul li {
|
| 665 |
+
margin-bottom: 5px;
|
| 666 |
+
padding: 5px;
|
| 667 |
+
background: rgba(255, 255, 255, 0.05);
|
| 668 |
+
border-radius: 5px;
|
| 669 |
+
position: relative;
|
| 670 |
+
padding-left: 0;
|
| 671 |
+
}
|
| 672 |
+
|
| 673 |
+
.technical-section ul ul li::before {
|
| 674 |
+
content: '';
|
| 675 |
+
}
|
| 676 |
+
|
| 677 |
+
.speed-info {
|
| 678 |
+
background: rgba(185, 41, 78, 0.1);
|
| 679 |
+
}
|
| 680 |
+
|
| 681 |
+
.speed-info h2 {
|
| 682 |
+
color: #b9294e;
|
| 683 |
+
}
|
| 684 |
+
|
| 685 |
+
.speed-info table {
|
| 686 |
+
width: 100%;
|
| 687 |
+
border-collapse: collapse;
|
| 688 |
+
margin-bottom: 20px;
|
| 689 |
+
background: rgba(255, 255, 255, 0.1);
|
| 690 |
+
border-radius: 8px;
|
| 691 |
+
overflow: hidden;
|
| 692 |
+
}
|
| 693 |
+
|
| 694 |
+
.speed-info th, .speed-info td {
|
| 695 |
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
| 696 |
+
padding: 12px;
|
| 697 |
+
text-align: left;
|
| 698 |
+
}
|
| 699 |
+
|
| 700 |
+
.speed-info th {
|
| 701 |
+
background-color: rgba(185, 41, 78, 0.2);
|
| 702 |
+
color: #2c3e50;
|
| 703 |
+
font-weight: bold;
|
| 704 |
+
}
|
| 705 |
+
|
| 706 |
+
.speed-info tr:nth-child(even) {
|
| 707 |
+
background-color: rgba(255, 255, 255, 0.05);
|
| 708 |
+
}
|
| 709 |
+
|
| 710 |
+
.speed-factors {
|
| 711 |
+
display: grid;
|
| 712 |
+
grid-template-columns: 1fr 1fr;
|
| 713 |
+
gap: 20px;
|
| 714 |
+
margin-bottom: 20px;
|
| 715 |
+
}
|
| 716 |
+
|
| 717 |
+
.speed-up, .speed-down {
|
| 718 |
+
background: rgba(255, 255, 255, 0.1);
|
| 719 |
+
border-radius: 8px;
|
| 720 |
+
padding: 15px;
|
| 721 |
+
}
|
| 722 |
+
|
| 723 |
+
.speed-up h3 {
|
| 724 |
+
color: #28a745;
|
| 725 |
+
margin-top: 0;
|
| 726 |
+
}
|
| 727 |
+
|
| 728 |
+
.speed-down h3 {
|
| 729 |
+
color: #dc3545;
|
| 730 |
+
margin-top: 0;
|
| 731 |
+
}
|
| 732 |
+
|
| 733 |
+
.speed-factors ul {
|
| 734 |
+
list-style-type: none;
|
| 735 |
+
padding: 0;
|
| 736 |
+
}
|
| 737 |
+
|
| 738 |
+
.speed-factors li {
|
| 739 |
+
margin-bottom: 8px;
|
| 740 |
+
padding-left: 20px;
|
| 741 |
+
position: relative;
|
| 742 |
+
background: none;
|
| 743 |
+
border-radius: 0;
|
| 744 |
+
padding: 0;
|
| 745 |
+
}
|
| 746 |
+
|
| 747 |
+
.speed-factors li::before {
|
| 748 |
+
content: '•';
|
| 749 |
+
position: absolute;
|
| 750 |
+
left: 0;
|
| 751 |
+
color: inherit;
|
| 752 |
+
font-weight: normal;
|
| 753 |
+
top: 0;
|
| 754 |
+
}
|
| 755 |
+
|
| 756 |
+
.ai-errors-solutions {
|
| 757 |
+
background: rgba(185, 41, 41, 0.1);
|
| 758 |
+
border-radius: 10px;
|
| 759 |
+
padding: 20px;
|
| 760 |
+
margin-top: 20px;
|
| 761 |
+
max-width: 700px;
|
| 762 |
+
width: 100%;
|
| 763 |
+
text-align: left;
|
| 764 |
+
}
|
| 765 |
+
|
| 766 |
+
.ai-errors-solutions h2 {
|
| 767 |
+
color: #b92929;
|
| 768 |
+
margin-bottom: 20px;
|
| 769 |
+
text-align: center;
|
| 770 |
+
}
|
| 771 |
+
|
| 772 |
+
.ai-errors-solutions .error-section {
|
| 773 |
+
background: rgba(255, 255, 255, 0.1);
|
| 774 |
+
border-radius: 8px;
|
| 775 |
+
padding: 15px;
|
| 776 |
+
margin-bottom: 15px;
|
| 777 |
+
}
|
| 778 |
+
|
| 779 |
+
.ai-errors-solutions .error-section h3 {
|
| 780 |
+
color: #b92929;
|
| 781 |
+
margin-top: 0;
|
| 782 |
+
margin-bottom: 10px;
|
| 783 |
+
}
|
| 784 |
+
|
| 785 |
+
.ai-errors-solutions .error-section h4 {
|
| 786 |
+
color: #28a745;
|
| 787 |
+
margin-top: 10px;
|
| 788 |
+
margin-bottom: 5px;
|
| 789 |
+
}
|
| 790 |
+
|
| 791 |
+
.ai-errors-solutions .error-section p {
|
| 792 |
+
font-size: 0.95rem;
|
| 793 |
+
line-height: 1.5;
|
| 794 |
+
color: #34495e;
|
| 795 |
+
}
|
| 796 |
+
|
| 797 |
+
.ai-errors-solutions .error-section ul {
|
| 798 |
+
list-style-type: none;
|
| 799 |
+
padding: 0;
|
| 800 |
+
margin-top: 10px;
|
| 801 |
+
}
|
| 802 |
+
|
| 803 |
+
.ai-errors-solutions .error-section li {
|
| 804 |
+
margin-bottom: 8px;
|
| 805 |
+
padding-left: 20px;
|
| 806 |
+
position: relative;
|
| 807 |
+
background: rgba(41, 185, 41, 0.05);
|
| 808 |
+
padding: 8px;
|
| 809 |
+
border-radius: 5px;
|
| 810 |
+
}
|
| 811 |
+
|
| 812 |
+
.ai-errors-solutions .error-section li::before {
|
| 813 |
+
content: '•';
|
| 814 |
+
position: absolute;
|
| 815 |
+
left: 0;
|
| 816 |
+
color: #28a745;
|
| 817 |
+
font-weight: bold;
|
| 818 |
+
}
|
| 819 |
+
|
| 820 |
+
@media (max-width: 768px) {
|
| 821 |
+
.technical-info, .diffusion-details, .anatomy-controls, .style-grid {
|
| 822 |
+
flex-direction: column;
|
| 823 |
+
gap: 15px;
|
| 824 |
+
}
|
| 825 |
+
|
| 826 |
+
.style-grid {
|
| 827 |
+
grid-template-columns: 1fr;
|
| 828 |
+
}
|
| 829 |
+
|
| 830 |
+
.style-item, .anatomy-item {
|
| 831 |
+
width: 100%;
|
| 832 |
+
margin-right: 0;
|
| 833 |
+
}
|
| 834 |
+
|
| 835 |
+
.anatomy-controls {
|
| 836 |
+
align-items: flex-start;
|
| 837 |
+
}
|
| 838 |
+
|
| 839 |
+
.anatomy-hint {
|
| 840 |
+
max-width: 100%;
|
| 841 |
+
}
|
| 842 |
+
|
| 843 |
+
.technical-section ul li {
|
| 844 |
+
padding-left: 10px;
|
| 845 |
+
}
|
| 846 |
+
.technical-section li::before {
|
| 847 |
+
left: -10px;
|
| 848 |
+
}
|
| 849 |
+
|
| 850 |
+
.speed-factors {
|
| 851 |
+
grid-template-columns: 1fr;
|
| 852 |
+
}
|
| 853 |
+
|
| 854 |
+
.speed-factors li {
|
| 855 |
+
padding-left: 10px;
|
| 856 |
+
}
|
| 857 |
+
.speed-factors li::before {
|
| 858 |
+
left: -10px;
|
| 859 |
+
}
|
| 860 |
+
|
| 861 |
+
.ai-errors-solutions .error-section li {
|
| 862 |
+
padding-left: 10px;
|
| 863 |
+
}
|
| 864 |
+
.ai-errors-solutions .error-section li::before {
|
| 865 |
+
left: -10px;
|
| 866 |
+
}
|
| 867 |
+
}
|