아이스크림이야, 얼룩개야?누가 알아?!머신러닝 구동 PWA 구축

에서 제공하는 복잡한 이미지

Vue를 사용하여 이미지 추정을 위한 PWA를 생성합니다.js와 사용자 정의 시각 AI

Tip! Do you want to try this tutorial in a cool interactive environment and earn a badge for completing it? Check out the companion module on Microsoft Learn!

오랫동안 나는 카론 자크(Insta의 @Teenybiscuite)가 창작한 일련의 인스타그램 이미지에 빠져들었다. 그는 최근 중대한 뉴스가 가득한 세계에 좋은 서비스를 제공했다. 아보카도 소스의 앵무새 이미지, 버거의 소시지 이미지, 치킨의 라브라도 개 이미지 등이다.다음은 이 창의적인 작업의 견본입니다.

고양이 VS 캐러멜

강아지와 버거

앵무새

Note: you can build your app by following along in Microsoft Learn where this content is explained in more depth. Take a look! The entire codebase is also found here.

이러한 복잡한 이미지를 처리하는 것은 우리가 정서를 경감시키고 각종 기계 학습 방법을 테스트하는 새로운 방법을 발견하여 이미지 식별과 분류에 사용할 수 있다.이 강좌에서 snappy 도구를 사용하여 이미지 추정을 하는 방법을 배울 것입니다. 이 도구의 이름은 Custom Vision AI 이기 때문에 처음부터 모형을 훈련할 필요가 없습니다.모델이 정확한 예측을 할 수 있는지 확인하기 위해 웹 응용 프로그램을 만들 것입니다.
사전 훈련 모델을 바탕으로 하는 인지 서비스를 사용하는 것은 좋은 방법으로 우수한 Azure Machine Learning cognitive services(내가 가장 좋아하는 인지 서비스 ML 플랫폼)을 사용하여 기계 학습 모델을 깊이 있게 하고 완전히 쓸모없는 웹 응용 프로그램(내가 가장 좋아하는 유형)을 구축하며 그 중에서 즐거움을 얻을 수 있다(내가 가장 좋아하는 활동).시작합시다!

Bonus! we're going to turn this app into a PWA (Progressive Web App). This kind of app works offline and on your mobile phone, even while leveraging a ML model - no API calls outside the app will be made! We might as well learn how to do this since it's a neat way to build a ML-infused app and a good thing to know how to do.

PWA 구축

우선 일반 바닐라 Vue를 만듭니다.js 응용 프로그램.snazzy vue ui 를 사용하거나 Vue CLI부터 시작하여 로컬 컴퓨터에 필요한 모든 요구 사항을 설치했다고 가정합니다.vue create my-tricky-app를 통해 Vue CLI를 사용하는 경우 애플리케이션에 설치할 기능을 수동으로 선택하여 PWA를 선택합니다.

PWA 동작을 제어하는 추가 파일이 포함된 기본 Vue 웹 사이트를 만듭니다.구체적인 내용은 다음과 같습니다.

RegisterService Worker.js

서비스 노동자.js

다양한 플랫폼에 사용되는 아이콘 몇 개

선창./public 폴더의 json, 이 아이콘과 기타 중요한 요소를 관리하는 데 사용

웹 응용 프로그램에서 브라우저의 개발자 도구 > 감사 창을 사용하여 Lighthouse 감사를 실행할 수 있습니다.이것은 오프라인 장면에서의 표현과 같은 재미있는 데이터를 제시할 것이다.적절한 Lighthouse 감사를 보려면 운영 환경의 웹 서버에서 응용 프로그램을 실행해야 하므로 자세한 내용은 나중에 이 단계로 돌아갑니다.

이제 응용 프로그램의 추리를 구축할 준비가 되었습니다. 이 추리는 사용자 정의 시각 AI에서 구축할 머신러닝 모델에 따라 다양한 이미지를 테스트합니다.너는 케론자크를 사용하여 그녀의 얼룩개 vs. 아이스크림 스티커를 그린 그림을 창작할 것이다. 나는 이미 그것을 16장의 그림으로 나누었다.그것들here을 다운로드하여 로컬 폴더/src/assets/images에 포함할 수 있습니다.

For a more detailed explanation of the reasoning behind the following code snippets, please visit the Learn module.

인터페이스 구축

기본 <HelloWorld/> 페이지의 이름을 <DetectImage/> 로 바꾸고 App.vue 에서 이 페이지를 참조합니다.그런 다음 제목, 이미지 및 버튼이 있는 간단한 템플릿을 만들고 msg 도구의 값을 What do you see? 로 변경합니다.

  <template>
    <div class="hello">
      <h1>{{ msg }}</h1>
      <div>
        <img class="image" ref="img" :src="require('../assets/images/' + getImgIndex + '.jpg')" />
      </div>
      <div>
        <button class="button" @click="next()" :disabled="disable">Next</button>
      </div>
      <div
        v-for="pred in predictions"
        :key="pred.index"
      >{{ pred.label }}: {{ pred.probability.toFixed(0) + '%' }}</div>
      <div v-if="!predictions.length">hmm.....</div>
    </div>
  </template>

