Spaces:

n-Arno
/

pixelate

Running

App Files Files Community

n-Arno commited on Sep 30, 2025

Commit

21cca8e

verified ·

1 Parent(s): 8ed2e95

Update index.html

Browse files

Added options to choose quantization method and enabling dithering and kmeans
Plus, switch to simplecss for a better looking interface.

Files changed (1) hide show

index.html +31 -22

index.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <script src="https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js"></script>
   <style>
     body {
-      margin: 0;
-      font-family: sans-serif;
     }
     .editor {
@@ -16,11 +16,11 @@
     .toolbar {
       width: 500px;
-      background: #eeeeee;
     }
     .toolbar-item {
       padding: 15px;
     }
     .tool-label {
@@ -37,7 +37,6 @@
     .image-area {
       flex-grow: 1;
       padding: 20px;
-      background: #555555;
     }
     #canvas {
@@ -53,22 +52,32 @@
     <div class="toolbar-item">
       <input type="file" id="imageFileInput">
     </div>
     <div class="toolbar-item">
-      <button id="reloadBtn" onclick="loadImage()" disabled>Reload original</button>
     </div>
     <div class="toolbar-item">
-      <label class="tool-label" for="scale">Scale</label>
-      <input class="tool-input" type="range" id="scale" min="2" max="16" value="4" step="2" oninput="this.nextElementSibling.value = this.value">>
-      <output>4</output>
     </div>
     <div class="toolbar-item">
-      <label class="tool-label" for="colors">Colors</label>
-      <input class="tool-input" type="range" id="colors" min="4" max="256" value="16" step="2" oninput="this.nextElementSibling.value = this.value">>
-      <output>16</output>
     </div>
     <div class="toolbar-item">
-      <input type="checkbox" id="quant" name="quant" checked />
-      <label for="quant">Quantize colors</label>
     </div>
     <div class="toolbar-item">
       <input type="checkbox" id="rgb555" name="rgb555" checked />
@@ -82,10 +91,12 @@
       <input type="checkbox" id="rescale" name="rescale" checked />
       <label for="rescale">Rescale post-processing</label>
     </div>
-</fieldset>
     <div class="toolbar-item">
       <button onclick="pixelize()">Run</button>
     </div>
     <div class="toolbar-item">
       <textarea id="consoleOutput" style="width: 465px;" rows="20" disabled></textarea>
     </div>
@@ -128,7 +139,7 @@ function addToOutput(s) {
 async function main() {
   let pyodide = await loadPyodide();
   await pyodide.loadPackage("numpy");
-  await pyodide.loadPackage("https://huggingface.co/spaces/n-Arno/pixelate/resolve/main/pillow-10.2.0-cp312-cp312-pyodide_2024_0_wasm32.whl");
   return pyodide;
 }
@@ -144,7 +155,7 @@ async function pixelize() {
   pyodide.runPython(`
     import numpy as np
     from PIL import Image
-    from js import canvas, scale, colors, quant, rgb555, snescrop, rescale, addToOutput, ImageData
     from pyodide.ffi import create_proxy
     # Access to canvas content
@@ -178,12 +189,10 @@ async function pixelize() {
     addToOutput(f"Resized by scale {s} to ({w},{h})")
     # Reduce or quantize colors
-    if quant.checked:
-        im = im.quantize(colors=int(colors.value),method=Image.Quantize.LIBIMAGEQUANT).convert('RGBA')
-        addToOutput(f"Quantized to {colors.value} colors")
-    else:
-        im = im.convert('RGB').quantize(colors=int(colors.value),method=Image.Quantize.MEDIANCUT).convert('RGBA')
-        addToOutput(f"Reduced to {colors.value} colors")
     # Apply RGB555
     if rgb555.checked:

 <html>
 <head>
   <script src="https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js"></script>
+  <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
   <style>
     body {
+      grid-template-columns: none !important;
     }
     .editor {
     .toolbar {
       width: 500px;
     }
     .toolbar-item {
       padding: 15px;
+      display: inline-block;
     }
     .tool-label {
     .image-area {
       flex-grow: 1;
       padding: 20px;
     }
     #canvas {
     <div class="toolbar-item">
       <input type="file" id="imageFileInput">
     </div>
     <div class="toolbar-item">
+      <label class="tool-label" for="scale">Scale (4)</label>
+      <input class="tool-input" type="range" id="scale" min="2" max="16" value="4" step="2" oninput="this.previousElementSibling.innerHTML = 'Scale (' + this.value + ')'">
+    </div>
+    <div class="toolbar-item">
+      <label class="tool-label" for="colors">Colors (16)</label>
+      <input class="tool-input" type="range" id="colors" min="4" max="256" value="16" step="2" oninput="this.previousElementSibling.innerHTML = 'Colors (' + this.value + ')'">
     </div>
+    <br />
     <div class="toolbar-item">
+      <label for="quant">Quantization method:</label><!-- https://pillow.readthedocs.io/en/stable/_modules/PIL/Image.html#Quantize -->
+      <select name="quant" id="quant">
+          <option value="3">LibImageQuant</option>
+          <option value="0">MedianCut</option>
+          <option value="2">FastOctree</option>
+          <option value="1">MaxCoverage</option>
+       </select>
     </div>
     <div class="toolbar-item">
+      <input type="checkbox" id="dither" name="dither" checked />
+      <label for="dither">Enable Dithering</label>
     </div>
     <div class="toolbar-item">
+      <input type="checkbox" id="kmeans" name="kmeans" />
+      <label for="kmeans">Enable K-Means</label>
     </div>
     <div class="toolbar-item">
       <input type="checkbox" id="rgb555" name="rgb555" checked />
       <input type="checkbox" id="rescale" name="rescale" checked />
       <label for="rescale">Rescale post-processing</label>
     </div>
     <div class="toolbar-item">
       <button onclick="pixelize()">Run</button>
     </div>
+    <div class="toolbar-item">
+      <button id="reloadBtn" onclick="loadImage()" disabled>Reload original</button>
+    </div>
     <div class="toolbar-item">
       <textarea id="consoleOutput" style="width: 465px;" rows="20" disabled></textarea>
     </div>
 async function main() {
   let pyodide = await loadPyodide();
   await pyodide.loadPackage("numpy");
+  await pyodide.loadPackage("./pillow-10.2.0-cp312-cp312-pyodide_2024_0_wasm32.whl");
   return pyodide;
 }
   pyodide.runPython(`
     import numpy as np
     from PIL import Image
+    from js import canvas, scale, colors, quant, dither, kmeans, rgb555, snescrop, rescale, addToOutput, ImageData
     from pyodide.ffi import create_proxy
     # Access to canvas content
     addToOutput(f"Resized by scale {s} to ({w},{h})")
     # Reduce or quantize colors
+    dither_method = Image.Dither.FLOYDSTEINBERG if dither.checked else Image.Dither.NONE
+    kmeans_colors = int(colors.value) if kmeans.checked else 0
+    im = im.convert('RGB').quantize(colors=int(colors.value), method=int(quant.value), dither=dither_method, kmeans=kmeans_colors).convert('RGBA')
+    addToOutput(f"Quantized to {colors.value} colors")
     # Apply RGB555
     if rgb555.checked: