diff --git a/src-python/config.json b/src-python/config.json new file mode 100644 index 00000000..9b1bcff9 --- /dev/null +++ b/src-python/config.json @@ -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 +} \ No newline at end of file diff --git a/src-python/webui_controller.py b/src-python/webui_controller.py index 139663e4..a1070aa0 100644 --- a/src-python/webui_controller.py +++ b/src-python/webui_controller.py @@ -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() diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index f48c4e72..ab1e6f0a 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -40,8 +40,8 @@ { "title": "VRCT", "center": true, - "width": 400, - "height": 400, + "width": 450, + "height": 220, "minWidth": 400, "minHeight": 200, "transparent": true, diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index dfabbafc..46edc86a 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -88,8 +88,6 @@ const UiLanguageController = () => { const { i18n } = useTranslation(); useEffect(() => { - console.log(currentUiLanguage.data); - i18n.changeLanguage(currentUiLanguage.data); }, [currentUiLanguage.data]); return null; diff --git a/src-ui/app/splash_component/SplashComponent.jsx b/src-ui/app/splash_component/SplashComponent.jsx index 6a665423..6de17662 100644 --- a/src-ui/app/splash_component/SplashComponent.jsx +++ b/src-ui/app/splash_component/SplashComponent.jsx @@ -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 (
- - - -
- ); -}; - -const DownloadModelsProgress = (props) => { - if (props.progress === null) return null; - const circular_progress = Math.floor(props.progress / 10) * 10; - - return( -
- -

{`${Math.round(props.progress)}%`}

+ +
); }; \ No newline at end of file diff --git a/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx new file mode 100644 index 00000000..9e3d8e67 --- /dev/null +++ b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.jsx @@ -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 ( +
+
+ + +
+
+ + +
+
+ ); +}; + + +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( +
+
+
+
+

{`${props.type_label}: ${Math.round(props.progress)}%`}

+
+ ); +}; + + +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; +}; \ No newline at end of file diff --git a/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss new file mode 100644 index 00000000..0eabf677 --- /dev/null +++ b/src-ui/app/splash_component/download_models_container/DownloadModelsContainer.module.scss @@ -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); +} \ No newline at end of file diff --git a/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx new file mode 100644 index 00000000..93843faa --- /dev/null +++ b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.jsx @@ -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 ( +
+
+ {[...Array(4)].map((_, index) => ( +
+ {index === 3 + ? +
+ +
+ : null + } +
+ ))} +
+
+ + +
+
+ ); +}; diff --git a/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss new file mode 100644 index 00000000..23646c92 --- /dev/null +++ b/src-ui/app/splash_component/start_up_progress_container/StartUpProgressContainer.module.scss @@ -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%); +} \ No newline at end of file diff --git a/src-ui/assets/VRCT_now_downloading.png b/src-ui/assets/VRCT_now_downloading.png new file mode 100644 index 00000000..1b73375a Binary files /dev/null and b/src-ui/assets/VRCT_now_downloading.png differ diff --git a/src-ui/assets/vrchat_chatbox_trasnlator_transcription.png b/src-ui/assets/vrchat_chatbox_trasnlator_transcription.png new file mode 100644 index 00000000..5c4304d8 Binary files /dev/null and b/src-ui/assets/vrchat_chatbox_trasnlator_transcription.png differ diff --git a/src-ui/assets/vrct_starting_up.png b/src-ui/assets/vrct_starting_up.png new file mode 100644 index 00000000..5e366749 Binary files /dev/null and b/src-ui/assets/vrct_starting_up.png differ diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index 4d4c52b9..de903104 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -1,3 +1,4 @@ +export { useInitProgress } from "./useInitProgress"; export { useIsBackendReady } from "./useIsBackendReady"; export { useWindow } from "./useWindow"; export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; diff --git a/src-ui/logics/common/useInitProgress.js b/src-ui/logics/common/useInitProgress.js new file mode 100644 index 00000000..e0fee792 --- /dev/null +++ b/src-ui/logics/common/useInitProgress.js @@ -0,0 +1,10 @@ +import { useStore_InitProgress } from "@store"; + +export const useInitProgress = () => { + const { currentInitProgress, updateInitProgress } = useStore_InitProgress(); + + return { + currentInitProgress, + updateInitProgress, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index d9c66f97..0e120d23 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -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, diff --git a/src-ui/store.js b/src-ui/store.js index 7b4c64a4..4a426d0c 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -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