Electron용 WinML 추가 기능 만들기

이 가이드에서는 Electron 앱에서 WinML(Windows Machine Learning)을 사용하는 C# 네이티브 추가 기능을 만드는 방법을 보여 줍니다. WinML을 사용하면 이미지 분류, 개체 검색 등의 작업을 위해 Windows 디바이스에서 로컬로 machine learning 모델(ONNX 형식)을 실행할 수 있습니다.

필수 조건

비고

WinML은 모든 Windows 10(1809 이상) 또는 Windows 11 디바이스에서 실행됩니다. 최상의 성능을 위해 GPU 또는 NPU가 있는 디바이스를 권장하지만 API는 CPU에서도 작동합니다.

1단계: C# 네이티브 추가 기능 만들기

npx winapp node create-addon --template cs --name winMlAddon

그러면 Windows SDK 및 Windows App SDK 참조로 구성된 C# project winMlAddon/ 폴더가 만들어집니다.

추가 기능을 빌드합니다.

npm run build-winMlAddon

2단계: SqueezeNet 모델 다운로드

  1. AI 개발자 갤러리 설치
  2. 이미지 분류 샘플로 이동합니다.
  3. SqueezeNet 1.1 모델 다운로드
  4. project 루트의 .onnx 폴더에 models/ 파일 복사

비고

모델을 ONNX 모델 동물원 GitHub 리포지토리 다운로드할 수도 있습니다.

3단계: 필요한 NuGet 패키지 추가

project 루트에서 Directory.packages.props 업데이트합니다.

<PackageVersion Include="Microsoft.ML.OnnxRuntime.Extensions" Version="0.14.0" />
<PackageVersion Include="System.Drawing.Common" Version="9.0.9" />

winMlAddon/winMlAddon.csproj를 업데이트하여 패키지 참조를 추가합니다.

<PackageReference Include="Microsoft.ML.OnnxRuntime.Extensions" />
<PackageReference Include="System.Drawing.Common" />

4단계: 샘플 코드 추가

AI 개발자 갤러리는 SqueezeNet을 사용하여 이미지 분류를 위한 완전한 구현을 제공합니다. electron-winml 샘플에서 수정된 코드를 찾을 수 있습니다.

샘플에서 winMlAddon/ 폴더를 복사하거나, 샘플 코드를 사용하여 winMlAddon/addon.cs를 수동으로 업데이트합니다.

주요 구현 세부 정보

Project 루트 경로: 추가 기능을 사용하려면 JavaScript 코드가 project 루트 경로를 전달하여 ONNX 모델 및 네이티브 종속성을 찾을 수 있도록 합니다.

네이티브 종속성 미리 로드: 추가 기능에는 개발 및 프로덕션 시나리오 모두에서 작동하는 필수 DLL을 로드하는 메서드가 포함되어 있습니다.

Electron Forge 구성: 네이티브 파일의 압축을 풀도록 패키지러를 구성합니다.

module.exports = {
  packagerConfig: {
    asar: {
      unpack: "**/*.{dll,exe,node,onnx}"
    },
    ignore: [
      /^\/.winapp\//,
      "\\.msix$",
      /^\/winMlAddon\/(?!dist).+/
    ]
  },
};

5단계: 추가 기능 빌드

npm run build-winMlAddon

6단계: 추가 기능 테스트

src/index.js 추가 기능을 열고 로드합니다.

const winMlAddon = require('../winMlAddon/dist/winMlAddon.node');

테스트 함수를 추가합니다.

const testWinML = async () => {
  try {
    let projectRoot = path.join(__dirname, '..');
    if (projectRoot.includes('app.asar')) {
      projectRoot = projectRoot.replace('app.asar', 'app.asar.unpacked');
    }

    const addon = await winMlAddon.Addon.createAsync(projectRoot);
    console.log('Model loaded successfully!');

    const imagePath = path.join(projectRoot, 'test-images', 'sample.jpg');
    const predictions = await addon.classifyImage(imagePath);

    console.log('Top predictions:');
    predictions.slice(0, 5).forEach((pred, i) => {
      console.log(`${i + 1}. ${pred.label}: ${(pred.confidence * 100).toFixed(2)}%`);
    });
  } catch (error) {
    console.error('Error testing WinML:', error.message);
  }
};

샘플 이미지가 있는 test-images/ 폴더를 만들어 테스트 이미지를 준비한 다음, 다음을 실행합니다.

npm start

7단계: 디버그 ID 업데이트

npx winapp node add-electron-debug-identity

비고

스파스 패키징된 Electron 애플리케이션에서 크래시 또는 빈 창이 발생할 수 있는 것으로 알려진 Windows 버그가 있습니다. 해결 방법은 설치 가이드 를 참조하세요.

다음 단계

  • Last updated on