diff --git a/dockerfile b/dockerfile index e5675da..b28b1c6 100644 --- a/dockerfile +++ b/dockerfile @@ -22,7 +22,7 @@ COPY . . # ENV NEXT_TELEMETRY_DISABLED 1 -RUN yarn build +# RUN yarn build # If using npm comment out above and use below instead # RUN npm run build diff --git a/next.config.js b/next.config.js index aeed392..d3d0106 100644 --- a/next.config.js +++ b/next.config.js @@ -3,7 +3,14 @@ const nextConfig = { reactStrictMode: true, output: 'standalone', images: { - domains: ['13.209.39.139'], + remotePatterns: [ + { + protocol: 'http', + hostname: '13.209.39.139', + port: '31192', + pathname: '/api/**', + }, + ], }, compiler: { styledComponents: true, diff --git a/src/app/dashboard/components/Dashboard.tsx b/src/app/dashboard/components/Dashboard.tsx index 5b0b224..906c102 100644 --- a/src/app/dashboard/components/Dashboard.tsx +++ b/src/app/dashboard/components/Dashboard.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/no-img-element */ 'use client'; import React from 'react'; @@ -22,27 +23,23 @@ function Dashboard() { <div className="grid grid-cols-8 p-12 h-[calc(100vh-150px)]"> {getResult.data && ( <> - <div className="mt-12 col-span-2"> + <div className="mt-20 col-span-2"> <h2 className="text-lg font-semibold text-center">Input Image</h2> - <div className="relative w-full h-[calc(50vh-250px)] mt-2 mb-20 "> - <Image + <div className="relative w-full h-[calc(50vh-250px)] mt-2 mb-12"> + <img src={getResult.data?.origin.imageUrl} alt="origin image" - fill - sizes="100vw, 100vh" - priority + className="w-full h-full" /> </div> <h2 className="text-lg font-semibold text-center"> Inference Result Image </h2> <div className="relative w-full h-[calc(50vh-250px)] mt-2"> - <Image + <img src={getResult.data?.latest.imageUrl} alt="inference image" - fill - sizes="100vw, 100vh" - priority + className="w-full h-full" /> </div> </div> diff --git a/src/app/dashboard/types/index.ts b/src/app/dashboard/types/index.ts index 8aaf8d5..cba2756 100644 --- a/src/app/dashboard/types/index.ts +++ b/src/app/dashboard/types/index.ts @@ -2,10 +2,10 @@ import { StaticImageData } from 'next/image'; export interface ResultDataType { origin: { - imageUrl: StaticImageData; + imageUrl: string; }; latest: { - imageUrl: StaticImageData; + imageUrl: string; timestamp: number; particleSizeRatio: { range: string; count: number }[]; };