이제 사용자 정의 시각 인공지능에서 훈련된 모델을 위탁 관리할 수 있는 응용 프로그램을 준비해야 한다.

너의 모델을 훈련시키다

이것이 바로 즐거움의 시작이다.CustomVision으로 이동합니다.ai 및 로그인.사용 가능한 자원 그룹에 항목을 만듭니다. (수중에 없으면 만듭니다.)이 프로젝트는 바이너리 분류를 하고 있기 때문에 classification 프로젝트로 만들어야 합니다.그림마다 표시가 하나밖에 없기 때문에, General (compact) 필드를 선택하면 웹에서 모델을 사용할 수 있습니다.TensorFlow에서 사용하기 때문에 기본 플랫폼으로 내보냅니다.js가 지원하는 상하문입니다.

이제 훈련을 받은 모델들에게 아이스크림과 얼룩개에 대한 지식을 가르쳐야 한다!이 점을 하려면 수업 시간당 약 10장부터 몇 장의 사진이 필요하다.나는 초콜릿 칩 아이스크림을 검색해서 cool extension 웹 페이지에서 그림을 긁어 훈련 이미지 집합을 만들었다.

Note, I only trained on six images per class. This is too small a set, of course, for accurate transfer learning but Custom Vision AI still handles this small set pretty well. For a production caliber model, you would of course want a bigger imageset.

로컬 기기에서 아이스크림과 얼룩개 이미지를 클래스별 두 개의 단독 폴더 ice cream 와 dalmatian 에 저장합니다.사용자 정의 Vision AI 인터페이스에서 폴더를 웹 페이지에 끌어다 놓고 매번 폴더를 끌어다 놓는다.태그 개 이미지dalmatian 및 아이스크림 이미지ice cream:

그림을 업로드하고 표시하면 훈련 프로그램을 시작할 수 있습니다.train 단추를 선택하고 모델 구축을 보십시오!완성된 후에 당신은 그것의 정확성을 보게 될 것입니다.귀여운 강아지의 새로운 이미지로 테스트해 보세요.당신의 모형은 얼마나 정확합니까?

생성된 모델 파일을 다운로드하여 public/models 의 웹 응용 프로그램에 배치할 수 있습니다.

cvexport.선적 명세서

레이블입니다.txt

모델입니다.json

무게.상자

Why place these files in /public, rather than in /assets or elsewhere? The public folder in a Vue.js app is a place to store static assets that should not be built by webpack. The four files produced by Custom Vision AI's build process need to stay untouched and be served ad hoc by your app without being bundled by webpack.

현재 너는 너의 인터넷 응용 프로그램에서 이것들을 사용할 수 있다.

웹 응용 프로그램 완료

기계 학습 파일의 사용을 지원하기 위해 npm를 통해 라이브러리를 설치해야 합니다.

웹 응용 루트 디렉터리에 있는 package.json 파일에 "customvision-tfjs": "^1.0.1", 목록을 추가합니다.

은 같은 파일에서 dependencies 목록에 추가됩니다.너는 이 소프트웨어 패키지로 읽기를 관리해야 한다.Vue 응용 프로그램의 txt 파일입니다.

같은 파일에서 마지막으로 "raw-loader": "^4.0.0", 를 devDependencies 목록에 추가하여 웹 팩 CLI가 응용 프로그램에서 사용할 수 있도록 하는 것도 텍스트 파일 분석에 필수적이다.

Fun fact! CustomVision-tfjs uses TensorFlow.js under the hood.

VS 코드의 터미널에서 프로그램이 현재 실행 중이면 (ctrl-c) 을 멈추고 다음 패키지를 추가하십시오."webpack-cli": "^3.3.10".이제 응용 프로그램의 devDependencies 영역을 구축할 수 있습니다.npm install 의 끝 표시에서 다음 코드로 새 <script> 표시를 만듭니다.

<script>
import * as cvstfjs from "customvision-tfjs";
import labels from "raw-loader!../../public/models/labels.txt";
export default {
  name: "DetectImage",
  props: {
    msg: String
  },
  data() {
    return {
      labels: labels,
      model: null,
      predictions: [],
      image: 0,
      numImages: 16
    };
  },
  computed: {
    getImgIndex() {
      return this.image.toString();
    },
    disable() {
      if (this.image == this.numImages) {
        return true;
      } else return false;
    }
  },

  async mounted() {
    this.image++;
    //load up a new model
    this.model = new cvstfjs.ClassificationModel();
    await this.model.loadModelAsync("models/model.json");
    //parse labels
    this.labels = labels.split("\n").map(e => {
      return e.trim();
    });
    //run prediction
    this.predict();
  },

  methods: {
    async predict() {
      //execute inference
      let prediction = await this.model.executeAsync(this.$refs.img);
      let label = prediction[0];
      //build up a predictions object
      this.predictions = label.map((p, i) => {
        return { index: i, label: this.labels[i], probability: p * 100 };
      });
    },

    next() {
      this.image++;
      this.predictions = [];
      setTimeout(this.predict, 500);
    }
  }
};
</script>

