mirror of
https://github.com/w-okada/voice-changer.git
synced 2025-02-02 16:23:58 +03:00
hide advanced setting
This commit is contained in:
wataru
parent
5479422e1f
commit
a22d430539
11
client/demo/dist/index.html
vendored
11
client/demo/dist/index.html
vendored
@ -1,10 +1 @@
|
|||||||
<!DOCTYPE html>
|
<!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>
|
||||||
<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>
|
|
||||||
641
client/demo/dist/index.js
vendored
641
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
Normal file
31
client/demo/dist/index.js.LICENSE.txt
vendored
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/*! 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.
|
||||||
|
*/
|
||||||
@ -12,24 +12,6 @@ export type ServerSettingState = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const useServerSettingArea = (props: UseServerSettingProps): ServerSettingState => {
|
export const useServerSettingArea = (props: UseServerSettingProps): ServerSettingState => {
|
||||||
const mmvcServerUrlRow = useMemo(() => {
|
|
||||||
const onSetServerClicked = async () => {
|
|
||||||
const input = document.getElementById("mmvc-server-url") as HTMLInputElement
|
|
||||||
props.clientState.clientSetting.setServerUrl(input.value)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className="body-row split-3-3-4 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">MMVC Server</div>
|
|
||||||
<div className="body-input-container">
|
|
||||||
<input type="text" defaultValue={props.clientState.clientSetting.setting.mmvcServerUrl} id="mmvc-server-url" className="body-item-input" />
|
|
||||||
</div>
|
|
||||||
<div className="body-button-container">
|
|
||||||
<div className="body-button" onClick={onSetServerClicked}>set</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.clientSetting.setting.mmvcServerUrl, props.clientState.clientSetting.setServerUrl])
|
|
||||||
|
|
||||||
const uploadeModelRow = useMemo(() => {
|
const uploadeModelRow = useMemo(() => {
|
||||||
const onPyTorchFileLoadClicked = async () => {
|
const onPyTorchFileLoadClicked = async () => {
|
||||||
const file = await fileSelector("")
|
const file = await fileSelector("")
|
||||||
@ -224,14 +206,13 @@ export const useServerSettingArea = (props: UseServerSettingProps): ServerSettin
|
|||||||
<div className="body-select-container">
|
<div className="body-select-container">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{mmvcServerUrlRow}
|
|
||||||
{uploadeModelRow}
|
{uploadeModelRow}
|
||||||
{frameworkRow}
|
{frameworkRow}
|
||||||
{onnxExecutionProviderRow}
|
{onnxExecutionProviderRow}
|
||||||
{protocolRow}
|
{protocolRow}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}, [mmvcServerUrlRow, uploadeModelRow, frameworkRow, onnxExecutionProviderRow, protocolRow])
|
}, [uploadeModelRow, frameworkRow, onnxExecutionProviderRow, protocolRow])
|
||||||
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@ -175,24 +175,6 @@ export const useDeviceSetting = (audioContext: AudioContext | null, props: UseDe
|
|||||||
})
|
})
|
||||||
}, [audioOutputForGUI])
|
}, [audioOutputForGUI])
|
||||||
|
|
||||||
const sampleRateRow = useMemo(() => {
|
|
||||||
return (
|
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">Sample Rate</div>
|
|
||||||
<div className="body-select-container">
|
|
||||||
<select className="body-select" value={props.clientState.clientSetting.setting.sampleRate} onChange={(e) => {
|
|
||||||
props.clientState.clientSetting.setSampleRate(Number(e.target.value) as SampleRate)
|
|
||||||
}}>
|
|
||||||
{
|
|
||||||
Object.values(SampleRate).map(x => {
|
|
||||||
return <option key={x} value={x}>{x}</option>
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.clientSetting.setting.sampleRate, props.clientState.clientSetting.setSampleRate])
|
|
||||||
|
|
||||||
const deviceSetting = useMemo(() => {
|
const deviceSetting = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
@ -204,11 +186,10 @@ export const useDeviceSetting = (audioContext: AudioContext | null, props: UseDe
|
|||||||
</div>
|
</div>
|
||||||
{audioInputRow}
|
{audioInputRow}
|
||||||
{audioMediaInputRow}
|
{audioMediaInputRow}
|
||||||
{sampleRateRow}
|
|
||||||
{audioOutputRow}
|
{audioOutputRow}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}, [audioInputRow, audioMediaInputRow, sampleRateRow, audioOutputRow])
|
}, [audioInputRow, audioMediaInputRow, audioOutputRow])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
deviceSetting,
|
deviceSetting,
|
||||||
|
|||||||
@ -12,26 +12,6 @@ export type ConvertSettingState = {
|
|||||||
|
|
||||||
export const useConvertSetting = (props: UseConvertSettingProps): ConvertSettingState => {
|
export const useConvertSetting = (props: UseConvertSettingProps): ConvertSettingState => {
|
||||||
|
|
||||||
const bufferSizeRow = useMemo(() => {
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">Buffer Size</div>
|
|
||||||
<div className="body-select-container">
|
|
||||||
<select className="body-select" value={props.clientState.clientSetting.setting.bufferSize} onChange={(e) => {
|
|
||||||
props.clientState.clientSetting.setBufferSize(Number(e.target.value) as BufferSize)
|
|
||||||
}}>
|
|
||||||
{
|
|
||||||
Object.values(BufferSize).map(x => {
|
|
||||||
return <option key={x} value={x}>{x}</option>
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.clientSetting.setting.bufferSize, props.clientState.clientSetting.setBufferSize])
|
|
||||||
|
|
||||||
const inputChunkNumRow = useMemo(() => {
|
const inputChunkNumRow = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
@ -45,20 +25,6 @@ export const useConvertSetting = (props: UseConvertSettingProps): ConvertSetting
|
|||||||
)
|
)
|
||||||
}, [props.clientState.clientSetting.setting.inputChunkNum, props.clientState.clientSetting.setInputChunkNum])
|
}, [props.clientState.clientSetting.setting.inputChunkNum, props.clientState.clientSetting.setInputChunkNum])
|
||||||
|
|
||||||
const convertChunkNumRow = useMemo(() => {
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">Convert Chunk Num(128sample/chunk)</div>
|
|
||||||
<div className="body-input-container">
|
|
||||||
<input type="number" min={1} max={256} step={1} value={props.clientState.serverSetting.setting.convertChunkNum} onChange={(e) => {
|
|
||||||
props.clientState.serverSetting.setConvertChunkNum(Number(e.target.value))
|
|
||||||
}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.serverSetting.setting.convertChunkNum, props.clientState.serverSetting.setConvertChunkNum])
|
|
||||||
|
|
||||||
const gpuRow = useMemo(() => {
|
const gpuRow = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
@ -72,44 +38,6 @@ export const useConvertSetting = (props: UseConvertSettingProps): ConvertSetting
|
|||||||
)
|
)
|
||||||
}, [props.clientState.serverSetting.setting.gpu, props.clientState.serverSetting.setGpu])
|
}, [props.clientState.serverSetting.setting.gpu, props.clientState.serverSetting.setGpu])
|
||||||
|
|
||||||
const crossFadeOverlapRateRow = useMemo(() => {
|
|
||||||
return (
|
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">Cross Fade Overlap Rate</div>
|
|
||||||
<div className="body-input-container">
|
|
||||||
<input type="number" min={0.1} max={1} step={0.1} value={props.clientState.serverSetting.setting.crossFadeOverlapRate} onChange={(e) => {
|
|
||||||
props.clientState.serverSetting.setCrossFadeOverlapRate(Number(e.target.value))
|
|
||||||
}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.serverSetting.setting.crossFadeOverlapRate, props.clientState.serverSetting.setCrossFadeOverlapRate])
|
|
||||||
|
|
||||||
const crossFadeOffsetRateRow = useMemo(() => {
|
|
||||||
return (
|
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">Cross Fade Offset Rate</div>
|
|
||||||
<div className="body-input-container">
|
|
||||||
<input type="number" min={0} max={1} step={0.1} value={props.clientState.serverSetting.setting.crossFadeOffsetRate} onChange={(e) => {
|
|
||||||
props.clientState.serverSetting.setCrossFadeOffsetRate(Number(e.target.value))
|
|
||||||
}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.serverSetting.setting.crossFadeOffsetRate, props.clientState.serverSetting.setCrossFadeOffsetRate])
|
|
||||||
|
|
||||||
const crossFadeEndRateRow = useMemo(() => {
|
|
||||||
return (
|
|
||||||
<div className="body-row split-3-7 left-padding-1 guided">
|
|
||||||
<div className="body-item-title left-padding-1">Cross Fade End Rate</div>
|
|
||||||
<div className="body-input-container">
|
|
||||||
<input type="number" min={0} max={1} step={0.1} value={props.clientState.serverSetting.setting.crossFadeEndRate} onChange={(e) => {
|
|
||||||
props.clientState.serverSetting.setCrossFadeEndRate(Number(e.target.value))
|
|
||||||
}} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}, [props.clientState.serverSetting.setting.crossFadeEndRate, props.clientState.serverSetting.setCrossFadeEndRate])
|
|
||||||
|
|
||||||
const convertSetting = useMemo(() => {
|
const convertSetting = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
@ -119,16 +47,12 @@ export const useConvertSetting = (props: UseConvertSettingProps): ConvertSetting
|
|||||||
<div className="body-select-container">
|
<div className="body-select-container">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{bufferSizeRow}
|
|
||||||
{inputChunkNumRow}
|
{inputChunkNumRow}
|
||||||
{convertChunkNumRow}
|
|
||||||
{gpuRow}
|
{gpuRow}
|
||||||
{crossFadeOverlapRateRow}
|
|
||||||
{crossFadeOffsetRateRow}
|
|
||||||
{crossFadeEndRateRow}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}, [bufferSizeRow, inputChunkNumRow, convertChunkNumRow, gpuRow, crossFadeOverlapRateRow, crossFadeOffsetRateRow, crossFadeEndRateRow])
|
}, [inputChunkNumRow, gpuRow])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
convertSetting,
|
convertSetting,
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { VoiceChangerMode } from "@dannadori/voice-changer-client-js"
|
import { BufferSize, SampleRate, VoiceChangerMode } from "@dannadori/voice-changer-client-js"
|
||||||
import React, { useMemo, useState } from "react"
|
import React, { useMemo, useState } from "react"
|
||||||
import { ClientState } from "./hooks/useClient"
|
import { ClientState } from "./hooks/useClient"
|
||||||
|
|
||||||
@ -12,6 +12,117 @@ export type AdvancedSettingState = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const useAdvancedSetting = (props: UseAdvancedSettingProps): AdvancedSettingState => {
|
export const useAdvancedSetting = (props: UseAdvancedSettingProps): AdvancedSettingState => {
|
||||||
|
const [showAdvancedSetting, setShowAdvancedSetting] = useState<boolean>(false)
|
||||||
|
const mmvcServerUrlRow = useMemo(() => {
|
||||||
|
const onSetServerClicked = async () => {
|
||||||
|
const input = document.getElementById("mmvc-server-url") as HTMLInputElement
|
||||||
|
props.clientState.clientSetting.setServerUrl(input.value)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="body-row split-3-3-4 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">MMVC Server</div>
|
||||||
|
<div className="body-input-container">
|
||||||
|
<input type="text" defaultValue={props.clientState.clientSetting.setting.mmvcServerUrl} id="mmvc-server-url" className="body-item-input" />
|
||||||
|
</div>
|
||||||
|
<div className="body-button-container">
|
||||||
|
<div className="body-button" onClick={onSetServerClicked}>set</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.clientSetting.setting.mmvcServerUrl, props.clientState.clientSetting.setServerUrl])
|
||||||
|
|
||||||
|
const sampleRateRow = useMemo(() => {
|
||||||
|
return (
|
||||||
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">Sample Rate</div>
|
||||||
|
<div className="body-select-container">
|
||||||
|
<select className="body-select" value={props.clientState.clientSetting.setting.sampleRate} onChange={(e) => {
|
||||||
|
props.clientState.clientSetting.setSampleRate(Number(e.target.value) as SampleRate)
|
||||||
|
}}>
|
||||||
|
{
|
||||||
|
Object.values(SampleRate).map(x => {
|
||||||
|
return <option key={x} value={x}>{x}</option>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.clientSetting.setting.sampleRate, props.clientState.clientSetting.setSampleRate])
|
||||||
|
|
||||||
|
const bufferSizeRow = useMemo(() => {
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">Buffer Size</div>
|
||||||
|
<div className="body-select-container">
|
||||||
|
<select className="body-select" value={props.clientState.clientSetting.setting.bufferSize} onChange={(e) => {
|
||||||
|
props.clientState.clientSetting.setBufferSize(Number(e.target.value) as BufferSize)
|
||||||
|
}}>
|
||||||
|
{
|
||||||
|
Object.values(BufferSize).map(x => {
|
||||||
|
return <option key={x} value={x}>{x}</option>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.clientSetting.setting.bufferSize, props.clientState.clientSetting.setBufferSize])
|
||||||
|
|
||||||
|
const convertChunkNumRow = useMemo(() => {
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">Convert Chunk Num(128sample/chunk)</div>
|
||||||
|
<div className="body-input-container">
|
||||||
|
<input type="number" min={1} max={256} step={1} value={props.clientState.serverSetting.setting.convertChunkNum} onChange={(e) => {
|
||||||
|
props.clientState.serverSetting.setConvertChunkNum(Number(e.target.value))
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.serverSetting.setting.convertChunkNum, props.clientState.serverSetting.setConvertChunkNum])
|
||||||
|
|
||||||
|
const crossFadeOverlapRateRow = useMemo(() => {
|
||||||
|
return (
|
||||||
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">Cross Fade Overlap Rate</div>
|
||||||
|
<div className="body-input-container">
|
||||||
|
<input type="number" min={0.1} max={1} step={0.1} value={props.clientState.serverSetting.setting.crossFadeOverlapRate} onChange={(e) => {
|
||||||
|
props.clientState.serverSetting.setCrossFadeOverlapRate(Number(e.target.value))
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.serverSetting.setting.crossFadeOverlapRate, props.clientState.serverSetting.setCrossFadeOverlapRate])
|
||||||
|
|
||||||
|
const crossFadeOffsetRateRow = useMemo(() => {
|
||||||
|
return (
|
||||||
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">Cross Fade Offset Rate</div>
|
||||||
|
<div className="body-input-container">
|
||||||
|
<input type="number" min={0} max={1} step={0.1} value={props.clientState.serverSetting.setting.crossFadeOffsetRate} onChange={(e) => {
|
||||||
|
props.clientState.serverSetting.setCrossFadeOffsetRate(Number(e.target.value))
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.serverSetting.setting.crossFadeOffsetRate, props.clientState.serverSetting.setCrossFadeOffsetRate])
|
||||||
|
|
||||||
|
const crossFadeEndRateRow = useMemo(() => {
|
||||||
|
return (
|
||||||
|
<div className="body-row split-3-7 left-padding-1 guided">
|
||||||
|
<div className="body-item-title left-padding-1">Cross Fade End Rate</div>
|
||||||
|
<div className="body-input-container">
|
||||||
|
<input type="number" min={0} max={1} step={0.1} value={props.clientState.serverSetting.setting.crossFadeEndRate} onChange={(e) => {
|
||||||
|
props.clientState.serverSetting.setCrossFadeEndRate(Number(e.target.value))
|
||||||
|
}} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}, [props.clientState.serverSetting.setting.crossFadeEndRate, props.clientState.serverSetting.setCrossFadeEndRate])
|
||||||
|
|
||||||
|
|
||||||
const vfForceDisableRow = useMemo(() => {
|
const vfForceDisableRow = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
@ -87,27 +198,52 @@ export const useAdvancedSetting = (props: UseAdvancedSettingProps): AdvancedSett
|
|||||||
}} />
|
}} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}, [props.clientState.workletSetting.setting, props.clientState.workletSetting.setSetting])
|
}, [props.clientState.workletSetting.setting, props.clientState.workletSetting.setSetting])
|
||||||
|
|
||||||
|
|
||||||
|
const advanceSettingContent = useMemo(() => {
|
||||||
|
if (!showAdvancedSetting) return <></>
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="body-row divider"></div>
|
||||||
|
{mmvcServerUrlRow}
|
||||||
|
<div className="body-row divider"></div>
|
||||||
|
{sampleRateRow}
|
||||||
|
{bufferSizeRow}
|
||||||
|
<div className="body-row divider"></div>
|
||||||
|
|
||||||
|
{convertChunkNumRow}
|
||||||
|
{crossFadeOverlapRateRow}
|
||||||
|
{crossFadeOffsetRateRow}
|
||||||
|
{crossFadeEndRateRow}
|
||||||
|
<div className="body-row divider"></div>
|
||||||
|
{vfForceDisableRow}
|
||||||
|
{voiceChangeModeRow}
|
||||||
|
<div className="body-row divider"></div>
|
||||||
|
{workletSettingRow}
|
||||||
|
<div className="body-row divider"></div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}, [showAdvancedSetting, mmvcServerUrlRow, sampleRateRow, bufferSizeRow, convertChunkNumRow, crossFadeOverlapRateRow, crossFadeOffsetRateRow, crossFadeEndRateRow, vfForceDisableRow, voiceChangeModeRow, workletSettingRow])
|
||||||
|
|
||||||
|
|
||||||
const advancedSetting = useMemo(() => {
|
const advancedSetting = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="body-row split-3-7 left-padding-1">
|
<div className="body-row split-3-7 left-padding-1">
|
||||||
<div className="body-sub-section-title">Advanced Setting</div>
|
<div className="body-sub-section-title">Advanced Setting</div>
|
||||||
<div className="body-select-container">
|
<div>
|
||||||
|
<input type="checkbox" checked={showAdvancedSetting} onChange={(e) => {
|
||||||
|
setShowAdvancedSetting(e.target.checked)
|
||||||
|
}} /> show
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{vfForceDisableRow}
|
{advanceSettingContent}
|
||||||
{voiceChangeModeRow}
|
|
||||||
{workletSettingRow}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}, [vfForceDisableRow, voiceChangeModeRow, workletSettingRow])
|
}, [showAdvancedSetting, advanceSettingContent])
|
||||||
|
|
||||||
return {
|
return {
|
||||||
advancedSetting,
|
advancedSetting,
|
||||||
|
|||||||
@ -209,6 +209,12 @@ body {
|
|||||||
/* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */
|
/* border-bottom: 1px solid rgba(9, 133, 67, 0.3); */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
height:4px;
|
||||||
|
/* background-color: rgba(16, 210, 113, 0.1); */
|
||||||
|
background-color: rgba(31, 42, 36, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
.body-top-title {
|
.body-top-title {
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user