모바일 시인의 머신러닝 - eMiLy 어플리케이션 충족

고등학교 때, 당신의 영어 선생님이 당신에게 19세기 시를 감상하는 중요성을 기억하게 하려고 했던 것을 기억합니까?아니면 대학에서'칸트베레 이야기집'의 서문을 외우도록 격려받으면 칵테일 파티를 활성화할 수 있을까?

This actually happened for me, and it never fails to entertain - thank you, Professor Lynch!

당신은 지금 개발자, 회계사, 혹은 축구 선수일 수도 있지만, 조용히 앉아서 시인이 정성스럽게 고른 단어를 생각하고 있습니다. 그는 당신을 격려하고 생각하게 하려고 합니다. 이것은 틀린 것이 없습니다.8월의 전국 시가의 달을 축하하기 위해 핸드폰 앱을 개발했습니다. 이것은 당신이 이미 잊었거나 들어본 적이 없는 시인을 회상하는 데 도움을 줄 수 있지만, 그는 많은 사람들의 강렬한 감정을 불러일으킬 수 있습니다. 그들은 문학 시간에 아름다운 추억을 가지고 있습니다.우리 에밀리 디킨슨에 대해 이야기합시다.

Why a mobile app? Poetry is a great medium to consume on a mobile device. Often compact, these literary gems can fit on a small screen. You can also leverage a mobile device's hardware capabilities to enhance your experience, like taking a selfie or using the accelerometer. Also I like building mobile apps.

에밀리 디킨슨은 19세기 중반 미국 동해안 마사제세 주 서부 암스테르담에서 활약한 시인이다. 그녀의 일생 동안에도 괴상한 은둔자로 유명했고, 때로는 문을 닫고 관광객들과 이야기를 나누기도 했다.그녀는 생전에 시로 유명했다기보다는 원예로 유명했다.
우리는 어떻게 신기술을 이용하여 19세기 시인의 작품을 우리의 의식으로 가져옵니까?eMiLy 응용 프로그램에서 저는 발견, 상호작용과 창조력을 장려하는 인터페이스를 설계했습니다.

간단한 무작위 조회에서 모호한 집합에서 당시의 시 한 수를 발견했다.

슬라이더를 사용하여 사용자의 정서를 반영하고 정서와 관련된 시를 표시

셀카, 즐거움, 슬픔, 중성 또는 초조함과 관련된 시 한 수 보여주기

마지막으로 디킨슨 문학 작품의 귀속신경 네트워크를 바탕으로 생성된 시를 보여주고 그녀의 운율과 풍격을 모방할 수 있는지 살펴본다.다른 글에서 이것에 대해 해명해 주십시오.

에밀리 응용 프로그램을 구축하면 학교에서 남겨진 디킨슨 시에 대한 선입견을 탐색하고 없앨 수 있다. 에데스는 그녀의 운율, 운율, 정서와 그녀가 시에서 건드린 주제를 확정했다.

모바일 애플리케이션 구축

내가 선택한 JavaScript 프레임워크는 Vue입니다.Vue를 사용하여 네이티브 모바일 애플리케이션을 구축하는 가장 좋은 방법은 NativeScript-Vue 입니다.지역사회 건설(Igor 감사합니다!)그것은 Progress 의 개원 프로젝트 NativeScript 에 의해 지원됩니다.다음과 같이 로컬 컴퓨터에 NativeScript 설치instructions
명령줄에서 다음을 사용합니다.

tns create my-new-app

선택한 프레임과 기본 레이아웃을 선택하라는 메시지가 표시됩니다.

나는 보통 공백 레이아웃을 선택한 후에 사용자 정의 탭을 만들어서 그 안에 나의 페이지를 삽입한다.프레임워크를 구축하면 선택한 편집기에서 작업을 시작할 수 있습니다.

//components/Home.vue

