github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): better preview for generators

Browse Source
This commit is contained in:
psychedelicious
2025-01-17 11:02:45 +11:00
parent 0b64d21980
commit bd477ded2e
3 changed files with 43 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatGeneratorFieldComponent.tsx
View File

@@ -62,14 +62,18 @@ export const FloatGeneratorFieldInputComponent = memo(
);
const [debouncedField] = useDebounce(field, 300);
const resolvedValues = useMemo(() => resolveFloatGeneratorField(debouncedField), [debouncedField]);
const resolvedValuesAsString = useMemo(() => {
if (debouncedField.value.type === FloatGeneratorUniformRandomDistributionType) {
const { count } = debouncedField.value;
return `<${t('nodes.generatorNRandomValues', { count })}>`;
}
const resolvedValues = resolveFloatGeneratorField(debouncedField);
if (resolvedValues.length === 0) {
return '<empty>';
return `<${t('nodes.generatorNoValues')}>`;
} else {
return resolvedValues.map((val) => round(val, 2)).join(', ');
}
}, [resolvedValues]);
}, [debouncedField, t]);
return (
<Flex flexDir="column" gap={2}>
@@ -91,23 +95,20 @@ export const FloatGeneratorFieldInputComponent = memo(
{field.value.type === FloatGeneratorParseStringType && (
<FloatGeneratorParseStringSettings state={field.value} onChange={onChange} />
)}
{/* We don't show previews for random generators, bc they are non-deterministic */}
{field.value.type !== FloatGeneratorUniformRandomDistributionType && (
<Flex w="full" h="full" p={2} borderWidth={1} borderRadius="base" maxH={128}>
<Flex w="full" h="auto">
<OverlayScrollbarsComponent
className="nodrag nowheel"
defer
style={overlayScrollbarsStyles}
options={overlayscrollbarsOptions}
>
<Text className="nodrag nowheel" fontFamily="monospace" userSelect="text" cursor="text">
{resolvedValuesAsString}
</Text>
</OverlayScrollbarsComponent>
</Flex>
<Flex w="full" h="full" p={2} borderWidth={1} borderRadius="base" maxH={128}>
<Flex w="full" h="auto">
<OverlayScrollbarsComponent
className="nodrag nowheel"
defer
style={overlayScrollbarsStyles}
options={overlayscrollbarsOptions}
>
<Text className="nodrag nowheel" fontFamily="monospace" userSelect="text" cursor="text">
{resolvedValuesAsString}
</Text>
</OverlayScrollbarsComponent>
</Flex>
)}
</Flex>
</Flex>
);
}

39
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerGeneratorFieldComponent.tsx
View File

@@ -64,14 +64,18 @@ export const IntegerGeneratorFieldInputComponent = memo(
);
const [debouncedField] = useDebounce(field, 300);
const resolvedValues = useMemo(() => resolveIntegerGeneratorField(debouncedField), [debouncedField]);
const resolvedValuesAsString = useMemo(() => {
if (debouncedField.value.type === IntegerGeneratorUniformRandomDistributionType) {
const { count } = debouncedField.value;
return `<${t('nodes.generatorNRandomValues', { count })}>`;
}
const resolvedValues = resolveIntegerGeneratorField(debouncedField);
if (resolvedValues.length === 0) {
return '<empty>';
return `<${t('nodes.generatorNoValues')}>`;
} else {
return resolvedValues.map((val) => round(val, 2)).join(', ');
}
}, [resolvedValues]);
}, [debouncedField, t]);
return (
<Flex flexDir="column" gap={2}>
@@ -93,23 +97,20 @@ export const IntegerGeneratorFieldInputComponent = memo(
{field.value.type === IntegerGeneratorParseStringType && (
<IntegerGeneratorParseStringSettings state={field.value} onChange={onChange} />
)}
{/* We don't show previews for random generators, bc they are non-deterministic */}
{field.value.type !== IntegerGeneratorUniformRandomDistributionType && (
<Flex w="full" h="full" p={2} borderWidth={1} borderRadius="base" maxH={128}>
<Flex w="full" h="auto">
<OverlayScrollbarsComponent
className="nodrag nowheel"
defer
style={overlayScrollbarsStyles}
options={overlayscrollbarsOptions}
>
<Text className="nodrag nowheel" fontFamily="monospace" userSelect="text" cursor="text">
{resolvedValuesAsString}
</Text>
</OverlayScrollbarsComponent>
</Flex>
<Flex w="full" h="full" p={2} borderWidth={1} borderRadius="base" maxH={128}>
<Flex w="full" h="auto">
<OverlayScrollbarsComponent
className="nodrag nowheel"
defer
style={overlayScrollbarsStyles}
options={overlayscrollbarsOptions}
>
<Text className="nodrag nowheel" fontFamily="monospace" userSelect="text" cursor="text">
{resolvedValuesAsString}
</Text>
</OverlayScrollbarsComponent>
</Flex>
)}
</Flex>
</Flex>
);
}