[WIP] エンジンのモック作成＋それを使ったコンポーネントテスト

.env.production

@@ -1,12 +1,12 @@
 VITE_APP_NAME=voicevox
 VITE_DEFAULT_ENGINE_INFOS=`[
     {
-        "uuid": "074fc39e-678b-4c13-8916-ffca8d505d1d",
-        "name": "VOICEVOX Engine",
-        "executionEnabled": true,
-        "executionFilePath": "vv-engine/run.exe",
+        "name": "Mock Engine",
+        "uuid": "00000000-0000-0000-0000-000000000000",
+        "executionEnabled": false,
+        "executionFilePath": "いらないはず",
         "executionArgs": [],
-        "host": "http://127.0.0.1:50021"
+        "host": "http://mock"
     }
 ]`
 VITE_OFFICIAL_WEBSITE_URL=https://voicevox.hiroshiba.jp/

package.json

@@ -81,6 +81,7 @@
     "@openapitools/openapi-generator-cli": "2.15.3",
     "@playwright/test": "1.48.2",
     "@quasar/vite-plugin": "1.8.1",
+    "@sglkc/kuromoji": "github:sglkc/kuromoji.js#3d4e9e12cf0f60a33019afb881945c348dc9dea6",
     "@storybook/addon-essentials": "8.4.4",
     "@storybook/addon-links": "8.4.4",
     "@storybook/addon-themes": "8.4.4",

src/sing/convertToWavFileData.ts → src/helpers/convertToWavFileData.ts

