github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-19 06:44:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

get model image url from model config, added thumbnail formatting for images

Browse Source
This commit is contained in:
Jennifer Player
2024-03-06 13:15:33 -05:00
committed by Kent Keirsey
parent 239b1e8cc7
commit 8411029d93
11 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage.tsx
View File

@@ -1,22 +1,19 @@
import { Box, Image } from '@invoke-ai/ui-library';
import { typedMemo } from 'common/util/typedMemo';
import { useState } from 'react';
import { buildModelsUrl } from 'services/api/endpoints/models';
import { useGetModelConfigQuery } from 'services/api/endpoints/models';
type Props = {
model_key: string;
image_url?: string;
};
const ModelImage = ({ model_key }: Props) => {
const [image, setImage] = useState<string | undefined>(buildModelsUrl(`i/${model_key}/image`));
const ModelImage = ({ image_url }: Props) => {
if (!image) return <Box height="50px" width="50px"></Box>;
if (!image_url) return <Box height="50px" width="50px" />;
return (
<Image
onError={() => setImage(undefined)}
src={image}
src={image_url}
objectFit="cover"
objectPosition="50% 50%"
height="50px"

2
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
View File

@@ -74,7 +74,7 @@ const ModelListItem = (props: ModelListItemProps) => {
return (
<Flex gap={2} alignItems="center" w="full">
<ModelImage model_key={model.key} />
<ModelImage image_url={model.cover_image} />
<Flex
as={Button}
isChecked={isSelected}

14
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx
View File

@@ -6,18 +6,19 @@ import { useAppDispatch } from 'app/store/storeHooks';
import { Button } from '@invoke-ai/ui-library';
import { useDropzone } from 'react-dropzone';
import { PiArrowCounterClockwiseBold, PiUploadSimpleBold } from 'react-icons/pi';
import { buildModelsUrl, useUpdateModelImageMutation, useDeleteModelImageMutation } from 'services/api/endpoints/models';
import { useUpdateModelImageMutation, useDeleteModelImageMutation } from 'services/api/endpoints/models';
import { useTranslation } from 'react-i18next';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
type Props = {
model_key: string;
model_key: string | null;
model_image: string | null;
};
const ModelImageUpload = ({ model_key }: Props) => {
const ModelImageUpload = ({ model_key, model_image }: Props) => {
const dispatch = useAppDispatch();
const [image, setImage] = useState<string | undefined>(buildModelsUrl(`i/${model_key}/image`));
const [image, setImage] = useState<string | null>(model_image);
const { t } = useTranslation();
const [updateModelImage] = useUpdateModelImageMutation();
@@ -33,7 +34,7 @@ type Props = {
setImage(URL.createObjectURL(file));
updateModelImage({ key: model_key, image: image })
updateModelImage({ key: model_key, image: file })
.unwrap()
.then(() => {
dispatch(
@@ -60,6 +61,9 @@ type Props = {
);
const handleResetImage = useCallback(() => {
if (!model_key) {
return;
}
setImage(undefined);
deleteModelImage(model_key)
.unwrap()

2
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
View File

@@ -41,7 +41,7 @@ export const Model = () => {
<ModelAttrView label="Description" value={data.description} />
</Box>
</Flex>
<ModelImageUpload model_key={selectedModelKey || ''} />
<ModelImageUpload model_key={selectedModelKey} model_image={data.cover_image} />
</Flex>
<Tabs mt="4" h="100%">