updated prompt form style

astriaai · Oct 29, 2024 · bc9935a · bc9935a
1 parent 760c7cf
commit bc9935a
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 96 deletions.
diff --git a/src/components/AdvancedControls.tsx b/src/components/AdvancedControls.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import AspectRatioSlider from "./AspectRatioSlider";
 import ControlNetSelector from "./ControlNetSelector";
 import { Switch } from "./ui/switch";
@@ -7,6 +7,8 @@ import ColorGradingSelector from "./ColorGradingSelector";
 interface AdvancedControlsProps {
   aspectRatio: string;
   setAspectRatio: (value: string) => void;
+  setWidth: (value: number) => void;
+  setHeight: (value: number) => void;
   controlNet: string;
   setControlNet: (value: string) => void;
   colorGrading: string;
@@ -23,6 +25,12 @@ interface AdvancedControlsProps {
   setFaceCorrect: (value: boolean) => void;
   faceSwap: boolean;
   setFaceSwap: (value: boolean) => void;
+  denoisingStrength: number;
+  setDenoisingStrength: (value: number) => void;
+  conditioningScale: number;
+  setConditioningScale: (value: number) => void;
+  numImages: number;
+  setNumImages: (value: number) => void;
 }
 
 export const AdvancedControls: React.FC<AdvancedControlsProps> = ({
@@ -44,61 +52,134 @@ export const AdvancedControls: React.FC<AdvancedControlsProps> = ({
   setFaceCorrect,
   faceSwap,
   setFaceSwap,
+  denoisingStrength,
+  setDenoisingStrength,
+  conditioningScale,
+  setConditioningScale,
+  numImages,
+  setNumImages,
+  setWidth,
+  setHeight,
 }) => {
+  const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 border rounded-lg shadow-md dark:bg-zinc-900 dark:border-zinc-800">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 border rounded-lg overflow-auto h-[400px] scrollbar shadow-lg dark:bg-zinc-900 dark:border-zinc-800">
       <AspectRatioSlider
         value={aspectRatio}
-        baseSize={300}
-        onChange={(value) => setAspectRatio(value)}
+        baseSize={1024}
+        onChange={(value, width, height) => {
+          setAspectRatio(value);
+          setWidth(width);
+          setHeight(height);
+        }}
         className="my-1"
       />
 
-      <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
-        {/* Control Net */}
+      <div className="grid grid-cols-1 gap-4">
         <ControlNetSelector value={controlNet} onChange={(model) => setControlNet(model)} />
-
-        {/* Color Grading */}
         <ColorGradingSelector value={colorGrading} onChange={(grading) => setColorGrading(grading)} />
 
-        {/* Super Resolution */}
-        <div className="flex items-center space-x-2">
-          <label className="text-sm font-medium">Super Resolution</label>
-          <Switch checked={superResolution} onCheckedChange={setSuperResolution} />
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+            Denoising Strength
+          </label>
+          <input
+            type="range"
+            min="0.0"
+            max="1.0"
+            step="0.01"
+            value={denoisingStrength}
+            onChange={(e) => setDenoisingStrength(parseFloat(e.target.value))}
+            className="col-span-2 w-3/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+          />
         </div>
 
-        {/* Film Grain */}
-        <div className="flex items-center space-x-2">
-          <label className="text-sm font-medium">Film Grain</label>
-          <Switch checked={filmGrain} onCheckedChange={setFilmGrain} />
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+            ControlNet Conditioning Scale
+          </label>
+          <input
+            type="range"
+            min="0.0"
+            max="1.0"
+            step="0.01"
+            value={conditioningScale}
+            onChange={(e) => setConditioningScale(parseFloat(e.target.value))}
+            className="col-span-2 w-3/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+          />
         </div>
 
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+            Super Resolution
+          </label>
+          <Switch className="col-span-2 justify-self-end" checked={superResolution} onCheckedChange={setSuperResolution} />
+        </div>
 
-        {/* High Resolution Fix */}
-        <div className="flex items-center space-x-2">
-          <label className="text-sm font-medium">Hi-Res Fix</label>
-          <Switch checked={hiresFix} onCheckedChange={setHiresFix} disabled={!superResolution} />
+        <div className="col-span-full flex justify-between items-center mt-6">
+          <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+            Show Advanced Options
+          </label>
+          <button onClick={() => setShowAdvancedOptions(!showAdvancedOptions)} className="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 text-sm">
+            {showAdvancedOptions ? "▼" : "▶"}
+          </button>
         </div>
 
+      </div>
+      <div></div>
+      {showAdvancedOptions && (
+        <div className="mt-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Inpaint Faces
+            </label>
+            <Switch className="justify-self-end" checked={inpaintFaces} onCheckedChange={setInpaintFaces} disabled={!superResolution} />
+          </div>
 
-        {/* Face Correct */}
-        <div className="flex items-center space-x-2">
-          <label className="text-sm font-medium">Face Correct</label>
-          <Switch checked={faceCorrect} onCheckedChange={setFaceCorrect} />
-        </div>
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Hi-Res Fix
+            </label>
+            <Switch className="justify-self-end" checked={hiresFix} onCheckedChange={setHiresFix} disabled={!superResolution} />
+          </div>
 
-        {/* Inpaint Faces */}
-        <div className="flex items-center space-x-2">
-          <label className="text-sm font-medium">Inpaint Faces</label>
-          <Switch checked={inpaintFaces} onCheckedChange={setInpaintFaces} disabled={!superResolution} />
-        </div>
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Number of Images
+            </label>
+            <input
+              type="number"
+              min="1"
+              max="8"
+              value={numImages}
+              onChange={(e) => setNumImages(parseInt(e.target.value, 10))}
+              className="col-span-2 border rounded-lg px-2 py-1 text-center bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Film Grain
+            </label>
+            <Switch className="justify-self-end" checked={filmGrain} onCheckedChange={setFilmGrain} />
+          </div>
 
-        {/* Face Swap */}
-        <div className="flex items-center space-x-2">
-          <label className="text-sm font-medium">Face Swap</label>
-          <Switch checked={faceSwap} onCheckedChange={setFaceSwap} />
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Face Correct
+            </label>
+            <Switch className="justify-self-end" checked={faceCorrect} onCheckedChange={setFaceCorrect} />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-semibold text-gray-700 dark:text-gray-200">
+              Face Swap
+            </label>
+            <Switch className="justify-self-end" checked={faceSwap} onCheckedChange={setFaceSwap} />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/src/components/AspectRatioSlider.tsx b/src/components/AspectRatioSlider.tsx
@@ -6,21 +6,22 @@ interface AspectRatioSliderProps {
   value?: string
   baseSize?: number
   className?: string
-  onChange?: (ratio: string) => void
+  onChange?: (ratio: string, width: number, height: number) => void
 }
 
 const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
   value,
-  baseSize = 300,
+  baseSize = 1024,
   className = '',
   onChange,
 }) => {
+  // Update to use the converted aspectData array with predefined aspect ratios
   const aspectRatios = [
     { ratio: '1:2', value: -5 },
-    { ratio: '9:16', value: -4 },   // Portrait
-    { ratio: '2:3', value: -3 },
-    { ratio: '3:4', value: -2 },
-    { ratio: '5:6', value: -1 },
+    { ratio: '13:25', value: -4 },
+    { ratio: '4:7', value: -3 },
+    { ratio: '3:5', value: -2 },
+    { ratio: '17:25', value: -1 },
     { ratio: '1:1', value: 0 },     // Square
     { ratio: '6:5', value: 1 },
     { ratio: '4:3', value: 2 },
@@ -32,10 +33,6 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
   const [sliderValue, setSliderValue] = useState(aspectRatios.find((r) => r.ratio === value)?.value || 0)
   const selectedRatio = aspectRatios.find((r) => r.value === sliderValue)?.ratio || '1:1'
 
-  const handleSliderChange = (value: number) => {
-    setSliderValue(value)
-    onChange?.(aspectRatios.find((r) => r.value === value)?.ratio || '1:1')
-  }
 
   const dimensions = useMemo(() => {
     const [width, height] = selectedRatio.split(':').map(Number)
@@ -47,6 +44,12 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
     }
   }, [selectedRatio, baseSize])
 
+  const handleSliderChange = (value: number) => {
+    setSliderValue(value)
+    onChange?.(aspectRatios.find((r) => r.value === value)?.ratio || '1:1',
+      dimensions.width, dimensions.height)
+  }
+
   const handleReset = () => {
     handleSliderChange(0)
   }
@@ -56,13 +59,6 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
       <div className="flex justify-between items-center mb-4">
         <h2 className="text-sm font-medium text-gray-800">Aspect Ratio</h2>
         <div className="flex items-center gap-2">
-          <div
-            className="border border-gray-300 rounded-md shadow-sm"
-            style={{
-              width: dimensions.width / 10,
-              height: dimensions.height / 10,
-            }}
-          />
           <Button
             variant="ghost"
             size="sm"
@@ -74,6 +70,25 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
         </div>
       </div>
 
+      <div style={{
+        width: '100%',
+        height: (baseSize / 12) + 'px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginBottom: '1rem',
+      }}>
+        <div
+          className="border border-gray-300 rounded-md shadow-sm"
+          style={{
+            width: dimensions.width / 12,
+            height: dimensions.height / 12,
+          }}
+        />
+      </div>
+
+
+
       <div className="flex justify-around gap-4 mb-6">
         {['Portrait', 'Square', 'Landscape'].map((label, index) => {
           const value = [-4, 0, 4][index]  // Matching values for Portrait, Square, and Landscape

diff --git a/src/components/ColorGradingSelector.tsx b/src/components/ColorGradingSelector.tsx
@@ -30,10 +30,11 @@ const ColorGradingSelector: React.FC<ColorGradingSelectorProps> = ({
   };
 
   return (
-    <div className={cn("color-grading-selector flex flex-col", className)}>
+    <div className={cn("color-grading-selector grid grid-cols-3 items-center", className)}>
       <label htmlFor="color-grading" className="text-gray-700 text-sm font-medium mb-2">
         Color Grading
       </label>
+      <div className="col-span-2">
       <Select
         onValueChange={handleValueChange}
         defaultValue={value}
@@ -49,6 +50,7 @@ const ColorGradingSelector: React.FC<ColorGradingSelectorProps> = ({
           ))}
         </SelectContent>
       </Select>
+      </div>
     </div>
   );
 };

diff --git a/src/components/ControlNetSelector.tsx b/src/components/ControlNetSelector.tsx
@@ -10,18 +10,9 @@ import {
 import { cn } from "@/lib/utils";
 
 const controlNetOptions = [
-  { label: 'Composition', value: 'composition' },
-  { label: 'Reference', value: 'reference' },
-  { label: 'Segroom', value: 'segroom' },
-  { label: 'IP Adapter', value: 'ipadapter' },
-  { label: 'Lineart', value: 'lineart' },
   { label: 'Canny', value: 'canny' },
   { label: 'Depth', value: 'depth' },
-  { label: 'MLSD', value: 'mlsd' },
-  { label: 'HED', value: 'hed' },
   { label: 'Pose', value: 'pose' },
-  { label: 'Tile', value: 'tile' },
-  { label: 'QR', value: 'qr' },
 ];
 
 interface ControlNetSelectorProps {
@@ -31,7 +22,7 @@ interface ControlNetSelectorProps {
 }
 
 const ControlNetSelector: React.FC<ControlNetSelectorProps> = ({
-  value = 'composition',
+  value = '',
   onChange,
   className = '',
 }) => {
@@ -40,27 +31,29 @@ const ControlNetSelector: React.FC<ControlNetSelectorProps> = ({
   };
 
   return (
-    <div className={cn("controlnet-selector", className)}>
-      <label htmlFor="controlnet" className="text-gray-700 text-sm font-medium mb-2 block">
+    <div className={cn("controlnet-selector grid grid-cols-3 items-center", className)}>
+      <label htmlFor="controlnet" className="text-gray-700 text-sm font-medium block">
         ControlNet
       </label>
-      <Select
-        onValueChange={handleValueChange}
-        defaultValue={value}
-      >
-        <SelectTrigger>
-          <SelectValue placeholder="Select a model..." />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            {controlNetOptions.map((option) => (
-              <SelectItem key={option.value} value={option.value}>
-                {option.label}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+      <div className="col-span-2">
+        <Select
+          onValueChange={handleValueChange}
+          defaultValue={value}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select a model..." />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {controlNetOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
   );
 };