<template>
  <Page class="page" actionBarHidden="true">
    <GridLayout rows="*,auto" columns="*">
      <!-- main components all on top of each other, since only 1 will be visible at any given time -->
      <component
        v-for="component in componentsArray"
        v-show="component === currentComponent"
        :key="component"
        :is="component"
        row="0"
        col="0"
      />
      <GridLayout row="1" col="0" rows="*" columns="*,*,*,*">
        <!-- Bottom navigation -->
        <StackLayout row="0" col="0" :class="navigationButtonClasses('DailyPoem')">
          <Image @tap="currentComponent = 'DailyPoem'" src="~/assets/pencil.png" height="30" />
        </StackLayout>
        <!--more bottom navigation-->
      </GridLayout>
    </GridLayout>
  </Page>
</template>

<script>
import DailyPoem from "../components/DailyPoem";
import MyMood from "../components/MyMood";
import MoodSlider from "../components/MoodSlider";
import NewPoetry from "../components/NewPoetry";

export default {
  data() {
    return {
      currentComponent: "DailyPoem",
      componentsArray: ["DailyPoem", "MyMood", "MoodSlider", "NewPoetry"]
    };
  },
  computed: {
    navigationButtonClasses() {
      return component => ({
        "nav-btn": true,
        colored: component === this.currentComponent
      });
    }
  },

  components: {
    DailyPoem,
    MyMood,
    MoodSlider,
    NewPoetry
  }
};
</script>

집.vue 단일 파일 구성 요소는 이 응용 프로그램의 핵심입니다.각 페이지는 이 제조의 탭 레이아웃에 로드되어 표시됩니다.Xcode 및/또는 Android Studio가 로컬 시스템에 설치되어 있다고 가정하면 응용 프로그램을 구축할 때 시뮬레이션할 수도 있습니다.핫 모듈 교체를 통해 프로세스를 가속화할 수 있습니다.

tns run ios/android

당신의 탭이 있습니다. 당신의 밑에 내비게이션이 준비되었습니다. 당신의 페이지가 준비되었습니다. 이 프로그램의 네 개의 화면을 구축할 때가 되었습니다.

디킨슨 데이터

문학이나 예술을 바탕으로 하는 응용 프로그램을 구축할 때 직면하는 첫 번째 문제는 항상 데이터의 출처이다.다행히도 시가 데이터베이스가 하나 있는데, 그 안에는 300여 곡의 에밀리 디킨슨의 시가 (1800여 곡, 그녀는 다작 작가) 가 있다.이를 Json 형식으로 내보내면 모바일 응용 프로그램에 매일 시 화면을 만들 수 있습니다.첫 번째 화면에서 나는 내가 내보낸 데이터 집합에서 무작위로 선택한 시 poetrydb.org 를 보여 주었다.

//components/DailyPoem.vue

<script>
import { mapActions, mapState } from "vuex";

export default {
  computed: {
    ...mapState(["poem"])
  },
  methods: {
    ...mapActions(["getPoem"])
  },
  created() {
    this.getPoem();
  }
};
</script>

Vuex를 사용하면 프로그램의 상태를 제어할 수 있습니다. 프로그램이 새로 고침될 때 새 시를 표시할 수 있습니다.그날을 반영하기 위해 바꿀 수도 있고, 계절성을 반영하기 위해 프로그램을 강화할 수도 있다.현재, 나는 단지 300곡에서 Json에 저장된 랜덤 시가 중 하나를 표시하고, 그 형식을 정리해서 표시할 뿐이다.

//store/index.js - this is my Vuex store

getPoem({ commit }) {
   let randomPoem = Math.floor(Math.random() * 300);
   let poemObject = poetry[randomPoem];
   let parsedPoem = JSON.stringify(poemObject.text);
   let selectedPoem = parsedPoem.split(',').join('\n');
        commit('displayPoem', selectedPoem);
}

일상 시가에서.그런 다음 NativeScript의 XML 스타일 태그를 사용하여 이 시를 표시합니다.

<template>
  <StackLayout>
    <Label class="action-bar" text="Discover Emily Dickinson"></Label>
    <ScrollView class="card">
      <StackLayout>
        <Label horizontalAlignment="center" textWrap="true" class="title">Welcome</Label>
        <Image src="~/assets/logo.png" width="400px" />
        <StackLayout class="inner-card">
          <Label horizontalAlignment="center" textWrap="true" class="subtitle">My Daily Poem</Label>
          <Label textWrap="true" :text="poem" />
        </StackLayout>
      </StackLayout>
    </ScrollView>
  </StackLayout>
