---

2026-06-24 15:59:04 +02:00
commit 510945b733
32 changed files with 7009 additions and 0 deletions
@@ -0,0 +1,19 @@
+import { Providers } from '@/Providers'
+import type { Metadata } from 'next'
+
+
+export const metadata: Metadata = {
+  title: 'Meme Search Client'
+}
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang='en'>
+      <body>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  )
+}
@@ -0,0 +1,78 @@
+'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