every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Update] Add Starting Up Animation and downloading models progress display.

Browse Source 
Backend: Move the init progressed position 4 to a little bit earlier.
This commit is contained in:
Sakamoto Shiina
2024-11-26 14:44:31 +09:00
parent 83ff143064
commit 70e411daf5
16 changed files with 465 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
src-python/config.json Normal file
View File

@@ -0,0 +1,167 @@
{
"SELECTED_TAB_NO": "1",
"SELECTED_TRANSLATION_ENGINES": {
"1": "CTranslate2",
"2": "CTranslate2",
"3": "CTranslate2"
},
"SELECTED_YOUR_LANGUAGES": {
"1": {
"primary": {
"language": "Japanese",
"country": "Japan"
}
},
"2": {
"primary": {
"language": "Japanese",
"country": "Japan"
}
},
"3": {
"primary": {
"language": "Japanese",
"country": "Japan"
}
}
},
"SELECTED_TARGET_LANGUAGES": {
"1": {
"primary": {
"language": "English",
"country": "United States"
},
"secondary": {
"language": "English",
"country": "United States"
},
"tertiary": {
"language": "English",
"country": "United States"
}
},
"2": {
"primary": {
"language": "English",
"country": "United States"
},
"secondary": {
"language": "English",
"country": "United States"
},
"tertiary": {
"language": "English",
"country": "United States"
}
},
"3": {
"primary": {
"language": "English",
"country": "United States"
},
"secondary": {
"language": "English",
"country": "United States"
},
"tertiary": {
"language": "English",
"country": "United States"
}
}
},
"SELECTED_TRANSCRIPTION_ENGINE": "Google",
"MULTI_LANGUAGE_TRANSLATION": false,
"CONVERT_MESSAGE_TO_ROMAJI": false,
"CONVERT_MESSAGE_TO_HIRAGANA": false,
"MAIN_WINDOW_SIDEBAR_COMPACT_MODE": false,
"TRANSPARENCY": 100,
"UI_SCALING": 100,
"TEXTBOX_UI_SCALING": 100,
"MESSAGE_BOX_RATIO": 10,
"FONT_FAMILY": "Yu Gothic UI",
"UI_LANGUAGE": "en",
"RESTORE_MAIN_WINDOW_GEOMETRY": true,
"MAIN_WINDOW_GEOMETRY": {
"x_pos": 0,
"y_pos": 0,
"width": 870,
"height": 654
},
"AUTO_MIC_SELECT": true,
"SELECTED_MIC_HOST": "MME",
"SELECTED_MIC_DEVICE": "Headset Microphone (Oculus Virt",
"MIC_THRESHOLD": 300,
"MIC_AUTOMATIC_THRESHOLD": false,
"MIC_RECORD_TIMEOUT": 3,
"MIC_PHRASE_TIMEOUT": 3,
"MIC_MAX_PHRASES": 10,
"MIC_WORD_FILTER": [],
"MIC_AVG_LOGPROB": -0.8,
"MIC_NO_SPEECH_PROB": 0.6,
"AUTO_SPEAKER_SELECT": true,
"SELECTED_SPEAKER_DEVICE": "ヘッドホン (Oculus Virtual Audio Device) [Loopback]",
"SPEAKER_THRESHOLD": 300,
"SPEAKER_AUTOMATIC_THRESHOLD": false,
"SPEAKER_RECORD_TIMEOUT": 3,
"SPEAKER_PHRASE_TIMEOUT": 3,
"SPEAKER_MAX_PHRASES": 10,
"SPEAKER_AVG_LOGPROB": -0.8,
"SPEAKER_NO_SPEECH_PROB": 0.6,
"OSC_IP_ADDRESS": "127.0.0.1",
"OSC_PORT": 9000,
"AUTH_KEYS": {
"DeepL_API": null
},
"USE_EXCLUDE_WORDS": true,
"SELECTED_TRANSLATION_COMPUTE_DEVICE": {
"device": "cpu",
"device_index": 0,
"device_name": "cpu"
},
"SELECTED_TRANSCRIPTION_COMPUTE_DEVICE": {
"device": "cpu",
"device_index": 0,
"device_name": "cpu"
},
"CTRANSLATE2_WEIGHT_TYPE": "small",
"WHISPER_WEIGHT_TYPE": "base",
"AUTO_CLEAR_MESSAGE_BOX": true,
"SEND_ONLY_TRANSLATED_MESSAGES": false,
"SEND_MESSAGE_BUTTON_TYPE": "show",
"OVERLAY_SMALL_LOG": false,
"OVERLAY_SMALL_LOG_SETTINGS": {
"x_pos": 0.0,
"y_pos": 0.0,
"z_pos": 0.0,
"x_rotation": 0.0,
"y_rotation": 0.0,
"z_rotation": 0.0,
"display_duration": 5,
"fadeout_duration": 2,
"opacity": 1.0,
"ui_scaling": 1.0,
"tracker": "HMD"
},
"OVERLAY_LARGE_LOG": false,
"OVERLAY_LARGE_LOG_SETTINGS": {
"x_pos": 0.0,
"y_pos": 0.0,
"z_pos": 0.0,
"x_rotation": 0.0,
"y_rotation": 0.0,
"z_rotation": 0.0,
"display_duration": 5,
"fadeout_duration": 2,
"opacity": 1.0,
"ui_scaling": 0.015625,
"tracker": "LeftHand"
},
"SEND_MESSAGE_TO_VRC": true,
"SEND_MESSAGE_FORMAT": "[message]",
"SEND_MESSAGE_FORMAT_WITH_T": "[message]([translation])",
"RECEIVED_MESSAGE_FORMAT": "[message]",
"RECEIVED_MESSAGE_FORMAT_WITH_T": "[message]([translation])",
"SEND_RECEIVED_MESSAGE_TO_VRC": false,
"LOGGER_FEATURE": false,
"VRC_MIC_MUTE_SYNC": false
}

