[dyad] Added quality settings panel - wrote 1 file(s)

src/components/image-converter.tsx

@@ -30,6 +30,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Slider } from "@/components/ui/slider";
 
 export function ImageConverter() {
   const [images, setImages] = useState<File[]>([]);
@@ -38,6 +39,7 @@ export function ImageConverter() {
   const [width, setWidth] = useState<number | string>("");
   const [height, setHeight] = useState<number | string>("");
   const [format, setFormat] = useState<"png" | "jpeg" | "webp">("png");
+  const [quality, setQuality] = useState<number>(80);
   
   const [prefix, setPrefix] = useState<string>("");
   const [suffix, setSuffix] = useState<string>("");
@@ -168,7 +170,8 @@ export function ImageConverter() {
 
           if (ctx) {
             ctx.drawImage(img, 0, 0, Number(width), Number(height));
-            const dataUrl = canvas.toDataURL(`image/${format}`);
+            const mimeType = `image/${format}`;
+            const dataUrl = canvas.toDataURL(mimeType, format === 'png' ? undefined : quality / 100);
             const link = document.createElement("a");
             link.href = dataUrl;
             const finalFilename = generateFinalFilename(index);
@@ -213,7 +216,7 @@ export function ImageConverter() {
                 <div className="text-left">
                   <CardTitle>Image Settings</CardTitle>
                   <CardDescription className="mt-1">
-                    Adjust resolution and format for all uploaded images.
+                    Adjust resolution for all uploaded images.
                   </CardDescription>
                 </div>
               </AccordionTrigger>
@@ -229,17 +232,6 @@ export function ImageConverter() {
                       <Input id="height" type="number" placeholder="e.g., 1080" value={height} onChange={(e) => setHeight(e.target.value)} />
                     </div>
                   </div>
-                  <div className="space-y-2">
-                    <Label htmlFor="format">Format</Label>
-                    <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
-                      <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="png">PNG</SelectItem>
-                        <SelectItem value="jpeg">JPEG</SelectItem>
-                        <SelectItem value="webp">WEBP</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
                 </div>
                 <CardFooter className="px-0 pt-6 pb-0 flex justify-between">
                   <Button variant="outline" onClick={() => fileInputRef.current?.click()}><Upload className="mr-2 h-4 w-4" />Upload</Button>
@@ -302,6 +294,50 @@ export function ImageConverter() {
               </AccordionContent>
             </AccordionItem>
           </Card>
+
+          <Card>
+            <AccordionItem value="quality-settings" className="border-none">
+              <AccordionTrigger className="p-6 hover:no-underline">
+                <div className="text-left">
+                  <CardTitle>Quality Settings</CardTitle>
+                  <CardDescription className="mt-1">Choose format and compression level.</CardDescription>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="px-6 pb-6">
+                <div className="space-y-6">
+                  <div className="space-y-2">
+                    <Label htmlFor="format">Format</Label>
+                    <Select value={format} onValueChange={(value: "png" | "jpeg" | "webp") => setFormat(value)}>
+                      <SelectTrigger id="format"><SelectValue placeholder="Select format" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="png">PNG</SelectItem>
+                        <SelectItem value="jpeg">JPEG</SelectItem>
+                        <SelectItem value="webp">WEBP</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <Label htmlFor="quality">Quality</Label>
+                      <span className="text-sm text-muted-foreground">{quality}%</span>
+                    </div>
+                    <Slider
+                      id="quality"
+                      min={0}
+                      max={100}
+                      step={1}
+                      value={[quality]}
+                      onValueChange={(value) => setQuality(value[0])}
+                      disabled={format === 'png'}
+                    />
+                    {format === 'png' && (
+                      <p className="text-xs text-muted-foreground pt-1">Quality slider is disabled for PNG (lossless format).</p>
+                    )}
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          </Card>
         </Accordion>
       </div>