[Update] Migrate to tauri-app(Web UI)

src-ui/utils/chunkArray.js

@@ -0,0 +1,7 @@
+export const chunkArray = (array, size) => {
+    const chunked = [];
+    for (let i = 0; i < array.length; i += size) {
+        chunked.push(array.slice(i, i + size));
+    }
+    return chunked;
+};

src-ui/utils/logics/scrollToBottom.js

@@ -0,0 +1,27 @@
+export const scrollToBottom = (ref, smooth = false) => {
+    const element = ref.current;
+    const scroll_height = element.scrollHeight - element.clientHeight;
+
+    if (smooth) {
+        const duration = 300; // スクロールにかける時間（ミリ秒）
+        const start_time = performance.now();
+        const scroll_top = element.scrollTop;
+
+        const scroll = (current_time) => {
+            const elapsed = current_time - start_time;
+            const progress = Math.min(elapsed / duration, 1);
+            const ease_in_out_quad = (t) => t < 0.5
+                ? 2 * t * t
+                : -1 + (4 - 2 * t) * t;
+            element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress);
+
+            if (progress < 1) {
+                requestAnimationFrame(scroll);
+            }
+        };
+
+        requestAnimationFrame(scroll);
+    } else {
+        element.scrollTop = scroll_height;
+    }
+};

src-ui/utils/logics/useMainFunction.js

@@ -0,0 +1,81 @@
+import { getCurrent } from "@tauri-apps/api/window";
+
+import {
+    useState_Translation,
+    useState_TranscriptionSend,
+    useState_TranscriptionReceive,
+    useState_Foreground,
+} from "@store";
+
+import { useStdoutToPython } from "./useStdoutToPython";
+
+export const useMainFunction = () => {
+    const {
+        currentState_Translation,
+        updateState_Translation,
+        asyncUpdateState_Translation,
+    } = useState_Translation();
+    const {
+        currentState_TranscriptionSend,
+        updateState_TranscriptionSend,
+        asyncUpdateState_TranscriptionSend,
+    } = useState_TranscriptionSend();
+    const {
+        currentState_TranscriptionReceive,
+        updateState_TranscriptionReceive,
+        asyncUpdateState_TranscriptionReceive,
+    } = useState_TranscriptionReceive();
+    const {
+        currentState_Foreground,
+        updateState_Foreground,
+    } = useState_Foreground();
+
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    const asyncPending = () => new Promise(() => {});
+    return {
+        toggleTranslation: () => {
+            asyncStdoutToPython({id: "/controller/callback_toggle_translation", data: !currentState_Translation.data});
+            asyncUpdateState_Translation(asyncPending);
+        },
+        currentState_Translation: currentState_Translation,
+        updateState_Translation: (payload) => {
+            updateState_Translation(payload.data);
+        },
+
+        toggleTranscriptionSend: () => {
+            asyncStdoutToPython({id: "/controller/callback_toggle_transcription_send", data: !currentState_TranscriptionSend.data});
+            asyncUpdateState_TranscriptionSend(asyncPending);
+        },
+        currentState_TranscriptionSend: currentState_TranscriptionSend,
+        updateState_TranscriptionSend: (payload) => {
+            updateState_TranscriptionSend(payload.data);
+        },
+
+        toggleTranscriptionReceive: () => {
+            asyncStdoutToPython({id: "/controller/callback_toggle_transcription_receive", data: !currentState_TranscriptionReceive.data});
+            asyncUpdateState_TranscriptionReceive(asyncPending);
+        },
+        currentState_TranscriptionReceive: currentState_TranscriptionReceive,
+        updateState_TranscriptionReceive: (payload) => {
+            updateState_TranscriptionReceive(payload.data);
+        },
+
+        toggleForeground: () => {
+            const main_window = getCurrent();
+            const is_foreground_enabled = !currentState_Foreground.data;
+            main_window.setAlwaysOnTop(is_foreground_enabled);
+            updateState_Foreground(is_foreground_enabled);
+
+        },
+        currentState_Foreground: currentState_Foreground,
+    };
+};
+
+const asyncTestFunction = (...args) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(...args);
+        }, 3000);
+    });
+};

