mirror of
https://github.com/w-okada/voice-changer.git
synced 2025-02-02 16:23:58 +03:00
WIP: integrate vcs to new gui
This commit is contained in:
parent
3bed1af628
commit
b453e5fd85
11
client/demo/dist/index.html
vendored
11
client/demo/dist/index.html
vendored
@ -1 +1,10 @@
|
||||
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html>
|
||||
<!DOCTYPE html>
|
||||
<html style="width: 100%; height: 100%; overflow: hidden">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Voice Changer Client Demo</title>
|
||||
<script defer src="index.js"></script></head>
|
||||
<body style="width: 100%; height: 100%; margin: 0px">
|
||||
<div id="app" style="width: 100%; height: 100%"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
1948
client/demo/dist/index.js
vendored
1948
client/demo/dist/index.js
vendored
File diff suppressed because one or more lines are too long
31
client/demo/dist/index.js.LICENSE.txt
vendored
31
client/demo/dist/index.js.LICENSE.txt
vendored
@ -1,31 +0,0 @@
|
||||
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react-dom.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* react.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
/**
|
||||
* @license React
|
||||
* scheduler.production.min.js
|
||||
*
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
205
client/demo/src/components/demo/904-1_MainScreen.tsx
Normal file
205
client/demo/src/components/demo/904-1_MainScreen.tsx
Normal file
@ -0,0 +1,205 @@
|
||||
import React, { useMemo } from "react";
|
||||
import { useGuiState } from "./001_GuiStateProvider";
|
||||
import { useAppState } from "../../001_provider/001_AppStateProvider";
|
||||
import { RVCModelSlot, fileSelector } from "@dannadori/voice-changer-client-js";
|
||||
import { useMessageBuilder } from "../../hooks/useMessageBuilder";
|
||||
import { ModelSlotManagerDialogScreen } from "./904_ModelSlotManagerDialog";
|
||||
import { checkExtention, trimfileName } from "../../utils/utils";
|
||||
|
||||
export type MainScreenProps = {
|
||||
screen: ModelSlotManagerDialogScreen
|
||||
close: () => void
|
||||
openSampleDownloader: (slotIndex: number) => void
|
||||
openFileUploader: (slotIndex: number) => void
|
||||
}
|
||||
|
||||
|
||||
export const MainScreen = (props: MainScreenProps) => {
|
||||
const { serverSetting } = useAppState()
|
||||
const guiState = useGuiState()
|
||||
const messageBuilderState = useMessageBuilder()
|
||||
useMemo(() => {
|
||||
messageBuilderState.setMessage(__filename, "change_icon", { "ja": "アイコン変更", "en": "chage icon" })
|
||||
messageBuilderState.setMessage(__filename, "rename", { "ja": "リネーム", "en": "rename" })
|
||||
messageBuilderState.setMessage(__filename, "download", { "ja": "ダウンロード", "en": "download" })
|
||||
messageBuilderState.setMessage(__filename, "terms_of_use", { "ja": "利用規約", "en": "terms of use" })
|
||||
}, [])
|
||||
|
||||
|
||||
const screen = useMemo(() => {
|
||||
if (props.screen != "Main") {
|
||||
return <></>
|
||||
}
|
||||
if (!serverSetting.serverSetting.modelSlots) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
|
||||
const iconAction = async (index: number) => {
|
||||
if (!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0) {
|
||||
return
|
||||
}
|
||||
|
||||
const file = await fileSelector("")
|
||||
if (checkExtention(file.name, ["png", "jpg", "jpeg", "gif"]) == false) {
|
||||
alert(`サムネイルの拡張子は".png", ".jpg", ".jpeg", ".gif"である必要があります。`)
|
||||
return
|
||||
}
|
||||
await serverSetting.uploadAssets(index, "iconFile", file)
|
||||
}
|
||||
|
||||
const nameValueAction = async (index: number) => {
|
||||
if (!serverSetting.serverSetting.modelSlots[index].name || serverSetting.serverSetting.modelSlots[index].name.length == 0) {
|
||||
return
|
||||
}
|
||||
// Open Text Input Dialog
|
||||
const p = new Promise<string>((resolve) => {
|
||||
guiState.setTextInputResolve({ resolve: resolve })
|
||||
})
|
||||
guiState.stateControls.showTextInputCheckbox.updateState(true)
|
||||
const text = await p;
|
||||
|
||||
// Send to Server
|
||||
if (text.length > 0) {
|
||||
console.log("input text:", text)
|
||||
await serverSetting.updateModelInfo(index, "name", text)
|
||||
}
|
||||
}
|
||||
|
||||
const fileValueAction = (url: string) => {
|
||||
if (url.length == 0) {
|
||||
return
|
||||
}
|
||||
const link = document.createElement("a")
|
||||
link.href = "./" + url
|
||||
link.download = url.replace(/^.*[\\\/]/, '')
|
||||
link.click()
|
||||
link.remove()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const closeButtonRow = (
|
||||
<div className="body-row split-3-4-3 left-padding-1">
|
||||
<div className="body-item-text">
|
||||
</div>
|
||||
<div className="body-button-container body-button-container-space-around">
|
||||
<div className="body-button" onClick={() => { props.close() }} >close</div>
|
||||
</div>
|
||||
<div className="body-item-text"></div>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
|
||||
const slotRow = serverSetting.serverSetting.modelSlots.map((x, index) => {
|
||||
// モデルのアイコン
|
||||
const generateIconArea = (slotIndex: number, iconUrl: string, tooltip: boolean) => {
|
||||
const realIconUrl = iconUrl.length > 0 ? iconUrl : "/assets/icons/noimage.png"
|
||||
const iconDivClass = tooltip ? "tooltip" : ""
|
||||
const iconClass = tooltip ? "model-slot-icon-pointable" : "model-slot-icon"
|
||||
return (
|
||||
<div className={iconDivClass}>
|
||||
<img src={realIconUrl} className={iconClass} onClick={() => { iconAction(slotIndex) }} />
|
||||
<div className="tooltip-text tooltip-text-thin tooltip-text-lower">
|
||||
{messageBuilderState.getMessage(__filename, "change_icon")}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// モデルの名前
|
||||
const generateNameRow = (slotIndex: number, name: string, termsOfUseUrl: string) => {
|
||||
const nameValueClass = name.length > 0 ? "model-slot-detail-row-value-pointable tooltip" : "model-slot-detail-row-value"
|
||||
const displayName = name.length > 0 ? name : "blank"
|
||||
const termOfUseUrlLink = termsOfUseUrl.length > 0 ? <a href={termsOfUseUrl} target="_blank" rel="noopener noreferrer" className="body-item-text-small">[{messageBuilderState.getMessage(__filename, "terms_of_use")}]</a> : <></>
|
||||
|
||||
return (
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">[{slotIndex}]</div>
|
||||
<div className={nameValueClass} onClick={() => { nameValueAction(slotIndex) }}>
|
||||
{displayName}
|
||||
<div className="tooltip-text tooltip-text-thin">
|
||||
{messageBuilderState.getMessage(__filename, "rename")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="">{termOfUseUrlLink}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// モデルを構成するファイル
|
||||
const generateFileRow = (title: string, filePath: string) => {
|
||||
const fileValueClass = filePath.length > 0 ? "model-slot-detail-row-value-download tooltip" : "model-slot-detail-row-value"
|
||||
return (
|
||||
<div key={`${title}`} className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">{title}:</div>
|
||||
<div className={fileValueClass} onClick={() => { fileValueAction(filePath) }}>
|
||||
{trimfileName(filePath, 20)}
|
||||
<div className="tooltip-text tooltip-text-thin">
|
||||
{messageBuilderState.getMessage(__filename, "download")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// その他情報欄
|
||||
const generateInfoRow = (info: string) => {
|
||||
return (
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">info: </div>
|
||||
<div className="model-slot-detail-row-value">{info}</div>
|
||||
<div className=""></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
let iconArea = <></>
|
||||
let nameRow = <></>
|
||||
const fileRows = []
|
||||
let infoRow = <></>
|
||||
if (x.voiceChangerType == "RVC") {
|
||||
const slotInfo = x as RVCModelSlot
|
||||
iconArea = generateIconArea(index, slotInfo.iconFile, true)
|
||||
nameRow = generateNameRow(index, slotInfo.name, slotInfo.termsOfUseUrl)
|
||||
fileRows.push(generateFileRow("model", slotInfo.modelFile))
|
||||
fileRows.push(generateFileRow("index", slotInfo.indexFile))
|
||||
infoRow = generateInfoRow(`${slotInfo.f0 ? "f0" : "nof0"}, ${slotInfo.samplingRate}, ${slotInfo.embChannels}, ${slotInfo.modelType}, ${slotInfo.defaultTune}, ${slotInfo.defaultIndexRatio}, ${slotInfo.defaultProtect}`)
|
||||
} else {
|
||||
iconArea = generateIconArea(index, "/assets/icons/blank.png", false)
|
||||
nameRow = generateNameRow(index, "", "")
|
||||
|
||||
}
|
||||
return (
|
||||
<div key={index} className="model-slot">
|
||||
{iconArea}
|
||||
<div className="model-slot-detail">
|
||||
{nameRow}
|
||||
{fileRows}
|
||||
{infoRow}
|
||||
</div>
|
||||
<div className="model-slot-buttons">
|
||||
<div className="model-slot-button" onClick={() => { props.openFileUploader(index) }} >upload</div>
|
||||
<div className="model-slot-button" onClick={() => { props.openSampleDownloader(index) }} >DL sample</div>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="dialog-frame">
|
||||
<div className="dialog-title">Model Slot Configuration</div>
|
||||
<div className="dialog-fixed-size-content">
|
||||
<div className="model-slot-container">
|
||||
{slotRow}
|
||||
</div>
|
||||
{closeButtonRow}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}, [props.screen, serverSetting.serverSetting])
|
||||
|
||||
return screen
|
||||
}
|
123
client/demo/src/components/demo/904-2_SampleDownloader.tsx
Normal file
123
client/demo/src/components/demo/904-2_SampleDownloader.tsx
Normal file
@ -0,0 +1,123 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useAppState } from "../../001_provider/001_AppStateProvider";
|
||||
import { InitialFileUploadSetting } from "@dannadori/voice-changer-client-js";
|
||||
import { useMessageBuilder } from "../../hooks/useMessageBuilder";
|
||||
import { ModelSlotManagerDialogScreen } from "./904_ModelSlotManagerDialog";
|
||||
|
||||
export type SampleDownloaderScreenProps = {
|
||||
screen: ModelSlotManagerDialogScreen
|
||||
targetIndex: number
|
||||
close: () => void
|
||||
backToSlotManager: () => void
|
||||
|
||||
}
|
||||
|
||||
export const SampleDownloaderScreen = (props: SampleDownloaderScreenProps) => {
|
||||
const { serverSetting } = useAppState()
|
||||
const [lang, setLang] = useState<string>("All")
|
||||
const messageBuilderState = useMessageBuilder()
|
||||
useMemo(() => {
|
||||
messageBuilderState.setMessage(__filename, "terms_of_use", { "ja": "利用規約", "en": "terms of use" })
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////////////
|
||||
// Sample Downloader
|
||||
/////////////////////////////////////////
|
||||
const screen = useMemo(() => {
|
||||
if (props.screen != "SampleDownloader") {
|
||||
return <></>
|
||||
}
|
||||
if (!serverSetting.serverSetting.modelSlots) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const langs = serverSetting.serverSetting.sampleModels.reduce((prev, cur) => {
|
||||
if (prev.includes(cur.lang) == false) {
|
||||
prev.push(cur.lang)
|
||||
}
|
||||
return prev
|
||||
}, ["All"] as string[])
|
||||
const langOptions = (
|
||||
langs.map(x => {
|
||||
return <option key={x} value={x}>{x}</option>
|
||||
})
|
||||
)
|
||||
|
||||
const onDownloadSampleClicked = async (id: string) => {
|
||||
serverSetting.fileUploadSettings[props.targetIndex] = {
|
||||
...InitialFileUploadSetting,
|
||||
rvcModel: null,
|
||||
rvcIndex: null,
|
||||
sampleId: id,
|
||||
isSampleMode: true
|
||||
}
|
||||
try {
|
||||
await serverSetting.loadModel(props.targetIndex)
|
||||
} catch (e) {
|
||||
alert(e)
|
||||
}
|
||||
props.backToSlotManager()
|
||||
// setMode("localFile")
|
||||
}
|
||||
const options = (
|
||||
serverSetting.serverSetting.sampleModels.filter(x => { return lang == "All" ? true : x.lang == lang }).map((x, index) => {
|
||||
const termOfUseUrlLink = x.termsOfUseUrl && x.termsOfUseUrl.length > 0 ? <a href={x.termsOfUseUrl} target="_blank" rel="noopener noreferrer" className="body-item-text-small">[{messageBuilderState.getMessage(__filename, "terms_of_use")}]</a> : <></>
|
||||
|
||||
return (
|
||||
<div key={index} className="model-slot">
|
||||
<img src={x.icon} className="model-slot-icon"></img>
|
||||
<div className="model-slot-detail">
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">name:</div>
|
||||
<div className="model-slot-detail-row-value">{x.name}</div>
|
||||
<div className="">{termOfUseUrlLink}</div>
|
||||
</div>
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">info: </div>
|
||||
<div className="model-slot-detail-row-value">{x.modelType},{x.f0 ? "f0" : "nof0"},{x.sampleRate}</div>
|
||||
<div className=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-buttons">
|
||||
<div className="model-slot-button" onClick={() => { onDownloadSampleClicked(x.id) }}>download</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="dialog-frame">
|
||||
<div className="dialog-title">Sample Downloader</div>
|
||||
<div className="dialog-fixed-size-content">
|
||||
<div className="model-slot-header">Select Sample for Slot[{props.targetIndex}] <span onClick={() => {
|
||||
props.backToSlotManager()
|
||||
}} className="model-slot-header-button"><<back</span></div>
|
||||
<div>Lang:
|
||||
<select value={lang} onChange={(e) => { setLang(e.target.value) }}>
|
||||
{langOptions}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="model-slot-container">
|
||||
{options}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}, [
|
||||
props.screen,
|
||||
props.targetIndex,
|
||||
lang,
|
||||
serverSetting.serverSetting
|
||||
])
|
||||
|
||||
|
||||
|
||||
return screen;
|
||||
|
||||
};
|
153
client/demo/src/components/demo/904-3_FileUploader.tsx
Normal file
153
client/demo/src/components/demo/904-3_FileUploader.tsx
Normal file
@ -0,0 +1,153 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useAppState } from "../../001_provider/001_AppStateProvider";
|
||||
import { FileUploadSetting, InitialFileUploadSetting, ModelFileKind, ModelUploadSetting, VoiceChangerType, fileSelector } from "@dannadori/voice-changer-client-js";
|
||||
import { useMessageBuilder } from "../../hooks/useMessageBuilder";
|
||||
import { ModelSlotManagerDialogScreen } from "./904_ModelSlotManagerDialog";
|
||||
import { checkExtention, trimfileName } from "../../utils/utils";
|
||||
|
||||
export type FileUploaderScreenProps = {
|
||||
screen: ModelSlotManagerDialogScreen
|
||||
targetIndex: number
|
||||
close: () => void
|
||||
backToSlotManager: () => void
|
||||
}
|
||||
|
||||
export const FileUploaderScreen = (props: FileUploaderScreenProps) => {
|
||||
const { serverSetting } = useAppState()
|
||||
const [voiceChangerType, setVoiceChangerType] = useState<VoiceChangerType>("RVC")
|
||||
const [uploadSetting, setUploadSetting] = useState<ModelUploadSetting>()
|
||||
const messageBuilderState = useMessageBuilder()
|
||||
|
||||
useMemo(() => {
|
||||
messageBuilderState.setMessage(__filename, "select", { "ja": "ファイル選択", "en": "select file" })
|
||||
messageBuilderState.setMessage(__filename, "upload", { "ja": "アップロード", "en": "upload" })
|
||||
messageBuilderState.setMessage(__filename, "alert-model-ext", {
|
||||
"ja": "ファイルの拡張子は次のモノである必要があります。",
|
||||
"en": "extension of file should be the following."
|
||||
})
|
||||
messageBuilderState.setMessage(__filename, "alert-model-file", {
|
||||
"ja": "ファイルが選択されていません",
|
||||
"en": "file is not selected."
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
setUploadSetting({
|
||||
voiceChangerType: voiceChangerType,
|
||||
slot: props.targetIndex,
|
||||
isSampleMode: false,
|
||||
sampleId: null,
|
||||
files: [],
|
||||
})
|
||||
}, [props.targetIndex, voiceChangerType])
|
||||
|
||||
const screen = useMemo(() => {
|
||||
if (props.screen != "FileUploader") {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const vcTypeOptions = (
|
||||
Object.values(VoiceChangerType).map(x => {
|
||||
return <option key={x} value={x}>{x}</option>
|
||||
})
|
||||
)
|
||||
|
||||
const checkModelSetting = (setting: ModelUploadSetting) => {
|
||||
if (setting.voiceChangerType == "RVC") {
|
||||
// const enough = !!setting.files.find(x => { return x.kind == "rvcModel" }) &&
|
||||
// !!setting.files.find(x => { return x.kind == "rvcIndex" })
|
||||
// return enough
|
||||
const enough = !!setting.files.find(x => { return x.kind == "rvcModel" })
|
||||
return enough
|
||||
}
|
||||
}
|
||||
|
||||
const generateFileRow = (setting: ModelUploadSetting, title: string, kind: ModelFileKind, ext: string[]) => {
|
||||
const selectedFile = setting.files.find(x => { return x.kind == kind })
|
||||
const selectedFilename = selectedFile?.file.name || ""
|
||||
return (
|
||||
<div key={`${title}`} className="file-uploader-file-select-row">
|
||||
<div className="file-uploader-file-select-row-label">{title}:</div>
|
||||
<div className="file-uploader-file-select-row-value" >
|
||||
{trimfileName(selectedFilename, 30)}
|
||||
</div>
|
||||
<div className="file-uploader-file-select-row-button" onClick={async () => {
|
||||
const file = await fileSelector("")
|
||||
if (checkExtention(file.name, ext) == false) {
|
||||
const alertMessage = `${messageBuilderState.getMessage(__filename, "alert-model-ext")} ${ext}`
|
||||
alert(alertMessage)
|
||||
return
|
||||
}
|
||||
if (selectedFile) {
|
||||
selectedFile.file = file
|
||||
} else {
|
||||
setting.files.push({ kind: kind, file: file })
|
||||
}
|
||||
setUploadSetting({ ...setting })
|
||||
}}>
|
||||
{messageBuilderState.getMessage(__filename, "select")}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const generateFileRowsByVCType = (vcType: VoiceChangerType) => {
|
||||
const rows: JSX.Element[] = []
|
||||
if (vcType == "RVC") {
|
||||
rows.push(generateFileRow(uploadSetting!, "Model", "rvcModel", ["pth", "onnx"]))
|
||||
rows.push(generateFileRow(uploadSetting!, "Index", "rvcIndex", ["index", "bin"]))
|
||||
}
|
||||
return rows
|
||||
}
|
||||
const fileRows = generateFileRowsByVCType(voiceChangerType)
|
||||
|
||||
return (
|
||||
<div className="dialog-frame">
|
||||
<div className="dialog-title">File Uploader</div>
|
||||
<div className="dialog-fixed-size-content">
|
||||
<div className="file-uploader-header">Upload Files for Slot[{props.targetIndex}] <span onClick={() => {
|
||||
props.backToSlotManager()
|
||||
}} className="file-uploader-header-button"><<back</span></div>
|
||||
<div className="file-uploader-voice-changer-select" >VoiceChangerType:
|
||||
<select value={voiceChangerType} onChange={(e) => {
|
||||
setVoiceChangerType(e.target.value as VoiceChangerType)
|
||||
}}>
|
||||
{vcTypeOptions}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="file-uploader-file-select-container">
|
||||
{fileRows}
|
||||
</div>
|
||||
<div className="file-uploader-file-select-upload-button-container">
|
||||
<div className="file-uploader-file-select-upload-button" onClick={() => {
|
||||
if (!uploadSetting) {
|
||||
return
|
||||
}
|
||||
if (checkModelSetting(uploadSetting)) {
|
||||
serverSetting.uploadModel(uploadSetting)
|
||||
} else {
|
||||
const errorMessage = messageBuilderState.getMessage(__filename, "alert-model-file")
|
||||
alert(errorMessage)
|
||||
}
|
||||
}}>
|
||||
{messageBuilderState.getMessage(__filename, "upload")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}, [
|
||||
props.screen,
|
||||
props.targetIndex,
|
||||
voiceChangerType,
|
||||
uploadSetting,
|
||||
serverSetting.uploadModel
|
||||
])
|
||||
|
||||
|
||||
|
||||
return screen;
|
||||
|
||||
};
|
@ -1,9 +1,8 @@
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useGuiState } from "./001_GuiStateProvider";
|
||||
import { useAppState } from "../../001_provider/001_AppStateProvider";
|
||||
import { InitialFileUploadSetting, fileSelector } from "@dannadori/voice-changer-client-js";
|
||||
import { useMessageBuilder } from "../../hooks/useMessageBuilder";
|
||||
|
||||
import { MainScreen } from "./904-1_MainScreen";
|
||||
import { SampleDownloaderScreen } from "./904-2_SampleDownloader";
|
||||
import { FileUploaderScreen } from "./904-3_FileUploader";
|
||||
|
||||
export type uploadData = {
|
||||
slot: number
|
||||
@ -11,365 +10,60 @@ export type uploadData = {
|
||||
index: File | null
|
||||
}
|
||||
|
||||
const Mode = {
|
||||
export const ModelSlotSettingMode = {
|
||||
"localFile": "localFile",
|
||||
"fromNet": "fromNet"
|
||||
} as const
|
||||
type Mode = typeof Mode[keyof typeof Mode]
|
||||
export type ModelSlotSettingMode = typeof ModelSlotSettingMode[keyof typeof ModelSlotSettingMode]
|
||||
|
||||
export const ModelSlotManagerDialogScreen = {
|
||||
"Main": "Main",
|
||||
"SampleDownloader": "SampleDownloader",
|
||||
"FileUploader": "FileUploader"
|
||||
} as const
|
||||
export type ModelSlotManagerDialogScreen = typeof ModelSlotManagerDialogScreen[keyof typeof ModelSlotManagerDialogScreen]
|
||||
|
||||
export const ModelSlotManagerDialog = () => {
|
||||
const guiState = useGuiState()
|
||||
const { serverSetting } = useAppState()
|
||||
const [uploadData, setUploadData] = useState<uploadData | null>(null)
|
||||
const [mode, setMode] = useState<Mode>("localFile")
|
||||
const [fromNetTargetIndex, setFromNetTargetIndex] = useState<number>(0)
|
||||
const [lang, setLang] = useState<string>("All")
|
||||
const messageBuilderState = useMessageBuilder()
|
||||
|
||||
useMemo(() => {
|
||||
messageBuilderState.setMessage(__filename, "change_icon", { "ja": "アイコン変更", "en": "chage icon" })
|
||||
messageBuilderState.setMessage(__filename, "rename", { "ja": "リネーム", "en": "rename" })
|
||||
messageBuilderState.setMessage(__filename, "download", { "ja": "ダウンロード", "en": "download" })
|
||||
messageBuilderState.setMessage(__filename, "terms_of_use", { "ja": "利用規約", "en": "terms of use" })
|
||||
}, [])
|
||||
/////////////////////////////////////////
|
||||
// Slot Manager
|
||||
/////////////////////////////////////////
|
||||
const localFileContent = useMemo(() => {
|
||||
if (mode != "localFile") {
|
||||
return <></>
|
||||
}
|
||||
if (!serverSetting.serverSetting.modelSlots) {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const checkExtention = (filename: string, acceptExtentions: string[]) => {
|
||||
const ext = filename.split('.').pop();
|
||||
if (!ext) {
|
||||
return false
|
||||
}
|
||||
return acceptExtentions.includes(ext)
|
||||
}
|
||||
|
||||
const onRVCModelLoadClicked = async (slot: number) => {
|
||||
const file = await fileSelector("")
|
||||
if (checkExtention(file.name, ["pth", "onnx"]) == false) {
|
||||
alert(`モデルファイルの拡張子は".pth", ".onnx"である必要があります。`)
|
||||
return
|
||||
}
|
||||
if (uploadData?.slot == slot) {
|
||||
setUploadData({ ...uploadData, model: file })
|
||||
} else {
|
||||
const newUploadData = {
|
||||
slot: slot,
|
||||
model: file,
|
||||
index: null
|
||||
}
|
||||
setUploadData(newUploadData)
|
||||
}
|
||||
}
|
||||
const onRVCIndexLoadClicked = async (slot: number) => {
|
||||
const file = await fileSelector("")
|
||||
if (checkExtention(file.name, ["index", "bin"]) == false) {
|
||||
alert(`モデルファイルの拡張子は".pth"である必要があります。`)
|
||||
return
|
||||
}
|
||||
if (uploadData?.slot == slot) {
|
||||
setUploadData({ ...uploadData, index: file })
|
||||
} else {
|
||||
const newUploadData = {
|
||||
slot: slot,
|
||||
model: null,
|
||||
index: file
|
||||
}
|
||||
setUploadData(newUploadData)
|
||||
}
|
||||
}
|
||||
const onUploadClicked = async () => {
|
||||
if (!uploadData) {
|
||||
return
|
||||
}
|
||||
if (!uploadData.model) {
|
||||
return
|
||||
}
|
||||
serverSetting.fileUploadSettings[uploadData.slot] = {
|
||||
...InitialFileUploadSetting,
|
||||
rvcModel: { file: uploadData.model },
|
||||
rvcIndex: uploadData.index ? { file: uploadData.index } : null,
|
||||
sampleId: null,
|
||||
isSampleMode: false
|
||||
}
|
||||
serverSetting.setFileUploadSetting(uploadData.slot, {
|
||||
...serverSetting.fileUploadSettings[uploadData.slot]
|
||||
})
|
||||
await serverSetting.loadModel(uploadData.slot)
|
||||
setUploadData(null)
|
||||
}
|
||||
const onClearClicked = () => {
|
||||
setUploadData(null)
|
||||
}
|
||||
const onOpenSampleDownloadDialog = (index: number) => {
|
||||
setMode("fromNet")
|
||||
setFromNetTargetIndex(index)
|
||||
}
|
||||
|
||||
|
||||
const slots = serverSetting.serverSetting.modelSlots.map((x, index) => {
|
||||
let modelFileName = ""
|
||||
if (uploadData?.slot == index) {
|
||||
modelFileName = (uploadData.model?.name || "").replace(/^.*[\\\/]/, '')
|
||||
} else if (x.modelFile && x.modelFile.length > 0) {
|
||||
modelFileName = x.modelFile.replace(/^.*[\\\/]/, '')
|
||||
}
|
||||
if (modelFileName.length > 20) {
|
||||
modelFileName = modelFileName.substring(0, 20) + "..."
|
||||
}
|
||||
|
||||
let indexFileName = ""
|
||||
if (uploadData?.slot == index) {
|
||||
indexFileName = (uploadData.index?.name || "").replace(/^.*[\\\/]/, '')
|
||||
} else if (x.indexFile && x.indexFile.length > 0) {
|
||||
indexFileName = x.indexFile.replace(/^.*[\\\/]/, '')
|
||||
}
|
||||
if (indexFileName.length > 20) {
|
||||
indexFileName = indexFileName.substring(0, 20) + "..."
|
||||
}
|
||||
|
||||
const isRegisterd = modelFileName.length > 0 ? true : false
|
||||
const name = x.name && x.name.length > 0 ? x.name : isRegisterd ? modelFileName : "blank"
|
||||
const termOfUseUrlLink = x.termsOfUseUrl && x.termsOfUseUrl.length > 0 ? <a href={x.termsOfUseUrl} target="_blank" rel="noopener noreferrer" className="body-item-text-small">[{messageBuilderState.getMessage(__filename, "terms_of_use")}]</a> : <></>
|
||||
|
||||
const nameValueClass = isRegisterd ? "model-slot-detail-row-value-pointable" : "model-slot-detail-row-value"
|
||||
const nameValueAction = isRegisterd ? async (index: number) => {
|
||||
const p = new Promise<string>((resolve) => {
|
||||
guiState.setTextInputResolve({ resolve: resolve })
|
||||
})
|
||||
|
||||
guiState.stateControls.showTextInputCheckbox.updateState(true)
|
||||
const text = await p;
|
||||
if (text.length > 0) {
|
||||
console.log("input text:", text)
|
||||
await serverSetting.updateModelInfo(index, "name", text)
|
||||
}
|
||||
} : async (_index: number) => { }
|
||||
const iconClass = isRegisterd ? "model-slot-icon-pointable" : "model-slot-icon"
|
||||
const iconAction = isRegisterd ? async (index: number) => {
|
||||
const file = await fileSelector("")
|
||||
if (checkExtention(file.name, ["png", "jpg", "jpeg", "gif"]) == false) {
|
||||
alert(`モデルファイルの拡張子は".png", ".jpg", ".jpeg", ".gif"である必要があります。`)
|
||||
return
|
||||
}
|
||||
await serverSetting.uploadAssets(index, "iconFile", file)
|
||||
} : async (_index: number) => { }
|
||||
|
||||
const fileValueClass = (uploadData?.slot == index) ? "model-slot-detail-row-value-edit" : isRegisterd ? "model-slot-detail-row-value-download" : "model-slot-detail-row-value"
|
||||
const fileValueAction = (uploadData?.slot == index) ? (_url: string) => {
|
||||
} : isRegisterd ? (url: string) => {
|
||||
console.log("Download url:::", url)
|
||||
const link = document.createElement("a")
|
||||
link.href = "/" + url
|
||||
link.download = url.replace(/^.*[\\\/]/, '')
|
||||
link.click()
|
||||
} : (_url: string) => { }
|
||||
|
||||
const iconUrl = x.modelFile && x.modelFile.length > 0 ? (x.iconFile && x.iconFile.length > 0 ? x.iconFile : "/assets/icons/noimage.png") : "/assets/icons/blank.png"
|
||||
|
||||
return (
|
||||
<div key={index} className="model-slot">
|
||||
<div className="tooltip">
|
||||
<img src={iconUrl} className={iconClass} onClick={() => { iconAction(index) }} />
|
||||
<div className="tooltip-text tooltip-text-thin tooltip-text-lower">
|
||||
{messageBuilderState.getMessage(__filename, "change_icon")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-detail">
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">[{index}]</div>
|
||||
<div className={nameValueClass + " tooltip"} onClick={() => { nameValueAction(index) }}>
|
||||
{name}
|
||||
<div className="tooltip-text tooltip-text-thin">
|
||||
{messageBuilderState.getMessage(__filename, "rename")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="">{termOfUseUrlLink}</div>
|
||||
</div>
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">model:</div>
|
||||
<div className={fileValueClass + " tooltip"} onClick={() => { fileValueAction(x.modelFile) }}>
|
||||
{modelFileName}
|
||||
<div className="tooltip-text tooltip-text-thin">
|
||||
{messageBuilderState.getMessage(__filename, "download")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-button model-slot-detail-row-button" onClick={() => { onRVCModelLoadClicked(index) }}>select</div>
|
||||
</div>
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">index:</div>
|
||||
<div className={fileValueClass + " tooltip"} onClick={() => { fileValueAction(x.indexFile) }}>
|
||||
{indexFileName}
|
||||
<div className="tooltip-text tooltip-text-thin">
|
||||
{messageBuilderState.getMessage(__filename, "download")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-button model-slot-detail-row-button" onClick={() => { onRVCIndexLoadClicked(index) }}>select</div>
|
||||
</div>
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">info: </div>
|
||||
<div className="model-slot-detail-row-value">{x.f0 ? "f0" : "nof0"}, {x.samplingRate}, {x.embChannels}, {x.modelType}, {x.defaultTune}, {x.defaultIndexRatio}, {x.defaultProtect}</div>
|
||||
<div className=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-buttons">
|
||||
{(uploadData?.slot == index) && (uploadData.model != null) ?
|
||||
<div></div> :
|
||||
<div className="model-slot-button" onClick={() => { onOpenSampleDownloadDialog(index) }}>DL sample>> </div>
|
||||
}
|
||||
|
||||
{(uploadData?.slot == index) && (uploadData.model != null) ?
|
||||
<div className="model-slot-button" onClick={onUploadClicked}>upload</div> : <div></div>
|
||||
}
|
||||
{(uploadData?.slot == index) && (uploadData.model != null || uploadData.index != null) ?
|
||||
<div className="model-slot-button" onClick={onClearClicked}>clear</div> : <div></div>
|
||||
}
|
||||
{(uploadData?.slot == index) && (uploadData.model != null) ?
|
||||
<div>{serverSetting.uploadProgress.toFixed(1)}%</div> : <div></div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="model-slot-container">
|
||||
{slots}
|
||||
</div>
|
||||
);
|
||||
|
||||
}, [
|
||||
mode,
|
||||
serverSetting.serverSetting.modelSlots,
|
||||
serverSetting.fileUploadSettings,
|
||||
serverSetting.uploadProgress,
|
||||
serverSetting.setFileUploadSetting,
|
||||
serverSetting.loadModel,
|
||||
uploadData
|
||||
])
|
||||
|
||||
|
||||
/////////////////////////////////////////
|
||||
// Sample Downloader
|
||||
/////////////////////////////////////////
|
||||
const fromNetContent = useMemo(() => {
|
||||
if (mode != "fromNet") {
|
||||
return <></>
|
||||
}
|
||||
|
||||
const langs = serverSetting.serverSetting.sampleModels.reduce((prev, cur) => {
|
||||
if (prev.includes(cur.lang) == false) {
|
||||
prev.push(cur.lang)
|
||||
}
|
||||
return prev
|
||||
}, ["All"] as string[])
|
||||
const langOptions = (
|
||||
langs.map(x => {
|
||||
return <option key={x} value={x}>{x}</option>
|
||||
})
|
||||
)
|
||||
|
||||
const onDownloadSampleClicked = async (id: string) => {
|
||||
serverSetting.fileUploadSettings[fromNetTargetIndex] = {
|
||||
...InitialFileUploadSetting,
|
||||
rvcModel: null,
|
||||
rvcIndex: null,
|
||||
sampleId: id,
|
||||
isSampleMode: true
|
||||
}
|
||||
try {
|
||||
await serverSetting.loadModel(fromNetTargetIndex)
|
||||
} catch (e) {
|
||||
alert(e)
|
||||
}
|
||||
setMode("localFile")
|
||||
}
|
||||
const options = (
|
||||
serverSetting.serverSetting.sampleModels.filter(x => { return lang == "All" ? true : x.lang == lang }).map((x, index) => {
|
||||
const termOfUseUrlLink = x.termsOfUseUrl && x.termsOfUseUrl.length > 0 ? <a href={x.termsOfUseUrl} target="_blank" rel="noopener noreferrer" className="body-item-text-small">[{messageBuilderState.getMessage(__filename, "terms_of_use")}]</a> : <></>
|
||||
|
||||
return (
|
||||
<div key={index} className="model-slot">
|
||||
<img src={x.icon} className="model-slot-icon"></img>
|
||||
<div className="model-slot-detail">
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">name:</div>
|
||||
<div className="model-slot-detail-row-value">{x.name}</div>
|
||||
<div className="">{termOfUseUrlLink}</div>
|
||||
</div>
|
||||
<div className="model-slot-detail-row">
|
||||
<div className="model-slot-detail-row-label">info: </div>
|
||||
<div className="model-slot-detail-row-value">{x.modelType},{x.f0 ? "f0" : "nof0"},{x.sampleRate}</div>
|
||||
<div className=""></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-buttons">
|
||||
<div className="model-slot-button" onClick={() => { onDownloadSampleClicked(x.id) }}>download</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<div className="model-slot-header">Select Sample for Slot[{fromNetTargetIndex}] <span onClick={() => { setMode("localFile") }} className="model-slot-header-button"><<back</span></div>
|
||||
<div>Lang:
|
||||
<select value={lang} onChange={(e) => { setLang(e.target.value) }}>
|
||||
{langOptions}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="model-slot-container">
|
||||
{options}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
|
||||
}, [
|
||||
mode,
|
||||
fromNetTargetIndex,
|
||||
lang
|
||||
])
|
||||
const [screen, setScreen] = useState<ModelSlotManagerDialogScreen>("Main")
|
||||
const [targetIndex, setTargetIndex] = useState<number>(0)
|
||||
|
||||
|
||||
const dialog = useMemo(() => {
|
||||
const closeButtonRow = (
|
||||
<div className="body-row split-3-4-3 left-padding-1">
|
||||
<div className="body-item-text">
|
||||
</div>
|
||||
<div className="body-button-container body-button-container-space-around">
|
||||
<div className="body-button" onClick={() => { guiState.stateControls.showModelSlotManagerCheckbox.updateState(false) }} >close</div>
|
||||
</div>
|
||||
<div className="body-item-text"></div>
|
||||
</div>
|
||||
const close = () => { guiState.stateControls.showModelSlotManagerCheckbox.updateState(false) }
|
||||
const openSampleDownloader = (index: number) => { setTargetIndex(index); setScreen("SampleDownloader") }
|
||||
const openFileUploader = (index: number) => { setTargetIndex(index); setScreen("FileUploader") }
|
||||
const backToSlotManager = () => { setScreen("Main") }
|
||||
const mainScreen = (
|
||||
<MainScreen
|
||||
screen={screen}
|
||||
close={close}
|
||||
openSampleDownloader={openSampleDownloader}
|
||||
openFileUploader={openFileUploader} />
|
||||
)
|
||||
const sampleDownloaderScreen = (
|
||||
<SampleDownloaderScreen
|
||||
screen={screen}
|
||||
targetIndex={targetIndex}
|
||||
close={close}
|
||||
backToSlotManager={backToSlotManager} />
|
||||
)
|
||||
const fileUploaderScreen = (
|
||||
<FileUploaderScreen
|
||||
screen={screen}
|
||||
targetIndex={targetIndex}
|
||||
close={close}
|
||||
backToSlotManager={backToSlotManager} />
|
||||
)
|
||||
return (
|
||||
<div className="dialog-frame">
|
||||
<div className="dialog-title">{mode == "localFile" ? "Model Slot Configuration" : "Sample Downloader"}</div>
|
||||
<div className="dialog-fixed-size-content">
|
||||
{localFileContent}
|
||||
{fromNetContent}
|
||||
{closeButtonRow}
|
||||
{mainScreen}
|
||||
{sampleDownloaderScreen}
|
||||
{fileUploaderScreen}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}, [screen, targetIndex])
|
||||
|
||||
}, [
|
||||
localFileContent,
|
||||
fromNetContent,
|
||||
fromNetTargetIndex,
|
||||
]);
|
||||
|
||||
return dialog;
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useGuiState } from "./001_GuiStateProvider";
|
||||
import { useAppState } from "../../001_provider/001_AppStateProvider";
|
||||
import { MergeElement, ModelType } from "@dannadori/voice-changer-client-js";
|
||||
import { MergeElement, RVCModelType } from "@dannadori/voice-changer-client-js";
|
||||
|
||||
|
||||
export const MergeLabDialog = () => {
|
||||
@ -36,7 +36,7 @@ export const MergeLabDialog = () => {
|
||||
prev[key] = val
|
||||
}
|
||||
return prev
|
||||
}, {} as { [key: string]: { type: ModelType, samplingRate: number, embChannels: number } })
|
||||
}, {} as { [key: string]: { type: RVCModelType, samplingRate: number, embChannels: number } })
|
||||
|
||||
}, [newSlotChangeKey])
|
||||
|
||||
|
@ -732,9 +732,11 @@ body {
|
||||
.dialog-fixed-size-content {
|
||||
width: 90%;
|
||||
max-height: 70vh;
|
||||
.model-slot-header {
|
||||
.model-slot-header,
|
||||
.file-uploader-header {
|
||||
font-weight: 700;
|
||||
.model-slot-header-button {
|
||||
.model-slot-header-button,
|
||||
.file-uploader-header-button {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
user-select: none;
|
||||
@ -849,6 +851,59 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-uploader-voice-changer-select {
|
||||
font-size: 1rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.file-uploader-file-select-container {
|
||||
font-size: 0.9rem;
|
||||
padding-left: 1rem;
|
||||
.file-uploader-file-select-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 0.2rem;
|
||||
.file-uploader-file-select-row-label {
|
||||
width: 5rem;
|
||||
}
|
||||
.file-uploader-file-select-row-value {
|
||||
width: 20rem;
|
||||
color: #f00;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.file-uploader-file-select-row-button {
|
||||
user-select: none;
|
||||
border: solid 1px #999;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
&:hover {
|
||||
border: solid 1px #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.file-uploader-file-select-upload-button-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1rem;
|
||||
justify-content: center;
|
||||
.file-uploader-file-select-upload-button {
|
||||
width: 8rem;
|
||||
user-select: none;
|
||||
border: solid 1px #999;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
padding: 1px;
|
||||
&:hover {
|
||||
border: solid 1px #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
16
client/demo/src/utils/utils.ts
Normal file
16
client/demo/src/utils/utils.ts
Normal file
@ -0,0 +1,16 @@
|
||||
export const trimfileName = (name: string, length: number) => {
|
||||
const trimmedName = name.replace(/^.*[\\\/]/, '')
|
||||
if (trimmedName.length > length) {
|
||||
return trimmedName.substring(0, length) + "..."
|
||||
} else {
|
||||
return trimmedName
|
||||
}
|
||||
}
|
||||
|
||||
export const checkExtention = (filename: string, acceptExtentions: string[]) => {
|
||||
const ext = filename.split('.').pop();
|
||||
if (!ext) {
|
||||
return false
|
||||
}
|
||||
return acceptExtentions.includes(ext)
|
||||
}
|
@ -16,6 +16,19 @@ export const ClientType = {
|
||||
} as const
|
||||
export type ClientType = typeof ClientType[keyof typeof ClientType]
|
||||
|
||||
|
||||
export const VoiceChangerType = {
|
||||
"MMVCv15": "MMVCv15",
|
||||
"MMVCv13": "MMVCv13",
|
||||
"so-vits-svc-40": "so-vits-svc-40",
|
||||
"so-vits-svc-40_c": "so-vits-svc-40_c",
|
||||
"so-vits-svc-40v2": "so-vits-svc-40v2",
|
||||
"DDSP-SVC": "DDSP-SVC",
|
||||
"RVC": "RVC"
|
||||
|
||||
} as const
|
||||
export type VoiceChangerType = typeof VoiceChangerType[keyof typeof VoiceChangerType]
|
||||
|
||||
///////////////////////
|
||||
// サーバセッティング
|
||||
///////////////////////
|
||||
@ -70,7 +83,7 @@ export const DiffMethod = {
|
||||
} as const
|
||||
export type DiffMethod = typeof DiffMethod[keyof typeof DiffMethod]
|
||||
|
||||
export const ModelType = {
|
||||
export const RVCModelType = {
|
||||
"pyTorchRVC": "pyTorchRVC",
|
||||
"pyTorchRVCNono": "pyTorchRVCNono",
|
||||
"pyTorchRVCv2": "pyTorchRVCv2",
|
||||
@ -80,7 +93,7 @@ export const ModelType = {
|
||||
"onnxRVC": "onnxRVC",
|
||||
"onnxRVCNono": "onnxRVCNono",
|
||||
} as const
|
||||
export type ModelType = typeof ModelType[keyof typeof ModelType]
|
||||
export type RVCModelType = typeof RVCModelType[keyof typeof RVCModelType]
|
||||
|
||||
export const ServerSettingKey = {
|
||||
"srcId": "srcId",
|
||||
@ -198,21 +211,7 @@ export type VoiceChangerServerSetting = {
|
||||
}
|
||||
|
||||
type ModelSlot = {
|
||||
modelFile: string
|
||||
featureFile: string,
|
||||
indexFile: string,
|
||||
|
||||
defaultTune: number,
|
||||
defaultIndexRatio: number,
|
||||
defaultProtect: number,
|
||||
|
||||
modelType: ModelType,
|
||||
embChannels: number,
|
||||
f0: boolean,
|
||||
samplingRate: number
|
||||
deprecated: boolean
|
||||
|
||||
|
||||
voiceChangerType: VoiceChangerType
|
||||
name: string,
|
||||
description: string,
|
||||
credit: string,
|
||||
@ -220,6 +219,22 @@ type ModelSlot = {
|
||||
iconFile: string
|
||||
}
|
||||
|
||||
export type RVCModelSlot = ModelSlot & {
|
||||
modelFile: string
|
||||
indexFile: string,
|
||||
defaultIndexRatio: number,
|
||||
defaultProtect: number,
|
||||
defaultTune: number,
|
||||
modelType: RVCModelType,
|
||||
|
||||
embChannels: number,
|
||||
f0: boolean,
|
||||
samplingRate: number
|
||||
deprecated: boolean
|
||||
}
|
||||
|
||||
export type ModelSlotUnion = RVCModelSlot
|
||||
|
||||
type ServerAudioDevice = {
|
||||
kind: "audioinput" | "audiooutput",
|
||||
index: number,
|
||||
@ -233,7 +248,7 @@ export type ServerInfo = VoiceChangerServerSetting & {
|
||||
pyTorchModelFile: string,
|
||||
onnxModelFile: string,
|
||||
onnxExecutionProviders: OnnxExecutionProvider[]
|
||||
modelSlots: ModelSlot[]
|
||||
modelSlots: ModelSlotUnion[]
|
||||
serverAudioInputDevices: ServerAudioDevice[]
|
||||
serverAudioOutputDevices: ServerAudioDevice[]
|
||||
sampleModels: RVCSampleModel[]
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { useState, useMemo, useEffect } from "react"
|
||||
import { VoiceChangerServerSetting, ServerInfo, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA, ClientType, DefaultServerSetting_MMVCv13, DefaultServerSetting_MMVCv15, DefaultServerSetting_so_vits_svc_40v2, DefaultServerSetting_so_vits_svc_40, DefaultServerSetting_so_vits_svc_40_c, DefaultServerSetting_RVC, OnnxExporterInfo, DefaultServerSetting_DDSP_SVC, MAX_MODEL_SLOT_NUM, Framework, MergeModelRequest } from "../const"
|
||||
import { VoiceChangerServerSetting, ServerInfo, ServerSettingKey, INDEXEDDB_KEY_SERVER, INDEXEDDB_KEY_MODEL_DATA, ClientType, DefaultServerSetting_MMVCv13, DefaultServerSetting_MMVCv15, DefaultServerSetting_so_vits_svc_40v2, DefaultServerSetting_so_vits_svc_40, DefaultServerSetting_so_vits_svc_40_c, DefaultServerSetting_RVC, OnnxExporterInfo, DefaultServerSetting_DDSP_SVC, MAX_MODEL_SLOT_NUM, Framework, MergeModelRequest, VoiceChangerType } from "../const"
|
||||
import { VoiceChangerClient } from "../VoiceChangerClient"
|
||||
import { useIndexedDB } from "./useIndexedDB"
|
||||
import { ModelLoadException } from "../exceptions"
|
||||
@ -17,6 +17,48 @@ export const ModelAssetName = {
|
||||
export type ModelAssetName = typeof ModelAssetName[keyof typeof ModelAssetName]
|
||||
|
||||
|
||||
export const ModelFileKind = {
|
||||
"mmvcv13Config": "mmvcv13Config",
|
||||
"mmvcv13Model": "mmvcv13Model",
|
||||
"mmvcv15Config": "mmvcv15Config",
|
||||
"mmvcv15Model": "mmvcv15Model",
|
||||
|
||||
"soVitsSvc40Config": "soVitsSvc40Config",
|
||||
"soVitsSvc40Model": "soVitsSvc40Model",
|
||||
"soVitsSvc40Cluster": "soVitsSvc40Cluster",
|
||||
|
||||
"rvcModel": "rvcModel",
|
||||
"rvcIndex": "rvcIndex",
|
||||
|
||||
"ddspSvcModel": "ddspSvcModel",
|
||||
"ddspSvcModelConfig": "ddspSvcModelConfig",
|
||||
"ddspSvcDiffusion": "ddspSvcDiffusion",
|
||||
"ddspSvcDiffusionConfig": "ddspSvcDiffusionConfig",
|
||||
|
||||
} as const
|
||||
export type ModelFileKind = typeof ModelFileKind[keyof typeof ModelFileKind]
|
||||
|
||||
export type ModelFile = {
|
||||
file: File,
|
||||
kind: ModelFileKind
|
||||
}
|
||||
|
||||
export type ModelUploadSetting = {
|
||||
voiceChangerType: VoiceChangerType,
|
||||
slot: number
|
||||
isSampleMode: boolean
|
||||
sampleId: string | null
|
||||
|
||||
files: ModelFile[]
|
||||
}
|
||||
export type ModelFileForServer = Omit<ModelFile, "file"> & {
|
||||
name: string,
|
||||
kind: ModelFileKind
|
||||
}
|
||||
export type ModelUploadSettingForServer = Omit<ModelUploadSetting, "files"> & {
|
||||
files: ModelFileForServer[]
|
||||
}
|
||||
|
||||
export type FileUploadSetting = {
|
||||
isHalf: boolean
|
||||
uploaded: boolean
|
||||
@ -105,6 +147,7 @@ export type ServerSettingState = {
|
||||
fileUploadSettings: FileUploadSetting[]
|
||||
setFileUploadSetting: (slot: number, val: FileUploadSetting) => void
|
||||
loadModel: (slot: number) => Promise<void>
|
||||
uploadModel: (setting: ModelUploadSetting) => Promise<void>
|
||||
uploadProgress: number
|
||||
isUploading: boolean
|
||||
|
||||
@ -259,7 +302,46 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
|
||||
}
|
||||
}, [props.voiceChangerClient])
|
||||
|
||||
// 新しいアップローダ
|
||||
const uploadModel = useMemo(() => {
|
||||
return async (setting: ModelUploadSetting) => {
|
||||
if (!props.voiceChangerClient) {
|
||||
return
|
||||
}
|
||||
|
||||
setUploadProgress(0)
|
||||
setIsUploading(true)
|
||||
|
||||
|
||||
if (setting.isSampleMode == false) {
|
||||
const progRate = 1 / setting.files.length
|
||||
for (let i = 0; i < setting.files.length; i++) {
|
||||
const progOffset = 100 * i * progRate
|
||||
await _uploadFile2(setting.files[i].file, (progress: number, _end: boolean) => {
|
||||
setUploadProgress(progress * progRate + progOffset)
|
||||
})
|
||||
}
|
||||
}
|
||||
const params: ModelUploadSettingForServer = {
|
||||
...setting, files: setting.files.map((f) => { return { name: f.file.name, kind: f.kind } })
|
||||
}
|
||||
|
||||
const loadPromise = props.voiceChangerClient.loadModel(
|
||||
0,
|
||||
false,
|
||||
JSON.stringify(params),
|
||||
)
|
||||
await loadPromise
|
||||
|
||||
setUploadProgress(0)
|
||||
setIsUploading(false)
|
||||
reloadServerInfo()
|
||||
|
||||
}
|
||||
}, [props.voiceChangerClient])
|
||||
|
||||
|
||||
// 古いアップローダ(新GUIへ以降まで、当分残しておく。)
|
||||
const loadModel = useMemo(() => {
|
||||
return async (slot: number) => {
|
||||
const fileUploadSetting = fileUploadSettings[slot]
|
||||
@ -571,6 +653,7 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
|
||||
fileUploadSettings,
|
||||
setFileUploadSetting,
|
||||
loadModel,
|
||||
uploadModel,
|
||||
uploadProgress,
|
||||
isUploading,
|
||||
getOnnx,
|
||||
|
@ -88,7 +88,12 @@ class MMVC_Rest_Fileuploader:
|
||||
try:
|
||||
paramDict = json.loads(params)
|
||||
print("paramDict", paramDict)
|
||||
|
||||
if paramDict["voiceChangerType"]:
|
||||
# 新しいアップローダ用
|
||||
print("NEW UPLOADER")
|
||||
props: LoadModelParams = LoadModelParams(slot=slot, isHalf=isHalf, params=paramDict)
|
||||
else:
|
||||
# 古いアップローダ用
|
||||
# Change Filepath
|
||||
newFilesDict = {}
|
||||
for key, val in paramDict["files"].items():
|
||||
@ -100,8 +105,7 @@ class MMVC_Rest_Fileuploader:
|
||||
shutil.move(uploadPath, storePath)
|
||||
newFilesDict[key] = storePath
|
||||
paramDict["files"] = newFilesDict
|
||||
|
||||
props: LoadModelParams = LoadModelParams(slot=slot, isHalf=isHalf, params=paramDict)
|
||||
props = LoadModelParams(slot=slot, isHalf=isHalf, params=paramDict)
|
||||
|
||||
info = self.voiceChangerManager.loadModel(props)
|
||||
json_compatible_item_data = jsonable_encoder(info)
|
||||
|
@ -30,7 +30,7 @@ from voice_changer.RVC.ModelSlotGenerator import (
|
||||
)
|
||||
from voice_changer.RVC.RVCSettings import RVCSettings
|
||||
from voice_changer.RVC.embedder.EmbedderManager import EmbedderManager
|
||||
from voice_changer.utils.LoadModelParams import LoadModelParams
|
||||
from voice_changer.utils.LoadModelParams import LoadModelParams, LoadModelParams2
|
||||
from voice_changer.utils.VoiceChangerModel import AudioInOut
|
||||
from voice_changer.utils.VoiceChangerParams import VoiceChangerParams
|
||||
from voice_changer.RVC.onnxExporter.export2onnx import export2onnx
|
||||
@ -90,6 +90,27 @@ class RVC:
|
||||
shutil.move(file, dst)
|
||||
return dst
|
||||
|
||||
@classmethod
|
||||
def loadModel2(cls, props: LoadModelParams2):
|
||||
slotInfo: RVCModelSlot = RVCModelSlot()
|
||||
for file in props.files:
|
||||
if file.kind == "rvcModel":
|
||||
slotInfo.modelFile = file.name
|
||||
elif file.kind == "rvcIndex":
|
||||
slotInfo.indexFile = file.name
|
||||
slotInfo.defaultTune = 0
|
||||
slotInfo.defaultIndexRatio = 0
|
||||
slotInfo.defaultProtect = 0.5
|
||||
slotInfo.isONNX = slotInfo.modelFile.endswith(".onnx")
|
||||
slotInfo.name = os.path.splitext(os.path.basename(slotInfo.modelFile))[0]
|
||||
# slotInfo.iconFile = "/assets/icons/noimage.png"
|
||||
|
||||
if slotInfo.isONNX:
|
||||
_setInfoByONNX(slotInfo)
|
||||
else:
|
||||
_setInfoByPytorch(slotInfo)
|
||||
return slotInfo
|
||||
|
||||
def loadModel(self, props: LoadModelParams):
|
||||
target_slot_idx = props.slot
|
||||
params = props.params
|
||||
|
@ -1,10 +1,12 @@
|
||||
import os
|
||||
import shutil
|
||||
import numpy as np
|
||||
from downloader.SampleDownloader import downloadSample, getSampleInfos
|
||||
from voice_changer.Local.ServerDevice import ServerDevice, ServerDeviceCallbacks
|
||||
from voice_changer.ModelSlotManager import ModelSlotManager
|
||||
from voice_changer.VoiceChanger import VoiceChanger
|
||||
from const import ModelType
|
||||
from voice_changer.utils.LoadModelParams import LoadModelParams
|
||||
from const import UPLOAD_DIR, ModelType
|
||||
from voice_changer.utils.LoadModelParams import LoadModelParamFile, LoadModelParams, LoadModelParams2
|
||||
from voice_changer.utils.VoiceChangerModel import AudioInOut
|
||||
from voice_changer.utils.VoiceChangerParams import VoiceChangerParams
|
||||
from dataclasses import dataclass, asdict
|
||||
@ -82,12 +84,37 @@ class VoiceChangerManager(ServerDeviceCallbacks):
|
||||
|
||||
def loadModel(self, props: LoadModelParams):
|
||||
paramDict = props.params
|
||||
if "sampleId" in paramDict and len(paramDict["sampleId"]) > 0:
|
||||
if paramDict["sampleId"] is not None:
|
||||
# サンプルダウンロード
|
||||
downloadSample(self.params.sample_mode, paramDict["sampleId"], self.params.model_dir, props.slot, {"useIndex": paramDict["rvcIndexDownload"]})
|
||||
self.modelSlotManager.getAllSlotInfo(reload=True)
|
||||
info = {"status": "OK"}
|
||||
return info
|
||||
elif paramDict["voiceChangerType"]:
|
||||
# 新しいアップローダ
|
||||
# Dataを展開
|
||||
params = LoadModelParams2(**paramDict)
|
||||
params.files = [LoadModelParamFile(**x) for x in paramDict["files"]]
|
||||
# ファイルをslotにコピー
|
||||
for file in params.files:
|
||||
print("FILE", file)
|
||||
srcPath = os.path.join(UPLOAD_DIR, file.name)
|
||||
dstDir = os.path.join(self.params.model_dir, str(params.slot))
|
||||
dstPath = os.path.join(dstDir, file.name)
|
||||
os.makedirs(dstDir, exist_ok=True)
|
||||
print(f"move to {srcPath} -> {dstPath}")
|
||||
shutil.move(srcPath, dstPath)
|
||||
file.name = dstPath
|
||||
# メタデータ作成(各VCで定義)
|
||||
if params.voiceChangerType == "RVC":
|
||||
from voice_changer.RVC.RVC import RVC # 起動時にインポートするとパラメータが取れない。
|
||||
|
||||
slotInfo = RVC.loadModel2(params)
|
||||
self.modelSlotManager.save_model_slot(params.slot, slotInfo)
|
||||
print("params", params)
|
||||
|
||||
else:
|
||||
# 古いアップローダ
|
||||
print("[Voice Canger]: upload models........")
|
||||
info = self.voiceChanger.loadModel(props)
|
||||
if hasattr(info, "status") and info["status"] == "NG":
|
||||
|
@ -1,6 +1,9 @@
|
||||
from dataclasses import dataclass
|
||||
from typing import Any
|
||||
|
||||
from const import VoiceChangerType
|
||||
from typing import Literal, TypeAlias
|
||||
|
||||
|
||||
@dataclass
|
||||
class FilePaths:
|
||||
@ -17,3 +20,35 @@ class LoadModelParams:
|
||||
slot: int
|
||||
isHalf: bool
|
||||
params: Any
|
||||
|
||||
|
||||
LoadModelParamFileKind: TypeAlias = Literal[
|
||||
"mmvcv13Config",
|
||||
"mmvcv13Model",
|
||||
"mmvcv15Config",
|
||||
"mmvcv15Model",
|
||||
"soVitsSvc40Config",
|
||||
"soVitsSvc40Model",
|
||||
"soVitsSvc40Cluster",
|
||||
"rvcModel",
|
||||
"rvcIndex",
|
||||
"ddspSvcModel",
|
||||
"ddspSvcModelConfig",
|
||||
"ddspSvcDiffusion",
|
||||
"ddspSvcDiffusionConfig",
|
||||
]
|
||||
|
||||
|
||||
@dataclass
|
||||
class LoadModelParamFile:
|
||||
name: str
|
||||
kind: LoadModelParamFileKind
|
||||
|
||||
|
||||
@dataclass
|
||||
class LoadModelParams2:
|
||||
voiceChangerType: VoiceChangerType
|
||||
slot: int
|
||||
isSampleMode: bool
|
||||
sampleId: str
|
||||
files: list[LoadModelParamFile]
|
||||
|
Loading…
Reference in New Issue
Block a user