feat: download progress indicator

Cargo.lock

@@ -4063,9 +4063,11 @@ dependencies = [
  "blake3",
  "clap",
  "dirs",
+ "futures",
  "git-version",
  "icu",
  "image",
+ "koharu-core",
  "koharu-ml",
  "koharu-renderer",
  "koharu-runtime",
@@ -4097,12 +4099,16 @@ name = "koharu-core"
 version = "0.29.0"
 dependencies = [
  "anyhow",
+ "dirs",
  "futures",
+ "hf-hub",
  "indicatif",
  "once_cell",
  "reqwest",
  "reqwest-middleware",
  "reqwest-retry",
+ "serde",
+ "tokio",
  "tracing",
 ]
 
@@ -4118,7 +4124,6 @@ dependencies = [
  "cudarc 0.19.0",
  "dirs",
  "futures",
- "hf-hub",
  "image",
  "imageproc",
  "koharu-core",

koharu-core/Cargo.toml

@@ -13,10 +13,14 @@ publish.workspace = true
 
 [dependencies]
 anyhow = { workspace = true }
+dirs = { workspace = true }
+futures = { workspace = true }
+hf-hub = { workspace = true }
+indicatif = { workspace = true }
+once_cell = { workspace = true }
 reqwest = { workspace = true }
 reqwest-middleware = { workspace = true }
 reqwest-retry = { workspace = true }
-once_cell = { workspace = true }
-futures = { workspace = true }
-indicatif = { workspace = true }
+serde = { workspace = true }
+tokio = { workspace = true }
 tracing = { workspace = true }

koharu-core/src/download.rs

@@ -0,0 +1,191 @@
+use std::path::PathBuf;
+use std::sync::Arc;
+
+use anyhow::Context;
+use futures::{StreamExt, TryStreamExt, stream};
+use once_cell::sync::Lazy;
+use reqwest::header::{ACCEPT_RANGES, CONTENT_LENGTH};
+use serde::Serialize;
+use tokio::sync::broadcast;
+use tracing::Instrument;
+
+use crate::hf_hub;
+use crate::http::{http_chunk, http_client};
+use crate::progress::progress_bar;
+
+const RANGE_CHUNK_SIZE_BYTES: usize = 16 * 1024 * 1024;
+
+#[derive(Clone, Debug, Serialize)]
+pub struct DownloadProgress {
+    pub filename: String,
+    pub downloaded: u64,
+    pub total: Option<u64>,
+    pub status: Status,
+}
+
+#[derive(Clone, Debug, Serialize, PartialEq)]
+pub enum Status {
+    Started,
+    Downloading,
+    Completed,
+    Failed(String),
+}
+
+static TX: Lazy<broadcast::Sender<DownloadProgress>> = Lazy::new(|| broadcast::channel(256).0);
+
+pub fn subscribe() -> broadcast::Receiver<DownloadProgress> {
+    TX.subscribe()
+}
+
+pub(crate) fn emit(progress: DownloadProgress) {
+    let _ = TX.send(progress);
+}
+
+pub async fn model(repo: &str, filename: &str) -> anyhow::Result<PathBuf> {
+    let hf_repo = hf_hub::repo(repo);
+
+    if let Some(path) = hf_hub::cache().repo(hf_repo.clone()).get(filename) {
+        return Ok(path);
+    }
+
+    let reporter = hf_hub::Reporter::new(filename);
+
+    let path = hf_hub::api()
+        .repo(hf_repo)
+        .download_with_progress(filename, reporter)
+        .instrument(tracing::info_span!("hf_download", repo, filename))
+        .await
+        .context("failed to download from HF Hub")?;
+
+    Ok(path)
+}
+
+#[tracing::instrument(level = "info")]
+pub async fn bytes(url: &str) -> anyhow::Result<Vec<u8>> {
+    let client = http_client();
+
+    let head = client
+        .head(url)
+        .send()
+        .await?
+        .error_for_status()
+        .context(format!("cannot download {url}"))?;
+
+    let headers = head.headers();
+    let total_bytes = headers
+        .get(CONTENT_LENGTH)
+        .and_then(|v| v.to_str().ok())
+        .and_then(|v| v.parse::<u64>().ok())
+        .context("missing Content-Length header")?;
+
+    anyhow::ensure!(total_bytes > 0, "resource reports zero Content-Length");
+
+    let supports_ranges = headers
+        .get(ACCEPT_RANGES)
+        .and_then(|v| v.to_str().ok())
+        .map(|v| v.eq_ignore_ascii_case("bytes"))
+        .unwrap_or(false);
+
+    anyhow::ensure!(
+        supports_ranges,
+        "remote server does not advertise byte ranges"
+    );
+
+    let filename = url.split('/').next_back().unwrap_or(url).to_string();
+    let pb = Arc::new(progress_bar(&filename));
+
+    let total_len =
+        usize::try_from(total_bytes).context("resource too large to fit into memory")?;
+    let chunk_size = total_len.clamp(1, RANGE_CHUNK_SIZE_BYTES);
+    let segments = total_len.div_ceil(chunk_size);
+
+    pb.set_length(total_len as u64);
+
+    emit(DownloadProgress {
+        filename: filename.clone(),
+        downloaded: 0,
+        total: Some(total_bytes),
+        status: Status::Started,
+    });
+
+    tracing::debug!(
+        %url,
+        total_bytes,
+        segments,
+        "downloading resource via HTTP range requests"
+    );
+
+    let downloaded = Arc::new(std::sync::atomic::AtomicU64::new(0));
+
+    let chunks = {
+        let url = Arc::new(url.to_string());
+        let pb = Arc::clone(&pb);
+        let downloaded = Arc::clone(&downloaded);
+        let filename = filename.clone();
+        stream::iter((0..segments).map(move |index| {
+            let start = (index * chunk_size) as u64;
+            let len = ((index + 1) * chunk_size).min(total_len) - (index * chunk_size);
+            let end = start + len as u64 - 1;
+            let url = Arc::clone(&url);
+            let pb = Arc::clone(&pb);
+            let downloaded = Arc::clone(&downloaded);
+            let filename = filename.clone();
+            async move {
+                let chunk = http_chunk(&url, start, end).await?;
+                pb.inc(len as u64);
+                let current = downloaded
+                    .fetch_add(len as u64, std::sync::atomic::Ordering::Relaxed)
+                    + len as u64;
+                emit(DownloadProgress {
+                    filename,
+                    downloaded: current,
+                    total: Some(total_bytes),
+                    status: Status::Downloading,
+                });
+                Ok::<_, anyhow::Error>((start, chunk))
+            }
+        }))
+        .buffer_unordered(segments)
+        .try_collect::<Vec<_>>()
+        .await
+    };
+
+    let chunks = match chunks {
+        Ok(c) => c,
+        Err(e) => {
+            emit(DownloadProgress {
+                filename,
+                downloaded: downloaded.load(std::sync::atomic::Ordering::Relaxed),
+                total: Some(total_bytes),
+                status: Status::Failed(e.to_string()),
+            });
+            return Err(e);
+        }
+    };
+
+    pb.finish_and_clear();
+
+    let mut parts = chunks;
+    parts.sort_by_key(|(start, _)| *start);
+
+    let mut buffer = Vec::with_capacity(total_len);
+    for (_start, mut chunk) in parts {
+        buffer.append(&mut chunk);
+    }
+
+    anyhow::ensure!(
+        buffer.len() == total_len,
+        "range assembly mismatch: expected {} bytes, got {}",
+        total_len,
+        buffer.len()
+    );
+
+    emit(DownloadProgress {
+        filename,
+        downloaded: total_bytes,
+        total: Some(total_bytes),
+        status: Status::Completed,
+    });
+
+    Ok(buffer)
+}

koharu-core/src/hf_hub.rs

@@ -0,0 +1,107 @@
+use std::path::PathBuf;
+use std::sync::Arc;
+use std::sync::atomic::{AtomicU64, Ordering};
+
+use hf_hub::{
+    Cache, Repo,
+    api::tokio::{Api, ApiBuilder, Progress},
+};
+use indicatif::ProgressBar;
+use once_cell::sync::{Lazy, OnceCell};
+
+use crate::download::{DownloadProgress, Status, emit};
+use crate::progress::progress_bar;
+
+static CACHE_DIR: OnceCell<PathBuf> = OnceCell::new();
+
+static HF_API: Lazy<Api> = Lazy::new(|| {
+    ApiBuilder::new()
+        .with_cache_dir(get_cache_dir().to_path_buf())
+        .high()
+        .build()
+        .expect("build HF API client")
+});
+static HF_CACHE: Lazy<Cache> = Lazy::new(|| Cache::new(get_cache_dir().to_path_buf()));
+
+fn get_cache_dir() -> &'static PathBuf {
+    CACHE_DIR.get_or_init(|| {
+        dirs::cache_dir()
+            .unwrap_or_default()
+            .join("Koharu")
+            .join("models")
+    })
+}
+
+pub fn set_cache_dir(path: PathBuf) -> anyhow::Result<()> {
+    CACHE_DIR
+        .set(path)
+        .map_err(|_| anyhow::anyhow!("cache dir has already been set"))
+}
+
+pub fn api() -> &'static Api {
+    &HF_API
+}
+
+pub fn cache() -> &'static Cache {
+    &HF_CACHE
+}
+
+pub fn repo(name: &str) -> Repo {
+    Repo::model(name.to_string())
+}
+
+#[derive(Clone)]
+pub(crate) struct Reporter {
+    pb: ProgressBar,
+    filename: String,
+    downloaded: Arc<AtomicU64>,
+    total: u64,
+}
+
+impl Reporter {
+    pub fn new(filename: &str) -> Self {
+        Self {
+            pb: progress_bar(filename),
+            filename: filename.to_string(),
+            downloaded: Arc::new(AtomicU64::new(0)),
+            total: 0,
+        }
+    }
+}
+
+impl Progress for Reporter {
+    async fn init(&mut self, size: usize, filename: &str) {
+        self.filename = filename.to_string();
+        self.downloaded.store(0, Ordering::Relaxed);
+        self.total = size as u64;
+        self.pb.set_length(size as u64);
+        self.pb.set_position(0);
+        emit(DownloadProgress {
+            filename: self.filename.clone(),
+            downloaded: 0,
+            total: Some(self.total),
+            status: Status::Started,
+        });
+    }
+
+    async fn update(&mut self, size: usize) {
+        let current = self.downloaded.fetch_add(size as u64, Ordering::Relaxed) + size as u64;
+        self.pb.inc(size as u64);
+        emit(DownloadProgress {
+            filename: self.filename.clone(),
+            downloaded: current,
+            total: Some(self.total),
+            status: Status::Downloading,
+        });
+    }
+
+    async fn finish(&mut self) {
+        self.pb.finish_and_clear();
+        emit(DownloadProgress {
+            filename: self.filename.clone(),
+            downloaded: self.downloaded.load(Ordering::Relaxed),
+            total: Some(self.total),
+            status: Status::Completed,
+        });
+    }
+}

