feat(kon): add first-run hardware probe and model recommendation wizard
- New probe_system command: returns RAM, CPU, OS info - New rank_models command: scores models against detected hardware - FirstRunPage.svelte: hardware summary, ranked model list with "Recommended" badge on top pick, download progress bar, skip option - First-run detection in layout: checks list_models + list_parakeet_models, shows wizard if both empty - Sidebar hidden during first-run for clean wizard experience - clippy clean Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
170
src/lib/pages/FirstRunPage.svelte
Normal file
170
src/lib/pages/FirstRunPage.svelte
Normal file
@@ -0,0 +1,170 @@
|
||||
<script>
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { page, settings } from "$lib/stores/page.svelte.js";
|
||||
import UnicodeSpinner from "$lib/components/UnicodeSpinner.svelte";
|
||||
|
||||
let systemInfo = $state(null);
|
||||
let models = $state([]);
|
||||
let probing = $state(true);
|
||||
let downloading = $state(false);
|
||||
let downloadProgress = $state(0);
|
||||
let downloadingModel = $state("");
|
||||
let error = $state("");
|
||||
let ready = $state(false);
|
||||
|
||||
async function probe() {
|
||||
try {
|
||||
systemInfo = await invoke("probe_system");
|
||||
models = await invoke("rank_models");
|
||||
probing = false;
|
||||
} catch (e) {
|
||||
error = `Hardware probe failed: ${e}`;
|
||||
probing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadAndGo(modelId) {
|
||||
downloading = true;
|
||||
downloadingModel = modelId;
|
||||
downloadProgress = 0;
|
||||
|
||||
const unlisten = await listen("model-download-progress", (event) => {
|
||||
downloadProgress = event.payload.percent;
|
||||
});
|
||||
|
||||
const unlistenParakeet = await listen("parakeet-download-progress", (event) => {
|
||||
downloadProgress = event.payload.percent;
|
||||
});
|
||||
|
||||
try {
|
||||
if (modelId.startsWith("whisper-")) {
|
||||
const sizeMap = {
|
||||
"whisper-tiny-en": "tiny",
|
||||
"whisper-base-en": "base",
|
||||
"whisper-small-en": "small",
|
||||
"whisper-medium-en": "medium",
|
||||
};
|
||||
await invoke("download_model", { size: sizeMap[modelId] || modelId });
|
||||
await invoke("load_model", { size: sizeMap[modelId] || modelId });
|
||||
settings.engine = "whisper";
|
||||
settings.modelSize = (sizeMap[modelId] || modelId).charAt(0).toUpperCase() + (sizeMap[modelId] || modelId).slice(1);
|
||||
} else if (modelId.startsWith("parakeet-")) {
|
||||
await invoke("download_parakeet_model", { name: "ctc-int8" });
|
||||
await invoke("load_parakeet_model", { name: "ctc-int8" });
|
||||
settings.engine = "parakeet";
|
||||
}
|
||||
|
||||
ready = true;
|
||||
setTimeout(() => {
|
||||
page.current = "dictation";
|
||||
}, 1500);
|
||||
} catch (e) {
|
||||
error = `Download failed: ${e}`;
|
||||
downloading = false;
|
||||
} finally {
|
||||
unlisten();
|
||||
unlistenParakeet();
|
||||
}
|
||||
}
|
||||
|
||||
function skipSetup() {
|
||||
page.current = "dictation";
|
||||
}
|
||||
|
||||
// Start probing on mount
|
||||
probe();
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center justify-center h-full px-8 py-12 max-w-xl mx-auto">
|
||||
{#if probing}
|
||||
<div class="text-center">
|
||||
<UnicodeSpinner type="dots" speed={80} classes="text-2xl text-accent" />
|
||||
<h2 class="text-xl font-medium text-text mt-4">Setting up Kon</h2>
|
||||
<p class="text-sm text-text-secondary mt-2">Detecting your hardware...</p>
|
||||
</div>
|
||||
|
||||
{:else if ready}
|
||||
<div class="text-center">
|
||||
<span class="text-4xl">෧</span>
|
||||
<h2 class="text-xl font-medium text-text mt-4">Ready to go</h2>
|
||||
<p class="text-sm text-text-secondary mt-2">Starting Kon...</p>
|
||||
</div>
|
||||
|
||||
{:else if downloading}
|
||||
<div class="text-center w-full">
|
||||
<h2 class="text-xl font-medium text-text">Downloading model</h2>
|
||||
<p class="text-sm text-text-secondary mt-2">{downloadingModel}</p>
|
||||
<div class="w-full bg-bg-input rounded-full h-2 mt-6">
|
||||
<div
|
||||
class="bg-accent h-2 rounded-full transition-all duration-300"
|
||||
style="width: {downloadProgress}%"
|
||||
></div>
|
||||
</div>
|
||||
<p class="text-xs text-text-tertiary mt-2">{downloadProgress}%</p>
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
<div class="w-full">
|
||||
<h2 class="text-2xl font-medium text-text text-center">Welcome to Kon</h2>
|
||||
<p class="text-sm text-text-secondary text-center mt-2">Think out loud</p>
|
||||
|
||||
{#if error}
|
||||
<div class="mt-4 p-3 rounded-lg bg-red-500/10 text-red-400 text-sm">{error}</div>
|
||||
{/if}
|
||||
|
||||
{#if systemInfo}
|
||||
<div class="mt-8 p-4 rounded-lg bg-bg-input border border-border">
|
||||
<h3 class="text-xs font-medium text-text-tertiary uppercase tracking-wider mb-3">Your system</h3>
|
||||
<div class="grid grid-cols-2 gap-2 text-sm">
|
||||
<span class="text-text-secondary">RAM</span>
|
||||
<span class="text-text">{Math.round(systemInfo.ram_mb / 1024)} GB</span>
|
||||
<span class="text-text-secondary">CPU</span>
|
||||
<span class="text-text truncate" title={systemInfo.cpu_brand}>{systemInfo.cpu_brand}</span>
|
||||
<span class="text-text-secondary">Cores</span>
|
||||
<span class="text-text">{systemInfo.cpu_cores}</span>
|
||||
<span class="text-text-secondary">OS</span>
|
||||
<span class="text-text">{systemInfo.os}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if models.length > 0}
|
||||
<div class="mt-6">
|
||||
<h3 class="text-xs font-medium text-text-tertiary uppercase tracking-wider mb-3">Recommended models</h3>
|
||||
<div class="space-y-2">
|
||||
{#each models as model, i}
|
||||
<button
|
||||
class="w-full text-left p-3 rounded-lg border transition-colors
|
||||
{i === 0 ? 'border-accent bg-accent/5 hover:bg-accent/10' : 'border-border bg-bg-input hover:bg-hover'}"
|
||||
onclick={() => downloadAndGo(model.id)}
|
||||
disabled={model.is_downloaded}
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<span class="text-sm font-medium text-text">{model.display_name}</span>
|
||||
{#if i === 0}
|
||||
<span class="ml-2 text-[10px] px-1.5 py-0.5 rounded-full bg-accent/15 text-accent font-medium">Recommended</span>
|
||||
{/if}
|
||||
{#if model.is_downloaded}
|
||||
<span class="ml-2 text-[10px] px-1.5 py-0.5 rounded-full bg-green-500/15 text-green-400 font-medium">Downloaded</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="text-xs text-text-tertiary">{model.disk_size_mb} MB</span>
|
||||
</div>
|
||||
<p class="text-xs text-text-secondary mt-1">{model.description}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="mt-6 text-xs text-text-tertiary hover:text-text-secondary underline"
|
||||
onclick={skipSetup}
|
||||
>
|
||||
Skip setup — I'll configure later
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user