느린 개발자

최근에는 ChatGPT와 같은 인공지능 모델의 등장으로 개발자들이 구글 검색보다는 모델을 활용하여

정보를 얻거나 개발에 도움을 받는 경우가 많아졌습니다.

저도 요즘 구글 검색보단 ChatGPT를 많이 활용하여 개발을 진행하곤 합니다.

그래서 딥러닝 관련하여 관심이 많아졌는데 이번에 ONNX에 대해서 알게 되어

Nuxt 프레임워크에서 ONNX에 관련된 테스트 프로젝트를 진행해보려고 합니다.

 

 

딥러닝 프레임 워크? 이식성? ONNX?

 

딥러닝 분야에는 다양한 프레임워크가 존재하고 각각 독특한 모델 구조와 형식을 가지고 있습니다. 이로 인해서 다른 프레임워크 간에 모델을 공유하거나 이식하는 것이 번거로웠습니다. 예를 들어 Tensor Flow로 학습한 모델을 PyTorch에서 사용하고자 할 때 이식하기가 힘들었죠 그래서 이러한 번거로움을 해결하고 다양한 프레임워크 간에 모델을 쉽게 공유하고 실행할 수 있는

표준 형식으로 ONNX 등장했습니다.

 

ONNX가 무엇?

ONNX(Open Neural Network Exchange)는 2017년에 Microsoft, Facebook, Amazon 등의 주요 회사들이 협력하여 개발한 여러 다른 딥러닝 프레임워크 간에 모델을 공유하고 호환성을 제공하기 위한 개방형 딥러닝 형식입니다.

ONNX는 다양한 딥러닝 프레임워크 간에 모델을 공유하고 호환성을 제공하기 위해 만들어졌습니다. Tensor Flow, PyTorch, Caffe 등 다양한 딥러닝 프레임워크에서 학습한 모델을 다른 프레임워크에서 추론하는 데 사용할 수 있게 해 줍니다

ONNX는 여러 회사와 연구 기관들이 협력하여 개발한 프로젝트입니다. 이를 통해 딥러닝 커뮤니티 간의 협업과 지식 공유가 활성화되었습니다. ONNX는 오픈소스로 개발되었으며, GitHub와 같은 플랫폼에서 소스 코드를 확인하고 기여할 수 있습니다. 이러한 활발한 커뮤니티의 참여를 통해 ONNX는 지속적으로 발전하고 개선되고 있습니다.

 

그러나 아직까지는 어느 정도 버그나 호환성이 부족한 건 사실입니다.

(지속적으로 발전한다니.. 지켜봐야겠습니다!)

 

 

ONNX Runtime??

ONNX Runtime은 이러한 ONNX 모델을 추론하기 위한 최적화된 실행 환경을 제공하여 모델의 성능을 향상합니다. ONNX Runtime은 다양한 플랫폼에서 실행될 수 있으며, CPU, GPU, 그리고 특정 하드웨어 가속기를 활용하여 고성능 추론을 제공합니다.

 

onnxruntime-web은 웹 브라우저 환경에서 사용할 수 있도록 지원하는 라이브러리입니다. 웹 브라우저에서 딥러닝 모델을 로드하고 추론을 실행할 수 있어, 클라이언트 측에서 강력한 머신러닝 기능을 제공하는 웹 애플리케이션을 개발할 수 있게 합니다. onnxruntime-web은 WASM(WebAssembly)과 WebGL을 활용하여 모델을 효율적으로 실행하고, 웹 개발자들이 머신러닝을 쉽게 적용할 수 있는 환경을 제공합니다.

 

 

onnxruntime-web

 

---

 

프로젝트 환경

• Nuxt 2.15.8
• vue 2.7.10
• webpack 4.46.0
• @nuxtjs/composition-api 0.33.1
• onnxruntime-web 1.14.0

