유영은

데이터와 인공지능
3️⃣

원재료 사진을 찍으면 비건 여부를 판별해주는 서비스 Vday를 제작한 뒤, 제작기를 작성해 보았습니다!

3️⃣

💫 Hello Knockers!


No-code로 비건 판별 서비스 Vday를 만들고 있는 유영은입니다.

이전 쇼케이스에도 웹버전을 몇번 올렸던 것을 보실 수 있을텐데요ㅎㅎ
저는 이후로도 계속 Vday 서비스를 실제 앱으로도 출시하고자 개발 중에 있었습니다!
어느 정도 개발이 마무리되어 이제 제가 어떻게 제작했는지에 대한 튜토리얼과 겪었던 시행착오들을 같이 공유해보고자 합니다.





이전 작업(link)과의 차이가 무엇이냐고 물어보신다면,


  1. 기존 비건/논비건만 분류하던 Vday가 이제 비건/논비건/락토/락토오보/페스코의 5가지 비건 종류를 판별할 수 있게 되었습니다!


2.  자신이 등록한 식품 정보를 마이페이지에 기록, 수정할 수 있게 되었습니다. 자주 먹는 식품 같은 경우 또 새로 판단하지 않고도 간단하게 열람, 이용하기 위함이죠!


3.  Vday는 웹앱으로도 배포되어 모두들 모바일웹 혹은 PC로도 사용해보실 수 있습니다 😉

모두와 노코드에 대해 더 많은 정보를 공유하고, 저 또한 힘들게 개발한 과정을 잊지 않고자 Vday 제작에 관한 튜토리얼을 작성해 보았는데요. 같은 기능을 구현하더라도 여러가지 방식의 제작이 가능하니, 혹시 이 부분은 이렇게 하면 더 효율적이었겠다 싶은 부분이 있다면 자유롭게 피드백 부탁드립니다 :)


Bubble과 API관련 내용과 튜토리얼은 Knock.ai 게시판의 <Epoch 1-AI 채용하기> 부분에 올려두었습니다.




  1. API 연결 (Easy OCR, Google Vision, Nocodeapi) 

2.  Bubble ) 비건 판별 기능 만들기

3.  Bubble ) 컨텐츠를 저장, 편집할 수 있는 게시판 만들기




Like Comment

[No-code challenge] Happy Vegan Everyday : Vday 웹용으로 리뉴얼

3️⃣
 

💫 Hello Knockers!


Knock.ai 쇼케이스를 찾아보면 비건 판별 서비스 Vday가 있을 텐데요.

저는 이번에 No-code 챌린지를 위해서 기존 12월에 Django로 제작 되었던 Vday를 100% No-code 로 리뉴얼해서 제출했답니다! Vday의 자세한 Usecase와 기존의 개발기는 노크AI 쇼케이스에서 찾아볼 수 있어요. (링크) 




이렇게 확실히 제출되었다는 확인 메일도 받았습니다 🙌

제가 제출한 웹 서비스 페이지입니다! 한국의 마트에 비건 표기가 의무화 되어있지 않아 비건들이 겪는 불편함을 해결하고자, 식품의 원재료명 이미지를 넣으면 비건 여부를 판별해주는 서비스를 제작했어요.





유럽에서 열리는 챌린지이기 때문에 심사위원들이 직접 테스트 해볼 수 있는 한국어 원재료 샘플 이미지도 첨부했습니다 :) 
샘플 이미지중 하나를 다운받아 오른쪽의 공간에 업로드하면 이렇게 됩니다.
OCR API를 호출하고, 비건 판별을 하기까지 로딩이 좀 걸려서 그 과정동안 유저에게 서비스가 멈추거나 고장나지 않았다는 사인을 주기 위해 gif를 넣었어요 ㅎㅎ

결과가 나오기 전까지 귀여운 앵무새와 함께 AI가 일하고 있으니 기다려 달라는 내용을 볼 수 있습니다. 


챌린지 마감을 위해 달리면서 귀여운 gif를 중간중간 보는게 큰 힐링이 되었습니다.



결과 화면에서는 사용자가 업로드한 이미지,  이미지에서 추출한 OCR 텍스트, 그 이미지 내에서 추출된 동물성 원재료명 총 세가지 항목이 결과로 나오게 됩니다.

이 사진은 동물성 원재료가 포함되어 있지 않아 비건이라는 판별을 받았네요. 비건 판정을 받은 이 식품은 바로바로 "포테토칩"입니다! 

편의점의 포테토칩은 비건이니 비건분들 맘껏 드시길 바라요! 🤩
(*팜유는 논란이 있으나 동물성 원료가 아니고, 모든 팜유가 문제되는 것은 아니기에 본 챌린지에서는 동물성 데이터 항목에 포함하지 않았습니다.)





또 다른 샘플 이미지를 테스트해 보았는데요. 이 제품은 '우유'가 포함되어 논비건이라는 결과가 나왔네요!
Vday에게 논비건 판정을 받은 이 제품은 바로 "맥심 화이트골드 커피믹스" 입니다. ☕️


❗️ 제가 가지고 있던 식품원재료 데이터를 Bubble과 연동해, 사진 안의 동물성 데이터의 존재 여부에 따라 비건, 논비건 판별을 내려주는 것이 제 서비스의 핵심이었는데요.

👉 자세한 제작기는 다음과 같습니다.




1. AI 기능 구현


1. Peltarion