src-ui/utils/logics/useMessage.js

@@ -0,0 +1,55 @@
+import {
+    useMessageLogs,
+} from "@store";
+
+import { useStdoutToPython } from "./useStdoutToPython";
+
+export const useMessage = () => {
+    const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useMessageLogs();
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    return {
+        sendMessage: (message) => {
+            asyncStdoutToPython({id: "send_message", data: message});
+            const uuid = crypto.randomUUID();
+            const date = new Date().toLocaleTimeString(
+                "ja-JP",
+                {hour12: false, hour: "2-digit", minute:"2-digit"},
+            );
+
+            addMessageLogs({
+                id: uuid,
+                category: "sent",
+                status: "pending",
+                created_at: date,
+                messages: {
+                    original: message,
+                    translated: [
+                        message,
+                    ],
+                },
+            });
+
+            setTimeout(() => {
+                const updateItemById = (id) => (prevItems) => {
+                    return prevItems.map(item => {
+                        if (item.id === id) {
+                            item.status = "ok";
+                        }
+                        return item;
+                    });
+                };
+                updateMessageLogs(updateItemById(uuid));
+            }, 3000);
+        },
+        currentMessageLogs: currentMessageLogs,
+    };
+};
+
+// const asyncTestFunction = (...args) => {
+//     return new Promise((resolve) => {
+//         setTimeout(() => {
+//             resolve(...args);
+//         }, 3000);
+//     });
+// };

src-ui/utils/logics/useStartPython.js

@@ -0,0 +1,53 @@
+import { Command } from "@tauri-apps/api/shell";
+import { store } from "@store";
+
+import { useMainFunction } from "./useMainFunction";
+
+export const useStartPython = () => {
+    const {
+        updateState_Translation,
+        updateState_TranscriptionSend,
+        updateState_TranscriptionReceive,
+    } = useMainFunction();
+
+    const routes = {
+        "/controller/callback_toggle_translation": updateState_Translation,
+        "/controller/callback_toggle_transcription_send": updateState_TranscriptionSend,
+        "/controller/callback_toggle_transcription_receive": updateState_TranscriptionReceive,
+    };
+
+    const receiveRoutes = (parsed_data) => {
+        if (parsed_data.status === "ok") {
+            const route = routes[parsed_data.id];
+            if (route) {
+                route({ data: parsed_data.data });
+            } else {
+                console.error(`Invalid path: ${parsed_data.id}`);
+            }
+        } else {
+            console.log("Received data status is not 'ok'.", parsed_data);
+        }
+    };
+
+
+    const asyncStartPython = async () => {
+        const command = Command.sidecar("bin/test");
+        command.on("error", error => console.error(`error: "${error}"`));
+        command.stdout.on("data", (line) => {
+            let parsed_data = "";
+            try {
+                parsed_data = JSON.parse(line);
+            } catch (error) {
+                console.log(error);
+                parsed_data = line;
+            }
+            console.log("from python:", parsed_data);
+            receiveRoutes(parsed_data);
+        });
+        command.stderr.on("data", line => console.error("stderr:", line));
+        const backend_subprocess = await command.spawn();
+        store.backend_subprocess = backend_subprocess;
+    };
+
+    return { asyncStartPython };
+};

src-ui/utils/logics/useStdoutToPython.js

@@ -0,0 +1,17 @@
+import { store } from "@store";
+
+export const useStdoutToPython = () => {
+    const asyncStdoutToPython = async (value) => {
+        // send to python
+        const backend_subprocess = store.backend_subprocess;
+        if (backend_subprocess) {
+            await backend_subprocess.write(JSON.stringify(value) + "\n").then(() => {
+            }).catch((err) => {
+                console.log(err);
+            });
+        } else {
+            console.error("Backend subprocess is not found.", backend_subprocess);
+        }
+    };
+    return { asyncStdoutToPython };
+};

src-ui/utils/mixins.scss

