감정 분석으로 Chrome 확장 프로그램을 구축하는 방법
슬픈 크롬 확장 프로그램 때 고양이 보내기
얼마 전 슬플 때 고양이 사진을 보내주는 프로젝트를 만든 사람을 본 적이 있습니다. 그리고 저는 와우, 이것이 바로 제 삶에 필요한 것이라고 생각했습니다.
원래 프로젝트는 안면 인식을 사용하여 슬픈지 행복한지 판단합니다. 그리고 노트북을 사용하다가 슬플 경우 귀여운 고양이 이미지와 함께 전화로 알림을 보내드립니다.
ML5js라는 라이브러리를 사용하면 얼굴 인식을 크롬 확장 애플리케이션에 쉽게 통합할 수 있습니다.
그러나 얼굴 인식을 사용하여 Chrome 확장 프로그램을 구축한 경험에 따르면 응용 프로그램은 컴퓨터에서 대부분의 CPU를 차지합니다.
또한 사용자는 웹캠이 작동하도록 항상 켜져 있어야 합니다. 그리고 아무도 그것을 원하지 않습니다.
얼굴 인식을 사용하는 대신 사용자가 입력하는 텍스트에 대한 감정 분석을 사용합니다.
기분에 따라 Grammarly를 상상해보세요.
물론 Chrome 확장 프로그램 설명서의 "시작하기" 섹션으로 이동할 수 있습니다.
실제로 이것이 첫 번째 Chrome 확장 프로그램인 경우 프로세스를 자세히 설명하는 또 다른 문서가 있습니다. https://medium.com/better-programming/how-to-build-your-first-chrome-extension-8abdee9a4365
그러나 Chrome 확장 프로그램을 만드는 부분에 이미 익숙하다면 이 저장소는 https://github.com/chibat/chrome-extension-typescript-starter로 시작하기에 좋은 상용구입니다.
나는 사용자가 하는 말을 잘 경청하는 것에 대해 말하는 것이 아닙니다.
그러나 감정 분석을 수행하려면 Chrome 확장 프로그램 사용자가 입력하는 텍스트를 캡처해야 합니다.
그들이 이메일을 입력하든 Google에서 검색을 하든 그것은 그들이 어떻게 느끼는지에 대한 힌트를 줄 것입니다.
그 코드는 어디에 작성합니까?
콘텐츠 스크립트에서 사용자가 현재 집중하고 있는 요소를 캡처하려고 합니다.
따라서 다음과 같은 다른 요소는 어떻습니까? input, textarea등.?
사용자가 사람이라고 가정하면 일반적으로 사용자는 한 번에 한 곳에만 입력할 수 있습니다. 그리고 다른 입력으로 이동하기 전에 다음 입력을 클릭하면 페이지의 포커스가 변경됩니다.
브라우저의 JavaScript에서 document 객체에는 이미 이라는 속성이 있습니다. activeElement , 정확히 그렇게 합니다. 페이지가 집중하고 있는 요소를 가져옵니다.
콘텐츠 스크립트가 초기화되면 활성 요소를 가져오고 페이지에서 포커스 변경을 수신하는 함수를 트리거합니다.
콜백 함수는 항상 페이지가 집중하고 있는 최신 요소를 반환합니다.
요소의 유형을 확인하는 기능이 있음을 알 수 있습니다. 편집할 수 있는 명백한 요소는 그리고 .
덜 분명한 것은 다음을 포함하는 요소입니다. contenteditable 속성은 일반
활성 요소를 사용하면 입력을 들을 수 있습니다. 코드는 다음과 같습니다.
당신은 우리가 가지고 있음을 알 수 있습니다 setTimeout 트리거할지 결정하기 위해 search 기능. API를 너무 자주 호출하고 싶지 않고 개별 문자보다 더 의미 있는 문장을 얻기 때문입니다.
그런 다음 검색 기능으로 이동합니다. 이 함수는 텍스트가 "긍정", "중립" 또는 "음수"인지 알기 위해 사용자의 텍스트를 API로 보내야 합니다.
대안:
자신만의 감성 분석 API를 구축하고 싶지 않다면 기존 서비스를 사용할 수 있습니다. 단점은 서비스 비용을 지불해야 하지만 확실히 시간을 절약할 수 있다는 것입니다.
python을 사용하여 서버를 설정할 수 있지만 JavaScript에 더 익숙하기 때문입니다. 우리는 Node.js를 사용할 것입니다.
엔드포인트에서 요청 본문을 구문 분석하여 다음을 얻습니다.
실제로 감정 분석을 수행하는 부분의 경우 Tensorflow.js를 사용하여 결과를 예측합니다.
우리의 setupSentimentModel 함수를 사용하여 모델을 로드합니다.
모델과 메타데이터를 로드합니다. 자신의 감정 분석 모델을 훈련할 수 있지만 인터넷에서 사용 가능한 모델을 찾을 수도 있습니다.
모델과 메타데이터가 로드되면 다음을 사용할 수 있습니다. getSentimentScore 텍스트를 처리하는 기능.
tensor2d는 숫자 배열을 예상하기 때문에 텍스트를 인덱스 시퀀스로 변환합니다. 방법은 다음과 같습니다.
원래 프로젝트에서 작성자는 사용자에게 전화로 알림을 보내도록 선택했습니다.
그러나 이미 Chrome 브라우저에 있으므로 새 탭을 열고 고양이 사진을 표시하면 됩니다.
고양이 사진의 경우 이미 API가 있습니다.
검색 기능에서 눈치채셨을 수도 있습니다. notifyUser 기능. 그곳에서 고양이 사진을 가져와 사용자에게 보여줍니다.
getRandomCat 임의의 귀여운 고양이 사진을 얻기 위해 catapi.com에 API 요청만 합니다. 그런 다음 배경 스크립트에서 이벤트를 트리거하여 고양이 이미지가 있는 탭을 엽니다.
백그라운드에서 우리가 해야 할 일은 해당 이벤트를 수신하고 고양이 이미지 URL로 탭을 만드는 것입니다.
크롬 확장 코드: https://github.com/davidyu37/therapypet-chrome-extension
감정 분석 서버 코드: https://github.com/davidyu37/sentimentserver
Chrome 스토어의 Therapy Pet:
읽어 주셔서 감사합니다! 더 많은 것을 위해 계속 지켜봐 주십시오.