[posterize] integrate with new grayscale and sigma options

src/apps/posterize/pages/PosterizePage.module.css

@@ -54,6 +54,63 @@
   text-align: center;
 }
 
+.controls {
+  margin-bottom: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  text-align: left;
+}
+
+.control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.control label {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #333;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.control input[type="checkbox"] {
+  margin-right: 0.5rem;
+}
+
+.slider {
+  width: 100%;
+  margin-top: 0.5rem;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  background: #ddd;
+  border-radius: 3px;
+  outline: none;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  background: #007bff;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  background: #007bff;
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
 .blurButton {
   padding: 0.75rem 2rem;
   background: #007bff;
@@ -258,4 +315,12 @@
     width: 100%;
     padding: 0.75rem;
   }
+
+  .controls {
+    gap: 0.75rem;
+  }
+
+  .control label {
+    font-size: 0.9rem;
+  }
 }

src/apps/posterize/pages/PosterizePage.tsx

@@ -16,6 +16,8 @@ const PosterizePage = () => {
   const [blurredImage, setBlurredImage] = useState<BlurResponse | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [gray, setGray] = useState(false)
+  const [sigma, setSigma] = useState(8.0)
 
   const handleImageSelect = (base64: string) => {
     setSelectedImage(base64)
@@ -47,7 +49,9 @@ const PosterizePage = () => {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          b64_png: selectedImage
+          b64_png: selectedImage,
+          gray: gray,
+          ...(gray ? {} : { sigma: sigma })
         }),
       })
 
@@ -132,6 +136,36 @@ const PosterizePage = () => {
 
           {selectedImage && (
             <div className={styles.actions}>
+              <div className={styles.controls}>
+                <div className={styles.control}>
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={gray}
+                      onChange={(e) => setGray(e.target.checked)}
+                    />
+                    Grayscale blur
+                  </label>
+                </div>
+
+                {!gray && (
+                  <div className={styles.control}>
+                    <label>
+                      Sigma: {sigma.toFixed(1)}
+                      <input
+                        type="range"
+                        min="2.0"
+                        max="20.0"
+                        step="0.5"
+                        value={sigma}
+                        onChange={(e) => setSigma(parseFloat(e.target.value))}
+                        className={styles.slider}
+                      />
+                    </label>
+                  </div>
+                )}
+              </div>
+
               <button
                 onClick={handleBlur}
                 disabled={isLoading}

src/apps/tracy/pages/TracyPage.tsx

@@ -139,7 +139,8 @@ const TracyPage = () => {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          b64_png: imageData.base64_png
+          b64_png: imageData.base64_png,
+          gray: true
         }),
       })