처음에는 Peltarion으로 직접 OCR 모델을 제작해 사용하려 했습니다. 하지만 몇가지 문제가 있어 취소됐는데요.
Peltarion을 사용하지 못한 이유는 다음과 같습니다.
  1. 텍스트 추출엔 대체로 RNN 모델을 사용한다고 알려져 있는데 Peltarion은 RNN을 지원하지 않는다는 점.
  2. 1의 문제로 CNN을 이용해 낱자 하나하나씩 OCR 가능하도록 제작하려 했으나, 학습시켜야 하는 한글 낱자는 2350개인데, Class 분류를 2000개까지 밖에 할 수 없다는 점.
  3. 2의 과정을 통해 완성한 OCR 모델의 성능이 낮아, 결과적으로 한글을 제대로 읽지 못하고 있다는 점.
이런 문제로 인해 Peltarion을 쓰지 않는 것으로 결정하고 보다 성능이 좋은 OCR API를 찾는 것으로 방향을 틀었습니다.

2. Google

  1. Google Vision API를 사용하게 하자.
    • 한 달에 100건까지 무료이고, 다국어 지원이 가능하여, 다른 국가의 Vday의 원재료들만 파악할 수 있다면, 다국어 어플리케이션으로도 만들 수 있다.
  2. OAuth2 문제가 발생
  3. 기존 Thunkable이라는 툴로 계획을 하다가 , Thunkable에서는 OAuth를 처리할 수 있는 방법이 없어, 결국 Bubble로 NoCode 툴 픽스.
  4. 여러가지 찾아보았지만 Bubble에서도 OAuth2 처리를 하는게 쉽지 않아보임
  5. 챌린지용으로는 기존에 사용하려고 했던 easyOCR를 사용하기로 하고, Google vision api는 나중에 시도하기로 했습니다.

3. EasyOCR

그래서 당장 쓸 수 있는 API 중에 가장 성능이 좋았던 EasyOCR을 이용해 키 기능을 구현하기로 결정했습니다.



Ainize 데모에서 EasyOCR의 성능이 충분한지 테스트 해볼 수 있었습니다. 크롭한 원재료명 이미지를 넣으면 API가 아래와 같이 텍스트만을 추출해 줍니다.




2. Data




원재료명 데이터를 수집.
식물성 재료, 화학첨가물, 합성착향료 등의 불필요한 데이터는 전부 제하고, 동물성 원재료인 항목만 남겼습니다. Vday는 기존 Vegan, Lacto, Ovo, LactoOvo, Pesco의 5가지 항목을 분류하는 것이 최종 목표여서 0-4의 5개 숫자로 중분류를 재 라벨링 했습니다. 하지만 본 챌린지에서는 단순히 Rawmtrl의 유무만을 기준으로 비건, 논비건 판단을 했기때문에 단순히 Yes / No 의 판단만을 실행했습니다.




3. Data에 따른 비건 여부 판별

해당 스프레드 시트에서 ' RPRSNT_RAWMTRL_NM ' 항목의 원재료명만 버블로 불러왔습니다.

버블에서는 불러온 데이터를 [ 돼지, 소, 계란, ... ] 이런식으로 처리를 하는데 여기서 쉼표 ',' 를 버블에서 정규식기호로 변환되도록 find&replace 명령을 해줬습니다.
그러면 1740개의 동물성 데이터가 정규식을 이용해 전부 순서대로 입력되어 OCR 텍스트 안에 있는지 없는지 대조를 하게 됩니다.


구체적인 스프레드시트 연동, 버블에서의 정규식 사용 방법은 추후 자세한 튜토리얼을 올려볼게요 :) 



버블 데이터는 총 6개의 커스텀 데이터타입을 생성해 사용했습니다.

  1. Image : 사용자가 촬영한 이미지 데이터를 생성, 생성한 데이터의 last item을 ocr api와 연결 해준다.
  2. OCR Txt : 촬영한 이미지에서 추출한 텍스트 데이터. 이 데이터셋의 last item을 유저에게 판별 결과로 보여준다.
  3. OCR Regex Txt : 2의 데이터에서 정규식을 통해 동물성 항목만 뽑아낸 것. 마찬가지로 이 데이터셋의 last item을 유저에게 해당 성분이 포함되어 논비건이라는 결과를 보여준다.
  4. Sheetdata : Google Spreadsheet의 항목을 버블 데이터 안으로 불러온다.
  5. Sheetdata Regex.ver : 4의 데이터를 정규식 기호로 변환한 데이터.
  6. Nonvegan Ingredient : Data Type을 Yes/No로 해서 [2에 5의 내용이 없는가?]라는 질문에 답을 표시해준다. YES이면 비건, No 이면 논비건으로 페이지 이동.





Demo Link 💫

 https://vdaynocode.bubbleapps.io

웹에서 원재료명 사진을 넣으면 비건 판단을 해줘요!

다만 가져온 EasyOCR api 성능이 아직 아주 뛰어나지는 않아서 잘 크롭된 깨끗한 사진이 아니면 오류도 종종 있습니다 😂


샘플이미지나 주변 식품 사진으로 한번씩 사용해보세요ㅎㅎ







본 서비스는 Youngeun Yu & Hanjeong Lee가 No-code Challenge 참가에 목적을 두고 제작된 서비스입니다.
Like Comment

[ 인간-AI 인터랙션을 위한 디자인과 기술 개요 ] HCI 학회 세션 리뷰 #1

3️⃣
❗️이번 2021 HCI 학회에서도 AI는 역시 핫토픽이었습니다!

