ENH: モーフィングUIの実装 #1030

sabonerune · 2022-12-01T11:28:00Z

内容

モーフィングを適用するためのUIを追加します。

関連 Issue

close モーフィング機能のUI実装 #552

Hiroshiba

PRありがとうございます！！

こちらもいくつかコメントしたのですが、修正確認するにはおそらくモーフィングUI自体が必要だと思うので、モーフィングUIのPRにこちらも含めていただいても大丈夫です！！

src/type/preload.ts

src/store/audio.ts

src/components/AudioInfo.vue

sabonerune · 2022-12-20T10:31:51Z

src/components/CharacterButton.vue

@@ -24,9 +24,9 @@
      transition-show="none"
      transition-hide="none"
    >
-      <q-list>
+      <q-list style="min-width: max-content">


右方向に十分スペースがなかったときスタイル名が改行されてしまう問題への対処

src/components/CharacterButton.vue

src/helpers/previewSliderHelper.ts

sabonerune · 2022-12-20T10:52:13Z

src/store/audio.ts

+  VALID_MOPHING_INFO: {
+    getter: (state, getters) => (audioItem: AudioItem) => {
+      if (
+        !state.experimentalSetting.enableMorphing ||
+        audioItem.morphingInfo == undefined ||
+        audioItem.engineId == undefined
+      )
+        return false;
+      return (
+        getters.SELECTABLE_MOPHING_TARGET_ENGINES.includes(
+          audioItem.engineId
+        ) && audioItem.engineId === audioItem.morphingInfo.targetEngineId
+      );
+    },


AudioItemがモーフィングを実行するか判定する関数。
命名が思い浮かばず。

validは形容詞らしいので、まあVALID_MOPHING_INFOかなと思いました。（自信ないです。。）

sabonerune · 2022-12-20T11:00:43Z

最初はモーフィングが不可能なスタイルが設定された場合すぐに強制的に解除するように考えていましたが、
とりあえずどんな組み合わせも許容してAudioInfo上で警告、音声生成時はそのままモーフィングをせずにそのまま出力するという考え方になりました。

sabonerune · 2022-12-20T11:27:25Z

src/store/audio.ts

@@ -51,6 +52,7 @@ async function generateUniqueIdAndQuery(
      audioQuery,
      audioItem.engineId,
      audioItem.styleId,
+      audioItem.morphingInfo, // FIXME: モーフィング非対応エンジンの場合morphingInfoが異なっていても同じ音声が出力されるが異なるIDが生成されてしまう


getters.VALID_MOPHING_INFO(audioItem) ? audioItem.morphingInfo : undefined,

で解決できそうだがgettersをどこから持ってくればいいのか分からず。

まあ非対応エンジンでは音声を生成できずキャッシュが作れない関係でUniqueIdを利用する機会無いので、FIXしなくても良いかもと思いました！

非対応エンジンでも今のところ無視して通常の合成をしてしまうので無駄が出てしまいますね。

あと、実験的機能の設定でモーフィングが無効になっている場合でmorphingInfo が設定されている場合(プロジェクトファイルを読み込んだ等)モーフィングをせずに出力するようにしているのですがその後設定を変えるとキャッシュからモーフィングされていない音声が再生されてしまうことにきづきました。

モーフィングをしてしまえばこの部分の対処は楽ですがそうなるとモーフィングをかけていることに気づけるUIがないことが問題になりますね…

すみませんこちらお答えできていませんでした！
ちょっと追いきれてないのですが、まだここ問題になっていそうでしょうか･･･？ 👀

モーフィング非対応エンジンの方は問題ないですが、無効時の問題は解決していません。

あ、意図を把握しました！

モーフィングOFFにした場合、UIが消えるだけで、モーフィング済み結果を再生する形で良いかなと思います。
仰る通り気づくUIがないのは問題ですが、ぶっちゃけハマる人はかなりレアケースだと思いました。０人かもしれない。

まあでも問題を把握するのは大事なので、どこかにFIXMEコメントを書くか、issueを作るかが良いかなと思いました！

Hiroshiba · 2022-12-20T15:57:40Z

とりあえずどんな組み合わせも許容してAudioInfo上で警告、音声生成時はそのままモーフィングをせずにそのまま出力するという考え方になりました。

エラー出そうと思うとかなり大変だと思う＋まあまあなコーナケースなので、一旦その方針で問題ないと思います！
（どこかにFIXMEコメント残しとくと誰か気づけるかもですね）

Hiroshiba

良いですね！！！
とても大変だったと思います、ありがとうございます！！

名称変更をいっぱい提案していますが、別にどれも致命的ではないのでそのままでも問題ないと思います。
気にいったものだけ取り込んで頂ければ･･･！

Hiroshiba · 2022-12-22T18:45:20Z

src/components/AudioInfo.vue

+          <div class="text-body2 text-no-wrap ellipsis overflow-hidden">
+            {{
+              morphingTargetCharacterInfo
+                ? morphingTargetCharacterInfo.metas.speakerName
+                : "未設定"
+            }}
+          </div>
+          <div
+            v-if="
+              morphingTargetCharacterInfo &&
+              morphingTargetCharacterInfo.metas.styles.length >= 2
+            "
+            class="text-body2 text-no-wrap ellipsis overflow-hidden"
+          >
+            ({{
+              morphingTargetStyleInfo
+                ? morphingTargetStyleInfo.styleName
+                : undefined
+            }})
+          </div>


スタイル選択ボタンの表記と合わせて横並びにすると馴染み深いかもと思いました！

Suggested change

<div class="text-body2 text-no-wrap ellipsis overflow-hidden">

{{

morphingTargetCharacterInfo

? morphingTargetCharacterInfo.metas.speakerName

: "未設定"

}}

</div>

<div

v-if="

morphingTargetCharacterInfo &&

morphingTargetCharacterInfo.metas.styles.length >= 2

"

class="text-body2 text-no-wrap ellipsis overflow-hidden"

>

({{

morphingTargetStyleInfo

? morphingTargetStyleInfo.styleName

: undefined

}})

</div>

<div class="text-body2 text-no-wrap ellipsis overflow-hidden">

{{

morphingTargetCharacterInfo

? morphingTargetCharacterInfo.metas.speakerName +

(morphingTargetStyleInfo &&

morphingTargetCharacterInfo.metas.styles.length >= 2

? ` (${morphingTargetStyleInfo.styleName})`

: "")

: "未設定"

}}

</div>

まあAudioInfoを最小幅にすると消えちゃうのですが･･･。
（デザインは全体的に見て最終調整するので、そのままにしていただいても大丈夫です！）

src/components/AudioInfo.vue

Hiroshiba · 2022-12-22T19:08:29Z

src/store/audio.ts

@@ -51,6 +52,7 @@ async function generateUniqueIdAndQuery(
      audioQuery,
      audioItem.engineId,
      audioItem.styleId,
+      audioItem.morphingInfo, // FIXME: モーフィング非対応エンジンの場合morphingInfoが異なっていても同じ音声が出力されるが異なるIDが生成されてしまう


まあ非対応エンジンでは音声を生成できずキャッシュが作れない関係でUniqueIdを利用する機会無いので、FIXしなくても良いかもと思いました！

Hiroshiba · 2022-12-22T19:10:33Z

src/store/audio.ts

+  VALID_MOPHING_INFO: {
+    getter: (state, getters) => (audioItem: AudioItem) => {
+      if (
+        !state.experimentalSetting.enableMorphing ||
+        audioItem.morphingInfo == undefined ||
+        audioItem.engineId == undefined
+      )
+        return false;
+      return (
+        getters.SELECTABLE_MOPHING_TARGET_ENGINES.includes(
+          audioItem.engineId
+        ) && audioItem.engineId === audioItem.morphingInfo.targetEngineId
+      );
+    },


validは形容詞らしいので、まあVALID_MOPHING_INFOかなと思いました。（自信ないです。。）

src/components/AudioInfo.vue

src/store/audio.ts

src/components/AudioInfo.vue

Co-authored-by: Hiroshiba <[email protected]>

sabonerune · 2022-12-26T09:32:55Z

src/store/audio.ts

      if (
-        !state.experimentalSetting.enableMorphing ||


VALID_MOPHING_INFOの判定からモーフィングの設定を外しました。

sabonerune · 2022-12-26T09:35:36Z

src/store/audio.ts


        return dispatch("INSTANTIATE_ENGINE_CONNECTOR", {
          engineId,
        })
          .then((instance) => {
            if (
              audioItem.morphingInfo != undefined &&
+              state.experimentalSetting.enableMorphing &&


モーフィングの設定は音声合成時に確認します

sabonerune · 2022-12-26T10:27:51Z

一通り直しました。

モーフィングができないときの処理と表示について考える必要がありそうです。

sabonerune · 2022-12-29T09:39:20Z

src/components/Dialog.ts

@@ -83,7 +87,7 @@ export async function generateAndSaveAllAudioWithDialog({

  const successArray: Array<string | undefined> = [];
  const writeErrorArray: Array<WriteErrorTypeForSaveAllResultDialog> = [];
-  const engineErrorArray: Array<string | undefined> = [];
+  const engineErrorArray: Array<WriteErrorTypeForSaveAllResultDialog> = [];


暫定的に既存の型をそのまま流用。
エラーダイアログを出す方針が確定したらWriteErrorとEngineError両方で使える型名に変更するか新しく型を定義する。

sabonerune · 2022-12-29T10:05:06Z

src/components/SaveAllResultDialog.vue

+              <q-item-section>
+                <q-item-label>{{ value.path }}</q-item-label>
+                <q-item-label v-if="value.message"
+                  >詳細：{{ value.message }}</q-item-label


すみません。
何故かcrlfの変換をかけてしまいました。

エンジンエラーの詳細を追加しました。

sabonerune · 2022-12-29T10:05:39Z

src/components/SaveAllResultDialog.vue

+</template>
+
+<script lang="ts">
+import { WriteErrorTypeForSaveAllResultDialog } from "@/store/type";


型付けのためのインポート追加

sabonerune · 2022-12-29T10:06:10Z

src/components/SaveAllResultDialog.vue

+  props: {
+    successArray: {
+      type: Array as PropType<string | undefined[]>,
+      required: true,
+    },
+    writeErrorArray: {
+      type: Array as PropType<WriteErrorTypeForSaveAllResultDialog[]>,
+      required: true,
+    },
+    engineErrorArray: {
+      type: Array as PropType<WriteErrorTypeForSaveAllResultDialog[]>,
+      required: true,
+    },


propsを型付け

sabonerune · 2022-12-29T10:08:41Z

src/store/type.ts

+export type GenerateAudioResultObject =
+  | {
+      result: "SUCCESS";
+      blob: Blob;
+    }
+  | {
+      result: "VALID_MOPHING_ERROR" | "EDITOR_ERROR" | "ENGINE_ERROR";
+      errorMessage?: string;
+    };
+


GENERATE_AND_SAVE_AUDIOにならってGenerateAudioResultObject型を追加してエラーの内容とメッセージを追加。

エラーの種別は必要なかったかもしれない？

AND_SAVEではないGENERATE_AUDIO系は一旦throwのままでも良いかもと思いました！
現状なにか値を返すことがなく、型とメッセージで完結してるので･･･！
（new Error("hoge")で指定した文字列はe.messageで取得できるはず）

どこかでエラーハンドリングし忘れてthrowできてない可能性を極力なくしたいためです。
（なのですが、そもそもエラーハンドリングをどうすべきかまだ結論が出せてなくて、将来は気持ちが変わってるかもです･･･ 🙇‍♂️ ）

sabonerune · 2022-12-29T10:47:28Z

暫定的にエラーダイアログにモーフィングの設定が間違っていることが表示されるようにへんこうしてみました。
よさそうなら進めてみます。

Hiroshiba · 2023-01-06T18:12:40Z

完了したら合図頂ければ･･･！

sabonerune · 2023-01-07T04:10:10Z

すいません、コメントしたつもりになって送信できていませんでした。
修正しましたので確認お願いします。

src/store/audio.ts

sabonerune · 2023-01-09T05:38:39Z

とりあえずFIXMEコメント付けました。

Hiroshiba

LGTM！！！！！！！！！！

お疲れ様でした！！！！
VOICEVOXエディタはなかなか複雑な構造をしているのですが、問題を的確に把握し、ガッツを持って取り組んでくださってとても嬉しかったです！！！
よければまたプルリクや提案issue頂けると嬉しいです、ありがとうございました！！

Hiroshiba · 2023-01-13T21:41:09Z

あ、zod化にともなってコンフリクトが起こっているようです 🙇‍♂️
uuidなんかは確か string().uuid() とかで指定可能なので短縮できるかもです！

エンジン側でモーフィングを実装してくださった @mes51 さん、せっかくなのでもしよければ実際にUIを触ってみたときのレビュー頂けませんか 👀
（コードはかなり事前知識のいる内容なため、UIを結構見て頂けると心強いです！！）

mes51 · 2023-01-14T13:05:13Z

見させていただきまして、概ね問題無さそうでした。
ただ、(おそらくこれに限らずなので別件ではありますが)1点、ウインドウサイズによってはキャラクター選択のメニューが上方向に伸びてしまうため、一番上の選択肢がタイトルバーの領域と被ってしまい、操作がタイトルバーに吸われてしまうようです。

Desktop.2023.01.14.-.20.46.59.02_1.mp4

この問題に関しては、おそらくポップアップで出てくるUI共通の問題だと思う(MenuBarの-webkit-app-region: dragがマウス操作を全部吸ってしまっている)ので別でIssueを立てるほうが良いかもしれません
おそらく関連するIssue: electron/electron#1354

Hiroshiba · 2023-01-14T14:26:09Z

お試しありがとうございます！！

とりあえずいったんは表示される方向を下にするとかで解決可能なのかなと思いました！
キャラクター並び替えで一番上にお気に入りのキャラが表示されるので、カーソルの近さ的にもそっちのがユーザビリティが高いのかな～と！！

sabonerune · 2023-01-14T15:33:22Z

マージできました。

sabonerune · 2023-01-16T08:42:20Z

とりあえずいったんは表示される方向を下にするとかで解決可能なのかなと思いました！キャラクター並び替えで一番上にお気に入りのキャラが表示されるので、カーソルの近さ的にもそっちのがユーザビリティが高いのかな～と！！

メニューの方向を下に固定することが思ったより難しそうです。
QMenuは展開方向にスペースが足りないとき、自動的に展開方向を反転するのですがその動作を止める方法が見つけられませんでした。

QMenuのmax-heightに下方向の空きスペースのサイズを入れるという手もありそうですが自分には難しそうな感じがします。

Hiroshiba · 2023-01-16T09:27:05Z

なるほどです！！anchorを強制する方法、確かになさそうですね。。。
max heightのアイデア面白いです、思いつきませんでした！

うーん、仕方ない気がします！諦めましょう…！
キャラクターの非表示機能が必要かもですね…。
調査ありがとうございました！！！

Hiroshiba · 2023-01-16T09:42:23Z

あ、コンフリクト解消でプリセット保存回りの形情報が抜けたかもです！

type/preload.tsにある
postPhonemeLength: z.number(),
の下あたりに設定が必要かなと！

これ型不一致エラーどこにも出てないっぽいですね。。難しい。。

src/type/preload.ts

sevenc-nanashi · 2023-01-16T11:14:53Z

強引に、q-menuの要素に-webkit-app-region: no-dragを設定する、でも対策できそう？（未検証）

Hiroshiba · 2023-01-16T11:22:34Z

@sevenc-nanashi
あ！
それでメニューバーに重なる部分は解決なのですが、個人的にはお気に入りキャラが遠い位置に表示されるのが特に問題だと考えてます！

Hiroshiba · 2023-01-16T11:25:12Z

zod周りも問題なさそうだったのでマージしたいと思います！！

かなり長い期間の調整、広範囲の影響にも関わらず取り組んでいただき本当にありがとうございました！！！
こちらはなかなかに面白い機能なので、プレビュー版先行テストのアピールの直前辺りで報告して興味を持ってもらおうと思います！

改めて @mes51 さん、 @sabonerune さん、ありがとうございました！！！

Hiroshiba reviewed Dec 1, 2022

View reviewed changes

src/type/preload.ts Outdated Show resolved Hide resolved

src/store/audio.ts Outdated Show resolved Hide resolved

sabonerune marked this pull request as draft December 3, 2022 14:32

sabonerune force-pushed the morphing_ui/audioStore branch from d5a6d91 to a35afc6 Compare December 5, 2022 09:53

sabonerune added 3 commits December 20, 2022 18:42

ENH: audioStoreにモーフィング適用するための操作を追加

bc41c37

FIX: MorphingInfo型からundefinedを除去

202f31a

ENH: モーフィングUIとプリセットを追加

9a15da6

sabonerune force-pushed the morphing_ui/audioStore branch from ce49463 to 9a15da6 Compare December 20, 2022 10:09

sabonerune changed the title ~~ENH: audioStoreにモーフィング適用するための操作を追加~~ ENH: モーフィングUIの実装 Dec 20, 2022

sabonerune commented Dec 20, 2022

View reviewed changes

src/components/AudioInfo.vue Outdated Show resolved Hide resolved

sabonerune commented Dec 20, 2022

View reviewed changes

src/components/CharacterButton.vue Outdated Show resolved Hide resolved

sabonerune commented Dec 20, 2022

View reviewed changes

src/helpers/previewSliderHelper.ts Show resolved Hide resolved

sabonerune commented Dec 20, 2022

View reviewed changes

sabonerune marked this pull request as ready for review December 20, 2022 13:03

Hiroshiba mentioned this pull request Dec 21, 2022

F0もモーフィング対称にした方が良い？ VOICEVOX/voicevox_engine#532

Closed

Hiroshiba reviewed Dec 22, 2022

View reviewed changes

sabonerune and others added 4 commits December 26, 2022 17:18

Update src/components/AudioInfo.vue

bd6e7a2

Co-authored-by: Hiroshiba <[email protected]>

Update src/components/AudioInfo.vue

c5991c8

Co-authored-by: Hiroshiba <[email protected]>

FIX: 変数名等を修正

efe21bd

FIX: convertAudioQueryFromEditorToEngineを共通化

811dee7

sabonerune commented Dec 26, 2022

View reviewed changes

ADD: モーフィングの設定が不正である場合エラーを返してその旨をダイアログに表示する

9ba2528

sabonerune commented Dec 29, 2022

View reviewed changes

Hiroshiba mentioned this pull request Jan 3, 2023

TypeScript＋UIでのエラーハンドリングはどうするのが良い？ #1086

Open

FIX: GenerateAudioResultObjectを廃止して例外を投げるように変更

8156f65

FIX: PLAY_AUDIOのエラー処理を変更

586ed7b

sabonerune requested review from Hiroshiba and removed request for y-chan January 7, 2023 04:10

Hiroshiba reviewed Jan 8, 2023

View reviewed changes

src/store/audio.ts Show resolved Hide resolved

Hiroshiba reviewed Jan 8, 2023

View reviewed changes

src/store/audio.ts Show resolved Hide resolved

Hiroshiba mentioned this pull request Jan 8, 2023

複数選択＆複数変更機能 #457

Closed

2 tasks

sabonerune added 2 commits January 9, 2023 10:42

FIX: 設定でモーフィングが無効化されていてもモーフィングが行われるように変更

f754a6e

FIXMEコメントの追加

5dc0556

FIX: Errorの型名を変更

bd2b4f1

Hiroshiba approved these changes Jan 13, 2023

View reviewed changes

mes51 mentioned this pull request Jan 14, 2023

メニューなどがタイトルバーに被った際、被った部分でマウス操作が出来ない #1110

Closed

3 tasks

Merge branch 'main' into working/morphing_ui

97a59af

sabonerune commented Jan 16, 2023

View reviewed changes

src/type/preload.ts Show resolved Hide resolved

Hiroshiba merged commit 21ff141 into VOICEVOX:main Jan 16, 2023

sabonerune deleted the morphing_ui/audioStore branch January 22, 2023 02:33

sabonerune mentioned this pull request Apr 18, 2023

ENH: CharacterButtonのメニューが常に下方向に展開されるようにする #1291

Merged

ENH: モーフィングUIの実装 #1030

ENH: モーフィングUIの実装 #1030

Conversation

sabonerune commented Dec 1, 2022 • edited Loading

内容

関連 Issue

Hiroshiba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sabonerune commented Dec 20, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hiroshiba Jan 8, 2023 • edited Loading

Choose a reason for hiding this comment

Hiroshiba commented Dec 20, 2022

Hiroshiba left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sabonerune commented Dec 26, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hiroshiba Jan 3, 2023 • edited Loading

Choose a reason for hiding this comment

sabonerune commented Dec 29, 2022

Hiroshiba commented Jan 6, 2023

sabonerune commented Jan 7, 2023

sabonerune commented Jan 9, 2023

Hiroshiba left a comment

Choose a reason for hiding this comment

Hiroshiba commented Jan 13, 2023

mes51 commented Jan 14, 2023

Hiroshiba commented Jan 14, 2023

sabonerune commented Jan 14, 2023

sabonerune commented Jan 16, 2023

Hiroshiba commented Jan 16, 2023

Hiroshiba commented Jan 16, 2023

sevenc-nanashi commented Jan 16, 2023

Hiroshiba commented Jan 16, 2023

Hiroshiba commented Jan 16, 2023

sabonerune commented Dec 1, 2022 •

edited

Loading

Hiroshiba Jan 8, 2023 •

edited

Loading

Hiroshiba Jan 3, 2023 •

edited

Loading