Vite 化 (#488)

* vite 追加 * vite dev で動くようになったので一旦コミット * pnpm run dev * vite + mts 化 * vite config にファイル設定 * dev / build を用意 * examples が pnpm build に成功した * examples のビルド方法を追加 * ビルドと起動 * deploy.yml をシンプルにする * 不要なコード削除 * とりあえず呼び出し * とりあえず vite-plugin-static-copy を使ってみる * ファイル保存 * 画像を bundle するようにする * 粛々と vite 化 * vite 化 * vite 化 * 不要なリンクを削除 * title 修正 * name 入れておく * 整理
shiguredo · Oct 10, 2024 · cdef062 · cdef062
1 parent b086f3a
commit cdef062
Show file tree

Hide file tree

Showing 37 changed files with 1,332 additions and 681 deletions.
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -25,7 +25,6 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - uses: pnpm/action-setup@v4
-        name: Install pnpm
       - run: pnpm --version
       - run: pnpm install
       - run: pnpm run build

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,14 +1,11 @@
 name: GitHub Pages Deploy
 
-# Controls when the workflow will run
 on:
   push:
     branches: ["develop"]
 
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -22,23 +19,16 @@ jobs:
         with:
           node-version: "18"
       - uses: pnpm/action-setup@v4
-        name: Install pnpm
       - run: pnpm install
-      - run: pnpm run build
-      - name: Prepare static files
-        run: |
-          mkdir _site/
-          cp -r examples/ _site/
-          rm _site/examples/virtual-background
-          cp -r packages/virtual-background/dist/ _site/examples/virtual-background
-          rm _site/examples/light-adjustment
-          cp -r packages/light-adjustment/dist/ _site/examples/light-adjustment
-          rm _site/examples/light-adjustment-gpu
-          cp -r packages/light-adjustment-gpu/dist/ _site/examples/light-adjustment-gpu
-          rm _site/examples/noise-suppression
-          cp -r packages/noise-suppression/dist/ _site/examples/noise-suppression
+      - name: Build
+        run: pnpm build
+      - name: Build examples
+        run: pnpm build
+        working-directory: examples
       - name: Upload files
         uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./examples/dist
       - name: Slack Notification
         if: failure()
         uses: rtCamp/action-slack-notify@v2
@@ -60,4 +50,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,11 @@
 {
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  },
   "[javascript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },

diff --git a/CHANGES.md b/CHANGES.md
@@ -24,6 +24,9 @@
 
 ### misc
 
+- [CHANGE] examples のビルドを Vite を利用するようにする
+  - @voluntas
+
 ## light-adjustment-gpu-2023.1.1
 
 - [FIX] ライト調整 GPU 版の semantic_guided_llie_324x240 のパラメータが間違っていたのを修正

diff --git a/examples/README.md b/examples/README.md
@@ -1,8 +1,28 @@
 # Media Processors サンプル
 
 本リポジトリが提供するメディア処理パッケージの実際に動作するサンプルです:
-- 仮想背景: [virtual-background.html](virtual-background.html)
-- ノイズ抑制: [noise-suppression.html](noise-suppression.html)
+
+## ライブラリのビルド
+
+まずはライブラリのビルドをしておく必要があります。
+
+```bash
+pnpm build
+```
+
+## サンプルの起動
+
+```bash
+cd examples
+pnpm dev
+```
+
+## サンプルのビルド
+
+```bash
+cd examples
+pnpm build
+```
 
 ## ライセンス
 

diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,19 @@
+<html lang="ja">
+
+<head>
+  <meta charset="utf-8">
+  <title>Media Processors Examples</title>
+</head>
+
+<body>
+  <div class="container">
+    <ul>
+      <li><a href="/virtual-background/">仮想背景サンプル</a></li>
+      <li><a href="/light-adjustment/">ライト調整サンプル</a></li>
+      <li><a href="/light-adjustment-gpu/">ライト調整GPUサンプル</a></li>
+      <li><a href="/noise-suppression/">ノイズ抑制サンプル</a></li>
+    </ul>
+  </div>
+</body>
+
+</html>
diff --git a/examples/light-adjustment b/examples/light-adjustment
diff --git a/examples/light-adjustment-gpu b/examples/light-adjustment-gpu
diff --git a/examples/light-adjustment-gpu.html b/examples/light-adjustment-gpu.html
diff --git a/examples/light-adjustment-gpu/index.html b/examples/light-adjustment-gpu/index.html
@@ -0,0 +1,43 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Media Processors: ライト調整(GPU)サンプル</title>
+</head>
+
+<body>
+  <h1>Media Processors: ライト調整(GPU)サンプル</h1>
+
+  <h3>入力映像設定</h3>
+  解像度: <input id="videoWidth" type="number" min="1" max="2000" value="640">x
+  <input id="videoHeight" type="number" min="1" max="2000" value="360">
+  &nbsp;
+  FPS: <input id="videoFps" type="number" min="1" max="120" value="15">
+  &nbsp; <br />
+  入力カメラデバイス: <select id="videoDevice" size="1">
+    <option>未指定</option>
+  </select><br />
+  モデル:
+  <select id="model">
+    <option value="semantic_guided_llie_1284x720">Semantic-Guided-Low-Light-Image-Enhancement 1284x720</option>
+    <option selected value="semantic_guided_llie_648x360">Semantic-Guided-Low-Light-Image-Enhancement 648x360</option>
+    <option value="semantic_guided_llie_648x480">Semantic-Guided-Low-Light-Image-Enhancement 648x480</option>
+    <option value="semantic_guided_llie_324x240">Semantic-Guided-Low-Light-Image-Enhancement 324x240</option>
+  </select>
+  効果強度: <input id="strength" type="range" min="0.0" max="1.0" value="0.5" step="0.05">
+  <output id="strengthValue">0.5</output>
+  <br />
+  <input type="button" value="設定反映" id="start">
+
+  <br />
+
+  <h3>左: 処理映像、右: オリジナル映像</h3>
+
+  フレーム処理時間: <span id="elapsed">0.0</span> 秒 フレームレート: <span id="fps">0.0</span>FPS<br />
+  <video id="videoProcessed" autoplay playsinline style="border: 1px solid blue;"></video>
+  <video id="videoOriginal" autoplay playsinline style="border: 1px solid red;"></video><br />
+
+  <script type="module" src="./main.mts"></script>
+</body>
+
+</html>
diff --git a/examples/light-adjustment-gpu/main.mts b/examples/light-adjustment-gpu/main.mts
@@ -0,0 +1,90 @@
+import { LightAdjustmentGpuProcessor } from '@shiguredo/light-adjustment-gpu'
+
+document.addEventListener('DOMContentLoaded', async () => {
+  if (!LightAdjustmentGpuProcessor.isSupported()) {
+    alert('Unsupported platform')
+    throw Error('Unsupported platform')
+  }
+
+  let processor: LightAdjustmentGpuProcessor
+  setInterval(() => {
+    if (processor !== undefined) {
+      const elapsed = processor.getAverageProcessedTimeMs() / 1000
+      const elapsedElement = document.getElementById('elapsed') as HTMLSpanElement
+      elapsedElement.textContent = elapsed.toFixed(4).padStart(4, '0')
+      const fps = processor.getFps()
+      const fpsElement = document.getElementById('fps') as HTMLSpanElement
+      fpsElement.textContent = fps.toFixed(2).padStart(5, '0')
+    }
+  }, 300)
+
+  function getUserMedia() {
+    const constraints = {
+      width: (document.getElementById('videoWidth') as HTMLInputElement).value,
+      height: (document.getElementById('videoHeight') as HTMLInputElement).value,
+      frameRate: { ideal: (document.getElementById('videoFps') as HTMLInputElement).value },
+      deviceId: (document.getElementById('videoDevice') as HTMLInputElement).value,
+    }
+    return navigator.mediaDevices.getUserMedia({ video: constraints }).then((result) => {
+      updateDeviceList()
+      return result
+    })
+  }
+
+  let isFirst = true
+  async function updateDeviceList() {
+    if (!isFirst) {
+      return
+    }
+    isFirst = false
+
+    const devices = await navigator.mediaDevices.enumerateDevices()
+    const videoDevices = devices.filter((device) => device.kind === 'videoinput' && device.label)
+    const select = document.getElementById('videoDevice') as HTMLSelectElement
+    for (const device of videoDevices) {
+      const option = document.createElement('option')
+      option.value = device.deviceId
+      option.text = device.label
+      select.appendChild(option)
+    }
+  }
+
+  function updateStrength(event: Event) {
+    if (processor !== undefined) {
+      processor.setStrength((event.target as HTMLInputElement).value)
+    }
+    const strengthValueElement = document.getElementById('strengthValue')
+    if (strengthValueElement !== null) {
+      strengthValueElement.textContent = (event.target as HTMLInputElement).value
+    }
+  }
+
+  async function start() {
+    if (processor !== undefined) {
+      processor.stopProcessing()
+    }
+    processor = new LightAdjustmentGpuProcessor(
+      '',
+      (document.getElementById('model') as HTMLInputElement).value,
+      (document.getElementById('strength') as HTMLInputElement).value,
+    )
+
+    const stream = await getUserMedia()
+    const videoOriginalElement = document.getElementById('videoOriginal') as HTMLVideoElement
+    videoOriginalElement.srcObject = stream
+
+    const track = stream.getVideoTracks()[0]
+    const options = {}
+    const processedTrack = await processor.startProcessing(track, options)
+    const videoProcessedElement = document.getElementById('videoProcessed') as HTMLVideoElement
+    videoProcessedElement.srcObject = new MediaStream([processedTrack])
+
+    const strengthElement = document.getElementById('strength') as HTMLInputElement
+    strengthElement.addEventListener('change', updateStrength)
+  }
+
+  const startButton = document.getElementById('start') as HTMLButtonElement
+  startButton.addEventListener('click', start)
+
+  start()
+})