인간에게 의미있는 경험을 제공하는 AI 인터랙션이란 무엇인지, 어떻게 접근하면 좋을 것인지, 왜 'AI 기획'만 하더라도 어느 정도의 배경지식이  필요한지 잘 설명된 세션이 있어 간단히 공유해보려 합니다. 

🤗 리뷰 대상 : 서비스 기획자  /  UX, 프로덕트 디자이너  / UX와 AI에 관심이 있는 누구나


** HCI 학회에서 발표해주신 카이스트 송진영 교수님의 튜토리얼을 듣고 개인적으로 리뷰한 간단 요약입니다! 내용의 오류정정, 피드백, 의견 모두 환영합니다🙌 
발표자분의 입장과 저작권을 분명히 하기 위해, 저자의 의견이 아닌 개인의 의견은 이렇게 코드 박스로 구분해 두었습니다. 이렇게 회색 박스 안의 내용은 저의 주관적 견해이고, 이외의 내용은 학회 발표 내용 원본 그대로를 최대한 쉽게 전달하고자 요약한 내용입니다.



[인간-AI 인터랙션을 위한 디자인과 기술 개요]


개요 : 최근 추천 알고리즘, 챗봇, 인공지능 스피커, 자율주행 자동차 등 AI 기술을 적용한 서비스와 기기가 우리 일상의 다양한 영역에 활용되기 시작하였습니다. 이러한 AI-infused system 시장은 앞으로 폭발적인 성장이 예상됩니다. 그러나 단순히 최신 AI 기술이 제품에 적용 되었다고 해서 사용자의 경험이 향상되는 것은 아닙니다. AI 기술을 채택할 때는 새로운 UI/UX 관점의 접근이 필요하고, 피드백/사용자컨트롤/설명가능성/편향성/투명성/시각화 등의 다양한 측면의 고려가 수반 되어야 실사용에서 의미있는 경험을 제공할 수 있습니다. 본 튜토리얼에서는 왜 UI/UX 디자인과 기술 설계에 있어 인간-AI 인터랙션의 고려가 중요한지 설명하고, 실제 제품 및 연구 사례를 분석하는 한편, 보다 다양한 사례에 적용가능한 인간-AI 인터랙션의 디자인 가이드라인과 패턴, 기술 설계 방법을 소개합니다.

2021.01.27(수)
발표자 : KAIST 송진영
https://jyskwon.github.io
jyskwon@umich.edu

#Ethicsm #FAcct #Interpretability in AI


세션에서 언급된 인간 AI 인터랙션을 위해 UX 관점에서 고려되어야 할 부분을 4가지로 추려보았습니다.

  1.  유저 데이터를 사용하는데 있어 굉장히 신중해야 한다.
  2. 기술적인 Cost, 성능 뿐만 아니라 UX도 고려되어 시스템이 설계되어야 한다.
  3. 소비자나 사용자 입장에서 납득이 가능한 경험을 제공해야 할 것.
  4. 어떻게하면 AI가 인간 behavior에 좋은 영향을 미치도록 할 수 있을까?
(*인간의 행동양식, 습성, 태도를 모두 포괄하는 의미로서 behavior)








 1. 서비스 사용자의 데이터를 사용하는데 있어 신중해야 한다.


    CMU의 Jeffrey Bigham 교수가 이런 말을 했다고 합니다.

AI는 인간 지능에 영감을 받아 Human data에 의해 강력해진다. 궁극적으로는 그것이 인간 경험을 얼마나 긍정적으로 영향 주느냐에 그 목적이 있다. 


최근 인공지능 스피커, 자율주행차, 인공지능 기술을 활용한 여러 SNS, 어플 등으로 인해 우리는 지금도 일상 속에서 매일 인공지능 시스템과 인터랙션하고 있습니다. 이런 과정 속에서 우리의 일상은 데이터로 치환되어 intelligence system 과 상호작용하게 되는데요.

이 과정 속 사용자의 개인적 데이터를 다루는 데 굉장히❗️ 신중해야 한다고 합니다.
 
👉 일례로 이용자 데이터 수집 단계에서 논란이 있었던 이루다 채팅봇의 사례가 있었죠.
👉 또, 사용자가 인공지능과 적절하지 못한 인터랙션을 해 AI를 학습 시킴으로써, AI 아바타가 아주 네거티브한 캐릭터가 되어버려 혐오발언으로 논란이 되었던 마이크로소프트 Tay tweets의 사례도 모두들 떠오르실 겁니다.

그렇기에 AI 서비스에서 User Interaction 설계를 할 때는 단순히 인공지능 기술의 성능, 정확도 보다도 유저에 대한 이해를 바탕으로 한 수많은 부분이 고려되어 설계되어야 합니다.


*우리가 AI 시대에 마주하는 NEW Challenges 예
Ethics, FAcct(=Fairness, Accountability, Transparency), Usability, Learnability, Safety, Reliability, Privacy 등등 AI가 사용자에게 긍정적 경험을 제공하기 위해선, 수많은 요소가 고려되어야 합니다. 






 2. 기술적인 성능 뿐만 아니라, UX도 고려되어 시스템이 설계되어야 합니다.


"Not only Technical cost, but also social cost should be considered."

기술적인 성능은 우수하나 UX에 대한 고려가 부족해 실패한 몇 가지 시스템의 사례입니다.

