diff --git a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx index d60cae1889..66c9d492e0 100644 --- a/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx +++ b/packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListPage.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useCallback, useState } from "react"; +import React, { useEffect, useCallback, useState, useMemo } from "react"; import { Link } from "react-router-dom"; import { SessionTtsInferenceResultListFc } from "../../_common/SessionTtsInferenceResultsListFc"; import { SessionTtsModelUploadResultListFc } from "../../_common/SessionTtsModelUploadResultsListFc"; @@ -109,6 +109,15 @@ function TtsModelListPage(props: Props) { setMaybeSelectedTtsModel, } = props; + const images = [ + "mascot/halloween_1.webp", + "mascot/halloween_2.webp", + "mascot/halloween_3.webp", + "mascot/kitsune_pose2.webp", + ]; + + const randomImage = useMemo(() => images[Math.floor(Math.random() * images.length)], []); + const [maybeTtsError, setMaybeTtsError] = useState< GenerateTtsAudioErrorType | undefined >(undefined); @@ -321,15 +330,6 @@ function TtsModelListPage(props: Props) { ); } - const images = [ - "mascot/halloween_1.webp", - "mascot/halloween_2.webp", - "mascot/halloween_3.webp", - "mascot/kitsune_pose2.webp", - ]; - - const randomImage = images[Math.floor(Math.random() * images.length)]; - return ( {bootstrapLanguageNotice}