@@ -0,0 +1,107 @@
+// デフォルト変数
+$default_loader_size: 2rem !default;
+$default_loader_line_width: 0.2rem !default;
+
+// Loader Mixin
+@mixin loader($loader_size: $default_loader_size, $loader_line_width: $default_loader_line_width, $position: right, $position_amount: 0) {
+    $half_line_width: calc($loader_line_width / 2);
+    $calc_translate: calc(-50% + #{$half_line_width});
+
+    position: absolute;
+    top: calc(50% - #{$half_line_width});
+    #{$position}: $position_amount;
+    transform: translate($calc_translate, $calc_translate);
+    width: $loader_size;
+    height: $loader_size;
+    border-radius: 50%;
+    display: inline-block;
+    border-top: $loader_line_width solid var(--dark_400_color);
+    border-right: $loader_line_width solid transparent;
+    animation: rotate_animation 0.6s linear infinite;
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: $loader_size;
+        height: $loader_size;
+        border-radius: 50%;
+        border-bottom: $loader_line_width solid var(--primary_400_color);
+        border-left: $loader_line_width solid transparent;
+    }
+
+    // @keyframes
+    @keyframes rotate_animation {
+        0% {
+            transform: translate($calc_translate, $calc_translate) rotate(0deg);
+        }
+        100% {
+            transform: translate($calc_translate, $calc_translate) rotate(360deg);
+        }
+    }
+}
+
+
+
+$toggle_background_color_on: var(--primary_400_color);
+$toggle_background_color_off: var(--dark_775_color);
+$toggle_control_color: var(--dark_400_color);
+$toggle_width: 4rem;
+$toggle_height: 1.6rem;
+$toggle_gutter: 0.1rem;
+$toggle_radius: 50%;
+$toggle_control_speed: .15s;
+$toggle_control_ease: ease-out;
+
+$toggle_radius: calc($toggle_height / 2);
+$toggle_control_size: $toggle_height - calc($toggle_gutter * 2);
+
+@mixin toggle_control_styles {
+    display: block;
+    position: relative;
+    height: 100%;
+    width: auto;
+    padding-left: $toggle_width;
+    .control {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: $toggle_height;
+        width: $toggle_width;
+        border-radius: $toggle_radius;
+        background-color: $toggle_background_color_off;
+        // transition: background-color $toggle_control_speed $toggle_control_ease;
+        &:after {
+            content: "";
+            position: absolute;
+            left: $toggle_gutter;
+            top: $toggle_gutter;
+            width: $toggle_control_size;
+            height: $toggle_control_size;
+            border-radius: $toggle_radius;
+            background: $toggle_control_color;
+            transition: left $toggle_control_speed $toggle_control_ease;
+        }
+        &.is_hovered {
+            background-color: var(--dark_725_color);
+        }
+        &.is_mouse_down {
+            background-color: var(--dark_825_color);
+        }
+        &.is_active {
+            background-color: $toggle_background_color_on;
+            &.is_hovered {
+                background-color: var(--primary_350_color);
+            }
+            &.is_mouse_down {
+                background-color: var(--primary_700_color);
+            }
+            &:after {
+                left: $toggle_width - $toggle_control_size - $toggle_gutter;
+            }
+        }
+    }
+}
+
+.toggle_control {
+    @include toggle_control_styles;
+}

src-ui/utils/randomIntMinMax.js

@@ -0,0 +1,9 @@
+export const randomIntMinMax = (min, max) => {
+	if (min === max) return min;
+	if (max === undefined) {
+		max = min;
+		min = 0;
+	}
+	const int = Math.floor(Math.random() * (max - min + 1)) + min;
+	return int;
+};

src-ui/utils/reset.css

@@ -0,0 +1,418 @@
+/*! destyle.css v4.0.1 | MIT License | https://github.com/nicolas-cusan/destyle.css */
+
+/* Reset box-model and set borders */
+/* ============================================ */
+
+*,
+::before,
+::after {
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+    min-width: 0;
+}
+
+/* Document */
+/* ============================================ */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Remove gray overlay on links for iOS.
+ */
+
+html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -webkit-tap-highlight-color: transparent; /* 3*/
+}
+
+/* Sections */
+/* ============================================ */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+    margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+    display: block;
+}
+
+/* Vertical rhythm */
+/* ============================================ */
+
+p,
+table,
+blockquote,
+address,
+pre,
+iframe,
+form,
+figure,
+dl {
+    margin: 0;
+}
+
+/* Headings */
+/* ============================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+}
+
+/* Lists (enumeration) */
+/* ============================================ */
+
+ul,
+ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Lists (definition) */
+/* ============================================ */
+
+dt {
+    font-weight: bold;
+}
+
+dd {
+    margin-left: 0;
+}
+
+/* Grouping content */
+/* ============================================ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+    border-top-width: 1px;
+    margin: 0;
+    clear: both;
+    color: inherit;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: inherit; /* 2 */
+}
+
+address {
+    font-style: inherit;
+}
+
+/* Text-level semantics */
+/* ============================================ */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+    text-decoration: none;
+    color: inherit;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+    text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: inherit; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/* Replaced content */
+/* ============================================ */
+
+/**
+ * Prevent vertical alignment issues.
+ */
+
+svg,
+img,
+embed,
+object,
+iframe {
+    vertical-align: bottom;
+}
+
+/* Forms */
+/* ============================================ */
+
+/**
+ * Reset form fields to make them styleable.
+ * 1. Make form elements stylable across systems iOS especially.
+ * 2. Inherit text-transform from parent.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    -webkit-appearance: none; /* 1 */
+    appearance: none;
+    vertical-align: middle;
+    color: inherit;
+    font: inherit;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    border-radius: 0;
+    text-align: inherit;
+    text-transform: inherit; /* 2 */
+
+    /* Customize */
+    outline: none;
+}
+
+/**
+ * Correct cursors for clickable elements.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    cursor: pointer;
+}
+
+button:disabled,
+[type="button"]:disabled,
+[type="reset"]:disabled,
+[type="submit"]:disabled {
+    cursor: default;
+}
+
+/**
+ * Improve outlines for Firefox and unify style with input elements & buttons.
+ */
+
+:-moz-focusring {
+    outline: auto;
+}
+
+select:disabled {
+    opacity: inherit;
+}
+
+/**
+ * Remove padding
+ */
+
+option {
+    padding: 0;
+}
+
+/**
+ * Reset to invisible
+ */
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    min-width: 0;
+}
+
+legend {
+    padding: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * Correct the outline style in Safari.
+ */
+
+[type="search"] {
+    outline-offset: -2px; /* 1 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Fix font inheritance.
+ */
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+}
+
+/**
+ * Fix appearance for Firefox
+ */
+[type="number"] {
+    appearance: textfield;
+}
+
+/**
+ * Clickable labels
+ */
+
+label[for] {
+    cursor: pointer;
+}
+
+/* Interactive */
+/* ============================================ */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+    display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+    display: list-item;
+}
+
+/*
+ * Remove outline for editable content.
+ */
+
+[contenteditable]:focus {
+    outline: auto;
+}
+
+/* Tables */
+/* ============================================ */
+
+/**
+1. Correct table border color inheritance in all Chrome and Safari.
+*/
+
+table {
+    border-color: inherit; /* 1 */
+    border-collapse: collapse;
+}
+
+caption {
+    text-align: left;
+}
+
+td,
+th {
+    vertical-align: top;
+    padding: 0;
+}
+
+th {
+    text-align: left;
+    font-weight: bold;
+}