➡️ 1. IBM 왓슨 : 유저에 대한 이해 부족 
해당 서비스를 사용할 유저인 의사들에 대한 충분한 이해가 없어 의사들이 이 시스템을 사용하고 협업하기 어려웠다는 문제점이 있었습니다. 왓슨에 대한 의료진의 Trust Issue나 Usability 이슈 때문에 결국 의료용 왓슨은 실패하게 되었죠.


➡️ 2. 페이스북 : 부주의한 알고리즘 잔혹성( Inadcertent Algorithmic Cruelty) 
페이스북이 자동으로 가장 인기있었던 일년 요약을 제공해주는 서비스입니다. 문제는 사용자가 겪은 재난, 소중한 사람의 부고 등과 같은 트라우마적인 경험도 일년 요약 컨텐츠로 제공되어 버려 사용자에게 잔인한 경험을 주게 되었다는 문제가 있었습니다.


➡️ 3. 구글 포토 : 암묵적 편견 (Implicit Bias)
구글 포토는 사용자의 사진을 자동으로 라벨링 해주는 기능이 있었는데요. 흑인 인물들의 사진을 자동으로 고릴라로 label 해버려 인종차별적이라는 논란이 있었습니다.







3. 소비자나 사용자 입장에서 납득이 가능한 경험을 제공해야 할 것입니다. 


 Explainability는 서비스의 엔드유저(end-user) 혹은 이해당사자들에게(stakeholders) 전문용어나 어려운 설명없이 서비스가 납득되도록 해야 한다는 개념입니다. 

 이해하기 쉬우면서 성능도 우수한 '모델'을 만드는 것은 어쩌면 AI 전문가의 일이 아닐까 싶기도 한데요. 👉 Knock AI 에서는 노코드 툴을 이용해 모델을 만드는 것까지 실습해 볼 수 있습니다. Peltarion과 Azure Studio 같은 모델링 툴들을 시작으로  나중에는 이러한 영역도 더욱 많은 대중에게 접근가능해지지 않을까요? 👈


AI thought as a BLACK BOX

" 기존 딥러닝 구조들이 불투명하고, intuitive 하지 못하고, 어렵다는 문제 "

  • 딥러닝은 로지컬한 스텝으로 연산이 이루어지지 않고, 수많은 노드와 그 노드를 잇는 와이어들 사이에 어떻게 정보가 전달되는지에 따라서 결정이 이루어지게 됩니다. 그렇기에 유저가 이걸 논리적으로 이해하기 어렵다는 문제가 생기는데요.

🤔 노크 AI의 여러 비전공자 분들도 이런 이유로 딥러닝이 모호하고 어렵다고 느껴지시는 분들 많으시겠죠?

  • 하지만 이게 사용자에게 이해가 돼야 사용자는 왜 이 AI가 이 결론을 도출하였는지, 왜 성공했는지, 왜 실패했는지, 에러가 난다면 어떻게 수정할 수 있는지, 믿을 수 있는지, 믿을 수 없는지 등을 스스로 판단하고 이해할 수 있게 됩니다. 


어려운 문제이나, 현재 떠오르고 있는 해답 중 하나는 모델이나 알고리즘의 transparency를 올리는 것이 있다고 합니다. 모델을 최대한 심플하고 설명가능하게 만들면서도, 우수한 결과를 낼 수 있도록 하는 방안들이 많이 연구되고 있습니다.

2018's Explainable Machine Learning Challenge by Duke Univ
We didn't explain the black box, we replaced it with an interpretable model

4. 어떻게 하면 AI가 우리의 삶, 경험에 좋은 영향을 미치도록 할 수 있을까요?

이 부분은 AI 전문가와 비전문가를 떠나서 동시대를 살고 있는 우리 모두가 고민 해볼만한 주제인 것 같습니다. 이 부분은 구체적 사례와 연구를 소개하기 보다는 다같이 고민 해보면 좋을 질문들을 던져 놓고 마무리 해볼까 해요 😃 (정답은 없으니 편히 생각해주세요!)

  • 우리가 살고 있는 세상 자체가 편향되어 있을 수 있습니다. 이 Dataset의 imbalance를 피하려면 어떻게 해야 할까요?
  • Accuracy라는 메트릭을 성능지표로 많이 사용하고 있는데 과연 이 지표가 절대적인 것일까요?


  • 만약 90% 정확도를 가지고 있는 AI 의사가 있고 80%의 정확도를 가진 인간 의사가 있다면 누구에게 수술을 받을 것인가? (아래는 질문에 대한 실제 트위터 반응)
    • 반응 1 : 나는 모두에 대한 정확도 보다는 나에 대한 cure rate가 가장 중요하다. 
    • 반응 2 : 이 AI 기계가 90% 정확도를 가지고 있지만 만약 특정 인물이나 아이들에 대해서만 의료사고가 난다고 하면 단순히 accuracy가 높다고 해서 이것을 사용할 것인가?
    • 반응 3 : 나에 대한 데이터가 이 인공지능이 트레이닝 되고 알고리즘 된 데이터와 다르다면 나에게는 이 AI가 무의미하지 않을까?


UX, 디자인을 공부하는 학생으로서 어떤 관점으로 AI 기술과 사용자에 대한 이슈들을 살펴보면 좋을지 자세하게 접할 수 있었던 좋은 세션이었던 것 같습니다. 좋은 내용 발표해주신 송진영 교수님께 감사드립니다 🥰
Like Comment

식품의 비건 여부 판별 서비스 [ Happy Vegan Everyday : V-day ]

3️⃣
본 서비스는 영상디자인전공 4학년 유영은, 휴먼기계바이오공학과 4학년 이미경의 2020-2 데이터와인공지능 수업 결과물입니다.




  1.  Happy Vegan Everyday : V-day





