Add Electron app scaffolding with loading screen and Python backend integration

Files changed (6) hide show

electron-app/loading.html +440 -0
electron-app/main.js +3 -0
electron-app/notarize.js +3 -0
electron-app/package.json +3 -0
electron-app/preload.js +3 -0
electron-app/utils.js +3 -0

electron-app/loading.html ADDED Viewed

	@@ -0,0 +1,440 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Loading...</title>
+    <style>
+        :root {
+            --mac-accent: #0071e3;
+            --mac-accent-light: #2d8aeb;
+            --mac-accent-dark: #0060bf;
+            --mac-bg: #f5f5f7;
+            --mac-text: #1d1d1f;
+            --mac-text-secondary: #86868b;
+            --mac-white: #ffffff;
+            --mac-border-radius: 10px;
+            --mac-blur-bg: rgba(255, 255, 255, 0.7);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-color: var(--mac-bg);
+            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            overflow: hidden;
+            position: relative;
+        }
+        .window-container {
+            width: 480px;
+            max-width: 90%;
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            background-color: var(--mac-blur-bg);
+            border-radius: 12px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            animation: fadeIn 0.5s ease;
+        }
+        .window-header {
+            height: 40px;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+            display: flex;
+            align-items: center;
+            padding: 0 12px;
+        }
+        .window-controls {
+            display: flex;
+            gap: 8px;
+        }
+        .window-button {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+        }
+        .close-button {
+            background-color: #ff5f57;
+        }
+        .minimize-button {
+            background-color: #febc2e;
+        }
+        .maximize-button {
+            background-color: #28c840;
+        }
+        .window-title {
+            position: absolute;
+            left: 0;
+            right: 0;
+            text-align: center;
+            color: var(--mac-text-secondary);
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .window-content {
+            padding: 40px 30px;
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .app-icon {
+            width: 80px;
+            height: 80px;
+            margin-bottom: 24px;
+            position: relative;
+            animation: iconPulse 2s ease-in-out infinite;
+        }
+        .app-icon-inner {
+            width: 80px;
+            height: 80px;
+            border-radius: 20px;
+            background: linear-gradient(135deg, #5AC8FA, #007AFF);
+            box-shadow: 1px 1px 6px 2px rgba(0, 122, 255, 0.3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            font-size: 40px;
+            font-weight: 600;
+        }
+        .app-title {
+            color: var(--mac-text);
+            font-size: 22px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        .app-subtitle {
+            color: var(--mac-text-secondary);
+            font-size: 14px;
+            margin-bottom: 32px;
+            text-align: center;
+            max-width: 340px;
+        }
+        .spinner {
+            width: 22px;
+            height: 22px;
+            margin-bottom: 24px;
+            border: 2px solid rgba(0, 113, 227, 0.2);
+            border-left-color: var(--mac-accent);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        .progress-container {
+            width: 80%;
+            height: 6px;
+            background-color: rgba(0, 113, 227, 0.1);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 12px;
+        }
+        .progress-bar {
+            height: 100%;
+            background-color: var(--mac-accent);
+            width: 0%;
+            transition: width 0.4s ease;
+            border-radius: 3px;
+        }
+        .status-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 80%;
+            margin-bottom: 28px;
+        }
+        .status-text {
+            color: var(--mac-text-secondary);
+            font-size: 12px;
+        }
+        .percent-text {
+            color: var(--mac-text-secondary);
+            font-size: 12px;
+            font-feature-settings: "tnum";
+            font-variant-numeric: tabular-nums;
+        }
+        .notification {
+            width: 80%;
+            padding: 14px;
+            border-radius: 8px;
+            background-color: rgba(0, 0, 0, 0.03);
+            display: flex;
+            align-items: flex-start;
+            margin-top: 8px;
+        }
+        .notification-icon {
+            margin-right: 12px;
+            margin-top: 2px;
+        }
+        .notification-icon svg {
+            width: 16px;
+            height: 16px;
+            color: var(--mac-accent);
+        }
+        .notification-content {
+            flex: 1;
+        }
+        .notification-title {
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--mac-text);
+            margin-bottom: 4px;
+        }
+        .notification-text {
+            font-size: 12px;
+            color: var(--mac-text-secondary);
+            line-height: 1.5;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes iconPulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        @keyframes fadeIn {
+            0% { opacity: 0; transform: translateY(10px); }
+            100% { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes warningPulse {
+            0% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }
+            50% { box-shadow: 0 8px 32px rgba(255, 193, 7, 0.3); }
+            100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); }
+        }
+        .notification.warning-theme {
+            animation: warningPulse 1s ease-in-out infinite;
+            background-color: rgba(255, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="">
+        </div>
+        <div class="window-content">
+            <div class="app-icon">
+                <div class="app-icon-inner"><img width="100" height="100" src="./build/icon.png" alt=""></div>
+            </div>
+            <h1 class="app-title">Voice Dialogue</h1>
+            <!-- <p class="app-subtitle">Please wait while we prepare everything for you</p> -->
+            <p class="app-subtitle">&nbsp;</p>
+            <div class="spinner"></div>
+            <p class="app-subtitle">&nbsp;</p>
+            <div class="progress-container">
+                <div class="progress-bar" id="progressBar"></div>
+            </div>
+            <div class="status-container">
+                <div class="status-text" id="statusText">Initializing...</div>
+                <div class="percent-text" id="percentText">0%</div>
+            </div>
+            <div class="notification info-theme" id="firstRunNotification" style="display: none;">
+                <div class="notification-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div class="notification-content">
+                    <h3 class="notification-title">First Launch Notice</h3>
+                    <p class="notification-text">
+                        First launch may take longer as we set up your environment and optimize resources. Subsequent launches will be much faster.
+                    </p>
+                </div>
+            </div>
+            <div class="notification warning-theme" id="resourceWarningNotification" style="display: none;">
+                <div class="notification-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="color: #ffc107;">
+                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                    </svg>
+                </div>
+                <div class="notification-content">
+                    <h3 class="notification-title">System Resource Warning</h3>
+                    <p class="notification-text" id="resourceWarningText">
+                        Your system resources are running low. This may affect app performance. Please consider closing other applications or freeing up memory.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Check if this is the first run and show notification accordingly
+        async function checkFirstRun() {
+            try {
+                if (window.electronAPI && window.electronAPI.getFirstRunStatus) {
+                    const isFirstRun = await window.electronAPI.getFirstRunStatus();
+                    console.log('isFirstRun', isFirstRun);
+                    if (isFirstRun) {
+                        const notification = document.getElementById('firstRunNotification');
+                        if (notification) {
+                            notification.style.display = 'flex';
+                        }
+                    }
+                }
+            } catch (error) {
+                console.log('Could not check first run status:', error);
+            }
+        }
+        // Call checkFirstRun when the page loads
+        checkFirstRun();
+        // Check system resources and show warning if needed
+        async function checkSystemResources() {
+            try {
+                if (window.electronAPI && window.electronAPI.getSystemCpuUsage && window.electronAPI.getSystemFreeMemory) {
+                    const [cpuUsage, memoryFree] = await Promise.all([
+                        window.electronAPI.getSystemCpuUsage(),
+                        window.electronAPI.getSystemFreeMemory()
+                    ]);
+                    console.log('CPU Usage:', cpuUsage + '%');
+                    console.log('Memory Info:', memoryFree);
+                    // Check thresholds
+                    const isCpuHigh = cpuUsage > 80;
+                    const isMemoryLow = memoryFree < 3; // Less than 4GB available
+                    console.log('isCpuHigh', isCpuHigh);
+                    console.log('isMemoryLow', isMemoryLow);
+                    if (isCpuHigh || isMemoryLow) {
+                        const notification = document.getElementById('resourceWarningNotification');
+                        const warningText = document.getElementById('resourceWarningText');
+                        let warningMessage = '';
+                        if (isCpuHigh && isMemoryLow) {
+                            warningMessage = `High CPU usage and insufficient memory detected. This may significantly affect app performance. Please close other applications to free up resources.`;
+                        } else if (isCpuHigh) {
+                            warningMessage = `High CPU usage detected. This may affect app performance. Please close CPU-intensive applications.`;
+                        } else if (isMemoryLow) {
+                            warningMessage = `Insufficient memory detected. This may affect app performance. Please close some applications to free up memory.`;
+                        }
+                        warningText.textContent = warningMessage;
+                        notification.style.display = 'flex';
+                        notification.classList.add('warning-notification');
+                    }
+                }
+            } catch (error) {
+                console.log('Could not check system resources:', error);
+            }
+        }
+        checkSystemResources();
+        // Simulate loading progress
+        let progress = 0;
+        const progressBar = document.getElementById('progressBar');
+        const percentText = document.getElementById('percentText');
+        const statusText = document.getElementById('statusText');
+        const statusMessages = [
+            "Initializing...",
+            "Checking system requirements...",
+            "Loading components...",
+            "Preparing documents...",
+            "Optimizing performance...",
+            "Almost ready..."
+        ];
+        function updateProgress() {
+            if (progress < 100) {
+                // Make progress more naturalistic with varying speeds
+                let increment;
+                if (progress < 20) {
+                    // Quick start
+                    increment = Math.random() * 2 + 0.5;
+                } else if (progress < 50) {
+                    // Slow middle (Mac apps typically slow down in the middle)
+                    increment = Math.random() * 1 + 0.2;
+                } else if (progress < 85) {
+                    // Speed up again
+                    increment = Math.random() * 1.5 + 0.3;
+                } else {
+                    // Slow finish (typical macOS behavior)
+                    increment = Math.random() * 0.8 + 0.1;
+                    // Hold at 99% for a bit
+                    if (progress > 99) progress = 99;
+                }
+                progress += increment;
+                progress = Math.min(progress, 99.9);
+                // Update UI
+                progressBar.style.width = progress + '%';
+                percentText.textContent = Math.floor(progress) + '%';
+                // Update status message based on progress
+                const statusIndex = Math.min(Math.floor(progress / 20), statusMessages.length - 1);
+                statusText.textContent = statusMessages[statusIndex];
+                // Typical macOS loading behavior has varying speeds
+                let delay;
+                if (progress < 30) {
+                    delay = 100 + Math.random() * 200;
+                } else if (progress < 60) {
+                    delay = 200 + Math.random() * 300;
+                } else if (progress < 85) {
+                    delay = 150 + Math.random() * 250;
+                } else {
+                    delay = 300 + Math.random() * 500;
+                }
+                setTimeout(updateProgress, delay);
+            } else {
+                // Complete loading
+                progressBar.style.width = '100%';
+                percentText.textContent = '100%';
+                statusText.textContent = 'Ready';
+                // In a real app, you'd launch the main window here
+            }
+        }
+        // Start with a slight delay like real macOS apps
+        setTimeout(updateProgress, 600);
+    </script>
+</body>
+</html>

electron-app/main.js ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:cccca0b11d8649d4822fcb83abc7a594bf63bb85680106b3f1c6d2c94970a7d0
+size 6443

electron-app/notarize.js ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:1adb9f71746cd3518662e8b81583a632d772e62d98705ec1fae80085b82beb05
+size 949

electron-app/package.json ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:ab529c9444e6c6824b290cb3b7860f943f0b6b1190ec82c2bccd8a5ad4bc194b
+size 2844

electron-app/preload.js ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:295e12bf6fb9d9ac34460606fffe1d90278873c77d32a96682f79d680886002e
+size 952

electron-app/utils.js ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:c4bac68a368fb5234d18984394771063d8bda786db8cd33f256a9e285e2dfe7d
+size 6790