improve merge

client/demo/src/components/demo/components/207_ServerOpertationRow.tsx

@@ -44,7 +44,6 @@ export const ServerOpertationRow = (props: ServerOpertationRowProps) => {
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
-            guiState.stateControls.showWaitingCheckbox.updateState(false)
         }
         const onReloadClicked = async () => {
             const info = await appState.getInfo()

client/demo/src/components/demo/components/a01_MergeLab.Row.tsx

@@ -12,6 +12,8 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
     const appState = useAppState()
     const [defaultTune, setDefaultTune] = useState<number>(0)
 
+    console.log("mergeElements", mergeElements)
+
     // スロットが変更されたときの初期化処理
     const newSlotChangeKey = useMemo(() => {
         console.log("appState.serverSetting.serverSetting.modelSlots", appState.serverSetting.serverSetting.modelSlots)
@@ -20,7 +22,10 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
         }, "")
     }, [appState.serverSetting.serverSetting.modelSlots])
 
-    useEffect(() => {
+
+    // マージ用データセットの初期化
+    const clearMergeModelSetting = useMemo(() => {
+        return () => {
             // PyTorchモデルだけフィルタリング
             const models = appState.serverSetting.serverSetting.modelSlots.filter(x => { return x.modelFile && x.modelFile.endsWith("onnx") == false })
             if (models.length == 0) {
@@ -28,23 +33,16 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
                 return
             }
 
-        // サンプリングレート、埋め込み次元数、モデルタイプが同一の場合のみ処理可能
-
-        if (
-            models.map(x => { return x.samplingRate }).every((x, _i, arr) => x == arr[0]) &&
-            models.map(x => { return x.embChannels }).every((x, _i, arr) => x == arr[0]) &&
-            models.map(x => { return x.modelType }).every((x, _i, arr) => x == arr[0])
-        ) {
-
             const newMergeElements = models.map((x) => {
-                const elem: MergeElement = { filename: x.modelFile, strength: 100 }
+                const elem: MergeElement = { filename: x.modelFile, strength: 0 }
                 return elem
             })
             setMergeElements(newMergeElements)
-        } else {
-            console.log("not all model is same properties.")
-            setMergeElements([])
         }
+    }, [appState.serverSetting.serverSetting.modelSlots])
+
+    useEffect(() => {
+        clearMergeModelSetting()
     }, [newSlotChangeKey])
 
 
@@ -57,15 +55,44 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
                 files: mergeElements
             })
         }
-        const onMergeElementsChanged = (filename: string, strength: number) => {
-            const newMergeElements = mergeElements.map(x => {
-                if (x.filename != filename) return x
 
-                x.strength = strength
-                return x
-            })
-            setMergeElements(newMergeElements)
+        const onMergeElementsChanged = (filename: string, strength: number) => {
+            console.log("targetelement")
+            const srcElements = mergeElements.filter(x => { return x.strength > 0 })
+            const targetElement = mergeElements.find(x => { return x.filename == filename })
+            if (!targetElement) {
+                console.warn("target model is not found")
+                return
             }
+            // 一つ目の対象モデル
+            if (srcElements.length == 0) {
+                targetElement.strength = strength
+                setMergeElements([...mergeElements])
+                return
+            }
+
+            //二つ目以降
+
+            const srcSample = appState.serverSetting.serverSetting.modelSlots.find(x => { return x.modelFile == srcElements[0].filename })
+            const tgtSample = appState.serverSetting.serverSetting.modelSlots.find(x => { return x.modelFile == filename })
+            if (!srcSample || !tgtSample) {
+                console.warn("target model is not found", srcSample, tgtSample)
+                return
+            }
+            if (
+                srcSample.samplingRate != tgtSample.samplingRate ||
+                srcSample.embChannels != tgtSample.embChannels ||
+                srcSample.modelType != tgtSample.modelType
+            ) {
+                alert("current selected model is not same as the other selected.")
+                return
+            }
+
+            targetElement.strength = strength
+            setMergeElements([...mergeElements])
+            return
+        }
+
         const modelOptions = mergeElements.map((x, index) => {
             let filename = ""
             if (x.filename.length > 0) {
@@ -77,9 +104,25 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
                 )
             }
 
+            const modelInfo = appState.serverSetting.serverSetting.modelSlots.find(y => { return y.modelFile == x.filename })
+            if (!modelInfo) {
                 return (
-                <div key={index} className="merge-field">
-                    <div className="merge-field-elem">{filename}</div>
+                    <div key={index} >
+                    </div>
+                )
+            }
+
+
+            const f0str = modelInfo.f0 == true ? "f0" : "nof0"
+            const srstr = Math.floor(modelInfo.samplingRate / 1000) + "K"
+            const embedstr = modelInfo.embChannels
+            const typestr = modelInfo.modelType == 0 ? "org" : "webui"
+            const metadata = `[${f0str},${srstr},${embedstr},${typestr}]`
+
+
+            return (
+                <div key={index} className="merge-field split-8-2">
+                    <div className="merge-field-elem">{metadata} {filename}</div>
                     <div className="merge-field-elem">
                         <input type="range" className="body-item-input-slider" min="0" max="100" step="1" value={x.strength} onChange={(e) => {
                             onMergeElementsChanged(x.filename, Number(e.target.value))
@@ -94,9 +137,9 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
             <div className="body-row split-3-3-4 left-padding-1 guided">
                 <div className="body-item-title left-padding-1">Model Merger</div>
                 <div className="merge-field-container">
-                    {modelOptions.length == 0 ? <>not PyTorch model or not same type</> : modelOptions}
+                    {modelOptions}
 
-                    <div className="merge-field">
+                    <div className="merge-field split-8-2">
                         <div className="merge-field-elem grey-bold">Default Tune</div>
                         <div className="merge-field-elem">
                             <input type="range" className="body-item-input-slider-2nd" min="-50" max="50" step="1" value={defaultTune} onChange={(e) => {
@@ -110,6 +153,7 @@ export const MergeLabRow = (_props: MergeLabRowProps) => {
                 </div>
                 <div className="body-button-container">
                     <div className="body-button" onClick={onMergeClicked}>merge</div>
+                    <div className="body-button" onClick={clearMergeModelSetting}>clear</div>
                 </div>
             </div>
         )

client/demo/src/css/App.css

@@ -137,6 +137,20 @@ body {
 }
 /* ROW */
 
+.split-8-2 {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    margin: 1px 0px 1px 0px;
+    & > div:nth-child(1) {
+        left: 0px;
+        width: 80%;
+    }
+    & > div:nth-child(2) {
+        left: 80%;
+        width: 20%;
+    }
+}
 .split-6-4 {
     display: flex;
     width: 100%;
@@ -803,7 +817,6 @@ body {
         flex-direction: row;
         .merge-field-elem {
             padding-left: 5px;
-            width: 100%;
         }
         .red {
             color: #f00;