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

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 };
+};