feat: img2img

frontend/src/atoms/generationParameters.ts

@@ -31,6 +31,6 @@ export const generationParametersAtom = atom<GenerationParamertersForm>({
     batch_count: 1,
     steps: 50,
     seed: -1,
-    strength: 1,
+    strength: 0.7,
     img: undefined,
 })

frontend/src/components/gallery.tsx

@@ -31,11 +31,11 @@ const Gallery = ({ images, isLoading }: Props) => {
           cols={3}
           breakpoints={[
             { maxWidth: 'xs', cols: 2 },
-            { maxWidth: 'sm', cols: 3 },
-            { minWidth: 'sm', cols: 3 },
-            { minWidth: 'md', cols: 3 },
-            { minWidth: 'lg', cols: 4 },
-            { minWidth: 'xl', cols: 5 },
+            { maxWidth: 'sm', cols: 2 },
+            { minWidth: 'sm', cols: 2 },
+            { minWidth: 'md', cols: 2 },
+            { minWidth: 'lg', cols: 3 },
+            { minWidth: 'xl', cols: 4 },
           ]}
         >
           {images.map((image, i) => {

frontend/src/components/overlayPreview.tsx

@@ -15,7 +15,6 @@ const OverlayPreview = ({ images, initialIndex, onClose }: Props) => {
   const [currentInfo, setCurrentInfo] = useState(images[initialIndex].info)
 
   const onSlideChange = (index: number) => {
-    console.log('slide change', index)
     setCurrentIndex(index)
     setCurrentInfo(images[index].info)
   }
@@ -91,7 +90,7 @@ const OverlayPreview = ({ images, initialIndex, onClose }: Props) => {
                 return (
                   <tr key={key}>
                     <td>{key}</td>
-                    <td>{value == '' ? 'none' : value}</td>
+                    <td>{String(value) == '' ? 'none' : value}</td>
                   </tr>
                 )
               })}

frontend/src/components/parameters.tsx

@@ -1,6 +1,7 @@
-import { Flex, NativeSelect } from '@mantine/core'
+import { Divider, NativeSelect, Stack } from '@mantine/core'
 import { useAtom } from 'jotai'
 
+import ImageParameter from './parameters/imageParameter'
 import ImageSizeParameter from './parameters/imageSizeParameter'
 import ModelParameter from './parameters/modelParameter'
 import SeedParameter from './parameters/seedParameter'
@@ -13,7 +14,7 @@ const Parameters = () => {
   const [parameters, setParameters] = useAtom(generationParametersAtom)
 
   return (
-    <Flex w={'100%'} direction={'column'} p={'md'} gap={'md'}>
+    <Stack w={'100%'} p={'md'} spacing={'md'}>
       <ModelParameter />
 
       <ImageSizeParameter />
@@ -65,7 +66,11 @@ const Parameters = () => {
           }
         }}
       />
-    </Flex>
+
+      <Divider />
+
+      <ImageParameter />
+    </Stack>
   )
 }
 

frontend/src/components/parameters/imageParameter.tsx

@@ -0,0 +1,114 @@
+import { Box, Button, CloseButton, FileButton, Group, Image, Stack, Text } from '@mantine/core'
+import { Dropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone'
+import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react'
+import { useAtom } from 'jotai'
+import { useState } from 'react'
+
+import NumberSliderInput from '../ui/numberSliderInput'
+
+import { generationParametersAtom } from '~/atoms/generationParameters'
+import { arrayBufferToBase64 } from '~/utils/base64'
+
+const ImageParameter = () => {
+  const [file, setFile] = useState<File | null>(null)
+  const [parameters, setParameters] = useAtom(generationParametersAtom)
+
+  const onFileChange = async (file: File | null) => {
+    setFile(file)
+    if (file) {
+      const arrayBuffer = await file.arrayBuffer()
+      const base64 = arrayBufferToBase64(arrayBuffer)
+      setParameters((prev) => ({ ...prev, img: base64 }))
+    } else {
+      setParameters((prev) => ({ ...prev, img: undefined }))
+    }
+  }
+
+  return (
+    <Stack>
+      {file && (
+        <NumberSliderInput
+          label={'Strength'}
+          defaultValue={parameters.strength}
+          min={0.01}
+          max={1.0}
+          step={0.01}
+          precision={2}
+          onChange={(e) => {
+            if (e) {
+              setParameters((p) => ({ ...p, strength: e }))
+            }
+          }}
+        />
+      )}
+
+      <FileButton onChange={onFileChange} accept={'image/*'}>
+        {(props) => (
+          <Button leftIcon={<IconUpload />} variant={'subtle'} {...props}>
+            Upload image (or drag and drop)
+          </Button>
+        )}
+      </FileButton>
+
+      {file && (
+        <Box pos={'relative'}>
+          <Image src={URL.createObjectURL(file)} radius={'xs'} />
+          <CloseButton
+            variant={'filled'}
+            color={'blue'}
+            pos={'absolute'}
+            m={'xs'}
+            top={0}
+            right={0}
+            onClick={() => onFileChange(null)}
+          />
+        </Box>
+      )}
+
+      <Dropzone.FullScreen
+        accept={IMAGE_MIME_TYPE}
+        onDrop={(files) => {
+          if (files.length > 0) {
+            onFileChange(files[0])
+          }
+        }}
+        m={'xl'}
+      >
+        <Dropzone.Accept>
+          <Group position={'center'} spacing={'xl'}>
+            <IconUpload size={50} stroke={1.5} />
+
+            <Box>
+              <Text size="xl">Drop the image here!</Text>
+              <Text size="sm"></Text>
+            </Box>
+          </Group>
+        </Dropzone.Accept>
+
+        <Dropzone.Reject>
+          <Group position={'center'} spacing={'xl'}>
+            <IconX size={50} stroke={1.5} />
+
+            <Box>
+              <Text size={'xl'}>This file type is not supported</Text>
+              <Text size={'sm'}>(╯°□°)╯︵ ┻━┻</Text>
+            </Box>
+          </Group>
+        </Dropzone.Reject>
+
+        <Dropzone.Idle>
+          <Group position={'center'} spacing={'xl'} h={'80%'}>
+            <IconPhoto size={50} stroke={1.5} />
+
+            <Box>
+              <Text size="xl">Drag and drop your image here...</Text>
+              <Text size="sm"></Text>
+            </Box>
+          </Group>
+        </Dropzone.Idle>
+      </Dropzone.FullScreen>
+    </Stack>
+  )
+}
+
+export default ImageParameter

frontend/src/components/ui/numberSliderInput.tsx

@@ -30,6 +30,7 @@ const NumberSliderInput = ({
     <Input.Wrapper label={label}>
       <Flex align={'center'} gap={'sm'}>
         <Slider
+          label={value}
           defaultValue={defaultValue}
           value={value}
           min={min}

frontend/src/tabs/gemerator.tsx

@@ -58,6 +58,8 @@ const Generator = () => {
       setIsLoading(true)
       setErrorMessage(null)
       setPerformance(null)
+
+      console.log(requestBody)
       const res = await api.generateImage({
         generateImageRequest: requestBody,
       })
@@ -104,15 +106,7 @@ const Generator = () => {
         }}
       >
         <Flex h={'100%'} w={'100%'} direction={isLargeScreen ? 'row' : 'column'}>
-          <Stack
-            w={'100%'}
-            p={'md'}
-            sx={
-              {
-                // overflow: 'hidden',
-              }
-            }
-          >
+          <Stack w={'100%'} p={'md'}>
             <Stack w={'100%'}>
               <Textarea
                 label={'Positive'}
@@ -143,7 +137,7 @@ const Generator = () => {
                 cursor: isLoading ? 'not-allowed' : 'pointer',
               }}
             >
-              Generate
+              <Text>{parameters.img ? 'Generate (img2img mode)' : 'Generate'}</Text>
             </Button>
 
             {performance && <Text align="end">Time: {performance.toFixed(2)}s</Text>}
@@ -152,7 +146,7 @@ const Generator = () => {
               mah={isLargeScreen ? '80%' : '480px'}
               pos={'relative'}
               sx={{
-                overflow: 'scroll',
+                overflowY: 'scroll',
               }}
             >
               <Gallery images={images} isLoading={isLoading} />
@@ -170,6 +164,9 @@ const Generator = () => {
                   }
                 : '100%'
             }
+            sx={{
+              overflow: 'scroll',
+            }}
           >
             <Parameters />
           </Box>

frontend/src/types/generatedImage.ts

@@ -1,4 +1,4 @@
 export interface GeneratedImage {
     url: string
-    info: Record<string, string>
+    info: Record<string, any>
 }

frontend/src/utils/base64.ts

@@ -1,4 +1,4 @@
-export const fileToBase64 = (buffer: ArrayBuffer) => {
+export const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
     let binary = ''
     const bytes = new Uint8Array(buffer)
     const len = bytes.byteLength