+
Results
+ {imageMetadata && (
+
)
}
+const ImageClassification = ({
+ imageMetadata,
+ onClassification,
+}: {
+ imageMetadata: ImageMetadata
+ onClassification: (classification: string) => void
+}) => {
+ const { imageClassificationResult } = useImageClassificationService(
+ imageMetadata.imageData
+ )
+
+ useEffect(() => {
+ if (imageClassificationResult.state === 'FINISHED_LOADING_CLASSIFICATION') {
+ onClassification(imageClassificationResult.classification.top)
+ }
+ })
+
+ const prettyPrintClassName = (className: string) =>
+ className
+ .split(' ')
+ .map((word) => capitalizeWord(word))
+ .join(' ')
+
+ const capitalizeWord = (word: string): string =>
+ word.length <= 2 ? word : `${word[0].toUpperCase()}${word.substring(1)}`
+
+ const prettyPrintPercentage = (probability: number) =>
+ `${(probability * 100).toFixed(0)}%`
+
+ return (
+ <>
+ {imageClassificationResult.state === 'LOADING_MODEL' && (
+
+ )}
+ {imageClassificationResult.state ===
+ 'FINISHED_LOADING_CLASSIFICATION' && (
+
+ {imageClassificationResult.classification.predictions.map(
+ ({ className, probability }, index: number) => (
+
+ {prettyPrintClassName(className)}:{' '}
+ {prettyPrintPercentage(probability)}
+
+ )
+ )}
+
+ )}
+ {(imageClassificationResult.state === 'ERROR_LOADING_MODEL' ||
+ imageClassificationResult.state === 'ERROR_LOADING_CLASSIFICATION') && (
+
+ An error occurred: {imageClassificationResult.message}
+
+ )}
+
+ )
+}
+
+const ImageDescription = ({ classification }: { classification: string }) => {
+ const { imageDescriptionResult } = useImageDescriptionService(classification)
+
+ return (
+ <>
+ {imageDescriptionResult.state === 'LOADING' &&
}
+ {imageDescriptionResult.state === 'FINISHED' && (
+
+ {imageDescriptionResult.description}
+
+ )}
+ {imageDescriptionResult.state === 'ERROR' && (
+
+ An error occurred: {imageDescriptionResult.message}
+
+ )}
+
+ )
+}
+
export default ImageAnalyzer
diff --git a/src/app/_components/ImageDescription.tsx b/src/app/_components/ImageDescription.tsx
deleted file mode 100644
index bae214a..0000000
--- a/src/app/_components/ImageDescription.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useImageAnalyzer } from '@/app/_hooks/useImageAnalyzer'
-import { ImageMetadata } from '@/app/image-analyzer/types'
-
-const ImageDescription = ({
- imageMetadata,
-}: {
- imageMetadata: ImageMetadata
-}) => {
- const { imageClassifier } = useImageAnalyzer(imageMetadata.imageData)
-
- const prettyPrintClassName = (className: string) =>
- className
- .split(' ')
- .map((word) => capitalizeWord(word))
- .join(' ')
-
- const capitalizeWord = (word: string): string =>
- word.length <= 2 ? word : `${word[0].toUpperCase()}${word.substring(1)}`
-
- const prettyPrintPercentage = (probability: number) =>
- `${(probability * 100).toFixed(0)}%`
-
- return (
-
- Predictions
- {imageClassifier.state === 'FINISHED_PREDICTIONS' && (
-
- {imageClassifier.predictions.map(
- ({ className, probability }, index: number) => (
-
- {prettyPrintClassName(className)}:{' '}
- {prettyPrintPercentage(probability)}
-
- )
- )}
-
- )}
- {imageClassifier.state !== 'FINISHED_PREDICTIONS' && (
- Background
- {imageClassifier.state === 'FINISHED' && (
- {imageClassifier.description}
- )}
- {imageClassifier.state !== 'FINISHED' &&
- )
-}
-
-export default ImageDescription
diff --git a/src/app/_components/ImageUploader.tsx b/src/app/_components/ImageUploader.tsx
index 4ace6c4..cbf331d 100644
--- a/src/app/_components/ImageUploader.tsx
+++ b/src/app/_components/ImageUploader.tsx
@@ -2,9 +2,7 @@
import { useState, useRef, ChangeEvent, useCallback, DragEvent } from 'react'
import ErrorContainer from './ErrorContainer'
-import { ImageUploadInfo } from '@/app/image-analyzer/types'
-import Button from '@mui/material/Button'
-import Container from '@mui/material/Container'
+import { ImageUploadInfo } from '@/app/types'
const imageMimeType = /image\/(png|jpg|jpeg|webp)/i
@@ -80,9 +78,9 @@ const ImageUploader = ({ onUpload }: ImageUploaderProps) => {
}
return (
-
+ <>
+
)
}
diff --git a/src/app/_components/SampleImagePreview.tsx b/src/app/_components/SampleImagePreview.tsx
index ad4d1e9..21549e9 100644
--- a/src/app/_components/SampleImagePreview.tsx
+++ b/src/app/_components/SampleImagePreview.tsx
@@ -7,7 +7,7 @@ const SampleImagePreview = memo(({ imageSource }: { imageSource: string }) => {
return (
-
Sample Analysis
+ Sample Analysis
{imageUploadInfo &&
)
diff --git a/src/app/_components/Welcome.tsx b/src/app/_components/Welcome.tsx
deleted file mode 100644
index 46fc0c7..0000000
--- a/src/app/_components/Welcome.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-const Welcome = () => (
-
-
Background
-
- Image Analyzer is a proof-of-concept web application that
- analyzes your images using{' '}
-
-
- MobileNet
-
- {' '}
- and{' '}
-
- ChatGPT
-
- . Warning : Proof-of-concept tool is not super accurate,
- your results may vary.
-
-
- Technical Notes: MobileNet classifies your images in the
- browser using Tensorflow.js. ChatGPT describes your images using a
- GraphQL-based API running on a Cloudflare Worker.
-
-
- Ping me at @tjmaynes for
- any feedback. Enjoy!
-
-
-
-
-)
-
-export default Welcome
diff --git a/src/app/_hooks/useImageAnalyzer.tsx b/src/app/_hooks/useImageAnalyzer.tsx
deleted file mode 100644
index bc161b4..0000000
--- a/src/app/_hooks/useImageAnalyzer.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import '@tensorflow/tfjs-backend-cpu'
-import '@tensorflow/tfjs-backend-webgl'
-import { load as loadModel, MobileNet } from '@tensorflow-models/mobilenet'
-import { Prediction } from '@/app/image-analyzer/types'
-import { getImageDescription } from '@/lib/image'
-
-type ImageAnalyzerState =
- | {
- state: 'FINISHED'
- classification: string
- description: string
- predictions: Prediction[]
- }
- | {
- state: 'FINISHED_PREDICTIONS'
- predictions: Prediction[]
- }
- | {
- state: 'FINISHED_LOADING_MODEL'
- model: MobileNet
- }
- | {
- state: 'LOADING_MODEL'
- }
- | {
- state: 'ERROR'
- message: string
- }
-
-let cachedModel: MobileNet | null = null
-
-export const useImageAnalyzer = (imageData: ImageData) => {
- const [imageAnalyzerState, setImageAnalyzerState] =
- useState
({
- state: 'LOADING_MODEL',
- })
-
- useEffect(() => {
- if (imageAnalyzerState.state === 'LOADING_MODEL') {
- if (cachedModel) {
- setImageAnalyzerState({
- state: 'FINISHED_LOADING_MODEL',
- model: cachedModel,
- })
- } else {
- loadModel()
- .then((model) => {
- cachedModel = model
-
- setImageAnalyzerState({
- state: 'FINISHED_LOADING_MODEL',
- model,
- })
- })
- .catch((error) => {
- console.error(error)
- setImageAnalyzerState({
- state: 'ERROR',
- message: error.getMessage(),
- })
- })
- }
- } else if (imageAnalyzerState.state === 'ERROR') {
- setImageAnalyzerState({
- state: 'ERROR',
- message: imageAnalyzerState.message,
- })
- } else if (imageAnalyzerState.state === 'FINISHED_LOADING_MODEL') {
- imageAnalyzerState.model.classify(imageData).then((predictions) => {
- setImageAnalyzerState({
- state: 'FINISHED_PREDICTIONS',
- predictions,
- })
- })
- } else if (imageAnalyzerState.state === 'FINISHED_PREDICTIONS') {
- const sortedPredictions = Array.from(imageAnalyzerState.predictions)
- .sort((a, b) => b.probability - a.probability)
- .slice(0, 5)
-
- const topClassification = sortedPredictions[0].className
-
- getImageDescription(topClassification).then(({ description }) => {
- setImageAnalyzerState({
- state: 'FINISHED',
- predictions: imageAnalyzerState.predictions,
- description: description,
- classification: topClassification,
- })
- })
- }
- }, [imageData, imageAnalyzerState, setImageAnalyzerState])
-
- return { imageClassifier: imageAnalyzerState }
-}
diff --git a/src/app/_hooks/useImageClassificationService.tsx b/src/app/_hooks/useImageClassificationService.tsx
new file mode 100644
index 0000000..5a27285
--- /dev/null
+++ b/src/app/_hooks/useImageClassificationService.tsx
@@ -0,0 +1,94 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import '@tensorflow/tfjs-backend-cpu'
+import '@tensorflow/tfjs-backend-webgl'
+import { load as loadModel, MobileNet } from '@tensorflow-models/mobilenet'
+import { Classification } from '@/app/types'
+
+type ImageClassificationState =
+ | {
+ state: 'FINISHED_LOADING_CLASSIFICATION'
+ classification: Classification
+ }
+ | {
+ state: 'FINISHED_LOADING_MODEL'
+ model: MobileNet
+ }
+ | {
+ state: 'LOADING_MODEL'
+ }
+ | {
+ state: 'ERROR_LOADING_MODEL'
+ message: string
+ }
+ | {
+ state: 'ERROR_LOADING_CLASSIFICATION'
+ message: string
+ }
+
+let cachedModel: MobileNet | null = null
+
+export const useImageClassificationService = (imageData: ImageData) => {
+ const [imageClassificationState, setImageClassificationState] =
+ useState({
+ state: 'LOADING_MODEL',
+ })
+
+ useEffect(() => {
+ if (imageClassificationState.state === 'LOADING_MODEL') {
+ if (cachedModel) {
+ setImageClassificationState({
+ state: 'FINISHED_LOADING_MODEL',
+ model: cachedModel,
+ })
+ } else {
+ loadModel()
+ .then((model) => {
+ cachedModel = model
+
+ setImageClassificationState({
+ state: 'FINISHED_LOADING_MODEL',
+ model,
+ })
+ })
+ .catch((error) => {
+ console.error(error)
+
+ setImageClassificationState({
+ state: 'ERROR_LOADING_MODEL',
+ message: error.getMessage(),
+ })
+ })
+ }
+ } else if (imageClassificationState.state === 'FINISHED_LOADING_MODEL') {
+ imageClassificationState.model
+ .classify(imageData)
+ .then((result) => {
+ const sortedPredictions = Array.from(result)
+ .sort((a, b) => b.probability - a.probability)
+ .slice(0, 5)
+
+ const topClassification = sortedPredictions[0].className
+
+ setImageClassificationState({
+ state: 'FINISHED_LOADING_CLASSIFICATION',
+ classification: {
+ top: topClassification,
+ predictions: sortedPredictions,
+ },
+ })
+ })
+ .catch((error: Error) => {
+ console.error(error)
+
+ setImageClassificationState({
+ state: 'ERROR_LOADING_CLASSIFICATION',
+ message: error.message,
+ })
+ })
+ }
+ }, [imageData, imageClassificationState, setImageClassificationState])
+
+ return { imageClassificationResult: imageClassificationState }
+}
diff --git a/src/app/_hooks/useImageDescriptionService.tsx b/src/app/_hooks/useImageDescriptionService.tsx
new file mode 100644
index 0000000..4c94622
--- /dev/null
+++ b/src/app/_hooks/useImageDescriptionService.tsx
@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { getImageDescription } from '@/lib/data'
+
+type ImageDescriptionState =
+ | {
+ state: 'LOADING'
+ }
+ | {
+ state: 'FINISHED'
+ description: string
+ }
+ | {
+ state: 'ERROR'
+ message: string
+ }
+
+export const useImageDescriptionService = (classification: string) => {
+ const [imageDescriptionState, setImageDescriptionState] =
+ useState({
+ state: 'LOADING',
+ })
+
+ useEffect(() => {
+ if (imageDescriptionState.state === 'LOADING') {
+ getImageDescription(classification)
+ .then(({ response }) => {
+ setImageDescriptionState({
+ state: 'FINISHED',
+ description: response,
+ })
+ })
+ .catch((error: Error) => {
+ console.error(error)
+ setImageDescriptionState({
+ state: 'ERROR',
+ message: error.message,
+ })
+ })
+ }
+ }, [classification, imageDescriptionState, setImageDescriptionState])
+
+ return { imageDescriptionResult: imageDescriptionState }
+}
diff --git a/src/app/_hooks/useImageUploadInfoFetcher.tsx b/src/app/_hooks/useImageUploadInfoFetcher.tsx
index cbe2466..c5c19b2 100644
--- a/src/app/_hooks/useImageUploadInfoFetcher.tsx
+++ b/src/app/_hooks/useImageUploadInfoFetcher.tsx
@@ -1,6 +1,6 @@
'use client'
-import { ImageUploadInfo } from '@/app/image-analyzer/types'
+import { ImageUploadInfo } from '@/app/types'
import { useEffect, useState } from 'react'
export const useImageUploadInfoFetcher = (imageSource: string) => {
diff --git a/src/app/api/image/description/v1/route.ts b/src/app/api/image/description/v1/route.ts
deleted file mode 100644
index c735e79..0000000
--- a/src/app/api/image/description/v1/route.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import 'server-only'
-
-import { NextRequest } from 'next/server'
-import OpenAI from 'openai'
-
-const openai = new OpenAI({
- apiKey: process.env.OPENAI_API_KEY,
-})
-
-export const runtime = 'edge'
-
-export async function POST(request: NextRequest) {
- const { thing } = await request.json()
-
- const prompt = `Can you tell me about this '${thing}' thing? I don't understand what this is.`
-
- const response = await openai.chat.completions.create({
- model: 'gpt-3.5-turbo',
- messages: [{ role: 'user', content: prompt }],
- })
-
- const openaiResponse = response.choices.join(', ')
-
- return Response.json({ description: openaiResponse })
-}
diff --git a/src/app/api/v1/image/description/route.ts b/src/app/api/v1/image/description/route.ts
new file mode 100644
index 0000000..f61efc6
--- /dev/null
+++ b/src/app/api/v1/image/description/route.ts
@@ -0,0 +1,22 @@
+import 'server-only'
+
+import { NextRequest, NextResponse } from 'next/server'
+import cacher from '@/lib/cacher'
+import OpenAIWrapper from '@/lib/openai'
+
+export const runtime = 'edge'
+
+const openaiWrapper = new OpenAIWrapper()
+
+export async function POST(request: NextRequest) {
+ const { thing } = await request.json()
+ const cacheKey = `${request.nextUrl.pathname}-${thing}`
+
+ const response = await cacher(cacheKey, () =>
+ openaiWrapper.chat(
+ `Can you tell me about '${thing}'? I don't understand what this is.`
+ )
+ )
+
+ return NextResponse.json(response)
+}
diff --git a/src/app/globals.css b/src/app/globals.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/globals.scss b/src/app/globals.scss
new file mode 100644
index 0000000..8d100b9
--- /dev/null
+++ b/src/app/globals.scss
@@ -0,0 +1,122 @@
+/* stylelint-disable */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+}
+/* stylelint-enable */
+
+body {
+ padding: 10px;
+ font:
+ 16px/1.5 'Inconsolata',
+ 'Lucida Sans Typewriter',
+ 'Lucida Console',
+ Monaco,
+ monospace;
+ color: #000;
+ background-color: #fbfbfb;
+ margin: 0 auto;
+ max-width: 800px;
+}
+
+body > * {
+ padding: 0px;
+ margin: 0px;
+ font-size: 100%;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+}
+
+h1 {
+ font-size: 2em;
+ font-weight: bold;
+}
+
+h2 {
+ font-size: 1.5em;
+ font-weight: bold;
+ // text-decoration: underline;
+}
+
+canvas {
+ margin: 5px 5px 10px 5px;
+ max-width: 500px;
+ max-height: 500px;
+ -moz-box-shadow: 0 0 3px 3px #d81b60;
+ -webkit-box-shadow: 0 0 3px 3px #d81b60;
+ box-shadow: 0 0 3px 3px #d81b60;
+}
+
+.welcome {
+ display: flex;
+ flex-flow: column wrap;
+ margin: 5px 0 30px 0;
+}
+
+.background-info {
+ margin-bottom: 20px;
+}
+
+.image-uploader {
+ height: 16rem;
+ max-width: 100%;
+ text-align: center;
+ position: relative;
+}
+
+#input-file-upload {
+ display: none;
+}
+
+#label-file-upload {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-width: 2px;
+ border: 8px dashed #d81b60;
+ border-radius: 24px;
+
+ p:first-child {
+ font-size: 1.4em;
+ font-weight: bold;
+ }
+}
+
+#label-file-upload.drag-active {
+ background-color: #ffffff;
+}
+
+.upload-button {
+ margin-bottom: 0;
+}
+
+.upload-button:hover {
+ text-decoration-line: underline;
+}
+
+#drag-file-element {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-radius: 1rem;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ce25672..e4b2b3c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,12 @@
import type { Metadata } from 'next'
-import Container from '@mui/material/Container'
import Header from '@/app/_components/Header'
import Footer from '@/app/_components/Footer'
-import './globals.css'
+import './globals.scss'
export const metadata: Metadata = {
- title: 'Web Playground',
+ title: 'Image Analyzer',
description:
- 'A NextJS app that allows users to analyze images using MobileNet (in-browser), ChatGPT, and Cloudflare Workers',
+ 'a NextJS app that allows users to analyze images using MobileNet (via TensorflowJS), ChatGPT, and Cloudflare Pages',
}
export default function RootLayout({
@@ -19,11 +18,9 @@ export default function RootLayout({
-
-
- {children}
-
-
+
+ {children}
+
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c41894d..57c3dfa 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@
import { useCallback, useState } from 'react'
import ImageUploader from '@/app/_components/ImageUploader'
import SampleImagePreview from '@/app/_components/SampleImagePreview'
-import Welcome from '@/app/_components/Welcome'
+import BackgroundInfo from '@/app/_components/BackgroundInfo'
import ImageAnalyzer from '@/app/_components/ImageAnalyzer'
import { ImageUploadInfo } from '@/app/types'
@@ -19,9 +19,8 @@ const ImageAnalyzerRoot = () => {
return (
-
-
Try it out
+
+
{images.length <= 0 && (
@@ -29,7 +28,7 @@ const ImageAnalyzerRoot = () => {
)}
{images.length > 0 && (
-
Analysis Results
+ Analysis Results
{images.map((data, index) => (
put(key: string, value: string): Promise
}
@@ -29,10 +29,6 @@ export class InMemoryCacher implements CacherClient {
this.store = store
}
- static create() {
- return new InMemoryCacher()
- }
-
get = async (key: string): Promise => {
const result = this.store[key]
return result ? result : null
@@ -42,14 +38,3 @@ export class InMemoryCacher implements CacherClient {
this.store[key] = value
}
}
-
-const createCacheClient = (): CacherClient => {
- if (process.env.NODE_ENV === 'development') return InMemoryCacher.create()
-
- const { WEB_PLAYGROUND_CACHE } = process.env as unknown as {
- WEB_PLAYGROUND_CACHE: KVNamespace
- }
- return new KVCacher(WEB_PLAYGROUND_CACHE)
-}
-
-export default createCacheClient
diff --git a/src/lib/cacher.ts b/src/lib/cacher.ts
new file mode 100644
index 0000000..8898f26
--- /dev/null
+++ b/src/lib/cacher.ts
@@ -0,0 +1,32 @@
+import 'server-only'
+
+import { CacherClient, InMemoryCacher, KVCacher } from './cache-client'
+
+const createCacheClient = (): CacherClient => {
+ if (process.env.NODE_ENV === 'development') return new InMemoryCacher()
+
+ const IMAGE_ANALYZER_KV = process.env.IMAGE_ANALYZER_KV
+
+ return new KVCacher(IMAGE_ANALYZER_KV)
+}
+
+const cacheClient = createCacheClient()
+
+const cacher = async (
+ key: string,
+ requestPromise: () => Promise
+): Promise => {
+ const cacheHit = await cacheClient.get(key)
+
+ if (cacheHit) return JSON.parse(cacheHit)
+
+ try {
+ const body = await requestPromise()
+ cacheClient.put(key, JSON.stringify(body))
+ return body
+ } catch (e) {
+ return Promise.reject(e)
+ }
+}
+
+export default cacher
diff --git a/src/lib/data.ts b/src/lib/data.ts
new file mode 100644
index 0000000..1e03196
--- /dev/null
+++ b/src/lib/data.ts
@@ -0,0 +1,11 @@
+export const getImageDescription = async (thing: string) => {
+ const response = await fetch('/api/v1/image/description', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ thing }),
+ })
+
+ return await response.json()
+}
diff --git a/src/lib/image.ts b/src/lib/image.ts
index e057bec..4e5034a 100644
--- a/src/lib/image.ts
+++ b/src/lib/image.ts
@@ -27,18 +27,3 @@ export const resizeImage = ({
height: imageHeight,
}
}
-
-export const getImageDescription = async (thing: string) => {
- const response = await fetch(
- 'http://localhost:3000/api/image/description/v1',
- {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ thing }),
- }
- )
-
- return await response.json()
-}
diff --git a/src/lib/openai.ts b/src/lib/openai.ts
new file mode 100644
index 0000000..220b65f
--- /dev/null
+++ b/src/lib/openai.ts
@@ -0,0 +1,26 @@
+import OpenAI from 'openai'
+
+const openai = new OpenAI({
+ apiKey: process.env.OPENAI_API_KEY,
+})
+
+export interface IOpenAIWrapper {
+ chat(prompt: string): Promise<{ response: string }>
+}
+
+export default class OpenAIWrapper implements IOpenAIWrapper {
+ async chat(prompt: string): Promise<{ response: string }> {
+ try {
+ const response = await openai.chat.completions.create({
+ model: 'gpt-3.5-turbo',
+ messages: [{ role: 'user', content: prompt }],
+ })
+
+ const openaiResponse = response.choices.join(', ')
+
+ return Promise.resolve({ response: openaiResponse })
+ } catch (e) {
+ return Promise.reject(e)
+ }
+ }
+}
diff --git a/src/middleware.ts b/src/middleware.ts
deleted file mode 100644
index 2013d45..0000000
--- a/src/middleware.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
-import createCacheClient from '@/lib/cacherClient'
-
-const cacheClient = createCacheClient()
-
-const cacheRequestWithKey = async (key: string) => {
- const cacheHit = await cacheClient.get(key)
- if (cacheHit !== null) return Response.json(JSON.parse(cacheHit))
-
- const response = NextResponse.next()
-
- const body = await response.json()
-
- console.log(body)
-
- cacheClient.put(key, JSON.stringify(body))
-
- return Response.json(body)
-}
-
-export async function middleware(request: NextRequest) {
- if (request.method === 'POST') {
- const key = `${request.nextUrl.pathname}-${JSON.stringify(
- await request.json()
- )}`
- return cacheRequestWithKey(key)
- }
-}
-
-export const config = {
- matcher: ['/api/image/description/v1'],
-}