JPEG XL: Add lossy Modular option (#1136)

* Improve .gitattributes

* Add disabled checkbox style

* Update Makefile

* Update jxl_enc.cpp

* add -O3 flag to skia compilation for optimization's sake

* Bump libjxl revision to 9f544641ec83f6abd9da598bdd08178ee8a003e0

Change use of EncodeFile from `EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*aux=*/nullptr, pool_ptr)` to `EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*cms=*/nullptr, /*aux=*/jxl::GetJxlCms(), pool_ptr)`

* JPEG XL: Add lossy Modular option

Co-authored-by: CanadianBaconBoi <beamconnor@gmail.com>
Co-authored-by: CanadianBaconBoi <bc.bacon.bits@gmail.com>

.gitattributes

@@ -1,2 +1,2 @@
-/codecs/**/*.js linguist-generated=true
-/codecs/*/pkg*/*.d.ts linguist-generated=true
+/codecs/**/*.js linguist-generated -diff
+/codecs/*/pkg*/*.d.ts linguist-generated

codecs/jxl/Makefile

@@ -1,5 +1,5 @@
 CODEC_URL = https://github.com/libjxl/libjxl.git
-CODEC_VERSION = v0.5
+CODEC_VERSION = 9f544641ec83f6abd9da598bdd08178ee8a003e0
 CODEC_DIR = node_modules/jxl
 CODEC_BUILD_ROOT := $(CODEC_DIR)/build
 CODEC_MT_BUILD_DIR := $(CODEC_BUILD_ROOT)/mt
@@ -75,6 +75,9 @@ $(CODEC_MT_SIMD_BUILD_DIR)/Makefile: CXXFLAGS+=-msimd128
 	-DCMAKE_CROSSCOMPILING_EMULATOR=node \
 	-B $(@D) \
 	$(<D)
+	emcc -Wall -O3 -o $(CODEC_DIR)/third_party/skcms/skcms.cc.o -I$(CODEC_DIR)/third_party/skcms -c $(CODEC_DIR)/third_party/skcms/skcms.cc
+	llvm-ar rc $(CODEC_BUILD_DIR)/third_party/libskcms.a $(CODEC_DIR)/third_party/skcms/skcms.cc.o
+	rm $(CODEC_DIR)/third_party/skcms/skcms.cc.o
 
 $(CODEC_DIR)/CMakeLists.txt:
 	$(RM) -r $(@D)

codecs/jxl/enc/jxl_enc.cpp

@@ -4,6 +4,7 @@
 #include "lib/jxl/base/thread_pool_internal.h"
 #include "lib/jxl/enc_external_image.h"
 #include "lib/jxl/enc_file.h"
+#include "lib/jxl/enc_color_management.h"
 
 using namespace emscripten;
 
@@ -17,6 +18,7 @@ struct JXLOptions {
   bool lossyPalette;
   size_t decodingSpeedTier;
   float photonNoiseIso;
+  bool lossyModular;
 };
 
 val encode(std::string image, int width, int height, JXLOptions options) {
@@ -50,11 +52,16 @@ val encode(std::string image, int width, int height, JXLOptions options) {
   float quality = options.quality;
 
   // Quality settings roughly match libjpeg qualities.
-  if (quality < 7 || quality == 100) {
+  if (options.lossyModular || quality == 100) {
     cparams.modular_mode = true;
     // Internal modular quality to roughly match VarDCT size.
-    cparams.quality_pair.first = cparams.quality_pair.second =
-        std::min(35 + (quality - 7) * 3.0f, 100.0f);
+    if (quality < 7) {
+      cparams.quality_pair.first = cparams.quality_pair.second =
+          std::min(35 + (quality - 7) * 3.0f, 100.0f);
+    } else {
+      cparams.quality_pair.first = cparams.quality_pair.second =
+          std::min(35 + (quality - 7) * 65.f / 93.f, 100.0f);
+    }
   } else {
     cparams.modular_mode = false;
     if (quality >= 30) {
@@ -91,14 +98,14 @@ val encode(std::string image, int width, int height, JXLOptions options) {
       jxl::Span<const uint8_t>(reinterpret_cast<const uint8_t*>(image.data()), image.size()), width,
       height, jxl::ColorEncoding::SRGB(/*is_gray=*/false), /*has_alpha=*/true,
       /*alpha_is_premultiplied=*/false, /*bits_per_sample=*/8, /*endiannes=*/JXL_LITTLE_ENDIAN,
-      /*flipped_y=*/false, pool_ptr, main);
+      /*flipped_y=*/false, pool_ptr, main, /*(only true if bits_per_sample==32) float_in=*/false);
 
   if (!result) {
     return val::null();
   }
 
   auto js_result = val::null();
-  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, /*aux=*/nullptr, pool_ptr)) {
+  if (EncodeFile(cparams, &io, &passes_enc_state, &bytes, jxl::GetJxlCms(), /*aux=*/nullptr, pool_ptr)) {
     js_result = Uint8Array.new_(typed_memory_view(bytes.size(), bytes.data()));
   }
 
@@ -113,6 +120,7 @@ EMSCRIPTEN_BINDINGS(my_module) {
       .field("lossyPalette", &JXLOptions::lossyPalette)
       .field("decodingSpeedTier", &JXLOptions::decodingSpeedTier)
       .field("photonNoiseIso", &JXLOptions::photonNoiseIso)
+      .field("lossyModular", &JXLOptions::lossyModular)
       .field("epf", &JXLOptions::epf);
 
   function("encode", &encode);

codecs/jxl/enc/jxl_enc.d.ts

@@ -6,6 +6,7 @@ export interface EncodeOptions {
   lossyPalette: boolean;
   decodingSpeedTier: number;
   photonNoiseIso: number;
+  lossyModular: boolean;
 }
 
 export interface JXLModule extends EmscriptenWasm.Module {

libsquoosh/src/codecs.ts

@@ -419,6 +419,7 @@ export const codecs = {
       lossyPalette: false,
       decodingSpeedTier: 0,
       photonNoiseIso: 0,
+      lossyModular: false,
     },
     autoOptimize: {
       option: 'quality',

src/client/lazy-app/Compress/Options/Checkbox/index.tsx

@@ -11,7 +11,11 @@ export default class Checkbox extends Component<Props, State> {
     return (
       <div class={style.checkbox}>
         {props.checked ? (
-          <CheckedIcon class={`${style.icon} ${style.checked}`} />
+          props.disabled ? (
+            <CheckedIcon class={`${style.icon} ${style.disabled}`} />
+          ) : (
+            <CheckedIcon class={`${style.icon} ${style.checked}`} />
+          )
         ) : (
           <UncheckedIcon class={style.icon} />
         )}

src/client/lazy-app/Compress/Options/Checkbox/style.css

@@ -20,3 +20,7 @@
 .checked {
   fill: var(--main-theme-color);
 }
+
+.disabled {
+  fill: var(--dark-gray);
+}

src/features/encoders/jxl/client/index.tsx

@@ -30,6 +30,7 @@ interface State {
   autoEdgePreservingFilter: boolean;
   decodingSpeedTier: number;
   photonNoiseIso: number;
+  alternativeLossy: boolean;
 }
 
 export class Options extends Component<Props, State> {
@@ -55,6 +56,7 @@ export class Options extends Component<Props, State> {
       autoEdgePreservingFilter: options.epf === -1,
       decodingSpeedTier: options.decodingSpeedTier,
       photonNoiseIso: options.photonNoiseIso,
+      alternativeLossy: options.lossyModular,
     };
   }
 
@@ -96,6 +98,7 @@ export class Options extends Component<Props, State> {
           lossyPalette: optionState.lossless ? optionState.slightLoss : false,
           decodingSpeedTier: optionState.decodingSpeedTier,
           photonNoiseIso: optionState.photonNoiseIso,
+          lossyModular: optionState.quality < 7 ? true : optionState.alternativeLossy,
         };
 
         // Updating options, so we don't recalculate in getDerivedStateFromProps.
@@ -122,6 +125,7 @@ export class Options extends Component<Props, State> {
       autoEdgePreservingFilter,
       decodingSpeedTier,
       photonNoiseIso,
+      alternativeLossy,
     }: State,
   ) {
     // I'm rendering both lossy and lossless forms, as it becomes much easier when
@@ -162,6 +166,14 @@ export class Options extends Component<Props, State> {
                   Quality:
                 </Range>
               </div>
+              <label class={style.optionToggle}>
+                Alternative lossy mode
+                <Checkbox
+                  checked={quality < 7 ? true : alternativeLossy}
+                  disabled={quality < 7}
+                  onChange={this._inputChange('alternativeLossy', 'boolean')}
+                />
+              </label>
               <label class={style.optionToggle}>
                 Auto edge filter
                 <Checkbox
@@ -223,7 +235,7 @@ export class Options extends Component<Props, State> {
         </label>
         <div class={style.optionOneCell}>
           <Range
-            min="3"
+            min="1"
             max="9"
             value={effort}
             onInput={this._inputChange('effort', 'number')}

src/features/encoders/jxl/shared/meta.ts

@@ -25,4 +25,5 @@ export const defaultOptions: EncodeOptions = {
   lossyPalette: false,
   decodingSpeedTier: 0,
   photonNoiseIso: 0,
+  lossyModular: false,
 };