From 2bdb19b59733d45f2ad00f69462af243f3360c3c Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Sat, 11 Oct 2025 11:41:41 +0000
Subject: [PATCH] Add more image editing filters and improve existing effects

Enhance image editor with new filters (vibrance, hue, gamma, vignette, incognito, athena, audrey) and refine the vintage effect implementation using Cloudinary transformations.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/mIWJXC9
---
 client/src/pages/image-editor.tsx | 112 +++++++++++++++++++++++++++++-
 1 file changed, 109 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/image-editor.tsx b/client/src/pages/image-editor.tsx
index 8adac37..aa4a96a 100644
--- a/client/src/pages/image-editor.tsx
+++ b/client/src/pages/image-editor.tsx
@@ -43,7 +43,11 @@ interface Filters {
   saturation: number;
   blur: number;
   sharpen: number;
-  effect: "none" | "grayscale" | "sepia" | "vintage";
+  vibrance: number;
+  hue: number;
+  gamma: number;
+  vignette: number;
+  effect: "none" | "grayscale" | "sepia" | "vintage" | "incognito" | "athena" | "audrey";
 }
 
 export default function ImageEditor() {
@@ -77,6 +81,10 @@ export default function ImageEditor() {
     saturation: 0,
     blur: 0,
     sharpen: 0,
+    vibrance: 0,
+    hue: 0,
+    gamma: 0,
+    vignette: 0,
     effect: "none"
   });
 
@@ -200,8 +208,43 @@ export default function ImageEditor() {
     if (filters.sharpen > 0) {
       transformations.push(`e_sharpen:${filters.sharpen * 100}`);
     }
+    if (filters.vibrance !== 0) {
+      transformations.push(`e_vibrance:${filters.vibrance}`);
+    }
+    if (filters.hue !== 0) {
+      transformations.push(`e_hue:${filters.hue}`);
+    }
+    if (filters.gamma !== 0) {
+      transformations.push(`e_gamma:${filters.gamma}`);
+    }
+    if (filters.vignette > 0) {
+      transformations.push(`e_vignette:${filters.vignette}`);
+    }
     if (filters.effect !== "none") {
-      transformations.push(`e_${filters.effect}`);
+      // Map effects to proper Cloudinary transformations
+      switch(filters.effect) {
+        case "grayscale":
+          transformations.push("e_grayscale");
+          break;
+        case "sepia":
+          transformations.push("e_sepia");
+          break;
+        case "vintage":
+          // Vintage effect: combine sepia + vignette + reduced saturation
+          transformations.push("e_sepia:50");
+          transformations.push("e_vignette:30");
+          transformations.push("e_saturation:-20");
+          break;
+        case "incognito":
+          transformations.push("e_art:incognito");
+          break;
+        case "athena":
+          transformations.push("e_art:athena");
+          break;
+        case "audrey":
+          transformations.push("e_art:audrey");
+          break;
+      }
     }
 
     // Note: Ribbon and price badge overlays are rendered as CSS elements in preview
@@ -603,7 +646,67 @@ export default function ImageEditor() {
                   </div>
 
                   <div className="space-y-2">
-                    <Label>Effet</Label>
+                    <div className="flex justify-between">
+                      <Label>Vibrance</Label>
+                      <span className="text-sm text-muted-foreground">{filters.vibrance}</span>
+                    </div>
+                    <Slider
+                      value={[filters.vibrance]}
+                      onValueChange={([value]) => setFilters({ ...filters, vibrance: value })}
+                      min={-100}
+                      max={100}
+                      step={10}
+                      data-testid="slider-vibrance"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex justify-between">
+                      <Label>Teinte</Label>
+                      <span className="text-sm text-muted-foreground">{filters.hue}°</span>
+                    </div>
+                    <Slider
+                      value={[filters.hue]}
+                      onValueChange={([value]) => setFilters({ ...filters, hue: value })}
+                      min={-180}
+                      max={180}
+                      step={10}
+                      data-testid="slider-hue"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex justify-between">
+                      <Label>Gamma</Label>
+                      <span className="text-sm text-muted-foreground">{filters.gamma}</span>
+                    </div>
+                    <Slider
+                      value={[filters.gamma]}
+                      onValueChange={([value]) => setFilters({ ...filters, gamma: value })}
+                      min={-50}
+                      max={150}
+                      step={10}
+                      data-testid="slider-gamma"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex justify-between">
+                      <Label>Vignette</Label>
+                      <span className="text-sm text-muted-foreground">{filters.vignette}</span>
+                    </div>
+                    <Slider
+                      value={[filters.vignette]}
+                      onValueChange={([value]) => setFilters({ ...filters, vignette: value })}
+                      min={0}
+                      max={100}
+                      step={10}
+                      data-testid="slider-vignette"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label>Effet artistique</Label>
                     <Select value={filters.effect} onValueChange={(value) => setFilters({ ...filters, effect: value as any })}>
                       <SelectTrigger data-testid="select-effect">
                         <SelectValue />
@@ -613,6 +716,9 @@ export default function ImageEditor() {
                         <SelectItem value="grayscale">Noir et blanc</SelectItem>
                         <SelectItem value="sepia">Sépia</SelectItem>
                         <SelectItem value="vintage">Vintage</SelectItem>
+                        <SelectItem value="incognito">Incognito</SelectItem>
+                        <SelectItem value="athena">Athena</SelectItem>
+                        <SelectItem value="audrey">Audrey</SelectItem>
                       </SelectContent>
                     </Select>
                   </div>