Merge branch 'develop' of https://github.com/SVTeamJ/DeepBlue into ch…

…ore/#63

.gitignore

@@ -2,3 +2,4 @@
 *__pycache__*
 .DS_Store
 .env
+aws_key.py

backend/api/endpoints/ai.py

@@ -1,28 +1,24 @@
 from .expect import fish_detect
 from fastapi import File, UploadFile
 from fastapi import APIRouter, Depends
-
+from .aws.bucket import *
 import json 
 
 router = APIRouter()
 
 
-
 @router.post("/")
 async def infer(file: UploadFile = File()):
     content = await file.read()
     filename = f"{file.filename}.jpg"
     with open(filename, "wb") as fp:
         fp.write(content)
+        post_bucket(content,filename)
 
     result = fish_detect(filename)
     with open("api/endpoints/data.json", 'r') as file:
         fish_data = json.load(file)
         for data in fish_data:
             if data["pk"] == result:
+                data["url"] = "https://svj-deepblue.s3.ap-northeast-2.amazonaws.com/" + filename 
                 return data
-
-
-
-
-

backend/api/endpoints/aws/bucket.py

@@ -0,0 +1,16 @@
+from .connection import Connect
+#from .config import S3_BUCKET
+from botocore.exceptions import ClientError
+S3_BUCKET="svj-deepblue"
+
+
+def post_bucket(image_file: str, key_name: str):
+    connect = Connect()
+    with connect as client:
+        try:
+            client = connect.connect()
+            client.put_object(
+                Body=image_file, Bucket=S3_BUCKET, Key=key_name, ContentType="image.jpeg"
+            )
+        except ClientError as e:
+            print("Error during image upload. {}".format(e.response["Error"]["Code"]))

backend/api/endpoints/aws/connection.py

@@ -0,0 +1,22 @@
+import boto3
+from .aws_key import AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY
+# 해당 모듈은 버켓 보안을 위해 .gitignore 에 추가되어 있습니다. 추가 문의는 팀 리더에게 해주세요.
+AWS_ACCESS_KEY_ID=AWS_ACCESS_KEY_ID
+AWS_SECRET_ACCESS_KEY=AWS_SECRET_ACCESS_KEY #임시구동용
+
+class Connect:
+    def __init__(self):
+        self.client = boto3.client(
+            "s3",
+            aws_access_key_id=AWS_ACCESS_KEY_ID,
+            aws_secret_access_key=AWS_SECRET_ACCESS_KEY,
+        )
+
+    def __enter__(self):
+        return self 
+
+    def connect(self):
+        return self.client
+
+    def __exit__(self, exc_type, exc_val, exc_tb):
+        ...

backend/requirements.txt

@@ -60,3 +60,4 @@ typing_extensions==4.4.0
 urllib3==1.26.13
 uvicorn==0.20.0
 wcwidth==0.2.5
+boto3

frontend/package.json

@@ -19,7 +19,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-router-dom": "6.6.1",
+    "react-router-dom": "^6.6.1",
+    "react-wavify": "^1.7.0",
     "recoil": "0.7.6",
     "tailwindcss": "3.2.4"
   },

frontend/src/components/DetailFishList/index.scss

