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): updated whats new handling and v5.4.1 items

Browse Source
This commit is contained in:
psychedelicious
2024-11-07 10:24:02 +10:00
committed by Vargol
parent f4b0b6a93d
commit 8a683f5a3c
2 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/public/locales/en.json
View File

@@ -2102,8 +2102,10 @@
},
"whatsNew": {
"whatsNewInInvoke": "What's New in Invoke",
"line1": "<StrongComponent>Layer Merging</StrongComponent>: New <StrongComponent>Merge Down</StrongComponent> and improved <StrongComponent>Merge Visible</StrongComponent> for all layers, with special handling for Regional Guidance and Control Layers.",
"line2": "<StrongComponent>HF Token Support</StrongComponent>: Upload models that require Hugging Face authentication.",
"items": [
"<StrongComponent>SD 3.5</StrongComponent>: Support for Text-to-Image in Workflows with SD 3.5 Medium and Large.",
"<StrongComponent>Canvas</StrongComponent>: Streamlined Control Layer processing and improved default Control settings."
],
"readReleaseNotes": "Read Release Notes",
"watchRecentReleaseVideos": "Watch Recent Release Videos",
"watchUiUpdatesOverview": "Watch UI Updates Overview"

46
invokeai/frontend/web/src/features/ui/components/WhatsNew.tsx
View File

@@ -2,45 +2,41 @@ import { ExternalLink, Flex, ListItem, Text, UnorderedList } from '@invoke-ai/ui
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectConfigSlice } from 'features/system/store/configSlice';
import type { ReactNode } from 'react';
import { useMemo } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
const components = {
StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
};
export const WhatsNew = () => {
const { t } = useTranslation();
const { data } = useGetAppVersionQuery();
const isLocal = useAppSelector(selectIsLocal);
const highlights = useMemo(() => (data?.highlights ? data.highlights : []), [data]);
const items = useMemo<ReactNode[]>(() => {
if (data?.highlights?.length) {
return data.highlights.map((highlight, index) => <ListItem key={`${highlight}-${index}`}>{highlight}</ListItem>);
}
const tKeys = t<string, { returnObjects: true }, string[]>('whatsNew.items', {
returnObjects: true,
});
return tKeys.map((key, index) => (
<ListItem key={`${key}-${index}`}>
<Trans i18nKey={key} components={components} />
</ListItem>
));
}, [data?.highlights, t]);
return (
<Flex gap={4} flexDir="column">
<UnorderedList fontSize="sm">
{highlights.length ? (
highlights.map((highlight, index) => <ListItem key={index}>{highlight}</ListItem>)
) : (
<>
<ListItem>
<Trans
i18nKey="whatsNew.line1"
components={{
StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
}}
/>
</ListItem>
<ListItem>
<Trans
i18nKey="whatsNew.line2"
components={{
StrongComponent: <Text as="span" color="white" fontSize="sm" fontWeight="semibold" />,
}}
/>
</ListItem>
</>
)}
</UnorderedList>
<UnorderedList fontSize="sm">{items}</UnorderedList>
<Flex flexDir="column" gap={1}>
<ExternalLink
fontSize="sm"