mirror of
https://github.com/w-okada/voice-changer.git
synced 2025-01-23 13:35:12 +03:00
WIP:WEBver
This commit is contained in:
parent
958b03bd5a
commit
f15289ad98
1
client/demo/dist/assets/gui_settings/edition_web.txt
vendored
Normal file
1
client/demo/dist/assets/gui_settings/edition_web.txt
vendored
Normal file
@ -0,0 +1 @@
|
||||
web
|
@ -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"
|
||||
|
1
client/demo/public/assets/gui_settings/edition_web.txt
Normal file
1
client/demo/public/assets/gui_settings/edition_web.txt
Normal file
@ -0,0 +1 @@
|
||||
web
|
1
client/demo/public/info_web
Normal file
1
client/demo/public/info_web
Normal file
@ -0,0 +1 @@
|
||||
{}
|
@ -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!,
|
||||
|
107
client/demo/webpack_web.common.js
Normal file
107
client/demo/webpack_web.common.js
Normal file
@ -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" }],
|
||||
}),
|
||||
],
|
||||
};
|
36
client/demo/webpack_web.dev.js
Normal file
36
client/demo/webpack_web.dev.js
Normal file
@ -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,
|
||||
},
|
||||
});
|
6
client/demo/webpack_web.prod.js
Normal file
6
client/demo/webpack_web.prod.js
Normal file
@ -0,0 +1,6 @@
|
||||
const { merge } = require("webpack-merge");
|
||||
const common = require("./webpack_web.common.js");
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: "production",
|
||||
});
|
@ -85,7 +85,14 @@ export type ServerSettingState = {
|
||||
};
|
||||
|
||||
export const useServerSetting = (props: UseServerSettingProps): ServerSettingState => {
|
||||
const [serverSetting, setServerSetting] = useState<ServerInfo>(DefaultServerSetting);
|
||||
const [serverSetting, _setServerSetting] = useState<ServerInfo>(DefaultServerSetting);
|
||||
const setServerSetting = (info: ServerInfo) => {
|
||||
if (!info.modelSlots) {
|
||||
// サーバが情報を空で返したとき。Web版対策
|
||||
return;
|
||||
}
|
||||
_setServerSetting(info);
|
||||
};
|
||||
|
||||
//////////////
|
||||
// 設定
|
||||
|
Loading…
Reference in New Issue
Block a user