From ad4114ab8239676176a53334014ae881b2afbb70 Mon Sep 17 00:00:00 2001
From: Debian <nick@dev.voyager.sh>
Date: Thu, 8 Jan 2026 00:38:30 +0000
Subject: [PATCH] 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 | 30 +++++++++++++++++++++++++++++-
 frontend/public/index.html    |  7 +++++--
 frontend/public/js/app.js     | 12 +++++++++++-
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/frontend/public/css/style.css b/frontend/public/css/style.css
index fdd5ffd..c80ba8a 100644
--- a/frontend/public/css/style.css
+++ b/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 {
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 01ffbd4..dd525a2 100644
--- a/frontend/public/index.html
+++ b/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">
diff --git a/frontend/public/js/app.js b/frontend/public/js/app.js
index 9615bac..156ab6c 100644
--- a/frontend/public/js/app.js
+++ b/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();