improve web edition gui

client/demo/src/001_globalHooks/100_useWebInfo.ts

@@ -125,10 +125,10 @@ const f0ModelUrl: { [modelType in VoiceChangerType]: { [inputLength in InputLeng
 };
 
 export const useWebInfo = (props: UseWebInfoProps): WebInfoStateAndMethod => {
-    const initVoiceChangerType: VoiceChangerType = "rvcv1";
+    const initVoiceChangerType: VoiceChangerType = "rvcv2";
     const initInputLength: InputLengthKey = "24000";
     const initUseF0 = false;
-    const initSampleRate: ModelSampleRateStr = "40k";
+    const initSampleRate: ModelSampleRateStr = "32k";
 
     const progressCallback = (data: ProgreeeUpdateCallbcckInfo) => {
         if (data.progressUpdateType === ProgressUpdateType.loadPreprocessModel) {

client/demo/src/components/demo/components2/101_CharacterArea.tsx

@@ -142,6 +142,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
                 throw new Error("invalid webModelLoadingState");
             }
         } else {
+            if (webEdition) {
                 return (
                     <div className="character-area-control">
                         <div className="character-area-control-buttons">
@@ -151,6 +152,20 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
                             <div onClick={onStopClicked} className={stopClassName}>
                                 stop
                             </div>
+                        </div>
+                    </div>
+                );
+            } else {
+                return (
+                    <div className="character-area-control">
+                        <div className="character-area-control-buttons">
+                            <div onClick={onStartClicked} className={startClassName}>
+                                start
+                            </div>
+                            <div onClick={onStopClicked} className={stopClassName}>
+                                stop
+                            </div>
+
                             <div onClick={onPassThroughClicked} className={passThruClassName}>
                                 passthru
                             </div>
@@ -158,6 +173,7 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
                     </div>
                 );
             }
+        }
     }, [guiState.isConverting, start, stop, serverSetting.serverSetting, serverSetting.updateServerSettings, webInfoState.progressLoadPreprocess, webInfoState.progressLoadVCModel, webInfoState.progressWarmup, webInfoState.webModelLoadingState]);
 
     const gainControl = useMemo(() => {

client/demo/src/components/demo/components2/102-3_DeviceArea.tsx

@@ -4,6 +4,7 @@ import { fileSelectorAsDataURL, useIndexedDB } from "@dannadori/voice-changer-cl
 import { useGuiState } from "../001_GuiStateProvider";
 import { AUDIO_ELEMENT_FOR_PLAY_MONITOR, AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL, INDEXEDDB_KEY_AUDIO_MONITR, INDEXEDDB_KEY_AUDIO_OUTPUT } from "../../../const";
 import { isDesktopApp } from "../../../const";
+import { useAppRoot } from "../../../001_provider/001_AppRootProvider";
 
 export type DeviceAreaProps = {};
 
@@ -19,8 +20,19 @@ export const DeviceArea = (_props: DeviceAreaProps) => {
     const { getItem, setItem } = useIndexedDB({ clientType: null });
     const [outputRecordingStarted, setOutputRecordingStarted] = useState<boolean>(false);
 
+    const { appGuiSettingState } = useAppRoot();
+    const webEdition = appGuiSettingState.edition.indexOf("web") >= 0;
+
     // (1) Audio Mode
     const deviceModeRow = useMemo(() => {
+        if (webEdition) {
+            return (
+                <div className="config-sub-area-control">
+                    <div className="config-sub-area-control-title">AUDIO:</div>
+                    <div className="config-sub-area-control-field"></div>
+                </div>
+            );
+        }
         const enableServerAudio = serverSetting.serverSetting.enableServerAudio;
         const clientChecked = enableServerAudio == 1 ? false : true;
         const serverChecked = enableServerAudio == 1 ? true : false;

client/lib/worklet/src/voice-changer-worklet-processor.ts

@@ -108,26 +108,17 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
         //     this.trancateBuffer();
         // }
         if (this.playBuffer.length > (f32Data.length / this.BLOCK_SIZE) * 1.5) {
-      console.log(
+            console.log(`[worklet] Truncate ${this.playBuffer.length} > ${f32Data.length / this.BLOCK_SIZE}`);
-        `[worklet] Truncate ${this.playBuffer.length} > ${
-          f32Data.length / this.BLOCK_SIZE
-        }`
-      );
             this.trancateBuffer();
         }
 
-    const concatedF32Data = new Float32Array(
+        const concatedF32Data = new Float32Array(this.unpushedF32Data.length + f32Data.length);
-      this.unpushedF32Data.length + f32Data.length
-    );
         concatedF32Data.set(this.unpushedF32Data);
         concatedF32Data.set(f32Data, this.unpushedF32Data.length);
 
         const chunkNum = Math.floor(concatedF32Data.length / this.BLOCK_SIZE);
         for (let i = 0; i < chunkNum; i++) {
-      const block = concatedF32Data.slice(
+            const block = concatedF32Data.slice(i * this.BLOCK_SIZE, (i + 1) * this.BLOCK_SIZE);
-        i * this.BLOCK_SIZE,
-        (i + 1) * this.BLOCK_SIZE
-      );
             this.playBuffer.push(block);
         }
         this.unpushedF32Data = concatedF32Data.slice(chunkNum * this.BLOCK_SIZE);
@@ -141,11 +132,7 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
         this.port.postMessage(volumeResponse);
     };
 
-  process(
+    process(_inputs: Float32Array[][], outputs: Float32Array[][], _parameters: Record<string, Float32Array>) {
-    _inputs: Float32Array[][],
-    outputs: Float32Array[][],
-    _parameters: Record<string, Float32Array>
-  ) {
         if (!this.initialized) {
             console.warn("[worklet] worklet_process not ready");
             return true;
@@ -201,7 +188,4 @@ class VoiceChangerWorkletProcessor extends AudioWorkletProcessor {
         return true;
     }
 }
-registerProcessor(
+registerProcessor("voice-changer-worklet-processor", VoiceChangerWorkletProcessor);
-  "voice-changer-worklet-processor",
-  VoiceChangerWorkletProcessor
-);