Update default negative prompt and add image clear button

- Replace short negative prompt with comprehensive list
- Add X button to clear selected image before generating
- Allow selecting a new image by clearing the current one

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/public/css/style.css

@@ -339,6 +339,12 @@ body {
     color: var(--gray-600);
 }
 
+.preview-container {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+}
+
 .preview-image {
     max-width: 100%;
     max-height: 300px;
@@ -346,6 +352,28 @@ body {
     object-fit: contain;
 }
 
+.clear-image-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 28px;
+    height: 28px;
+    border: none;
+    border-radius: 50%;
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+}
+
+.clear-image-btn:hover {
+    background: var(--danger);
+}
+
 /* Output */
 .output-video {
     width: 100%;
@@ -673,7 +701,7 @@ body {
     color: white;
 }
 
-.privacy-mode .preview-image,
+.privacy-mode .preview-container .preview-image,
 .privacy-mode .output-video,
 .privacy-mode .gallery-item-media video,
 .privacy-mode .gallery-item-media img {

frontend/public/index.html

@@ -87,7 +87,10 @@
                                     <span class="upload-icon">+</span>
                                     <span class="upload-text">Click or drag to upload</span>
                                 </label>
-                                <img id="preview-image" class="preview-image hidden" alt="Preview">
+                                <div class="preview-container hidden" id="preview-container">
+                                    <img id="preview-image" class="preview-image" alt="Preview">
+                                    <button type="button" id="clear-image-btn" class="clear-image-btn">&times;</button>
+                                </div>
                             </div>
                         </div>
 
@@ -100,7 +103,7 @@
                                 </div>
                                 <div class="form-group">
                                     <label for="negative-prompt">Negative Prompt</label>
-                                    <textarea id="negative-prompt" name="negativePrompt" rows="2" placeholder="What to avoid...">blurry, low quality, distorted</textarea>
+                                    <textarea id="negative-prompt" name="negativePrompt" rows="3" placeholder="What to avoid...">low quality, lowres, bad hands, extra limbs, missing fingers, poorly drawn face, bad anatomy, blurred, jpeg artifacts, deformed, ugly, bad proportions, disfigured, watermark, text, logo, signature, unrealistic eyes, cross-eyed, lopsided, bad lighting, harsh shadows, flat shading, unshapely body, pixelated, duplicate limbs, bad perspective, morphed, distorted, glitch, malformed hands, distorted fingers, noisy background, overly saturated, unnatural colors, lens distortion, grainy, low detail</textarea>
                                 </div>
                                 <div class="form-row">
                                     <div class="form-group">

frontend/public/js/app.js

@@ -277,6 +277,8 @@ document.querySelectorAll('.nav-link').forEach(link => {
 const imageInput = document.getElementById('image-input');
 const imageUploadArea = document.getElementById('image-upload-area');
 const previewImage = document.getElementById('preview-image');
+const previewContainer = document.getElementById('preview-container');
+const clearImageBtn = document.getElementById('clear-image-btn');
 
 imageInput.addEventListener('change', (e) => {
     const file = e.target.files[0];
@@ -284,7 +286,7 @@ imageInput.addEventListener('change', (e) => {
         const reader = new FileReader();
         reader.onload = (event) => {
             previewImage.src = event.target.result;
-            previewImage.classList.remove('hidden');
+            previewContainer.classList.remove('hidden');
             imageUploadArea.classList.add('has-file');
             base64Image = event.target.result.split(',')[1];
         };
@@ -292,6 +294,14 @@ imageInput.addEventListener('change', (e) => {
     }
 });
 
+clearImageBtn.addEventListener('click', () => {
+    previewImage.src = '';
+    previewContainer.classList.add('hidden');
+    imageUploadArea.classList.remove('has-file');
+    imageInput.value = '';
+    base64Image = '';
+});
+
 // Generation
 document.getElementById('generate-form').addEventListener('submit', async (e) => {
     e.preventDefault();