feat: Rust-based processing

koharu/src/app.rs

@@ -59,6 +59,7 @@ pub struct AppResources {
     pub llm: Arc<llm::Model>,
     pub renderer: Arc<Renderer>,
     pub ml_device: DeviceName,
+    pub pipeline: Arc<RwLock<Option<crate::pipeline::PipelineHandle>>>,
 }
 
 #[derive(Parser)]
@@ -208,6 +209,7 @@ async fn build_resources(cpu: bool, _register_file_assoc: bool) -> Result<AppRes
         llm,
         renderer,
         ml_device,
+        pipeline: Arc::new(RwLock::new(None)),
     })
 }
 

koharu/src/endpoints.rs

@@ -27,7 +27,7 @@ use crate::{
     khr::{deserialize_khr, has_khr_magic, serialize_khr},
     llm,
     result::Result,
-    state::{Document, TextBlock, TextStyle},
+    state::{Document, TextBlock},
     version,
 };
 
@@ -194,7 +194,7 @@ pub async fn detect(
     State(state): State<AppResources>,
     Json(payload): Json<IndexPayload>,
 ) -> Result<Json<()>> {
-    let snapshot = {
+    let mut snapshot = {
         let guard = state.state.read().await;
         guard
             .documents
@@ -203,44 +203,14 @@ pub async fn detect(
             .ok_or_else(|| anyhow::anyhow!("Document not found"))?
     };
 
-    let (text_blocks, segment) = state.ml.detect_dialog(&snapshot.image).await?;
-    let mut updated = snapshot.clone();
-    updated.text_blocks = text_blocks;
-    updated.segment = Some(segment);
-
-    if !updated.text_blocks.is_empty() {
-        let images: Vec<image::DynamicImage> = updated
-            .text_blocks
-            .iter()
-            .map(|block| {
-                updated.image.crop_imm(
-                    block.x as u32,
-                    block.y as u32,
-                    block.width as u32,
-                    block.height as u32,
-                )
-            })
-            .collect();
-
-        let font_predictions = state.ml.detect_fonts(&images, 1).await?;
-        for (block, prediction) in updated.text_blocks.iter_mut().zip(font_predictions) {
-            let color = prediction.text_color;
-            let font_size = (prediction.font_size_px > 0.0).then_some(prediction.font_size_px);
-            block.font_prediction = Some(prediction);
-            block.style = Some(TextStyle {
-                font_size,
-                color: [color[0], color[1], color[2], 255],
-                ..Default::default()
-            });
-        }
-    }
+    state.ml.detect(&mut snapshot).await?;
 
     let mut guard = state.state.write().await;
     let document = guard
         .documents
         .get_mut(payload.index)
         .ok_or_else(|| anyhow::anyhow!("Document not found"))?;
-    *document = updated;
+    *document = snapshot;
     Ok(Json(()))
 }
 
@@ -249,7 +219,7 @@ pub async fn ocr(
     State(state): State<AppResources>,
     Json(payload): Json<IndexPayload>,
 ) -> Result<Json<()>> {
-    let snapshot = {
+    let mut snapshot = {
         let guard = state.state.read().await;
         guard
             .documents
@@ -258,16 +228,14 @@ pub async fn ocr(
             .ok_or_else(|| anyhow::anyhow!("Document not found"))?
     };
 
-    let text_blocks = state.ml.ocr(&snapshot.image, &snapshot.text_blocks).await?;
-    let mut updated = snapshot;
-    updated.text_blocks = text_blocks;
+    state.ml.ocr(&mut snapshot).await?;
 
     let mut guard = state.state.write().await;
     let document = guard
         .documents
         .get_mut(payload.index)
         .ok_or_else(|| anyhow::anyhow!("Document not found"))?;
-    *document = updated;
+    *document = snapshot;
     Ok(Json(()))
 }
 
@@ -276,7 +244,7 @@ pub async fn inpaint(
     State(state): State<AppResources>,
     Json(payload): Json<IndexPayload>,
 ) -> Result<Json<()>> {
-    let snapshot = {
+    let mut snapshot = {
         let guard = state.state.read().await;
         guard
             .documents
@@ -285,43 +253,14 @@ pub async fn inpaint(
             .ok_or_else(|| anyhow::anyhow!("Document not found"))?
     };
 
-    let segment = snapshot
-        .segment
-        .as_ref()
-        .ok_or_else(|| anyhow::anyhow!("Segment image not found"))?;
-    let text_blocks = &snapshot.text_blocks;
-    let mut segment_data = segment.to_rgba8();
-    let (seg_width, seg_height) = segment_data.dimensions();
-
-    for y in 0..seg_height {
-        for x in 0..seg_width {
-            let pixel = segment_data.get_pixel_mut(x, y);
-            if pixel.0 != [0, 0, 0, 255] {
-                let inside_any_block = text_blocks.iter().any(|block| {
-                    x >= block.x as u32
-                        && x < (block.x + block.width) as u32
-                        && y >= block.y as u32
-                        && y < (block.y + block.height) as u32
-                });
-                if !inside_any_block {
-                    *pixel = image::Rgba([0, 0, 0, 255]);
-                }
-            }
-        }
-    }
-
-    let mask = SerializableDynamicImage::from(image::DynamicImage::ImageRgba8(segment_data));
-    let inpainted = state.ml.inpaint(&snapshot.image, &mask).await?;
-
-    let mut updated = snapshot;
-    updated.inpainted = Some(inpainted);
+    state.ml.inpaint(&mut snapshot).await?;
 
     let mut guard = state.state.write().await;
     let document = guard
         .documents
         .get_mut(payload.index)
         .ok_or_else(|| anyhow::anyhow!("Document not found"))?;
-    *document = updated;
+    *document = snapshot;
     Ok(Json(()))
 }
 
@@ -544,7 +483,7 @@ pub async fn inpaint_partial(
         SerializableDynamicImage(snapshot.image.crop_imm(x0, y0, crop_width, crop_height));
     let mask_crop = SerializableDynamicImage(mask_image.crop_imm(x0, y0, crop_width, crop_height));
 
-    let inpainted_crop = state.ml.inpaint(&image_crop, &mask_crop).await?;
+    let inpainted_crop = state.ml.inpaint_raw(&image_crop, &mask_crop).await?;
 
     let mut stitched = snapshot
         .inpainted
@@ -849,3 +788,59 @@ pub async fn download_progress()
     });
     Sse::new(stream).keep_alive(KeepAlive::default())
 }
+
+// --- Auto-processing pipeline endpoints ---
+
+/// Start the processing pipeline. Returns immediately; progress is available
+/// via the `process_progress` SSE endpoint.
+pub async fn process(
+    State(state): State<AppResources>,
+    Json(payload): Json<crate::pipeline::ProcessRequest>,
+) -> Result<Json<()>> {
+    {
+        let guard = state.pipeline.read().await;
+        if guard.is_some() {
+            Err(anyhow::anyhow!("A processing pipeline is already running"))?;
+        }
+    }
+
+    let cancel = std::sync::Arc::new(std::sync::atomic::AtomicBool::new(false));
+    {
+        let mut guard = state.pipeline.write().await;
+        *guard = Some(crate::pipeline::PipelineHandle {
+            cancel: cancel.clone(),
+        });
+    }
+
+    let resources = state.clone();
+    tokio::spawn(async move {
+        crate::pipeline::run_pipeline(resources, payload, cancel).await;
+    });
+
+    Ok(Json(()))
+}
+
+pub async fn process_progress()
+-> Sse<impl futures::Stream<Item = std::result::Result<Event, Infallible>>> {
+    let rx = crate::pipeline::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())
+}
+
+pub async fn process_cancel(State(state): State<AppResources>) -> Result<Json<()>> {
+    let guard = state.pipeline.read().await;
+    if let Some(handle) = guard.as_ref() {
+        handle
+            .cancel
+            .store(true, std::sync::atomic::Ordering::Relaxed);
+    }
+    Ok(Json(()))
+}

koharu/src/lib.rs

@@ -5,6 +5,7 @@ pub mod image;
 pub mod khr;
 pub mod llm;
 pub mod ml;
+pub mod pipeline;
 pub mod renderer;
 pub mod result;
 pub mod server;

koharu/src/ml.rs

@@ -1,12 +1,12 @@
 use anyhow::Result;
-use image::DynamicImage;
+use image::{DynamicImage, Rgba};
 use koharu_ml::comic_text_detector::{self, ComicTextDetector};
 use koharu_ml::font_detector::{self, FontDetector};
 use koharu_ml::lama::{self, Lama};
 use koharu_ml::manga_ocr::{self, MangaOcr};
 
 use crate::image::SerializableDynamicImage;
-use crate::state::TextBlock;
+use crate::state::{Document, TextBlock, TextStyle};
 
 const NEAR_BLACK_THRESHOLD: u8 = 12;
 const GRAY_NEAR_BLACK_THRESHOLD: u8 = 60;
@@ -85,11 +85,10 @@ impl Model {
         })
     }
 
-    pub async fn detect_dialog(
-        &self,
-        image: &SerializableDynamicImage,
-    ) -> Result<(Vec<TextBlock>, SerializableDynamicImage)> {
-        let (bboxes, segment) = self.dialog_detector.inference(image)?;
+    /// Detect text blocks and fonts in a document.
+    /// Sets `doc.text_blocks` (with font predictions/styles) and `doc.segment`.
+    pub async fn detect(&self, doc: &mut Document) -> Result<()> {
+        let (bboxes, segment) = self.dialog_detector.inference(&doc.image)?;
 
         let mut text_blocks: Vec<TextBlock> = bboxes
             .into_iter()
@@ -109,22 +108,51 @@ impl Model {
                 .unwrap_or(std::cmp::Ordering::Equal)
         });
 
-        Ok((text_blocks, DynamicImage::ImageLuma8(segment).into()))
+        doc.text_blocks = text_blocks;
+        doc.segment = Some(DynamicImage::ImageLuma8(segment).into());
+
+        if !doc.text_blocks.is_empty() {
+            let images: Vec<DynamicImage> = doc
+                .text_blocks
+                .iter()
+                .map(|block| {
+                    doc.image.crop_imm(
+                        block.x as u32,
+                        block.y as u32,
+                        block.width as u32,
+                        block.height as u32,
+                    )
+                })
+                .collect();
+
+            let font_predictions = self.detect_fonts(&images, 1).await?;
+            for (block, prediction) in doc.text_blocks.iter_mut().zip(font_predictions) {
+                let color = prediction.text_color;
+                let font_size = (prediction.font_size_px > 0.0).then_some(prediction.font_size_px);
+                block.font_prediction = Some(prediction);
+                block.style = Some(TextStyle {
+                    font_size,
+                    color: [color[0], color[1], color[2], 255],
+                    ..Default::default()
+                });
+            }
+        }
+
+        Ok(())
     }
 
-    pub async fn ocr(
-        &self,
-        image: &SerializableDynamicImage,
-        blocks: &[TextBlock],
-    ) -> Result<Vec<TextBlock>> {
-        if blocks.is_empty() {
-            return Ok(Vec::new());
+    /// Run OCR on all text blocks in the document.
+    /// Updates `doc.text_blocks` with recognized text.
+    pub async fn ocr(&self, doc: &mut Document) -> Result<()> {
+        if doc.text_blocks.is_empty() {
+            return Ok(());
         }
 
-        let crops: Vec<DynamicImage> = blocks
+        let crops: Vec<DynamicImage> = doc
+            .text_blocks
             .iter()
             .map(|block| {
-                image.crop_imm(
+                doc.image.crop_imm(
                     block.x as u32,
                     block.y as u32,
                     block.width as u32,
@@ -134,24 +162,54 @@ impl Model {
             .collect();
         let texts = self.ocr.inference(&crops)?;
 
-        Ok(blocks
-            .iter()
-            .cloned()
-            .zip(texts.into_iter())
-            .map(|(block, text)| TextBlock {
-                text: text.into(),
-                ..block
-            })
-            .collect())
+        for (block, text) in doc.text_blocks.iter_mut().zip(texts) {
+            block.text = text.into();
+        }
+
+        Ok(())
+    }
+
+    /// Inpaint text regions in the document.
+    /// Builds mask from `doc.segment` + `doc.text_blocks`, sets `doc.inpainted`.
+    pub async fn inpaint(&self, doc: &mut Document) -> Result<()> {
+        let segment = doc
+            .segment
+            .as_ref()
+            .ok_or_else(|| anyhow::anyhow!("Segment image not found"))?;
+        let mut segment_data = segment.to_rgba8();
+        let (seg_width, seg_height) = segment_data.dimensions();
+
+        for y in 0..seg_height {
+            for x in 0..seg_width {
+                let pixel = segment_data.get_pixel_mut(x, y);
+                if pixel.0 != [0, 0, 0, 255] {
+                    let inside_any_block = doc.text_blocks.iter().any(|block| {
+                        x >= block.x as u32
+                            && x < (block.x + block.width) as u32
+                            && y >= block.y as u32
+                            && y < (block.y + block.height) as u32
+                    });
+                    if !inside_any_block {
+                        *pixel = Rgba([0, 0, 0, 255]);
+                    }
+                }
+            }
+        }
+
+        let mask = SerializableDynamicImage::from(DynamicImage::ImageRgba8(segment_data));
+        let result = self.lama.inference(&doc.image, &mask)?;
+        doc.inpainted = Some(result.into());
+
+        Ok(())
     }
 
-    pub async fn inpaint(
+    /// Low-level inpaint: inpaint a specific image region with a mask.
+    pub async fn inpaint_raw(
         &self,
         image: &SerializableDynamicImage,
         mask: &SerializableDynamicImage,
     ) -> Result<SerializableDynamicImage> {
         let result = self.lama.inference(image, mask)?;
-
         Ok(result.into())
     }
 

koharu/src/pipeline.rs

@@ -0,0 +1,261 @@
+use std::sync::{
+    Arc,
+    atomic::{AtomicBool, Ordering},
+};
+use std::time::Duration;
+
+use koharu_ml::llm::ModelId;
+use koharu_renderer::renderer::TextShaderEffect;
+use once_cell::sync::Lazy;
+use serde::{Deserialize, Serialize};
+use std::str::FromStr;
+use tokio::sync::broadcast;
+
+use crate::app::AppResources;
+
+/// Steps in the processing pipeline.
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub enum PipelineStep {
+    Detect,
+    Ocr,
+    Inpaint,
+    LlmGenerate,
+    Render,
+}
+
+impl PipelineStep {
+    pub const ALL: &[PipelineStep] = &[
+        PipelineStep::Detect,
+        PipelineStep::Ocr,
+        PipelineStep::Inpaint,
+        PipelineStep::LlmGenerate,
+        PipelineStep::Render,
+    ];
+}
+
+/// Status of the pipeline.
+#[derive(Debug, Clone, Serialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
+pub enum PipelineStatus {
+    Running,
+    Completed,
+    Cancelled,
+    Failed(String),
+}
+
+/// SSE event payload sent to the frontend.
+#[derive(Debug, Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct PipelineProgress {
+    pub status: PipelineStatus,
+    pub step: Option<PipelineStep>,
+    pub current_document: usize,
+    pub total_documents: usize,
+    pub current_step_index: usize,
+    pub total_steps: usize,
+    pub overall_percent: u8,
+}
+
+/// Request payload for the auto-process endpoint.
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ProcessRequest {
+    /// None means all documents; Some(i) means single document.
+    pub index: Option<usize>,
+    /// LLM model id to use (will load if not already loaded).
+    pub llm_model_id: Option<String>,
+    /// Target language for translation.
+    pub language: Option<String>,
+    /// Shader effect for rendering.
+    pub shader_effect: Option<TextShaderEffect>,
+}
+
+/// Handle to a running pipeline, used for cancellation.
+pub struct PipelineHandle {
+    pub cancel: Arc<AtomicBool>,
+}
+
+// Global broadcast channel for pipeline progress (mirrors download.rs pattern).
+static PIPELINE_TX: Lazy<broadcast::Sender<PipelineProgress>> =
+    Lazy::new(|| broadcast::channel(256).0);
+
+pub fn subscribe() -> broadcast::Receiver<PipelineProgress> {
+    PIPELINE_TX.subscribe()
+}
+
+fn emit(progress: PipelineProgress) {
+    let _ = PIPELINE_TX.send(progress);
+}
+
+fn compute_percent(doc: usize, step: usize, total_docs: usize, total_steps: usize) -> u8 {
+    let done_units = doc * total_steps + step;
+    let total_units = total_docs * total_steps;
+    if total_units == 0 {
+        return 0;
+    }
+    ((done_units as f64 / total_units as f64) * 100.0).round() as u8
+}
+
+/// Run the processing pipeline. Called from a spawned task.
+pub async fn run_pipeline(
+    resources: AppResources,
+    request: ProcessRequest,
+    cancel: Arc<AtomicBool>,
+) {
+    let result = run_pipeline_inner(&resources, &request, &cancel).await;
+
+    let total_docs = match &request.index {
+        Some(_) => 1,
+        None => resources.state.read().await.documents.len(),
+    };
+
+    match result {
+        Ok(()) if cancel.load(Ordering::Relaxed) => {
+            emit(PipelineProgress {
+                status: PipelineStatus::Cancelled,
+                step: None,
+                current_document: total_docs,
+                total_documents: total_docs,
+                current_step_index: 0,
+                total_steps: PipelineStep::ALL.len(),
+                overall_percent: 0,
+            });
+        }
+        Ok(()) => {
+            emit(PipelineProgress {
+                status: PipelineStatus::Completed,
+                step: None,
+                current_document: total_docs,
+                total_documents: total_docs,
+                current_step_index: PipelineStep::ALL.len(),
+                total_steps: PipelineStep::ALL.len(),
+                overall_percent: 100,
+            });
+        }
+        Err(e) => {
+            tracing::error!("Pipeline failed: {e:#}");
+            emit(PipelineProgress {
+                status: PipelineStatus::Failed(e.to_string()),
+                step: None,
+                current_document: 0,
+                total_documents: total_docs,
+                current_step_index: 0,
+                total_steps: PipelineStep::ALL.len(),
+                overall_percent: 0,
+            });
+        }
+    }
+
+    // Clear the pipeline handle
+    let mut guard = resources.pipeline.write().await;
+    *guard = None;
+}
+
+async fn run_pipeline_inner(
+    res: &AppResources,
+    req: &ProcessRequest,
+    cancel: &Arc<AtomicBool>,
+) -> anyhow::Result<()> {
+    let total_docs = {
+        let guard = res.state.read().await;
+        let len = guard.documents.len();
+        match req.index {
+            Some(i) if i >= len => {
+                anyhow::bail!("Document index {} out of range (have {})", i, len);
+            }
+            Some(_) => 1,
+            None => len,
+        }
+    };
+
+    if total_docs == 0 {
+        return Ok(());
+    }
+
+    // Ensure LLM is loaded
+    if let Some(model_id) = &req.llm_model_id {
+        if !res.llm.ready().await {
+            let id = ModelId::from_str(model_id)?;
+            res.llm.load(id).await;
+            // Poll until ready (with timeout)
+            for _ in 0..300 {
+                if res.llm.ready().await {
+                    break;
+                }
+                tokio::time::sleep(Duration::from_millis(100)).await;
+                if cancel.load(Ordering::Relaxed) {
+                    return Ok(());
+                }
+            }
+            if !res.llm.ready().await {
+                anyhow::bail!("LLM failed to load within timeout");
+            }
+        }
+    }
+
+    if let Some(locale) = req.language.as_ref() {
+        koharu_ml::set_locale(locale.clone());
+    }
+
+    let start_index = req.index.unwrap_or(0);
+    let end_index = req.index.map(|i| i + 1).unwrap_or(total_docs);
+    let total_steps = PipelineStep::ALL.len();
+
+    for (doc_ordinal, doc_index) in (start_index..end_index).enumerate() {
+        for (step_ordinal, step) in PipelineStep::ALL.iter().enumerate() {
+            if cancel.load(Ordering::Relaxed) {
+                return Ok(());
+            }
+
+            let overall = compute_percent(doc_ordinal, step_ordinal, total_docs, total_steps);
+            emit(PipelineProgress {
+                status: PipelineStatus::Running,
+                step: Some(*step),
+                current_document: doc_ordinal,
+                total_documents: total_docs,
+                current_step_index: step_ordinal,
+                total_steps,
+                overall_percent: overall,
+            });
+
+            // Give the runtime a chance to flush the SSE event before blocking ML work
+            tokio::task::yield_now().await;
+            tokio::time::sleep(Duration::from_millis(1)).await;
+
+            // Snapshot → process → write back
+            let mut snapshot =
+                {
+                    let guard = res.state.read().await;
+                    guard.documents.get(doc_index).cloned().ok_or_else(|| {
+                        anyhow::anyhow!("Document not found at index {}", doc_index)
+                    })?
+                };
+
+            match step {
+                PipelineStep::Detect => res.ml.detect(&mut snapshot).await?,
+                PipelineStep::Ocr => res.ml.ocr(&mut snapshot).await?,
+                PipelineStep::Inpaint => res.ml.inpaint(&mut snapshot).await?,
+                PipelineStep::LlmGenerate => {
+                    res.llm.generate(&mut snapshot).await?;
+                }
+                PipelineStep::Render => {
+                    res.renderer.render(
+                        &mut snapshot,
+                        None,
+                        req.shader_effect.unwrap_or_default(),
+                    )?;
+                }
+            }
+
+            let mut guard = res.state.write().await;
+            let document = guard
+                .documents
+                .get_mut(doc_index)
+                .ok_or_else(|| anyhow::anyhow!("Document not found at index {}", doc_index))?;
+            *document = snapshot;
+        }
+    }
+
+    Ok(())
+}

koharu/src/server.rs

@@ -76,6 +76,9 @@ fn build_router(state: AppResources) -> Router {
         .route("/api/llm_ready", get(llm_ready).post(llm_ready))
         .route("/api/llm_generate", post(llm_generate))
         .route("/api/download_progress", get(download_progress))
+        .route("/api/process", post(process))
+        .route("/api/process_cancel", post(process_cancel))
+        .route("/api/process_progress", get(process_progress))
         .with_state(state)
         .layer(DefaultBodyLimit::max(1024 * 1024 * 1024))
         .layer(

scripts/dev.ts

@@ -58,7 +58,7 @@ async function setupCuda() {
   }
 
   throw new Error(
-    'NVCC not found. Please install the CUDA Toolkit from https://developer.nvidia.com/cuda-12-9-1-download-archive',
+    'NVCC not found. Please install the CUDA Toolkit from https://developer.nvidia.com/cuda-downloads',
   )
 }
 

ui/components/ActivityBubble.tsx

@@ -28,7 +28,7 @@ function ProgressBar({ percent }: { percent?: number }) {
       <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'
+            className='bg-primary h-full rounded-full transition-[width] duration-700 ease-out'
             style={{ width: `${percent}%` }}
           />
         ) : (

ui/lib/backend.ts

@@ -231,38 +231,43 @@ export type DownloadProgress = {
   status: 'Started' | 'Downloading' | 'Completed' | { Failed: string }
 }
 
-export function subscribeDownloadProgress(
-  callback: (progress: DownloadProgress) => void,
+export type ProcessProgress = {
+  status: 'running' | 'completed' | 'cancelled' | { failed: string }
+  step: string | null
+  currentDocument: number
+  totalDocuments: number
+  currentStepIndex: number
+  totalSteps: number
+  overallPercent: number
+}
+
+function subscribeSSE<T>(
+  endpoint: string,
+  callback: (data: T) => void,
 ): () => void {
-  let stopped = false
+  let es: EventSource | null = null
 
   ;(async () => {
     await ensureInitialized()
-    const es = new EventSource(`${apiBase}/download_progress`)
+    es = new EventSource(`${apiBase}/${endpoint}`)
     es.onmessage = (event) => {
-      if (stopped) {
-        es.close()
-        return
-      }
       try {
-        callback(JSON.parse(event.data) as DownloadProgress)
+        callback(JSON.parse(event.data) as T)
       } catch (_) {}
     }
-    const check = () => {
-      if (stopped) es.close()
-    }
-    const id = setInterval(check, 1000)
-    es.onerror = () => {
-      clearInterval(id)
-      es.close()
-    }
   })()
 
   return () => {
-    stopped = true
+    es?.close()
   }
 }
 
+export const subscribeDownloadProgress = (cb: (p: DownloadProgress) => void) =>
+  subscribeSSE<DownloadProgress>('download_progress', cb)
+
+export const subscribeProcessProgress = (cb: (p: ProcessProgress) => void) =>
+  subscribeSSE<ProcessProgress>('process_progress', cb)
+
 export const isTauri = isTauriEnv
 
 export const isMacOS = (): boolean => {

ui/lib/operations.ts

@@ -41,10 +41,15 @@ export const createOperationSlice = (set: any): OperationSlice => ({
         : { operation: undefined },
     ),
   finishOperation: () => set({ operation: undefined }),
-  cancelOperation: () =>
+  cancelOperation: () => {
     set((state: OperationSlice) =>
       state.operation
         ? { operation: { ...state.operation, cancelRequested: true } }
         : { operation: undefined },
-    ),
+    )
+    // Also cancel backend pipeline if running
+    import('@/lib/backend').then(({ invoke }) => {
+      invoke('process_cancel').catch(() => {})
+    })
+  },
 })

ui/lib/store.ts

@@ -1,7 +1,13 @@
 'use client'
 
 import { create } from 'zustand'
-import { invoke, getCurrentWindow, ProgressBarStatus } from '@/lib/backend'
+import {
+  invoke,
+  subscribeProcessProgress,
+  getCurrentWindow,
+  ProgressBarStatus,
+  type ProcessProgress,
+} from '@/lib/backend'
 import {
   Document,
   InpaintRegion,
@@ -15,18 +21,6 @@ type LlmModelInfo = {
   languages: string[]
 }
 
-type ProcessAction = 'detect' | 'ocr' | 'inpaint' | 'llmGenerate' | 'render'
-
-type ProcessImageOptionsObject = {
-  onProgress?: (progress: number) => Promise<void>
-  onStepChange?: (step: ProcessAction) => Promise<void> | void
-  skipOperationTracking?: boolean
-}
-
-type ProcessImageOptions =
-  | ((progress: number) => Promise<void>)
-  | ProcessImageOptionsObject
-
 const createTextBlockSyncer = () => {
   let pending: {
     index: number
@@ -211,11 +205,7 @@ type AppState = OperationSlice & {
     index?: number,
     textBlockIndex?: number,
   ) => Promise<void>
-  processImage: (
-    _?: any,
-    index?: number,
-    options?: ProcessImageOptions,
-  ) => Promise<void>
+  processImage: (_?: any, index?: number) => Promise<void>
   inpaintAndRenderImage: (_?: any, index?: number) => Promise<void>
   processAllImages: () => Promise<void>
   exportDocument: () => Promise<void>
@@ -619,98 +609,27 @@ export const useAppStore = create<AppState>((set, get) => {
         void get().renderTextBlock(undefined, index, textBlockIndex)
       }
     },
-    // batch proceeses
-    processImage: async (_, index, options) => {
-      const normalizedOptions: ProcessImageOptionsObject =
-        typeof options === 'function'
-          ? { onProgress: options, skipOperationTracking: false }
-          : (options ?? {})
-
-      const { onProgress, onStepChange, skipOperationTracking } =
-        normalizedOptions
-      const operation = get().operation
-      const isBatchRun = operation?.type === 'process-all'
-
-      if (!get().llmReady) {
-        await get().llmList()
-        await get().llmToggleLoadUnload()
-      }
-
+    // Auto-processing: delegates to the backend pipeline; progress via SSE
+    processImage: async (_, index) => {
       index = index ?? get().currentDocumentIndex
-      console.log('Processing image at index', index)
-      const setProgres = onProgress ?? get().setProgress
-      const shouldTrackOperation = skipOperationTracking !== true && !isBatchRun
-      const ownsOperation = shouldTrackOperation && !isBatchRun
-
-      const actions: ProcessAction[] = [
-        'detect',
-        'ocr',
-        'inpaint',
-        'llmGenerate',
-        'render',
-      ]
-      const totalSteps = actions.length
-
-      if (shouldTrackOperation) {
-        const firstStep = actions[0] ?? 'detect'
-        if (ownsOperation) {
-          get().startOperation({
-            type: 'process-current',
-            step: firstStep,
-            current: 0,
-            total: totalSteps,
-            cancellable: true,
-          })
-        } else {
-          get().updateOperation({
-            step: firstStep,
-            current: 0,
-            total: totalSteps,
-          })
-        }
-      }
-
-      await setProgres(0)
-      for (let i = 0; i < actions.length; i++) {
-        if (get().operation?.cancelRequested) {
-          break
-        }
-
-        const action = actions[i]
-
-        if (onStepChange) {
-          await onStepChange(action)
-        }
-
-        if (shouldTrackOperation) {
-          get().updateOperation({
-            step: action,
-            current: i,
-            total: totalSteps,
-          })
-        }
-
-        await (get() as any)[actions[i]](_, index)
-        await setProgres(Math.floor(((i + 1) / totalSteps) * 100))
-      }
-
-      const cancelled = get().operation?.cancelRequested
-
-      if (shouldTrackOperation && ownsOperation && !cancelled) {
-        get().updateOperation({ current: totalSteps, total: totalSteps })
-      }
-
-      if (shouldTrackOperation && ownsOperation) {
+      get().startOperation({
+        type: 'process-current',
+        cancellable: true,
+        current: 0,
+        total: 5,
+      })
+      try {
+        await invoke('process', {
+          index,
+          llmModelId: get().llmSelectedModel,
+          language: get().llmSelectedLanguage,
+          shaderEffect: get().renderEffect,
+        })
+      } catch (err) {
+        console.error('Failed to start processing:', err)
         get().finishOperation()
-      }
-
-      if (!onProgress) {
         await get().clearProgress()
       }
-
-      if (cancelled) {
-        return
-      }
     },
 
     inpaintAndRenderImage: async (_, index) => {
@@ -723,59 +642,23 @@ export const useAppStore = create<AppState>((set, get) => {
       const total = get().totalPages
       if (!total) return
 
-      if (!get().llmReady) {
-        await get().llmList()
-        await get().llmToggleLoadUnload()
-      }
-
       get().startOperation({
         type: 'process-all',
         cancellable: true,
         current: 0,
         total,
       })
-
-      for (let index = 0; index < total; index++) {
-        if (get().operation?.cancelRequested) break
-
-        // Switch to this document
-        await get().setCurrentDocumentIndex(index)
-        get().updateOperation({
-          current: index,
-          total,
-        })
-
-        await get().processImage(null, index, {
-          onProgress: async (progress) => {
-            if (get().operation?.cancelRequested) return
-            const currentValue = index + progress / 100
-            const overall = Math.min(
-              100,
-              Math.round((currentValue / total) * 100),
-            )
-            await get().setProgress(overall)
-            get().updateOperation({ current: currentValue, total })
-          },
-          onStepChange: (step) => {
-            if (get().operation?.cancelRequested) return
-            get().updateOperation({ step })
-          },
-          skipOperationTracking: true,
+      try {
+        await invoke('process', {
+          llmModelId: get().llmSelectedModel,
+          language: get().llmSelectedLanguage,
+          shaderEffect: get().renderEffect,
         })
-
-        if (get().operation?.cancelRequested) {
-          break
-        }
-
-        get().updateOperation({ current: index + 1, total })
-      }
-
-      if (!get().operation?.cancelRequested) {
-        get().updateOperation({ current: total, total })
+      } catch (err) {
+        console.error('Failed to start processing:', err)
+        get().finishOperation()
+        await get().clearProgress()
       }
-
-      await get().clearProgress()
-      get().finishOperation()
     },
 
     exportDocument: async () => {
@@ -807,6 +690,51 @@ type ConfigState = {
   setBrushConfig: (config: Partial<ConfigState['brushConfig']>) => void
 }
 
+// Subscribe to pipeline progress at module level so the EventSource is
+// connected before any pipeline is started (avoids race with lazy component mount).
+if (typeof window !== 'undefined') {
+  subscribeProcessProgress((progress: ProcessProgress) => {
+    const s = useAppStore.getState()
+    if (progress.status === 'running') {
+      const isSingleDoc = progress.totalDocuments <= 1
+      s.updateOperation({
+        step: progress.step ?? undefined,
+        current: isSingleDoc
+          ? progress.currentStepIndex
+          : progress.currentDocument +
+            (progress.totalSteps > 0
+              ? progress.currentStepIndex / progress.totalSteps
+              : 0),
+        total: isSingleDoc ? progress.totalSteps : progress.totalDocuments,
+      })
+      getCurrentWindow()
+        .setProgressBar({
+          status: ProgressBarStatus.Normal,
+          progress: progress.overallPercent,
+        })
+        .catch(() => {})
+      s.refreshCurrentDocument()
+    } else {
+      // Set to 100% first, then wait for the CSS transition to finish
+      // before removing the bubble.
+      s.updateOperation({
+        current: s.operation?.total,
+        total: s.operation?.total,
+      })
+      getCurrentWindow()
+        .setProgressBar({ status: ProgressBarStatus.Normal, progress: 100 })
+        .catch(() => {})
+      s.refreshCurrentDocument()
+      setTimeout(() => {
+        useAppStore.getState().finishOperation()
+        getCurrentWindow()
+          .setProgressBar({ status: ProgressBarStatus.None, progress: 0 })
+          .catch(() => {})
+      }, 1000)
+    }
+  })
+}
+
 export const useConfigStore = create<ConfigState>((set) => ({
   brushConfig: {
     size: 36,