+
+ {/*
+
+
+
+
+
+
+
+ {historyData &&
+ historyData.map((item, index) => (
+
+ {JSON.stringify(barkGenerationParams, null, 2)} */}
+
+ );
+};
+
+export default BarkGenerationPage;
+
+function Inputs({
+ barkGenerationParams,
+ setBarkVoiceGenerationParams,
+ handleChange,
+ data,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ setBarkVoiceGenerationParams: (
+ barkGenerationParams: BarkGenerationParams
+ ) => void;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+
+ );
+}
+
+const ForEachSubsequentGeneration = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+ {/* {HistoryPromptVoiceSetting({ barkGenerationParams, handleChange })} */}
+
+
+
+
+ {barkGenerationParams.history_setting === "or Use a voice:" && (
+
+
+
+ )}
+
+ {/* {PromptType({ barkGenerationParams, handleChange })} */}
+
+
+
+
+
+
+ );
+};
+
+const randomSeed = () => {
+ return Math.floor(Math.random() * 2 ** 32);
+};
+
+const Seed = ({
+ barkGenerationParams,
+ setBarkVoiceGenerationParams,
+ handleChange,
+ lastSeed,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ setBarkVoiceGenerationParams: (
+ barkGenerationParams: BarkGenerationParams
+ ) => void;
+ handleChange: (event: React.ChangeEvent
+ {[
+ "Use old generation as history",
+ "or Use history prompt setting",
+ "or Clear history",
+ ].map((subsequentSetting) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
+
+// generic old generation dropdown for both OldGeneration and HistoryPromptSemantic
+const OldGenerationDropdown = ({
+ barkGenerationParams,
+ handleChange,
+ name,
+ label,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+
+ );
+};
+
+const OldGeneration = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+ );
+};
+
+const HistoryPromptVoiceSetting = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (
+ event:
+ | React.ChangeEventVoice:
+
+
+
+ {generate_choice_string(
+ barkGenerationParams.useV2,
+ barkGenerationParams.languageRadio,
+ barkGenerationParams.speakerIdRadio
+ )}
+
+
+
+
+ );
+};
+
+const PromptType = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+ {[
+ "Empty history",
+ "or Use a voice:",
+ "or Use old generation as history:",
+ ].map((model) => (
+
+
+
+
+
+ ))}
+
+
+
+ );
+};
+
+const Language = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+ {["Short prompt (<15s)", "Split prompt by lines"].map((promptType) => (
+
+
+
+
+
+ ))}
+
+ {[
+ "English",
+ "German",
+ "Spanish",
+ "French",
+ "Hindi",
+ "Italian",
+ "Japanese",
+ "Korean",
+ "Polish",
+ "Portuguese",
+ "Russian",
+ "Turkish",
+ "Chinese",
+ ].map((model) => (
+
+
+ );
+};
+
+const GenericPrompt = ({
+ barkGenerationParams,
+ handleChange,
+ label,
+ name,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ ))}
+
+
+
+
+ );
+};
+
+const BurnInPrompt = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ );
+};
+
+const TextTemp = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ );
+};
+
+const SpeakerID = ({
+ barkGenerationParams,
+ handleChange,
+}: {
+ barkGenerationParams: BarkGenerationParams;
+ handleChange: (event: React.ChangeEvent
+ {["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"].map((model) => (
+
+
+ );
+};
diff --git a/react-ui/src/pages/bark_settings.tsx b/react-ui/src/pages/bark_settings.tsx
new file mode 100644
index 00000000..f13e4a73
--- /dev/null
+++ b/react-ui/src/pages/bark_settings.tsx
@@ -0,0 +1,283 @@
+import React from "react";
+import { Template } from "../components/Template";
+import Head from "next/head";
+import useLocalStorage from "../hooks/useLocalStorage";
+import {
+ BarkSettingsParams,
+ initialBarkSettingsParams,
+ barkSettingsId,
+} from "../tabs/BarkSettingsParams";
+
+type Result = string;
+
+const BarkSettingsPage = () => {
+ const [data, setData] = useLocalStorage
+
+
+
+ ))}
+
+
+
+ );
+};
+
+export default BarkSettingsPage;
diff --git a/react-ui/src/pages/bark_voice_generation.tsx b/react-ui/src/pages/bark_voice_generation.tsx
new file mode 100644
index 00000000..10baad39
--- /dev/null
+++ b/react-ui/src/pages/bark_voice_generation.tsx
@@ -0,0 +1,160 @@
+import React from "react";
+import { Template } from "../components/Template";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import Head from "next/head";
+import {
+ BarkVoiceGenerationParams,
+ barkVoiceGenerationId,
+ initialState,
+} from "../tabs/BarkVoiceGenerationParams";
+import { GradioFile } from "../types/GradioFile";
+
+type Result = {
+ filename: string;
+ preview: GradioFile;
+};
+
+const BarkVoiceGenerationPage = () => {
+ const [data, setData] = useLocalStorage
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Save Beacon */}
+
+
+
+
+
+ {data}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Recommended settings:
+
+ -
+
- For VRAM >= 10GB, use large models. +
- For VRAM < 10GB, use small models. +
- + Text generation and coarse-to-fine are of similar importance. + +
- Small models might not have a perceptible difference. +
-
+ For VRAM < 4GB, use CPU offloading (requires restart).
+
-
+
- Small models are also recommended. +
+ - + For VRAM < 2GB, use CPU offloading and small models (requires + restart). + +
-
+
+
+
+
+
+
+
+ );
+};
+
+export default BarkVoiceGenerationPage;
diff --git a/react-ui/src/pages/demucs.tsx b/react-ui/src/pages/demucs.tsx
index f8fc58aa..66fbc3fc 100644
--- a/react-ui/src/pages/demucs.tsx
+++ b/react-ui/src/pages/demucs.tsx
@@ -1,81 +1,73 @@
-import React, { useState } from "react";
+import React from "react";
import { Template } from "../components/Template";
-import FileInput from "../components/FileInput";
-import { AudioPlayer } from "../components/MemoizedWaveSurferPlayer";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import Head from "next/head";
+import { DemucsParams, demucsId, initialState } from "../tabs/DemucsParams";
+import { GradioFile } from "../types/GradioFile";
-type AudioOutput = {
- name: string;
- data: string;
- size?: number;
- is_file?: boolean;
- orig_name?: string;
+type TypedGradioFile = GradioFile & {
type_name?: string;
};
-function addTypeNameToAudioOutput(audioOutput: AudioOutput, typeName: string) {
- return { ...audioOutput, type_name: typeName };
-}
+const typeNames = ["drums", "bass", "other", "vocals"];
-function addTypeNamesToAudioOutputs(
- audioOutputs: AudioOutput[],
+const addTypeNamesToAudioOutputs = (
+ audioOutputs: TypedGradioFile[],
typeNames: string[]
-) {
- return audioOutputs.map((audioOutput, index) =>
- addTypeNameToAudioOutput(audioOutput, typeNames[index])
- );
-}
-
-type MusicgenParams = {
- file: string | null;
-};
+) =>
+ audioOutputs.map((audioOutput, index) => ({
+ ...audioOutput,
+ type_name: typeNames[index],
+ }));
-const GradioPage = () => {
- const [data, setData] = useState
+ {
+ setBarkVoiceGenerationParams({
+ ...barkVoiceGenerationParams,
+ audio: file,
+ });
+ }}
+ filter={["sendToBarkVoiceGeneration"]}
+ />
+
+ {/* use_gpu checkbox */}
+
+
+
+
+ setBarkVoiceGenerationParams({
+ ...barkVoiceGenerationParams,
+ [e.target.name]: e.target.checked,
+ })
+ }
+ />
+
+
+
+
+ {/* Print voice filename */}
+
+
+
+
+
+
+
-
-
- {
- const melody = file?.name || null;
- setMelody(file && URL.createObjectURL(file));
- setMusicgenParams({
- ...musicgenParams,
- file: melody,
+
+ Demucs - TTS Generation Webui
+
+ (
+ "rvcGenerationHistory",
+ initialHistory
+ );
+ const [data, setData] = useLocalStorage(
+ "rvcGenerationOutput",
+ null
+ );
+ const [rvcGenerationParams, setRvcGenerationParams] =
+ useLocalStorage(RVCId, initialState);
+ const [loading, setLoading] = React.useState(false);
+
+ async function rvcGeneration() {
+ setLoading(true);
+ const response = await fetch("/api/gradio/rvc", {
+ method: "POST",
+ body: JSON.stringify(rvcGenerationParams),
+ });
+
+ const result = await response.json();
+ setData(result);
+ setHistoryData((historyData) => [result, ...historyData]);
+ setLoading(false);
+ }
+
+ // const favorite = async (_url: string, data?: Result) => {
+ // const history_bundle_name_data = data?.bundle_name;
+ // if (!history_bundle_name_data) return;
+ // const response = await fetch("/api/gradio/bark_favorite", {
+ // method: "POST",
+ // body: JSON.stringify({
+ // history_bundle_name_data,
+ // }),
+ // });
+ // const result = await response.json();
+ // console.log(result);
+ // };
+
+ const useParameters = (_url: string, data?: Result) => {
+ const {
+ f0up_key: pitch_up_key,
+ original_audio_path: original_audio,
+ index_path: index,
+ f0method: pitch_collection_method,
+ model_path: model,
+ index_rate: search_feature_ratio,
+ device,
+ is_half: use_half_precision_model,
+ filter_radius: filter_radius_pitch,
+ resample_sr: resample_sample_rate_bug,
+ rms_mix_rate: voice_envelope_normalizaiton,
+ protect: protect_breath_sounds,
+ } = data?.metadata ?? {};
+
+ setRvcGenerationParams({
+ ...rvcGenerationParams,
+ pitch_up_key: pitch_up_key ?? rvcGenerationParams.pitch_up_key,
+ // original_audio,
+ index: index ?? rvcGenerationParams.index,
+ pitch_collection_method:
+ pitch_collection_method ?? rvcGenerationParams.pitch_collection_method,
+ model: model ?? rvcGenerationParams.model,
+ search_feature_ratio:
+ search_feature_ratio ?? rvcGenerationParams.search_feature_ratio,
+ device: device ?? rvcGenerationParams.device,
+ use_half_precision_model:
+ use_half_precision_model ??
+ rvcGenerationParams.use_half_precision_model,
+ filter_radius_pitch:
+ filter_radius_pitch ?? rvcGenerationParams.filter_radius_pitch,
+ resample_sample_rate_bug:
+ resample_sample_rate_bug ??
+ rvcGenerationParams.resample_sample_rate_bug,
+ voice_envelope_normalizaiton:
+ voice_envelope_normalizaiton ??
+ rvcGenerationParams.voice_envelope_normalizaiton,
+ protect_breath_sounds:
+ protect_breath_sounds ?? rvcGenerationParams.protect_breath_sounds,
+ });
+ };
+
+ const funcs = [useParameters];
+
+ const handleChange = (
+ event:
+ | React.ChangeEvent
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => {
+ const { name, value, type } = event.target;
+ setRvcGenerationParams({
+ ...rvcGenerationParams,
+ [name]:
+ type === "number" || type === "range"
+ ? Number(value)
+ : type === "checkbox"
+ ? (event.target as HTMLInputElement).checked // type assertion
+ : value,
+ });
+ };
+
+ return (
+
+
+ RVC - TTS Generation Webui
+
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ const [options, setOptions] = React.useState([]);
+ const [loading, setLoading] = React.useState(false);
+
+ const fetchOptions = async () => {
+ setLoading(true);
+ const response = await fetch("/api/gradio/rvc_model_reload", {
+ method: "POST",
+ });
+
+ const result = await response.json();
+ setOptions(result);
+ setLoading(false);
+ };
+
+ const openModels = async () => {
+ await fetch("/api/gradio/rvc_model_open", {
+ method: "POST",
+ });
+ };
+
+ React.useEffect(() => {
+ fetchOptions();
+ }, []);
+
+ const selected = rvcGenerationParams?.model;
+ return (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ const [options, setOptions] = React.useState([]);
+ const [loading, setLoading] = React.useState(false);
+
+ const fetchOptions = async () => {
+ setLoading(true);
+ const response = await fetch("/api/gradio/rvc_index_reload", {
+ method: "POST",
+ });
+
+ const result = await response.json();
+ setOptions(result);
+ setLoading(false);
+ };
+
+ const openModels = async () => {
+ await fetch("/api/gradio/rvc_index_open", {
+ method: "POST",
+ });
+ };
+
+ React.useEffect(() => {
+ fetchOptions();
+ }, []);
+
+ const selected = rvcGenerationParams?.index;
+ return (
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+ data?: Result | null;
+}) => {
+ return (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ return (
+ ) => void;
+ label: string;
+ name: string;
+}) => {
+ return (
+ ) => void;
+ label: string;
+ name: string;
+ min: string;
+ max: string;
+ step: string;
+}) => {
+ return (
+ ) => void;
+}) => (
+ ) => void;
+}) => (
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ return (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ return (
+ (
+ "tortoiseGenerationHistory",
+ initialHistory
+ );
+ const [data, setData] = useLocalStorage(
+ "tortoiseGenerationOutput",
+ null
+ );
+ const [tortoiseGenerationParams, setTortoiseGenerationParams] =
+ useLocalStorage(
+ tortoiseGenerationId,
+ initialState
+ );
+ // loading state
+ const [loading, setLoading] = React.useState(false);
+
+ async function tortoiseGeneration() {
+ setLoading(true);
+ const response = await fetch("/api/gradio/tortoise", {
+ method: "POST",
+ body: JSON.stringify(tortoiseGenerationParams),
+ });
+
+ const result = await response.json();
+ setData(result);
+ setHistoryData((historyData) => [result, ...historyData]);
+ setLoading(false);
+ }
+
+ const useSeed = (_url: string, data?: Result) => {
+ const seed = data?.seed;
+ if (!seed) return;
+ setTortoiseGenerationParams({
+ ...tortoiseGenerationParams,
+ seed: Number(seed),
+ });
+ };
+
+ const favorite = async (_url: string, data?: Result) => {
+ const history_bundle_name_data = data?.bundle_name;
+ if (!history_bundle_name_data) return;
+ const response = await fetch("/api/gradio/bark_favorite", {
+ method: "POST",
+ body: JSON.stringify({
+ history_bundle_name_data,
+ }),
+ });
+ const result = await response.json();
+ console.log(result);
+ };
+
+ // const useParameters = (_url: string, data?: Result) => {
+ // const {
+ // prompt,
+ // speaker,
+ // preset,
+ // cvvp_amount,
+ // split_prompt,
+ // samples,
+ // diffusion_iterations,
+ // temperature,
+ // length_penalty,
+ // repetition_penalty,
+ // top_p,
+ // max_mel_tokens,
+ // cond_free,
+ // cond_free_k,
+ // diffusion_temperature,
+ // model,
+ // generation_name,
+ // } = data?.metadata ?? {};
+ // if (!prompt) return;
+ // setTortoiseGenerationParams({
+ // ...tortoiseGenerationParams,
+ // prompt,
+ // speaker,
+ // preset,
+ // cvvp_amount,
+ // split_prompt,
+ // samples,
+ // diffusion_iterations,
+ // temperature,
+ // length_penalty,
+ // repetition_penalty,
+ // top_p,
+ // max_mel_tokens,
+ // cond_free,
+ // cond_free_k,
+ // diffusion_temperature,
+ // model,
+ // generation_name,
+ // });
+ // }
+
+ const funcs = [useSeed, favorite];
+
+ const handleChange = (
+ event:
+ | React.ChangeEvent
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => {
+ const { name, value, type } = event.target;
+ setTortoiseGenerationParams({
+ ...tortoiseGenerationParams,
+ [name]:
+ type === "number" || type === "range"
+ ? Number(value)
+ : type === "checkbox"
+ ? (event.target as HTMLInputElement).checked // type assertion
+ : value,
+ });
+ };
+
+ return (
+
+
+ Tortoise - TTS Generation Webui
+
+ ) => void;
+}) => {
+ const [options, setOptions] = React.useState([]);
+ const [loading, setLoading] = React.useState(false);
+
+ const fetchOptions = async () => {
+ setLoading(true);
+ const response = await fetch("/api/gradio/tortoise_refresh_voices", {
+ method: "POST",
+ });
+
+ const result = await response.json();
+ setOptions(result);
+ setLoading(false);
+ };
+
+ const openVoices = async () => {
+ await fetch("/api/gradio/tortoise_open_voices", {
+ method: "POST",
+ });
+ };
+
+ React.useEffect(() => {
+ fetchOptions();
+ }, []);
+
+ const selected = tortoiseGenerationParams?.speaker;
+ return (
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+ ) => void;
+}) => {
+ return (
+ ) => void;
+}) => {
+ return (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ const [options, setOptions] = React.useState([]);
+ const [loading, setLoading] = React.useState(false);
+ const [applyModelSettingsLoading, setApplyModelSettingsLoading] =
+ React.useState(false);
+
+ const fetchOptions = async () => {
+ setLoading(true);
+ const response = await fetch("/api/gradio/tortoise_refresh_models", {
+ method: "POST",
+ });
+
+ const result = await response.json();
+ setOptions(result);
+ setLoading(false);
+ };
+
+ const openModels = async () => {
+ await fetch("/api/gradio/tortoise_open_models", {
+ method: "POST",
+ });
+ };
+
+ const applyModelSettings = async () => {
+ setApplyModelSettingsLoading(true);
+ const params = {
+ model: tortoiseGenerationParams.model,
+ kv_cache: tortoiseGenerationParams.kv_cache,
+ use_deepspeed: tortoiseGenerationParams.use_deepspeed,
+ half: tortoiseGenerationParams.half,
+ tokenizer: tortoiseGenerationParams.tokenizer,
+ use_basic_cleaners: tortoiseGenerationParams.use_basic_cleaners,
+ };
+ const response = await fetch("/api/gradio/tortoise_apply_model_settings", {
+ method: "POST",
+ body: JSON.stringify(params),
+ });
+ const result = await response.json();
+ console.log(result);
+ setApplyModelSettingsLoading(false);
+ };
+
+ const BasicModelCheckbox = ({
+ name,
+ label,
+ handleChange,
+ }: {
+ name: string;
+ label: string;
+ handleChange: (event: React.ChangeEvent) => void;
+ }) => (
+ ) => void;
+}) => (
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+ data?: Result | null;
+}) => {
+ return (
+ ) => void;
+ lastSeed?: number;
+}) => {
+ return (
+ ) => void;
+ label: string;
+ name: string;
+}) => {
+ return (
+ ) => void;
+ label: string;
+ name: string;
+ min: string;
+ max: string;
+ step: string;
+}) => {
+ return (
+ ) => void;
+}) => (
+ ) => void;
+}) => (
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ return (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => (
+
+ | React.ChangeEvent
+ | React.ChangeEvent
+ ) => void;
+}) => {
+ return (
+ (
+ "vocosOutputNpz",
+ null
+ );
+ const [dataEncodec, setDataEncodec] = useLocalStorage(
+ "vocosOutputNpzEncodec",
+ null
+ );
+ const [vocosParams, setVocosParams] = useLocalStorage(
+ vocosIdNPZ,
+ initialState
+ );
+
+ async function vocos() {
+ const response = await fetch("/api/gradio/vocos_npz", {
+ method: "POST",
+ body: JSON.stringify(vocosParams),
+ });
+
+ const result = await response.json();
+ setData(result);
+ }
+
+ async function encodec_decode() {
+ const response = await fetch("/api/gradio/encodec_decode", {
+ method: "POST",
+ body: JSON.stringify(vocosParams),
+ });
+
+ const result = await response.json();
+ setDataEncodec(result);
+ }
+
+ return (
+
+
+ Vocos - TTS Generation Webui
+
+ (
+ "vocosOutput",
+ null
+ );
+ const [vocosParams, setVocosParams] = useLocalStorage(
+ vocosId,
+ initialState
+ );
+
+ async function vocos() {
+ const response = await fetch("/api/gradio/vocos_wav", {
+ method: "POST",
+ body: JSON.stringify(vocosParams),
+ });
+
+ const result = await response.json();
+ setData(result);
+ }
+
+ const useAsInput = (audio?: string) => {
+ if (!audio) return;
+ setVocosParams({
+ ...vocosParams,
+ audio,
+ });
+ };
+
+ const handleChange = (e: React.ChangeEvent) => {
+ setVocosParams({
+ ...vocosParams,
+ bandwidth: e.target.value,
+ });
+ };
+
+ return (
+
+
+ Vocos - TTS Generation Webui
+
+ Favorites - TTS Generation Webui
+
+ {
+ filename: string;
+ url: string;
+}
diff --git a/src/bark/clone/tab_voice_clone.py b/src/bark/clone/tab_voice_clone.py
index 1475ce3e..57b976c0 100644
--- a/src/bark/clone/tab_voice_clone.py
+++ b/src/bark/clone/tab_voice_clone.py
@@ -207,6 +207,7 @@ def load_tokenizer(tokenizer_and_repo: str, use_gpu: bool):
load_tokenizer,
inputs=[tokenizer_dropdown, use_gpu_checkbox],
outputs=[tokenizer_dropdown],
+ api_name="bark_voice_tokenizer_load",
)
with gr.Column():
@@ -229,8 +230,10 @@ def generate_voice(wav_file: str, use_gpu: bool):
generate_voice_button.click(
fn=generate_voice,
inputs=[file_input, use_gpu_checkbox],
+ # inputs=[file_input, use_gpu_checkbox, tokenizer_dropdown],
outputs=[voice_file_name, audio_preview],
preprocess=True,
+ api_name="bark_voice_generate",
)
register_use_as_history_button(
diff --git a/src/bark/generation_tab_bark.py b/src/bark/generation_tab_bark.py
index 97b81d98..aa8580a7 100644
--- a/src/bark/generation_tab_bark.py
+++ b/src/bark/generation_tab_bark.py
@@ -495,9 +495,7 @@ def generation_tab_bark():
def unload_models():
model_manager.unload_models()
return {
- unload_models_button: gr.Button.update(
- value="Unloaded"
- ),
+ unload_models_button: gr.Button.update(value="Unloaded"),
}
unload_models_button.click(
@@ -702,7 +700,7 @@ def generate_button(text, count, variant):
fn=generate_multi(count, output_components),
inputs=inputs,
outputs=all_outputs_flat,
- # api_name=f"bark_{count}",
+ # api_name=f"bark_{count}", # gradio literally can't support this
)
return button
@@ -720,6 +718,7 @@ def generate_button(text, count, variant):
fn=generate_multi(1, output_components),
inputs=inputs,
outputs=all_outputs_flat,
+ api_name="bark", # toggle
)
set_old_seed_button.click(
@@ -774,6 +773,7 @@ def old_generation_dropdown_ui(label):
reload_old_generation_dropdown.click(
fn=lambda: gr.Dropdown.update(choices=get_npz_files()),
outputs=old_generation_dropdown,
+ api_name=f"reload_old_generation_dropdown{ '' if label == 'Audio Voice' else '_semantic'}",
)
return (
@@ -863,15 +863,22 @@ def create_components(
send_to_vocos_button = gr.Button("Vocos", size="sm")
continue_button = gr.Button("Use as history", size="sm")
continue_semantic_button = gr.Button("Use as semantic history", size="sm")
- npz = gr.State() # type: ignore
+ npz = gr.Textbox(
+ visible=False,
+ )
seed = gr.State() # type: ignore
- json_text = gr.State() # type: ignore
- history_bundle_name_data = gr.State() # type: ignore
+ json_text = gr.JSON(
+ visible=False,
+ )
+ history_bundle_name_data = gr.Textbox(
+ visible=False,
+ )
save_button.click(
fn=save_to_favorites,
inputs=[history_bundle_name_data],
outputs=[save_button],
+ api_name=f"bark_favorite{ '_' + str(index) if index > 0 else ''}",
)
reuse_seed_button.click(
diff --git a/src/bark/settings_tab_bark.py b/src/bark/settings_tab_bark.py
index ef49b7f5..030fc17e 100644
--- a/src/bark/settings_tab_bark.py
+++ b/src/bark/settings_tab_bark.py
@@ -119,7 +119,12 @@ def save_environment_variables(
]
for i in env_inputs:
- i.change(fn=save_environment_variables, inputs=env_inputs)
+ i.change(fn=save_environment_variables, inputs=env_inputs,
+ api_name="save_environment_variables_bark")
+
+ # refresh environment variables button
+
+
inputs = [
text_use_gpu,
@@ -133,7 +138,8 @@ def save_environment_variables(
]
for i in inputs:
- i.change(fn=save_config_bark, inputs=inputs, outputs=[save_beacon])
+ i.change(fn=save_config_bark, inputs=inputs, outputs=[save_beacon],
+ api_name="save_config_bark")
def sync_ui():
def checkbox_update_helper(key: str):
@@ -150,7 +156,8 @@ def checkbox_update_helper(key: str):
gr.Checkbox.update(value=config["load_models_on_startup"]),
]
- settings_tab.select(fn=sync_ui, outputs=inputs)
+ settings_tab.select(fn=sync_ui, outputs=inputs,
+ api_name="get_config_bark")
def set_to_reload():
return gr.Button.update(value="Loading...", interactive=False)
diff --git a/src/extensions_loader/extensions/callback_save_generation_ffmpeg.py b/src/extensions_loader/extensions/callback_save_generation_ffmpeg.py
index 7a895aeb..fecca2d6 100644
--- a/src/extensions_loader/extensions/callback_save_generation_ffmpeg.py
+++ b/src/extensions_loader/extensions/callback_save_generation_ffmpeg.py
@@ -47,6 +47,12 @@ def callback_save_generation(
input_data = audio_array.tobytes()
metadata["prompt"] = double_escape_quotes(metadata["prompt"])
metadata["prompt"] = double_escape_newlines(metadata["prompt"])
+ def double_escape_backslash(prompt):
+ if prompt is None:
+ return None
+ return prompt.replace("\\", "\\\\")
+ metadata["history_prompt"] = double_escape_backslash(metadata["history_prompt"])
+ metadata["history_prompt_npz"] = double_escape_backslash(metadata["history_prompt_npz"])
metadata_str = json.dumps(metadata, ensure_ascii=False)
pipe_input = ffmpeg.input("pipe:", format="f32le", ar=str(SAMPLE_RATE))
diff --git a/src/history_tab/delete_generation.py b/src/history_tab/delete_generation.py
new file mode 100644
index 00000000..bd846266
--- /dev/null
+++ b/src/history_tab/delete_generation.py
@@ -0,0 +1,5 @@
+import shutil
+
+
+def delete_generation(directory: str):
+ shutil.rmtree(directory)
diff --git a/src/history_tab/delete_generation_cb.py b/src/history_tab/delete_generation_cb.py
index 49f6a0a5..31ebfc84 100644
--- a/src/history_tab/delete_generation_cb.py
+++ b/src/history_tab/delete_generation_cb.py
@@ -4,7 +4,6 @@
def delete_generation_cb(refresh):
def delete_generation(directory: str, *args):
shutil.rmtree(directory)
-
return refresh(*args)
return delete_generation
diff --git a/src/history_tab/main.py b/src/history_tab/main.py
index 6c61241b..cc7c1116 100644
--- a/src/history_tab/main.py
+++ b/src/history_tab/main.py
@@ -3,6 +3,7 @@
import json
import shutil
+from src.history_tab.delete_generation import delete_generation
from src.history_tab.collections_directories_atom import (
collections_directories_atom,
get_collections,
@@ -78,14 +79,16 @@ def history_content(
create_collection_ui(collections_directories_atom)
with gr.Accordion("Gallery Selector (Click to Open)", open=False):
- history_list_as_gallery = gr.Gallery(value=[], columns=8, object_fit="contain", height="auto")
+ history_list_as_gallery = gr.Gallery(
+ value=[], columns=8, object_fit="contain", height="auto"
+ )
with gr.Row():
with gr.Column():
with gr.Row():
button_output = gr.Button(
value=f"Open {show_collections and 'collection' or directory} folder"
)
- button_output.click(lambda x: open_folder(x), inputs=[directory_dropdown])
+ button_output.click(lambda x: open_folder(x), inputs=[directory_dropdown], api_name="open_folder")
datatypes = ["date", "str", "str", "str"]
# headers = ["Date and Time", directory.capitalize(), "When", "Filename"]
@@ -104,7 +107,7 @@ def history_content(
with gr.Column():
history_bundle_name = gr.Markdown(visible=True)
- history_bundle_name_data = gr.State() # type: ignore
+ history_bundle_name_data = gr.Textbox(visible=False)
history_audio = gr.Audio(visible=True, type="filepath", show_label=False)
history_image = gr.Image(show_label=False)
history_json = gr.JSON()
@@ -142,7 +145,8 @@ def history_content(
)
save_to_voices.click(
- fn=save_to_voices_cb, inputs=history_npz, outputs=save_to_voices
+ fn=save_to_voices_cb, inputs=history_npz, outputs=save_to_voices,
+ api_name="save_to_voices"
)
save_to_collection_ui(
@@ -218,6 +222,15 @@ def update_history_tab(directory: str):
inputs=[history_bundle_name_data, directory_dropdown],
outputs=[history_list, history_list_as_gallery],
)
+ # API ONLY
+ gr.Button(
+ label="Delete (API ONLY)",
+ visible=False,
+ ).click(
+ fn=delete_generation,
+ inputs=[history_bundle_name_data],
+ api_name="delete_generation",
+ )
history_tab.select(
fn=update_history_tab,
inputs=[directory_dropdown],
@@ -234,7 +247,7 @@ def update_history_tab(directory: str):
def save_to_collection_ui(
directory: str,
directories: list[str],
- history_bundle_name_data: gr.State,
+ history_bundle_name_data: gr.Textbox,
directories_state: gr.JSON,
):
with gr.Row():
diff --git a/src/musicgen/musicgen_tab.py b/src/musicgen/musicgen_tab.py
index c027bdd9..1696fe11 100644
--- a/src/musicgen/musicgen_tab.py
+++ b/src/musicgen/musicgen_tab.py
@@ -327,7 +327,9 @@ def generation_tab_musicgen():
)
image = gr.Image(label="Waveform", shape=(None, 100), elem_classes="tts-image") # type: ignore
with gr.Row():
- history_bundle_name_data = gr.State() # type: ignore
+ history_bundle_name_data = gr.Textbox(
+ visible=False,
+ )
send_to_demucs_button = gr.Button("Send to Demucs", visible=True)
save_button = gr.Button("Save to favorites", visible=True)
melody_button = gr.Button("Use as melody", visible=True)
diff --git a/src/rvc_tab/rvc_tab.py b/src/rvc_tab/rvc_tab.py
index e5728032..8911c304 100644
--- a/src/rvc_tab/rvc_tab.py
+++ b/src/rvc_tab/rvc_tab.py
@@ -78,6 +78,67 @@ def run_rvc(
)
+def run_rvc_api(
+ f0up_key: str,
+ original_audio_path: str,
+ # index_path: str,
+ index_path_api: str,
+ f0method: str,
+ # model_path: str,
+ model_path_api: str,
+ index_rate: float,
+ device: str,
+ is_half: bool,
+ filter_radius: int,
+ resample_sr: int,
+ rms_mix_rate: float,
+ protect: float,
+):
+ infer_batch_rvc.set_params_temp(
+ _device=device,
+ _is_half=is_half,
+ _filter_radius=filter_radius,
+ _resample_sr=resample_sr,
+ _rms_mix_rate=rms_mix_rate,
+ _protect=protect,
+ )
+
+ from rvc_beta.infer_batch_rvc import config
+
+ if device == "cpu": # Workaround for "slow_conv2d_cpu" not implemented for 'Half'
+ config.is_half = is_half
+
+ if infer_batch_rvc.hubert_model is None:
+ get_and_load_hubert()
+
+ opt_path = "./outputs-rvc/"
+
+ index_path = get_rvc_local_path(index_path_api, "index")
+ model_path = get_rvc_local_path(model_path_api, "pth")
+
+ return infer_rvc(
+ f0method=f0method,
+ f0up_key=f0up_key,
+ input_path=original_audio_path,
+ index_path=index_path,
+ index_rate=index_rate,
+ model_path=model_path,
+ opt_path=opt_path,
+ ), {
+ "original_audio_path": original_audio_path,
+ "index_path": index_path_api,
+ "model_path": model_path_api,
+ "f0method": f0method,
+ "f0up_key": f0up_key,
+ "index_rate": index_rate,
+ "device": device,
+ "is_half": is_half,
+ "filter_radius": filter_radius,
+ "resample_sr": resample_sr,
+ "rms_mix_rate": rms_mix_rate,
+ "protect": protect,
+ }
+
RVC_LOCAL_MODELS_DIR = get_path_from_root("data", "models", "rvc", "checkpoints")
@@ -122,12 +183,15 @@ def rvc_ui_model_or_index_path_ui(label: str):
show_label=False,
container=False,
)
- gr_open_button_simple(RVC_LOCAL_MODELS_DIR)
+ gr_open_button_simple(
+ RVC_LOCAL_MODELS_DIR, api_name=f"rvc_{label.lower()}_open"
+ )
gr_reload_button().click(
lambda: file_path_dropdown.update(
choices=get_list_fn(),
),
outputs=[file_path_dropdown],
+ api_name=f"rvc_{label.lower()}_reload",
)
gr.Markdown(
"""
@@ -162,10 +226,11 @@ def rvc_ui_model_or_index_path_ui(label: str):
inputs=[file_path_file],
outputs=[file_path, file_path_dropdown],
)
+
file_path_dropdown.change(
lambda model: [
file_path.update(
- value=os.path.join(RVC_LOCAL_MODELS_DIR, f"{model}{extension}")
+ value=get_rvc_local_path(model, file_type)
),
file_path_file.update(value=None),
]
@@ -179,6 +244,8 @@ def rvc_ui_model_or_index_path_ui(label: str):
)
return file_path
+def get_rvc_local_path(path: str, file_type: str):
+ return os.path.join(RVC_LOCAL_MODELS_DIR, f"{path}.{file_type}")
def rvc_ui():
gr.Markdown("# RVC Beta Demo")
@@ -200,10 +267,18 @@ def rvc_ui():
value="harvest",
)
index_rate = gr.Slider(
- minimum=0.0, maximum=1.0, step=0.01, value=0.66, label="Search Feature Ratio"
+ minimum=0.0,
+ maximum=1.0,
+ step=0.01,
+ value=0.66,
+ label="Search Feature Ratio",
)
filter_radius = gr.Slider(
- minimum=0, maximum=10, step=1, value=3, label="Filter Radius (Pitch)"
+ minimum=0,
+ maximum=10,
+ step=1,
+ value=3,
+ label="Filter Radius (Pitch)",
)
with gr.Row():
resample_sr = gr.Slider(
@@ -214,10 +289,18 @@ def rvc_ui():
label="Resample Sample-rate (Bug)",
)
rms_mix_rate = gr.Slider(
- minimum=0.0, maximum=1.0, step=0.01, value=1, label="Voice Envelope Normalizaiton"
+ minimum=0.0,
+ maximum=1.0,
+ step=0.01,
+ value=1,
+ label="Voice Envelope Normalizaiton",
)
protect = gr.Slider(
- minimum=0.0, maximum=0.5, step=0.01, value=0.33, label="Protect Breath Sounds"
+ minimum=0.0,
+ maximum=0.5,
+ step=0.01,
+ value=0.33,
+ label="Protect Breath Sounds",
)
with gr.Group():
gr.Markdown("### Hubert")
@@ -263,6 +346,50 @@ def rvc_ui():
protect,
],
outputs=result,
+ api_name="rvc",
+ )
+
+ model_path_api = gr.Textbox(
+ label="Model Path",
+ value="",
+ visible=False,
+ )
+
+ index_path_api = gr.Textbox(
+ label="Index Path",
+ value="",
+ visible=False,
+ )
+
+ metadata = gr.JSON(
+ label="Metadata",
+ visible=False,
+ )
+
+ gr.Button(
+ visible=False,
+ label="Convert (API)",
+ ).click(
+ run_rvc_api,
+ inputs=[
+ f0up_key,
+ original_audio,
+ index_path_api,
+ f0method,
+ model_path_api,
+ index_rate,
+ device,
+ is_half,
+ filter_radius,
+ resample_sr,
+ rms_mix_rate,
+ protect,
+ ],
+ outputs=[
+ result,
+ metadata,
+ ],
+ api_name="rvc_api",
)
return original_audio
diff --git a/src/tortoise/TortoiseOutputRow.py b/src/tortoise/TortoiseOutputRow.py
index 8629d8d5..b15b5f2d 100644
--- a/src/tortoise/TortoiseOutputRow.py
+++ b/src/tortoise/TortoiseOutputRow.py
@@ -7,14 +7,16 @@ def __init__(
audio: gr.Audio,
image: gr.Image,
save_button: gr.Button,
- seed: gr.State,
- bundle_name: gr.State,
+ seed: gr.Textbox,
+ bundle_name: gr.Textbox,
+ params: gr.JSON,
):
self.audio: gr.Audio = audio
self.image: gr.Image = image
self.save_button: gr.Button = save_button
- self.seed: gr.State = seed
- self.bundle_name: gr.State = bundle_name
+ self.seed: gr.Textbox = seed
+ self.bundle_name: gr.Textbox = bundle_name
+ self.params: gr.JSON = params
def to_list(self):
return [
@@ -23,6 +25,7 @@ def to_list(self):
self.save_button,
self.seed,
self.bundle_name,
+ self.params,
]
@staticmethod
@@ -33,6 +36,7 @@ def from_list(components):
save_button=components[2],
seed=components[3],
bundle_name=components[4],
+ params=components[5],
)
# def __iter__(self):
@@ -47,9 +51,11 @@ def __init__(
save_button,
seed,
bundle_name,
+ params,
):
self.audio = audio
self.image = image
self.save_button = save_button
self.seed = seed
self.bundle_name = bundle_name
+ self.params = params
diff --git a/src/tortoise/create_tortoise_output_row_ui.py b/src/tortoise/create_tortoise_output_row_ui.py
index 6fc70832..489ef3a7 100644
--- a/src/tortoise/create_tortoise_output_row_ui.py
+++ b/src/tortoise/create_tortoise_output_row_ui.py
@@ -32,8 +32,15 @@ def create_tortoise_output_row_ui(index):
)
)
save_button = gr.Button("Save to favorites", visible=False)
- seed = gr.State() # type: ignore
- bundle_name = gr.State() # type: ignore
+ seed = gr.Textbox(
+ visible=False,
+ )
+ bundle_name = gr.Textbox(
+ visible=False,
+ )
+ params = gr.JSON(
+ visible=False,
+ )
save_button.click(
fn=save_to_favorites,
@@ -42,7 +49,7 @@ def create_tortoise_output_row_ui(index):
)
return (
- TortoiseOutputRow(audio, image, save_button, seed, bundle_name).to_list(),
+ TortoiseOutputRow(audio, image, save_button, seed, bundle_name, params).to_list(),
col,
seed,
)
diff --git a/src/tortoise/gen_tortoise.py b/src/tortoise/gen_tortoise.py
index ce925901..61c9a8e3 100644
--- a/src/tortoise/gen_tortoise.py
+++ b/src/tortoise/gen_tortoise.py
@@ -166,6 +166,7 @@ def _process_gen(candidates, audio_array, id, params: TortoiseParameters):
save_button=gr.Button.update(value="Save to favorites", visible=True),
seed=params.seed,
bundle_name=history_bundle_name_data,
+ params=gr.JSON.update(value=metadata), # broken because gradio returns only __type__
)
diff --git a/src/tortoise/generation_tab_tortoise.py b/src/tortoise/generation_tab_tortoise.py
index d75fb1a4..05366591 100644
--- a/src/tortoise/generation_tab_tortoise.py
+++ b/src/tortoise/generation_tab_tortoise.py
@@ -53,10 +53,13 @@ def tortoise_core_ui():
show_label=False,
container=False,
)
- gr_open_button_simple(TORTOISE_VOICE_DIR_ABS)
+ gr_open_button_simple(
+ TORTOISE_VOICE_DIR_ABS, api_name="tortoise_open_voices"
+ )
gr_reload_button().click(
fn=lambda: gr.Dropdown.update(choices=get_voice_list()),
outputs=[voice],
+ api_name="tortoise_refresh_voices",
)
with gr.Box():
gr.Markdown("Preset")
@@ -179,6 +182,7 @@ def gen(*args):
fn=gen,
inputs=inputs,
outputs=get_output_list(count),
+ api_name=f"generate_tortoise_{count}",
)
)
diff --git a/src/tortoise/gr_reload_button.py b/src/tortoise/gr_reload_button.py
index 09c5c833..23916724 100644
--- a/src/tortoise/gr_reload_button.py
+++ b/src/tortoise/gr_reload_button.py
@@ -19,7 +19,8 @@ def gr_open_button(**kwargs):
return gr_icon_button(value="folder_open", **kwargs)
-def gr_open_button_simple(dirname="", **kwargs):
+def gr_open_button_simple(dirname="", api_name=None, **kwargs):
return gr_open_button(**kwargs).click(
fn=lambda: open_folder(dirname),
+ api_name=api_name,
)
diff --git a/src/tortoise/tortoise_model_settings_ui.py b/src/tortoise/tortoise_model_settings_ui.py
index 76b423c8..52f96a3b 100644
--- a/src/tortoise/tortoise_model_settings_ui.py
+++ b/src/tortoise/tortoise_model_settings_ui.py
@@ -15,10 +15,13 @@ def tortoise_model_settings_ui_inner():
show_label=False,
container=False,
)
- gr_open_button_simple(TORTOISE_LOCAL_MODELS_DIR)
+ gr_open_button_simple(
+ TORTOISE_LOCAL_MODELS_DIR, api_name="tortoise_open_models"
+ )
gr_reload_button().click(
fn=lambda: gr.Dropdown.update(choices=get_model_list()),
outputs=[model],
+ api_name="tortoise_refresh_models",
)
with gr.Row():
@@ -39,6 +42,7 @@ def tortoise_model_settings_ui_inner():
fn=switch_model,
inputs=[model, kv_cache, use_deepspeed, half, tokenizer, use_basic_cleaners],
outputs=[model],
+ api_name="tortoise_apply_model_settings",
)
model.select(
diff --git a/src/vocos/vocos_tab_bark.py b/src/vocos/vocos_tab_bark.py
index 89cf3db4..c86ab024 100644
--- a/src/vocos/vocos_tab_bark.py
+++ b/src/vocos/vocos_tab_bark.py
@@ -79,6 +79,7 @@ def get_audio(npz_file_obj: tempfile._TemporaryFileWrapper):
fn=get_audio,
inputs=[npz_file],
outputs=[current, output],
+ api_name="encodec_decode",
)
def vocos_predict(npz_file_obj: tempfile._TemporaryFileWrapper):
@@ -96,6 +97,7 @@ def vocos_predict(npz_file_obj: tempfile._TemporaryFileWrapper):
fn=vocos_predict,
inputs=[npz_file],
outputs=output,
+ api_name="vocos_npz",
)
diff --git a/src/vocos/vocos_tab_wav.py b/src/vocos/vocos_tab_wav.py
index 50495316..a8b33c05 100644
--- a/src/vocos/vocos_tab_wav.py
+++ b/src/vocos/vocos_tab_wav.py
@@ -55,6 +55,7 @@ def vocos_tab_wav():
fn=vocos_predict,
inputs=[file_input, bandwidth_id],
outputs=output,
+ api_name="vocos_wav",
)
+ Favorites - TTS Generation Webui
+
+ {
+ setDemucsParams({
+ ...demucsParams,
+ file,
});
}}
- />
- {/* Preview melody */}
-
+
+ {typeNames.map((typeName) => {
const audioOutput = sampleWithTypeNames?.find(
(item) => item.type_name === typeName
);
return (
-
@@ -112,4 +98,4 @@ const GradioPage = () => {
);
};
-export default GradioPage;
+export default DemucsPage;
diff --git a/react-ui/src/pages/generations.tsx b/react-ui/src/pages/generations.tsx
index 2e53b7ed..9aeb8f9f 100644
--- a/react-ui/src/pages/generations.tsx
+++ b/react-ui/src/pages/generations.tsx
@@ -5,6 +5,7 @@ import { CardEmpty, CardGeneration } from "../components/CardBig";
import { getOggData } from "../data/getVoicesData";
import { GenerationRaw } from "../types/Generation";
import { Template } from "../components/Template";
+import Head from "next/head";
export const inter = Inter({ subsets: ["latin"] });
@@ -15,9 +16,12 @@ export default function Home({
}) {
return (
+
+
-
+ {typeName}
- {audioOutput && ( -
{generations.map((generation) => (
-
+
+ Favorites - TTS Generation Webui
+
+ TTS Generation Webui
+ (null);
- const [historyData, setHistoryData] = useState([]);
- const [lastSeed, setLastSeed] = useState(-1);
- const [image, setImage] = useState("");
- const [audioUrl, setAudioUrl] = useState("");
- const [musicgenParams, setMusicgenParams] =
- useState(musicgenParams0);
- const [melody, setMelody] = useState();
+ const [data, setData] = useLocalStorage(
+ "musicgenGenerationOutput",
+ null
+ );
+ const [historyData, setHistoryData] = useLocalStorage(
+ "musicgenHistory",
+ initialHistory
+ );
+ const [musicgenParams, setMusicgenParams] = useLocalStorage(
+ musicgenId,
+ initialMusicgenParams
+ );
async function musicgen() {
const body = JSON.stringify({
@@ -64,48 +73,23 @@ const MusicgenPage = () => {
melody: musicgenParams.model === "Melody" ? musicgenParams.melody : null,
model: modelNameMapping[musicgenParams.model],
});
- console.log(body);
- return;
- const response = await fetch("/api/demucs_musicgen", {
+ const response = await fetch("/api/gradio/musicgen", {
method: "POST",
body,
});
- const result = await response.json();
- const data = result?.data;
- const [generated_audio, , image, , json] = data;
- console.log(generated_audio, image, json);
- const { seed } = json;
- setMusicgenData(result?.data);
- setHistoryData((x) => [result?.data[0], ...x]);
- setLastSeed(seed);
- setImage(image);
- setAudioUrl(generated_audio.data);
+ const result: Result = await response.json();
+ setData(result);
+ setHistoryData((x) => [result, ...x]);
}
- const handleChange = async (
+ const handleChange = (
event:
| React.ChangeEvent
| React.ChangeEvent
| React.ChangeEvent
) => {
const { name, value, type } = event.target;
-
- if (name === "melody") {
- if (!(event.target instanceof HTMLInputElement)) return;
- const file = event.target.files?.[0];
- console.log(file);
- const reader = new FileReader();
- reader.readAsDataURL(file!);
- console.log(reader);
- console.log(reader.result);
- setMusicgenParams({
- ...musicgenParams,
- [name]: reader.result,
- });
- return;
- }
-
setMusicgenParams({
...musicgenParams,
[name]:
@@ -117,10 +101,56 @@ const MusicgenPage = () => {
});
};
+ const useAsMelody = (melody?: string, metadata?: Result) => {
+ if (!melody) return;
+ setMusicgenParams({
+ ...musicgenParams,
+ melody,
+ });
+ };
+
+ const favorite = async (_url: string, data?: Result) => {
+ const history_bundle_name_data = data?.history_bundle_name_data;
+ if (!history_bundle_name_data) return;
+ const response = await fetch("/api/gradio/bark_favorite", {
+ method: "POST",
+ body: JSON.stringify({
+ history_bundle_name_data,
+ }),
+ });
+ const result = await response.json();
+ return result;
+ };
+
+ const useSeed = (_url: string, data?: Result) => {
+ const seed = data?.json.seed;
+ if (!seed) return;
+ setMusicgenParams({
+ ...musicgenParams,
+ seed: Number(seed),
+ });
+ };
+
+ const useParameters = (_url: string, data?: Result) => {
+ const params = data?.json;
+ if (!params) return;
+ setMusicgenParams({
+ ...musicgenParams,
+ ...params,
+ seed: Number(params.seed),
+ model:
+ Object.keys(modelNameMapping).find(
+ (key) => modelNameMapping[key] === params.model
+ ) || "Small",
+ });
+ };
+
+ const funcs = [useAsMelody, favorite, useSeed, useParameters];
+
return (
- TTS Generation Webui - Musicgen
+ Musicgen - TTS Generation Webui
-
-
- {
- const melody = file?.name || null;
- setMelody(file && URL.createObjectURL(file));
+ {
setMusicgenParams({
...musicgenParams,
- melody,
+ melody: file,
});
}}
- />
- {/* Preview melody */}
-
@@ -266,7 +284,7 @@ const MusicgenPage = () => {
onClick={() =>
setMusicgenParams({
...musicgenParams,
- seed: lastSeed,
+ seed: Number(data?.json.seed) || -1,
})
}
>
@@ -297,55 +315,44 @@ const MusicgenPage = () => {
+ {outputs.map((generation) => (
+
+
+ );
+}
+
+export const getStaticProps = async ({ params: { name } }) => {
+ const outputs: GenerationRaw[] = await getDataFromJSON(name);
+ return {
+ props: {
+ outputs,
+ isFavorites: name === "favorites",
+ },
+ } as { props: Props };
+};
+
+export const getStaticPaths = async () => {
+ return {
+ paths: [
+ "/history/outputs",
+ "/history/favorites",
+ // "/history/collections",
+ ],
+ fallback: "blocking",
+ };
+};
diff --git a/react-ui/src/pages/index.tsx b/react-ui/src/pages/index.tsx
index d1f60e35..a01ad6c3 100644
--- a/react-ui/src/pages/index.tsx
+++ b/react-ui/src/pages/index.tsx
@@ -1,10 +1,7 @@
import { Inter } from "next/font/google";
import React from "react";
-import { Favorites } from "../components/FavoritesProvider";
-import { CardBig, CardEmpty } from "../components/CardBig";
import { Voice } from "../types/Voice";
-import { getVoicesData } from "../data/getVoicesData";
import { Template } from "../components/Template";
import Head from "next/head";
@@ -16,15 +13,27 @@ export default function Home({ voices }: { voices: Voice[] }) {
+
);
}
export const getStaticProps = async () => {
- const voices: Voice[] = getVoicesData();
return {
- props: {
- voices: voices,
- },
+ props: {},
};
};
diff --git a/react-ui/src/pages/musicgen.tsx b/react-ui/src/pages/musicgen.tsx
index f439b477..4e2fdc72 100644
--- a/react-ui/src/pages/musicgen.tsx
+++ b/react-ui/src/pages/musicgen.tsx
@@ -1,8 +1,14 @@
-import React, { useState } from "react";
+import React from "react";
import { Template } from "../components/Template";
import Head from "next/head";
-import FileInput from "../components/FileInput";
-import { AudioPlayer } from "../components/MemoizedWaveSurferPlayer";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import {
+ MusicgenParams,
+ initialMusicgenParams,
+ musicgenId,
+} from "../tabs/MusicgenParams";
+import { GradioFile } from "../types/GradioFile";
type AudioOutput = {
name: string;
@@ -13,31 +19,29 @@ type AudioOutput = {
type_name?: string;
};
-const musicgenParams0: MusicgenParams = {
- // text: "",
- text: "lofi hip hop beats to relax/study to",
- melody: null,
- model: "Small",
- duration: 1,
- topk: 250,
- topp: 0,
- temperature: 1.0,
- cfg_coef: 3.0,
- seed: -1,
- use_multi_band_diffusion: false,
-};
-
-type MusicgenParams = {
- text: string;
- melody: string | null;
- model: string;
- duration: number;
- topk: number;
- topp: number;
- temperature: number;
- cfg_coef: number;
- seed: number;
- use_multi_band_diffusion: boolean;
+type Result = {
+ audio: GradioFile;
+ history_bundle_name_data: string;
+ json: {
+ _version: string;
+ _hash_version: string;
+ _type: string;
+ _audiocraft_version: string;
+ models: {};
+ prompt: string;
+ hash: string;
+ date: string;
+ melody?: any;
+ text: string;
+ model: string;
+ duration: number;
+ topk: number;
+ topp: number;
+ temperature: number;
+ cfg_coef: number;
+ seed: string;
+ use_multi_band_diffusion: boolean;
+ };
};
const modelNameMapping = {
@@ -48,15 +52,20 @@ const modelNameMapping = {
Audiogen: "facebook/audiogen-medium",
};
+const initialHistory = []; // prevent infinite loop
const MusicgenPage = () => {
- const [musicgenData, setMusicgenData] = useStateWelcome to the TTS Webui!
++ This is a web interface for the TTS project. It allows you to generate + audio using the TTS models. +
++ To get started, select a tab above to choose a model and generate some + audio. +
++ You can also listen to some of the voices that have been generated + using the "Favorites" button. +
+
@@ -159,28 +189,16 @@ const MusicgenPage = () => {
)}
-
- {/* History */}
-
-
-
+
+
diff --git a/react-ui/src/pages/rvc.tsx b/react-ui/src/pages/rvc.tsx
new file mode 100644
index 00000000..6b1231c8
--- /dev/null
+++ b/react-ui/src/pages/rvc.tsx
@@ -0,0 +1,898 @@
+import React from "react";
+import { Template } from "../components/Template";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import Head from "next/head";
+import { RVCParams, RVCId, initialState } from "../tabs/RVCParams";
+import { GradioFile } from "../types/GradioFile";
+
+type Result = {
+ audio: GradioFile;
+ metadata: {
+ original_audio_path: string;
+ index_path: string;
+ model_path: string;
+ f0method: string;
+ f0up_key: string;
+ index_rate: number;
+ device: string;
+ is_half: boolean;
+ filter_radius: number;
+ resample_sr: number;
+ rms_mix_rate: number;
+ protect: number;
+ };
+};
+
+const initialHistory = []; // prevent infinite loop
+const RvcGenerationPage = () => {
+ const [historyData, setHistoryData] = useLocalStorage
+
+ {/* Clear history */}
+
-
-
- {historyData &&
- historyData.map((item, index) => (
- //
+ {historyData &&
+ historyData.map((item, index) => (
+
- //
- //
-
+
+ {/*
+
+
+
+
+
+
+
+ {historyData &&
+ historyData.map((item, index) => (
+
+ {JSON.stringify(rvcGenerationParams, null, 2)} */}
+
+ );
+};
+
+export default RvcGenerationPage;
+
+const Model = ({
+ rvcParams: rvcGenerationParams,
+ handleChange,
+}: {
+ rvcParams: RVCParams;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+
+ );
+};
+
+// Like model but for Index
+const Index = ({
+ rvcParams: rvcGenerationParams,
+ handleChange,
+}: {
+ rvcParams: RVCParams;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+
+
+
+
+
+ {/*
+
+ {
+ handleChange({
+ target: {
+ name: "tokenizer",
+ value: tokenizer,
+ },
+ } as React.ChangeEvent);
+ }}
+ hide_text={false}
+ />
+
*/}
+
+
+ );
+};
+
+const RvcPrompt = ({
+ rvcGenerationParams,
+ handleChange,
+}: {
+ rvcGenerationParams: RVCParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+
+
+ {/*
+
+ {
+ handleChange({
+ target: {
+ name: "tokenizer",
+ value: tokenizer,
+ },
+ } as React.ChangeEvent);
+ }}
+ hide_text={false}
+ />
+
*/}
+
+
+ );
+};
+
+const RVCParameters = ({
+ rvcParams,
+ handleChange,
+}: {
+ rvcParams: RVCParams;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+
+
+
+
+
+
+
+
+
+ {
+ handleChange({
+ target: {
+ name: "original_audio",
+ value: original_audio,
+ },
+ } as React.ChangeEvent);
+ }}
+ label="Original Audio"
+ filter={["sendToRvc"]}
+ url={rvcParams?.original_audio}
+ />
+
+ );
+};
+
+const GenericPromptRvc = ({
+ rvcGenerationParams,
+ handleChange,
+ label,
+ name,
+}: {
+ rvcGenerationParams: RVCParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* search feature ratio */}
+
+
+
+
+
+
+
+ {/*
+
+
*/}
+
+
+
+
+
+
+
+
+ );
+};
+
+const GenericSlider = ({
+ rvcParams: rvcGenerationParams,
+ handleChange,
+ label,
+ name,
+ min,
+ max,
+ step,
+}: {
+ rvcParams: RVCParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ );
+};
+
+const SamplesSlider = ({
+ rvcGenerationParams,
+ handleChange,
+}: {
+ rvcGenerationParams: RVCParams;
+ handleChange: (event: React.ChangeEvent
+ {/* Autoregressive Parameters */}
+
+ );
+};
+
+const DiffusionIterationsSlider = ({
+ rvcGenerationParams,
+ handleChange,
+}: {
+ rvcGenerationParams: RVCParams;
+ handleChange: (
+ event:
+ | React.ChangeEventAutoregressive Parameters
+
+ {/* Diffusion Parameters */}
+
+ );
+};
diff --git a/react-ui/src/pages/tortoise.tsx b/react-ui/src/pages/tortoise.tsx
new file mode 100644
index 00000000..a7d26d99
--- /dev/null
+++ b/react-ui/src/pages/tortoise.tsx
@@ -0,0 +1,1052 @@
+import React from "react";
+import { Template } from "../components/Template";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import Head from "next/head";
+import {
+ TortoiseGenerationParams,
+ tortoiseGenerationId,
+ initialState,
+} from "../tabs/TortoiseGenerationParams";
+import { GradioFile } from "../types/GradioFile";
+import FileInput from "../components/FileInput";
+
+type Result = {
+ audio: GradioFile;
+ image: string;
+ seed: string;
+ bundle_name: string;
+ metadata: {
+ // broken due to gradio bug
+ // _version: string;
+ // _hash_version: string;
+ // _type: string;
+ };
+};
+
+// Model
+
+// Default
+// folder_open
+// refresh
+// KV Cache
+// Use Deepspeed
+// Half
+// Use basic cleaners
+// Tokenizer
+// Drop File Here
+// - or -
+// Click to Upload
+// Apply model settings
+
+const initialHistory = []; // prevent infinite loop
+const TortoiseGenerationPage = () => {
+ const [historyData, setHistoryData] = useLocalStorageDiffusion Parameters
+
+
+ {/*
+
+
+
+
+
+
+
+ {historyData &&
+ historyData.map((item, index) => (
+
+ {JSON.stringify(tortoiseGenerationParams, null, 2)} */}
+
+ );
+};
+
+export default TortoiseGenerationPage;
+
+const Speaker = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+
+
+ );
+};
+
+const Preset = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+);
+
+const CVVPAmount = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+
+
+
+ );
+};
+
+const CondFree = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ );
+};
+
+const Model = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (
+ event:
+ | React.ChangeEvent
+
+
+
+ );
+
+ React.useEffect(() => {
+ fetchOptions();
+ }, []);
+
+ const selected = tortoiseGenerationParams?.model;
+ return (
+
+
+ );
+};
+
+const GenerationName = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+
+
+ {/* 2x2 */}
+
+
+
+
+
+ {/* */}
+ {
+ handleChange({
+ target: {
+ name: "tokenizer",
+ value: tokenizer,
+ },
+ } as React.ChangeEvent);
+ }}
+ hide_text={false}
+ />
+
+
+
+
+
+
+
+
+);
+
+const TortoisePrompt = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+ );
+};
+
+const Seed = ({
+ tortoiseGenerationParams,
+ setTortoiseGenerationParams,
+ handleChange,
+ lastSeed,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ setTortoiseGenerationParams: (
+ tortoiseGenerationParams: TortoiseGenerationParams
+ ) => void;
+ handleChange: (event: React.ChangeEvent
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const GenericPromptTortoise = ({
+ tortoiseGenerationParams,
+ handleChange,
+ label,
+ name,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ );
+};
+
+const GenericSlider = ({
+ tortoiseGenerationParams,
+ handleChange,
+ label,
+ name,
+ min,
+ max,
+ step,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+
+
+
+ );
+};
+// autoregressive
+// samples: 4,
+// temperature: 0.8,
+// length_penalty: 1.0,
+// repetition_penalty: 2.0,
+// top_p: 0.8,
+// max_mel_tokens: 500,
+const SamplesSlider = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (event: React.ChangeEvent
+ {/* Autoregressive Parameters */}
+
+ );
+};
+
+const DiffusionIterationsSlider = ({
+ tortoiseGenerationParams,
+ handleChange,
+}: {
+ tortoiseGenerationParams: TortoiseGenerationParams;
+ handleChange: (
+ event:
+ | React.ChangeEventAutoregressive Parameters
+
+ {/* Diffusion Parameters */}
+
+ );
+};
diff --git a/react-ui/src/pages/vocos_npz.tsx b/react-ui/src/pages/vocos_npz.tsx
new file mode 100644
index 00000000..b88de480
--- /dev/null
+++ b/react-ui/src/pages/vocos_npz.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { Template } from "../components/Template";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import Head from "next/head";
+import {
+ VocosParamsNPZ,
+ vocosIdNPZ,
+ initialState,
+} from "../tabs/VocosParamsNPZ";
+import { GradioFile } from "../types/GradioFile";
+import FileInput from "../components/FileInput";
+
+const VocosPageNPZ = () => {
+ const [data, setData] = useLocalStorageDiffusion Parameters
+
+
+
+ );
+};
+
+export default VocosPageNPZ;
diff --git a/react-ui/src/pages/vocos_wav.tsx b/react-ui/src/pages/vocos_wav.tsx
new file mode 100644
index 00000000..f18d31a7
--- /dev/null
+++ b/react-ui/src/pages/vocos_wav.tsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { Template } from "../components/Template";
+import useLocalStorage from "../hooks/useLocalStorage";
+import { AudioInput, AudioOutput } from "../components/AudioComponents";
+import Head from "next/head";
+import { VocosParams, vocosId, initialState } from "../tabs/VocosParams";
+import { GradioFile } from "../types/GradioFile";
+
+type TypedGradioFile = GradioFile & {
+ type_name?: string;
+};
+
+const VocosPage = () => {
+ const [data, setData] = useLocalStorage
+ {
+ setVocosParams({
+ ...vocosParams,
+ npz_file,
+ });
+ }}
+ hide_text={false}
+ />
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default VocosPage;
diff --git a/react-ui/src/pages/voice-drafts.tsx b/react-ui/src/pages/voice-drafts.tsx
index 0dce37c7..8ba3bf8f 100644
--- a/react-ui/src/pages/voice-drafts.tsx
+++ b/react-ui/src/pages/voice-drafts.tsx
@@ -35,7 +35,7 @@ export default function Home({
{generations.map((generation) => (
+ {
+ setVocosParams({
+ ...vocosParams,
+ audio: file,
+ });
+ }}
+ filter={["sendToVocos"]}
+ />
+
+
+
+
+
+
+
+
+ {["1.5", "3.0", "6.0", "12.0"].map((bandwidth) => (
+
+
+
+
+
+ ))}
+
+
+
+ {outputs.map((npz) => (
+
+
+ );
+}
+
+export const getStaticProps = async ({}): Promise<{ props: Props }> => {
+ const outputs: NPZ[] = await getNpzDataSimpleVoices();
+ return {
+ props: {
+ outputs,
+ },
+ };
+};
diff --git a/react-ui/src/tabs/BarkGenerationParams.tsx b/react-ui/src/tabs/BarkGenerationParams.tsx
new file mode 100644
index 00000000..22db980b
--- /dev/null
+++ b/react-ui/src/tabs/BarkGenerationParams.tsx
@@ -0,0 +1,58 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+const inputs = {
+ burn_in_prompt: "Howdy!",
+ prompt: "Howdy!",
+ history_setting: "Empty history",
+ languageRadio: "English",
+ speakerIdRadio: "0",
+ useV2: true,
+ text_temp: 0.7,
+ waveform_temp: 0.7,
+ long_prompt_radio: "Short prompt (<15s)",
+ long_prompt_history_radio: "or Use old generation as history:",
+ old_generation_dropdown:
+ "voices\\2023-06-18_21-51-07__bark__continued_generation.npz",
+ seed_input: "123",
+ history_prompt_semantic_dropdown:
+ "voices\\2023-06-18_21-51-07__bark__continued_generation.npz",
+};
+
+export type BarkGenerationParams = {
+ burn_in_prompt: string; // string in 'Burn In Prompt (Optional)' Textbox component
+ prompt: string; // string in 'Prompt' Textbox component
+ history_setting: string; // string in 'History Prompt (voice) setting:' Radio component
+ languageRadio: string; // string in 'parameter_17' Radio component
+ speakerIdRadio: string; // string in 'Speaker ID' Radio component
+ useV2: boolean; // boolean in 'Use V2' Checkbox component
+ text_temp: number; // number (numeric value between 0.0 and 1.2) in 'Text temperature' Slider component
+ waveform_temp: number; // number (numeric value between 0.0 and 1.2) in 'Waveform temperature' Slider component
+ long_prompt_radio: string; // string in 'Prompt type' Radio component
+ long_prompt_history_radio: string; // string in 'For each subsequent generation:' Radio component
+ old_generation_dropdown: string; // string
+ seed_input: string; // string in 'parameter_40' Textbox component
+ history_prompt_semantic_dropdown: string; // string
+};
+
+export const initialState: BarkGenerationParams = {
+ ...inputs,
+};
+
+export const barkGenerationId = "bark_generation-tab";
+
+export const sendToBarkAsVoice = (old_generation_dropdown?: string) => {
+ if (!old_generation_dropdown) return;
+ updateLocalStorageWithFunction(
+ barkGenerationId,
+ (
+ barkParams: BarkGenerationParams = initialState
+ ): BarkGenerationParams => ({
+ ...barkParams,
+ old_generation_dropdown,
+ history_prompt_semantic_dropdown: old_generation_dropdown,
+ history_setting: "or Use old generation as history:",
+ })
+ );
+ router.push("/bark");
+};
diff --git a/react-ui/src/tabs/BarkSettingsParams.tsx b/react-ui/src/tabs/BarkSettingsParams.tsx
new file mode 100644
index 00000000..469eeb74
--- /dev/null
+++ b/react-ui/src/tabs/BarkSettingsParams.tsx
@@ -0,0 +1,44 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export const barkSettingsId = "barkSettingsParams";
+
+export type BarkSettingsParams = {
+ use_small_models: boolean;
+ enable_mps: boolean;
+ offload_gpu_models_to_cpu: boolean;
+
+ text_generation_use_gpu: boolean;
+ text_generation_use_small_model: boolean;
+ coarse_to_fine_inference_use_gpu: boolean;
+ coarse_to_fine_inference_use_small_model: boolean;
+ fine_tuning_use_gpu: boolean;
+ fine_tuning_use_small_model: boolean;
+ use_gpu_codec: boolean;
+ load_models_on_startup: boolean;
+};
+
+export const initialBarkSettingsParams: BarkSettingsParams = {
+ use_small_models: false,
+ enable_mps: false,
+ offload_gpu_models_to_cpu: false,
+
+ text_generation_use_gpu: false,
+ text_generation_use_small_model: false,
+ coarse_to_fine_inference_use_gpu: false,
+ coarse_to_fine_inference_use_small_model: false,
+ fine_tuning_use_gpu: false,
+ fine_tuning_use_small_model: false,
+ use_gpu_codec: false,
+ load_models_on_startup: false,
+};
+
+export const sendToBarkSettings = (melody?: string) => {
+ if (!melody) return;
+ updateLocalStorageWithFunction(
+ barkSettingsId,
+ (barkSettingsParams: BarkSettingsParams = initialBarkSettingsParams) =>
+ ({ ...barkSettingsParams, melody } as BarkSettingsParams)
+ );
+ router.push("/barkSettings");
+};
diff --git a/react-ui/src/tabs/BarkVoiceGenerationParams.tsx b/react-ui/src/tabs/BarkVoiceGenerationParams.tsx
new file mode 100644
index 00000000..aa26d981
--- /dev/null
+++ b/react-ui/src/tabs/BarkVoiceGenerationParams.tsx
@@ -0,0 +1,26 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export type BarkVoiceGenerationParams = {
+ audio?: string;
+ tokenizer?: string;
+ use_gpu?: boolean;
+};
+
+export const initialState: BarkVoiceGenerationParams = {
+ audio: "https://www.mfiles.co.uk/mp3-downloads/gs-cd-track2.mp3",
+ tokenizer: "quantifier_hubert_base_ls960.pth @ GitMylo/bark-voice-cloning",
+ use_gpu: true,
+};
+
+export const barkVoiceGenerationId = "bark_voice_generation-tab";
+
+export const sendToBarkVoiceGeneration = (audio?: string) => {
+ if (!audio) return;
+ updateLocalStorageWithFunction(
+ barkVoiceGenerationId,
+ (vocosParams: BarkVoiceGenerationParams = initialState) =>
+ ({ ...vocosParams, audio } as BarkVoiceGenerationParams)
+ );
+ router.push("/bark_voice_generation");
+};
diff --git a/react-ui/src/tabs/DemucsParams.tsx b/react-ui/src/tabs/DemucsParams.tsx
new file mode 100644
index 00000000..1718c8e9
--- /dev/null
+++ b/react-ui/src/tabs/DemucsParams.tsx
@@ -0,0 +1,22 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export type DemucsParams = {
+ file?: string;
+};
+
+export const initialState: DemucsParams = {
+ file: "https://www.mfiles.co.uk/mp3-downloads/gs-cd-track2.mp3",
+};
+
+export const demucsId = "demucs-tab";
+
+export const sendToDemucs = (file?: string) => {
+ if (!file) return;
+ updateLocalStorageWithFunction(
+ demucsId,
+ (demucsParams: DemucsParams = initialState) =>
+ ({ ...demucsParams, file } as DemucsParams)
+ );
+ router.push("/demucs");
+};
diff --git a/react-ui/src/tabs/MusicgenParams.tsx b/react-ui/src/tabs/MusicgenParams.tsx
new file mode 100644
index 00000000..9b4bd76b
--- /dev/null
+++ b/react-ui/src/tabs/MusicgenParams.tsx
@@ -0,0 +1,42 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export const musicgenId = "musicgenParams";
+
+export type MusicgenParams = {
+ text: string;
+ melody?: string;
+ model: string;
+ duration: number;
+ topk: number;
+ topp: number;
+ temperature: number;
+ cfg_coef: number;
+ seed: number;
+ use_multi_band_diffusion: boolean;
+};
+
+export const initialMusicgenParams: MusicgenParams = {
+ // text: "",
+ text: "lofi hip hop beats to relax/study to",
+ melody: undefined,
+ // melody: "https://www.mfiles.co.uk/mp3-downloads/gs-cd-track2.mp3",
+ model: "Small",
+ duration: 1,
+ topk: 250,
+ topp: 0,
+ temperature: 1.0,
+ cfg_coef: 3.0,
+ seed: -1,
+ use_multi_band_diffusion: false,
+};
+
+export const sendToMusicgen = (melody?: string) => {
+ if (!melody) return;
+ updateLocalStorageWithFunction(
+ musicgenId,
+ (musicgenParams: MusicgenParams = initialMusicgenParams) =>
+ ({ ...musicgenParams, melody } as MusicgenParams)
+ );
+ router.push("/musicgen");
+};
diff --git a/react-ui/src/tabs/RVCParams.tsx b/react-ui/src/tabs/RVCParams.tsx
new file mode 100644
index 00000000..374ad2c4
--- /dev/null
+++ b/react-ui/src/tabs/RVCParams.tsx
@@ -0,0 +1,44 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export type RVCParams = {
+ pitch_up_key: string; // string in 'Pitch Up key' Textbox component
+ original_audio: string; // string in 'Original Audio' Audio component
+ index: string; // string in 'Index' File component
+ pitch_collection_method: string; // string (Option from: ['harvest', 'reaper', 'melodia']) in 'Pitch Collection Method' Radio component
+ model: string; // string in 'Model' File component
+ search_feature_ratio: number; // number (numeric value between 0.0 and 1.0) in 'Search Feature Ratio' Slider component
+ device: string; // string (Option from: ['cuda:0', 'cpu', 'mps']) in 'Device' Dropdown component
+ use_half_precision_model: boolean; // boolean in 'Use half precision model (Depends on GPU support)' Checkbox component
+ filter_radius_pitch: number; // number (numeric value between 0 and 10) in 'Filter Radius (Pitch)' Slider component
+ resample_sample_rate_bug: number; // number (numeric value between 0 and 48000) in 'Resample Sample-rate (Bug)' Slider component
+ voice_envelope_normalizaiton: number; // number (numeric value between 0.0 and 1.0) in 'Voice Envelope Normalizaiton' Slider component
+ protect_breath_sounds: number; // number (numeric value between 0.0 and 0.5) in 'Protect Breath Sounds' Slider component
+};
+
+export const initialState: RVCParams = {
+ pitch_up_key: "0", // string in 'Pitch Up key' Textbox component
+ original_audio: "", // string in 'Original Audio' Audio component
+ index: "", // string in 'Index' File component
+ pitch_collection_method: "harvest", // string (Option from: ['harvest', 'reaper', 'melodia']) in 'Pitch Collection Method' Radio component
+ model: "", // string in 'Model' File component
+ search_feature_ratio: 0.66, // number (numeric value between 0.0 and 1.0) in 'Search Feature Ratio' Slider component
+ device: "cuda:0", // string (Option from: ['cuda:0', 'cpu', 'mps']) in 'Device' Dropdown component
+ use_half_precision_model: false, // boolean in 'Use half precision model (Depends on GPU support)' Checkbox component
+ filter_radius_pitch: 3, // number (numeric value between 0 and 10) in 'Filter Radius (Pitch)' Slider component
+ resample_sample_rate_bug: 0, // number (numeric value between 0 and 48000) in 'Resample Sample-rate (Bug)' Slider component
+ voice_envelope_normalizaiton: 1, // number (numeric value between 0.0 and 1.0) in 'Voice Envelope Normalizaiton' Slider component
+ protect_breath_sounds: 0.33, // number (numeric value between 0.0 and 0.5) in 'Protect Breath Sounds' Slider component
+};
+
+export const RVCId = "rvc_generation-tab";
+
+export const sendToRVCGeneration = (audio?: string) => {
+ if (!audio) return;
+ updateLocalStorageWithFunction(
+ RVCId,
+ (vocosParams: RVCParams = initialState) =>
+ ({ ...vocosParams, audio } as RVCParams)
+ );
+ router.push("/bark");
+};
diff --git a/react-ui/src/tabs/TortoiseGenerationParams.tsx b/react-ui/src/tabs/TortoiseGenerationParams.tsx
new file mode 100644
index 00000000..6e358613
--- /dev/null
+++ b/react-ui/src/tabs/TortoiseGenerationParams.tsx
@@ -0,0 +1,73 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export type TortoiseGenerationParams = {
+ prompt: string; // string in 'Prompt' Textbox component
+ speaker: string; // string (Option from: ['random', 'angie', 'applejack', 'cond_latent_example', 'daniel', 'deniro', 'emma', 'freeman', 'geralt', 'halle', 'jlaw', 'lj', 'mol', 'myself', 'pat', 'pat2', 'rainbow', 'snakes', 'tim_reynolds', 'tom', 'train_atkins', 'train_daws', 'train_dotrice', 'train_dreams', 'train_empire', 'train_grace', 'train_kennard', 'train_lescault', 'train_mouse', 'weaver', 'william', 'freeman_2a', 'freeman_3', 'pat4']) in 'parameter_2502' Dropdown component
+ preset: string; // string (Option from: ['ultra_fast', 'fast', 'standard', 'high_quality']) in 'parameter_2507' Dropdown component
+ seed: number; // number in 'parameter_2521' Number component
+ cvvp_amount: number; // number (numeric value between 0.0 and 1.0) in 'CVVP Amount' Slider component
+ split_prompt: boolean; // boolean in 'Split prompt by lines' Checkbox component
+ samples: number; // number (numeric value between 4 and 256) in 'Samples' Slider component
+ diffusion_iterations: number; // number (numeric value between 4 and 400) in 'Diffusion Iterations' Slider component
+ temperature: number; // number (numeric value between 0.0 and 1.0) in 'Temperature' Slider component
+ length_penalty: number; // number (numeric value between 0.0 and 10.0) in 'Length Penalty' Slider component
+ repetition_penalty: number; // number (numeric value between 0.0 and 10.0) in 'Repetition Penalty' Slider component
+ top_p: number; // number (numeric value between 0.0 and 1.0) in 'Top P' Slider component
+ max_mel_tokens: number; // number (numeric value between 10 and 600) in 'Max Mel Tokens' Slider component
+ cond_free: boolean; // boolean in 'Cond Free' Checkbox component
+ cond_free_k: number; // number (numeric value between 0 and 10) in 'Cond Free K' Slider component
+ diffusion_temperature: number; // number (numeric value between 0.0 and 1.0) in 'Temperature' Slider component
+ generation_name: string; // string in 'Generation Name' Textbox component
+
+ model: string; // string (Option from: ['Default']) in 'parameter_2488' Dropdown component
+ kv_cache: boolean; // boolean in 'parameter_2493' Checkbox component
+ use_deepspeed: boolean; // boolean in 'parameter_2494' Checkbox component
+ half: boolean; // boolean in 'parameter_2495' Checkbox component
+ use_basic_cleaners: boolean; // boolean in 'parameter_2497' Checkbox component
+ tokenizer: string; // string
+};
+
+export const initialState: TortoiseGenerationParams = {
+ // autoregressive
+ samples: 4,
+ temperature: 0.8,
+ length_penalty: 1.0,
+ repetition_penalty: 2.0,
+ top_p: 0.8,
+ max_mel_tokens: 500,
+
+ // diffusion
+ diffusion_iterations: 30,
+ cond_free: false,
+ cond_free_k: 2,
+ diffusion_temperature: 1.0,
+
+ model: "Default", // string (Option from: ['Default']) in 'parameter_2488' Dropdown component
+
+ prompt: "Howdy!", // string in 'Prompt' Textbox component
+ speaker: "random", // string (Option from: ['random', 'angie', 'applejack', 'cond_latent_example', 'daniel', 'deniro', 'emma', 'freeman', 'geralt', 'halle', 'jlaw', 'lj', 'mol', 'myself', 'pat', 'pat2', 'rainbow', 'snakes', 'tim_reynolds', 'tom', 'train_atkins', 'train_daws', 'train_dotrice', 'train_dreams', 'train_empire', 'train_grace', 'train_kennard', 'train_lescault', 'train_mouse', 'weaver', 'william', 'freeman_2a', 'freeman_3', 'pat4']) in 'parameter_2502' Dropdown component
+ preset: "ultra_fast", // string (Option from: ['ultra_fast', 'fast', 'standard', 'high_quality']) in 'parameter_2507' Dropdown component
+ seed: -1, // number in 'parameter_2521' Number component
+ cvvp_amount: 0, // number (numeric value between 0.0 and 1.0) in 'CVVP Amount' Slider component
+ split_prompt: true, // boolean in 'Split prompt by lines' Checkbox component
+ generation_name: "", // string in 'Generation Name' Textbox component
+
+ kv_cache: false, // boolean in 'parameter_2493' Checkbox component
+ use_deepspeed: false, // boolean in 'parameter_2494' Checkbox component
+ half: false, // boolean in 'parameter_2495' Checkbox component
+ use_basic_cleaners: false, // boolean in 'parameter_2497' Checkbox component
+ tokenizer: "", // string
+};
+
+export const tortoiseGenerationId = "tortoise_generation-tab";
+
+export const sendToBarkVoiceGeneration = (audio?: string) => {
+ if (!audio) return;
+ updateLocalStorageWithFunction(
+ tortoiseGenerationId,
+ (vocosParams: TortoiseGenerationParams = initialState) =>
+ ({ ...vocosParams, audio } as TortoiseGenerationParams)
+ );
+ router.push("/bark");
+};
diff --git a/react-ui/src/tabs/VocosParams.tsx b/react-ui/src/tabs/VocosParams.tsx
new file mode 100644
index 00000000..7b22a316
--- /dev/null
+++ b/react-ui/src/tabs/VocosParams.tsx
@@ -0,0 +1,24 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export type VocosParams = {
+ audio?: string;
+ bandwidth?: string;
+};
+
+export const initialState: VocosParams = {
+ audio: "https://www.mfiles.co.uk/mp3-downloads/gs-cd-track2.mp3",
+ bandwidth: "1.5",
+};
+
+export const vocosId = "vocos_wav-tab";
+
+export const sendToVocos = (audio?: string) => {
+ if (!audio) return;
+ updateLocalStorageWithFunction(
+ vocosId,
+ (vocosParams: VocosParams = initialState) =>
+ ({ ...vocosParams, audio } as VocosParams)
+ );
+ router.push("/vocos_wav");
+};
diff --git a/react-ui/src/tabs/VocosParamsNPZ.tsx b/react-ui/src/tabs/VocosParamsNPZ.tsx
new file mode 100644
index 00000000..0eb1d670
--- /dev/null
+++ b/react-ui/src/tabs/VocosParamsNPZ.tsx
@@ -0,0 +1,22 @@
+import { updateLocalStorageWithFunction } from "../hooks/useLocalStorage";
+import router from "next/router";
+
+export type VocosParamsNPZ = {
+ npz_file?: string;
+};
+
+export const initialState: VocosParamsNPZ = {
+ npz_file: "https://www.mfiles.co.uk/mp3-downloads/gs-cd-track2.mp3",
+};
+
+export const vocosIdNPZ = "vocos_npz-tab";
+
+export const sendToVocosNPZ = (npz_file?: string) => {
+ if (!npz_file) return;
+ updateLocalStorageWithFunction(
+ vocosIdNPZ,
+ (vocosParams: VocosParamsNPZ = initialState) =>
+ ({ ...vocosParams, npz_file } as VocosParamsNPZ)
+ );
+ router.push("/vocos_npz");
+};
diff --git a/react-ui/src/types/Generation.tsx b/react-ui/src/types/Generation.tsx
index 4bf87450..2f24f979 100644
--- a/react-ui/src/types/Generation.tsx
+++ b/react-ui/src/types/Generation.tsx
@@ -1,32 +1,8 @@
-export type Generation = {
- name: string;
- prompt?: string;
- directory: string;
- audio: string;
- tags: string[];
- // deprecated
- download: string;
- language:
- | "american"
- | "german"
- | "spanish"
- | "french"
- | "hindi"
- | "chinese"
- | "portuguese"
- | "russian"
- | "turkish"
- | "polish"
- | "korean"
- | "japanese"
- | "italian";
- author: string;
- gender: "male" | "female" | "other";
- image: string;
-};
-
export interface GenerationRaw {
- prompt: string;
+ _type?: string;
+
+ prompt?: string;
+ text?: string;
language: string;
speaker_id: string;
history_prompt: string;
@@ -46,5 +22,32 @@ export interface GenerationRaw {
is_big_fine_model: boolean;
hash?: string;
- name?: string;
+ name?: String;
+ history_bundle_name_data?: string;
+ api_filename?: string;
+}
+
+export interface TortoiseMeta {
+ _version: string;
+ _type: string;
+ date: string;
+ candidates: number;
+ text: string;
+ voice: string;
+ preset: string;
+ seed: string;
+ cvvp_amount: number;
+ split_prompt: boolean;
+ num_autoregressive_samples: number;
+ diffusion_iterations: number;
+ temperature: number;
+ length_penalty: number;
+ repetition_penalty: number;
+ top_p: number;
+ max_mel_tokens: number;
+ cond_free: boolean;
+ cond_free_k: number;
+ diffusion_temperature: number;
+ model: string;
+ name: string;
}
diff --git a/react-ui/src/types/GradioFile.tsx b/react-ui/src/types/GradioFile.tsx
new file mode 100644
index 00000000..a17aa61c
--- /dev/null
+++ b/react-ui/src/types/GradioFile.tsx
@@ -0,0 +1,8 @@
+
+export type GradioFile = {
+ name: string;
+ data: string;
+ size?: number;
+ is_file?: boolean;
+ orig_name?: string;
+};
diff --git a/react-ui/src/types/NPZ.ts b/react-ui/src/types/NPZ.ts
new file mode 100644
index 00000000..e2114a1b
--- /dev/null
+++ b/react-ui/src/types/NPZ.ts
@@ -0,0 +1,26 @@
+export interface NPZOptional {
+ _version: string;
+ _hash_version: string;
+ _type: string;
+ is_big_semantic_model: boolean;
+ is_big_coarse_model: boolean;
+ is_big_fine_model: boolean;
+ prompt: string;
+ language: any;
+ speaker_id: any;
+ hash: string;
+ history_prompt: string;
+ history_prompt_npz: any;
+ history_hash: string;
+ text_temp: number;
+ waveform_temp: number;
+ date: string;
+ seed: string;
+ crop_min: number;
+ crop_max: number;
+}
+
+export interface NPZ extends Partial