koharu-core/src/http.rs

@@ -1,16 +1,11 @@
-use std::sync::Arc;
-
 use anyhow::Context;
-use futures::{StreamExt, TryStreamExt, stream};
+use futures::StreamExt;
 use once_cell::sync::Lazy;
-use reqwest::header::{ACCEPT_RANGES, CONTENT_LENGTH, RANGE};
+use reqwest::header::RANGE;
 use reqwest_middleware::{ClientBuilder, ClientWithMiddleware};
 use reqwest_retry::{RetryTransientMiddleware, policies::ExponentialBackoff};
 
-use crate::progress::progress_bar;
-
 const USER_AGENT: &str = concat!(env!("CARGO_PKG_NAME"), "/", env!("CARGO_PKG_VERSION"));
-const RANGE_CHUNK_SIZE_BYTES: usize = 16 * 1024 * 1024;
 
 static HTTP_CLIENT: Lazy<ClientWithMiddleware> = Lazy::new(|| {
     ClientBuilder::new(
@@ -29,91 +24,7 @@ pub fn http_client() -> &'static ClientWithMiddleware {
     &HTTP_CLIENT
 }
 
-#[tracing::instrument(level = "info")]
-pub async fn http_download(url: &str) -> anyhow::Result<Vec<u8>> {
-    let head = HTTP_CLIENT
-        .head(url)
-        .send()
-        .await?
-        .error_for_status()
-        .context(format!("cannot download {url}"))?;
-    let headers = head.headers();
-    let total_bytes = headers
-        .get(CONTENT_LENGTH)
-        .and_then(|value| value.to_str().ok())
-        .and_then(|value| value.parse::<u64>().ok())
-        .context("missing Content-Length header")?;
-
-    anyhow::ensure!(total_bytes > 0, "resource reports zero Content-Length");
-
-    let supports_ranges = headers
-        .get(ACCEPT_RANGES)
-        .and_then(|value| value.to_str().ok())
-        .map(|value| value.eq_ignore_ascii_case("bytes"))
-        .unwrap_or(false);
-
-    anyhow::ensure!(
-        supports_ranges,
-        "remote server does not advertise byte ranges"
-    );
-
-    let pb = Arc::new(progress_bar(url.split('/').next_back().unwrap_or(url)));
-
-    let total_len =
-        usize::try_from(total_bytes).context("resource too large to fit into memory")?;
-    let chunk_size = total_len.clamp(1, RANGE_CHUNK_SIZE_BYTES);
-    let segments = total_len.div_ceil(chunk_size);
-
-    pb.set_length(total_len as u64);
-
-    tracing::debug!(
-        %url,
-        total_bytes,
-        segments,
-        "downloading resource via HTTP range requests"
-    );
-
-    let chunks = {
-        let url = Arc::new(url.to_string());
-        let pb = Arc::clone(&pb);
-        stream::iter((0..segments).map(move |index| {
-            let start = (index * chunk_size) as u64;
-            let len = ((index + 1) * chunk_size).min(total_len) - (index * chunk_size);
-            let end = start + len as u64 - 1;
-            let url = Arc::clone(&url);
-            let pb = Arc::clone(&pb);
-            async move {
-                let chunk = http_chunk(&url, start, end).await?;
-                pb.inc(len as u64);
-                Ok::<_, anyhow::Error>((start, chunk))
-            }
-        }))
-        .buffer_unordered(segments)
-        .try_collect::<Vec<_>>()
-        .await?
-    };
-
-    pb.finish_and_clear();
-
-    let mut parts = chunks;
-    parts.sort_by_key(|(start, _)| *start);
-
-    let mut buffer = Vec::with_capacity(total_len);
-    for (_start, mut chunk) in parts {
-        buffer.append(&mut chunk);
-    }
-
-    anyhow::ensure!(
-        buffer.len() == total_len,
-        "range assembly mismatch: expected {} bytes, got {}",
-        total_len,
-        buffer.len()
-    );
-
-    Ok(buffer)
-}
-
-async fn http_chunk(url: &str, start: u64, end: u64) -> anyhow::Result<Vec<u8>> {
+pub async fn http_chunk(url: &str, start: u64, end: u64) -> anyhow::Result<Vec<u8>> {
     let expected_len = usize::try_from(end - start + 1)?;
     let response = HTTP_CLIENT
         .get(url)

koharu-core/src/lib.rs

@@ -1,2 +1,4 @@
+pub mod download;
+pub mod hf_hub;
 pub mod http;
 pub mod progress;

koharu-ml/Cargo.toml

@@ -17,7 +17,6 @@ anyhow = { workspace = true }
 clap = { workspace = true }
 image = { workspace = true }
 imageproc = { workspace = true }
-hf-hub = { workspace = true }
 candle-core = { workspace = true }
 candle-transformers = { workspace = true }
 candle-nn = { workspace = true }
@@ -30,7 +29,6 @@ tracing-subscriber = { workspace = true }
 tokio = { workspace = true }
 rustfft = { workspace = true }
 once_cell = { workspace = true }
-dirs = { workspace = true }
 futures = { workspace = true }
 num_cpus = { workspace = true }
 libloading = { workspace = true }
@@ -62,6 +60,9 @@ metal = [
     "objc2-metal-performance-shaders-graph",
 ]
 
+[dev-dependencies]
+dirs = { workspace = true }
+
 [[bin]]
 name = "comic-text-detector"
 path = "bin/comic-text-detector.rs"

koharu-ml/src/hf_hub.rs

@@ -1,57 +1,7 @@
-use std::path::PathBuf;
-
-use anyhow::Context;
-use hf_hub::{
-    Cache, Repo,
-    api::tokio::{Api, ApiBuilder},
-};
-use koharu_core::progress::progress_bar;
-use once_cell::sync::{Lazy, OnceCell};
-
-static CACHE_DIR: OnceCell<PathBuf> = OnceCell::new();
-
-static HF_API: Lazy<Api> = Lazy::new(|| {
-    ApiBuilder::new()
-        .with_cache_dir(get_cache_dir().to_path_buf())
-        .high()
-        .build()
-        .expect("build HF API client")
-});
-static HF_CACHE: Lazy<Cache> = Lazy::new(|| Cache::new(get_cache_dir().to_path_buf()));
-
-fn get_cache_dir() -> &'static PathBuf {
-    CACHE_DIR.get_or_init(|| {
-        dirs::cache_dir()
-            .unwrap_or_default()
-            .join("Koharu")
-            .join("models")
-    })
-}
-
-pub fn set_cache_dir(path: PathBuf) -> anyhow::Result<()> {
-    CACHE_DIR
-        .set(path)
-        .map_err(|_| anyhow::anyhow!("cache dir has already been set"))
-}
-
-pub async fn hf_download(repo: &str, filename: &str) -> anyhow::Result<PathBuf> {
-    let hf_repo = Repo::model(repo.to_string());
-    if let Some(path) = HF_CACHE.repo(hf_repo.clone()).get(filename) {
-        return Ok(path);
-    }
-
-    let span = tracing::info_span!("hf_download", repo, filename);
-    let _enter = span.enter();
-
-    let pb = progress_bar(filename);
-    let path = HF_API
-        .repo(hf_repo)
-        .download_with_progress(filename, pb)
-        .await
-        .context("failed to download from HF Hub")?;
-
-    Ok(path)
-}
+#[allow(unused_imports)]
+pub use koharu_core::download::model;
+#[allow(unused_imports)]
+pub use koharu_core::hf_hub::set_cache_dir;
 
 #[macro_export]
 macro_rules! define_models {
@@ -67,10 +17,9 @@ macro_rules! define_models {
         impl Manifest {
             pub async fn get(&self) -> anyhow::Result<std::path::PathBuf> {
                 use strum::EnumProperty;
-                use $crate::hf_hub::hf_download;
                 let repo = self.get_str("repo").expect("repo property");
                 let filename = self.get_str("filename").expect("filename property");
-                hf_download(repo, filename).await
+                koharu_core::download::model(repo, filename).await
             }
         }
 

koharu-ml/src/lib.rs

@@ -9,7 +9,7 @@ pub mod manga_ocr;
 use anyhow::Result;
 use candle_core::{Device, utils::metal_is_available};
 
-pub use hf_hub::set_cache_dir;
+pub use koharu_core::hf_hub::set_cache_dir;
 pub use llm::{language_from_tag, set_default_locale, set_locale, supported_locales};
 
 /// Name of the compute device being used.

koharu-runtime/src/dylib.rs

@@ -7,7 +7,8 @@ use std::{
 
 use anyhow::{Context, Result};
 use futures::stream::{self, StreamExt, TryStreamExt};
-use koharu_core::http::{http_client, http_download};
+use koharu_core::download;
+use koharu_core::http::http_client;
 use once_cell::sync::OnceCell;
 use rayon::iter::{IntoParallelRefIterator, ParallelIterator};
 use tokio::task;
@@ -281,7 +282,7 @@ async fn fetch_and_extract(pkg: &str, platform_tags: &[&str], out_dir: Arc<PathB
 
     if needs_download {
         debug!("{pkg}: downloading {wheel_name}...");
-        let bytes = http_download(&wheel_url)
+        let bytes = download::bytes(&wheel_url)
             .await
             .context("failed to download wheel")?;
         let out = Arc::clone(&out_dir);

koharu/Cargo.toml

@@ -22,10 +22,12 @@ include = [
 ]
 
 [dependencies]
+koharu-core = { workspace = true }
 koharu-ml = { workspace = true }
 koharu-renderer = { workspace = true }
 koharu-runtime = { workspace = true }
 anyhow = { workspace = true }
+futures = { workspace = true }
 rfd = { workspace = true }
 open = { workspace = true }
 serde = { workspace = true }

koharu/src/app.rs

@@ -251,7 +251,10 @@ pub async fn run() -> Result<()> {
     }
 
     tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![command::initialize])
+        .invoke_handler(tauri::generate_handler![
+            command::initialize,
+            command::download_progress,
+        ])
         .manage(AtomicU16::new(0))
         .setup(move |app| {
             let handle = app.handle().clone();

koharu/src/command.rs

@@ -1,23 +1,39 @@
 use std::sync::atomic::{AtomicU16, Ordering};
 
 use tauri::State;
+use tauri::ipc::Channel;
 
 use crate::result::Result;
 
 #[tauri::command]
 pub async fn initialize(port: State<'_, AtomicU16>) -> Result<u16> {
-    let mut attempts = 0;
     loop {
         let p = port.load(Ordering::SeqCst);
         if p != 0 {
             return Ok(p);
         }
 
-        if attempts >= 100 {
-            return Err(anyhow::anyhow!("HTTP server failed to start").into());
-        }
-
-        attempts += 1;
         tokio::time::sleep(std::time::Duration::from_millis(50)).await;
     }
 }
+
+#[tauri::command]
+pub async fn download_progress(
+    channel: Channel<koharu_core::download::DownloadProgress>,
+) -> Result<()> {
+    let mut rx = koharu_core::download::subscribe();
+    tokio::spawn(async move {
+        loop {
+            match rx.recv().await {
+                Ok(progress) => {
+                    if channel.send(progress).is_err() {
+                        break;
+                    }
+                }
+                Err(tokio::sync::broadcast::error::RecvError::Lagged(_)) => continue,
+                Err(tokio::sync::broadcast::error::RecvError::Closed) => break,
+            }
+        }
+    });
+    Ok(())
+}

koharu/src/endpoints.rs

@@ -1,11 +1,16 @@
 use std::{io::Cursor, path::PathBuf, str::FromStr};
 
+use std::convert::Infallible;
+
 use axum::{
     Json,
     body::Body,
     extract::{Multipart, State},
     http::{HeaderValue, StatusCode, header},
-    response::Response,
+    response::{
+        Response,
+        sse::{Event, KeepAlive, Sse},
+    },
 };
 use image::{GenericImageView, ImageFormat, RgbaImage};
 use koharu_ml::llm::ModelId;
@@ -829,3 +834,18 @@ fn blank_rgba(width: u32, height: u32, color: image::Rgba<u8>) -> SerializableDy
     let blank = RgbaImage::from_pixel(width, height, color);
     image::DynamicImage::ImageRgba8(blank).into()
 }
+
+pub async fn download_progress()
+-> Sse<impl futures::Stream<Item = std::result::Result<Event, Infallible>>> {
+    let rx = koharu_core::download::subscribe();
+    let stream = futures::stream::unfold(rx, |mut rx| async {
+        loop {
+            match rx.recv().await {
+                Ok(p) => return Some((Ok(Event::default().json_data(p).unwrap()), rx)),
+                Err(tokio::sync::broadcast::error::RecvError::Lagged(_)) => continue,
+                Err(tokio::sync::broadcast::error::RecvError::Closed) => return None,
+            }
+        }
+    });
+    Sse::new(stream).keep_alive(KeepAlive::default())
+}

koharu/src/server.rs

@@ -75,6 +75,7 @@ fn build_router(state: AppResources) -> Router {
         .route("/api/llm_offload", post(llm_offload))
         .route("/api/llm_ready", get(llm_ready).post(llm_ready))
         .route("/api/llm_generate", post(llm_generate))
+        .route("/api/download_progress", get(download_progress))
         .with_state(state)
         .layer(DefaultBodyLimit::max(1024 * 1024 * 1024))
         .layer(

koharu/tauri.conf.json

@@ -28,8 +28,8 @@
         "url": "/splashscreen",
         "decorations": false,
         "resizable": false,
-        "height": 150,
-        "width": 200,
+        "height": 200,
+        "width": 300,
         "center": true
       }
     ]

ui/app/splashscreen/page.tsx

@@ -1,9 +1,83 @@
 'use client'
 
+import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { isTauri, type DownloadProgress } from '@/lib/backend'
+
+type AggregateProgress = {
+  filename: string
+  percent?: number
+}
 
 export default function SplashScreen() {
   const { t } = useTranslation()
+  const [progress, setProgress] = useState<AggregateProgress | null>(null)
+  const channelRef = useRef<unknown>(null)
+  const filesRef = useRef<Map<string, { downloaded: number; total: number }>>(
+    new Map(),
+  )
+
+  useEffect(() => {
+    if (!isTauri()) return
+    ;(async () => {
+      const { Channel, invoke } = await import('@tauri-apps/api/core')
+      const channel = new Channel<DownloadProgress>()
+      channelRef.current = channel
+      channel.onmessage = (msg) => {
+        const files = filesRef.current
+
+        if (msg.status === 'Started') {
+          files.set(msg.filename, { downloaded: 0, total: msg.total ?? 0 })
+        } else if (msg.status === 'Downloading') {
+          const entry = files.get(msg.filename)
+          if (entry) {
+            entry.downloaded = msg.downloaded
+            if (msg.total) entry.total = msg.total
+          } else {
+            files.set(msg.filename, {
+              downloaded: msg.downloaded,
+              total: msg.total ?? 0,
+            })
+          }
+        } else {
+          // Completed or Failed — lock this file at 100%
+          const entry = files.get(msg.filename)
+          if (entry) {
+            entry.downloaded = entry.total
+          }
+        }
+
+        // Compute aggregate
+        let totalBytes = 0
+        let downloadedBytes = 0
+        for (const entry of files.values()) {
+          totalBytes += entry.total
+          downloadedBytes += entry.downloaded
+        }
+
+        // Find current active file (last non-completed)
+        const activeFilename =
+          msg.status === 'Started' || msg.status === 'Downloading'
+            ? msg.filename
+            : null
+
+        const percent =
+          totalBytes > 0
+            ? Math.min(100, Math.round((downloadedBytes / totalBytes) * 100))
+            : undefined
+
+        if (activeFilename) {
+          setProgress({ filename: activeFilename, percent })
+        } else {
+          // All done — keep showing 100% briefly
+          setProgress((prev) =>
+            prev ? { ...prev, percent: percent ?? 100 } : null,
+          )
+        }
+      }
+      await invoke('download_progress', { channel })
+    })()
+  }, [])
 
   return (
     <main className='bg-background flex min-h-screen flex-col items-center justify-center select-none'>
@@ -11,6 +85,26 @@ export default function SplashScreen() {
       <span className='text-primary mt-2 text-lg'>
         {t('common.initializing')}
       </span>
+      <div className='mt-4 flex h-12 w-48 flex-col items-center gap-1.5'>
+        <span className='text-muted-foreground h-4 max-w-full truncate text-xs'>
+          {progress ? progress.filename : '\u00a0'}
+        </span>
+        <div className='bg-muted relative h-1.5 w-full overflow-hidden rounded-full'>
+          {progress && typeof progress.percent === 'number' ? (
+            <div
+              className='bg-primary h-full rounded-full transition-[width] duration-300'
+              style={{ width: `${progress.percent}%` }}
+            />
+          ) : (
+            <div className='activity-progress-indeterminate from-primary/40 via-primary to-primary/40 absolute inset-0 w-1/2 rounded-full bg-linear-to-r' />
+          )}
+        </div>
+        <span className='text-muted-foreground h-4 text-[11px] tabular-nums'>
+          {progress && typeof progress.percent === 'number'
+            ? `${progress.percent}%`
+            : '\u00a0'}
+        </span>
+      </div>
     </main>
   )
 }

ui/components/ActivityBubble.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { type ReactNode } from 'react'
+import { type ReactNode, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAppStore } from '@/lib/store'
+import { useDownloadStore } from '@/lib/downloads'
 import { Button } from '@/components/ui/button'
 import { type OperationState } from '@/lib/operations'
 
@@ -21,6 +22,55 @@ function BubbleCard({ children }: { children: ReactNode }) {
   )
 }
 
+function ProgressBar({ percent }: { percent?: number }) {
+  return (
+    <div className='mt-3 flex items-center gap-2'>
+      <div className='bg-muted relative h-1.5 flex-1 overflow-hidden rounded-full'>
+        {typeof percent === 'number' ? (
+          <div
+            className='bg-primary h-full rounded-full transition-[width] duration-300'
+            style={{ width: `${percent}%` }}
+          />
+        ) : (
+          <div className='activity-progress-indeterminate from-primary/40 via-primary to-primary/40 absolute inset-0 w-1/2 rounded-full bg-linear-to-r' />
+        )}
+      </div>
+      {typeof percent === 'number' && (
+        <span className='text-muted-foreground w-12 text-right text-[11px] font-semibold tabular-nums'>
+          {percent}%
+        </span>
+      )}
+    </div>
+  )
+}
+
+function DownloadCard({
+  filename,
+  percent,
+  t,
+}: {
+  filename: string
+  percent?: number
+  t: TranslateFunc
+}) {
+  return (
+    <BubbleCard>
+      <div className='flex items-start gap-3'>
+        <div className='bg-primary mt-1 h-2.5 w-2.5 animate-pulse rounded-full shadow-[0_0_0_6px_hsl(var(--primary)/0.16)]' />
+        <div className='flex-1'>
+          <div className='text-foreground text-sm font-semibold'>
+            {t('download.title')}
+          </div>
+          <div className='text-muted-foreground truncate text-xs'>
+            {filename}
+          </div>
+          <ProgressBar percent={percent} />
+        </div>
+      </div>
+    </BubbleCard>
+  )
+}
+
 function OperationCard({
   operation,
   onCancel,
@@ -116,23 +166,7 @@ function OperationCard({
               </span>
             ) : null}
           </div>
-          <div className='mt-3 flex items-center gap-2'>
-            <div className='bg-muted relative h-1.5 flex-1 overflow-hidden rounded-full'>
-              {typeof progress === 'number' ? (
-                <div
-                  className='bg-primary h-full rounded-full transition-[width] duration-300'
-                  style={{ width: `${progress}%` }}
-                />
-              ) : (
-                <div className='activity-progress-indeterminate from-primary/40 via-primary to-primary/40 absolute inset-0 w-1/2 rounded-full bg-linear-to-r' />
-              )}
-            </div>
-            {typeof progress === 'number' && (
-              <span className='text-muted-foreground w-12 text-right text-[11px] font-semibold tabular-nums'>
-                {progress}%
-              </span>
-            )}
-          </div>
+          <ProgressBar percent={progress} />
           {operation.cancellable && (
             <div className='mt-3 flex justify-end'>
               <Button
@@ -158,12 +192,32 @@ export function ActivityBubble() {
   const { t } = useTranslation()
   const operation = useAppStore((state) => state.operation)
   const cancelOperation = useAppStore((state) => state.cancelOperation)
+  const downloads = useDownloadStore((s) => s.downloads)
+  const ensureSubscribed = useDownloadStore((s) => s.ensureSubscribed)
+
+  useEffect(() => {
+    ensureSubscribed()
+  }, [ensureSubscribed])
+
+  const activeDownloads = Array.from(downloads.values()).filter(
+    (d) => d.status === 'Started' || d.status === 'Downloading',
+  )
 
-  if (!operation) return null
+  if (!operation && activeDownloads.length === 0) return null
 
   return (
     <div className='pointer-events-auto fixed right-6 bottom-6 z-100 flex w-80 max-w-[calc(100%-1.5rem)] flex-col gap-3'>
-      <OperationCard operation={operation} onCancel={cancelOperation} t={t} />
+      {operation && (
+        <OperationCard operation={operation} onCancel={cancelOperation} t={t} />
+      )}
+      {activeDownloads.map((d) => (
+        <DownloadCard
+          key={d.filename}
+          filename={d.filename}
+          percent={d.percent}
+          t={t}
+        />
+      ))}
     </div>
   )
 }

ui/lib/backend.ts

@@ -224,6 +224,45 @@ export async function fetchThumbnail(index: number): Promise<Blob> {
   return res.blob()
 }
 
+export type DownloadProgress = {
+  filename: string
+  downloaded: number
+  total?: number
+  status: 'Started' | 'Downloading' | 'Completed' | { Failed: string }
+}
+
+export function subscribeDownloadProgress(
+  callback: (progress: DownloadProgress) => void,
+): () => void {
+  let stopped = false
+
+  ;(async () => {
+    await ensureInitialized()
+    const es = new EventSource(`${apiBase}/download_progress`)
+    es.onmessage = (event) => {
+      if (stopped) {
+        es.close()
+        return
+      }
+      try {
+        callback(JSON.parse(event.data) as DownloadProgress)
+      } catch (_) {}
+    }
+    const check = () => {
+      if (stopped) es.close()
+    }
+    const id = setInterval(check, 1000)
+    es.onerror = () => {
+      clearInterval(id)
+      es.close()
+    }
+  })()
+
+  return () => {
+    stopped = true
+  }
+}
+
 export const isTauri = isTauriEnv
 
 export const isMacOS = (): boolean => {

ui/lib/downloads.ts

@@ -0,0 +1,52 @@
+'use client'
+
+import { create } from 'zustand'
+import { subscribeDownloadProgress, type DownloadProgress } from '@/lib/backend'
+
+type DownloadEntry = DownloadProgress & {
+  percent?: number
+}
+
+type DownloadStore = {
+  downloads: Map<string, DownloadEntry>
+  ensureSubscribed: () => void
+}
+
+let subscribed = false
+
+export const useDownloadStore = create<DownloadStore>((set, get) => ({
+  downloads: new Map(),
+
+  ensureSubscribed: () => {
+    if (subscribed) return
+    subscribed = true
+
+    subscribeDownloadProgress((progress) => {
+      const next = new Map(get().downloads)
+      const percent =
+        progress.total && progress.total > 0
+          ? Math.round((progress.downloaded / progress.total) * 100)
+          : undefined
+
+      const status = progress.status
+      if (
+        status === 'Completed' ||
+        (typeof status === 'object' && 'Failed' in status)
+      ) {
+        next.set(progress.filename, { ...progress, percent })
+        set({ downloads: next })
+        setTimeout(() => {
+          const current = get().downloads
+          if (current.has(progress.filename)) {
+            const updated = new Map(current)
+            updated.delete(progress.filename)
+            set({ downloads: updated })
+          }
+        }, 3000)
+      } else {
+        next.set(progress.filename, { ...progress, percent })
+        set({ downloads: next })
+      }
+    })
+  },
+}))

ui/public/locales/en-US/translation.json

@@ -147,6 +147,9 @@
     "repairBrush": "Repair brush",
     "eraser": "Eraser"
   },
+  "download": {
+    "title": "Downloading"
+  },
   "settings": {
     "title": "Settings",
     "appearance": "Appearance",

ui/public/locales/ja-JP/translation.json

@@ -147,6 +147,9 @@
     "repairBrush": "リペアブラシ",
     "eraser": "消しゴム"
   },
+  "download": {
+    "title": "ダウンロード中"
+  },
   "settings": {
     "title": "設定",
     "appearance": "外観",

ui/public/locales/zh-CN/translation.json

@@ -147,6 +147,9 @@
     "repairBrush": "修复笔",
     "eraser": "橡皮擦"
   },
+  "download": {
+    "title": "下载中"
+  },
   "settings": {
     "title": "设置",
     "appearance": "外观",

ui/public/locales/zh-TW/translation.json

@@ -147,6 +147,9 @@
     "repairBrush": "修復筆",
     "eraser": "橡皮擦"
   },
+  "download": {
+    "title": "下載中"
+  },
   "settings": {
     "title": "設定",
     "appearance": "外觀",