@@ -58,7 +58,7 @@
 .DetailPage_inform-input {
   display: flex;
   flex-direction: column;
-  border: 3px solid #0e1733;
+  border: 1.5px solid #0e1733;
   padding: 1rem;
   border-radius: 1rem;
   min-width: 90%;

frontend/src/components/insertImage/index.scss

@@ -84,6 +84,7 @@
   margin: 0 auto;
   margin-top: 12px;
   opacity: 0;
+  cursor: pointer;
   animation: showInsertImage 1s 1.7s alternate forwards;
   &:hover {
     scale: 1.05;

frontend/src/components/insertImage/index.tsx

@@ -1,27 +1,58 @@
 import Nav from '@/components/nav';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Loading from '../loading';
 import download from '@/assets/download.png';
-import smallFish from '@/assets/smallFish.png';
-import seaweeds from '@/assets/seaweeds.png';
 import './index.scss';
 import { useDropzone } from 'react-dropzone';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { restFetcher } from '@/queryClient';
+import Loading2 from '../loading2';
 const InsertImage = () => {
+  const navigate = useNavigate();
   const imageRef = useRef<HTMLInputElement>(null);
   const [imagefile, setImageFile] = useState<File>();
   const [preview, setPreview] = useState<string>('');
 
+  const { mutate, isLoading, isSuccess, isError } = useMutation(
+    (formData: FormData) => {
+      return restFetcher({
+        method: 'POST',
+        path: 'http://localhost:8000/api/ai',
+        body: formData,
+      });
+    },
+  );
+
   //이미지 클릭시 file선택창이 나오게하는 함수
   const openFile = () => {
     imageRef.current?.click();
   };
 
+  const sendImage = () => {
+    if (!imagefile) {
+      alert('먼저 사진을 업로드해주세요 !');
+      return;
+    }
+    const formData = new FormData();
+    formData.append('file', imagefile);
+    mutate(formData, {
+      onSuccess: (data) =>
+        navigate('/result', {
+          state: {
+            data,
+          },
+        }),
+    });
+    //formData를 post요청 => 성공한다면 result페이지로 이동
+  };
+
   //이미지를 올리고 저장해주는 함수
   const raiseImg = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const file = e.target?.files[0];
+      console.log(file);
       setImageFile(file);
-      const formData = new FormData();
-      formData.append('img', file);
     }
   };
 
@@ -51,12 +82,13 @@ const InsertImage = () => {
     <>
       <div className="insert_box">
         <div {...getRootProps()} onClick={openFile} className="insert_picture">
-          {preview && (
+          {isLoading ? (
+            <Loading2 />
+          ) : preview ? (
             <div>
               <img className="insert_picture-previewImg" src={preview}></img>
             </div>
-          )}
-          {!preview && (
+          ) : (
             <>
               <img className="insert_picture-img" src={download} />
               <p>이곳을 클릭하거나 사진을 올려주세요 !</p>
@@ -68,11 +100,13 @@ const InsertImage = () => {
           onChange={raiseImg}
           ref={imageRef}
           type="file"
-          accept="image/*"
+          // accept="image/*"
           className="hidden"
         ></input>
       </div>
-      <div className="insert_search">검색</div>
+      <div onClick={sendImage} className="insert_search">
+        검색
+      </div>
     </>
   );
 };

frontend/src/components/loading2/index.scss

@@ -0,0 +1,29 @@
+@import '../../media.scss';
+
+.loading {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  z-index: 99;
+}
+
+.spinner {
+  min-width: 60px;
+  min-height: 60px;
+  border: 5px solid rgba(255, 255, 255, 0.1);
+  border-right: 5px solid black;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

frontend/src/components/loading2/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.scss';
+const Loading2 = () => {
+  return (
+    <div className="loading">
+      <div className="spinner"></div>
+    </div>
+  );
+};
+
+export default Loading2;

frontend/src/main.tsx

@@ -11,9 +11,9 @@ import { getClient } from './queryClient';
 import * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
 import reset from './reset.scss';
-if (import.meta) {
-  worker.start();
-}
+// if (import.meta.env.DEV) {
+//   worker.start();
+// }
 Sentry.init({
   dsn: `${import.meta.env.VITE_Sentry}`,
   integrations: [new BrowserTracing()],

frontend/src/mocks/handlers.ts

@@ -15,6 +15,14 @@ export interface fishInform {
   description: string;
 }
 
+export interface fishResult {
+  fish_type: string;
+  toxicity: string;
+  open_season: string;
+  closed_season: string;
+  description: string;
+}
+
 const fishList: fishInform[] = [
   {
     fish_type: '갈치',