79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
'use client'
|
|
import { InputField, Wrapper } from '@/components'
|
|
import { SearchDocument } from '@/generated/graphql/graphql'
|
|
import { useQuery } from '@apollo/client/react'
|
|
import { Image } from '@chakra-ui/react'
|
|
import { Box, Button, Flex, Text } from '@chakra-ui/react'
|
|
import { Form, Formik } from 'formik'
|
|
// import { readFileSync } from 'fs'
|
|
import { useState } from 'react'
|
|
|
|
const Home: React.FC = () => {
|
|
const [imageFile, setImageFile] = useState<File | null>(null)
|
|
const { refetch, loading } = useQuery(SearchDocument, { skip: true })
|
|
const [results, setResults] = useState<{ __typename?: string, image: string, text: string }[]>([])
|
|
|
|
return (
|
|
<main>
|
|
<Wrapper variant='regular'>
|
|
<Formik
|
|
initialValues={{ image: '' }}
|
|
onSubmit={async ({ }, { setValues }) => {
|
|
if (imageFile) {
|
|
setResults([])
|
|
const reader = new FileReader()
|
|
reader.readAsArrayBuffer(imageFile)
|
|
reader.onloadend = async () => {
|
|
const b64 = Buffer.from(reader.result as string, 'base64').toString('base64')
|
|
const result = await refetch({ image: b64, limit: 10 })
|
|
setResults(result.data!.search)
|
|
setImageFile(null)
|
|
setValues({ image: '' })
|
|
}
|
|
}
|
|
}}
|
|
>
|
|
{({ isSubmitting }) => (
|
|
<Form>
|
|
<InputField
|
|
label='Upload image to search for the most similar memes'
|
|
name='image'
|
|
type='file'
|
|
accept='image/*'
|
|
p={2}
|
|
h='3rem'
|
|
onChange={(e) => {
|
|
setResults([])
|
|
if (e.currentTarget.files) {
|
|
setImageFile(e.currentTarget.files[0])
|
|
}
|
|
}}
|
|
/>
|
|
{
|
|
imageFile &&
|
|
<Flex flexDir='column' alignItems='center' mt={4}>
|
|
<Text>Selected image: {imageFile.name}</Text>
|
|
</Flex>
|
|
}
|
|
<Flex mt={4} w='100%' justifyContent='center'>
|
|
<Button type='submit' isLoading={isSubmitting || loading} hidden={!imageFile ? true : false}>Search</Button>
|
|
</Flex>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
<Flex alignItems='center' justifyContent='center' p={2} flexWrap='wrap' rowGap={4}>
|
|
{
|
|
results?.map(r => (
|
|
<Flex flexDir='column' alignItems='center'>
|
|
<Image src={`data:image/${r.text.split('.')[r.text.split('.').length - 1]};base64,${r.image}`} alt={r.text || ''} />
|
|
<Text mt={4}>{r.text}</Text>
|
|
</Flex>
|
|
))
|
|
}
|
|
</Flex>
|
|
</Wrapper>
|
|
</main>
|
|
)
|
|
}
|
|
export default Home
|