4
src-python/webui_controller.py
View File

@@ -1750,6 +1750,8 @@ class Controller:
if config.LOGGER_FEATURE is True:
model.startLogger()
self.initializationProgress(4)
# init OSC receive
printLog("Init OSC Receive")
model.startReceiveOSC()
@@ -1772,8 +1774,6 @@ class Controller:
if (config.OVERLAY_SMALL_LOG is True or config.OVERLAY_LARGE_LOG is True):
model.startOverlay()
self.initializationProgress(4)
printLog("Update settings")
self.updateConfigSettings()

4
src-tauri/tauri.conf.json
View File

@@ -40,8 +40,8 @@
{
"title": "VRCT",
"center": true,
"width": 400,
"height": 400,
"width": 450,
"height": 220,
"minWidth": 400,
"minHeight": 200,
"transparent": true,

2
src-ui/app/App.jsx
View File

@@ -88,8 +88,6 @@ const UiLanguageController = () => {
const { i18n } = useTranslation();
useEffect(() => {
console.log(currentUiLanguage.data);
i18n.changeLanguage(currentUiLanguage.data);
}, [currentUiLanguage.data]);
return null;

47
src-ui/app/splash_component/SplashComponent.jsx
View File

@@ -1,51 +1,12 @@
import { useState, useEffect } from "react";
import CircularProgress from '@mui/material/CircularProgress';
import styles from "./SplashComponent.module.scss";
import {
useCTranslate2WeightTypeStatus,
useWhisperWeightTypeStatus,
} from "@logics_configs";
import { StartUpProgressContainer } from "./start_up_progress_container/StartUpProgressContainer/";
import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
export const SplashComponent = () => {
const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
const [circular_color, setCircularColor] = useState("");
useEffect(() => {
const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
setCircularColor(circular_color.trim());
}, []);
console.log(currentCTranslate2WeightTypeStatus);
const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
console.log(c_translate_2, whisper);
return (
<div>
<DownloadModelsProgress color={circular_color} progress={c_translate_2.progress}/>
<CircularProgress size="14rem" sx={{ color: circular_color }}/>
<DownloadModelsProgress color={circular_color} progress={whisper.progress}/>
</div>
);
};
const DownloadModelsProgress = (props) => {
if (props.progress === null) return null;
const circular_progress = Math.floor(props.progress / 10) * 10;
return(
<div className={styles.progress_container}>
<CircularProgress
variant={(props.progress === 100) ? "indeterminate" : "determinate"}
value={circular_progress}
size="4rem"
sx={{ color: props.color }}
/>
<p className={styles.progress_label}>{`${Math.round(props.progress)}%`}</p>
<StartUpProgressContainer />
<DownloadModelsContainer />
</div>
);
};

69
src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx Normal file
View File

@@ -0,0 +1,69 @@
import styles from "./DownloadModelsContainer.module.scss";
import vrct_logo_for_dark_mode from "@images/vrct_logo_for_dark_mode.png";
import vrct_now_downloading from "@images/VRCT_now_downloading.png";
import {
useCTranslate2WeightTypeStatus,
useWhisperWeightTypeStatus,
} from "@logics_configs";
export const DownloadModelsContainer = () => {
const { currentCTranslate2WeightTypeStatus } = useCTranslate2WeightTypeStatus();
const { currentWhisperWeightTypeStatus } = useWhisperWeightTypeStatus();
const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small");
const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
if (c_translate_2.progress === null && whisper.progress === null) return null;
return (
<div className={styles.container}>
<div className={styles.progress_container}>
<DownloadModelsProgress progress={c_translate_2.progress} type_label="CTranslate2 Model"/>
<DownloadModelsProgress progress={whisper.progress} type_label="Whisper Model"/>
</div>
<div className={styles.labels_wrapper}>
<img src={vrct_logo_for_dark_mode} className={styles.logo_img}/>
<img src={vrct_now_downloading} className={styles.vrct_now_downloading_img}/>
</div>
</div>
);
};
const DownloadModelsProgress = (props) => {
if (props.progress === null) return null;
const circular_progress = Math.floor(props.progress / 5) * 5;
const progress_color = generateGradientColor({
value: circular_progress,
colorStart: [242, 242, 242], // #f2f2f2
colorEnd: [72, 164, 149], // #48a495
});
return(
<div className={styles.progress_bar_container}>
<div className={styles.progress_bar_wrapper}>
<div
className={styles.progress_bar}
style={{
width: `${props.progress}%`,
backgroundColor: progress_color,
}}
/>
</div>
<p className={styles.progress_label}>{`${props.type_label}: ${Math.round(props.progress)}%`}</p>
</div>
);
};
const generateGradientColor = ({ value, colorStart, colorEnd }) => {
const normalizedValue = Math.max(0, Math.min(100, value)) / 100;
const interpolatedColor = colorStart.map((start, i) => {
const end = colorEnd[i];
return Math.round(start + (end - start) * normalizedValue);
});
const hexColor = `#${interpolatedColor.map(val => val.toString(16).padStart(2, '0')).join('')}`;
return hexColor;
};

63
src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss Normal file
View File

@@ -0,0 +1,63 @@
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background-color: var(--dark_888_color);
}
.progress_container {
position: absolute;
top: 77%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
gap: 6px;
display: flex;
flex-direction: column;
}
.labels_wrapper {
position: relative;
width: 100%;
height: 100%;
}
.logo_img {
position: absolute;
top: 42%;
left: 50%;
width: 280px;
transform: translate(-50%, -50%);
}
.vrct_now_downloading_img {
position: absolute;
bottom: 2px;
right: 10px;
width: 300px;
}
.progress_bar_container {
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
}
.progress_bar_wrapper {
background-color: var(--dark_800_color);
}
$progress_ease: cubic-bezier(0, 1, 0.75, 1);
.progress_bar {
height: 8px;
transition: width 0.3s $progress_ease;
}
.progress_label {
text-align: end;
font-size: 12px;
color: var(--dark_400_color);
}

39
src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx Normal file
View File

@@ -0,0 +1,39 @@
import clsx from "clsx";
import styles from "./StartUpProgressContainer.module.scss";
import { useInitProgress } from "@logics_common";
import chat_white_square from "@images/chato_white_square.png";
import vrct_explanation from "@images/vrchat_chatbox_trasnlator_transcription.png";
import vrct_starting_up from "@images/vrct_starting_up.png";
export const StartUpProgressContainer = () => {
const { currentInitProgress } = useInitProgress();
const progress = currentInitProgress.data;
return (
<div className={styles.container}>
<div className={styles.progress_bar_wrapper}>
{[...Array(4)].map((_, index) => (
<div
key={index}
className={clsx(styles.progress_bar, {
[styles.progressed]: index < progress && progress !== 0,
})}
>
{index === 3
?
<div className={styles.chato_box}>
<img src={chat_white_square} className={styles.chato_img}/>
</div>
: null
}
</div>
))}
</div>
<div className={styles.labels_wrapper}>
<img src={vrct_starting_up} className={styles.vrct_starting_up_img}/>
<img src={vrct_explanation} className={styles.vrct_explanation_img}/>
</div>
</div>
);
};

100
src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss Normal file
View File

@@ -0,0 +1,100 @@
$progress_ease: cubic-bezier(0, 1, 0.75, 1);
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.progress_bar_wrapper {
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 36px;
}
.progress_bar {
width: 60px;
height: 2px;
position: relative;
}
.progress_bar::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background-color: var(--dark_200_color);
transition: width 0.3s $progress_ease;
}
.progress_bar.progressed::before {
width: 100%;
}
.progress_bar:last-child::before {
background-color: var(--primary_400_color);
}
.chato_box {
position: relative;
top: 0;
transform: translateY(-100%);
width: 100%;
height: 8rem;
overflow: hidden;
}
.chato_img {
position: absolute;
top: 150%;
left: 51%;
transform: translate(-50%, -50%) rotate(-90deg);
width: 2.8rem;
transition: all 0.3s $progress_ease 0.2s;
}
.progress_bar.progressed .chato_img {
top: 50%;
transform: translate(-50%, -50%) rotate(30deg);
animation: infinite-rotation 20s linear infinite 0.5s;
}
@keyframes infinite-rotation {
from {
transform: translate(-50%, -50%) rotate(30deg);
}
to {
transform: translate(-50%, -50%) rotate(390deg);
}
}
.labels_wrapper {
position: relative;
width: 100%;
height: 100%;
}
.vrct_starting_up_img {
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
// transform: translate(-50%, 50%);
}
.vrct_explanation_img {
position: absolute;
bottom: 4px;
right: 10px;
width: 280px;
// transform: translate(-50%, 50%);
}

