Add backend version control to advanced settings and update related c…

…omponents
astriaai · Nov 14, 2024 · 622f504 · 622f504
1 parent 0711916
commit 622f504
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 9 deletions.
diff --git a/src/components/PromptForm/AdvancedControls.tsx b/src/components/PromptForm/AdvancedControls.tsx
@@ -68,7 +68,7 @@ export const AdvancedControls = () => {
     const { controlNet, setControlNet, colorGrading, setColorGrading, filmGrain, setFilmGrain,
         superResolution, setSuperResolution, hiresFix, setHiresFix, inpaintFaces, setInpaintFaces,
         faceCorrect, setFaceCorrect, faceSwap, setFaceSwap, denoisingStrength, setDenoisingStrength,
-        conditioningScale, setConditioningScale, numImages, setNumImages, promptText, setPromptText, error, image, urlImage: imageUrl, controlNetTXT2IMG, setControlNetTXT2IMG
+        conditioningScale, setConditioningScale, numImages, setNumImages, promptText, setPromptText, error, image, urlImage: imageUrl, controlNetTXT2IMG, setControlNetTXT2IMG, backendVersion, setBackendVersion
     } = usePromptFormStore();
 
     return (
@@ -79,10 +79,10 @@ export const AdvancedControls = () => {
             />
 
             <div className={`md:row-span-2 scrollbar bg-gray-50 px-4 rounded-bl-lg rounded-br-lg md:rounded-bl-none md:rounded-r-lg order-3 md:order-2`}>
-                <div className="flex justify-between items-center mb-1 py-3">
+                <div className="flex justify-between items-center mb-[3px] py-2">
                     <h2 className="text-sm font-medium text-gray-800">Advance Settings</h2>
                 </div>
-                <div className="space-y-[5px]">
+                <div className="space-y-[4px]">
                     <AddLoraText onSelect={(tune) => {
                         setPromptText(`<lora:${tune.id}:1> ${promptText}`);
                     }} onRemove={(loraText) => {
@@ -100,7 +100,22 @@ export const AdvancedControls = () => {
                 </div>
 
                 {showAdvancedOptions && (
-                    <div className="space-y-[5px]">
+                    <div className="space-y-[4px]">
+                        <div className="flex items-center justify-between">
+                            <label className="text-sm font-[400] text-gray-700 dark:text-gray-200">
+                                Backend Version
+                            </label>
+                            <select 
+                                className="col-span-2 border rounded-full h-6 py-0 px-2 text-center bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200"
+                                onChange={(e) => setBackendVersion(e.target.value)}
+                                value={backendVersion}
+                            >
+                                <option value="0">0 - Stable</option>
+                                <option value="1">1 - BETA</option>
+                            </select>
+                            {error?.backend_version && <p className="text-red-500 text-xs ml-2">{error.backend_version.join(" ")}</p>}
+                        </div>
+                        <hr className="border-t border-gray-200 dark:border-gray-700 m-0 p-0" />
                         <SwitchInput label="Inpaint Faces" checked={inpaintFaces} onCheckedChange={setInpaintFaces} disabled={!superResolution} error={error?.inpaint_faces?.join(" ")} />
                         <hr className="border-t border-gray-200 dark:border-gray-700 m-0 p-0" />
                         <SwitchInput label="Hi-Res Fix" checked={hiresFix} onCheckedChange={setHiresFix} disabled={!superResolution} error={error?.hires_fix?.join(" ")} />

diff --git a/src/components/PromptForm/AspectRatioSlider.tsx b/src/components/PromptForm/AspectRatioSlider.tsx
@@ -88,7 +88,7 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
 
   return (
     <div className={`w-full ${className} p-4 bg-gray-50`}>
-      <div className="flex justify-between items-center mb-4">
+      <div className="flex justify-between items-center">
         <h2 className="text-sm font-medium text-gray-800">Aspect Ratio</h2>
         <div className="flex items-center gap-2">
           <div style={{ height: `${baseSize / 25}px`, display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '1rem' }}>
@@ -97,7 +97,7 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
           <Button variant="ghost" size="sm" onClick={handleReset} className="text-sm text-gray-600 hover:text-gray-900 transition">Reset</Button>
         </div>
       </div>
-      <div className="grid grid-cols-3 mb-5 bg-gray-200 rounded-full">
+      <div className="grid grid-cols-3 mb-2 bg-gray-200 rounded-full">
         {['Portrait', 'Square', 'Landscape'].map((label, index) => {
           const value = [-4, 0, 4][index];
           return (
@@ -113,7 +113,7 @@ const AspectRatioSlider: React.FC<AspectRatioSliderProps> = ({
           );
         })}
       </div>
-      <hr className="my-4 border-gray-200" />
+      <hr className="my-3 border-gray-200" />
       <BidirectionalSlider value={sliderValue} max={5} step={1} onValueChange={handleSliderChange} className="mb-4" />
       <div className="flex justify-between text-sm text-gray-600">
         <span>{`${dimensions.width} × ${dimensions.height}px`}</span>

diff --git a/src/hooks/usePromptSubmit.ts b/src/hooks/usePromptSubmit.ts
@@ -12,6 +12,7 @@ export const usePromptSubmit = () => {
     controlNet,
     colorGrading,
     controlNetTXT2IMG,
+    backendVersion,
     filmGrain,
     superResolution,
     hiresFix,
@@ -32,7 +33,7 @@ export const usePromptSubmit = () => {
   const extractPromptText = (text: string) => {
     const allowedKeys = new Set([
       'controlnet', 'color_grading', 'super_resolution', 'hires_fix', 'inpaint_faces',
-      'face_correct', 'face_swap', 'ar', 'denoising_strength', 'controlnet_conditioning_scale', 'controlnet_txt2img', 'num_images', 'w', 'h', 'input_image', 'film_grain'
+      'face_correct', 'face_swap', 'ar', 'denoising_strength', 'controlnet_conditioning_scale', 'controlnet_txt2img', 'num_images', 'w', 'h', 'input_image', 'film_grain', 'backend_version'
     ]);
     return text
       .split(' ')
@@ -68,7 +69,7 @@ export const usePromptSubmit = () => {
         num_images: numImages,
         w: width,
         h: height,
-        backend_version: "0",
+        backend_version: backendVersion,
       };
 
       // Append each entry in `promptData` to formData

diff --git a/src/store/promptFormStore.ts b/src/store/promptFormStore.ts
@@ -39,6 +39,8 @@ export const usePromptFormStore = create<PromptFormState>((set) => ({
   setFaceSwap: (faceSwap) => set({ faceSwap }),
 
   // Advanced settings
+  backendVersion: '0',
+  setBackendVersion: (backendVersion) => set({ backendVersion }),
   denoisingStrength: 0.8,
   setDenoisingStrength: (denoisingStrength) => set({ denoisingStrength }),
   conditioningScale: 0.8,

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -40,6 +40,7 @@ export interface Prompt {
   mask_image: string | null;
   controlnet: string;
   use_lpw: boolean;
+  backend_version: string;
 }
 
 export interface Tune {
@@ -118,6 +119,8 @@ export interface PromptFormState {
   faceSwap: boolean;
   setFaceSwap: (faceSwap: boolean) => void;
 
+  backendVersion: string;
+  setBackendVersion: (backendVersion: string) => void;
   denoisingStrength: number;
   setDenoisingStrength: (denoisingStrength: number) => void;
   conditioningScale: number;