fixes

Author: hanakla

pkgs/ai-deno/effect-checker/index.html

@@ -18,6 +18,10 @@
     <div style="display: flex; padding: 8px">
       <div id="controls" style="flex: none"></div>
       <div>
+        <div>
+          <button type="button" id="img-source-1">Source 1</button>
+          <button type="button" id="img-source-2">Source 2</button>
+        </div>
         <span
           id="size-label"
           style="

pkgs/ai-deno/effect-checker/public/source2.png

@@ -23,13 +23,18 @@ import { vhsInterlace } from "~ext/live-effects/vhs-interlace.ts";
 import { dataMosh } from "~ext/live-effects/data-mosh.ts";
 import { waveDistortion } from "~ext/live-effects/wave-distortion.ts";
 import { selectiveColorCorrection } from "~ext/live-effects/selective-color-correction.ts";
+import { husky } from "~ext/live-effects/husky.ts";
+import { cosmicWaves } from "~ext/live-effects/extra/cosmic-waves.ts";
 
 import { compressor } from "~ext/live-effects/wips/compressor.ts";
 import { imageReverbGPU } from "~ext/live-effects/wips/image-reverb-gpu.ts";
 import { imageReverb } from "~ext/live-effects/wips/image-reverb.ts";
 import { exprTube } from "~ext/live-effects/wips/tube.ts";
 
 const plugins = [
+  chromaticAberration,
+  husky,
+  cosmicWaves,
   exprTube,
   gaussianBlur,
   dithering,
@@ -50,7 +55,6 @@ const plugins = [
   outline,
   // innerGlow,
   testBlueFill,
-  chromaticAberration,
   directionalBlur,
 ];
 
@@ -92,6 +96,7 @@ function Controls({
   const [params, setParams] = useState<any>(getInitialParams(currentPlugin));
   const [dpi, setDpi] = useState(72);
   const [paused, setPaused] = useState(false);
+  const [isPreviewMode, setPreviewMode] = useState(false);
 
   const pausedRef = useThroughRef(paused);
   const paramsRef = useThroughRef(params);
@@ -105,9 +110,32 @@ function Controls({
   useEffect(() => {
     setParams(getInitialParams(currentPlugin));
 
+    const source1Btn = document.getElementById("img-source-1")!;
+    const source2Btn = document.getElementById("img-source-2")!;
+
     const abort = new AbortController();
     const signal = abort.signal;
 
+    source1Btn.addEventListener(
+      "click",
+      async () => {
+        const response = await fetch("./source.png");
+        const blob = await response.blob();
+        await onLoadImage(blob);
+      },
+      { signal }
+    );
+
+    source2Btn.addEventListener(
+      "click",
+      async () => {
+        const response = await fetch("./source2.png");
+        const blob = await response.blob();
+        await onLoadImage(blob);
+      },
+      { signal }
+    );
+
     window.addEventListener("dragover", (e) => e.preventDefault(), { signal });
 
     window.addEventListener(
@@ -204,6 +232,7 @@ function Controls({
         {
           dpi: dpiRef.current,
           baseDpi: 72,
+          isInPreview: isPreviewMode,
         }
       );
       if (signal.aborted) return;
@@ -256,7 +285,7 @@ function Controls({
       cancelAnimationFrame(animId);
       abort.abort();
     };
-  }, [currentPlugin]);
+  }, [currentPlugin, isPreviewMode]);
 
   const onParamChanged = useEventCallback((key, value) => {
     const nextParams = { ...params, [key]: value };
@@ -505,6 +534,15 @@ function Controls({
         </select>
       </label>
 
+      <label>
+        <input
+          type="checkbox"
+          checked={isPreviewMode}
+          onChange={(e) => setPreviewMode(e.currentTarget.checked)}
+        />
+        Preview mode
+      </label>
+
       <button
         onClick={() => {
           pausedRef.current = !pausedRef.current;