mirror of
https://github.com/w-okada/voice-changer.git
synced 2025-02-02 16:23:58 +03:00
bugfix: 200slot gui
This commit is contained in:
w-okada
parent
2777896bb0
commit
8b5eb32047
101
client/demo/dist/index.js
vendored
101
client/demo/dist/index.js
vendored
File diff suppressed because one or more lines are too long
@ -1,83 +1,114 @@
|
||||
import React, { useMemo } from "react"
|
||||
import { useAppState } from "../../../001_provider/001_AppStateProvider"
|
||||
import { useGuiState } from "../001_GuiStateProvider"
|
||||
import { useMessageBuilder } from "../../../hooks/useMessageBuilder"
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { useAppState } from "../../../001_provider/001_AppStateProvider";
|
||||
import { useGuiState } from "../001_GuiStateProvider";
|
||||
import { useMessageBuilder } from "../../../hooks/useMessageBuilder";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
export type ModelSlotAreaProps = {
|
||||
}
|
||||
export type ModelSlotAreaProps = {};
|
||||
|
||||
const SortTypes = {
|
||||
slot: "slot",
|
||||
name: "name",
|
||||
} as const;
|
||||
export type SortTypes = (typeof SortTypes)[keyof typeof SortTypes];
|
||||
|
||||
export const ModelSlotArea = (_props: ModelSlotAreaProps) => {
|
||||
const { serverSetting, getInfo } = useAppState()
|
||||
const guiState = useGuiState()
|
||||
const messageBuilderState = useMessageBuilder()
|
||||
const { serverSetting, getInfo } = useAppState();
|
||||
const guiState = useGuiState();
|
||||
const messageBuilderState = useMessageBuilder();
|
||||
const [sortType, setSortType] = useState<SortTypes>("slot");
|
||||
|
||||
useMemo(() => {
|
||||
messageBuilderState.setMessage(__filename, "edit", { "ja": "編集", "en": "edit" })
|
||||
}, [])
|
||||
|
||||
messageBuilderState.setMessage(__filename, "edit", { ja: "編集", en: "edit" });
|
||||
}, []);
|
||||
|
||||
const modelTiles = useMemo(() => {
|
||||
if (!serverSetting.serverSetting.modelSlots) {
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
return serverSetting.serverSetting.modelSlots.map((x, index) => {
|
||||
if (!x.modelFile || x.modelFile.length == 0) {
|
||||
return null
|
||||
}
|
||||
const tileContainerClass = index == serverSetting.serverSetting.modelSlotIndex ? "model-slot-tile-container-selected" : "model-slot-tile-container"
|
||||
const name = x.name.length > 8 ? x.name.substring(0, 7) + "..." : x.name
|
||||
const iconElem = x.iconFile.length > 0 ?
|
||||
<>
|
||||
<img className="model-slot-tile-icon" src={x.iconFile} alt={x.name} />
|
||||
<div className="model-slot-tile-vctype">{x.voiceChangerType}</div>
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<div className="model-slot-tile-icon-no-entry">no image</div>
|
||||
<div className="model-slot-tile-vctype">{x.voiceChangerType}</div>
|
||||
</>
|
||||
const modelSlots =
|
||||
sortType == "slot"
|
||||
? serverSetting.serverSetting.modelSlots
|
||||
: serverSetting.serverSetting.modelSlots.slice().sort((a, b) => {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
|
||||
const clickAction = async () => {
|
||||
const dummyModelSlotIndex = (Math.floor(Date.now() / 1000)) * 1000 + index
|
||||
await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, modelSlotIndex: dummyModelSlotIndex })
|
||||
setTimeout(() => { // quick hack
|
||||
getInfo()
|
||||
}, 1000 * 2)
|
||||
}
|
||||
return modelSlots
|
||||
.map((x, index) => {
|
||||
if (!x.modelFile || x.modelFile.length == 0) {
|
||||
return null;
|
||||
}
|
||||
const tileContainerClass = x.id == serverSetting.serverSetting.modelSlotIndex ? "model-slot-tile-container-selected" : "model-slot-tile-container";
|
||||
const name = x.name.length > 8 ? x.name.substring(0, 7) + "..." : x.name;
|
||||
const iconElem =
|
||||
x.iconFile.length > 0 ? (
|
||||
<>
|
||||
<img className="model-slot-tile-icon" src={x.iconFile} alt={x.name} />
|
||||
<div className="model-slot-tile-vctype">{x.voiceChangerType}</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="model-slot-tile-icon-no-entry">no image</div>
|
||||
<div className="model-slot-tile-vctype">{x.voiceChangerType}</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div key={index} className={tileContainerClass} onClick={clickAction}>
|
||||
<div className="model-slot-tile-icon-div">
|
||||
{iconElem}
|
||||
const clickAction = async () => {
|
||||
const dummyModelSlotIndex = Math.floor(Date.now() / 1000) * 1000 + x.id;
|
||||
await serverSetting.updateServerSettings({ ...serverSetting.serverSetting, modelSlotIndex: dummyModelSlotIndex });
|
||||
setTimeout(() => {
|
||||
// quick hack
|
||||
getInfo();
|
||||
}, 1000 * 2);
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={index} className={tileContainerClass} onClick={clickAction}>
|
||||
<div className="model-slot-tile-icon-div">{iconElem}</div>
|
||||
<div className="model-slot-tile-dscription">{name}</div>
|
||||
</div>
|
||||
<div className="model-slot-tile-dscription">
|
||||
{name}
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
}).filter(x => x != null)
|
||||
}, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex])
|
||||
|
||||
);
|
||||
})
|
||||
.filter((x) => x != null);
|
||||
}, [serverSetting.serverSetting.modelSlots, serverSetting.serverSetting.modelSlotIndex, sortType]);
|
||||
|
||||
const modelSlotArea = useMemo(() => {
|
||||
const onModelSlotEditClicked = () => {
|
||||
guiState.stateControls.showModelSlotManagerCheckbox.updateState(true)
|
||||
}
|
||||
guiState.stateControls.showModelSlotManagerCheckbox.updateState(true);
|
||||
};
|
||||
const sortSlotByIdClass = sortType == "slot" ? "model-slot-sort-button-active" : "model-slot-sort-button";
|
||||
const sortSlotByNameClass = sortType == "name" ? "model-slot-sort-button-active" : "model-slot-sort-button";
|
||||
return (
|
||||
<div className="model-slot-area">
|
||||
<div className="model-slot-panel">
|
||||
<div className="model-slot-tiles-container">{modelTiles}</div>
|
||||
<div className="model-slot-buttons">
|
||||
<div className="model-slot-sort-buttons">
|
||||
<div
|
||||
className={sortSlotByIdClass}
|
||||
onClick={() => {
|
||||
setSortType("slot");
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={["fas", "arrow-down-1-9"]} style={{ fontSize: "1rem" }} />
|
||||
</div>
|
||||
<div
|
||||
className={sortSlotByNameClass}
|
||||
onClick={() => {
|
||||
setSortType("name");
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={["fas", "arrow-down-a-z"]} style={{ fontSize: "1rem" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="model-slot-button" onClick={onModelSlotEditClicked}>
|
||||
{messageBuilderState.getMessage(__filename, "edit")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}, [modelTiles])
|
||||
);
|
||||
}, [modelTiles, sortType]);
|
||||
|
||||
return modelSlotArea
|
||||
}
|
||||
return modelSlotArea;
|
||||
};
|
||||
|
||||
@ -757,6 +757,18 @@ body {
|
||||
max-height: 60vh;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #f7cfec80;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.model-slot {
|
||||
height: 5rem;
|
||||
@ -1152,12 +1164,28 @@ body {
|
||||
flex-wrap: wrap;
|
||||
overflow-y: scroll;
|
||||
max-height: 12rem;
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #f7cfec80;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* width: calc(30rem + 40px + 10px); */
|
||||
}
|
||||
|
||||
.model-slot-buttons {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: 5px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 4rem;
|
||||
.model-slot-button {
|
||||
border: solid 2px #999;
|
||||
color: white;
|
||||
@ -1166,10 +1194,41 @@ body {
|
||||
background: #333;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
}
|
||||
.model-slot-button:hover {
|
||||
border: solid 2px #faa;
|
||||
}
|
||||
.model-slot-sort-buttons {
|
||||
height: 50%;
|
||||
.model-slot-sort-button {
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 4px;
|
||||
background: #333;
|
||||
border: solid 2px #444;
|
||||
cursor: pointer;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
}
|
||||
.model-slot-sort-button-active {
|
||||
color: white;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 4px;
|
||||
background: #595;
|
||||
border: solid 2px #595;
|
||||
cursor: pointer;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
width: 3rem;
|
||||
}
|
||||
.model-slot-sort-button:hover {
|
||||
border: solid 2px #faa;
|
||||
background: #343;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1639,6 +1698,19 @@ audio::-webkit-media-controls-overlay-enclosure{
|
||||
width: 70%;
|
||||
overflow-y: scroll;
|
||||
max-height: 20rem;
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #f7cfec80;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.merge-lab-model-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -193,6 +193,7 @@ export type VoiceChangerServerSetting = {
|
||||
}
|
||||
|
||||
type ModelSlot = {
|
||||
id: number
|
||||
voiceChangerType: VoiceChangerType
|
||||
name: string,
|
||||
description: string,
|
||||
|
||||
@ -9,6 +9,7 @@ import json
|
||||
|
||||
@dataclass
|
||||
class ModelSlot:
|
||||
id: int = -1
|
||||
voiceChangerType: VoiceChangerType | None = None
|
||||
name: str = ""
|
||||
description: str = ""
|
||||
@ -153,6 +154,7 @@ def loadAllSlotInfo(model_dir: str):
|
||||
slotInfos: list[ModelSlots] = []
|
||||
for slotIndex in range(MAX_SLOT_NUM):
|
||||
slotInfo = loadSlotInfo(model_dir, slotIndex)
|
||||
slotInfo.id = slotIndex
|
||||
slotInfos.append(slotInfo)
|
||||
return slotInfos
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user