PublicMirrors/voice-changer
1
0
Fork 0
mirror of https://github.com/w-okada/voice-changer.git synced 2025-02-02 16:23:58 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve merge

Browse Source
This commit is contained in:
wataru 2023-05-17 21:55:07 +09:00
parent 6d419a5702
commit d52af3b466
4 changed files with 90 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/demo/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

1
client/demo/src/components/demo/components/207_ServerOpertationRow.tsx
View File

@ -44,7 +44,6 @@ export const ServerOpertationRow = (props: ServerOpertationRowProps) => {
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
guiState.stateControls.showWaitingCheckbox.updateState(false)
}
const onReloadClicked = async () => {
const info = await appState.getInfo()

102
client/demo/src/components/demo/components/a01_MergeLab.Row.tsx
View File

@ -12,6 +12,8 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
const appState = useAppState()
const [defaultTune, setDefaultTune] = useState<number>(0)
console.log("mergeElements", mergeElements)
// スロットが変更されたときの初期化処理
const newSlotChangeKey = useMemo(() => {
console.log("appState.serverSetting.serverSetting.modelSlots", appState.serverSetting.serverSetting.modelSlots)
@ -20,31 +22,27 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
}, "")
}, [appState.serverSetting.serverSetting.modelSlots])
useEffect(() => {
// PyTorchモデルだけフィルタリング
const models = appState.serverSetting.serverSetting.modelSlots.filter(x => { return x.modelFile && x.modelFile.endsWith("onnx") == false })
if (models.length == 0) {
setMergeElements([])
return
}
// サンプリングレート、埋め込み次元数、モデルタイプが同一の場合のみ処理可能
if (
models.map(x => { return x.samplingRate }).every((x, _i, arr) => x == arr[0]) &&
models.map(x => { return x.embChannels }).every((x, _i, arr) => x == arr[0]) &&
models.map(x => { return x.modelType }).every((x, _i, arr) => x == arr[0])
) {
// マージ用データセットの初期化
const clearMergeModelSetting = useMemo(() => {
return () => {
// PyTorchモデルだけフィルタリング
const models = appState.serverSetting.serverSetting.modelSlots.filter(x => { return x.modelFile && x.modelFile.endsWith("onnx") == false })
if (models.length == 0) {
setMergeElements([])
return
}
const newMergeElements = models.map((x) => {
const elem: MergeElement = { filename: x.modelFile, strength: 100 }
const elem: MergeElement = { filename: x.modelFile, strength: 0 }
return elem
})
setMergeElements(newMergeElements)
} else {
console.log("not all model is same properties.")
setMergeElements([])
}
}, [appState.serverSetting.serverSetting.modelSlots])
useEffect(() => {
clearMergeModelSetting()
}, [newSlotChangeKey])
@ -57,15 +55,44 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
files: mergeElements
})
}
const onMergeElementsChanged = (filename: string, strength: number) => {
const newMergeElements = mergeElements.map(x => {
if (x.filename != filename) return x
x.strength = strength
return x
})
setMergeElements(newMergeElements)
const onMergeElementsChanged = (filename: string, strength: number) => {
console.log("targetelement")
const srcElements = mergeElements.filter(x => { return x.strength > 0 })
const targetElement = mergeElements.find(x => { return x.filename == filename })
if (!targetElement) {
console.warn("target model is not found")
return
}
// 一つ目の対象モデル
if (srcElements.length == 0) {
targetElement.strength = strength
setMergeElements([...mergeElements])
return
}
//二つ目以降
const srcSample = appState.serverSetting.serverSetting.modelSlots.find(x => { return x.modelFile == srcElements[0].filename })
const tgtSample = appState.serverSetting.serverSetting.modelSlots.find(x => { return x.modelFile == filename })
if (!srcSample || !tgtSample) {
console.warn("target model is not found", srcSample, tgtSample)
return
}
if (
srcSample.samplingRate != tgtSample.samplingRate ||
srcSample.embChannels != tgtSample.embChannels ||
srcSample.modelType != tgtSample.modelType
) {
alert("current selected model is not same as the other selected.")
return
}
targetElement.strength = strength
setMergeElements([...mergeElements])
return
}
const modelOptions = mergeElements.map((x, index) => {
let filename = ""
if (x.filename.length > 0) {
@ -77,9 +104,25 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
)
}
const modelInfo = appState.serverSetting.serverSetting.modelSlots.find(y => { return y.modelFile == x.filename })
if (!modelInfo) {
return (
<div key={index} >
</div>
)
}
const f0str = modelInfo.f0 == true ? "f0" : "nof0"
const srstr = Math.floor(modelInfo.samplingRate / 1000) + "K"
const embedstr = modelInfo.embChannels
const typestr = modelInfo.modelType == 0 ? "org" : "webui"
const metadata = `[${f0str},${srstr},${embedstr},${typestr}]`
return (
<div key={index} className="merge-field">
<div className="merge-field-elem">{filename}</div>
<div key={index} className="merge-field split-8-2">
<div className="merge-field-elem">{metadata} {filename}</div>
<div className="merge-field-elem">
<input type="range" className="body-item-input-slider" min="0" max="100" step="1" value={x.strength} onChange={(e) => {
onMergeElementsChanged(x.filename, Number(e.target.value))
@ -94,9 +137,9 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
<div className="body-row split-3-3-4 left-padding-1 guided">
<div className="body-item-title left-padding-1">Model Merger</div>
<div className="merge-field-container">
{modelOptions.length == 0 ? <>not PyTorch model or not same type</> : modelOptions}
{modelOptions}
<div className="merge-field">
<div className="merge-field split-8-2">
<div className="merge-field-elem grey-bold">Default Tune</div>
<div className="merge-field-elem">
<input type="range" className="body-item-input-slider-2nd" min="-50" max="50" step="1" value={defaultTune} onChange={(e) => {
@ -110,6 +153,7 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
</div>
<div className="body-button-container">
<div className="body-button" onClick={onMergeClicked}>merge</div>
<div className="body-button" onClick={clearMergeModelSetting}>clear</div>
</div>
</div>
)

15
client/demo/src/css/App.css
View File

@ -137,6 +137,20 @@ body {
}
/* ROW */
.split-8-2 {
display: flex;
width: 100%;
justify-content: center;
margin: 1px 0px 1px 0px;
& > div:nth-child(1) {
left: 0px;
width: 80%;
}
& > div:nth-child(2) {
left: 80%;
width: 20%;
}
}
.split-6-4 {
display: flex;
width: 100%;
@ -803,7 +817,6 @@ body {
flex-direction: row;
.merge-field-elem {
padding-left: 5px;
width: 100%;
}
.red {
color: #f00;