BIN
src-ui/assets/VRCT_now_downloading.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src-ui/assets/vrchat_chatbox_trasnlator_transcription.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src-ui/assets/vrct_starting_up.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

1
src-ui/logics/common/index.js
View File

@@ -1,3 +1,4 @@
export { useInitProgress } from "./useInitProgress";
export { useIsBackendReady } from "./useIsBackendReady";
export { useWindow } from "./useWindow";
export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage";

10
src-ui/logics/common/useInitProgress.js Normal file
View File

@@ -0,0 +1,10 @@
import { useStore_InitProgress } from "@store";
export const useInitProgress = () => {
const { currentInitProgress, updateInitProgress } = useStore_InitProgress();
return {
currentInitProgress,
updateInitProgress,
};
};

9
src-ui/logics/useReceiveRoutes.js
View File

@@ -2,6 +2,7 @@ import { translator_status } from "@ui_configs";
import { arrayToObject } from "@utils";
import {
useInitProgress,
useIsBackendReady,
useWindow,
useMessage,
@@ -63,6 +64,7 @@ import {
} from "@logics_configs";
export const useReceiveRoutes = () => {
const { updateInitProgress } = useInitProgress();
const { updateIsBackendReady } = useIsBackendReady();
const { restoreWindowGeometry } = useWindow();
const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
@@ -156,6 +158,7 @@ export const useReceiveRoutes = () => {
const routes = {
// Common
"/run/feed_watchdog": () => {},
"/run/initialization_progress": updateInitProgress,
"/get/data/main_window_geometry": restoreWindowGeometry,
"/set/data/main_window_geometry": () => {},
"/run/open_filepath_logs": () => console.log("Opened Directory, Message Logs"),
@@ -311,8 +314,9 @@ export const useReceiveRoutes = () => {
"/get/data/selectable_ctranslate2_weight_type_dict": updateDownloadedCTranslate2WeightTypeStatus,
"/run/download_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
"/run/downloaded_ctranslate2_weight": downloadedCTranslate2WeightType,
"/run/download_ctranslate2_weight": () => {},
"/run/download_progress_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
// Transcription
"/get/data/mic_record_timeout": updateMicRecordTimeout,
@@ -370,8 +374,9 @@ export const useReceiveRoutes = () => {
"/get/data/selectable_whisper_weight_type_dict": updateDownloadedWhisperWeightTypeStatus,
"/run/download_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
"/run/downloaded_whisper_weight": downloadedWhisperWeightType,
"/run/download_whisper_weight": () => {},
"/run/download_progress_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
// VR
"/get/data/overlay_small_log": updateIsEnabledOverlaySmallLog,

1
src-ui/store.js
View File

@@ -110,6 +110,7 @@ export const { atomInstance: Atom_MainFunctionsStateMemory, useHook: useStore_Ma
}, "MainFunctionsStateMemory");
export const { atomInstance: Atom_OpenedQuickSetting, useHook: useStore_OpenedQuickSetting } = createAtomWithHook("", "OpenedQuickSetting");
export const { atomInstance: Atom_IsSoftwareUpdateAvailable, useHook: useStore_IsSoftwareUpdateAvailable } = createAtomWithHook(false, "IsSoftwareUpdateAvailable");
export const { atomInstance: Atom_InitProgress, useHook: useStore_InitProgress } = createAtomWithHook(0, "InitProgress");
// Main Page
// Functions