V-day는 원재료명 이미지를 촬영하면 비건 여부를 알려주는 모바일 기반 서비스입니다. V-day는 Birthday를 뜻하는 B-day에서 착안하여 비건들이 우리 서비스와 함께 마음껏 먹을 수 있는 생일같은 일상을 보내라는 의미를 담고 있습니다.






2. 제공하는 가치






저희 서비스의 value keyword는 제한적인 음식 섭취에서 벗어난다는 의미의 Free, 일상적으로 사용할 수 있다는 의미의 userful, 정확한 섭취 여부 정보를 제공한다는 의미의 precise, 사용이 간편하다는 뜻의 easy로 정리할 수 있습니다.





3. AI 서비스 기획, 개발 배경





저희가 파악한 기존의 문제점은 대부분의 기성 식품은 비건 여부가 명시되어있지 않아 비건식임에도 이를 알지 못해 이용하지 못하는 사례가 많다는 점이었습니다. 이에 대해 저희가 제공할 수 있는 가치는 원재료명이 표기되어있는 일상 식품들의 비건 여부를 쉽고 정확하게 파악하여 비건 사용자에게 일상 속 매일의 음식 선택이 더 자유롭도록 돕는다는 점입니다.

기존 채식주의자들은 보통 원재료명을 일일이 확인하거나, 섭취 가능 식품의 리스트 중에 선택하는 방식으로 섭취할 음식을 선정합니다. 원재료명을 일일이 확인하는 것은 정확하며, 특정 상품에 대한 비건 여부를 알 수 있다는 장점이 있지만 지나치게 번거롭습니다. 비건식품 리스트 안에서 고르는 것은 편리하지만 한정적이라는 단점이 있습니다. 따라서 비건 ocr 서비스는 채식주의자들의 식품 선정 절차를 매우 간소화하므로 비건 유저의 만족도가 높을 것으로 예상됩니다.





4. 유사한 다른 목표 서비스와의 비교.




유사한 서비스로는 상품의 바코드를 찍으면 해당 식품의 섭취 가능 채식 단계를 알려주는 'Cruelty Vegan', 'Is It Vegan' 이 있습니다. 하지만 이들은 해외 앱 서비스로 국내 식품은 지원하지 않는다는 한계가 있습니다. 국내에서는 비건 코리아 등에서 비건 식품 리스트 정보를 제공하는 서비스가 있으나, 리스트에 포함되어 있지 않은 식품에 대한 비건 여부를 알 수 없다는 한계가 있습니다.





5.  목표를 위해 사용가능한 AI 오픈소스를 찾는 여정 (찾은 후보 오픈소스들, 해당 오픈소스들의 탐색 결과 및 trial 들)


필요한 것 1 : [OCR 기능] 원재료명 이미지를 텍스트 타입으로 변환시키는 역할
OCR API 후보 1 - 네이버 CLOVA API : https://apidocs.ncloud.com/ko/ai-application-service/ocr/
OCR API 후보 2 - tesseract : https://joyhong.tistory.com/79

-

trial 결과 : 성능이 심히 좋지 않아 사용하지 않았습니다.




API 후보 3 - EasyOCR 
: GitHub - j1mmyson/EasyOCR: Ready-to-use OCR with 40+ languages supported including Chinese, Japanese, Korean and Thai
Easy OCR이 원하는 서비스 결과 구현에 가장 적합하다고 판단.



필요한 것 2 : [원재료명별 채식 여부 데이터] : 변환된 원재료명 텍스트를 해당 데이터와 비교하여 비건 여부를 판별

후보 1 - 식품의약안전처 오픈 API : https://www.foodsafetykorea.go.kr/api/newDatasetDetail.do
후보 2 - 데이터활용서비스 오픈 API : https://www.foodsafetykorea.go.kr/api/openApiInfo.do?menu_grp=MENU_GRP31&menu_no=656&show_cnt=10&start_idx=1&svc_no=I0750&svc_type_cd=API_TYPE06
-


trial :  식품 원재료의 식물, 동물 여부가 분류되어 있어 본 서비스를 위한 가장 이상적인 데이터라고 생각했지만, 공공데이터 신청 과정에서 오류가 나 데이터에 접근할 수 없다는 문제가 있었습니다.
식품공공데이터 API 신청 오류 개선이 되지 않아 최종적으로 비건이 섭취할 수 없는 동물성 원재료명을 직접 조사하여 엑셀 파일에 입력해 데이터를 직접 만들어 사용하였습니다.




위 사진은 직접 수집하여 엑셀에 입력해 생성한 데이터 중 일부.

*참고 링크 일부 : 
  1. http://ko.veganism.wikidok.net/wt/PageList/Category/595f49580402c2cc541dba4d
  2. https://m.blog.naver.com/PostView.nhn?blogId=janranran&logNo=140135602441&proxyReferer=https:%2F%2Fwww.google.com%2F






필요한 것 3 : [이미지 잘라내기 기능] : 원재료 이미지를 촬영 시, 원재료명표 부분만 추출하여 정확한 정보를 얻기 위함.

trial : 좌표를 입력받아 넘겨주면 crop이 진행되는 방식. 하지만 사용자 친화적이지 않다고 판단하여 조금 더 편리한 api를 찾아보았습니다.


