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

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

@@ -746,6 +746,7 @@
         "delete": "Delete",
         "deleteConfig": "Delete Config",
         "deleteModel": "Delete Model",
+        "deleteModelImage": "Delete Model Image",
         "deleteMsg1": "Are you sure you want to delete this model from InvokeAI?",
         "deleteMsg2": "This WILL delete the model from disk if it is in the InvokeAI root folder. If you are using a custom location, then the model WILL NOT be deleted from disk.",
         "description": "Description",
@@ -786,6 +787,10 @@
         "modelDeleteFailed": "Failed to delete model",
         "modelEntryDeleted": "Model Entry Deleted",
         "modelExists": "Model Exists",
+        "modelImageDeleted": "Model Image Deleted",
+        "modelImageDeleteFailed": "Model Image Delete Failed",
+        "modelImageUpdated": "Model Image Updated",
+        "modelImageUpdateFailed": "Model Image Update Failed",
         "modelLocation": "Model Location",
         "modelLocationValidationMsg": "Provide the path to a local folder where your Diffusers Model is stored",
         "modelManager": "Model Manager",
@@ -829,7 +834,6 @@
         "repo_id": "Repo ID",
         "repoIDValidationMsg": "Online repository of your model",
         "repoVariant": "Repo Variant",
-        "resetImage": "Reset This Image",
         "safetensorModels": "SafeTensors",
         "sameFolder": "Same folder",
         "scan": "Scan",

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

@@ -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"

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

@@ -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}

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

@@ -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()

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

@@ -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%">

invokeai/frontend/web/src/services/api/endpoints/models.ts

@@ -138,7 +138,7 @@ const buildTransformResponse =
  * buildModelsUrl('some-path')
  * // '/api/v1/models/some-path'
  */
-export const buildModelsUrl = (path: string = '') => buildV2Url(`models/${path}`);
+const buildModelsUrl = (path: string = '') => buildV2Url(`models/${path}`);
 
 export const modelsApi = api.injectEndpoints({
   endpoints: (build) => ({
@@ -162,6 +162,7 @@ export const modelsApi = api.injectEndpoints({
           body: formData,
         };
       },
+      invalidatesTags: ['Model'],
     }),
     installModel: build.mutation<InstallModelResponse, InstallModelArg>({
       query: ({ source }) => {
@@ -189,6 +190,7 @@ export const modelsApi = api.injectEndpoints({
           method: 'DELETE',
         };
       },
+      invalidatesTags: ['Model'],
     }),
     getModelImage: build.query<string, string>({
       query: (key) => buildModelsUrl(`i/${key}/image`)