Talk/index.html at main · Unity-Lab-AI/Talk · 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Unity Voice Lab – System Check</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700&family=Roboto+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
    />
    <style>
        body { visibility: hidden; }
    </style>
    <link rel="stylesheet" href="style.css?v=20240606" />
    <link rel="stylesheet" href="./styleAI.css?v=20240606" />
    <script>
        (function () {
            try {
                var path = window.location.pathname || '';
                if (!path.endsWith('/')) {
                    var lastSegment = path.substring(path.lastIndexOf('/') + 1);
                    if (lastSegment && lastSegment.indexOf('.') === -1) {
                        var search = window.location.search || '';
                        var hash = window.location.hash || '';
                        var destination = path + '/' + search + hash;
                        window.location.replace(destination);
                    }
                }
            } catch (error) {
                console.warn('Failed to normalize trailing slash for assets:', error);
            }
        })();

        window.addEventListener('load', function() {
            document.body.style.visibility = 'visible';
        });
    </script>
    <script src="landing.js?v=20240606" defer></script>
    <!-- Load the voice experience bundle from the project root -->
    <script src="./app.js?v=20240606" defer></script>
    <noscript>
        <link rel="stylesheet" href="./style.css?v=20240606" />
        <link rel="stylesheet" href="./styleAI.css?v=20240606" />
    </noscript>
