mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
e386b5dc53
*migrate from `openapi-typescript-codegen` to `openapi-typescript` and `openapi-fetch`* `openapi-typescript-codegen` is not very actively maintained - it's been over a year since the last update. `openapi-typescript` and `openapi-fetch` are part of the actively maintained repo. key differences: - provides a `fetch` client instead of `axios`, which means we need to be a bit more verbose with typing thunks - fetch client is created at runtime and has a very nice typescript DX - generates a single file with all types in it, from which we then extract individual types. i don't like how verbose this is, but i do like how it is more explicit. - removed npm api generation scripts - now we have a single `typegen` script overall i have more confidence in this new library. *use nanostores for api base and token* very simple reactive store for api base url and token. this was suggested in the `openapi-fetch` docs and i quite like the strategy. *organise rtk-query api* split out each endpoint (models, images, boards, boardImages) into their own api extensions. tidy!
45 lines
980 B
TypeScript
45 lines
980 B
TypeScript
import { Badge, Flex } from '@chakra-ui/react';
|
||
import { isString } from 'lodash-es';
|
||
import { useMemo } from 'react';
|
||
import { ImageDTO } from 'services/api/types';
|
||
|
||
type ImageMetadataOverlayProps = {
|
||
image: ImageDTO;
|
||
};
|
||
|
||
const ImageMetadataOverlay = ({ image }: ImageMetadataOverlayProps) => {
|
||
const model = useMemo(() => {
|
||
if (!isString(image.metadata?.model)) {
|
||
return;
|
||
}
|
||
|
||
return image.metadata?.model;
|
||
}, [image.metadata]);
|
||
|
||
return (
|
||
<Flex
|
||
sx={{
|
||
pointerEvents: 'none',
|
||
flexDirection: 'column',
|
||
position: 'absolute',
|
||
top: 0,
|
||
insetInlineStart: 0,
|
||
p: 2,
|
||
alignItems: 'flex-start',
|
||
gap: 2,
|
||
}}
|
||
>
|
||
<Badge variant="solid" colorScheme="base">
|
||
{image.width} × {image.height}
|
||
</Badge>
|
||
{model && (
|
||
<Badge variant="solid" colorScheme="base">
|
||
{model}
|
||
</Badge>
|
||
)}
|
||
</Flex>
|
||
);
|
||
};
|
||
|
||
export default ImageMetadataOverlay;
|