Fix macOS sidecar build and blank window on startup
Some checks failed
Release / Bump version and tag (push) Has been cancelled
Release / Build App (Linux) (push) Has been cancelled
Release / Build App (Windows) (push) Has been cancelled
Release / Build App (macOS) (push) Has been cancelled

macOS sidecar: `uv run` re-resolves dependencies using CUDA sources
even after `uv sync --no-sources`. Use UV_NO_SOURCES=1 env var instead
so it applies to all uv commands in the step.

Blank window: When the Tauri app starts without the Python backend
running, it showed a completely blank window. Now shows a "Connecting
to backend..." spinner, or an error state with instructions to start
the backend manually.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
2026-04-06 16:54:55 -07:00
parent 9a282215c9
commit 04e7fb1a99
2 changed files with 117 additions and 25 deletions

View File

@@ -365,11 +365,14 @@ jobs:
run: brew install portaudio run: brew install portaudio
- name: Build sidecar (CPU) - name: Build sidecar (CPU)
env:
UV_NO_SOURCES: "1"
run: | run: |
# --no-sources bypasses pyproject.toml's [tool.uv.sources] which forces # UV_NO_SOURCES bypasses pyproject.toml's [tool.uv.sources] which forces
# torch from the CUDA index (no macOS ARM wheels there) # torch from the CUDA index (no macOS ARM wheels there).
# Default PyPI torch includes MPS (Apple Silicon GPU) support # Applies to both uv sync AND uv run (which re-resolves).
uv sync --no-sources # Default PyPI torch includes MPS (Apple Silicon GPU) support.
uv sync
uv run pyinstaller local-transcription-headless.spec uv run pyinstaller local-transcription-headless.spec
- name: Package sidecar (CPU) - name: Package sidecar (CPU)

View File

@@ -12,6 +12,8 @@
let obsDisplayUrl = $derived(backendStore.obsUrl); let obsDisplayUrl = $derived(backendStore.obsUrl);
let syncDisplayUrl = $derived(backendStore.syncUrl); let syncDisplayUrl = $derived(backendStore.syncUrl);
let isConnected = $derived(backendStore.connectionState === "connected");
let connectionState = $derived(backendStore.connectionState);
function openSettings() { function openSettings() {
showSettings = true; showSettings = true;
@@ -31,6 +33,31 @@
}); });
</script> </script>
{#if !isConnected}
<div class="connecting-overlay">
<div class="connecting-content">
<div class="connecting-icon">
{#if connectionState === "error"}
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="15" y1="9" x2="9" y2="15"/>
<line x1="9" y1="9" x2="15" y2="15"/>
</svg>
{:else}
<div class="spinner"></div>
{/if}
</div>
<h2>Local Transcription</h2>
{#if connectionState === "error"}
<p>Cannot connect to backend</p>
<p class="hint">Make sure the Python backend is running:<br>
<code>uv run python -m backend.main_headless</code></p>
{:else}
<p>Connecting to backend...</p>
{/if}
</div>
</div>
{:else}
<div class="app-shell"> <div class="app-shell">
<Header onSettingsClick={openSettings} /> <Header onSettingsClick={openSettings} />
<StatusBar /> <StatusBar />
@@ -56,8 +83,70 @@
{#if showSettings} {#if showSettings}
<Settings onClose={closeSettings} /> <Settings onClose={closeSettings} />
{/if} {/if}
{/if}
<style> <style>
.connecting-overlay {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: var(--bg-primary);
}
.connecting-content {
text-align: center;
color: var(--text-primary);
}
.connecting-content h2 {
margin: 16px 0 8px;
font-size: 20px;
font-weight: 600;
}
.connecting-content p {
margin: 4px 0;
color: var(--text-secondary);
font-size: 14px;
}
.connecting-content .hint {
margin-top: 16px;
font-size: 12px;
color: var(--text-muted);
}
.connecting-content code {
display: inline-block;
margin-top: 4px;
padding: 4px 8px;
background: var(--bg-tertiary);
border-radius: 4px;
font-size: 12px;
color: var(--text-primary);
}
.connecting-icon {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid var(--border-color);
border-top-color: var(--accent-color, #4CAF50);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.app-shell { .app-shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;