src-ui/utils/root.css

@@ -0,0 +1,40 @@
+@import "./reset.css";
+@import "./variables.css";
+
+:root {
+    font-size: 62.5%;
+    color: #F2F2F2;
+    font-family: "Yu Gothic UI";
+}
+
+* {
+    &::-webkit-scrollbar {
+        width: 0.8rem;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: var(--dark_925_color);
+        border-radius: 0.4rem;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--dark_800_color);
+        border-radius: 0.4rem;
+    }
+}
+
+p, img, button {
+    user-select: none;
+}
+
+html, body {
+    height: 100%;
+}
+
+
+#root {
+    height: 100%;
+}
+
+/* SVG内のすべての要素にfillを適用 (colorの調整をcssでするため) */
+svg {
+    fill: currentColor;
+}

src-ui/utils/useSvg.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const useSvg = (svg_component, ...props) => {
+    const svgWithClass = svg_component
+        ? React.cloneElement(svg_component, ...props)
+        : null;
+
+    return svgWithClass;
+};

src-ui/utils/useWindow.js

@@ -0,0 +1,43 @@
+import { WebviewWindow } from "@tauri-apps/api/window";
+import { store, useIsOpenedConfigWindow } from "@store";
+import { getCurrent } from "@tauri-apps/api/window";
+
+export const useWindow = () => {
+    const { updateIsOpenedConfigWindow } = useIsOpenedConfigWindow();
+
+    const createConfigWindow = async () => {
+        const main_window = getCurrent();
+        if (store.config_window === null) {
+            const config_window = new WebviewWindow("vrct_config_window",{
+                url: "./src-ui/windows/config_window/index.html",
+                center: true,
+                width: 1080,
+                height: 700,
+            });
+
+            config_window.once("tauri://created", function () {
+                store.config_window = config_window;
+                updateIsOpenedConfigWindow(true);
+            });
+            config_window.once("tauri://error", function (e) {
+                console.log(e);
+            });
+
+            const unlisten_d = config_window.once("tauri://destroyed", (event) => {
+                store.config_window = null;
+                updateIsOpenedConfigWindow(false);
+                unlisten_d();
+            });
+
+            main_window.onCloseRequested((event) => {
+                config_window.close();
+            });
+        }
+    };
+
+    const closeConfigWindow = () => {
+        store.config_window.close();
+    };
+
+    return { createConfigWindow, closeConfigWindow };
+};

