add fallback image and make sure description text is legible for model picker noncompact

Author: Mary Hipp

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

@@ -34,6 +34,17 @@ const ModelImage = ({ image_url }: Props) => {
       minHeight={MODEL_IMAGE_THUMBNAIL_SIZE}
       minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
       borderRadius="base"
+      fallback={
+        <Flex
+          height={MODEL_IMAGE_THUMBNAIL_SIZE}
+          minWidth={MODEL_IMAGE_THUMBNAIL_SIZE}
+          borderRadius="base"
+          alignItems="center"
+          justifyContent="center"
+        >
+          <Icon color="base.500" as={PiImage} boxSize={FALLBACK_ICON_SIZE} />
+        </Flex>
+      }
     />
   );
 };

invokeai/frontend/web/src/features/parameters/components/ModelPicker.tsx

@@ -413,6 +413,12 @@ const optionNameSx: SystemStyleObject = {
   },
 };
 
+const optionDescriptionSx: SystemStyleObject = {
+  '&[data-is-compact="true"]': {
+    color: 'base.800',
+  },
+};
+
 const PickerOptionComponent = typedMemo(
   <T extends AnyModelConfig>({ option, ...rest }: { option: WithStarred<T> } & BoxProps) => {
     const { $compactView } = usePickerContext<WithStarred<T>>();
@@ -453,7 +459,11 @@ const PickerOptionComponent = typedMemo(
               </Text>
             )}
           </Flex>
-          {option.description && !compactView && <Text color="base.200">{option.description}</Text>}
+          {option.description && !compactView && (
+            <Text sx={optionDescriptionSx} data-is-compact={compactView}>
+              {option.description}
+            </Text>
+          )}
         </Flex>
       </Flex>
     );