Merge pull request #1059 from ogmaresca/allow-lossless-webp

Allow saving lossless WEBPs

ui/easydiffusion/renderer.py

@@ -147,7 +147,7 @@ def filter_images(task_data: TaskData, images: list, user_stopped):
 def construct_response(images: list, seeds: list, task_data: TaskData, base_seed: int):
     return [
         ResponseImage(
-            data=img_to_base64_str(img, task_data.output_format, task_data.output_quality),
+            data=img_to_base64_str(img, task_data.output_format, task_data.output_quality, task_data.output_lossless),
             seed=seed,
         )
         for img, seed in zip(images, seeds)

ui/easydiffusion/types.py

@@ -43,6 +43,7 @@ class TaskData(BaseModel):
     block_nsfw: bool = False
     output_format: str = "jpeg"  # or "png" or "webp"
     output_quality: int = 75
+    output_lossless: bool = False
     metadata_output_format: str = "txt"  # or "json"
     stream_image_progress: bool = False
     stream_image_progress_interval: int = 5

ui/easydiffusion/utils/save_utils.py

@@ -45,6 +45,7 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
             file_name=make_filename,
             output_format=task_data.output_format,
             output_quality=task_data.output_quality,
+            output_lossless=task_data.output_lossless,
         )
         if task_data.metadata_output_format.lower() in ["json", "txt", "embed"]:
             save_dicts(
@@ -63,6 +64,7 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
             file_name=make_filename,
             output_format=task_data.output_format,
             output_quality=task_data.output_quality,
+            output_lossless=task_data.output_lossless,
         )
         save_images(
             filtered_images,
@@ -70,6 +72,7 @@ def save_images_to_disk(images: list, filtered_images: list, req: GenerateImageR
             file_name=make_filter_filename,
             output_format=task_data.output_format,
             output_quality=task_data.output_quality,
+            output_lossless=task_data.output_lossless,
         )
         if task_data.metadata_output_format.lower() in ["json", "txt", "embed"]:
             save_dicts(

ui/index.html

@@ -237,6 +237,9 @@
                             <option value="png">png</option>
                             <option value="webp">webp</option>
                         </select>
+                        <span id="output_lossless_container">
+                            <input id="output_lossless" name="output_lossless" type="checkbox"><label for="output_lossless">Lossless</label></td></tr>
+                        </span>
                     </td></tr>
                     <tr class="pl-5" id="output_quality_row"><td><label for="output_quality">Image Quality:</label></td><td>
                     <input id="output_quality_slider" name="output_quality" class="editor-slider" value="75" type="range" min="10" max="95"> <input id="output_quality" name="output_quality" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)">

ui/media/js/auto-save.js

@@ -26,6 +26,7 @@ const SETTINGS_IDS_LIST = [
     "lora_alpha",
     "output_format",
     "output_quality",
+    "output_lossless",
     "negative_prompt",
     "stream_image_progress",
     "use_face_correction",

ui/media/js/engine.js

@@ -744,6 +744,7 @@
         "block_nsfw": false,
         "output_format": "png",
         "output_quality": 75,
+        "output_lossless": false,
     }
     const TASK_OPTIONAL = {
         "device": 'string',
@@ -755,6 +756,7 @@
         "use_vae_model": 'string',
         "use_hypernetwork_model": 'string',
         "hypernetwork_strength": 'number',
+        "output_lossless": 'boolean',
     }
 
     // Higer values will result in...

ui/media/js/main.js

@@ -50,6 +50,8 @@ let loraModelField = new ModelDropdown(document.querySelector('#lora_model'), 'l
 let loraAlphaSlider = document.querySelector('#lora_alpha_slider')
 let loraAlphaField = document.querySelector('#lora_alpha')
 let outputFormatField = document.querySelector('#output_format')
+let outputLosslessField = document.querySelector('#output_lossless')
+let outputLosslessContainer = document.querySelector('#output_lossless_container')
 let blockNSFWField = document.querySelector('#block_nsfw')
 let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
 let updateBranchLabel = document.querySelector("#updateBranchLabel")
@@ -1057,6 +1059,7 @@ function getCurrentUserRequest() {
             block_nsfw: blockNSFWField.checked,
             output_format: outputFormatField.value,
             output_quality: parseInt(outputQualityField.value),
+            output_lossless: outputLosslessField.checked,
             metadata_output_format: metadataOutputFormatField.value,
             original_prompt: promptField.value,
             active_tags: (activeTags.map(x => x.name)),
@@ -1496,13 +1499,26 @@ outputQualitySlider.addEventListener('input', updateOutputQuality)
 outputQualityField.addEventListener('input', debounce(updateOutputQualitySlider, 1500))
 updateOutputQuality()
 
-outputFormatField.addEventListener('change', e => {
+function updateOutputQualityVisibility() {
-    if (outputFormatField.value === 'png') {
+    if (outputFormatField.value === 'webp') {
+        outputLosslessContainer.style.display = 'unset'
+        if (outputLosslessField.checked) {
+            outputQualityRow.style.display='none'
+        } else {
+            outputQualityRow.style.display='table-row'
+        }
+    }
+    else if (outputFormatField.value === 'png') {
         outputQualityRow.style.display='none'
+        outputLosslessContainer.style.display = 'none'
     } else {
         outputQualityRow.style.display='table-row'
+        outputLosslessContainer.style.display = 'none'
     }
-})
+}
+
+outputFormatField.addEventListener('change', updateOutputQualityVisibility)
+outputLosslessField.addEventListener('change', updateOutputQualityVisibility)
 /********************* Zoom Slider **********************/
 thumbnailSizeField.addEventListener('change', () => {
     (function (s) {