비개발자가 CURSOR로 웹앱만들기-의약품 식별앱3 (사진으로 식별하기!!)

소개

지난번에 이어 마지막으로 사진을 찍으면 GPT가 이미지 분석을 해주고, GPT의 분석 결과로 의약품 식별 검색을 보내는 기능을 구현해보겠습니다.

진행 방법

지난번에 완성한 페이지에 추가로 GPT VISION을 넣어달라고 하였습니다.

@Codebase @GPTvision 사진검색기능을 만들겠습니다.
사진을 주면 GPT에게 아래와 같은 프롬프트와 함께 보내서 답변을 받아오게해주세요.

`
당신은 의약품 식별 전문가입니다.  아래 순서를 따르세요.
1. 사진속 의약품 개수를 확인하세요.
2. 각 의약품별로 아래 출력 형식대로 출력해주세요. 제형, 모양, 색상, 분할선은 아래 중에 선택해주세요.
3. 선택지: "제형": ["정제", "경질캡슐", "연질캡슐", "기타", "전체"], "모양": ["원형", "타원형", "장방형", "반원형", "삼각형", "사각형", "마름모형", "오각형", "육각형", "팔각형", "전체", "기타"], "색상": ["하양", "노랑", "주황", "분홍", "빨강", "갈색", "연두", "초록", "청록", "파랑", "남색", "자주", "보라", "회색", "투명", "전체"], "분할선": ["없음", "+형", "-형", "기타", "전체"], 
4. 출력형식:
{
"총개수": "2"
}
"식별정보" : [
{
"의약품1": {
"식별문자": "",
"식별마크": [],
"제형": [],
"모양": [],
"색상": [],
"분할선": []
},
"의약품2": {
"식별문자": "",
"식별마크": [],
"제형": [],
"모양": [],
"색상": [],
"분할선": []
}
}
]
`

그랬더니 아래처럼 파일도 변경해주고, 추가해야하는 패키지도 알려줍니다.

그런데 제가 서버를 구동시켜놓은 상태에서 써도 되는지 몰라서 추가로 물어보았습니다.

차근차근 알려주진 않았지만 하나씩 물어보며 진행하였습니다. .env 파일도 따로 만들어주면서 여기에 API key를 넣으라고 하더군요.

한번에 되지는 않았습니다. 제가 'GPT-VISION'으로 콕 찝어 말했더니 모델명을 GPT-VISION으로 해줬는데, 더이상 사용할 수 있는 모델이 아니였나봐요. 제가 안된다고 얘기할때마다 GPT-VISION-ver2, ver1 반복해서 바꾸기만 하더라구요. 결국 제가 직접 API 문서를 읽고 버전명은 4o-mini로 바꿔서 넣었습니다.

그러더니 갑자기 아래처럼 GPT의 답변을 이렇게 이쁘게 뿌려주었습니다.