</template>

이것은 화면에 랜덤 시가를 표시하는 가장 간단한 용례이다.결과는 다음과 같습니다.

정서적 측정

에밀리 디킨슨의 시는 슬픔으로 유명한 것 같다.만약 당신이 학생에게 그녀의 시가 불러일으키는 문자를 묻는다면, 당신은'어둠'이나'우울'을 들을 수 있을 것이다.그러나 에밀리의 작품은 보편적으로 슬프지 않은가?단지 문학 작품을 통해 사람들의 심리 건강 상태를 평가하는 것은 위험하지만, 에밀리가 앓고 있을지도 모른다seasonal-affective disorder는 추측이 나온다. 왜냐하면 그녀의 시가 불러일으키는 정서는 겨울이나 여름에 창작되기 때문에 큰 차이가 있기 때문이다.
에밀리의 작품이 주로 슬프냐, 즐겁냐는 질문에 대답하기 위해 저는 Azure 노트북에서 만든 빠른 텍스트 발굴 프로젝트를 이용했습니다.너는 이 항목과 내가 가장 자주 사용하는 단어를 자신의 텍스트로 만들 수 있다.만약 내가 Azure의 무료 Colab에서 그것을 실행한다면, 가장 흔히 볼 수 있는 단어는 다음과 같다.
(알아맞힐 수 있겠니?)
마치... 와 같다
나는 이것이 에밀리가 명유를 자주 사용하기 때문이라고 믿는다.영혼은 꽃과 같고 마음은 태양과 같다...

진일보한 분석에 의하면 그녀는'생명'이라는 단어를 사용하는 빈도가'죽음'보다'낮'이라는 단어를 사용하는 빈도가'밤'보다 높다는 것을 알 수 있다.그녀는'여름','낮','태양','대자연','시간','바다','꽃','장미'라는 자연 이미지를 대량으로 참고했다.약간의 기계적인 보조적인 텍스트 발굴은 시인의 의도와 전체적인 정서에 대한 사전 설정을 깨뜨리는 데 도움이 된다.
우리가 지금 에밀리의 시가 감정에 있어 매우 큰 범위를 가지고 있다는 것을 알고 있음을 감안하여 우리 자신도 마찬가지이다. 우리는 그녀의 시가 감정을 바탕으로 이동 사용자를 위해 감정 체험을 구축하는 것을 고려할 수 있다.사용자의 선호에 따라 즐겁거나 슬픈 시를 보여 드리겠습니다.
이를 위해 나는 슬라이더 - 슬라이더 오른쪽을 즐거움으로 하는 시, 슬라이드 왼쪽을 슬픔으로 하는 시를 세웠다.그러나 우리가 어떻게 에밀리의 어떤 시가 즐겁고 어떤 것이 슬픈지 분별할 수 있겠는가?
마이크로소프트 인지 서비스text sentiment analysis를 살려라!

텍스트는 사용자에게 사용자의 정서에 대한 많은 정보를 알려줄 수 있다.내가 발견한 바와 같이 이 서비스는 사용자의 피드백과 식당 평론을 분석하기 위해 설계된 것이고 시의 감정을 평가하는 데도 쓰일 수 있다.Poetrydb에서 가져온 시를 사용합니다.com, 저는 이 서비스를 통해 몇 편의 시를 운행하고 감정점수를 Json 대상에 저장했습니다. 저는 이 대상에 응용 프로그램에서 사용하는 시 선택을 저장했습니다.
그리고 사용자에게 사용할 슬라이더를 만들었습니다.

//components/MoodSlider.vue

<Slider
    borderWidth="5"
    margin="5"
    color="#00416a"
    backgroundColor="#00416a"
    minValue="0"
    maxValue="1"
    :value="value"
    @valueChange="onValueChanged($event.value)"
/>

