disqus 댓글기능
discus.com 접속
get started
wantt to install discus inmy website. > 웹사이트 네임 정해주고 create site
무료버전 사용.
install manually
코드 복사 , script 쪽에 붙이기.
사용성 개선
사진 업로드 하면 바로 실행되도록
스타트, 예측 버튼 없애기
-
코드 확인
변화가 일어났을 때 특정함수가 실행되는 것을 확인할 수 있음. : 사진을 업로드 하면 readurl 함수가 실행이 되면서 사진 업로드하는 박스가 숨겨지고 업로드한 사진과 삭제버튼이 생성됨. -
스터트 버튼을 없애려면?
스타트 버튼을 누루는 과정이 위에 함수 안에 포함해서 사진 올림과 동시에 실행되게 하면 따로 누르지 않아도 됨.
스타트 버튼? 누르면 init이라는 함수 실행 - 모델 불러오고 라벤콘테이너 만들어줌. -
init 함수를 readurl에 넣기
스타트 버튼 코드를 지우고, 그 안에 있었던 init함수 복사해서 readurl 안쪽에 넣어줌. -
예측버튼
예측도 사진 올림과 동시에 시행하게하기.
예측은 predict라는 함수 실행. > 버튼 없애고 init 뒤에 붙여줘야해.
근데 그냥 붙여주게되면 init이 끝나기도 전에(모델 불러오기 전에) predict가 실행될 수 있음. 그래서 다음과 같이 붙여줘야해.
->> "promise" 개념 사용 : async 랑 await 을 써서 과정 다 끝나고 수행하도록.
init 함수 뒤에
init().then(()=>{ or then(function( ){
console.log("hello"); /* 개발자도구 console화면에 표시하는 기능.
다끝나면hello표시 */
predict() ;
});결과 안쪽 정렬해서 뜨게 하기.
개발자 도구로 옮길 코드, 옮길 위치 확인해주기. - label container
-
결과 높은거대로 정렬하기 : predict 코드 수정
prediction 코드 수정
js array를 sort 하는 코드 구글해서 적용 -
가장 높은 것 나오면 그거에 맞는 문구 뜨게하기. : switch 기능 활용.
각 case에 맞는 메시지 작성해줌. -
숫자를 막대그래프와 퍼세트로 :css
classname이랑 probability를 : 로 더해서 넣어줬는데 이거 대신에 테그를 넣어주고 테그에 색이랑 크기를 주면 막대로 됨. 길이는width로 조절.
결과 나타나는 곳에 이미지 나오게 할 수 도 있음.