13.3. Object Detection and Bounding Boxes — Dive into Deep Learning 0.15.1 documentation (d2l.ai)

 trial : 구현 자체는 어렵지 않을 것으로 예상되나, 사용자에게 detect 된 영역을 프론트엔드에서 넘겨주고, 특정 영역을 입력 받아 해당 부분의 이미지만 ocr로 넘기는 과정이 까다로울 것으로 예상되어 이 부분에서는 ai를 사용하지 않는 것으로 하였습니다.


후보 3 - 장고 기반 croppie :
https://github.com/dima-kov/django-croppie







6. 최종 선택한 인공지능 오픈소스 API 


  1.  EasyOCR
  • 개요 : easyOCR은 패키지 설치 및 import 과정을 통해 모듈화 되어있어 상대적으로 편리하게 사용할 수 있는 OCR api입니다. 이미지를 전달해주면 텍스트 형식으로 변환해 줍니다.
  • 제공 기능 : 한국어를 제공하며, 자체 전처리 과정이 포함되어있어 성능이 높습니다.
  • 목표와의 부합성 : 이미지를 입력받아 텍스트로 변환해주며, 성능이 좋아서 목표와 잘 부합됩니다.


2.   django-Croppie

  • 개요 : croppie는 이미지 잘라내기(crop)를 수행하며, 단순 확대 비율 조절, 잘라내기 등 다양하게 crop을 사용할 수 있습니다.

  • 제공 기능 :이미지를 업로드하고, crop 툴을 사용하여 잘라낸 이미지를 저장하는 기능을 제공합니다. resize 모드는 이번 프로젝트와 가장 잘 부합하며, 가로 세로 크기를 자유롭게 조정할 수 있습니다.

  • 목표와의 부합성 : 파이썬 기반 장고 버전을 제공한다는 점이 해당 api를 선택한 가장 큰 이유였습니다. 원하는 부분만 잘라내어 저장할 수 있다는 장점이 있지만 장고 croppie에 대한 모듈 명세서가 자세하게 나와있지 않아 css를 적용하는 데에 어려움이 많았습니다.






7. 기획, 구현 과정에서의 여러 Trial & Error


1. OS / 프레임웍
trial : bubble.io로 서비스 구현을 시도하였습니다.

error : 이미지를 ocr을 통해 텍스트를 받아오는 것까진 성공하였으나 이후 엑셀 파일과 대조하거나 이미지 crop기능을 붙이는 데에 어려움이 예상되었고 구글링을 해도 bubble과 관련한 정보는 찾기가 매우 어려웠습니다.


해결 방법 : crop기능을 수행할 수 있는 파이썬 프레임워크를 먼저 찾아보고, django를 사용한 croppie를 발견하여 django로 프레임워크를 변경하였습니다. 따라서 django 구현 결과를 local pc에서 확인하는 방식으로 개발을 완료한 후, ngrok을 사용하여 모바일에서 구동이 되는 것이 확인되었습니다.



2. bounding box 영역 detection

django-croppie를 사용하며 부딪혔던 여러가지 난관과 해결 과정을 번호를 매겨보았습니다. 전반적으로 이미 개발되어 명세화가 되어있는 croppie api를 사용하느라 자유롭게 변경할 수 없었던 것, 코드를 해석하기 어려웠던 점에서 문제가 많았습니다.



3. django-croppie 관련


1. crop된 이미지 저장이 되지 않는 문제 error : 이미지를 crop해서 저장하여 서버에 넘겨주고 ocr 변환을 해야하는데 이미지를 받아오는 과정에서 헤맸다.

해결 과정 : croppie 자체적으로 media 폴더에 자른 이미지를 넘겨주고 있었다. 이런 식으로 django-croppie의 작동 플로우에 대한 명세화가 친절히 되어있지 않아 사소한 것에서 헤맨 부분이 정말 많았다.


2. 이미지 저장 및 제출과 페이지 이동이 동시에 이루어지지 않는 문제
error : <form>에 action 속성, form의 <input type=’submit’> 의 onclick=location.href, 별도의 페이지 이동 버튼 3가지를 가지고 여러 가지를 시도해봐도 이미지 저장 및 제출과 페이지 이동이 동시에 이루어지지 않았다. 
해결 과정 : 이미 croppie를 만든 개발자가 사용한 방식 때문에 생긴 문제였다. form 제출이 성공적일 때, success-url 부분에 이동할 페이지를 작성해야 했다. 이 부분에 이동하고자 하는 페이지 주소를 입력했더니 이미지 저장 및 제출과 페이지 이동이 정상적으로 이루어졌다. 


3. 모바일에서 resize 기능이 구현되지 않는 문제 error : pc에서는 이미지를 자유롭게 crop하는 resize 기능이 잘 작동하였는데, 모바일에서는 되지 않았다.

해결 과정 : 포인터를 꾹 누른 상태에서 조정하니 되었다. 이 또한 기능 명세가 제대로 되어있지 않아 헤맨 부분이다.



4. django 프로젝트 프론트엔드 구현 관련


1. 정적 이미지가 불러와지지 않는 문제 error : 이미지를 불러와도 엑박 형식으로 오류가 떴다.

해결 과정 : 장고는 static 을 사용하여 정적 이미지를 불러오는 것을 몰라서 헤맸다. html 코드에 {% load static} 을 추가하고, img src 부분에도 {% static} 해당 프로젝트가 여러 폴더로 구성되어있어 작업 경로가 제대로 되어있지 않을 것이라 추측했고, base_url을 찍어보아 제대로 된 경로를 확인했다. 그런데 왜인지 이 print 코드가 제대로 되지 않아서 헤맸는데, 전원을 껐다 켜는 방식으로 해결되었다. 이를 통해 확인된 경로에 static 폴더를 만들어 해결하였다.


