mirror of
https://github.com/Vendicated/Vencord.git
synced 2025-02-23 23:15:10 +00:00
CustomVoiceFilter: Refactored UIs
This commit is contained in:
fox3000foxy
parent
cff7492f37
commit
ba431e78b1
3 changed files with 216 additions and 211 deletions
|
|
@ -1,111 +1,113 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { Button, Flex, Forms, Select, TextInput, useCallback, useMemo, UserStore, useState } from "@webpack/common";
|
||||
import { SelectOption } from "@webpack/types";
|
||||
import { JSX } from "react";
|
||||
|
||||
import { voices } from ".";
|
||||
import { openErrorModal } from "./ErrorModal";
|
||||
import { IVoiceFilter, useVoiceFiltersStore } from "./index";
|
||||
const requiredFields = ["name", "iconURL", "onnxFileUrl", "previewSoundURLs"] as const satisfies readonly (keyof IVoiceFilter)[];
|
||||
|
||||
|
||||
export function openCreateVoiceModal(defaultValue?: Partial<IVoiceFilter>): string {
|
||||
const key = openModal(modalProps => (
|
||||
<CreateVoiceFilterModal modalProps={modalProps} close={() => closeModal(key)} defaultValue={defaultValue} />
|
||||
));
|
||||
return key;
|
||||
}
|
||||
|
||||
interface CreateVoiceFilterModalProps {
|
||||
modalProps: ModalProps;
|
||||
close: () => void;
|
||||
defaultValue?: Partial<IVoiceFilter>;
|
||||
}
|
||||
|
||||
|
||||
// Create Voice Filter Modal
|
||||
function CreateVoiceFilterModal({ modalProps, close, defaultValue }: CreateVoiceFilterModalProps): JSX.Element {
|
||||
const currentUser = useMemo(() => UserStore.getCurrentUser(), []);
|
||||
const [voiceFilter, setVoiceFilter] = useState(() => (
|
||||
{ author: currentUser.id, name: "", iconURL: "", styleKey: "", onnxFileUrl: "", ...defaultValue }
|
||||
));
|
||||
|
||||
const update = useCallback(<K extends keyof IVoiceFilter>(value: IVoiceFilter[K], key: K) => {
|
||||
setVoiceFilter(prev => ({ ...prev, [key]: value }));
|
||||
}, []);
|
||||
const submit = useCallback(() => {
|
||||
if (requiredFields.every(field => voiceFilter[field])) {
|
||||
useVoiceFiltersStore.getState().downloadVoicepack(JSON.stringify({
|
||||
id: voiceFilter.author + "-" + voiceFilter.name.toLowerCase().replace(/ /g, "-"),
|
||||
available: true,
|
||||
temporarilyAvailable: false,
|
||||
custom: true,
|
||||
splashGradient: "radial-gradient(circle, #d9a5a2 0%, rgba(0,0,0,0) 100%)",
|
||||
baseColor: "#d9a5a2",
|
||||
...voiceFilter
|
||||
} satisfies IVoiceFilter));
|
||||
close();
|
||||
} else {
|
||||
openErrorModal("Please fill in all required fields");
|
||||
}
|
||||
}, [voiceFilter]);
|
||||
|
||||
const keyOptions: SelectOption[] = useMemo(() =>
|
||||
[{ value: "", label: "(empty)" }, ...(voices ? Object.keys(voices).map(name => ({ value: name, label: name })) : [])],
|
||||
[]);
|
||||
|
||||
return (
|
||||
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader>
|
||||
<Forms.FormTitle tag="h2" className="modalTitle">
|
||||
{voiceFilter.id ? "Edit a voice filter" : "Create a voice filter"}
|
||||
</Forms.FormTitle>
|
||||
<ModalCloseButton onClick={close} />
|
||||
</ModalHeader>
|
||||
<ModalContent className="vc-voice-filters-modal">
|
||||
<Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Name<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="Model" onChange={update} style={{ width: "100%" }} value={voiceFilter.name} name="name" required />
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Icon URL<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="https://example.com/voicepacks/model/icon.png" onChange={update} style={{ width: "100%" }} value={voiceFilter.iconURL} name="iconURL" required />
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Style Key</Forms.FormTitle>
|
||||
<Select
|
||||
options={keyOptions}
|
||||
placeholder={"Select an option"}
|
||||
maxVisibleItems={5}
|
||||
closeOnSelect={true}
|
||||
select={value => update(value, "styleKey")}
|
||||
isSelected={v => v === voiceFilter.styleKey}
|
||||
serialize={String}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>ONNX File URL<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="https://example.com/voicepacks/model/model.onnx" onChange={update} style={{ width: "100%" }} value={voiceFilter.onnxFileUrl} name="onnxFileUrl" required />
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Preview Sound URL<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="https://example.com/voicepacks/model/preview.mp3" onChange={value => update(value ? [value] : undefined, "previewSoundURLs")} style={{ width: "100%" }} value={voiceFilter.previewSoundURLs?.[0] ?? ""} required />
|
||||
</Forms.FormSection>
|
||||
</Flex>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={close} >Cancel</Button>
|
||||
<Button color={Button.Colors.GREEN} onClick={submit}>{voiceFilter.id ? "Save" : "Create"}</Button>
|
||||
</Flex>
|
||||
</ModalFooter>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { Button, Flex, Forms, Select, TextInput, useCallback, useMemo, UserStore, useState } from "@webpack/common";
|
||||
import { SelectOption } from "@webpack/types";
|
||||
import { JSX } from "react";
|
||||
|
||||
import { voices } from ".";
|
||||
import { openErrorModal } from "./ErrorModal";
|
||||
import { openHelpModal } from "./HelpModal";
|
||||
import { IVoiceFilter, useVoiceFiltersStore } from "./index";
|
||||
const requiredFields = ["name", "iconURL", "onnxFileUrl", "previewSoundURLs"] as const satisfies readonly (keyof IVoiceFilter)[];
|
||||
|
||||
|
||||
export function openCreateVoiceModal(defaultValue?: Partial<IVoiceFilter>): string {
|
||||
const key = openModal(modalProps => (
|
||||
<CreateVoiceFilterModal modalProps={modalProps} close={() => closeModal(key)} defaultValue={defaultValue} />
|
||||
));
|
||||
return key;
|
||||
}
|
||||
|
||||
interface CreateVoiceFilterModalProps {
|
||||
modalProps: ModalProps;
|
||||
close: () => void;
|
||||
defaultValue?: Partial<IVoiceFilter>;
|
||||
}
|
||||
|
||||
|
||||
// Create Voice Filter Modal
|
||||
function CreateVoiceFilterModal({ modalProps, close, defaultValue }: CreateVoiceFilterModalProps): JSX.Element {
|
||||
const currentUser = useMemo(() => UserStore.getCurrentUser(), []);
|
||||
const [voiceFilter, setVoiceFilter] = useState(() => (
|
||||
{ author: currentUser.id, name: "", iconURL: "", styleKey: "", onnxFileUrl: "", ...defaultValue }
|
||||
));
|
||||
|
||||
const update = useCallback(<K extends keyof IVoiceFilter>(value: IVoiceFilter[K], key: K) => {
|
||||
setVoiceFilter(prev => ({ ...prev, [key]: value }));
|
||||
}, []);
|
||||
const submit = useCallback(() => {
|
||||
if (requiredFields.every(field => voiceFilter[field])) {
|
||||
useVoiceFiltersStore.getState().downloadVoicepack(JSON.stringify({
|
||||
id: voiceFilter.author + "-" + voiceFilter.name.toLowerCase().replace(/ /g, "-"),
|
||||
available: true,
|
||||
temporarilyAvailable: false,
|
||||
custom: true,
|
||||
splashGradient: "radial-gradient(circle, #d9a5a2 0%, rgba(0,0,0,0) 100%)",
|
||||
baseColor: "#d9a5a2",
|
||||
...voiceFilter
|
||||
} satisfies IVoiceFilter));
|
||||
close();
|
||||
} else {
|
||||
openErrorModal("Please fill in all required fields");
|
||||
}
|
||||
}, [voiceFilter]);
|
||||
|
||||
const keyOptions: SelectOption[] = useMemo(() =>
|
||||
[{ value: "", label: "(empty)" }, ...(voices ? Object.keys(voices).map(name => ({ value: name, label: name })) : [])],
|
||||
[]);
|
||||
|
||||
return (
|
||||
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader>
|
||||
<Forms.FormTitle tag="h2" className="modalTitle">
|
||||
{voiceFilter.id ? "Edit a voice filter" : "Create a voice filter"}
|
||||
</Forms.FormTitle>
|
||||
<ModalCloseButton onClick={close} />
|
||||
</ModalHeader>
|
||||
<ModalContent className="vc-voice-filters-modal">
|
||||
<Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Name<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="Model" onChange={update} style={{ width: "100%" }} value={voiceFilter.name} name="name" required />
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Icon URL<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="https://example.com/voicepacks/model/icon.png" onChange={update} style={{ width: "100%" }} value={voiceFilter.iconURL} name="iconURL" required />
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Style Key</Forms.FormTitle>
|
||||
<Select
|
||||
options={keyOptions}
|
||||
placeholder={"Select an option"}
|
||||
maxVisibleItems={5}
|
||||
closeOnSelect={true}
|
||||
select={value => update(value, "styleKey")}
|
||||
isSelected={v => v === voiceFilter.styleKey}
|
||||
serialize={String}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>ONNX File URL<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="https://example.com/voicepacks/model/model.onnx" onChange={update} style={{ width: "100%" }} value={voiceFilter.onnxFileUrl} name="onnxFileUrl" required />
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Preview Sound URL<span style={{ color: "var(--text-danger)" }}>*</span></Forms.FormTitle>
|
||||
<TextInput placeholder="https://example.com/voicepacks/model/preview.mp3" onChange={value => update(value ? [value] : undefined, "previewSoundURLs")} style={{ width: "100%" }} value={voiceFilter.previewSoundURLs?.[0] ?? ""} required />
|
||||
</Forms.FormSection>
|
||||
</Flex>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={openHelpModal}>How to create a voicepack?</Button>
|
||||
<Button color={Button.Colors.GREEN} onClick={submit}>{voiceFilter.id ? "Save" : "Create"}</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={close} >Cancel</Button>
|
||||
</Flex>
|
||||
</ModalFooter>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,78 +1,93 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { Margins } from "@utils/margins";
|
||||
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { Button, Flex, Forms, Slider } from "@webpack/common";
|
||||
import { JSX } from "react";
|
||||
|
||||
import plugin, { settings } from "./index";
|
||||
|
||||
|
||||
export function openSettingsModal(): string {
|
||||
const key = openModal(modalProps => (
|
||||
<SettingsModal modalProps={modalProps} close={() => closeModal(key)} />
|
||||
));
|
||||
return key;
|
||||
}
|
||||
|
||||
interface SettingsModalProps {
|
||||
modalProps: ModalProps;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
|
||||
// Create Voice Filter Modal
|
||||
function SettingsModal({ modalProps, close }: SettingsModalProps): JSX.Element {
|
||||
const settingsState = settings.use();
|
||||
const { settings: { def } } = plugin;
|
||||
|
||||
return (
|
||||
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader>
|
||||
<Forms.FormTitle tag="h2" className="modalTitle">
|
||||
Settings
|
||||
</Forms.FormTitle>
|
||||
<ModalCloseButton onClick={close} />
|
||||
</ModalHeader>
|
||||
<ModalContent className="vc-voice-filters-modal">
|
||||
<Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Pitch</Forms.FormTitle>
|
||||
<Forms.FormText className={Margins.bottom20} type="description">{def.pitch.description}</Forms.FormText>
|
||||
<Slider
|
||||
markers={def.pitch.markers}
|
||||
minValue={def.pitch.markers[0]}
|
||||
maxValue={def.pitch.markers.at(-1)}
|
||||
initialValue={settingsState.pitch ?? def.pitch.default}
|
||||
onValueChange={value => settingsState.pitch = value}
|
||||
onValueRender={value => `${value}`}
|
||||
stickToMarkers={true}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Frequency</Forms.FormTitle>
|
||||
<Forms.FormText className={Margins.bottom20} type="description">{def.frequency.description}</Forms.FormText>
|
||||
<Slider
|
||||
markers={def.frequency.markers}
|
||||
minValue={def.frequency.markers[0]}
|
||||
maxValue={def.frequency.markers.at(-1)}
|
||||
initialValue={settingsState.frequency ?? def.frequency.default}
|
||||
onValueChange={value => settingsState.frequency = value}
|
||||
onValueRender={value => `${value}Hz`}
|
||||
stickToMarkers={true}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
</Flex>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.GREEN} onClick={close} >Save & Exit</Button>
|
||||
</Flex>
|
||||
</ModalFooter>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { Margins } from "@utils/margins";
|
||||
import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { PluginNative } from "@utils/types";
|
||||
import { Button, Flex, Forms, Slider } from "@webpack/common";
|
||||
import { JSX } from "react";
|
||||
|
||||
import plugin, { settings, useVoiceFiltersStore } from "./index";
|
||||
|
||||
const Native = VencordNative.pluginHelpers.CustomVoiceFilters as PluginNative<typeof import("./native")>;
|
||||
export function openSettingsModal(): string {
|
||||
const key = openModal(modalProps => (
|
||||
<SettingsModal modalProps={modalProps} close={() => closeModal(key)} />
|
||||
));
|
||||
return key;
|
||||
}
|
||||
|
||||
interface SettingsModalProps {
|
||||
modalProps: ModalProps;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
function openModelFolder() {
|
||||
const { modulePath } = useVoiceFiltersStore.getState();
|
||||
Native.openFolder(modulePath);
|
||||
}
|
||||
|
||||
// Create Voice Filter Modal
|
||||
function SettingsModal({ modalProps, close }: SettingsModalProps): JSX.Element {
|
||||
const settingsState = settings.use();
|
||||
const { settings: { def } } = plugin;
|
||||
const { deleteAll, exportVoiceFilters, importVoiceFilters } = useVoiceFiltersStore();
|
||||
return (
|
||||
<ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
|
||||
<ModalHeader>
|
||||
<Forms.FormTitle tag="h2" className="modalTitle">
|
||||
Settings
|
||||
</Forms.FormTitle>
|
||||
<ModalCloseButton onClick={close} />
|
||||
</ModalHeader>
|
||||
<ModalContent className="vc-voice-filters-modal">
|
||||
<Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Pitch</Forms.FormTitle>
|
||||
<Forms.FormText className={Margins.bottom20} type="description">{def.pitch.description}</Forms.FormText>
|
||||
<Slider
|
||||
markers={def.pitch.markers}
|
||||
minValue={def.pitch.markers[0]}
|
||||
maxValue={def.pitch.markers.at(-1)}
|
||||
initialValue={settingsState.pitch ?? def.pitch.default}
|
||||
onValueChange={value => settingsState.pitch = value}
|
||||
onValueRender={value => `${value}`}
|
||||
stickToMarkers={true}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Frequency</Forms.FormTitle>
|
||||
<Forms.FormText className={Margins.bottom20} type="description">{def.frequency.description}</Forms.FormText>
|
||||
<Slider
|
||||
markers={def.frequency.markers}
|
||||
minValue={def.frequency.markers[0]}
|
||||
maxValue={def.frequency.markers.at(-1)}
|
||||
initialValue={settingsState.frequency ?? def.frequency.default}
|
||||
onValueChange={value => settingsState.frequency = value}
|
||||
onValueRender={value => `${value}Hz`}
|
||||
stickToMarkers={true}
|
||||
/>
|
||||
</Forms.FormSection>
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle>Voicepacks:</Forms.FormTitle>
|
||||
<Forms.FormText type="description">Here you can manage your voicepacks.</Forms.FormText>
|
||||
<Flex style={{ gap: "0.5rem" }}>
|
||||
<Button onClick={deleteAll} color={Button.Colors.RED}>Delete all voicepacks</Button>
|
||||
<Button onClick={openModelFolder} color={Button.Colors.TRANSPARENT}>Open Models Folder</Button>
|
||||
<Button onClick={exportVoiceFilters} color={Button.Colors.GREEN}>Export</Button>
|
||||
<Button onClick={importVoiceFilters} color={Button.Colors.GREEN}>Import</Button>
|
||||
</Flex>
|
||||
</Forms.FormSection>
|
||||
</Flex>
|
||||
</ModalContent>
|
||||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.GREEN} onClick={close} >Save & Exit</Button>
|
||||
</Flex>
|
||||
</ModalFooter>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { Button, Flex, Forms, Text, TextInput, Tooltip, useEffect, useState } fr
|
|||
import { JSX } from "react";
|
||||
|
||||
import { openCreateVoiceModal } from "./CreateVoiceFilterModal";
|
||||
import { openHelpModal } from "./HelpModal";
|
||||
import { DownloadIcon, DownloadingIcon, PauseIcon, PlayIcon, RefreshIcon, TrashIcon } from "./Icons";
|
||||
import { downloadCustomVoiceModel, getClient, IVoiceFilter, useVoiceFiltersStore, VoiceFilterStyles } from "./index";
|
||||
import { openSettingsModal } from "./SettingsModal";
|
||||
|
|
@ -20,11 +19,6 @@ import { openWikiHomeModal } from "./WikiHomeModal";
|
|||
|
||||
const Native = VencordNative.pluginHelpers.CustomVoiceFilters as PluginNative<typeof import("./native")>;
|
||||
|
||||
function openModelFolder() {
|
||||
const { modulePath } = useVoiceFiltersStore.getState();
|
||||
const modelFolder = Native.openFolder(modulePath);
|
||||
}
|
||||
|
||||
export function openVoiceFiltersModal(): string {
|
||||
const key = openModal(modalProps => (
|
||||
<VoiceFiltersModal
|
||||
|
|
@ -47,7 +41,7 @@ interface VoiceFiltersModalProps {
|
|||
|
||||
function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps): JSX.Element {
|
||||
const [url, setUrl] = useState("");
|
||||
const { downloadVoicepack, deleteAll, exportVoiceFilters, importVoiceFilters, voiceFilters } = useVoiceFiltersStore();
|
||||
const { downloadVoicepack, exportVoiceFilters, importVoiceFilters, voiceFilters } = useVoiceFiltersStore();
|
||||
const { client } = getClient();
|
||||
const voiceComponents = Object.values(voiceFilters).map(voice =>
|
||||
<VoiceFilter {...voice} key={voice.id} />
|
||||
|
|
@ -64,20 +58,15 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
|
|||
<ModalContent className="vc-voice-filters-modal">
|
||||
<Flex style={{ gap: "1rem" }} direction={Flex.Direction.VERTICAL}>
|
||||
<Text>Download a voicepack from a url or paste a voicepack data here:</Text>
|
||||
<TextInput
|
||||
value={url}
|
||||
placeholder="( e.g. https://fox3000foxy.com/voicepacks/agents.json )"
|
||||
onChange={setUrl}
|
||||
onKeyDown={e => { if (e.key === "Enter") downloadVoicepack(url); }}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<Flex style={{ gap: "0.5rem" }}>
|
||||
<Button onClick={() => downloadVoicepack(url)}>Download</Button>
|
||||
<Button onClick={deleteAll} color={Button.Colors.RED}>Delete all</Button>
|
||||
<Button onClick={exportVoiceFilters} color={Button.Colors.TRANSPARENT}>Export</Button>
|
||||
<Button onClick={importVoiceFilters} color={Button.Colors.TRANSPARENT}>Import</Button>
|
||||
<Button onClick={() => downloadVoicepack("https://fox3000foxy.com/voicepacks/agents.json")} color={Button.Colors.TRANSPARENT}>Download Default</Button>
|
||||
<Button onClick={openModelFolder} color={Button.Colors.TRANSPARENT}>Open Model Folder</Button>
|
||||
<Flex style={{ display: "grid", gridTemplateColumns: "89% 10%", gap: "0.5rem" }}>
|
||||
<TextInput
|
||||
value={url}
|
||||
placeholder="( e.g. https://fox3000foxy.com/voicepacks/agents.json )"
|
||||
onChange={setUrl}
|
||||
onKeyDown={e => { if (e.key === "Enter") downloadVoicepack(url); }}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
<Button onClick={() => downloadVoicepack(url || "https://fox3000foxy.com/voicepacks/agents.json")}>Download</Button>
|
||||
</Flex>
|
||||
|
||||
<Text>Voice filters list:</Text>
|
||||
|
|
@ -94,7 +83,6 @@ function VoiceFiltersModal({ modalProps, close, accept }: VoiceFiltersModalProps
|
|||
<ModalFooter>
|
||||
<Flex style={{ gap: "0.5rem" }} justify={Flex.Justify.END} align={Flex.Align.CENTER}>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={openSettingsModal}>Settings</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={openHelpModal}>Learn how to build your own voicepack</Button>
|
||||
<Button color={Button.Colors.TRANSPARENT} onClick={() => openCreateVoiceModal()}>Create Voicepack</Button>
|
||||
<Button color={Button.Colors.GREEN} onClick={openWikiHomeModal}>Wiki</Button>
|
||||
<Button color={Button.Colors.RED} onClick={accept}>Close</Button>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue