Merge pull request #20 from Doer-org/client-connect-server

Client connect server
Doer-org · Nov 5, 2023 · a7ce1fc · a7ce1fc
2 parents 59cf5fd + d40c146
commit a7ce1fc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 36 deletions.
diff --git a/client/next.config.js b/client/next.config.js
@@ -1,5 +1,8 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  images: {
+    domains: ["storage.googleapis.com"],
+  },
   webpack: (config) => {
     config.externals = [...config.externals, { canvas: "canvas" }]; // required to make Konva & react-konva work
     return config;

diff --git a/client/src/app/draw/page.tsx b/client/src/app/draw/page.tsx
@@ -1,48 +1,70 @@
 "use client";
 import { TPoints } from "@/types/app";
 import Konva from "konva";
+import { useRouter } from "next/navigation";
 import { useRef, useState } from "react";
 import { ZenMaruGothic } from "../../../font/font";
 import { DrawEditor } from "./components/DrawEditor";
 
 export default function Draw() {
   const [title, setTitle] = useState("");
   const [points, setPoints] = useState<TPoints>([]);
+  const [isPending, setIsPending] = useState(false);
   const stageRef = useRef<Konva.Stage>(null);
+  const router = useRouter();
 
   const onSubmit = async () => {
-    await stageRef.current
-      ?.toImage()
-      .then((data) => {
-        const imgElment = data as HTMLImageElement;
-        console.log("title", title);
-        console.log("imgElement", imgElment.src);
+    setIsPending(true);
+    await stageRef.current?.toImage().then(async (data) => {
+      const imgElment = data as HTMLImageElement;
+      await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/image`, {
+        method: "POST",
+        body: JSON.stringify({ base64: imgElment.src }),
       })
-      .then(() => {
-        // POST処理した返り値でrouter.pushする
-      });
+        .then(async (data) => {
+          const imageResultData: { data: { id: string } } = await data.json();
+          await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/inference`, {
+            method: "POST",
+            body: JSON.stringify({ prompt: title, id: imageResultData.data.id }),
+          }).then(async (data) => {
+            const inferenceResult: { data: { id: string } } = await data.json();
+            router.push(`${process.env.NEXT_PUBLIC_CLIENT_URL}/result/${inferenceResult.data.id}`);
+          });
+        })
+        .catch(() => {
+          setIsPending(false);
+        });
+    });
   };
 
   return (
-    <div className={`${ZenMaruGothic.className} flex flex-col gap-1`}>
-      <div className="flex gap-1 max-w-[95vw] m-auto">
-        <input
-          id="title"
-          placeholder="タイトル"
-          type="text"
-          className="p-1 rounded-sm max-w-[70%]"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-        />
-        <button onClick={onSubmit} className="border-2 p-1 rounded-sm">
-          保存
-        </button>
-      </div>
+    <>
+      {isPending && (
+        <div className="w-screen h-screen absolute top-0 left-0 flex items-center justify-center bg-white">
+          結果を推論中です...
+        </div>
+      )}
+
+      <div className={`${ZenMaruGothic.className} flex flex-col gap-1`}>
+        <div className="flex gap-1 max-w-[95vw] m-auto">
+          <input
+            id="title"
+            placeholder="タイトル"
+            type="text"
+            className="p-1 rounded-sm max-w-[70%]"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+          <button onClick={onSubmit} className="border-2 p-1 rounded-sm">
+            保存
+          </button>
+        </div>
 
-      <DrawEditor pointsState={{ state: points, setState: setPoints }} stageRef={stageRef} />
-      <ul className="max-w-[95vw] m-auto">
-        <li className="text-sm">キャンバス内のタップで現在位置に点を打てます</li>
-      </ul>
-    </div>
+        <DrawEditor pointsState={{ state: points, setState: setPoints }} stageRef={stageRef} />
+        <ul className="max-w-[95vw] m-auto">
+          <li className="text-sm">キャンバス内のタップで現在位置に点を打てます</li>
+        </ul>
+      </div>
+    </>
   );
 }
diff --git a/client/src/app/result/[id]/page.tsx b/client/src/app/result/[id]/page.tsx
@@ -1,13 +1,15 @@
-export default function Result({ params }: { params: { id: string } }) {
+import Image from "next/image";
+export default async function Result({ params }: { params: { id: string } }) {
   const { id } = params;
-  // TODO: ここでid使ってfetchしてくる
+  const image: { data: { url: string } } = await (await fetch(`${process.env.SERVER_URL}/image/${id}`)).json();
+
   return (
-    <main className='flex min-h-screen flex-col items-center justify-center gap-5 bg-secondary'>
-      <h1 className='font-bold text-4xl text-main stroke-black text-stroke'>
-        DUCK STREAM
-      </h1>
-      <div className='w-[95vw] h-[65vh] bg-slate-300 rounded-sm' />
-      <a className='text-2xl hover:text-main' href='/'>
+    <main className="flex min-h-screen flex-col items-center justify-center gap-5 bg-secondary">
+      <h1 className="font-bold text-4xl text-main stroke-black text-stroke">DUCK STREAM</h1>
+      <div className="p-5">
+        <Image src={image.data.url} width={300} height={300} alt="result-image" />
+      </div>
+      <a className="text-2xl hover:text-main" href="/">
         TOPへ
       </a>
     </main>