2. html 속성 적용 문제 error : html 속성이 적용되지 않는 문제

해결 과정 : input 태그를 이미지로 하고 싶었는데 되지 않아 css를 수동적으로 바꾸는 방식으로 해결하였다. 


한계점 : croppie와 관련된 css는 바꾸지 못하였다. 단순한 form 형식이 아니라 개발자가 기존에 만들어놓은 클래스를 가져다 쓰는거라 코드 분석이 쉽지 않았다.



5. django 프로젝트 서버 구현 관련


1.  장고 프로젝트 initializtion 오류 문제

장고 프로젝트는 django-croppie 기본 코드에서 추가적으로 개발하는 방식으로 하였다. 이 때 처음 프로젝트를 local에서 구동할 때 많은 오류가 있었다.

error : 패키지 설치 오류

해결 방법 : 기존 컴퓨터 패키지와 충돌이 되어 다시 설치하면 다른 프로젝트의 구동에도 악영향을 미칠 수 있어 가상환경을 설치하였다. django-croppie 에서 사용하는 패키지 버전을 기준으로 설치하였고, 이때도 호환되는 파이썬 버전이 따로 있어 파이썬 3.6으로 가상환경을 설치하였다. 또 torch를 설치하는 과정에서 오류가 있었는데, 32bit가 아닌 64bit만을 지원해서 수동으로 설치할 때도 계속해서 오류가 발생했다. 이것은 아나콘다에서 가상환경을 설치할 때 자동으로 32bit로 설정이 되어있어서 발생한 문제였다. 



2. 장고와 sql 데이터베이스가 연동되지 않는 문제
원재료명에 따른 비건 섭취여부 데이터를 저장해놓기 위해서 sql 데이터베이스와 연동하는 과정이 필수적이었다.

Error : 연결 오류
해결 방법 : 여러 가지 sql 버전이 깔려 있어서 생긴 문제였다. 내 PC의 관리에 들어가서 실행되고 있는 sql 버전을 확인하고, sql 프로그램을 모두 중지시킨 후, 원하는 sql 버전만 실행시켜서 해결하였다.


Error : 데이터베이스에 테이블을 생성했는데 인식하지 못하는 문제
해결 과정 :  장고는 migration을 통해 직접적으로 데이터베이스에 테이블을 생성하는 방식을 사용한다. 수동으로 만들지 않고 migrate 방식으로 했더니 해결됐다.



3. 페이지 이동 오류 문제

error : 페이지를 이동할 경우 없는 페이지라고 뜨거나, 다른 에러가 발생하는 문제

해결 과정 : 장고 내부의 urls.py나 view.py에 제대로 코드를 작성하지 않아 생긴 문제였다. 다른 문제로는 이미지 저장이 media 폴더에 제대로 이루어지지 않아 불러올 이미지가 없어서 에러가 생기기도 했다. 이는 3번 오류와 관련하여 이미지 저장이 제대로 이루어지지 않았던 오류인 경우가 많았다. 


4. 이미지 불러오기 오류 문제

error : crop된 이미지를 easyocr 변환하여 결과를 출력할때 shape, nonetype 오류 등이 떴다

해결 과정 : 파일명을 영어로 바꿨더니 해결되었다. 아마 utf-8변환 관련해서 문제가 생긴 것으로 추정된다.




8. 기획, 구현 결과


8-1 django 프로젝트 주요 구조






8-2 주요 코드

  1.  원재료명 이미지를 통해 비건 섭취 여부 도출하는 알고리즘



이전 페이지에서 제출된 form의 형식이 정확하다는 것을 확인한다. 제출이 되면 crop된 이미지가 순서대로 media 폴더에 정렬되므로 최근 순서대로 정렬하여 가장 최근 이미지를 불러온다. 




crop된 이미지를 통해 easyocr을 수행한다. reader.readtext를 통해 텍스트를 저장하고, vegan.objects.filter을 통해 연동된 데이터베이스에서 원재료명 데이터를 불러온다. 이때 sql쿼리를 통해 비건이 섭취할 수 없는 데이터만 불러온다. for문을 사용하여 데이터베이스에서 불러온 데이터가 ocr 변환 결과 텍스트에 있을 경우, 비건이 섭취할 수 없다고 판단한다. 비건이 섭취할 수 없을 경우 result.html 페이지로 이동하고, 비건이 섭취할 수 있을 경우 result2.html 페이지로 이동하여 서로 다른 결과 페이지를 출력한다.




2. 페이지 구성


[index.html]

메인페이지이다. start 버튼을 누르면 onclick=”loction.href=’create” 코드를 통해 이미지를 crop하는 create.html 페이지로 이동한다. 





[create.html]

이미지를 업로드하고, crop하는 과정이 진행되는 페이지이다. ‘확인’ 버튼을 누르면 crop된 이미지가 저장됨과 동시에 결과 페이지로 이동된다. 이동되는 페이지는 views.py의 success-url 부분에 있다. 확인 버튼의 css는 수동으로 지정하였다. 



[result.html]



[result2.html]


각각 비건이 섭취할 수 있을 경우, 없을 경우 이동하는 페이지이다. <img> 태그를 사용하여 페이지를 구성하였다.



3. 연동된 데이터베이스의 데이터




8-3. 시연 결과 동영상

