https://www.ncloud.com/ 에 접속해 로그인 후(메뉴 > 서비스 > 구현할 서비스 선택 후 이용 신청)
메뉴 > 서비스 > AI Service CLOVA Face Recognition > 사용가이드 > CFR API v1 바로가기(API 가이드로) > 왼쪽 메뉴 탭에서 celebrity(유명인 얼굴 인식) > API 예제에서 Java 복사하기
2022.04.06 - [멀티캠퍼스 풀스택 과정/AI] - [CFR(Face Recognition)] 얼굴인식 구현하기
지난 포스팅에서 쓰인 home.jsp 사용하기
1. home.jsp에 celebrity form 연결
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>home.jsp</title>
</head>
<body>
<h1>Ai Service API</h1>
<ol>
<li><a href="/cfrform">CFRecognition:얼굴감지</a></li>
<li><a href="/cfrform2">CFR(Celebrity):유명인감지</a></li>
</ol>
</body>
</html>2. Home에서 CFR(Celebrity)로 넘어갈 파일 생성 Clova_cfr_celebrity.jsp
기존에 있던 Clova_cfr_recognition.jsp와 파일 구조는 동일
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clova_cfr_celebrity</title>
</head>
<body>
<form method="post" id="uploadForm" enctype="multipart/form-data" >
이미지 선택 : <input type="file" id="image" name="image"/><br/>
<button>확인</button>
</form><br/>
<textarea id="text" rows="10" cols="100"></textarea>
</body>
</html>데이터를 Ajax로 보내기
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
$("#uploadForm").submit(function(){
event.preventDefault();
let data = new FormData($("#uploadForm")[0]); // 폼이 한 개 밖에 없어서
$.ajax({
type:"post",
dataType:"text",
url:"/cfrCelebrity", // PostMapping("/cfrCelebrity")
processData:false,
contentType:false,
data:data,
success:function(result){
$("#text").val(result);
}
});
});
});
</script>
</head>
<body>
<form method="post" id="uploadForm" enctype="multipart/form-data" >
이미지 선택 : <input type="file" id="image" name="image"/><br/>
<button>확인</button>
</form><br/>
<textarea id="text" rows="10" cols="100"></textarea>
</body>
</html>3. 맵핑할 Controller생성하기
@GetMapping("/cfrform2")
public String cfrForm() {
return "clova_cfr_celebrity";
}
@PostMapping("/cfrCelebrity")
@ResponseBody
public String celebrity() {
}
}1) 애플리케이션 클라이언트 아이디값과 시크릿값을 구한다.
2) 경로를 구하고, 파일업로드할 메서드를 넣는다. (try-catch문에), imgFile = path + "/" + filename으로 변경
3) response 객체를 젼역변수로 설정하고 return값을 return.toString()으로
@Controller
public class Clova_CFR_celebrity {
@PostMapping("/cfrCelebrity")
@ResponseBody
public String celebrity(@RequestParam("image") MultipartFile file, HttpSession session) {
StringBuffer reqStr = new StringBuffer();
String clientId = "애플리케이션 클라이언트 아이디값";
String clientSecret = "애플리케이션 클라이언트 시크릿값";
String path = session.getServletContext().getRealPath("/file");
StringBuffer response = new StringBuffer();
try {
// 파일 업로드
String filename = ClovaFileUpload.fileUpload(path, file);
String paramName = "image"; // 파라미터명은 image로 지정
String imgFile = path+"/"+filename;
File uploadFile = new File(imgFile);
String apiURL = "https://naveropenapi.apigw.ntruss.com/vision/v1/celebrity"; // 유명인 얼굴 인식
URL url = new URL(apiURL);
HttpURLConnection con = (HttpURLConnection)url.openConnection();
con.setUseCaches(false);
con.setDoOutput(true);
con.setDoInput(true);
// multipart request
String boundary = "---" + System.currentTimeMillis() + "---";
con.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + boundary);
con.setRequestProperty("X-NCP-APIGW-API-KEY-ID", clientId);
con.setRequestProperty("X-NCP-APIGW-API-KEY", clientSecret);
OutputStream outputStream = con.getOutputStream();
PrintWriter writer = new PrintWriter(new OutputStreamWriter(outputStream, "UTF-8"), true);
String LINE_FEED = "\r\n";
// file 추가
String fileName = uploadFile.getName();
writer.append("--" + boundary).append(LINE_FEED);
writer.append("Content-Disposition: form-data; name=\"" + paramName + "\"; filename=\"" + fileName + "\"").append(LINE_FEED);
writer.append("Content-Type: " + URLConnection.guessContentTypeFromName(fileName)).append(LINE_FEED);
writer.append(LINE_FEED);
writer.flush();
FileInputStream inputStream = new FileInputStream(uploadFile);
byte[] buffer = new byte[4096];
int bytesRead = -1;
while ((bytesRead = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
outputStream.flush();
inputStream.close();
writer.append(LINE_FEED).flush();
writer.append("--" + boundary + "--").append(LINE_FEED);
writer.close();
BufferedReader br = null;
int responseCode = con.getResponseCode();
if(responseCode==200) { // 정상 호출
br = new BufferedReader(new InputStreamReader(con.getInputStream()));
} else { // 오류 발생
System.out.println("error!!!!!!! responseCode= " + responseCode);
br = new BufferedReader(new InputStreamReader(con.getInputStream()));
}
String inputLine;
if(br != null) {
//StringBuffer response = new StringBuffer();
while ((inputLine = br.readLine()) != null) {
response.append(inputLine);
}
br.close();
System.out.println(response.toString());
}
} catch (Exception e) {
System.out.println(e);
}
return response.toString();
}
}
만약 value값에 한글이 깨지면 Preferences > Workspace > Text file encoding에서 UTF-8로 바꿔야한다!
그 외에도 Web에 CSS Files, HTML Files, JSP Files, XML Files를 다 UTF-8로 바꾸기!
혹시라도 안되면 application.properties에 한글인코딩 추가하기!!
server.port=port숫자
spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.jsp
#한글인코딩
spring.mandatory-file-encoding=UTF-8
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.enabled=true'멀티캠퍼스 풀스택 과정 > AI' 카테고리의 다른 글
| AI[CLOVA Voice] 텍스트를 음성으로 변환하기 (0) | 2022.04.07 |
|---|---|
| [CFR(Face Recognition)] 얼굴인식 구현하기 (0) | 2022.04.06 |
