WIP:WEBver

This commit is contained in:
w-okada 2023-11-14 08:17:27 +09:00
parent 958b03bd5a
commit f15289ad98
9 changed files with 204 additions and 35 deletions

View File

@ -0,0 +1 @@
web

View File

@ -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"

View File

@ -0,0 +1 @@
web

View File

@ -0,0 +1 @@
{}

View File

@ -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!,

View 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" }],
}),
],
};

View 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,
},
});

View File

@ -0,0 +1,6 @@
const { merge } = require("webpack-merge");
const common = require("./webpack_web.common.js");
module.exports = merge(common, {
mode: "production",
});

View File

@ -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);
};
//////////////
// 設定