update launcher

This commit is contained in:
wataru 2023-04-18 05:12:47 +09:00
parent 7d96ab4264
commit c2757716ba
4 changed files with 1647 additions and 62 deletions

View File

@ -1 +1,10 @@
<!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html> <!DOCTYPE html>
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8" />
<title>Voice Changer Client Demo</title>
<script defer src="index.js"></script></head>
<body style="width: 100%; height: 100%; margin: 0px">
<div id="app" style="width: 100%; height: 100%"></div>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -1,31 +0,0 @@
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
/**
* @license React
* react-dom.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* react.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* @license React
* scheduler.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

View File

@ -1,5 +1,5 @@
import { useIndexedDB } from "@dannadori/voice-changer-client-js" import { ClientType, useIndexedDB } from "@dannadori/voice-changer-client-js"
import React from "react" import React, { useMemo } from "react"
import { Title } from "./001-1_Title" import { Title } from "./001-1_Title"
import { useAppRoot } from "./001_provider/001_AppRootProvider" import { useAppRoot } from "./001_provider/001_AppRootProvider"
import { INDEXEDDB_KEY_DEFAULT_MODEL_TYPE } from "./const" import { INDEXEDDB_KEY_DEFAULT_MODEL_TYPE } from "./const"
@ -7,35 +7,50 @@ import { INDEXEDDB_KEY_DEFAULT_MODEL_TYPE } from "./const"
export const ClientSelector = () => { export const ClientSelector = () => {
const { setClientType } = useAppRoot() const { setClientType } = useAppRoot()
const { setItem } = useIndexedDB({ clientType: null }) const { setItem } = useIndexedDB({ clientType: null })
const onClientTypeClicked = (clientType: ClientType) => {
setClientType(clientType);
setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, clientType)
}
const selectableClientTypes = useMemo(() => {
const ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf("mac os x") !== -1) {
return ["MMVCv13", "MMVCv15", "so-vits-svc-40", "RVC"] as ClientType[]
} else {
return ["MMVCv13", "MMVCv15", "so-vits-svc-40", "so-vits-svc-40v2", "RVC", "DDSP-SVC"] as ClientType[]
}
}, [])
const selectableClientTypesRowItems = useMemo(() => {
return selectableClientTypes.flatMap((_, i, a) => { return i % 2 ? [] : [a.slice(i, i + 2)] })
}, [])
const selectableClientTypesRow = useMemo(() => {
return selectableClientTypesRowItems.map((x, index) => {
return ( return (
<div key={index} className="body-row split-1-8-1 left-padding-1 ">
<div></div>
<div className="body-button-container">
{
x.map(y => {
return <div key={y} className="body-button w40 bold" onClick={() => { onClientTypeClicked(y) }}>{y}</div>
})
}
</div>
<div></div>
</div>
)
})
}, [])
return (
<div className="main-body"> <div className="main-body">
<Title lineNum={1} mainTitle={"Realtime Voice Changer Client"} subTitle={"launcher"} ></Title> <Title lineNum={1} mainTitle={"Realtime Voice Changer Client"} subTitle={"launcher"} ></Title>
<div className="body-row split-1-8-1 left-padding-1 "> {selectableClientTypesRow}
<div></div>
<div className="body-button-container">
<div className="body-button w40 bold" onClick={() => { setClientType("MMVCv13"); setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, "MMVCv13") }}>MMVCv13</div>
<div className="body-button w40 bold" onClick={() => { setClientType("MMVCv15"); setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, "MMVCv15") }}>MMVCv15</div>
</div>
<div></div>
</div>
<div className="body-row split-1-8-1 left-padding-1 ">
<div></div>
<div className="body-button-container">
<div className="body-button w40 bold" onClick={() => { setClientType("so-vits-svc-40"); setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, "so-vits-svc-40") }}>so-vits-svc-40</div>
<div className="body-button w40 bold" onClick={() => { setClientType("so-vits-svc-40v2"); setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, "so-vits-svc-40v2") }}>so-vits-svc-40v2</div>
</div>
<div></div>
</div>
<div className="body-row split-1-8-1 left-padding-1 ">
<div></div>
<div className="body-button-container">
<div className="body-button w40 bold" onClick={() => { setClientType("RVC"); setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, "RVC") }}>RVC</div>
<div className="body-button w40 bold" onClick={() => { setClientType("DDSP-SVC"); setItem(INDEXEDDB_KEY_DEFAULT_MODEL_TYPE, "DDSP-SVC") }}>DDSP-SVC(exp.)</div>
</div>
<div></div>
</div>
</div> </div>
) )