feat(ui): progress bar mostra stadi di elaborazione in tempo reale (extracting, chunking, embedding, uploading)

Author: strawberry-code

CHANGELOG.md

@@ -7,6 +7,9 @@ and the project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Progress bar now shows processing stages (extracting, chunking, embedding, uploading) in real-time
+
 ### Changed
 - Batch embedding using Ollama /api/embed endpoint, reducing API calls from N to N/10 for faster uploads
 

api/routes/upload.py

@@ -131,14 +131,21 @@ def run_indexing(job_id: str, collection_dir: Path, collection: str, filenames:
 
         jobs[job_id]["progress"] = 0.2
         jobs[job_id]["message"] = f"Processing with {'Tika' if use_tika else 'text-only'} mode"
+        jobs[job_id]["stage"] = "initializing"
+
+        # Progress callback to update job stage
+        def update_progress(stage: str, progress: float):
+            jobs[job_id]["stage"] = stage
+            jobs[job_id]["progress"] = progress
 
         # Create and run pipeline
         pipeline = RagifyPipeline(config, use_tika=use_tika)
-        stats = pipeline.process_directory(collection_dir)
+        stats = pipeline.process_directory(collection_dir, progress_callback=update_progress)
 
         # Update job with results
         jobs[job_id]["progress"] = 1.0
         jobs[job_id]["status"] = "completed"
+        jobs[job_id]["stage"] = "completed"
         jobs[job_id]["message"] = (
             f"Indexed {stats['processed']}/{stats['processed'] + stats['failed']} files, "
             f"{stats['chunks']} chunks, {stats['skipped']} skipped"
@@ -158,6 +165,7 @@ def run_indexing(job_id: str, collection_dir: Path, collection: str, filenames:
         logger.error(f"[{job_id}] Stack trace:\n{stack_trace}")
 
         jobs[job_id]["status"] = "failed"
+        jobs[job_id]["stage"] = "failed"
         jobs[job_id]["message"] = error_msg
         jobs[job_id]["completed_at"] = datetime.utcnow().isoformat()
 
@@ -206,6 +214,7 @@ async def upload_file(
     jobs[job_id] = {
         "job_id": job_id,
         "status": "pending",
+        "stage": "pending",
         "collection": collection,
         "filename": file.filename,
         "progress": 0.0,
@@ -279,6 +288,7 @@ async def upload_multiple_files(
     jobs[job_id] = {
         "job_id": job_id,
         "status": "pending",
+        "stage": "pending",
         "collection": collection,
         "filename": f"{len(saved_files)} files",
         "progress": 0.0,

frontend/index.html

@@ -170,13 +170,13 @@ <h2>Document Input</h2>
                 <h2>Active Operations</h2>
                 <div class="jobs-list">
                     <template x-for="job in jobs" :key="job.job_id">
-                        <div class="job-item" :class="'job-' + job.status">
+                        <div class="job-item" :class="'job-' + (job.stage || job.status)">
                             <div class="job-info">
                                 <span class="job-filename" x-text="job.filename"></span>
                                 <span class="job-collection" x-text="job.collection"></span>
                             </div>
                             <div class="job-status">
-                                <span class="job-badge" x-text="job.status"></span>
+                                <span class="job-badge" x-text="job.stage || job.status"></span>
                                 <div class="progress-bar" x-show="job.status === 'running'">
                                     <div class="progress-fill" :style="'width: ' + (job.progress * 100) + '%'"></div>
                                 </div>

frontend/static/style.css

@@ -615,6 +615,30 @@ body {
     border: 1px solid var(--red);
 }
 
+/* Pipeline stages */
+.job-initializing .job-badge,
+.job-extracting .job-badge {
+    background: rgba(255,179,71,0.2);
+    color: var(--amber);
+    border: 1px solid var(--amber);
+    animation: pulse 1s infinite;
+}
+
+.job-chunking .job-badge,
+.job-embedding .job-badge {
+    background: rgba(57,255,20,0.2);
+    color: var(--green);
+    border: 1px solid var(--green);
+    animation: pulse 1s infinite;
+}
+
+.job-uploading .job-badge {
+    background: rgba(57,255,20,0.3);
+    color: var(--green);
+    border: 1px solid var(--green);
+    animation: pulse 0.5s infinite;
+}
+
 @keyframes pulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.5; }

ragify.py

@@ -213,12 +213,13 @@ def _ensure_collection_exists(self) -> None:
         except Exception as e:
             self.logger.warning(f"Failed to ensure collection exists: {e}")
 
-    def process_directory(self, root_path: Path) -> Dict:
+    def process_directory(self, root_path: Path, progress_callback=None) -> Dict:
         """
         Process all files in a directory.
 
         Args:
             root_path: Root directory to process
+            progress_callback: Optional callback(stage, progress) for progress updates
 
         Returns:
             Processing statistics
@@ -244,7 +245,7 @@ def process_directory(self, root_path: Path) -> Dict:
         with tqdm(total=len(files), desc="Processing files", unit="file") as pbar:
             for file_path in files:
                 try:
-                    self.process_file(file_path, pbar)
+                    self.process_file(file_path, pbar, progress_callback)
                 except Exception as e:
                     self.logger.error(f"Fatal error processing {file_path}: {e}")
                     self.stats.failed_files += 1
@@ -262,13 +263,14 @@ def process_directory(self, root_path: Path) -> Dict:
             'duration': self.stats.duration()
         }
 
-    def process_file(self, file_path: Path, pbar: tqdm) -> None:
+    def process_file(self, file_path: Path, pbar: tqdm, progress_callback=None) -> None:
         """
         Process a single file through the pipeline.
 
         Args:
             file_path: Path to file
             pbar: Progress bar to update
+            progress_callback: Optional callback(stage, progress) for progress updates
         """
         file_size = file_path.stat().st_size
         self.stats.total_bytes += file_size
@@ -292,6 +294,8 @@ def process_file(self, file_path: Path, pbar: tqdm) -> None:
 
         # 2. Extract text and metadata
         pbar.set_postfix_str(f"Extracting: {file_path.name}")
+        if progress_callback:
+            progress_callback("extracting", 0.2)
         text, metadata = extract_file_content(file_path)
 
         if not text:
@@ -314,6 +318,8 @@ def process_file(self, file_path: Path, pbar: tqdm) -> None:
 
         # 4. Chunk text (type-specific if implemented)
         pbar.set_postfix_str(f"Chunking: {file_path.name}")
+        if progress_callback:
+            progress_callback("chunking", 0.4)
         chunks = self.chunk_by_type(cleaned, file_path)
 
         if not chunks:
@@ -325,6 +331,8 @@ def process_file(self, file_path: Path, pbar: tqdm) -> None:
 
         # 5. Generate embeddings
         pbar.set_postfix_str(f"Embedding: {file_path.name} ({len(chunks)} chunks)")
+        if progress_callback:
+            progress_callback("embedding", 0.6)
         embedded_chunks = batch_embed_chunks(chunks, max_tokens=self.config.chunking.max_tokens)
 
         if not embedded_chunks:
@@ -349,6 +357,8 @@ def process_file(self, file_path: Path, pbar: tqdm) -> None:
 
         # 7. Upload to Qdrant
         pbar.set_postfix_str(f"Uploading: {file_path.name}")
+        if progress_callback:
+            progress_callback("uploading", 0.8)
         from lib.qdrant_operations import upload_points
 
         success = True