이 코드를 훑어봅시다.우선, 우리는 이전에 설치한 npm 라이브러리에서 <template>를 가져와 우리가 구축한 사용자 정의 시각 모델을 관리하는 데 도움을 주었다.
그런 다음 레이블 <script> 파일을 로드합니다.이것은 cvstfjs 소프트웨어 패키지를 이용했다.웹 팩이 이런 종류의 텍스트 파일을 어떻게 처리하는지 알려줘야 하기 때문에 루트 디렉터리에 새 파일을 추가합니다. 만약 그것이 거기에 없다면 .txt 코드는 다음과 같습니다.

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: 'raw-loader',
      },
    ],
  },
};

데이터 대상은 추리 방법을 구축할 때 사용할 변수에 대한 인용을 저장합니다.
계산 속성도 있습니다.이러한 요소는 표시된 이미지의 인덱스 및 더 이상 표시할 이미지가 없을 때 다음 버튼을 비활성화해야 하는 등 다양한 UI 요소를 계산하는 데 사용됩니다.
비동기식 raw-loader 라이프 사이클 연결에서 모델을 로드합니다.모델은 매우 클 수 있으므로 라벨 파일과 함께 불러온 후에 추리를 시작하는 것이 가장 좋으며, 라벨 파일도 반드시 해석을 거쳐야 한다.마지막으로, 모든 준비가 다 되었을 때, 당신은 전화를 걸 수 있습니다 webpack.config.js.mounted도 비동기적이며, Custom Vision의 npm 라이브러리를 사용하면 라벨과 일치할 것으로 예측됩니다.예측을 수행한 후 predict 버튼을 클릭하고 다음 그림에서 예측을 시작할 수 있습니다.Predict() 방법을 사용하여 처음부터 이미지를 불러오는 예측 속도를 늦추십시오.
일단 모델의 성능과 예측에 만족하면 웹 응용 프로그램을 위탁 관리 공급자, 예를 들어 Azure 사이트에 발표할 수 있습니다.

Remember how your app is a PWA? Once your app is built and published, you can switch to 'offline' mode using DevTools and watch how you can continue to use the inference methods. Custom Vision AI also allows you to create endpoints for your models, but using them requires online latency.

애플리케이션을 Azure 웹 사이트에 게시

가장 간단한 방법은 GitHub를 통한 작업입니다.워크플로우를 작성하고 Azure 포털을 GitHub에 연결합니다.응용 프로그램을 변경할 때마다 재구성됩니다.이것은 GitHub로 밀어 넣기만 하면 모델을 새로 고칠 수 있는 좋은 방법입니다.
근데 잠깐만!Azure에 게시하려면 루트 디렉터리에 파일next을 추가해야 합니다. 이 파일은 setTimeout 개의 파일을 확인할 수 있기 때문에 이 파일을 만들고 다음 코드를 추가하십시오.

<?xml version="1.0" encoding="utf-8"?>
  <configuration>
    <system.webServer>
      <staticContent>
        <remove fileExtension=".json"/>
        <mimeMap fileExtension=".json" mimeType="application/json"/>
      </staticContent>
    </system.webServer>
</configuration>

오, 그리고 하나 더!네가 해야 할 마지막 변화는 서비스 직원들이 세워질 수 있도록 하는 것이다.응용 프로그램의 루트 폴더 web.config 에 다음 코드를 포함하는 파일을 만들어야 합니다.

module.exports = {
    pwa: {
        workboxOptions: {
            exclude: [/\.map$/, /web\.config$/],
        },
    },
};

이 파일은 서비스 종사자에게 웹을 무시한다고 알려 줍니다.이전에 추가한 프로필은 서비스 종사자의 구축 과정에 문제가 발생할 수 있습니다.
현재, 응용 프로그램이 웹 서버에 발표되었을 때, 인터넷과 오프라인에서 작동하는 것을 볼 수 있습니다!

결론

본문에서 Vue를 구축하는 방법을 배웠습니다.js 네트워크 응용 프로그램은 기계 학습 모델에 의해 지원되고 오프라인으로 작업할 수 있습니다. 왜냐하면 이것은 삽입식 파일이 있는 PWA이기 때문입니다.또한 이러한 응용 프로그램을 Azure 자체에 배치하는 방법을 배웠습니다. 이것은 진정한 종합적인 해결 방안으로 당신의 이미지 추리 수요를 만족시킬 수 있습니다.좋은 이미지 처리 솔루션을 찾을 때 CustomVision.ai 시도해 보십시오. 이것은 이미지 추정을 처리하는 가장 좋은 방법이기 때문에 처음부터 구축하기가 쉽지 않습니다.아래 댓글에서 뭘 구축했는지 알려주세요!만약 당신이 동영상을 보고 싶다면, 나는 건축에 들어가는 요소this app를 설명했으니, 아래의 동영상을 보십시오.