Update index.html

index.html

@@ -59,6 +59,46 @@
       <label class="label" for="negative">Avoid <span class="dim" id="neg-hint">(optional negative prompt)</span></label>
       <input id="negative" type="text" spellcheck="false" placeholder="e.g. text, blur">
 
+      <!-- Image-to-image reference controls -->
+      <div class="image-reference">
+        <label class="label" for="reference-image">Reference image (optional)</label>
+        <input
+          id="reference-image"
+          type="file"
+          accept="image/png,image/jpeg,image/webp"
+        >
+
+        <div id="reference-preview-wrap" hidden>
+          <img
+            id="reference-preview"
+            alt="Selected reference image"
+            style="display:block;max-width:100%;max-height:240px;object-fit:contain;margin-top:10px;"
+          >
+          <button id="clear-reference" class="btn ghost small" type="button">
+            Remove image
+          </button>
+        </div>
+
+        <label class="label" for="image-strength">
+          Image strength <b id="image-strength-v">0.65</b>
+        </label>
+        <input
+          id="image-strength"
+          type="range"
+          min="0.10"
+          max="1.00"
+          step="0.05"
+          value="0.65"
+          disabled
+        >
+        <p class="small-print">
+          Lower strength preserves more of the reference image. Higher strength
+          allows greater changes. Image-to-image will be enabled once the
+          required encoder is connected.
+        </p>
+      </div>
+
+
       <div class="row">
         <div class="field">
           <label class="label" for="seed">Seed</label>
@@ -144,4 +184,4 @@
 <script src="js/config.js"></script>
 <script type="module" src="js/app.js"></script>
 </body>
-</html>
+</html>