OpenVoiceUI/index.html at main · MCERQUA/OpenVoiceUI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>OpenVoiceUI</title>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32.png">

    <!-- PWA -->
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#060610">
    <meta name="mobile-web-app-capable" content="yes">
    <!-- iOS PWA (Safari "Add to Home Screen") -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="OpenVoiceUI">
    <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">

    <!-- iOS Safari Audio Fix — must run before any AudioContext usage -->
    <script>(function(){var A=window.AudioContext||window.webkitAudioContext;if(!A)return;window.audioContext=new A();var u=false;function f(){if(u)return;var b=window.audioContext.createBuffer(1,1,22050),s=window.audioContext.createBufferSource();s.buffer=b;s.connect(window.audioContext.destination);(s.start||s.noteOn).call(s,0);window.audioContext.resume().then(function(){u=true;}).catch(function(){});}['touchstart','touchend','click','keydown'].forEach(function(e){document.addEventListener(e,f,{passive:true});});window.isAudioUnlocked=function(){return u;};}());
    // Register PWA service worker
    if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js',{scope:'/'}).then(function(r){console.log('[SW] registered:',r.scope);}).catch(function(e){console.warn('[SW] registration failed:',e);});}
    </script>

    <!-- Styles -->
    <link rel="stylesheet" href="src/styles/theme-dark.css?v=4">
    <link rel="stylesheet" href="src/styles/face.css?v=11">
    <link rel="stylesheet" href="src/styles/base.css?v=14">
    <link rel="stylesheet" href="src/ui/settings/SettingsPanel.css?v=3">

    <!-- Mobile overrides — inlined to bypass any CSS file caching -->
    <style>
        @media (max-width: 500px) {
            .eye-cap-top { top: -13px; }
        }
    </style>

    <!-- UI modules (global scripts — must load before app module) -->
    <script src="src/ui/themes/ThemeManager.js?v=2"></script>
    <script src="src/ui/face/FaceRenderer.js?v=5"></script>
    <script src="src/face/HaloSmokeFace.js?v=6"></script>
    <script src="src/face/FaceBench.js?v=3"></script>
    <!-- Plugin face scripts loaded dynamically from /api/plugins/assets -->
    <script>
    (async function loadPluginAssets() {
        try {
            const r = await fetch('/api/plugins/assets');
            const d = await r.json();
            for (const url of (d.styles || [])) {
                const link = document.createElement('link');
                link.rel = 'stylesheet'; link.href = url;
                document.head.appendChild(link);
            }
            for (const url of (d.scripts || [])) {
                await new Promise((resolve, reject) => {
                    const s = document.createElement('script');
                    s.src = url; s.onload = resolve; s.onerror = reject;
                    document.head.appendChild(s);
                });
            }
        } catch(e) { console.warn('[Plugins] No plugin assets:', e.message); }
    })();
    </script>
    <script src="src/ui/face/FacePicker.js?v=5"></script>
    <script src="src/ui/face/CustomFaceLoader.js?v=1"></script>
    <script src="src/ui/settings/SettingsPanel.js?v=4"></script>

    <!-- Pyodide — Python runtime in the browser (lazy-loaded, non-blocking) -->
    <script>
    window.PyodideManager = {
        _promise: null, ready: false, py: null,
        PYODIDE_CDN: 'https://cdn.jsdelivr.net/pyodide/v0.26.4/full/',
        init() {
            if (this._promise) return this._promise;
            this._promise = new Promise((resolve, reject) => {
                const s = document.createElement('script');
                s.src = this.PYODIDE_CDN + 'pyodide.js';
                s.async = true;
                s.onload = async () => {
                    try {
                        this.py = await loadPyodide({ indexURL: this.PYODIDE_CDN });
                        this.ready = true;
                        console.log('[Pyodide] Ready');
                        resolve(this.py);
                    } catch (e) { reject(e); }
                };
                s.onerror = () => reject(new Error('Failed to load Pyodide'));
                document.head.appendChild(s);
            });
            return this._promise;
        },
        async run(code) { const py = await this.init(); return py.runPythonAsync(code); },
        async install(pkgs) { const py = await this.init(); await py.loadPackage(pkgs); }
    };
    </script>

    <!-- Clerk Authentication (optional — set CLERK_PUBLISHABLE_KEY in .env) -->
    <script>
        // Only load Clerk if a key is injected by the server
        if (window.AGENT_CONFIG?.clerkPublishableKey) {
            const s = document.createElement('script');
            s.async = true;
            s.crossOrigin = 'anonymous';
            s.dataset.clerkPublishableKey = window.AGENT_CONFIG.clerkPublishableKey;
            s.src = 'https://cdn.jsdelivr.net/npm/@clerk/clerk-js@5/dist/clerk.browser.js';
            document.head.appendChild(s);
        }
    </script>
</head>
<body>
    <!-- App entry point: injects DOM shell + initializes all modules -->
    <script type="module" src="src/app.js?v=30"></script>
</body>
</html>