12 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/src/components/ProgressBar.tsx:
--------------------------------------------------------------------------------
1 | export function ProgressBar({ progress }: { progress: number }) {
2 | return (
3 |
11 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/hooks/useDownload.ts:
--------------------------------------------------------------------------------
1 | import { listen } from "@tauri-apps/api/event";
2 | import { useCallback, useEffect } from "react";
3 | import { createXStaManager } from "xsta";
4 | import { Server } from "../services/server";
5 |
6 | type DownloadStatus =
7 | | "idle"
8 | | "downloading"
9 | | "unzipping"
10 | | "success"
11 | | "failed";
12 |
13 | const kDownloadStates = createXStaManager({
14 | key: "DownloadStates",
15 | initialState: {
16 | status: "idle" as DownloadStatus,
17 | progress: 0,
18 | error: null as any,
19 | },
20 | });
21 |
22 | export function useDownload() {
23 | const [states, setStates] = kDownloadStates.useState();
24 |
25 | useEffect(() => {
26 | const setup = async () => {
27 | const isDownloaded = await Server.isDownloaded();
28 | if (isDownloaded) {
29 | setStates((states) => {
30 | states.progress = 100;
31 | states.status = "success";
32 | });
33 | return;
34 | }
35 |
36 | const download = await listen("download-progress", (event) => {
37 | const progress = event.payload;
38 | const states = kDownloadStates.getState();
39 | if (states.status === "downloading") {
40 | setStates((states) => {
41 | states.progress = progress as number;
42 | });
43 | }
44 | });
45 |
46 | const unzip = await listen("unzip-progress", (event) => {
47 | const progress = event.payload;
48 | const states = kDownloadStates.getState();
49 | if (states.status === "downloading") {
50 | setStates((states) => {
51 | states.status = "unzipping";
52 | states.progress = progress as number;
53 | });
54 | } else if (states.status === "unzipping") {
55 | setStates((states) => {
56 | states.progress = progress as number;
57 | });
58 | }
59 | });
60 |
61 | return { download, unzip };
62 | };
63 |
64 | let cleanup: (() => void) | undefined;
65 |
66 | setup().then((unlisten) => {
67 | cleanup = () => {
68 | unlisten?.download();
69 | unlisten?.unzip();
70 | };
71 | });
72 |
73 | return () => {
74 | cleanup?.();
75 | };
76 | }, []);
77 |
78 | const download = useCallback(async () => {
79 | const isDownloaded = await Server.isDownloaded();
80 | if (isDownloaded) {
81 | return true;
82 | }
83 | try {
84 | const states = kDownloadStates.getState();
85 | if (["downloading", "unzipping"].includes(states.status)) {
86 | return false;
87 | }
88 | if (states.status === "success") {
89 | return true;
90 | }
91 | setStates((states) => {
92 | states.progress = 0;
93 | states.status = "downloading";
94 | });
95 | await Server.download();
96 | setStates((states) => {
97 | states.progress = 100;
98 | states.status = "success";
99 | });
100 | return true;
101 | } catch (error) {
102 | setStates((states) => {
103 | states.error = error;
104 | states.progress = 0;
105 | states.status = "failed";
106 | });
107 | return false;
108 | }
109 | }, []);
110 |
111 | return { download, ...states };
112 | }
113 |
--------------------------------------------------------------------------------
/src/hooks/useDragDrop.ts:
--------------------------------------------------------------------------------
1 | import { DragDropEvent, getCurrentWebview } from "@tauri-apps/api/webview";
2 | import { getCurrentWindow } from "@tauri-apps/api/window";
3 | import { useCallback, useEffect, useRef, useState } from "react";
4 |
5 | function debounce(func: any, delay = 100) {
6 | let timeoutId: any;
7 | return function (...args: any) {
8 | clearTimeout(timeoutId);
9 | timeoutId = setTimeout(() => {
10 | //@ts-ignore
11 | func.apply(this, args);
12 | }, delay);
13 | };
14 | }
15 |
16 | export function useDragDrop(onDrop: (paths: string[]) => void) {
17 | const ref = useRef{t("Starting... First load may take longer, please wait.")}
50 | 51 | ) : null; 52 | 53 | const downloading = ["downloading", "unzipping", "failed"].includes( 54 | downloadStatus 55 | ) ? ( 56 | <> 57 |58 | {t("Downloading resources, please wait", { 59 | progress: progress.toFixed(2), 60 | })} 61 |
62 |64 | {t( 65 | "*If the download is stuck or fails, please download and initialize manually. " 66 | )} 67 | open(t("downloadTutorial"))} 70 | > 71 | {t("View tutorial")} 72 | 73 |
74 | 75 | ) : null; 76 | 77 | return ( 78 |
87 | 
91 | {launching}
92 | {downloading}
93 |
94 | );
95 | }
96 |
--------------------------------------------------------------------------------
/src/pages/Mirror.tsx:
--------------------------------------------------------------------------------
1 | import { useDragDrop } from "@/hooks/useDragDrop";
2 | import { useSwapFace } from "@/hooks/useSwapFace";
3 | import { convertFileSrc } from "@tauri-apps/api/core";
4 | import { exit } from "@tauri-apps/plugin-process";
5 | import { open } from "@tauri-apps/plugin-shell";
6 | import { useEffect, useRef, useState } from "react";
7 | import { useTranslation } from "react-i18next";
8 |
9 | import "@/styles/mirror.css";
10 |
11 | import iconMenu from "@/assets/images/menu.webp";
12 | import background from "@/assets/images/mirror-bg.svg";
13 | import mirrorInput from "@/assets/images/mirror-input.webp";
14 | import mirrorMe from "@/assets/images/mirror-me.webp";
15 |
16 | interface Asset {
17 | path: string;
18 | src: string;
19 | }
20 |
21 | const kMirrorStates: {
22 | isMe: boolean;
23 | me?: Asset;
24 | input?: Asset;
25 | result?: Asset;
26 | } = { isMe: true };
27 |
28 | export function MirrorPage() {
29 | const [flag, setFlag] = useState(false);
30 | const rebuild = useRef
98 |
169 | );
170 | }
171 |
--------------------------------------------------------------------------------
/src/services/i18n.ts:
--------------------------------------------------------------------------------
1 | import i18n from "i18next";
2 | import { initReactI18next } from "react-i18next";
3 | import LanguageDetector from "i18next-browser-languagedetector";
4 | import LocalStorageBackend from "i18next-localstorage-backend";
5 |
6 | import enTranslation from "@/assets/locales/en.json";
7 | import zhTranslation from "@/assets/locales/zh.json";
8 |
9 | i18n
10 | .use(LanguageDetector)
11 | .use(LocalStorageBackend)
12 | .use(initReactI18next)
13 | .init({
14 | fallbackLng: "en",
15 | debug: true,
16 | resources: {
17 | en: { translation: enTranslation },
18 | zh: { translation: zhTranslation },
19 | },
20 | detection: {
21 | order: ["localStorage", "navigator"],
22 | caches: ["localStorage"],
23 | },
24 | });
25 |
26 | export default i18n;
27 |
--------------------------------------------------------------------------------
/src/services/server.ts:
--------------------------------------------------------------------------------
1 | import { invoke } from "@tauri-apps/api/core";
2 | import { homeDir, join } from "@tauri-apps/api/path";
3 | import { arch, type } from "@tauri-apps/plugin-os";
4 | import { Child, Command } from "@tauri-apps/plugin-shell";
5 | import { t } from "i18next";
6 |
7 | export type ServerStatus = "idle" | "launching" | "running";
8 |
9 | export interface Task {
10 | id: string;
11 | inputImage: string;
12 | targetFace: string;
13 | }
14 |
15 | class _Server {
16 | _childProcess?: Child;
17 | _baseURL = "http://localhost:8023";
18 |
19 | async rootDir() {
20 | return join(await homeDir(), "MagicMirror");
21 | }
22 |
23 | async isDownloaded() {
24 | try {
25 | const binaryPath = await join(
26 | await this.rootDir(),
27 | type() === "windows" ? "server.exe" : "server.bin"
28 | );
29 | const exists = await invoke
99 | 
145 |
168 |
100 |
102 | {tips}
101 |
103 |
134 |
104 | 
109 |
133 |
110 |
132 |
111 |
131 | {
113 | i18n.changeLanguage(i18n.language === "en" ? "zh" : "en");
114 | }}
115 | >
116 | {t("Language")}
117 |
118 | {kMirrorStates.me && (
119 | {
121 | kMirrorStates.isMe = !kMirrorStates.isMe;
122 | rebuild.current();
123 | }}
124 | >
125 | {t("Switch")}
126 |
127 | )}
128 | open(t("aboutLink"))}>{t("About")}
129 | exit(0)}>{t("Quit")}
130 |
151 |
167 |
152 |
166 |
153 | 
164 |
165 |