zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Draw: thumbnail in gallery

Browse Source
This commit is contained in:
Enrico Ros
2024-06-11 19:41:12 -07:00
parent dd7defd2c7
commit 9d8ae538d9
1 changed files with 47 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/draw/DrawGallery.tsx
+47 -67
View File
@@ -1,42 +1,38 @@
import * as React from 'react';
import { AppPlaceholder } from '../AppPlaceholder';
import { useDBlobItemsByTypeCIdSId } from '~/modules/dblobs/dblobs.hooks';
import { DBlobImageItem, DBlobMetaDataType } from '~/modules/dblobs/dblobs.types';
import { Box, Table } from '@mui/joy';
import { dBlobCacheT256, DBlobImageItem, DBlobMetaDataType } from '~/modules/dblobs/dblobs.types';
import { useDBlobItemsByTypeCIdSId } from '~/modules/dblobs/dblobs.hooks';
export function DrawGallery(props: { domain: 'draw' | 'app' }) {
import { AppPlaceholder } from '../AppPlaceholder';
// external state from the DB
export function DrawGallery({ domain }: { domain: 'draw' | 'app' }) {
const [items] = useDBlobItemsByTypeCIdSId<DBlobImageItem>(
DBlobMetaDataType.IMAGE,
'global',
props.domain === 'draw' ? 'app-draw' : 'app-chat',
domain === 'draw' ? 'app-draw' : 'app-chat',
);
// wait until we load everything
if (!items || items.length === 0) {
return (
<AppPlaceholder text={items === undefined ? 'Loading...' : 'No images found.'} />
);
return <AppPlaceholder text={items === undefined ? 'Loading...' : 'No images found.'} />;
}
return (
<Box sx={{
flexGrow: 1,
overflowY: 'auto',
p: { xs: 3, md: 6 },
border: '1px solid blue',
}}>
const boxStyles = {
flexGrow: 1,
overflowY: 'auto',
p: { xs: 3, md: 6 },
border: '1px solid blue',
};
<Table
borderAxis='both'
size='sm'
// stickyHeader
stripe='odd'
variant='plain'
>
const cellStyles = {
overflowWrap: 'anywhere',
whiteSpace: 'break-spaces',
};
return (
<Box sx={boxStyles}>
<Table borderAxis='both' size='sm' stripe='odd' variant='plain'>
<thead>
<tr>
<th>ID</th>
@@ -46,50 +42,34 @@ export function DrawGallery(props: { domain: 'draw' | 'app' }) {
</tr>
</thead>
<tbody>
{items.map((_item) => {
const {
id,
label,
data,
origin,
metadata,
createdAt,
updatedAt,
} = _item;
return (
<tr key={id}>
<td>
<picture style={{ display: 'flex', maxWidth: 256, maxHeight: 256 }}>
<img src={`data:${data.mimeType};base64,${data.base64}`} alt={label} style={{ maxWidth: '100%', maxHeight: '100%' }} />
</picture>
</td>
<td>{label}</td>
<td>
<Box sx={{
overflowWrap: 'anywhere',
whiteSpace: 'break-spaces',
}}>
{JSON.stringify(origin, null, 2)}
</Box>
</td>
<td>
<Box sx={{
overflowWrap: 'anywhere',
whiteSpace: 'break-spaces',
}}>
{JSON.stringify(metadata, null, 2)}
<br />
{createdAt ? new Date(createdAt).toLocaleString() : 'no creation'}
<br />
{(updatedAt && updatedAt !== createdAt) ? new Date(updatedAt).toLocaleString() : null}
</Box>
</td>
</tr>
);
})}
{items.map(({ id, label, cache, data, origin, metadata, createdAt, updatedAt }) => (
<tr key={id}>
<td>
<picture style={{ display: 'flex', maxWidth: 256, maxHeight: 256 }}>
<img
src={cache[dBlobCacheT256]?.base64 ? `data:${cache[dBlobCacheT256]?.mimeType};base64,${cache[dBlobCacheT256]?.base64}` : `data:${data.mimeType};base64,${data.base64}`}
alt={label}
style={{ maxWidth: '100%', maxHeight: '100%', opacity: cache[dBlobCacheT256]?.base64 ? 1 : 0.5 }}
/>
</picture>
</td>
<td>{label}</td>
<td>
<Box sx={cellStyles}>{JSON.stringify(origin, null, 2)}</Box>
</td>
<td>
<Box sx={cellStyles}>
{JSON.stringify(metadata, null, 2)}
<br />
{createdAt ? new Date(createdAt).toLocaleString() : 'no creation'}
<br />
{updatedAt && updatedAt !== createdAt ? new Date(updatedAt).toLocaleString() : null}
</Box>
</td>
</tr>
))}
</tbody>
</Table>
</Box>
);
}