3.0.1 - Pre-Release UI Fixes (#4001)

## What type of PR is this? (check all applicable)

- [x] Feature

## Have you discussed this change with the InvokeAI team?
- [x] Yes

      
## Description

- Update the Aspect Ratio tags to show the aspect ratio values rather
than Wide / Square and etc.
- Updated Lora Input to take values between -50 and 50 coz I found some
LoRA that are actually trained to work until -25 and +15 too. So these
input caps should mostly suffice. If there's ever a LoRA that goes
bonkers on that, we can change it.
- Fixed LoRA's being sorted the wrong way in Lora Select.
- Fixed Embeddings being sorted the wrong way in Embedding Select.


## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -114,6 +114,11 @@ const IAISlider = (props: IAIFullSliderProps) => {
     setLocalInputValue(value);
   }, [value]);
 
+  const numberInputMin = useMemo(
+    () => (sliderNumberInputProps?.min ? sliderNumberInputProps.min : min),
+    [min, sliderNumberInputProps?.min]
+  );
+
   const numberInputMax = useMemo(
     () => (sliderNumberInputProps?.max ? sliderNumberInputProps.max : max),
     [max, sliderNumberInputProps?.max]
@@ -129,24 +134,23 @@ const IAISlider = (props: IAIFullSliderProps) => {
   const handleInputBlur = useCallback(
     (e: FocusEvent<HTMLInputElement>) => {
       if (e.target.value === '') {
-        e.target.value = String(min);
+        e.target.value = String(numberInputMin);
       }
       const clamped = clamp(
         isInteger
           ? Math.floor(Number(e.target.value))
           : Number(localInputValue),
-        min,
+        numberInputMin,
         numberInputMax
       );
       const quantized = roundDownToMultiple(clamped, step);
       onChange(quantized);
       setLocalInputValue(quantized);
     },
-    [isInteger, localInputValue, min, numberInputMax, onChange, step]
+    [isInteger, localInputValue, numberInputMin, numberInputMax, onChange, step]
   );
 
   const handleInputChange = useCallback((v: number | string) => {
-    console.log('input');
     setLocalInputValue(v);
   }, []);
 
@@ -310,7 +314,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
 
         {withInput && (
           <NumberInput
-            min={min}
+            min={numberInputMin}
             max={numberInputMax}
             step={step}
             value={localInputValue}

invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingPopover.tsx

@@ -57,6 +57,11 @@ const ParamEmbeddingPopover = (props: Props) => {
       });
     });
 
+    // Sort Alphabetically
+    data.sort((a, b) =>
+      a.label && b.label ? (a.label?.localeCompare(b.label) ? -1 : 1) : -1
+    );
+
     return data.sort((a, b) => (a.disabled && !b.disabled ? 1 : -1));
   }, [embeddingQueryData, currentMainModel?.base_model]);
 

invokeai/frontend/web/src/features/lora/components/ParamLora.tsx

@@ -48,6 +48,7 @@ const ParamLora = (props: Props) => {
         handleReset={handleReset}
         withSliderMarks
         sliderMarks={[-1, 0, 1, 2]}
+        sliderNumberInputProps={{ min: -50, max: 50 }}
       />
       <IAIIconButton
         size="sm"

invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx

@@ -54,7 +54,12 @@ const ParamLoRASelect = () => {
       });
     });
 
-    return data.sort((a, b) => (a.disabled && !b.disabled ? 1 : -1));
+    // Sort Alphabetically
+    data.sort((a, b) =>
+      a.label && b.label ? (a.label?.localeCompare(b.label) ? 1 : -1) : -1
+    );
+
+    return data.sort((a, b) => (a.disabled && !b.disabled ? -1 : 1));
   }, [loras, loraModels, currentMainModel?.base_model]);
 
   const handleChange = useCallback(

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamAspectRatio.tsx

@@ -7,9 +7,9 @@ import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
 
 const aspectRatios = [
   { name: 'Free', value: null },
-  { name: 'Portrait', value: 0.67 / 1 },
-  { name: 'Wide', value: 16 / 9 },
-  { name: 'Square', value: 1 / 1 },
+  { name: '2:3', value: 2 / 3 },
+  { name: '16:9', value: 16 / 9 },
+  { name: '1:1', value: 1 / 1 },
 ];
 
 export default function ParamAspectRatio() {