@@ -1,4 +1,13 @@
-export const convertToWavFileData = (audioBuffer: AudioBuffer) => {
+export const convertToWavFileData = (
+  audioBuffer:
+    | AudioBuffer
+    | {
+        sampleRate: number;
+        length: number;
+        numberOfChannels: number;
+        getChannelData(channel: number): Float32Array;
+      },
+) => {
   const bytesPerSample = 4; // Float32
   const formatCode = 3; // WAVE_FORMAT_IEEE_FLOAT
 

src/infrastructures/EngineConnector.ts

@@ -1,3 +1,5 @@
+import { createEngineUrl, EngineUrlParams } from "@/domain/url";
+import { createOpenAPIEngineMock } from "@/mock/engineMock";
 import { Configuration, DefaultApi, DefaultApiInterface } from "@/openapi";
 
 export interface IEngineConnectorFactory {
@@ -22,5 +24,35 @@ const OpenAPIEngineConnectorFactoryImpl = (): IEngineConnectorFactory => {
   };
 };
 
+/** WEB APIを持つエンジン用 */
 export const OpenAPIEngineConnectorFactory =
   OpenAPIEngineConnectorFactoryImpl();
+
+const OpenAPIMockEngineConnectorFactoryImpl = (): IEngineConnectorFactory => ({
+  instance: () => createOpenAPIEngineMock(),
+});
+
+/** WEB APIを持つエンジンを模したモック用 */
+export const OpenAPIMockEngineConnectorFactory =
+  OpenAPIMockEngineConnectorFactoryImpl();
+
+/** モック用エンジンのURLは `http://mock` とする */
+export const mockUrlParams = {
+  protocol: "http:",
+  hostname: "mock",
+  port: "",
+  pathname: "",
+} satisfies EngineUrlParams;
+
+/**
+ * WEB API エンジンとモックを使い分ける用。
+ * モック用エンジンのURLのときはモックを返す。
+ */
+export const OpenAPIEngineAndMockConnectorFactory: IEngineConnectorFactory = {
+  instance: (host: string) => {
+    if (host === createEngineUrl(mockUrlParams)) {
+      return OpenAPIMockEngineConnectorFactory.instance(host);
+    }
+    return OpenAPIEngineConnectorFactory.instance(host);
+  },
+};

src/mock/engineMock/README.md

@@ -0,0 +1,39 @@
+# エンジンモックのドキュメント
+
+## 概要
+
+通信を介さずに音声合成できるエンジンのモックです。
+
+同じ入力には同じ出力を返し、別の入力には別の出力を返すようになっています。
+また出力を見たときにUIや処理の実装の異常に気付けるように、ある程度直感に合う出力を返すよう努力されています。
+
+例：音量を下げると音声が小さくなる、音程と周波数が一致する、など。
+
+モックの実装は気軽に破壊的変更しても問題ありません。
+
+## ビルド戦略
+
+ブラウザ版でも使えるようにすべく、ソフトウェアにも組み込める形で実装されています。
+ビルド時のモックエンジンの取り扱いポリシーはこんな感じです。
+
+- 重い処理が一切実行されないようにする
+  - 辞書の初期化、画像の読み込みなど
+- なるべく重いファイルはビルドに含まれないようにする
+  - 形態素解析の辞書ファイルやダミー画像など
+
+## ファイル構成
+
+- `talkModelMock.ts`
+  - トーク用の音声クエリを作るまでの処理周り
+- `singModelMock.ts`
+  - ソング用の音声クエリを作るまでの処理周り
+- `audioQueryMock.ts`
+  - 音声クエリ周り
+- `synthesisMock.ts`
+  - 音声波形の合成周り
+- `characterResourceMock.ts`
+  - キャラ名や画像などのリソース周り
+- `phonemeMock.ts`
+  - 音素周り
+- `manifestMock.ts`
+  - エンジンのマニフェスト周り

src/mock/engineMock/audioQueryMock.ts

@@ -0,0 +1,195 @@
+/**
+ * AudioQueryとFrameAudioQueryのモック。
+ * VOICEVOX ENGINEリポジトリの処理とほぼ同じ。
+ */
+
+import { AccentPhrase, AudioQuery, FrameAudioQuery, Mora } from "@/openapi";
+
+function generateSilenceMora(length: number): Mora {
+  return {
+    text: "　",
+    vowel: "sil",
+    vowelLength: length,
+    pitch: 0.0,
+  };
+}
+
+function toFlattenMoras(accentPhrases: AccentPhrase[]): Mora[] {
+  let moras: Mora[] = [];
+  accentPhrases.forEach((accentPhrase) => {
+    moras = moras.concat(accentPhrase.moras);
+    if (accentPhrase.pauseMora) {
+      moras.push(accentPhrase.pauseMora);
+    }
+  });
+  return moras;
+}
+
+function toFlattenPhonemes(moras: Mora[]): string[] {
+  const phonemes: string[] = [];
+  for (const mora of moras) {
+    if (mora.consonant) {
+      phonemes.push(mora.consonant);
+    }
+    phonemes.push(mora.vowel);
+  }
+  return phonemes;
+}
+
+/** 前後の無音モーラを追加する */
+function applyPrePostSilence(moras: Mora[], query: AudioQuery): Mora[] {
+  const preSilenceMoras = [generateSilenceMora(query.prePhonemeLength)];
+  const postSilenceMoras = [generateSilenceMora(query.postPhonemeLength)];
+  return preSilenceMoras.concat(moras).concat(postSilenceMoras);
+}
+
+/** 無音時間を置き換える */
+function applyPauseLength(moras: Mora[], query: AudioQuery): Mora[] {
+  if (query.pauseLength != undefined) {
+    for (const mora of moras) {
+      if (mora.vowel == "pau") {
+        mora.vowelLength = query.pauseLength;
+      }
+    }
+  }
+  return moras;
+}
+
+/** 無音時間スケールを適用する */
+function applyPauseLengthScale(moras: Mora[], query: AudioQuery): Mora[] {
+  if (query.pauseLengthScale != undefined) {
+    for (const mora of moras) {
+      if (mora.vowel == "pau") {
+        mora.vowelLength *= query.pauseLengthScale;
+      }
+    }
+  }
+  return moras;
+}
+
+/** 話速スケールを適用する */
+function applySpeedScale(moras: Mora[], query: AudioQuery): Mora[] {
+  for (const mora of moras) {
+    mora.vowelLength /= query.speedScale;
+    if (mora.consonantLength) {
+      mora.consonantLength /= query.speedScale;
+    }
+  }
+  return moras;
+}
+
+/** 音高スケールを適用する */
+function applyPitchScale(moras: Mora[], query: AudioQuery): Mora[] {
+  for (const mora of moras) {
+    mora.pitch *= 2 ** query.pitchScale;
+  }
+  return moras;
+}
+
+/** 抑揚スケールを適用する */
+function applyIntonationScale(moras: Mora[], query: AudioQuery): Mora[] {
+  const voiced = moras.filter((mora) => mora.pitch > 0);
+  if (voiced.length == 0) {
+    return moras;
+  }
+
+  const meanF0 =
+    voiced.reduce((sum, mora) => sum + mora.pitch, 0) / voiced.length;
+  for (const mora of voiced) {
+    mora.pitch = (mora.pitch - meanF0) * query.intonationScale + meanF0;
+  }
+  return moras;
+}
+
+/** 疑問文の最後に音高の高いモーラを追加する */
+function applyInterrogativeUpspeak(accentPhrases: Array<AccentPhrase>) {
+  accentPhrases.forEach((accentPhrase) => {
+    const moras = accentPhrase.moras;
+    if (
+      moras.length > 0 &&
+      accentPhrase.isInterrogative &&
+      moras[moras.length - 1].pitch > 0
+    ) {
+      const lastMora = moras[moras.length - 1];
+      const upspeakMora: Mora = {
+        text: "ー",
+        vowel: lastMora.vowel,
+        vowelLength: 0.15,
+        pitch: lastMora.pitch + 0.3,
+      };
+      accentPhrase.moras.push(upspeakMora);
+    }
+  });
+}
+
+function secondToFrame(second: number): number {
+  const FRAME_RATE = 24000 / 256;
+  return Math.round(second * FRAME_RATE);
+}
+
+/** モーラや音素ごとのフレーム数を数える */
+function countFramePerUnit(moras: Mora[]): {
+  framePerPhoneme: number[];
+  framePerMora: number[];
+} {
+  const framePerPhoneme: number[] = [];
+  const framePerMora: number[] = [];
+
+  for (const mora of moras) {
+    const vowelFrames = secondToFrame(mora.vowelLength);
+    const consonantFrames = mora.consonantLength
+      ? secondToFrame(mora.consonantLength)
+      : 0;
+    const moraFrames = vowelFrames + consonantFrames;
+
+    if (mora.consonant) {
+      framePerPhoneme.push(consonantFrames);
+    }
+    framePerPhoneme.push(vowelFrames);
+    framePerMora.push(moraFrames);
+  }
+
+  return { framePerPhoneme, framePerMora };
+}
+
+/** AudioQueryを適当にFrameAudioQueryに変換する */
+export function audioQueryToFrameAudioQueryMock(
+  audioQuery: AudioQuery,
+  { enableInterrogativeUpspeak }: { enableInterrogativeUpspeak: boolean },
+): FrameAudioQuery {
+  const accentPhrases = audioQuery.accentPhrases;
+
+  if (enableInterrogativeUpspeak) {
+    applyInterrogativeUpspeak(accentPhrases);
+  }
+
+  let moras = toFlattenMoras(accentPhrases);
+  moras = applyPrePostSilence(moras, audioQuery);
+  moras = applyPauseLength(moras, audioQuery);
+  moras = applyPauseLengthScale(moras, audioQuery);
+  moras = applySpeedScale(moras, audioQuery);
+  moras = applyPitchScale(moras, audioQuery);
+  moras = applyIntonationScale(moras, audioQuery);
+
+  const { framePerPhoneme, framePerMora } = countFramePerUnit(moras);
+
+  const f0 = moras.flatMap((mora, i) =>
+    Array<number>(framePerMora[i]).fill(
+      mora.pitch == 0 ? 0 : Math.exp(mora.pitch),
+    ),
+  );
+  const volume = Array<number>(f0.length).fill(audioQuery.volumeScale);
+  const phonemes = toFlattenPhonemes(moras).map((phoneme, i) => ({
+    phoneme,
+    frameLength: framePerPhoneme[i],
+  }));
+
+  return {
+    f0,
+    volume,
+    phonemes,
+    volumeScale: audioQuery.volumeScale,
+    outputSamplingRate: audioQuery.outputSamplingRate,
+    outputStereo: audioQuery.outputStereo,
+  };
+}