アクセント欄やイントネーション欄のスライダーが不必要にアニメーションするのを防ぎたい

[Hiroshiba]

内容

アクティブなテキスト欄を変更した時や、アクセント句の結合を変えた時、イントネーションやアクセントのスライダーが不必要にアニメーションします。

↓例えばこんな感じで、アクセント句の結合を変更した箇所より右側のスライダーが上下するアニメーションが入っちゃっています。

_VOICEVOX.-.Ver.999.999.999.2023-09-28.01-56-11.mp4

↓それをこんな感じでガチャガチャしないようにしたいです。

_VOICEVOX.-.Ver.999.999.999.2023-09-28.01-55-49.mp4

Pros 良くなる点

クリエイターの気が散らなくなる

Cons 悪くなる点

実現方法

こうなってしまっている原因は簡単で、AccentPhraseコンポーネントを並べる時のkeyをインデックスにしているためだと思います。

voicevox/src/components/AudioDetail.vue

Lines 61 to 85 in f4f42d0

	<div
	v-for="(accentPhrase, accentPhraseIndex) in accentPhrases"
	:key="accentPhraseIndex"
	:ref="addAccentPhraseElem"
	class="mora-table"
	:class="[
	accentPhraseIndex === activePoint && 'mora-table-focus',
	uiLocked || 'mora-table-hover',
	]"
	@click="setPlayAndStartPoint(accentPhraseIndex)"
	>
	<accent-phrase
	:audio-key="activeAudioKey"
	:accent-phrase="accentPhrase"
	:index="accentPhraseIndex"
	:is-last="
	accentPhrases !== undefined &&
	accentPhrases.length - 1 === accentPhraseIndex
	"
	:selected-detail="selectedDetail"
	:shift-key-flag="shiftKeyFlag"
	:alt-key-flag="altKeyFlag"
	/>
	</div>
	</div>

テキスト欄を移動したりアクセント句の結合を変更したりした場合、同じ場所（インデックス）にあるものを変更だと捉えてアニメーションが発生する感じだと思います。
実際は隣に移動したり全然違うものになっていたりするので、そういうものはkeyが異なるようにしてあげれば勝ちだと思います。

解決策も単純で、AccentPhrase変数それぞれで個別IDを生成して割り振れば良いはずです。
ただ現状AccentPhraseはエンジンが返してきた値をそのまま使っているので、IDを持てるようにエディター用の型を作成し、エンジンのものと相互変換する必要がありそうです。

AudioQuery変数はこんな感じ↓でエンジン用のとエディター用の型を分けて相互変換しているので、そのコードが参考になるかもしれません
。

voicevox/src/store/type.ts

Lines 63 to 65 in f4f42d0

	export type EditorAudioQuery = Omit<AudioQuery, "outputSamplingRate"> & {
	outputSamplingRate: number | "engineDefault";
	};

voicevox/src/store/audio.ts

Lines 1316 to 1319 in f4f42d0

	const engineAudioQuery = convertAudioQueryFromEditorToEngine(
	audioQuery,
	state.engineManifests[engineId].defaultSamplingRate
	);

その他

初心者歓迎タスクラベルがついていますが、実装的にはちょっと難しいと思います。
結構色々変更する必要があって大変かもですが、わりと色々な勉強になると思うのでよかったら是非！

[P0ngCh4ng]

このIssueトライしてみます!

[Hiroshiba]

@P0ngCh4ng おお！！！ぜひぜひ！！！

結構既存コードにいい感じになじませるのが難しいかもなので、不明な点があれば本当に何でも聞いてください！！

[P0ngCh4ng]

ありがとうございます！

EditorAudioQueryの型のaccentPhraseを作ったEditorAccentPhraseに置き変えてみたんですが、

voicevox/src/components/Talk/AudioDetail.vue

Lines 187 to 189 in 1614db5

	const audioItem = computed(() => store.state.audioItems[props.activeAudioKey]);
	const query = computed(() => audioItem.value?.query);
	const accentPhrases = computed(() => query.value?.accentPhrases);

vscodeで見る限りaccentPhrase189行目の型がEditorAccentPhraseと認識されません。

export type EditorAudioQuery = Omit<AudioQuery, "outputSamplingRate" |  "AccentPhrases"> & {
  outputSamplingRate: number | "engineDefault";
  AccentPhrases: EditorAccentPhrase;
};

まずはここが通ればcomponent内で個別id付与して動くか試したいと思ってます。　

[Hiroshiba]

ご相談ありがとうございます！！

試してみた感じ、

Omit<AudioQuery, "outputSamplingRate" |  "AccentPhrases">
...
AccentPhrases: EditorAccentPhrase;

を

Omit<AudioQuery, "outputSamplingRate" |  "accentPhrases">
...
accentPhrases: EditorAccentPhrase;

とすれば動いたかもです！
存在しないキーをOmitしてもワーニング出ないんですね･･･。

[P0ngCh4ng]

ご返答ありがとうございます 🙏 🙏
ああそこでしたか 🤔

変更して引き続きやってみますね！