</head>
<body class="no-js" data-app-state="landing">
    <div id="log-display" style="position: fixed; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 10px; z-index: 9999; font-family: monospace; max-width: 80%;"></div>
    <noscript>
        <div class="no-js-banner" role="alert">
            <strong>JavaScript is disabled.</strong>
            The live Unity assistant requires JavaScript, so the static preview is shown instead.
        </div>
    </noscript>

    <section id="landing" class="landing" aria-labelledby="landing-title">
        <div class="landing-grid">
            <div class="landing-hero surface-card accent-card">
                <span class="landing-badge">Unity voice lab check-in</span>
                <h1 id="landing-title">Let’s make sure every light is green</h1>
                <p class="landing-lede">
                    Before Unity can chat with you, we run a quick readiness scan on your browser. Think of it like making sure
                    your helmet is on straight. When a light glows amber, read the friendly tip, fix it, then press “Check again.”
                </p>
                <div class="landing-links">
                    <a class="landing-link" href="https://unityailab.online" target="_blank" rel="noopener">Back to Unity AI Lab home</a>
                    <a class="landing-link" href="https://github.com/Unity-Lab-AI/Talk-to-Unity" target="_blank" rel="noopener">View the project on GitHub</a>
                </div>
            </div>

            <div class="landing-overview surface-card">
                <div id="status-message" class="landing-status" role="status" aria-live="polite"></div>

                <div class="landing-body">
                    <div class="dependency-summary">
                        <span
                            class="dependency-light"
                            data-role="dependency-light"
                            data-state="pending"
                            aria-live="polite"
                            aria-label="Checking requirements"
                        ></span>
                        <div class="dependency-summary-text">
                            <h2>What the lights mean</h2>
                            <p id="dependency-summary">
                                We’re checking right now. Green means your setup is ready. An amber light means we need to fix that part together
                                before Unity can listen.
                            </p>
                        </div>
                    </div>

                    <ul id="dependency-list" class="dependency-list">
                        <li
                            class="dependency-item"
                            data-dependency="secure-context"
                            data-state="pending"
                            data-pass-status="Ready — secure and private"
                            data-fail-status="Fix: Use HTTPS or localhost"
                        >
                            <div class="dependency-header">
                                <span class="dependency-name">Secure connection (HTTPS or localhost)</span>
                                <span class="dependency-status">Checking…</span>
                            </div>
                            <p class="dependency-message" data-message-type="pass">
                                Secure connection detected. Unity can safely access the microphone and speech features.
                            </p>
                            <p class="dependency-message" data-message-type="fail">
                                Open this page with <code>https://</code> or from <code>localhost</code>, then press “Check again.”
                            </p>
                        </li>
                        <li
                            class="dependency-item"
                            data-dependency="speech-recognition"
                            data-state="pending"
                            data-pass-status="Ready — Unity can listen"
                            data-fail-status="Ready — Vosklet fallback"
                        >
                            <div class="dependency-header">
                                <span class="dependency-name">Web Speech Recognition API</span>
                                <span class="dependency-status">Checking…</span>
                            </div>
                            <p class="dependency-message" data-message-type="pass">
                                Speech recognition is available. Unity will understand what you say.
                            </p>
                                                            <p class="dependency-message" data-message-type="fail">
                                                                Firefox is supported via the Vosklet fallback library.
                                                            </p>                        </li>
                        <li
                            class="dependency-item"
                            data-dependency="speech-synthesis"
                            data-state="pending"
                            data-pass-status="Ready — Unity can speak back"
                            data-fail-status="Fix: Enable browser speech voices"
                        >
                            <div class="dependency-header">
                                <span class="dependency-name">Speech synthesis voices</span>
                                <span class="dependency-status">Checking…</span>
                            </div>
                            <p class="dependency-message" data-message-type="pass">
                                Speech voices are ready. Unity can answer out loud through your speakers.
                            </p>
                            <p class="dependency-message" data-message-type="fail">
                                Use Chrome, Edge, or Safari with audio enabled, then press “Check again.”
                            </p>
                        </li>
                        <li
                            class="dependency-item"
                            data-dependency="microphone"
                            data-state="pending"
                            data-pass-status="Ready — Microphone unlocked"
                            data-fail-status="Fix: Allow microphone access"
                        >
                            <div class="dependency-header">
                                <span class="dependency-name">Microphone access</span>
                                <span class="dependency-status">Checking…</span>
                            </div>
                            <p class="dependency-message" data-message-type="pass">
                                Microphone permission granted. Unity can hear your voice input.
                            </p>
                            <p class="dependency-message" data-message-type="fail">
                                Click “Allow” on the microphone prompt or enable it in site settings, then press “Check again.”
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="landing-instructions surface-card" aria-labelledby="landing-how-to-title">
            <h2 id="landing-how-to-title">How to get every light to glow green</h2>
            <ol class="landing-steps">
                <li>
                    <strong>Stay on a secure connection.</strong> Always load <code>https://unityailab.com/Talk-to-Unity/</code> or run the site from
                    <code>localhost</code> while developing. If you see <code>http://</code> in the address bar, add the missing “s” or jump back to the
                    Unity AI Lab home page and enter from there.
                </li>
                <li>
                    <strong>Use a browser that can listen.</strong> We recommend the latest Chrome or Edge. Safari works on macOS.
                </li>
                <li>
                    <strong>Give Unity a voice and ears.</strong> Turn your speakers on, set your system output to the right device, and when the browser asks
                    for microphone access, click <em>Allow</em>. You can also review these permissions via the lock icon near the URL bar.
                </li>
                <li>
                    <strong>Re-run the check.</strong> Once you’ve made changes, press “Check again.” When every status reads “Ready,” the “Talk to Unity” button below
                    will unlock and slide the live lab into view on this page.
                </li>
                <li>
                    <strong>Remember the unmute cue.</strong> When the lab loads, <em>Tap or click anywhere to unmute</em> so Unity can hear you and respond.
                </li>
            </ol>
            <p>
                Need help? Refresh the page to start over, or read the tips above each alert. When everything looks good, we’ll send you forward
                to the interactive Unity assistant.
            </p>
        </div>

        <div class="landing-actions surface-card action-bar">
            <button id="launch-app" class="primary" type="button" disabled aria-disabled="true">Talk to Unity</button>
            <button id="recheck-dependencies" class="ghost" type="button">Check again</button>
        </div>
    </section>

    <div id="app-root" hidden>
        <div class="app-shell">
            <header class="status-banner" role="status" aria-live="polite">
                <button id="mute-indicator" class="mute-indicator" data-state="muted" type="button">
                    <span class="indicator-text">Tap or click anywhere to unmute</span>
                </button>
            </header>
            <main class="layout" aria-live="polite">
                <figure id="hero-stage" class="image-stage" data-state="empty" aria-hidden="true">
                    <img id="hero-image" alt="" loading="lazy" decoding="async" />
                </figure>
                <section class="voice-stage" role="group" aria-label="Voice activity monitors">
                    <article class="voice-circle ai" data-role="ai" aria-label="Unity is idle">
                        <div class="pulse-ring"></div>
                        <span class="sr-only">Unity</span>
                    </article>
                    <article class="voice-circle user" data-role="user" aria-label="Microphone is muted">
                        <div class="pulse-ring"></div>
                        <span class="sr-only">You</span>
                    </article>
                </section>
            </main>
        </div>
    </div>
</body>
</html>