슬라이더가 이동하면 주변 카드의 색상에 따라 바인딩 값이 변경됩니다.

//components/MoodSlider.vue

onValueChanged(e) {
      this.showCard = true;
      this.clearMoodPoem();
      this.value = e.toFixed(2);
      if (this.value < 0.5) {
        this.moodClass = "inner-card blue";
      } else {
        this.moodClass = "inner-card rose";
      }
    },

사용자가 단추를 눌렀을 때 Vuex는 Json 데이터에 집중적으로 저장된 값에 따라 비슷한 감정점수를 가진 시를 제공합니다.

신비한 얼굴

이 프로젝트를 더욱 개성화하기 위해 누군가가 셀카를 찍고 얼굴 표정을 분석하며 당신의 얼굴 표정에 따라 당신의 기분과 일치하는 시를 창작할 수 있다면 어떻게 해야 합니까?다시 한 번 마이크로소프트 인지 서비스에 대해 말하자면, 우리는 수중에 매우 좋은 해결 방안을 가지고 있다.이번에는 Azure에 API 호출을 보내고 미리 처리된 데이터에 의존하지 않고 얼굴 정서에 대한 정보를 얻을 것입니다.이 API를 시도하려면 사진here을 업로드합니다.
작업을 하려면 인지 서비스 설정과 제공된 노드에 접근하는 키가 필요합니다.
사용자는 셀카를 촬영합니다.

//components/MyMood.vue

async runFaceDetect() {
      this.clearSelfiePoem();
      this.complete = false;
      const imageAsset = await takePicture({
        width: 300,
        height: 500,
        keepAspectRatio: true,
        saveToGallery: false,
        cameraFacing: "front"
      });
      //process the asset
      const filePath = await this.getFilePath(imageAsset);
      const imageFile = File.fromPath(filePath);
      this.selfie = imageAsset;
      //send it to Azure
      this.result = await this.sendRequest(imageFile);
    },

그런 다음 이미지 파일이 인식 서비스로 전송되고 그 중에서 얼굴 API가 조회됩니다emotion. 얼굴 속성:

//components/MyMood.vue

sendRequest(file) {
      return new Promise((resolve, reject) => {
        const ses = session("image-upload");

        const request = {
          url:
            "https://emilyemotions.cognitiveservices.azure.com/face/v1.0/detect?returnFaceLandmarks=false&returnFaceAttributes=emotion",
          method: "POST",
          headers: {
            "Content-Type": "application/octet-stream",
            "Ocp-Apim-Subscription-Key": "provided-key"
          },
          description: "Uploading " + file.name
        };

        ...
      });
    }

Face API는 에 저장된 감정과 일치하는 정수 값을 반환하는 감정 그룹을 반환합니다.json 데이터 집합 우선.Face APIhere 사용에 대한 자세한 내용을 확인하십시오.

지금까지 이 프로그램은 시 한 수를 보여주는 과정부터 미리 처리된 감정을 이용하는 과정, 그리고 사용자의 얼굴에서 감정을 읽고 일치하는 시를 표시하는 과정을 보여 주었다.다음 글에서 나는 귀속신경 네트워크로 생성된 시를 어떻게 사용하여 이 응용 프로그램의 최종 화면을 구축하는지, 디킨슨이 자주 사용하는'민요 운율'을 측정하고 일치하며 재현할 수 있는지 토론할 것이다.이 시리즈의 두 번째 부분을 계속 주목해 주십시오!
나는 내가 너희들에게 에밀리 디킨슨의 깊은 깨달음을 불러일으키는 작품을 다시 읽지 않았다면, 아마도 낡은 문헌을 뒤져서 우리가 매일 개발하는 기술을 통해 어떻게 그것을 새로운 독자에게 소개할 수 있는지 깨우쳐 주었으면 좋겠다.프레젠테이션 슬라이드와 비디오, 전체 응용 프로그램 코드 라이브러리 here 를 포함한 이 작업의 자원을 찾습니다.
자세한 내용:
🤳 Face API
✍️ Text Analytics
👩🏻 Emily Dickinson