20221207 TIL

오늘의 한 일

• 최종 프로젝트 - 프론트엔드 연결

 

프론트엔드 연결

 

트러블 슈팅 - 병변 탐지 모델

 

포스트맨으로는 잘 적용되던 병변탐지가 자바스크립트를 통해 html상에서 이미지 파일을 받아서 POST 요청을 보내려고 하니까 처음에는 잘 작동하더니 이후로 잦은 에러가 발생

 

django.utils.datastructures.multivaluedictkeyerror: 'input_img' 에러

 

검색해보니 요청을 보낼 때 파일 없이 글만 작성하면 발생한다고 한다.

 

[07/dec/2022 15:45:43,641] - broken pipe from ('127.0.0.1', 9436) 에러

 

잦은 입출력 호출로 발생한다고 한다. 예를 들어 처리 중인 요청을 사용자가 기다리지 않고, 새로고침이나 종료, 연속 클릭 등으로 제대로 연결이 마무리되지 않았을 때 소켓이 끊어져 에러가 발생한다고 한다

 

두가지 에러의 공통점은 결국 요청을 보내면서 뭔가가 더 이루어진다는 점. 1 2번 에러 모두 클릭을 두어번은 한것처럼 느껴진다 싶어서 무엇이 문제일까 고민을 해보니..

 

요청 버튼을 button으로 만들어서 클릭시 새로고침이 일어나는것이였다.. 바로 입력 타입을 바꿔봤더니 해결

<form>
	<input type="file" id="img">
	<span onclick="CreateInference()">확인하기</span>
</form>

inference 페이지(일단 구성요소만 집어넣음)

yolov5 모델 불러와서 새 추론 모델을 생성하고 response data까지 받으면 alert와 함께 result 페이지로 이동 확인

 

다만 로딩까지 시간이 꽤 오래걸려서 로딩 바 이미지같은걸 구현하고싶긴 하다..

 

 

 

result 페이지(inference 모델의 가장 최신(latest)를 get해서 띄워줌)

 

일단 집어넣을건 다 집어넣었고 css는 영 잼병이라 팀원분들이 힘내주실거라 믿는다.. ㅋㅋ

 

프로필 페이지에도 자바스크립트 파일을 만들어놓긴 했는데 이건 결국 로그인 페이지가 구현이 되어야 확인을 할 수 있어서 일단 만들어두기만

 

 

// temp_html 형식 만들어서 붙이기(append)

// window.onload() = async function loadProfile() {
//     const response = await fetch(`${backend_base_url}/users/profile/`, {
//         headers: {
//           Authorization: "Bearer " + localStorage.getItem("access"),
//         },
//         method: "GET",
//       });
//       profile = await response.json();
//       const email = profile.email
//       const profile_img = profile.profile_img
//       const name = profile.name
//       const introduce = profile.introduce
//       console.log(email, profile_img, name, introduce)
//       let temp_html = `<div class="profile">
//       ${email} ${profile_img}, ${name}, ${introduce}
//       </div>`

//       $('#profile-cards').append(temp_html)
// }


// createElement 이용하기

window.onload = async function loadMyProfile() {
    const response = await fetch(`${backend_base_url}/user/profile/`, {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("access"),
      },
      method: "GET",
    });
    profile = await response.json();
  
    const profile_img = document.getElementById("profile_img");
    const email = document.getElementById("email");
    const name = document.getElementById("name")
    const introduce = document.getElementById("introduce");
  
    let image = document.createElement("img");
    image.setAttribute("class", "profile_image");
    image.src = `${backend_base_url}${profile.profile_img}`;
    profile_img.appendChild(image);
    name.innerText = profile.name;
    email.innerText = profile.email;
    introduce.innerText = "[ " + profile.introduce + " ]";
  };

temp_html의 경우는 기본으로 만들어놓은 뼈대를 그대로 옮겨서 각 필요한 부분에 ${ㅇㅇㅇ}를 붙여주면 될 것이고

 

createElement의 경우는 미리 html 칸에 필요한 부분들을 집어넣고 데이터를 불러와서 각 id의 innerText나 img는 src의 형태로 집어넣을 수 있겠다 ㅇㅇ;