onnxruntime-web Github에 들어가서 데모 프로젝트들을 보시면 Next, React로 되어있는 것도 있고 Vue로 되어있는 것도 있습니다. 그런데 nuxt 2.15.8 버전에서 onnxruntime-web 1.14.0 보다 높은 버전을 인스톨하여 사용하면 무슨 어떤 모듈을 못 찾는다 뭐다 에러가 엄청 나옵니다.. 현재 1.15.1 버전까지 나왔는데 Github에 디펜더시 보니 webpack이 없어서 그런 거 일수도 있고.. Nuxt 2.15.8 버전이 Webpack에 영향을 많이 받는 거 같더라고요 뭔가 안 돼서 그나마 되는 버전 최신까지 확인해서 1.14.0으로 확정 지어 진행했습니다. Nuxt3로 마이그레이션 하라고 하시는 분들도 있긴 하지만.. 아직 안 되는 것이나 지원 안 하는 것도 있어서 추후에 해볼까 합니다

 

 

 

onnxruntime-web 설치

npm install onnxruntime-web@1.14.0

 

 

onnxruntime-web  WebAssembly 정적 파일 설정

[Webpack] copy-webpack-plugin 모듈에 대해 알아보자

느린 개발자

 

copy-webpack-plugin 모듈을 사용하여 설정합니다. 자세한 내용은 위에 링크를 통해서 설치하시면 됩니다.

//nuxt.config.js
import path from 'path'
import CopyPlugin from 'copy-webpack-plugin'

export default{

  //생략
  
  build:{
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: path.join(
              __dirname,
              'node_modules',
              'onnxruntime-web',
              'dist'
            ),
            to: path.join(__dirname, 'static', '_nuxt') //static/_nuxt 폴더로 복사
          }
        ]
      })
    ]
  
  }


}

onnxruntime-web을 설치하고 node_modules에 onnxruntime-web dist 폴더에 wasm 파일들이 있는데 WebAssembly으로 실행하기 위해선 이 파일들이 필요하여 CopyPlugin으로 정적파일을 복사합니다.

 

 

ONNX InferenceSession 세션 생성

자, 이제 다 왔습니다. 아니 오히려 여기가 시작이라고 할 수 있습니다.. 혹여나 오류를 만나게 되면 onnx파일 자체일 수도 있고 아니면 댓글 부탁드립니다. 제가 봤던 오류일 수도 있고, 해결 못한 오류 일수도 있어서 공유해 주시면 제가 아는 선에서 최대한 답글 드리겠습니다. 아무튼! pages/test.vue 생성하여 작성합니다.

 

<template>
</template>

<script lang="ts" setup>
import { InferenceSession } from 'onnxruntime-web'
import { onMounted, ref } from 'vue'

const onnxSession = ref<InferenceSession | null>(null)
const onnxFile = ref<ArrayBuffer | null>(null)

// onnx 세션 생성
const createSession = async () => {
  try {
     onnxSession.value = await InferenceSession.create(onnxFile.value, {
      executionProviders: ['wasm'] // 중요! 'wasm' 으로 꼭 설정
    })
  } catch (e) {
    console.log(e)
  }
}

const fetchModelFile = async () =>{
  try {
     const onnxPath = 'onnx 파일경로' // static 폴더 model 폴더에 옮기고 '/model/a.onnx'
     const response = await fetch(onnxPath)
     onnxFile.value = await response.arrayBuffer()
  } catch (e) {
    console.log(e)
  }

}

onMounted(async () => {
  await fetchModelFile() // onnx 파일에 응답데이터를 ArrayBuffer 형태로 변환
  await createSession() // 변환된 ArrayBuffer 데이터로 세션 생성
})
</script>

 

 

onnxruntime-web Type Error

타입을 못 찾거나 빨간 줄이 나오면 tsconfig.json에 타입을 추가합니다.

{
  "compilerOptions": {
     // 생략
     
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "typeRoots": ["types"],
    "types": [
      "@nuxt/types",
      "@types/node",
      "onnxruntime-web" // onnxruntime-web 추가
    ],
    "include": [
    "/**/*.ts",
    "**/*.vue"
    ] 
  },
}

 

 

onnxruntime-web Demo

onnx 파일이 없어서 테스트를 진행 못하신다면 아래 onnxruntime-web-demo에서 public 폴더에 파일이 있습니다. 그리고 위에 세션을 성공하고 난다음 콘솔로 확인 이후에 아래 onnx파일로 아래 예제 진행해 보시면 됩니다.

GitHub - microsoft/onnxruntime-web-demo: demos to show the capabilities of ONNX Runtime Web