[TIL 2024. 05. 24] elder_start.html과 elder_menu.html 오류 수정

얼굴인식의 결과가 "고령층"이면, 자동으로 사용자가 보는 화면이 elder_start.html로 시작되게 된다

elder_start는 음성인식 중임을 알리는 화면이다.

 

이 화면에서 처리되어야 하는 것은 다음과 같다

• 화면이 로드되자마자 음성인식을 감지하기 시작해야 하고
• 인식한 음성을 처리하여 gpt에게 보내서 해당하는 해시태그가 있는 메뉴를 필터링받고
• 필터링된 메뉴가 elder_menu.html에 나타나도록 하기

여기서 고려되어야 하는 것은 음성인식된 부분을 gpt에게 보내서 받은 메뉴 필터링 결과를 받는 것은 음성인식이 진행되는 elder_start.html에서 이루어지고, 그 결과 필터링된 메뉴가 출력되는 것은 elder_menu.html이라는 점이었다.

 

따라서 elder_start.html에서 받은 gpt의 response를 어딘가에 저장해서 사용할 수 있도록 코드를 수정해야 했다.

response를 저장할 수 있는 매체는 다양하지만, 쿠키와 로컬스토리지 중 후자를 선택했다(쿠키는 웹에서만 사용가능하다는 확장성의 한계가 있으므로)

 

 

elder_start.html

 

elder_menu.html

---

하지만 response를 받아 필터링된 메뉴를 가져올 수 있게 코드를 수정했음에도 여전히 음성인식의 결과 elder_menu.html에 출력되는 메뉴 데이터는 없었다. (문제의 원인을 알기 위해 코드에 console.log문을 산재해봤다)

 

그리고 가끔 음성인식의 결과도 잘 찍힐 때도 있고, 아닐 때도 있었다.

(cf. crome브라우저에서는 음성인식 멘트 자체가 안들리는 문제가 있었다..지현님도 crome에서는 안됐다고 하셨고, 현준님도 확인해보니 crome에서는 안 돼서 다른 브라우저를 사용하셨다고 한다. 나는 edge를 사용했다)

"아이스 아메리카노"가 제대로 음성인식 되지 않은 경우

"아이스 아메리카노"가 제대로 음성인식된 경우

 

계속 해보다 보니 음성인식이 제대로 안되는 경우의 원인을 알 수 있었다.

 

즉, utterance를 다 읽어주고 나서 너무 빠르게 메뉴에 대한 주문을 말하는 경우에는 인식이 제대로 되지 않는 경우가 발생하는 것이었다. 따라서 utterance에 대한 speak가 끝난 후 약 3초 정도 후에 여유를 두고 메뉴에 대한 주문을 하면 별일없이 음성인식이 잘 되었다. (이는 완성도에 관한 부분이므로, 일단 기능구현이 1차적으로 끝난 후 보강해보기로 했다)

 

---

get menus()자체가 views.py에서 이뤄지므로 views.py에도 print문을 찍어본 결과 gpt의 response결과가 잘 저장되었다가 views.py까지는 잘 넘어오는 것을 확인할 수 있었다.

current_user(staff계정)이 anonymoususer로 되어 있다

current_user(staff계정)이 admin에서 로그인한 staff계정으로 잘 들어가 있다

 

하지만 내가 작성한 코드가 아니라서 문제 해결의 한계가 있어서 팀원들과 의논하고 문제의 원인을 찾아본 결과, 해당 태그를 가진 staff로 로그인하지 않은 상태여서 해당 해시태그와 그에 따른 메뉴 정보 자체에 접근하지 못하는 것이 문제임을 알게 되었다. (현준님이 로직을 구성할 때, 한번이라도 해당 staff계정으로 로그인해야 정보를 가져올 수 있게 짜셨다 함)

 

그 결과, admin에서 해당 staff계정으로 로그인한 후에 elder_start에서 음성인식을 하고 elder_menu로 넘어가니 css는 아직 엉망이어도 메뉴의 데이터를 잘 받아오는 것을 확인할 수 있었다!

---

또 이것저것 확인을 하다 보니, "복숭아가 들어간 음료를 추천해줘"라는 음성 input에 대해서 연관성이 떨어지는 메뉴들을 추천해주는 문제를 확인했다.

 

또한 아래와 같이 console에서 볼 수 있고, 음성 출력되는 메뉴와는 다른 메뉴가 팝업에 출력되는 문제도 있었다.

 

추천은 복숭아 스무디인데, popup에는 아이스 바닐라 라떼가..ㅎㅎ

 

먼저, "복숭아 관련"음료 추천은 문제점을 확인해본 결과 "복숭아 스무디"와 "복숭아 음료"에 "복숭아"라는 해시태그가 없었기 때문이었다. 두 메뉴에 각각 "복숭아"라는 해시태그를 추가해주니, 두 가지 메뉴만 잘 출력되었다.

 

즉, 메뉴 작성시에 해시태그는 최대한 상세하게, 메뉴의 원재료에 대한 정보도 포함해주어야 메뉴 필터링 결과의 정확도를 높일 수 있다.

 

또, 위의 두 번째 문제처럼 음성과 다른 메뉴가 팝업에 뜨는 문제는 메뉴 데이터를 가져올 때 미리 정해진 설정이 없기 때문에 해당하는 모든 메뉴를 가져오면서 발생하는 문제였다.

 

그래서, template기획시를 참고하여 아래와 같이 수정했다

• 메뉴 필터링 결과가 3개 이상이면, 3개까지의 메뉴만 가져오고
• 메뉴 필터링 결과가 3개 미만이면, 해당하는 메뉴만 가져오도록
• 팝업창에는 최대 3가지 메뉴 중 첫번째 메뉴를
• 팝업 아래의 2개 카드에는 나머지 두 개의 메뉴를 넣도록

그 결과는 아래와 같다(css도 추가적으로 조금 수정하고 push, merge했다)