src-ui/utils/variables.css

@@ -0,0 +1,51 @@
+:root {
+    --primary_100_color: #b7ded8;
+    --primary_150_color: #a1d4cc;
+    --primary_200_color: #8acac0;
+    --primary_250_color: #76bfb4;
+    --primary_300_color: #61b4a7;
+    --primary_350_color: #55ac9e;
+    --primary_400_color: #48a495;
+    --primary_450_color: #429c8c;
+    --primary_500_color: #3b9483;
+    --primary_600_color: #368777;
+    --primary_650_color: #347f6f;
+    --primary_700_color: #317767;
+    --primary_750_color: #2f6f60;
+    --primary_800_color: #2c6759;
+    --primary_900_color: #214b3f;
+
+    --sent_400_color: #6197b4;
+    --received_300_color: #a861b4;
+
+    --dark_basic_text_color: #f2f2f2;
+    --dark_100_color: #f5f7fb;
+    --dark_200_color: #f1f2f6;
+    --dark_300_color: #e9eaee;
+    --dark_350_color: #d8d9dd;
+    --dark_400_color: #c7c8cc;
+    --dark_450_color: #b8b9bd;
+    --dark_500_color: #a9aaae;
+    --dark_600_color: #7f8084;
+    --dark_650_color: #75767a;
+    --dark_700_color: #6a6c6f;
+    --dark_725_color: #636467;
+    --dark_750_color: #5b5c5f;
+    --dark_775_color: #535457;
+    --dark_800_color: #4b4c4f;
+    --dark_825_color: #434447;
+    --dark_850_color: #3a3b3e;
+    --dark_863_color: #36373a;
+    --dark_875_color: #323336;
+    --dark_888_color: #2e2f32;
+    --dark_900_color: #292a2d;
+    --dark_925_color: #242528;
+    --dark_950_color: #1f2022;
+    --dark_975_color: #1a1b1d;
+    --dark_1000_color: #151517;
+
+
+    --main_window_topbar_height: 4.8rem;
+    --config_window_sidebar_width: 22rem;
+    --config_window_topbar_height: 5.2rem;
+}