(*영상 재생이 MacOS에서는 원활하나, 윈도우나 기타 환경에서는 보이지 않는 오류가 있습니다. 결과 영상이 보이지 않을 시엔 포스트 하단 코멘트에 첨부한 영상을 봐 주시길 바랍니다.)


1.  pc - 비건, 논비건 식품 판별 결과



논비건 결과창






비건 결과창 


2.  모바일 - 앨범에서 이미지 불러오기, 촬영하여 이미지 불러오기 결과




비건 결과창






논비건 결과창




9. 기획/구현된 AI 서비스의 의의, 기대효과


기존 국내 채식주의자들이 특정 제품의 비건 판별 여부를 알 경로는 매우 제한적이었다. 국내에서는 지원하는 서비스가 없어 해외 서비스를 이용해야하는데, 이는 가독성도 떨어질 뿐더러 국내 제품은 지원하지 않는 제품도 많아 어려움이 많았다. 다른 방법은 인터넷에 찾아보는 것인데, 관련 정보가 없다면 누군가에게 물어보고, 답변을 기다리는 등 매우 비효율적인 방식을 사용해야했다. 본 서비스는 원재료명 표시가 있는 모든 제품에 대해서 판별이 가능하다는 점에서 의의가 있다.

 이 서비스를 통해 기존 채식주의자들이 식품 선정에 불편을 덜 수 있을 것이다. 뿐만 아니라 채식이 어려워서 입문하지 못하는 일반인들에게도 진입장벽을 낮춰주는 효과를 기대할 수 있을 것이다. 또한, 현재는 비건을 지향하는 소비자들을 위한 서비스이지만, 확장하여 약 6단계의 기타 채식에 대해서도 정보를 제공하고, 더 나아가 특정 원재료를 섭취할 수 없는 알러지 식품 판별 서비스로도 활용을 기대할 수 있을 것이다.











10. AI 서비스 기획, 개발해 본 소감




영은 : 개강할 때와 지금을 생각하면 정말 많은 일이 있었던 것 같다. 늘 인공지능에 관심은 있었지만 굉장히 어렵고 먼 학문으로 느껴졌었고 내가 시도할 수 있는 분야인지에 대한 의문이 있었다. 물론 여전히 너무 어렵지만 지금은 어떻게, 왜, 얼마나 더 어렵고 힘든지 약간의 기준이라도 생긴 것 같다. 다행스러운 것은 실제 구현 개발을 하는데에 인공지능 수식이나, 선형대수학 등등..을 꼭 알아야 한다는 것은 아님을 알게되었다. 그리고 너무 어렵고 힘들때 다행이 나만 힘들어하는 것이 아니라 다같이 함께 고군분투하고 배워나가고 있다는 것이 큰 의지가 되었다. 쉽지 않았던 과정인 만큼 많은 챌린지속에서 많이 배워갈 수 있었던 것 같다. 어렵고 힘들어서 더 큰 의미로 다가온 것 같다. 그리고 Azure Studio나 버블 등과 같은 툴이 비전공생도 시도해 볼 수 있도록 많이 나와있다는 것을 알게되어 굉장히 반갑고, 생각보다 발을 들여볼 수 있는 분야구나 하는 생각이 들었다. 하지만 무료로 제공되는 부분은 원하는 core 기능을 다 구현하기에는 안되는 것들이 많았고, 또 버블의 불편한 UI, 중간 수정이 어려운 문제 등 적응이 어려웠다. 원하는 만큼의 ‘서비스 구현’을하려면 결국 파이썬, HTML등에 대한 공부 또한 동반되어야 더 시너지가 날 수 있는 것 같다. 더 많이 공부해 부족한 것들을 더욱 채워나가야겠다는 다짐을 하게 되는 계기가 되었다. 팀원도 너무 잘 만났고, 결과도 잘 나와 실제 원하는 대로 작동하는 것이 신기하고 보람차다. 

미경 : 최대한 현실적으로 할 수 있도록 구상하면서 AI 서비스를 기획했지만, 정말로 이게 다 될까? 하는 불안함이 있었다. croppie를 지원하는 다양한 프레임워크가 있었는데, 다행히 그 중에서 파이썬 프레임워크인 django가 있어서 django를 사용하였다. 하지만 flask 개발 경험은 있는데 django 경험은 없어서 처음부터 다시 공부를 했어야했다. flask랑 비슷할 줄 알았는데 막상 개발을 시작하니 훨씬 복잡하고 자유도가 낮았고, 이로 인한 어려움이 많았다. 그래도 하나하나 구글링을 하면서 해결해나갔고 결국은 전부 구현을 하는데 성공했다. 완성했다는 게 얼떨떨하면서도 뿌듯했다. 또한 개발이나 인공지능은 생각과는 다른 것에서 어려움을 느끼게 되는 것 같다. 예상하는 난관은 ai 프로세스 이해, 성능 개선과 같은 부분인데 실상 현실은 환경 설정이 대부분이다. 또한 자신의 코드를 구상하는데 어려움이 있는 것이 아니라 남의 코드를 이해하는 것이 어렵고 중요해서 예상과는 다른 부분이 많이 있는 것 같다. 이로 인해 허탈하고 무력감을 느끼기도 하는데 강의 중에서 이런 부분이 다들 겪는 현실이라고 말씀해주셔서 용기를 얻고 계속 개발을 포기하지 않고 해나갈 수 있었던 것 같다.






11. 참고자료/문헌/링크 목록  (위 본문 서술시 해당되는 참고번호 표기)


[목표 서비스] 



Like Comment