remove opacity logic from WavyLine, add badge explaining disabled state, add translations

invokeai/frontend/web/public/locales/en.json

@@ -997,6 +997,7 @@
         "controlNetControlMode": "Control Mode",
         "copyImage": "Copy Image",
         "denoisingStrength": "Denoising Strength",
+        "noRasterLayers": "No Raster Layers",
         "downloadImage": "Download Image",
         "general": "General",
         "guidance": "Guidance",

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

@@ -1,7 +1,6 @@
-
-const WavyLine = ({ waviness, isDisabled }: {waviness: number, isDisabled: boolean}) => {
-  const width = 60; // Width of the SVG
-  const height = 28; // Height of the SVG
+const WavyLine = ({ waviness }: { waviness: number }) => {
+  const width = 40; // Width of the SVG
+  const height = 14; // Height of the SVG
   const segments = 5; // Number of segments in the line (more segments = smoother wave)
 
   // Calculate the path dynamically based on waviness
@@ -26,8 +25,8 @@ const WavyLine = ({ waviness, isDisabled }: {waviness: number, isDisabled: boole
   };
 
   return (
-    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg" opacity={isDisabled ? 0.5 : 1}>
-      <path d={generatePath()} fill="none" stroke="#4299e1" strokeWidth="6" />
+    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} xmlns="http://www.w3.org/2000/svg">
+      <path d={generatePath()} fill="none" stroke="#4299e1" strokeWidth="3" />
     </svg>
   );
 };

invokeai/frontend/web/src/features/controlLayers/components/ParamDenoisingStrength.tsx

@@ -1,12 +1,12 @@
-import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { Badge, Box, CompositeNumberInput, CompositeSlider, Flex, FormControl, FormLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import WavyLine from 'common/components/WavyLine';
 import { selectImg2imgStrength, setImg2imgStrength } from 'features/controlLayers/store/paramsSlice';
+import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import { selectImg2imgStrengthConfig } from 'features/system/store/configSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { selectCanvasSlice } from '../store/selectors';
-import WavyLine from '../../../common/components/WavyLine';
 
 const marks = [0, 0.5, 1];
 
@@ -14,10 +14,11 @@ export const ParamDenoisingStrength = memo(() => {
   const img2imgStrength = useAppSelector(selectImg2imgStrength);
   const dispatch = useAppDispatch();
   const isEnabled = useAppSelector(
-    (s) => selectCanvasSlice(s).rasterLayers.entities.length > 0 && selectCanvasSlice(s).rasterLayers.entities.some(layer => layer.isEnabled)
+    (s) =>
+      selectCanvasSlice(s).rasterLayers.entities.length > 0 &&
+      selectCanvasSlice(s).rasterLayers.entities.some((layer) => layer.isEnabled)
   );
 
-
   const onChange = useCallback(
     (v: number) => {
       dispatch(setImg2imgStrength(v));
@@ -29,30 +30,44 @@ export const ParamDenoisingStrength = memo(() => {
   const { t } = useTranslation();
 
   return (
-    <FormControl isDisabled={!isEnabled} py={2}>
-      <InformationalPopover feature="paramDenoisingStrength">
-        <FormLabel mr={0}>{`${t('parameters.denoisingStrength')}`}</FormLabel>
-      </InformationalPopover>
-      <WavyLine waviness={img2imgStrength * 10} isDisabled={!isEnabled}/>
-      <CompositeSlider
-        step={config.coarseStep}
-        fineStep={config.fineStep}
-        min={config.sliderMin}
-        max={config.sliderMax}
-        defaultValue={config.initial}
-        onChange={onChange}
-        value={img2imgStrength}
-        marks={marks}
-      />
-      <CompositeNumberInput
-        step={config.coarseStep}
-        fineStep={config.fineStep}
-        min={config.numberInputMin}
-        max={config.numberInputMax}
-        defaultValue={config.initial}
-        onChange={onChange}
-        value={img2imgStrength}
-      />
+    <FormControl isDisabled={!isEnabled} py={2} justifyContent="space-between">
+      <Flex gap={3} alignItems="center">
+        <InformationalPopover feature="paramDenoisingStrength">
+          <FormLabel mr={0}>{`${t('parameters.denoisingStrength')}`}</FormLabel>
+        </InformationalPopover>
+        <Box position="relative" opacity={!isEnabled ? 0.5 : 1}>
+          <WavyLine waviness={img2imgStrength * 10} />
+        </Box>
+      </Flex>
+      {isEnabled ? (
+        <>
+          <CompositeSlider
+            step={config.coarseStep}
+            fineStep={config.fineStep}
+            min={config.sliderMin}
+            max={config.sliderMax}
+            defaultValue={config.initial}
+            onChange={onChange}
+            value={img2imgStrength}
+            marks={marks}
+          />
+          <CompositeNumberInput
+            step={config.coarseStep}
+            fineStep={config.fineStep}
+            min={config.numberInputMin}
+            max={config.numberInputMax}
+            defaultValue={config.initial}
+            onChange={onChange}
+            value={img2imgStrength}
+          />
+        </>
+      ) : (
+        <Flex justifySelf="flex-end">
+          <Badge opacity="0.6">
+            {t('common.disabled')} - {t('parameters.noRasterLayers')}
+          </Badge>
+        </Flex>
+      )}
     </FormControl>
   );
 });