import { OnnxExecutionProvider, Framework, fileSelector, Correspondence } from "@dannadori/voice-changer-client-js" import React, { useState } from "react" import { useMemo } from "react" import { useAppState } from "./001_provider/001_AppStateProvider"; import { AnimationTypes, HeaderButton, HeaderButtonProps } from "./components/101_HeaderButton"; export type ServerSettingState = { modelSetting: JSX.Element; } export const useModelSettingArea = (): ServerSettingState => { const appState = useAppState() // const [showPyTorch, setShowPyTorch] = useState(false) const [showPyTorch, setShowPyTorch] = useState(true) const accodionButton = useMemo(() => { const accodionButtonProps: HeaderButtonProps = { stateControlCheckbox: appState.frontendManagerState.stateControls.openModelSettingCheckbox, tooltip: "Open/Close", onIcon: ["fas", "caret-up"], offIcon: ["fas", "caret-up"], animation: AnimationTypes.spinner, tooltipClass: "tooltip-right", }; return ; }, []); const uploadeModelRow = useMemo(() => { const onPyTorchFileLoadClicked = async () => { const file = await fileSelector("") if (file.name.endsWith(".pth") == false) { alert("モデルファイルの拡張子はpthである必要があります。") return } appState.serverSetting.setFileUploadSetting({ ...appState.serverSetting.fileUploadSetting, pyTorchModel: { file: file } }) } const onPyTorchFileClearClicked = () => { appState.serverSetting.setFileUploadSetting({ ...appState.serverSetting.fileUploadSetting, pyTorchModel: null }) } const onConfigFileLoadClicked = async () => { const file = await fileSelector("") if (file.name.endsWith(".json") == false) { alert("モデルファイルの拡張子はjsonである必要があります。") return } appState.serverSetting.setFileUploadSetting({ ...appState.serverSetting.fileUploadSetting, configFile: { file: file } }) } const onConfigFileClearClicked = () => { appState.serverSetting.setFileUploadSetting({ ...appState.serverSetting.fileUploadSetting, configFile: null }) } // const onHubertFileLoadClicked = async () => { // const file = await fileSelector("") // if (file.name.endsWith(".pth") == false) { // alert("モデルファイルの拡張子はpthである必要があります。") // return // } // appState.serverSetting.setFileUploadSetting({ // ...appState.serverSetting.fileUploadSetting, // hubertTorchModel: { // file: file // } // }) // } // const onHubertFileClearClicked = () => { // appState.serverSetting.setFileUploadSetting({ // ...appState.serverSetting.fileUploadSetting, // hubertTorchModel: null // }) // } const onClusterFileLoadClicked = async () => { const file = await fileSelector("") if (file.name.endsWith(".pt") == false) { alert("モデルファイルの拡張子はptである必要があります。") return } appState.serverSetting.setFileUploadSetting({ ...appState.serverSetting.fileUploadSetting, clusterTorchModel: { file: file } }) } const onClusterFileClearClicked = () => { appState.serverSetting.setFileUploadSetting({ ...appState.serverSetting.fileUploadSetting, clusterTorchModel: null }) } // const onOnnxFileLoadClicked = async () => { // const file = await fileSelector("") // if (file.name.endsWith(".onnx") == false) { // alert("モデルファイルの拡張子はonnxである必要があります。") // return // } // appState.serverSetting.setFileUploadSetting({ // ...appState.serverSetting.fileUploadSetting, // onnxModel: { // file: file // } // }) // } // const onOnnxFileClearClicked = () => { // appState.serverSetting.setFileUploadSetting({ // ...appState.serverSetting.fileUploadSetting, // onnxModel: null // }) // } const onModelUploadClicked = async () => { appState.serverSetting.loadModel() } const uploadButtonClassName = appState.serverSetting.isUploading ? "body-button-disabled" : "body-button" const uploadButtonAction = appState.serverSetting.isUploading ? () => { } : onModelUploadClicked const uploadButtonLabel = appState.serverSetting.isUploading ? "wait..." : "upload" const configFilenameText = appState.serverSetting.fileUploadSetting.configFile?.filename || appState.serverSetting.fileUploadSetting.configFile?.file?.name || "" // const hubertModelFilenameText = appState.serverSetting.fileUploadSetting.hubertTorchModel?.filename || appState.serverSetting.fileUploadSetting.hubertTorchModel?.file?.name || "" const clusterModelFilenameText = appState.serverSetting.fileUploadSetting.clusterTorchModel?.filename || appState.serverSetting.fileUploadSetting.clusterTorchModel?.file?.name || "" // const onnxModelFilenameText = appState.serverSetting.fileUploadSetting.onnxModel?.filename || appState.serverSetting.fileUploadSetting.onnxModel?.file?.name || "" const pyTorchFilenameText = appState.serverSetting.fileUploadSetting.pyTorchModel?.filename || appState.serverSetting.fileUploadSetting.pyTorchModel?.file?.name || "" const uploadingStatus = appState.serverSetting.isUploading ? appState.serverSetting.uploadProgress == 0 ? `loading model...(wait about 20sec)` : `uploading.... ${appState.serverSetting.uploadProgress}%` : "" return ( <>
Model Uploader
{/* { setShowPyTorch(e.target.checked) }} /> enable PyTorch */}
Config(.json)
{configFilenameText}
select
clear
{showPyTorch ? (
PyTorch(.pth)
{pyTorchFilenameText}
select
clear
) : ( <> ) } {/*
hubert(.pth)
{hubertModelFilenameText}
select
clear
*/}
cluster(.pt)
{clusterModelFilenameText}
select
clear
{/*
Onnx(.onnx)
{onnxModelFilenameText}
select
clear
*/}
{uploadingStatus}
{uploadButtonLabel}
) }, [ appState.serverSetting.fileUploadSetting, appState.serverSetting.loadModel, appState.serverSetting.isUploading, appState.serverSetting.uploadProgress, appState.clientSetting.clientSetting.correspondences, appState.serverSetting.updateServerSettings, appState.serverSetting.setFileUploadSetting, showPyTorch]) const frameworkRow = useMemo(() => { // return <> const onFrameworkChanged = async (val: Framework) => { appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, framework: val }) } return (
Framework
) }, [appState.serverSetting.serverSetting.framework, appState.serverSetting.updateServerSettings]) const onnxExecutionProviderRow = useMemo(() => { if (appState.serverSetting.serverSetting.framework != "ONNX") { return } const onOnnxExecutionProviderChanged = async (val: OnnxExecutionProvider) => { appState.serverSetting.updateServerSettings({ ...appState.serverSetting.serverSetting, onnxExecutionProvider: val }) } console.log("setting", appState.serverSetting.serverSetting) return (
OnnxExecutionProvider
) }, [appState.serverSetting.serverSetting.framework, appState.serverSetting.serverSetting.onnxExecutionProvider, appState.serverSetting.updateServerSettings]) const modelSetting = useMemo(() => { return ( <> {appState.frontendManagerState.stateControls.openModelSettingCheckbox.trigger}
{accodionButton} { appState.frontendManagerState.stateControls.openModelSettingCheckbox.updateState(!appState.frontendManagerState.stateControls.openModelSettingCheckbox.checked()) }}> Model Setting
{uploadeModelRow} {frameworkRow} {onnxExecutionProviderRow}
) }, [uploadeModelRow, frameworkRow, onnxExecutionProviderRow]) return { modelSetting, } }