From f15289ad982c04c521a160b3c4544e7d13157e6a Mon Sep 17 00:00:00 2001 From: w-okada Date: Tue, 14 Nov 2023 08:17:27 +0900 Subject: [PATCH] WIP:WEBver --- .../dist/assets/gui_settings/edition_web.txt | 1 + client/demo/package.json | 9 +- .../assets/gui_settings/edition_web.txt | 1 + client/demo/public/info_web | 1 + .../src/001_provider/001_AppStateProvider.tsx | 69 +++++------ client/demo/webpack_web.common.js | 107 ++++++++++++++++++ client/demo/webpack_web.dev.js | 36 ++++++ client/demo/webpack_web.prod.js | 6 + client/lib/src/hooks/useServerSetting.ts | 9 +- 9 files changed, 204 insertions(+), 35 deletions(-) create mode 100644 client/demo/dist/assets/gui_settings/edition_web.txt create mode 100644 client/demo/public/assets/gui_settings/edition_web.txt create mode 100644 client/demo/public/info_web create mode 100644 client/demo/webpack_web.common.js create mode 100644 client/demo/webpack_web.dev.js create mode 100644 client/demo/webpack_web.prod.js diff --git a/client/demo/dist/assets/gui_settings/edition_web.txt b/client/demo/dist/assets/gui_settings/edition_web.txt new file mode 100644 index 00000000..c0772185 --- /dev/null +++ b/client/demo/dist/assets/gui_settings/edition_web.txt @@ -0,0 +1 @@ +web diff --git a/client/demo/package.json b/client/demo/package.json index 02d82530..fb319508 100644 --- a/client/demo/package.json +++ b/client/demo/package.json @@ -13,7 +13,14 @@ "build:mod": "cd ../lib && npm run build:dev && cd - && cp -r ../lib/dist/* node_modules/@dannadori/voice-changer-client-js/dist/", "build:mod_dos": "cd ../lib && npm run build:dev && cd ../demo && npm-run-all build:mod_copy", "build:mod_copy": "XCOPY ..\\lib\\dist\\* .\\node_modules\\@dannadori\\voice-changer-client-js\\dist\\* /s /e /h /y", - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "____ comment ____": "ウェブバージョンのスクリプト", + "clean:web": "rimraf dist_web/", + "webpack:web:prod": "npx webpack --config webpack_web.prod.js && copy .\\public\\info_web .\\dist_web\\info", + "webpack:web:dev": "npx webpack --config webpack_web.dev.js && copy .\\public\\info_web .\\dist_web\\info", + "build:web:prod": "npm-run-all clean:web webpack:web:prod", + "build:web:dev": "npm-run-all clean:web webpack:web:dev", + "start:web": "webpack-dev-server --config webpack_web.dev.js" }, "keywords": [ "voice conversion" diff --git a/client/demo/public/assets/gui_settings/edition_web.txt b/client/demo/public/assets/gui_settings/edition_web.txt new file mode 100644 index 00000000..c0772185 --- /dev/null +++ b/client/demo/public/assets/gui_settings/edition_web.txt @@ -0,0 +1 @@ +web diff --git a/client/demo/public/info_web b/client/demo/public/info_web new file mode 100644 index 00000000..0967ef42 --- /dev/null +++ b/client/demo/public/info_web @@ -0,0 +1 @@ +{} diff --git a/client/demo/src/001_provider/001_AppStateProvider.tsx b/client/demo/src/001_provider/001_AppStateProvider.tsx index ce258596..20a86c40 100644 --- a/client/demo/src/001_provider/001_AppStateProvider.tsx +++ b/client/demo/src/001_provider/001_AppStateProvider.tsx @@ -55,41 +55,44 @@ export const AppStateProvider = ({ children }: Props) => { } }, [clientState.clientState.ioErrorCount]); - // useEffect(() => { - // if (clientState.clientState.initialized) { - // const baseUrl = "https://192.168.0.247:18888"; - // // const modelUrl = `${baseUrl}/models/rvc2v_40k_f0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvc2v_40k_nof0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvc2v_16k_f0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_40k_f0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_40k_nof0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_32k_f0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_32k_nof0_24000.bin`; + useEffect(() => { + if (clientState.clientState.initialized) { + // const baseUrl = "https://192.168.0.247:18888"; + // const baseUrl = "https://192.168.0.247:8080"; + const baseUrl = window.location.origin; - // // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_32k_f0_24000.bin`; - // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_32k_nof0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_40k_f0_24000.bin`; - // // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_40k_nof0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvc2v_40k_f0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvc2v_40k_nof0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvc2v_16k_f0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_40k_f0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_40k_nof0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_32k_f0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvcv2_amitaro_v2_32k_nof0_24000.bin`; - // voiceChangerJSClient.current = new VoiceChangerJSClient(); - // voiceChangerJSClient.current.initialize( - // { - // baseUrl: baseUrl, - // inputSamplingRate: 48000, - // outputSamplingRate: 48000, - // }, - // modelUrl, - // ); - // clientState.clientState.setInternalAudioProcessCallback({ - // processAudio: async (data: Uint8Array) => { - // const audioF32 = new Float32Array(data.buffer); - // const converted = await voiceChangerJSClient.current!.convert(audioF32); - // const res = new Uint8Array(converted.buffer); - // return res; - // }, - // }); - // } - // }, [clientState.clientState.initialized]); + // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_32k_f0_24000.bin`; + const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_32k_nof0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_40k_f0_24000.bin`; + // const modelUrl = `${baseUrl}/models/rvcv1_amitaro_v1_40k_nof0_24000.bin`; + + voiceChangerJSClient.current = new VoiceChangerJSClient(); + voiceChangerJSClient.current.initialize( + { + baseUrl: baseUrl, + inputSamplingRate: 48000, + outputSamplingRate: 48000, + }, + modelUrl, + ); + clientState.clientState.setInternalAudioProcessCallback({ + processAudio: async (data: Uint8Array) => { + const audioF32 = new Float32Array(data.buffer); + const converted = await voiceChangerJSClient.current!.convert(audioF32); + const res = new Uint8Array(converted.buffer); + return res; + }, + }); + } + }, [clientState.clientState.initialized]); const providerValue: AppStateValue = { audioContext: appRoot.audioContextState.audioContext!, diff --git a/client/demo/webpack_web.common.js b/client/demo/webpack_web.common.js new file mode 100644 index 00000000..ee03b561 --- /dev/null +++ b/client/demo/webpack_web.common.js @@ -0,0 +1,107 @@ +const path = require("path"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const CopyPlugin = require("copy-webpack-plugin"); +const webpack = require("webpack"); +module.exports = { + mode: "production", + entry: "./src/000_index.tsx", + resolve: { + extensions: [".ts", ".tsx", ".js"], + fallback: { + buffer: require.resolve("buffer/"), + }, + }, + module: { + rules: [ + { + test: [/\.ts$/, /\.tsx$/], + use: [ + { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"], + plugins: ["@babel/plugin-transform-runtime"], + }, + }, + ], + }, + { + test: /\.html$/, + loader: "html-loader", + }, + { + test: /\.css$/, + use: ["style-loader", { loader: "css-loader", options: { importLoaders: 1 } }, "postcss-loader"], + }, + { test: /\.json$/, type: "asset/inline" }, + ], + }, + output: { + filename: "index.js", + path: path.resolve(__dirname, "dist_web"), + }, + plugins: [ + new webpack.ProvidePlugin({ + Buffer: ["buffer", "Buffer"], + }), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, "public/index.html"), + filename: "./index.html", + }), + new CopyPlugin({ + patterns: [{ from: "public/assets", to: "assets" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/favicon.ico", to: "favicon.ico" }], + }), + + // ダミーファイルコピー + new CopyPlugin({ + patterns: [{ from: "public/assets/gui_settings/edition_web.txt", to: "assets/gui_settings/edition.txt" }], + }), + // new CopyPlugin({ // 拡張子なしのファイルコピーはできないようだ。⇒npmスクリプトで対処。 + // patterns: [{ from: "public/info_web.txt", to: "info" }], + // }), + + // VC用ファイルコピー + new CopyPlugin({ + patterns: [{ from: "./node_modules/@dannadori/voice-changer-js/dist/ort-wasm-simd.wasm", to: "ort-wasm-simd.wasm" }], + }), + new CopyPlugin({ + patterns: [{ from: "./node_modules/@dannadori/voice-changer-js/dist/tfjs-backend-wasm-simd.wasm", to: "tfjs-backend-wasm-simd.wasm" }], + }), + new CopyPlugin({ + patterns: [{ from: "./node_modules/@dannadori/voice-changer-js/dist/process.js", to: "process.js" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv2_emb_pit_24000.bin", to: "models/rvcv2_emb_pit_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv2_amitaro_v2_32k_f0_24000.bin", to: "models/rvcv2_amitaro_v2_32k_f0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv2_amitaro_v2_32k_nof0_24000.bin", to: "models/rvcv2_amitaro_v2_32k_nof0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv2_amitaro_v2_40k_f0_24000.bin", to: "models/rvcv2_amitaro_v2_40k_f0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv2_amitaro_v2_40k_nof0_24000.bin", to: "models/rvcv2_amitaro_v2_40k_nof0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv1_emb_pit_24000.bin", to: "models/rvcv1_emb_pit_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv1_amitaro_v1_32k_f0_24000.bin", to: "models/rvcv1_amitaro_v1_32k_f0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv1_amitaro_v1_32k_nof0_24000.bin", to: "models/rvcv1_amitaro_v1_32k_nof0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv1_amitaro_v1_40k_f0_24000.bin", to: "models/rvcv1_amitaro_v1_40k_f0_24000.bin" }], + }), + new CopyPlugin({ + patterns: [{ from: "public/models/rvcv1_amitaro_v1_40k_nof0_24000.bin", to: "models/rvcv1_amitaro_v1_40k_nof0_24000.bin" }], + }), + ], +}; diff --git a/client/demo/webpack_web.dev.js b/client/demo/webpack_web.dev.js new file mode 100644 index 00000000..0cd6b11c --- /dev/null +++ b/client/demo/webpack_web.dev.js @@ -0,0 +1,36 @@ +const path = require("path"); +const { merge } = require("webpack-merge"); +const common = require("./webpack_web.common.js"); +const express = require("express"); +module.exports = merge(common, { + mode: "development", + devServer: { + setupMiddlewares: (middlewares, devServer) => { + if (!devServer) { + throw new Error("webpack-dev-server is not defined"); + } + + // ミドルウェアを追加して静的ファイルへのアクセスログを出力 + devServer.app.use( + "/", + express.static(path.join(__dirname, "dist_web"), { + setHeaders: (res, filepath) => { + console.log(`Serving static file: ${filepath}`); + }, + }), + ); + + // 既存のミドルウェアをそのまま利用 + return middlewares; + }, + client: { + overlay: { + errors: false, + warnings: false, + }, + logging: "log", + }, + host: "0.0.0.0", + https: true, + }, +}); diff --git a/client/demo/webpack_web.prod.js b/client/demo/webpack_web.prod.js new file mode 100644 index 00000000..410b862f --- /dev/null +++ b/client/demo/webpack_web.prod.js @@ -0,0 +1,6 @@ +const { merge } = require("webpack-merge"); +const common = require("./webpack_web.common.js"); + +module.exports = merge(common, { + mode: "production", +}); diff --git a/client/lib/src/hooks/useServerSetting.ts b/client/lib/src/hooks/useServerSetting.ts index 18d30d8c..42556fcd 100644 --- a/client/lib/src/hooks/useServerSetting.ts +++ b/client/lib/src/hooks/useServerSetting.ts @@ -85,7 +85,14 @@ export type ServerSettingState = { }; export const useServerSetting = (props: UseServerSettingProps): ServerSettingState => { - const [serverSetting, setServerSetting] = useState(DefaultServerSetting); + const [serverSetting, _setServerSetting] = useState(DefaultServerSetting); + const setServerSetting = (info: ServerInfo) => { + if (!info.modelSlots) { + // サーバが情報を空で返したとき。Web版対策 + return; + } + _setServerSetting(info); + }; ////////////// // 設定