Upload folder using huggingface_hub

.dockerignore

@@ -1,44 +1,132 @@
-# Version control
+# ── Version control ───────────────────────────────────────────────────────────
 .git
 .gitignore
 
-# Python
-venv/
+# ── Python ────────────────────────────────────────────────────────────────────
 __pycache__/
-*.pyc
-*.pyo
-*.egg-info
-.pytest_cache/
+*.py[cod]
+*$py.class
+*.so
+.Python
+develop-eggs/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+venv/
+env/
+ENV/
+env.bak/
+venv.bak/
+
+# ── Node / frontend build tooling ────────────────────────────────────────────
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.npm
+.eslintcache
+
+# ── Models (downloaded at runtime, never baked into the image) ───────────────
+models/pretrained/*.safetensors
+models/pretrained/*.ckpt
+models/pretrained/*.pth
+models/pretrained/clap
+
+# ── Audio / output (runtime data) ────────────────────────────────────────────
+output/
+*.wav
+*.mp3
+*.flac
+*.aiff
+*.ogg
+
+# ── Logs ─────────────────────────────────────────────────────────────────────
+logs/
+*.log
+app/backend/*.log
+lightning_logs/
 
-# Node
-app/frontend/node_modules/
+# ── Checkpoints ──────────────────────────────────────────────────────────────
+*.ckpt
+models/fine_tuned/*/
+!models/fine_tuned/.gitkeep
 
-# Build artifacts
-build/
+# ── Config (user-generated at runtime) ───────────────────────────────────────
+config/terms_accepted.json
+
+# ── Distribution / build artefacts ───────────────────────────────────────────
+build/fragmenta/
+build/fragmenta.spec
+build/windows_source/
 dist/
 distribution/
+*.dmg
+*.app
+*.exe
+*.iss
+*.pkg
+*.deb
+*.rpm
+*.AppImage
 *.spec
+scripts/__pycache__/
+
+# ── Temporary files ───────────────────────────────────────────────────────────
+tmp/
+temp/
+*.temp
+*.tmp
+.cache
+.parcel-cache
 
-# IDE
+# ── Environment / secrets ─────────────────────────────────────────────────────
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# ── IDE / OS ──────────────────────────────────────────────────────────────────
 .vscode/
 .idea/
 *.swp
 *.swo
-
-# OS files
+*~
 .DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
 Thumbs.db
 
-# Large model files (mounted as volumes instead)
-models/pretrained/*.safetensors
-models/fine_tuned/
-
-# User state — mounted as volumes, must NOT be baked into the image
-config/
-data/
-logs/
+# ── Desktop launcher scripts (not needed in Docker) ───────────────────────────
+fragmenta.sh
+fragmenta.bat
+fragmenta.command
+scripts/
+start.py
+main.py
+debug_binaries.py
+SIMPLIFICATION_PLAN.md
 
-# Docker
-Dockerfile*
-docker-compose*.yml
+# ── Docs (not needed in image) ────────────────────────────────────────────────
+README.md
+NOTICE.md
+DOCKERHUB.md
 DOCKER.md
+
+# ── Data (mounted as volume at runtime) ──────────────────────────────────────
+/data/
+.claude

.gitattributes

@@ -37,3 +37,5 @@ app/frontend/public/BitcountSingle-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf fil
 app/frontend/public/favicon.ico filter=lfs diff=lfs merge=lfs -text
 app/frontend/public/fragmenta_background.png filter=lfs diff=lfs merge=lfs -text
 app/frontend/public/fragmenta_icon_1024.png filter=lfs diff=lfs merge=lfs -text
+app/frontend/build/BitcountSingle-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf filter=lfs diff=lfs merge=lfs -text
+app/frontend/build/fragmenta_background.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -7,23 +7,12 @@
 # CPU Spaces: torch.cuda.is_available() → False → runs on CPU
 # GPU Spaces: NVIDIA runtime injected by HF → torch.cuda.is_available() → True
 #
+# The React frontend is pre-built and committed under app/frontend/build/,
+# so there is no Node.js build step here.
+#
 # Port: 7860 (HF Spaces requirement)
 # =============================================================================
 
-# ---------------------------------------------------------------------------
-# Stage 1: Build the React frontend
-# ---------------------------------------------------------------------------
-FROM node:20-slim AS frontend-builder
-
-WORKDIR /build/frontend
-COPY app/frontend/package.json app/frontend/package-lock.json* ./
-RUN npm ci --prefer-offline --no-audit 2>/dev/null || npm install
-COPY app/frontend/ ./
-RUN npm run build
-
-# ---------------------------------------------------------------------------
-# Stage 2: Python backend (CPU + GPU via bundled CUDA in PyTorch wheels)
-# ---------------------------------------------------------------------------
 FROM python:3.11-slim-bookworm
 
 ENV DEBIAN_FRONTEND=noninteractive
@@ -36,7 +25,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
         curl \
     && apt-get clean && rm -rf /var/lib/apt/lists/*
 
-RUN pip install --no-cache-dir --root-user-action=ignore --upgrade pip setuptools wheel
+RUN pip install --no-cache-dir --root-user-action=ignore --upgrade pip wheel
 
 WORKDIR /app
 
@@ -50,16 +39,16 @@ COPY requirements.txt .
 # On CPU Spaces it gracefully falls back to CPU — no extra cost.
 RUN pip install --no-cache-dir --root-user-action=ignore torch torchvision torchaudio
 
-# Install remaining requirements (skip desktop-only & CUDA index lines)
-RUN grep -ivE 'pyqt6|pyqt6-webengine|flash-attn|extra-index-url' requirements.txt > requirements_docker.txt \
+# Install remaining requirements. Skip desktop-only deps (PyQt6, pywebview's
+# GTK bindings Pycairo/PyGObject), flash-attn, and CUDA index URL.
+RUN grep -ivE 'pyqt6|pyqt6-webengine|flash-attn|pycairo|pygobject|pywebview|extra-index-url' requirements.txt > requirements_docker.txt \
     && pip install --no-cache-dir --root-user-action=ignore -r requirements_docker.txt \
     && rm requirements_docker.txt
 
 # ---------------------------------------------------------------------------
-# Application code
+# Application code (includes pre-built frontend under app/frontend/build/)
 # ---------------------------------------------------------------------------
 COPY . .
-COPY --from=frontend-builder /build/frontend/build ./app/frontend/build
 
 # Install stable-audio-tools in-tree
 RUN pip install --no-cache-dir --root-user-action=ignore -e ./stable-audio-tools/
@@ -109,6 +98,7 @@ ENV FRAGMENTA_LOG_LEVEL=INFO
 ENV FRAGMENTA_DOCKER=1
 ENV HOME=/home/user
 ENV PATH="/home/user/.local/bin:${PATH}"
+ENV OMP_NUM_THREADS=4
 
 EXPOSE 7860
 

README.md

@@ -13,7 +13,7 @@ license: apache-2.0
 
 Generate and fine-tune audio from text prompts using Stable Audio Open.
 
-**Hardware:** cpu-upgrade (CPU)
+**Hardware:** cpu-basic (CPU)
 
 ## Getting Started
 

app/backend/app.py

@@ -2,6 +2,9 @@ from utils.validators import Validator
 from utils.exceptions import ModelNotFoundError, ValidationError, GenerationError
 from utils.api_responses import APIResponse, handle_api_error
 from utils.logger import setup_logging, get_logger
+from app.core.generation.audio_generator import AudioGenerator
+from app.core.training.lora_trainer import start_training as start_training_func, get_training_status, stop_training
+from app.backend.data.simple_audio_processor import SimpleAudioProcessor
 from app.core.config import get_config
 from flask import Flask, request, jsonify, send_file, send_from_directory
 from flask_cors import CORS
@@ -14,13 +17,6 @@ import json
 import logging
 from werkzeug.serving import WSGIRequestHandler
 
-# Heavy imports deferred to _ensure_components() for fast startup
-AudioGenerator = None
-SimpleAudioProcessor = None
-start_training_func = None
-get_training_status = None
-stop_training = None
-
 sys.path.append(os.path.abspath(
     os.path.join(os.path.dirname(__file__), '../../')))
 
@@ -62,6 +58,13 @@ def request_entity_too_large(error):
 
 DEBUG_MODE = os.environ.get('FRAGMENTA_DEBUG', 'false').lower() == 'true'
 
+# ---------------------------------------------------------------------------
+# Lazy-initialised backend components
+# ---------------------------------------------------------------------------
+# These are initialised on first real API request (not at import time) so that
+# the Flask server always starts — even when model files or heavy deps are
+# temporarily unavailable.  The /api/health endpoint works unconditionally.
+# ---------------------------------------------------------------------------
 config = None
 audio_processor = None
 generator = None
@@ -71,40 +74,17 @@ _init_error = None
 
 
 def _ensure_components():
-    """Initialise backend components on first use. Thread-safe.
-    
-    Allows retry: if initialisation failed previously, it will attempt
-    again (e.g. after the user downloads a model or fixes a dependency).
-    """
+    """Initialise backend components on first use. Thread-safe."""
     global config, audio_processor, generator, model_manager
     global _components_initialised, _init_error
 
     if _components_initialised:
         return
-
+    if _init_error:
+        raise RuntimeError(f"Backend failed to initialise earlier: {_init_error}")
 
     try:
         logger.info("Initializing Backend API components (lazy)…")
-
-        # Deferred heavy imports — keeps startup fast
-        global AudioGenerator, SimpleAudioProcessor
-        global start_training_func, get_training_status, stop_training
-        if AudioGenerator is None:
-            from app.core.generation.audio_generator import AudioGenerator as _AG
-            AudioGenerator = _AG
-        if SimpleAudioProcessor is None:
-            from app.backend.data.simple_audio_processor import SimpleAudioProcessor as _SAP
-            SimpleAudioProcessor = _SAP
-        if start_training_func is None:
-            from app.core.training.lora_trainer import (
-                start_training as _st,
-                get_training_status as _gts,
-                stop_training as _stop,
-            )
-            start_training_func = _st
-            get_training_status = _gts
-            stop_training = _stop
-
         config = get_config()
         audio_processor = SimpleAudioProcessor(
             model_config_path=config.get_path("models_config") / "model_config.json"
@@ -115,7 +95,6 @@ def _ensure_components():
         model_manager = ModelManager(config)
 
         _components_initialised = True
-        _init_error = None
         logger.info("Backend components initialized successfully")
 
     except Exception as e:
@@ -123,45 +102,18 @@ def _ensure_components():
         logger.error(f"Failed to initialize backend components: {e}")
         raise
 
-_download_progress = {}
-
-_LAZY_INIT_EXEMPT_PATHS = {
-    '/api/health',
-    '/api/environment',
-    '/api/welcome-page-closed',
-    '/api/welcome-page-status',
-    '/api/open-output-folder',
-    '/api/open-documentation',
-    '/api/base-models/status',
-    '/api/output-files',
-    '/api/hf-token',
-    '/api/hf-token/status',
-    '/api/process-files',
-    '/api/status',
-    '/api/models',
-    '/api/models-status',
-    '/api/gpu-memory-status',
-    '/api/start-fresh',
-    '/api/license-info',
-    '/api/debug-status',
-    '/api/toggle-debug',
-}
-
 
 @app.before_request
 def lazy_init():
     """Initialise heavy components before the first real API call."""
-    if request.path in _LAZY_INIT_EXEMPT_PATHS:
-        return
-    if request.path.startswith('/api/output-files/'):
-        return 
-    if request.path.startswith('/api/models/') and request.path.endswith('/download/progress'):
-        return 
+    if request.path == '/api/health':
+        return  # health endpoint must always work
     try:
         _ensure_components()
     except Exception as e:
         if request.path.startswith('/api/'):
             return jsonify({'error': f'Backend not ready: {e}'}), 503
+        # Static file / React routes — let them through even if init fails
         return None
 
 
@@ -177,51 +129,11 @@ def health_check():
         'gpu_name': torch.cuda.get_device_name(0) if torch.cuda.is_available() else None,
     }
     code = 200 if _components_initialised else 503
-
+    # Return 200 even in degraded mode so Docker HEALTHCHECK doesn't kill
+    # the container before components finish loading
     return jsonify(status), 200
 
 
-@app.route('/api/environment')
-def get_environment():
-    """Return runtime environment info (Docker vs desktop)."""
-    is_docker = os.environ.get('FRAGMENTA_DOCKER', '').strip() == '1'
-    return jsonify({'docker': is_docker})
-
-
-@app.route('/api/hf-token/status', methods=['GET'])
-def hf_token_status():
-    """Check if a valid Hugging Face token is configured."""
-    try:
-        from huggingface_hub import HfApi
-        api = HfApi()
-        user = api.whoami()
-        return jsonify({'authenticated': True, 'username': user.get('name', user.get('fullname', 'Unknown'))})
-    except Exception:
-        return jsonify({'authenticated': False, 'username': None})
-
-
-@app.route('/api/hf-token', methods=['POST'])
-def set_hf_token():
-    """Set a Hugging Face token (for Docker mode where there's no desktop dialog)."""
-    try:
-        data = request.get_json()
-        token = data.get('token', '').strip()
-        if not token:
-            return jsonify({'error': 'Token is required'}), 400
-
-        from huggingface_hub import login, HfApi
-        login(token=token, add_to_git_credential=False)
-
-        api = HfApi()
-        user = api.whoami()
-        username = user.get('name', user.get('fullname', 'Unknown'))
-        logger.info(f"HF token set successfully for user: {username}")
-        return jsonify({'success': True, 'username': username})
-    except Exception as e:
-        logger.error(f"Error setting HF token: {e}")
-        return jsonify({'error': f'Invalid token: {str(e)}'}), 400
-
-
 @app.route('/')
 def serve_react_app():
     return send_from_directory(app.static_folder, 'index.html')
@@ -297,17 +209,17 @@ def process_files():
         chunks_preview_data = []
         for filename, prompt in prompts_data:
             chunks_preview_data.append([
-                filename,  
-                filename, 
-                prompt,  
-                "original" 
+                filename,  # Original filename (not chunked)
+                filename,  # Source file
+                prompt,    # User's prompt
+                "original" # Not chunked
             ])
 
-
+        # Do not overwrite the metadata! keeps dataset creation more sustainable
         json_path = Path(config.get_metadata_json_path())
         existing_metadata = []
         
-
+        # Load existing metadata if file exists
         if json_path.exists():
             try:
                 with open(json_path, 'r', encoding='utf-8') as f:
@@ -323,34 +235,26 @@ def process_files():
             existing_files[filename] = {
                 "file_name": filename,
                 "prompt": prompt,
-                "path": f"data/{filename}"
+                "path": f"app/backend/data/{filename}"
             }
         
+        # Convert back to list and save
         final_metadata = list(existing_files.values())
         
         with open(json_path, 'w', encoding='utf-8') as f:
             import json
             json.dump(final_metadata, f, indent=2)
 
-        legacy_json_path = Path(__file__).parent / 'data' / 'metadata.json'
-        try:
-            legacy_json_path.parent.mkdir(parents=True, exist_ok=True)
-            with open(legacy_json_path, 'w', encoding='utf-8') as f:
-                json.dump(final_metadata, f, indent=2)
-        except Exception as e:
-            logger.warning(f"Could not write legacy metadata to {legacy_json_path}: {e}")
-
-
         try:
             config.update_dataset_config()
-        except Exception as e:
-            logger.warning(f"Could not update dataset config: {e}")
+        except Exception as exc:
+            print(f"Warning: failed to refresh dataset-config.json: {exc}")
 
         return jsonify({
             'message': f'Files saved successfully! {len(saved_files)} original files saved to data folder',
             'saved_files': saved_files,
             'processed_count': len(saved_files),
-            'chunks_preview': chunks_preview_data, 
+            'chunks_preview': chunks_preview_data,  # Show all files (no chunking)
             'data_folder': str(data_dir),
             'metadata_json': str(json_path),
             'approach': 'original_files_only'
@@ -374,17 +278,11 @@ def start_training():
         print(f"   - Model Name: {training_config.get('modelName', 'untitled')}")
         print(f"   - Base Model: {training_config.get('baseModel', 'NOT SET')}")
         print(f"   - Epochs: {training_config.get('epochs', 'NOT SET')}")
+        print(f"   - Checkpoint Steps: {training_config.get('checkpointSteps', 'NOT SET')}")
         print(f"   - Batch Size: {training_config.get('batchSize', 'NOT SET')}")
         print(f"   - Learning Rate: {training_config.get('learningRate', 'NOT SET')}")
         print(f"   - Save Wrapped Checkpoint: {training_config.get('saveWrappedCheckpoint', False)}")
 
-        try:
-            _cfg = get_config()
-            _cfg.update_dataset_config()
-            print("   Dataset config regenerated successfully")
-        except Exception as dc_err:
-            print(f"   WARNING: Could not regenerate dataset config: {dc_err}")
-
         required_fields = ['modelName', 'baseModel']
         missing_fields = [field for field in required_fields if field not in training_config]
         if missing_fields:
@@ -400,8 +298,11 @@ def start_training():
             return jsonify({'error': error_msg}), 400
 
         if 'epochs' not in training_config:
-            training_config['epochs'] = 3
-            print(f"   Setting default epochs: 3")
+            training_config['epochs'] = 30
+            print(f"   Setting default epochs: 30")
+        if 'checkpointSteps' not in training_config:
+            training_config['checkpointSteps'] = 50
+            print(f"   Setting default checkpointSteps: 50")
         if 'batchSize' not in training_config:
             training_config['batchSize'] = 1
             print(f"   Setting default batch size: 1")
@@ -416,6 +317,7 @@ def start_training():
         print(f"   - Model Name: {training_config['modelName']}")
         print(f"   - Base Model: {training_config['baseModel']}")
         print(f"   - Epochs: {training_config['epochs']}")
+        print(f"   - Checkpoint Steps: {training_config['checkpointSteps']}")
         print(f"   - Batch Size: {training_config['batchSize']}")
         print(f"   - Learning Rate: {training_config['learningRate']}")
         print(f"   - Save Wrapped Checkpoint: {training_config['saveWrappedCheckpoint']}")
@@ -464,6 +366,7 @@ def generate_audio():
         config_file = None
         model_file_path = None
 
+        # Priority: unwrapped_model_path > model_path > base model
         if unwrapped_model_path:
             model_file_path = Path(unwrapped_model_path)
             if not model_file_path.exists():
@@ -478,6 +381,7 @@ def generate_audio():
                     f"model_path:{model_name}", str(model_file_path))
             logger.debug(f"Using model path: {model_file_path}")
 
+        # Determine config based on file size or model name
         if model_file_path:
             file_size_gb = model_file_path.stat().st_size / (1024**3)
             config_file = "model_config_small.json" if file_size_gb < 2.0 else "model_config.json"
@@ -498,7 +402,7 @@ def generate_audio():
     logger.info(f"Starting generation with config: {config_file}")
     try:
         if determined_model_path and determined_model_path.exists():
-
+            # Use the determined model path
             output_path = generator.generate_audio(
                 prompt,
                 unwrapped_model_path=unwrapped_model_path if unwrapped_model_path else None,
@@ -507,7 +411,7 @@ def generate_audio():
                 duration=duration
             )
         elif model_name in ['stable-audio-open-small', 'stable-audio-open-1.0']:
-
+            # Handle base models
             model_file_mapping = {
                 'stable-audio-open-small': 'stable-audio-open-small-model.safetensors',
                 'stable-audio-open-1.0': 'stable-audio-open-model.safetensors'
@@ -599,7 +503,7 @@ def get_status():
             'has_metadata_json': metadata_json.exists(),
             'has_custom_metadata': custom_metadata.exists(),
             'trained_models': len(list(config.get_path("models_fine_tuned").glob("*"))) if config.get_path("models_fine_tuned").exists() else 0,
-            'training': get_training_status() if get_training_status else {'is_training': False, 'progress': 0}
+            'training': get_training_status()
         }
 
         return jsonify(status_response)
@@ -644,8 +548,10 @@ def get_models():
                 has_checkpoint = len(checkpoint_files) > 0
                 has_config = len(config_files) > 0
 
+                # Create detailed checkpoint information
                 checkpoints = []
                 for ckpt_file in checkpoint_files:
+                    # Extract epoch and step from filename if possible
                     import re
                     name = ckpt_file.stem
                     epoch_match = re.search(r'epoch=(\d+)', name)
@@ -653,6 +559,7 @@ def get_models():
 
                     checkpoint_info = {
                         'name': name,
+                        # Use relative path
                         'path': str(ckpt_file.relative_to(config.project_root)),
                         'size_mb': round(ckpt_file.stat().st_size / (1024 * 1024), 1),
                         'created': ckpt_file.stat().st_mtime
@@ -665,38 +572,45 @@ def get_models():
 
                     checkpoints.append(checkpoint_info)
 
+                # Sort checkpoints by creation time (newest first)
                 checkpoints.sort(key=lambda x: x['created'], reverse=True)
 
+                # Get the latest checkpoint and config files
                 latest_checkpoint = max(checkpoint_files, key=lambda x: x.stat(
                 ).st_mtime) if checkpoint_files else None
                 latest_config = max(
                     config_files, key=lambda x: x.stat().st_mtime) if config_files else None
 
+                # Check for unwrapped models
                 unwrapped_dir = model_dir / "unwrapped"
                 unwrapped_models = []
                 if unwrapped_dir.exists():
                     for unwrapped_file in unwrapped_dir.glob("*.safetensors"):
                         unwrapped_models.append({
                             'name': unwrapped_file.stem,
+                            # Use relative path
                             'path': str(unwrapped_file.relative_to(config.project_root)),
                             'size_mb': round(unwrapped_file.stat().st_size / (1024 * 1024), 1),
                             'created': unwrapped_file.stat().st_mtime
                         })
 
+                    # Sort unwrapped models by creation time (newest first)
                     unwrapped_models.sort(
                         key=lambda x: x['created'], reverse=True)
 
-                base_config_path = "models/config/model_config_small.json" 
+                # For fine-tuned models, use the base model's config
+                base_config_path = "models/config/model_config_small.json"  # Use relative path
 
                 models.append({
                     'name': model_dir.name,
+                    # Use relative path
                     'path': str(model_dir.relative_to(config.project_root)),
                     'has_checkpoint': has_checkpoint,
                     'has_config': has_config,
                     # Use relative path
                     'ckpt_path': str(latest_checkpoint.relative_to(config.project_root)) if latest_checkpoint else None,
-                    'config_path': base_config_path,  
-                    'checkpoints': checkpoints,  
+                    'config_path': base_config_path,  # Use base model config for unwrapping
+                    'checkpoints': checkpoints,  # Detailed checkpoint list
                     'unwrapped_models': unwrapped_models,
                     'created': model_dir.stat().st_mtime if model_dir.exists() else None
                 })
@@ -743,43 +657,43 @@ def accept_model_terms(model_id):
 
 @app.route('/api/models/<model_id>/download', methods=['POST'])
 def download_model(model_id):
-    """Start downloading a model from Hugging Face (async)"""
+    """Download a model from Hugging Face"""
     try:
+        # Check if terms are accepted
         if not model_manager.is_terms_accepted(model_id):
             return jsonify({'error': 'Terms not accepted for this model'}), 400
 
-        if model_id in _download_progress and _download_progress[model_id].get('status') == 'downloading':
-            return jsonify({'success': True, 'message': 'Download already in progress'})
-
-        _download_progress[model_id] = {'percent': 0, 'message': 'Starting download...', 'status': 'downloading'}
-
-        def progress_callback(percent, message):
-            _download_progress[model_id] = {'percent': percent, 'message': message, 'status': 'downloading'}
-
-        def run_download():
-            try:
-                success = model_manager.download_model(model_id, progress_callback=progress_callback)
-                if success:
-                    _download_progress[model_id] = {'percent': 100, 'message': 'Download complete', 'status': 'done'}
-                else:
-                    msg = _download_progress.get(model_id, {}).get('message', 'Download failed')
-                    _download_progress[model_id] = {'percent': 0, 'message': msg, 'status': 'error'}
-            except Exception as e:
-                _download_progress[model_id] = {'percent': 0, 'message': str(e), 'status': 'error'}
-
-        t = threading.Thread(target=run_download, daemon=True)
-        t.start()
-
-        return jsonify({'success': True, 'message': f'Download started for {model_id}'})
+        # Start download
+        success = model_manager.download_model(model_id)
+        if success:
+            return jsonify({
+                'success': True,
+                'message': f'Model {model_id} downloaded successfully'
+            })
+        else:
+            return jsonify({'error': f'Failed to download {model_id}'}), 500
     except Exception as e:
         return jsonify({'error': str(e)}), 500
 
 
-@app.route('/api/models/<model_id>/download/progress', methods=['GET'])
-def download_progress(model_id):
-    """Get the download progress for a model"""
-    progress = _download_progress.get(model_id, {'percent': 0, 'message': 'No download in progress', 'status': 'idle'})
-    return jsonify(progress)
+@app.route('/api/hf-login', methods=['POST'])
+def hf_login():
+    """Login to Hugging Face with a token"""
+    try:
+        data = request.json
+        token = data.get('token')
+        if not token:
+            return jsonify({'error': 'Token is required'}), 400
+            
+        import huggingface_hub
+        try:
+            huggingface_hub.login(token=token, add_to_git_credential=False)
+            user_info = huggingface_hub.whoami(token=token)
+            return jsonify({'success': True, 'user': user_info.get('name', 'User')})
+        except Exception as e:
+            return jsonify({'error': f'Invalid token or connection error: {str(e)}'}), 401
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
 
 
 @app.route('/api/base-models/status', methods=['GET'])
@@ -789,34 +703,31 @@ def get_base_models_status():
         import os
         from pathlib import Path
         
-        # Use absolute path based on project root (reliable in Docker)
-        project_root = Path(__file__).parent.parent.parent
-        pretrained_dir = project_root / 'models' / 'pretrained'
-        
         base_models = {
             'stable-audio-open-1.0': {
                 'name': 'Stable Audio Open 1.0',
-                'path': str(pretrained_dir),
-                'file': 'stable-audio-open-model.safetensors', 
+                'path': 'models/pretrained',  # Updated to correct path
+                'file': 'stable-audio-open-model.safetensors',  # Specific file to check
                 'downloaded': False
             },
             'stable-audio-open-small': {
                 'name': 'Stable Audio Open Small', 
-                'path': str(pretrained_dir), 
-                'file': 'stable-audio-open-small-model.safetensors', 
+                'path': 'models/pretrained',  # Updated to correct path
+                'file': 'stable-audio-open-small-model.safetensors',  # Specific file to check
                 'downloaded': False
             }
         }
         
+        # Check if models are actually downloaded by looking for specific files
         for model_id, info in base_models.items():
             model_dir = Path(info['path'])
             model_file = model_dir / info['file']
             
-            logger.info(f"[base-models/status] Checking {model_id}: {model_file} exists={model_file.exists()}")
-            
+            # Check if the specific model file exists
             if model_file.exists() and model_file.is_file():
                 info['downloaded'] = True
             else:
+                # Fallback: check subdirectory structure (old format)
                 old_path = model_dir / model_id
                 if old_path.exists() and old_path.is_dir():
                     has_files = any([
@@ -864,6 +775,7 @@ def start_fresh():
         data_dir = config.get_path("data")
         config_dir = config.get_path("models_config")
 
+        # Delete all data files
         data_files_deleted = 0
         if data_dir.exists():
             for file_path in data_dir.glob("*"):
@@ -871,6 +783,7 @@ def start_fresh():
                     file_path.unlink()
                     data_files_deleted += 1
 
+        # Delete config metadata files (but keep the model configs)
         config_files_deleted = 0
         if config_dir.exists():
             for file_path in config_dir.glob("custom_metadata.py"):
@@ -878,6 +791,7 @@ def start_fresh():
                     file_path.unlink()
                     config_files_deleted += 1
 
+        # Recreate empty data directory
         data_dir.mkdir(exist_ok=True, parents=True)
 
         return jsonify({
@@ -902,24 +816,28 @@ def unwrap_model():
         if not model_config or not ckpt_path:
             return jsonify({'error': 'model_config and ckpt_path are required'}), 400
 
+        # Use the stable-audio-tools unwrap_model.py script directly for individual checkpoints
         import subprocess
         from pathlib import Path
 
+        # Get config to resolve relative paths
         config = get_config()
         repo_root = config.project_root
 
+        # Resolve paths relative to project root
         model_config_path = repo_root / \
             model_config if not Path(
                 model_config).is_absolute() else Path(model_config)
         ckpt_path_resolved = repo_root / \
             ckpt_path if not Path(ckpt_path).is_absolute() else Path(ckpt_path)
 
+        # Validate paths exist
         if not model_config_path.exists():
             return jsonify({'error': f'Model config not found: {model_config_path}'}), 400
         if not ckpt_path_resolved.exists():
             return jsonify({'error': f'Checkpoint not found: {ckpt_path_resolved}'}), 400
 
-
+        # Get the model directory and create unwrapped subdirectory
         model_dir = ckpt_path_resolved.parent
         unwrapped_dir = model_dir / "unwrapped"
         unwrapped_dir.mkdir(exist_ok=True)
@@ -1300,24 +1218,14 @@ _memory_warning_interval = 30  # seconds
 
 @app.route('/api/open-output-folder', methods=['POST'])
 def open_output_folder():
-    """Open the output folder in the system file explorer.
-    In Docker mode, returns a helpful message instead of trying xdg-open."""
+    """Open the output folder in the system file explorer"""
     try:
-        output_path = Path("output")
-        output_path.mkdir(exist_ok=True)
-
-        is_docker = os.environ.get('FRAGMENTA_DOCKER', '').strip() == '1'
-        if is_docker:
-            return jsonify({
-                "success": True,
-                "docker": True,
-                "path": str(output_path.absolute()),
-                "message": "In Docker mode, access output files via the mounted volume on your host (./output/) or use the file browser in the UI."
-            })
-
         import subprocess
         import platform
-
+        
+        output_path = Path("output")
+        output_path.mkdir(exist_ok=True)
+        
         system = platform.system()
         if system == "Windows":
             subprocess.run(["explorer", str(output_path.absolute())])
@@ -1325,61 +1233,41 @@ def open_output_folder():
             subprocess.run(["open", str(output_path.absolute())])
         else:  # Linux
             subprocess.run(["xdg-open", str(output_path.absolute())])
-
+            
         return jsonify({"success": True, "message": "Output folder opened"})
     except Exception as e:
         logger.error(f"Error opening output folder: {e}")
         return jsonify({"success": False, "error": str(e)}), 500
 
-
-@app.route('/api/output-files', methods=['GET'])
-def list_output_files():
-    """List files in the output directory (useful for Docker users)."""
+@app.route('/api/open-documentation', methods=['POST'])
+def open_documentation():
+    """Open selected public Fragmenta links in the system browser."""
     try:
-        output_path = Path("output")
-        output_path.mkdir(exist_ok=True)
+        import webbrowser
 
-        files = []
-        for f in sorted(output_path.iterdir(), key=lambda p: p.stat().st_mtime, reverse=True):
-            if f.is_file():
-                stat = f.stat()
-                files.append({
-                    'name': f.name,
-                    'size': stat.st_size,
-                    'modified': stat.st_mtime
-                })
-        return jsonify({'files': files})
-    except Exception as e:
-        logger.error(f"Error listing output files: {e}")
-        return jsonify({'error': str(e)}), 500
+        payload = request.get_json(silent=True) or {}
+        doc_key = payload.get('doc_key', 'about')
 
+        docs_map = {
+            'about': 'https://www.misaghazimi.com/fragmenta',
+            'documentation': 'https://github.com/MAz-Codes/Fragmenta',
+        }
 
-@app.route('/api/output-files/<path:filename>', methods=['GET'])
-def download_output_file(filename):
-    """Download a specific file from the output directory."""
-    try:
-        from werkzeug.utils import secure_filename as _secure
-        safe_name = _secure(filename)
-        output_path = Path("output")
-        file_path = output_path / safe_name
-        if not file_path.exists() or not file_path.is_file():
-            return jsonify({'error': 'File not found'}), 404
-        return send_file(str(file_path.absolute()), as_attachment=True, download_name=safe_name)
-    except Exception as e:
-        logger.error(f"Error downloading output file: {e}")
-        return jsonify({'error': str(e)}), 500
+        target_url = docs_map.get(doc_key)
+        if not target_url:
+            return jsonify({
+                "success": False,
+                "error": f"Unsupported documentation target: {doc_key}"
+            }), 400
 
-@app.route('/api/open-documentation', methods=['POST'])
-def open_documentation():
-    """Open the documentation URL in the default browser"""
-    try:
-        import webbrowser
-        
-        # TODO: Replace with actual documentation URL
-        documentation_url = "https://github.com/your-repo/fragmenta-docs"
-        webbrowser.open(documentation_url)
-        
-        return jsonify({"success": True, "message": "Documentation opened"})
+        webbrowser.open(target_url)
+
+        return jsonify({
+            "success": True,
+            "message": f"Opened {doc_key}",
+            "doc_key": doc_key,
+            "url": target_url,
+        })
     except Exception as e:
         logger.error(f"Error opening documentation: {e}")
         return jsonify({"success": False, "error": str(e)}), 500
@@ -1446,10 +1334,31 @@ def get_license_info():
 def get_models_status():
     """Check if required models exist and if auth dialog should be shown"""
     try:
-        from app.core.hf_auth_dialog import check_required_models_exist, should_show_auth_dialog
-        
-        models_exist, models_message = check_required_models_exist()
-        should_show, auth_reason = should_show_auth_dialog()
+        required_models = ['stable-audio-open-small', 'stable-audio-open-1.0']
+        downloaded_models = [
+            model_id for model_id in required_models if model_manager.is_model_downloaded(model_id)
+        ]
+        models_exist = len(downloaded_models) > 0
+        models_message = (
+            "Required base models are available."
+            if models_exist
+            else "No required base model is downloaded yet."
+        )
+
+        hf_authenticated = False
+        try:
+            from huggingface_hub import HfApi
+            HfApi().whoami()
+            hf_authenticated = True
+        except Exception:
+            hf_authenticated = False
+
+        should_show = (not models_exist) and (not hf_authenticated)
+        auth_reason = (
+            "Hugging Face authentication is required to download gated models."
+            if should_show
+            else "Authentication already available or models already downloaded."
+        )
         
         return jsonify({
             "models_exist": models_exist,
@@ -1575,6 +1484,267 @@ def get_gpu_memory_status():
         return jsonify({'error': str(e)}), 500
 
 
+# ---------------------------------------------------------------------------
+# Bulk auto-annotation
+# ---------------------------------------------------------------------------
+_annotate_job_lock = threading.Lock()
+_annotate_job = {
+    'state': 'idle',   # idle | running | done | error
+    'current': 0,
+    'total': 0,
+    'current_file': '',
+    'tier': None,
+    'folder': None,
+    'results': [],
+    'error': None,
+}
+_clap_download_job = {
+    'state': 'idle',   # idle | running | done | error
+    'message': '',
+    'error': None,
+}
+
+
+def _annotator_labels_path():
+    return Path(get_config().project_root) / 'config' / 'annotator_labels.json'
+
+
+def _clap_ckpt_path():
+    from app.backend.data.auto_annotator import clap_checkpoint_path
+    return clap_checkpoint_path(get_config().get_path('models_pretrained'))
+
+
+@app.route('/api/pick-folder', methods=['POST'])
+def pick_folder():
+    """Open a native folder-picker dialog on the host and return the chosen path."""
+    import subprocess
+    import shutil as _shutil
+
+    payload = request.json or {}
+    start_dir = payload.get('start_dir') or str(Path.home())
+
+    def _try(cmd):
+        try:
+            out = subprocess.run(cmd, capture_output=True, text=True, timeout=300)
+            if out.returncode == 0:
+                path = out.stdout.strip()
+                if path:
+                    return path
+        except Exception as exc:
+            logger.debug("folder dialog attempt failed (%s): %s", cmd[0], exc)
+        return None
+
+    chosen = None
+
+    if sys.platform.startswith('linux'):
+        if _shutil.which('zenity'):
+            chosen = _try(['zenity', '--file-selection', '--directory',
+                           f'--filename={start_dir}/', '--title=Choose audio folder'])
+        if not chosen and _shutil.which('kdialog'):
+            chosen = _try(['kdialog', '--getexistingdirectory', start_dir])
+        if not chosen:
+            # fall back to system python3's tkinter (the venv may not have tk)
+            script = (
+                "import tkinter as tk; from tkinter import filedialog; "
+                "r = tk.Tk(); r.withdraw(); "
+                f"p = filedialog.askdirectory(initialdir={start_dir!r}, title='Choose audio folder'); "
+                "print(p or '')"
+            )
+            chosen = _try(['python3', '-c', script])
+    elif sys.platform == 'darwin':
+        chosen = _try(['osascript', '-e',
+                       f'POSIX path of (choose folder with prompt "Choose audio folder" default location POSIX file "{start_dir}")'])
+    elif sys.platform == 'win32':
+        ps = (
+            "Add-Type -AssemblyName System.Windows.Forms; "
+            "$d = New-Object System.Windows.Forms.FolderBrowserDialog; "
+            f"$d.SelectedPath = '{start_dir}'; "
+            "if ($d.ShowDialog() -eq 'OK') {{ Write-Output $d.SelectedPath }}"
+        )
+        chosen = _try(['powershell', '-NoProfile', '-Command', ps])
+
+    if not chosen:
+        return jsonify({'path': None, 'cancelled': True})
+    return jsonify({'path': chosen})
+
+
+@app.route('/api/bulk-annotate/status', methods=['GET'])
+def bulk_annotate_status():
+    from app.backend.data.auto_annotator import clap_checkpoint_available
+    with _annotate_job_lock:
+        snapshot = {k: v for k, v in _annotate_job.items() if k != 'results'}
+        snapshot['result_count'] = len(_annotate_job['results'])
+    snapshot['clap_available'] = clap_checkpoint_available(get_config().get_path('models_pretrained'))
+    snapshot['clap_download'] = dict(_clap_download_job)
+    return jsonify(snapshot)
+
+
+@app.route('/api/bulk-annotate/results', methods=['GET'])
+def bulk_annotate_results():
+    with _annotate_job_lock:
+        return jsonify({'results': list(_annotate_job['results']), 'state': _annotate_job['state']})
+
+
+@app.route('/api/bulk-annotate', methods=['POST'])
+def bulk_annotate():
+    payload = request.json or {}
+    folder = payload.get('folder_path', '').strip()
+    tier = payload.get('tier', 'basic')
+    if tier not in ('basic', 'rich'):
+        return jsonify({'error': f"Invalid tier: {tier}"}), 400
+    if not folder:
+        return jsonify({'error': 'folder_path is required'}), 400
+
+    folder_path = Path(folder).expanduser()
+    if not folder_path.exists() or not folder_path.is_dir():
+        return jsonify({'error': f'Folder not found: {folder_path}'}), 400
+
+    from app.backend.data.auto_annotator import (
+        annotate_folder, load_label_sets, clap_checkpoint_available,
+    )
+
+    if tier == 'rich' and not clap_checkpoint_available(get_config().get_path('models_pretrained')):
+        return jsonify({'error': 'CLAP checkpoint not downloaded yet.'}), 409
+
+    with _annotate_job_lock:
+        if _annotate_job['state'] == 'running':
+            return jsonify({'error': 'An annotation job is already running.'}), 409
+        _annotate_job.update({
+            'state': 'running', 'current': 0, 'total': 0, 'current_file': '',
+            'tier': tier, 'folder': str(folder_path), 'results': [], 'error': None,
+        })
+
+    labels = load_label_sets(_annotator_labels_path())
+
+    def progress_cb(i, total, name):
+        with _annotate_job_lock:
+            _annotate_job['current'] = i
+            _annotate_job['total'] = total
+            _annotate_job['current_file'] = name
+
+    def runner():
+        try:
+            results = annotate_folder(
+                folder_path, tier=tier, label_sets=labels,
+                clap_ckpt_path=_clap_ckpt_path() if tier == 'rich' else None,
+                progress_cb=progress_cb,
+            )
+            with _annotate_job_lock:
+                _annotate_job['results'] = results
+                _annotate_job['state'] = 'done'
+        except Exception as exc:
+            logger.exception("Bulk annotation failed")
+            with _annotate_job_lock:
+                _annotate_job['state'] = 'error'
+                _annotate_job['error'] = str(exc)
+
+    threading.Thread(target=runner, daemon=True).start()
+    return jsonify({'message': 'Annotation started', 'tier': tier, 'folder': str(folder_path)})
+
+
+@app.route('/api/bulk-annotate/commit', methods=['POST'])
+def bulk_annotate_commit():
+    """Merge user-reviewed annotation results into metadata.json.
+
+    Body: { entries: [{ file_name, prompt, path }, ...], copy_files: bool }
+    """
+    payload = request.json or {}
+    entries = payload.get('entries') or []
+    copy_files = bool(payload.get('copy_files', True))
+    if not entries:
+        return jsonify({'error': 'No entries to commit.'}), 400
+
+    config = get_config()
+    data_dir = config.get_path('data')
+    data_dir.mkdir(exist_ok=True, parents=True)
+
+    json_path = Path(config.get_metadata_json_path())
+    existing_metadata = []
+    if json_path.exists():
+        try:
+            with open(json_path, 'r', encoding='utf-8') as f:
+                existing_metadata = json.load(f)
+        except Exception as exc:
+            logger.warning("Could not load existing metadata: %s", exc)
+            existing_metadata = []
+    existing_files = {item['file_name']: item for item in existing_metadata}
+
+    import shutil
+    committed = 0
+    for entry in entries:
+        file_name = entry.get('file_name')
+        prompt = (entry.get('prompt') or '').strip()
+        src_path = entry.get('path')
+        if not file_name or not prompt or not src_path:
+            continue
+
+        src = Path(src_path)
+        if copy_files and src.exists() and src.parent.resolve() != data_dir.resolve():
+            dst = data_dir / file_name
+            if not dst.exists() or dst.stat().st_size != src.stat().st_size:
+                try:
+                    shutil.copy2(src, dst)
+                except Exception as exc:
+                    logger.warning("Copy failed for %s: %s", src, exc)
+                    continue
+            stored_path = f"app/backend/data/{file_name}"
+        else:
+            stored_path = str(src)
+
+        existing_files[file_name] = {
+            'file_name': file_name,
+            'prompt': prompt,
+            'path': stored_path,
+        }
+        committed += 1
+
+    final_metadata = list(existing_files.values())
+    with open(json_path, 'w', encoding='utf-8') as f:
+        json.dump(final_metadata, f, indent=2)
+
+    try:
+        config.update_dataset_config()
+    except Exception as exc:
+        logger.warning("Failed to refresh dataset-config.json: %s", exc)
+
+    return jsonify({
+        'message': f'Committed {committed} annotations.',
+        'committed': committed,
+        'metadata_json': str(json_path),
+    })
+
+
+@app.route('/api/bulk-annotate/download-clap', methods=['POST'])
+def bulk_annotate_download_clap():
+    from app.backend.data.auto_annotator import download_clap_checkpoint
+
+    with _annotate_job_lock:
+        if _clap_download_job['state'] == 'running':
+            return jsonify({'error': 'CLAP download already in progress.'}), 409
+        _clap_download_job.update({'state': 'running', 'message': 'Starting download…', 'error': None})
+
+    def runner():
+        try:
+            target = download_clap_checkpoint(
+                get_config().get_path('models_pretrained'),
+                progress_cb=lambda m: _clap_download_job.update({'message': m}),
+            )
+            _clap_download_job.update({'state': 'done', 'message': f'Downloaded to {target}'})
+        except Exception as exc:
+            logger.exception("CLAP download failed")
+            _clap_download_job.update({'state': 'error', 'error': str(exc)})
+
+    threading.Thread(target=runner, daemon=True).start()
+    return jsonify({'message': 'CLAP download started'})
+
+
+@app.route('/api/bulk-annotate/unload-clap', methods=['POST'])
+def bulk_annotate_unload_clap():
+    from app.backend.data.auto_annotator import unload_clap
+    unload_clap()
+    return jsonify({'message': 'CLAP unloaded from memory.'})
+
+
 @app.route('/shutdown', methods=['POST'])
 def shutdown():
     """Shutdown the Flask server gracefully"""
@@ -1591,4 +1761,7 @@ def shutdown():
 
 
 if __name__ == '__main__':
-    app.run(debug=True, port=5001)
+    # 0.0.0.0: reachable at this machine's LAN/Tailscale IPs (e.g. http://100.122.31.32:5001).
+    host = os.environ.get('FLASK_HOST', '0.0.0.0')
+    port = int(os.environ.get('FLASK_PORT', '5001'))
+    app.run(debug=True, host=host, port=port)

app/backend/data/auto_annotator.py

@@ -0,0 +1,406 @@
+"""Automatic audio annotation for bulk dataset creation.
+
+Two tiers:
+  - basic: librosa-only DSP (tempo, key). No downloads. CPU. ~instant per file.
+  - rich:  basic + LAION-CLAP zero-shot tagging (genre, mood, instrument).
+           Lazy-loaded; downloads ~2.35 GB checkpoint on first use.
+"""
+
+from __future__ import annotations
+
+import json
+import logging
+import os
+import threading
+from pathlib import Path
+from typing import Any, Callable, Dict, List, Optional
+
+logger = logging.getLogger(__name__)
+
+AUDIO_EXTENSIONS = (".wav", ".mp3", ".flac", ".m4a", ".ogg", ".aac")
+
+CLAP_CKPT_FILENAME = "music_audioset_epoch_15_esc_90.14.pt"
+CLAP_REPO = "lukewys/laion_clap"
+
+KEY_NAMES_SHARP = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]
+KEY_NAMES_FLAT = ["C", "Db", "D", "Eb", "E", "F", "Gb", "G", "Ab", "A", "Bb", "B"]
+
+# Krumhansl-Schmuckler key profiles.
+KRUMHANSL_MAJOR = [6.35, 2.23, 3.48, 2.33, 4.38, 4.09, 2.52, 5.19, 2.39, 3.66, 2.29, 2.88]
+KRUMHANSL_MINOR = [6.33, 2.68, 3.52, 5.38, 2.60, 3.53, 2.54, 4.75, 3.98, 2.69, 3.34, 3.17]
+
+
+def _iter_audio_files(folder: Path) -> List[Path]:
+    results: List[Path] = []
+    for root, _, files in os.walk(folder):
+        for name in files:
+            if name.startswith("."):
+                continue
+            if name.lower().endswith(AUDIO_EXTENSIONS):
+                results.append(Path(root) / name)
+    results.sort()
+    return results
+
+
+def _estimate_tempo(y, sr) -> Optional[int]:
+    import librosa
+    try:
+        tempo, _ = librosa.beat.beat_track(y=y, sr=sr)
+        bpm = float(tempo if hasattr(tempo, "__float__") else tempo[0])
+        if bpm <= 0:
+            return None
+        return int(round(bpm))
+    except Exception as exc:
+        logger.debug("tempo estimation failed: %s", exc)
+        return None
+
+
+def _estimate_brightness(y, sr) -> Optional[str]:
+    import librosa
+    try:
+        centroid = float(librosa.feature.spectral_centroid(y=y, sr=sr).mean())
+    except Exception as exc:
+        logger.debug("centroid estimation failed: %s", exc)
+        return None
+    if centroid <= 0:
+        return None
+    if centroid < 1500:
+        return "dark"
+    if centroid > 3500:
+        return "bright"
+    return None
+
+
+def _estimate_character(y, sr) -> Optional[str]:
+    import librosa
+    import numpy as np
+    try:
+        harm, perc = librosa.effects.hpss(y)
+        eh = float(np.mean(harm ** 2))
+        ep = float(np.mean(perc ** 2))
+    except Exception as exc:
+        logger.debug("HPSS failed: %s", exc)
+        return None
+    total = eh + ep
+    if total <= 0:
+        return None
+    perc_ratio = ep / total
+    if perc_ratio > 0.65:
+        return "percussion-driven"
+    if perc_ratio < 0.20:
+        return "melodic"
+    return None
+
+
+def _estimate_key(y, sr) -> Optional[str]:
+    import librosa
+    import numpy as np
+    try:
+        chroma = librosa.feature.chroma_cqt(y=y, sr=sr)
+        chroma_mean = chroma.mean(axis=1)
+        if chroma_mean.sum() <= 0:
+            return None
+        chroma_mean = chroma_mean / chroma_mean.sum()
+
+        major = np.asarray(KRUMHANSL_MAJOR)
+        minor = np.asarray(KRUMHANSL_MINOR)
+
+        best_score = -1.0
+        best_key = None
+        for i in range(12):
+            maj_score = float(np.corrcoef(chroma_mean, np.roll(major, i))[0, 1])
+            min_score = float(np.corrcoef(chroma_mean, np.roll(minor, i))[0, 1])
+            if maj_score > best_score:
+                best_score = maj_score
+                best_key = f"{KEY_NAMES_SHARP[i]} major"
+            if min_score > best_score:
+                best_score = min_score
+                best_key = f"{KEY_NAMES_SHARP[i]} minor"
+        return best_key
+    except Exception as exc:
+        logger.debug("key estimation failed: %s", exc)
+        return None
+
+
+def _compose_prompt(parts: Dict[str, Any]) -> str:
+    genre = parts.get("genre")
+    mood = parts.get("mood")
+    instruments = parts.get("instruments") or []
+    bpm = parts.get("bpm")
+    key = parts.get("key")
+    brightness = parts.get("brightness")
+    character = parts.get("character")
+
+    head_bits: List[str] = []
+    if mood:
+        head_bits.append(str(mood))
+    if genre:
+        head_bits.append(f"{genre} track")
+    elif head_bits:
+        head_bits[-1] = f"{head_bits[-1]} track"
+    opening = " ".join(head_bits)
+
+    descriptors = [d for d in (brightness, character) if d]
+
+    fragments: List[str] = []
+    if opening:
+        fragments.append(opening)
+    if descriptors:
+        fragments.append(", ".join(descriptors))
+    if bpm:
+        fragments.append(f"{bpm} BPM")
+    if key:
+        fragments.append(f"in {key}")
+    if instruments:
+        fragments.append("with " + ", ".join(instruments))
+
+    out = ", ".join(fragments)
+    return out[:1].upper() + out[1:] if out else ""
+
+
+class _ClapTagger:
+    """Lazy holder for a LAION-CLAP model used for zero-shot tagging."""
+
+    def __init__(self, ckpt_path: Path):
+        self.ckpt_path = ckpt_path
+        self._model = None
+        self._lock = threading.Lock()
+        self._label_embeds: Dict[str, Any] = {}
+
+    def ensure_loaded(self):
+        if self._model is not None:
+            return
+        with self._lock:
+            if self._model is not None:
+                return
+            if not self.ckpt_path.exists():
+                raise FileNotFoundError(
+                    f"CLAP checkpoint not found at {self.ckpt_path}. "
+                    "Download it first via /api/bulk-annotate/download-clap."
+                )
+            import laion_clap
+            import torch
+            logging.getLogger("transformers").setLevel(logging.ERROR)
+
+            device = "cuda" if torch.cuda.is_available() else "cpu"
+            model = laion_clap.CLAP_Module(enable_fusion=False, amodel="HTSAT-base", device=device)
+
+            # torch >= 2.6 flipped torch.load(weights_only=True) and newer
+            # transformers dropped the roberta position_ids buffer, so
+            # laion_clap's own load_ckpt errors twice: unpickling, then strict
+            # state_dict mismatch. Replicate its logic safely here.
+            from laion_clap.clap_module.factory import load_state_dict as clap_load_state_dict
+
+            orig_load = torch.load
+            def _trusted_load(*args, **kwargs):
+                kwargs.setdefault("weights_only", False)
+                return orig_load(*args, **kwargs)
+            torch.load = _trusted_load
+            try:
+                state = clap_load_state_dict(str(self.ckpt_path), skip_params=True)
+            finally:
+                torch.load = orig_load
+            missing, unexpected = model.model.load_state_dict(state, strict=False)
+            if unexpected:
+                logger.debug("CLAP unexpected keys ignored: %s", unexpected[:5])
+            if missing:
+                logger.debug("CLAP missing keys: %s", missing[:5])
+            self._model = model
+            self._device = device
+            logger.info("CLAP loaded on %s from %s", device, self.ckpt_path)
+
+    def _embed_labels(self, group: str, prompts: List[str]):
+        import torch
+        key = f"{group}:{'|'.join(prompts)}"
+        if key in self._label_embeds:
+            return self._label_embeds[key]
+        with torch.no_grad():
+            embed = self._model.get_text_embedding(prompts, use_tensor=True)
+        embed = embed / embed.norm(dim=-1, keepdim=True).clamp_min(1e-8)
+        self._label_embeds[key] = embed
+        return embed
+
+    def tag(self, audio_path: Path, label_sets: Dict[str, List[str]], top_k_instruments: int = 2) -> Dict[str, Any]:
+        self.ensure_loaded()
+        import torch
+
+        with torch.no_grad():
+            audio_embed = self._model.get_audio_embedding_from_filelist(
+                x=[str(audio_path)], use_tensor=True
+            )
+        audio_embed = audio_embed / audio_embed.norm(dim=-1, keepdim=True).clamp_min(1e-8)
+
+        out: Dict[str, Any] = {}
+        for group in ("genre", "mood"):
+            labels = label_sets.get(group) or []
+            if not labels:
+                continue
+            prompts = [f"a {lab} music track" if group == "genre" else f"a {lab} sounding music track" for lab in labels]
+            text_embed = self._embed_labels(group, prompts)
+            sims = (audio_embed @ text_embed.T).squeeze(0)
+            top = int(sims.argmax().item())
+            out[group] = labels[top]
+
+        instruments = label_sets.get("instruments") or []
+        if instruments:
+            prompts = [f"music featuring {lab}" for lab in instruments]
+            text_embed = self._embed_labels("instruments", prompts)
+            sims = (audio_embed @ text_embed.T).squeeze(0)
+            k = min(top_k_instruments, len(instruments))
+            top_idx = torch.topk(sims, k=k).indices.tolist()
+            out["instruments"] = [instruments[i] for i in top_idx]
+        return out
+
+
+_clap_tagger_singleton: Optional[_ClapTagger] = None
+_clap_tagger_lock = threading.Lock()
+
+
+def get_clap_tagger(clap_ckpt_path: Path) -> _ClapTagger:
+    global _clap_tagger_singleton
+    with _clap_tagger_lock:
+        if _clap_tagger_singleton is None or _clap_tagger_singleton.ckpt_path != clap_ckpt_path:
+            _clap_tagger_singleton = _ClapTagger(clap_ckpt_path)
+    return _clap_tagger_singleton
+
+
+def clap_checkpoint_path(models_pretrained_dir: Path) -> Path:
+    return models_pretrained_dir / "clap" / CLAP_CKPT_FILENAME
+
+
+def clap_checkpoint_available(models_pretrained_dir: Path) -> bool:
+    return clap_checkpoint_path(models_pretrained_dir).exists()
+
+
+def download_clap_checkpoint(
+    models_pretrained_dir: Path,
+    progress_cb: Optional[Callable[[str], None]] = None,
+) -> Path:
+    target = clap_checkpoint_path(models_pretrained_dir)
+    target.parent.mkdir(parents=True, exist_ok=True)
+    if target.exists():
+        return target
+
+    from huggingface_hub import hf_hub_download
+
+    if progress_cb:
+        progress_cb("Downloading CLAP checkpoint (~630 MB)…")
+
+    downloaded = hf_hub_download(
+        repo_id=CLAP_REPO,
+        filename=CLAP_CKPT_FILENAME,
+        local_dir=str(target.parent),
+    )
+    downloaded_path = Path(downloaded)
+    if downloaded_path != target:
+        try:
+            downloaded_path.replace(target)
+        except OSError:
+            import shutil
+            shutil.copy2(downloaded_path, target)
+    return target
+
+
+def load_label_sets(label_sets_path: Optional[Path]) -> Dict[str, List[str]]:
+    if not label_sets_path or not label_sets_path.exists():
+        return {"genre": [], "mood": [], "instruments": []}
+    with open(label_sets_path, "r", encoding="utf-8") as f:
+        data = json.load(f)
+    return {
+        "genre": list(data.get("genre") or []),
+        "mood": list(data.get("mood") or []),
+        "instruments": list(data.get("instruments") or []),
+    }
+
+
+def annotate_file(
+    audio_path: Path,
+    tier: str,
+    clap_tagger: Optional[_ClapTagger],
+    label_sets: Dict[str, List[str]],
+    sr: int = 22050,
+    max_seconds: float = 60.0,
+) -> Dict[str, Any]:
+    import librosa
+
+    parts: Dict[str, Any] = {}
+    try:
+        y, loaded_sr = librosa.load(str(audio_path), sr=sr, mono=True, duration=max_seconds)
+    except Exception as exc:
+        logger.warning("librosa failed to load %s: %s", audio_path.name, exc)
+        return {
+            "file_name": audio_path.name,
+            "prompt": "",
+            "path": str(audio_path),
+            "error": f"load failed: {exc}",
+        }
+
+    parts["bpm"] = _estimate_tempo(y, loaded_sr)
+    parts["key"] = _estimate_key(y, loaded_sr)
+    parts["brightness"] = _estimate_brightness(y, loaded_sr)
+    parts["character"] = _estimate_character(y, loaded_sr)
+
+    if tier == "rich" and clap_tagger is not None:
+        try:
+            tags = clap_tagger.tag(audio_path, label_sets)
+            parts.update(tags)
+        except Exception as exc:
+            logger.warning("CLAP tagging failed for %s: %s", audio_path.name, exc)
+
+    prompt = _compose_prompt(parts)
+    return {
+        "file_name": audio_path.name,
+        "prompt": prompt,
+        "path": str(audio_path),
+        "attributes": parts,
+    }
+
+
+def annotate_folder(
+    folder: Path,
+    tier: str,
+    label_sets: Dict[str, List[str]],
+    clap_ckpt_path: Optional[Path] = None,
+    progress_cb: Optional[Callable[[int, int, str], None]] = None,
+) -> List[Dict[str, Any]]:
+    folder = Path(folder)
+    if not folder.exists() or not folder.is_dir():
+        raise ValueError(f"Folder not found: {folder}")
+
+    files = _iter_audio_files(folder)
+    if not files:
+        raise ValueError(f"No audio files found in {folder}")
+
+    clap_tagger: Optional[_ClapTagger] = None
+    if tier == "rich":
+        if not clap_ckpt_path or not Path(clap_ckpt_path).exists():
+            raise FileNotFoundError(
+                "Rich tier requires the CLAP checkpoint; download it first."
+            )
+        clap_tagger = get_clap_tagger(Path(clap_ckpt_path))
+        clap_tagger.ensure_loaded()
+
+    results: List[Dict[str, Any]] = []
+    total = len(files)
+    for i, audio_path in enumerate(files, start=1):
+        if progress_cb:
+            progress_cb(i, total, audio_path.name)
+        entry = annotate_file(audio_path, tier, clap_tagger, label_sets)
+        results.append(entry)
+    return results
+
+
+def unload_clap():
+    """Free CLAP weights from VRAM. Call before training starts."""
+    global _clap_tagger_singleton
+    with _clap_tagger_lock:
+        if _clap_tagger_singleton is not None:
+            _clap_tagger_singleton._model = None
+            _clap_tagger_singleton._label_embeds = {}
+            _clap_tagger_singleton = None
+    try:
+        import torch
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+    except Exception:
+        pass

app/core/config.py

@@ -8,14 +8,18 @@ class ProjectConfig:
 
     def __init__(self, project_root: Optional[Path] = None) -> None:
         if getattr(sys, 'frozen', False):
+            # Running in PyInstaller bundle
             self.frozen = True
+            # sys._MEIPASS is where PyInstaller unpacks the bundle
             self.project_root = Path(sys._MEIPASS)
             
+            # For writable data, use a user directory
             if sys.platform == "win32":
                 self.user_data_dir = Path(os.environ["APPDATA"]) / "FragmentaDesktop"
             elif sys.platform == "darwin":
                 self.user_data_dir = Path.home() / "Library" / "Application Support" / "FragmentaDesktop"
             else:
+                # Linux/Unix
                 self.user_data_dir = Path.home() / ".local" / "share" / "FragmentaDesktop"
                 
             self.user_data_dir.mkdir(parents=True, exist_ok=True)
@@ -41,6 +45,7 @@ class ProjectConfig:
             self.user_data_dir = self.project_root
 
         self.paths: Dict[str, Path] = {
+            # Writable paths - go to user_data_dir in frozen mode
             "models": self.user_data_dir / "models",
             "models_config": self.user_data_dir / "models" / "config",
             "models_pretrained": self.user_data_dir / "models" / "pretrained",
@@ -134,7 +139,7 @@ class ProjectConfig:
                 "datasets": [
                     {
                         "id": "fine_tune_data",
-                        "path": str(self.paths["data"]),
+                        "path": str(self.paths["data"].relative_to(self.project_root)),
                         "custom_metadata_module": "custom_metadata"
                     }
                 ],

app/core/generation/audio_generator.py

@@ -1,15 +1,23 @@
 import torch
-import torchaudio
+import soundfile as sf
 import numpy as np
 from pathlib import Path
 from typing import Dict, Any, Optional, List, Tuple
 import logging
 import sys
 import time
+import warnings
 
 sys.path.append(
     str(Path(__file__).parent.parent.parent.parent / "stable-audio-tools"))
 
+# Third-party package noise (clip/pkg_resources) is non-actionable for runtime.
+warnings.filterwarnings(
+    "ignore",
+    message=r"pkg_resources is deprecated as an API.*",
+    category=UserWarning,
+)
+
 from stable_audio_tools.models.utils import load_ckpt_state_dict
 from stable_audio_tools.inference.generation import generate_diffusion_cond
 from stable_audio_tools.models import create_model_from_config
@@ -68,10 +76,7 @@ class AudioGenerator:
             self.model.eval()
             self.model.requires_grad_(False)
             if self.device.startswith("cuda"):
-                try:
-                    self.model = torch.compile(self.model, mode="reduce-overhead")
-                except Exception as compile_err:
-                    logger.warning(f"torch.compile failed ({compile_err}), using eager mode")
+                self.model = torch.compile(self.model, mode="reduce-overhead")
 
             logger.info("Local base model loaded successfully")
             return True
@@ -129,10 +134,7 @@ class AudioGenerator:
             self.model.requires_grad_(False)
 
             if self.device.startswith("cuda"):
-                try:
-                    self.model = torch.compile(self.model, mode="reduce-overhead")
-                except Exception as compile_err:
-                    logger.warning(f"torch.compile failed ({compile_err}), using eager mode")
+                self.model = torch.compile(self.model, mode="reduce-overhead")
 
             print(f"AUDIO GENERATOR: Unwrapped model loaded successfully")
             return True
@@ -174,23 +176,7 @@ class AudioGenerator:
         print(f"   - Prompt: '{prompt}'")
         print(f"   - Duration: {duration}s")
 
-        # Determine what model we need to load
-        needs_load = False
-        if self.model is None:
-            print(f"AUDIO GENERATOR: No model loaded yet")
-            needs_load = True
-        elif unwrapped_model_path:
-            # Unwrapped model requested — reload if different
-            if self.current_model_path != unwrapped_model_path:
-                print(f"AUDIO GENERATOR: Switching to different unwrapped model")
-                needs_load = True
-        elif model_path is not None:
-            # Base/fine-tuned model requested — reload only if different
-            if self.current_model_path != str(model_path):
-                print(f"AUDIO GENERATOR: Switching to different model (current={self.current_model_path}, requested={model_path})")
-                needs_load = True
-        
-        if needs_load:
+        if self.model is None or model_path is not None or unwrapped_model_path is not None:
             print(f"AUDIO GENERATOR: Loading new model")
 
             if unwrapped_model_path:
@@ -279,19 +265,34 @@ class AudioGenerator:
             device = next(self.model.parameters()).device
             print(f"Using device: {device}")
 
-            audio = generate_diffusion_cond(
-                model=self.model,
-                steps=steps,
-                cfg_scale=cfg_scale,
-                conditioning=conditioning,
-                batch_size=1,
-                sample_size=requested_sample_size,
-                seed=seed,
-                device=str(device),
-                sigma_min=0.03,
-                sigma_max=1000,
-                sampler_type="dpmpp-3m-sde"
-            )
+            with warnings.catch_warnings():
+                # Known torchsde float-boundary chatter from dpmpp-3m-sde.
+                warnings.filterwarnings(
+                    "ignore",
+                    message=r"Should have tb<=t1 but got tb=.*",
+                    category=UserWarning,
+                    module=r"torchsde\._brownian\.brownian_interval",
+                )
+                warnings.filterwarnings(
+                    "ignore",
+                    message=r"Should have ta>=t0 but got ta=.*",
+                    category=UserWarning,
+                    module=r"torchsde\._brownian\.brownian_interval",
+                )
+
+                audio = generate_diffusion_cond(
+                    model=self.model,
+                    steps=steps,
+                    cfg_scale=cfg_scale,
+                    conditioning=conditioning,
+                    batch_size=1,
+                    sample_size=requested_sample_size,
+                    seed=seed,
+                    device=str(device),
+                    sigma_min=0.03,
+                    sigma_max=1000,
+                    sampler_type="dpmpp-3m-sde"
+                )
 
             print(f"Generation complete, audio shape: {audio.shape}")
 
@@ -358,7 +359,8 @@ class AudioGenerator:
 
     def save_audio(self, audio: torch.Tensor, output_path: Path, sample_rate: int):
         output_path.parent.mkdir(exist_ok=True, parents=True)
-        torchaudio.save(str(output_path), audio, sample_rate)
+        audio_np = audio.detach().cpu().transpose(0, 1).numpy()
+        sf.write(str(output_path), audio_np, sample_rate, subtype="PCM_16")
 
     def get_model_info(self) -> Dict[str, Any]:
         if self.model is None:

app/core/model_manager.py

@@ -203,50 +203,17 @@ class ModelManager:
                 print(f"Not authenticated with Hugging Face: {auth_error}")
                 if progress_callback:
                     progress_callback(0, "Authentication required...")
-
-                is_docker = os.environ.get('FRAGMENTA_DOCKER', '').strip() == '1'
-                if is_docker:
-                    print("Docker mode: HF authentication required. "
-                          "Set your token via Model Setup in the browser UI, "
-                          "or pass -e HF_TOKEN=hf_xxx to docker run.")
-                    if progress_callback:
-                        progress_callback(0, "HF authentication required — use Model Setup to set your token")
-                    return False
-
-                try:
-                    from app.core.hf_auth_dialog import show_hf_auth_dialog
-                    success = show_hf_auth_dialog()
-
-                    if not success:
-                        print("Authentication dialog was cancelled")
-                        if progress_callback:
-                            progress_callback(0, "Authentication cancelled")
-                        return False
-
-                    try:
-                        user = api.whoami()
-                        print(f"Now authenticated as: {user}")
-                        if progress_callback:
-                            progress_callback(
-                                10, "Authentication successful...")
-                    except Exception as retry_error:
-                        print(f"Still not authenticated: {retry_error}")
-                        if progress_callback:
-                            progress_callback(0, "Authentication failed")
-                        return False
-
-                except ImportError:
-                    print("To download models, you need to:")
-                    print(
-                        "1. Visit https://huggingface.co/stabilityai/stable-audio-open-small")
-                    print("2. Accept the terms and conditions")
-                    print("3. Log in to your Hugging Face account")
-                    print(
-                        "4. Get your access token from https://huggingface.co/settings/tokens")
-                    print("5. Run: huggingface-cli login")
-                    if progress_callback:
-                        progress_callback(0, "Manual authentication required")
-                    return False
+                print("To download models, you need to:")
+                print(
+                    "1. Visit https://huggingface.co/stabilityai/stable-audio-open-small")
+                print("2. Accept the terms and conditions")
+                print("3. Log in to your Hugging Face account")
+                print(
+                    "4. Get your access token from https://huggingface.co/settings/tokens")
+                print("5. Use the in-app Hugging Face login dialog")
+                if progress_callback:
+                    progress_callback(0, "Please authenticate in the app first")
+                return False
 
             if progress_callback:
                 progress_callback(20, "Starting file download...")
@@ -257,6 +224,7 @@ class ModelManager:
                 from tqdm import tqdm
                 import sys
                 
+                # Redirect tqdm to capture progress
                 class TqdmToCallback:
                     def __init__(self, callback, file_index, total_files):
                         self.callback = callback
@@ -268,6 +236,7 @@ class ModelManager:
                         """Returns a callback function for tqdm"""
                         def inner(bytes_amount=1):
                             if t.total:
+                                # Calculate progress: 20-90% range for all files
                                 file_progress = (t.n / t.total)
                                 overall_progress = (self.file_index + file_progress) / self.total_files
                                 percent = 20 + int(overall_progress * 70)
@@ -304,8 +273,10 @@ class ModelManager:
                         else:
                             final_filename = f"{model_id}-{file_pattern}"
 
+                        # Use custom tqdm callback to intercept progress
                         tqdm_callback = TqdmToCallback(progress_callback, i, total_files)
                         
+                        # Monkey-patch tqdm for this download
                         original_tqdm_init = tqdm.__init__
                         
                         def patched_tqdm_init(self, *args, **kwargs):
@@ -336,6 +307,7 @@ class ModelManager:
                                 resume_download=True
                             )
                         finally:
+                            # Restore original tqdm
                             tqdm.__init__ = original_tqdm_init
 
                         downloaded_path = Path(downloaded_file)

app/core/training/lora_trainer.py

@@ -10,6 +10,9 @@ import torch.mps
 
 from app.core.config import get_config
 
+DEFAULT_EPOCHS = 30
+DEFAULT_CHECKPOINT_STEPS = 50
+
 def get_base_model_configs():
     config = get_config()
     return config.model_configs
@@ -24,7 +27,7 @@ class LoRATrainer:
             "is_training": False,
             "progress": 0,
             "current_epoch": 0,
-            "total_epochs": config.get("epochs", 10),
+            "total_epochs": config.get("epochs", DEFAULT_EPOCHS),
             "loss": None,
             "loss_history": [],
             "error": None,
@@ -37,6 +40,26 @@ class LoRATrainer:
             "checkpoints_saved": 0,
         }
 
+    @staticmethod
+    def _resolve_checkpoint_interval(total_steps: int, requested_interval: int) -> int:
+        """Choose a checkpoint interval that lands exactly on the final step."""
+        requested = max(1, int(requested_interval))
+        if total_steps <= 0:
+            return requested
+
+        requested = min(requested, total_steps)
+        if total_steps % requested == 0:
+            return requested
+
+        # Prefer a nearby lower divisor to keep cadence similar to user input.
+        min_reasonable = max(10, requested // 3)
+        for candidate in range(requested - 1, min_reasonable - 1, -1):
+            if total_steps % candidate == 0:
+                return candidate
+
+        # Fall back to one checkpoint at the exact final step.
+        return total_steps
+
     def _validate_dataset_before_training(self) -> Dict[str, Any]:
         try:
             from app.core.config import get_config
@@ -71,16 +94,16 @@ class LoRATrainer:
                 }
             
             steps_per_epoch = max(1, file_count // batch_size)
-            total_epochs = self.config.get("epochs", 10)
+            total_epochs = self.config.get("epochs", DEFAULT_EPOCHS)
             total_steps = steps_per_epoch * total_epochs
-            checkpoint_every = self.config.get("checkpointSteps", 100)
-            
-            checkpoint_warning = None
-            if total_steps < checkpoint_every:
-                checkpoint_warning = (
-                    f"WARNING: NOT ENOUGH DATA! "
-                    f"Training will complete in {total_steps} steps, but checkpoints are set to save every {checkpoint_every} steps. "
-                    f"Add more audio files or reduce checkpoint interval."
+            requested_checkpoint_every = self.config.get("checkpointSteps", DEFAULT_CHECKPOINT_STEPS)
+            checkpoint_every = self._resolve_checkpoint_interval(total_steps, requested_checkpoint_every)
+
+            checkpoint_adjustment = None
+            if checkpoint_every != requested_checkpoint_every:
+                checkpoint_adjustment = (
+                    f"Adjusted checkpoint interval from {requested_checkpoint_every} to {checkpoint_every} "
+                    f"so the final step ({total_steps}) is always checkpointed."
                 )
             
             return {
@@ -90,7 +113,8 @@ class LoRATrainer:
                 "steps_per_epoch": steps_per_epoch,
                 "total_steps": total_steps,
                 "checkpoint_every": checkpoint_every,
-                "checkpoint_warning": checkpoint_warning
+                "requested_checkpoint_every": requested_checkpoint_every,
+                "checkpoint_adjustment": checkpoint_adjustment,
             }
             
         except Exception as e:
@@ -126,7 +150,7 @@ class LoRATrainer:
         print(f"RECEIVED TRAINING CONFIG:")
         print(f"- Model Name: {self.config.get('modelName', 'untitled')}")
         print(f"- Base Model: {base_model}")
-        print(f"- Epochs: {self.config.get('epochs', 3)}")
+        print(f"- Epochs: {self.config.get('epochs', DEFAULT_EPOCHS)}")
         print(f"- Batch Size: {self.config.get('batchSize', 1)}")
         print(f"- Learning Rate: {self.config.get('learningRate', 1e-4)}")
         base_model_configs = get_base_model_configs()
@@ -261,6 +285,28 @@ class LoRATrainer:
             if not os.path.exists(venv_python):
                 venv_python = sys.executable
 
+            validation_result = self._validate_dataset_before_training()
+            if not validation_result["valid"]:
+                print(f"TRAINING VALIDATION FAILED!")
+                print(f"{validation_result['error']}")
+                return {
+                    "success": False,
+                    "error": validation_result["error"],
+                    "validation_failed": True
+                }
+
+            checkpoint_every = validation_result["checkpoint_every"]
+            if validation_result.get("checkpoint_adjustment"):
+                print(f"\nCHECKPOINT INTERVAL NOTICE:")
+                print(f"{validation_result['checkpoint_adjustment']}")
+                print(f"Training Stats:")
+                print(f"- Audio files: {validation_result['file_count']}")
+                print(f"- Batch size: {validation_result['batch_size']}")
+                print(f"- Steps per epoch: {validation_result['steps_per_epoch']}")
+                print(f"- Total steps: {validation_result['total_steps']}")
+                print(f"- Requested checkpoint every: {validation_result['requested_checkpoint_every']} steps")
+                print(f"- Effective checkpoint every: {checkpoint_every} steps")
+
             cmd = [
                 venv_python, "train.py",
                 "--pretrained-ckpt-path", pretrained_ckpt,
@@ -268,7 +314,7 @@ class LoRATrainer:
                 "--dataset-config", dataset_config,
                 "--name", model_name,
                 "--save-dir", save_dir,
-                "--checkpoint-every", str(self.config.get("checkpointSteps", 25)),
+                "--checkpoint-every", str(checkpoint_every),
                 "--batch-size", str(batch_size),
             ] + memory_flags
 
@@ -300,35 +346,6 @@ class LoRATrainer:
                 print(f"- Available: {device_info['memory_gb']:.2f} GB")
                 print(f"- Using: {device_info['memory_ratio']*100:.0f}%")
 
-            validation_result = self._validate_dataset_before_training()
-            if not validation_result["valid"]:
-                print(f"TRAINING VALIDATION FAILED!")
-                print(f"{validation_result['error']}")
-                return {
-                    "success": False,
-                    "error": validation_result["error"],
-                    "validation_failed": True
-                }
-            
-            if validation_result.get("checkpoint_warning"):
-                print(f"\nCHECKPOINT WARNING:")
-                print(f"{validation_result['checkpoint_warning']}")
-                print(f"Training Stats:")
-                print(f"- Audio files: {validation_result['file_count']}")
-                print(f"- Batch size: {validation_result['batch_size']}")
-                print(f"- Steps per epoch: {validation_result['steps_per_epoch']}")
-                print(f"- Total epochs: {validation_result['total_steps'] // validation_result['steps_per_epoch']}")
-                print(f"- Total steps: {validation_result['total_steps']}")
-                print(f"- Checkpoint every: {validation_result['checkpoint_every']} steps")
-                print(f"Recommended checkpoint interval: {max(10, validation_result['total_steps'] // 2)} steps")
-                
-                return {
-                    "success": False,
-                    "error": validation_result["checkpoint_warning"],
-                    "checkpoint_warning": True,
-                    "validation_stats": validation_result
-                }
-
             print(f"\nSTARTING TRAINING PROCESS...")
             print("="*80)
 
@@ -352,7 +369,7 @@ class LoRATrainer:
                 audio_files.extend(list(data_dir.glob(f"*{ext}")))
             
             num_files = len(audio_files)
-            total_epochs = self.config.get("epochs", 10)
+            total_epochs = self.config.get("epochs", DEFAULT_EPOCHS)
             steps_per_epoch = max(1, num_files // batch_size)
             total_steps = steps_per_epoch * total_epochs
             
@@ -362,7 +379,7 @@ class LoRATrainer:
             print(f"- Steps per epoch: {steps_per_epoch}")
             print(f"- Total epochs: {total_epochs}")
             print(f"- Total steps: {total_steps}")
-            print(f"- Checkpoint every: {self.config.get('checkpointSteps', 25)} steps")
+            print(f"- Checkpoint every: {checkpoint_every} steps")
 
             self.training_status.update({
                 "is_training": True,
@@ -378,6 +395,7 @@ class LoRATrainer:
                 "total_steps_per_epoch": steps_per_epoch,  # Frontend expects this name
                 "total_steps": total_steps,
                 "total_epochs": total_epochs,
+                "checkpoint_every": checkpoint_every,
                 "error_messages": [],
                 "stop_initiated": False
             })
@@ -617,7 +635,7 @@ class LoRATrainer:
                 
                 if training_actually_succeeded:
                     completed_epoch = self.training_status.get("current_epoch", 0)
-                    target_epochs = self.training_status.get("total_epochs", self.config.get("epochs", 10))
+                    target_epochs = self.training_status.get("total_epochs", self.config.get("epochs", DEFAULT_EPOCHS))
                     total_steps = self.training_status.get("total_steps", 0)
                     
                     print(f"\n{'='*80}")
@@ -700,7 +718,7 @@ class LoRATrainer:
                 
                 steps_per_epoch = self.training_status.get("steps_per_epoch", 1)
                 total_steps = self.training_status.get("total_steps", 1)
-                target_epochs = self.training_status.get("total_epochs", 10)
+                target_epochs = self.training_status.get("total_epochs", DEFAULT_EPOCHS)
                 
                 current_epoch = (global_step - 1) // steps_per_epoch
                 current_step = ((global_step - 1) % steps_per_epoch) + 1
@@ -715,7 +733,10 @@ class LoRATrainer:
 
                 if global_step >= total_steps:
                     if not self.training_status.get("stop_initiated"):
-                        checkpoint_interval = self.config.get("checkpointSteps", 100)
+                        checkpoint_interval = self.training_status.get(
+                            "checkpoint_every",
+                            self.config.get("checkpointSteps", DEFAULT_CHECKPOINT_STEPS)
+                        )
                         
                         print(f"\n{'='*80}")
                         print(f"TARGET EPOCHS REACHED: {current_epoch + 1}/{target_epochs}")

app/frontend/build/BitcountSingle-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c4d16dfd9bbfbae68cd523a0a34cae8fd01f3324f305affec8908508111614b0
+size 342692

app/frontend/build/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Fragmenta Desktop - Stable Audio Fine-Tuning Application"
+    />
+    <link rel="manifest" href="/manifest.json" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+
+    <style>
+      @font-face {
+        font-family: 'Bitcount Single';
+        src: url('/BitcountSingle-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf') format('truetype');
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+    </style>
+
+    <title>Fragmenta Desktop</title>
+    <script type="module" crossorigin src="/assets/index-D-qgc0vE.js"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

app/frontend/build/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Fragmenta",
+  "name": "Fragmenta Desktop - Stable Audio Fine-Tuning",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

app/frontend/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Fragmenta Desktop - Stable Audio Fine-Tuning Application"
+    />
+    <link rel="manifest" href="/manifest.json" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Space+Mono:wght@400;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
+
+    <style>
+      @font-face {
+        font-family: 'Bitcount Single';
+        src: url('/BitcountSingle-VariableFont_CRSV,ELSH,ELXP,slnt,wght.ttf') format('truetype');
+        font-weight: 100 900;
+        font-style: normal;
+        font-display: swap;
+      }
+    </style>
+
+    <title>Fragmenta Desktop</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>

app/frontend/package.json

@@ -1,38 +1,23 @@
 {
     "name": "fragmenta-desktop",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Fragmenta Desktop",
-    "main": "index.js",
+    "type": "module",
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
     },
     "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-scripts": "5.0.1",
-        "axios": "^1.6.0",
         "@mui/material": "^5.14.0",
-        "@mui/icons-material": "^5.14.0",
         "@emotion/react": "^11.11.0",
         "@emotion/styled": "^11.11.0",
-        "react-dropzone": "^14.2.3",
-        "react-player": "^2.13.0",
-        "recharts": "^2.8.0"
+        "lucide-react": "^0.460.0"
     },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    },
-    "proxy": "http://localhost:5001"
-}
+    "devDependencies": {
+        "vite": "^5.4.0",
+        "@vitejs/plugin-react": "^4.3.0"
+    }
+}

app/frontend/src/api.js

@@ -0,0 +1,41 @@
+async function request(method, url, body, config = {}) {
+    const init = { method };
+    const headers = { ...(config.headers || {}) };
+
+    if (body !== undefined && body !== null) {
+        if (body instanceof FormData) {
+            init.body = body;
+        } else {
+            init.body = JSON.stringify(body);
+            if (!headers['Content-Type']) headers['Content-Type'] = 'application/json';
+        }
+    }
+    if (Object.keys(headers).length > 0) init.headers = headers;
+
+    const response = await fetch(url, init);
+
+    let data;
+    if (config.responseType === 'blob') {
+        data = await response.blob();
+    } else {
+        const text = await response.text();
+        try { data = text ? JSON.parse(text) : null; }
+        catch { data = text; }
+    }
+
+    if (!response.ok) {
+        const err = new Error(`HTTP ${response.status}`);
+        err.response = { status: response.status, data };
+        throw err;
+    }
+    return { data, status: response.status };
+}
+
+const api = {
+    get: (url, config) => request('GET', url, null, config),
+    post: (url, body, config) => request('POST', url, body, config),
+    put: (url, body, config) => request('PUT', url, body, config),
+    delete: (url, config) => request('DELETE', url, null, config),
+};
+
+export default api;

app/frontend/src/components/AudioUploadRow.js

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Card, CardContent, Grid, Box, Typography, TextField, IconButton } from '@mui/material';
+import { Upload as UploadIcon, Trash2 as DeleteIcon } from 'lucide-react';
+import { audioUploadRowStyles } from '../theme';
+
+export default function AudioUploadRow({ index, data, onChange, onRemove }) {
+    const [audioFile, setAudioFile] = useState(null);
+    const [audioUrl, setAudioUrl] = useState('');
+    const [isDragActive, setIsDragActive] = useState(false);
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+        if (!data.file && !data.audioUrl) {
+            if (audioUrl) {
+                URL.revokeObjectURL(audioUrl);
+            }
+            setAudioFile(null);
+            setAudioUrl('');
+        }
+    }, [data.file, data.audioUrl, audioUrl]);
+
+    const acceptFile = (file) => {
+        if (!file || !file.type.startsWith('audio/')) return;
+        const url = URL.createObjectURL(file);
+        setAudioFile(file);
+        setAudioUrl(url);
+        onChange(index, { ...data, file, audioUrl: url });
+    };
+
+    return (
+        <Card sx={audioUploadRowStyles.card}>
+            <CardContent sx={audioUploadRowStyles.cardContent}>
+                <Grid container spacing={audioUploadRowStyles.gridSpacing} alignItems="center">
+                    <Grid item xs={12} sm={4}>
+                        <Box
+                            onClick={() => inputRef.current?.click()}
+                            onDragOver={(e) => { e.preventDefault(); setIsDragActive(true); }}
+                            onDragLeave={() => setIsDragActive(false)}
+                            onDrop={(e) => {
+                                e.preventDefault();
+                                setIsDragActive(false);
+                                acceptFile(e.dataTransfer.files?.[0]);
+                            }}
+                            sx={audioUploadRowStyles.uploadDropZone(isDragActive)}
+                        >
+                            <input
+                                ref={inputRef}
+                                type="file"
+                                accept="audio/*,.mp3,.wav,.flac,.m4a,.aac"
+                                style={audioUploadRowStyles.hiddenInput}
+                                onChange={(e) => acceptFile(e.target.files?.[0])}
+                            />
+                            {audioFile ? (
+                                <Box>
+                                    <Typography variant="body2" color="textSecondary">
+                                        {audioFile.name}
+                                    </Typography>
+                                    {audioUrl && (
+                                        <audio
+                                            controls
+                                            src={audioUrl}
+                                            style={audioUploadRowStyles.audioPreview}
+                                        />
+                                    )}
+                                </Box>
+                            ) : (
+                                <Box>
+                                    <UploadIcon size={20} color="#9198A1" />
+                                    <Typography variant="body2" color="textSecondary ">
+                                        {isDragActive ? 'Drop audio here' : ""}
+                                    </Typography>
+                                </Box>
+                            )}
+                        </Box>
+                    </Grid>
+
+                    <Grid item xs={12} sm={7}>
+                        <TextField
+                            fullWidth
+                            multiline
+                            minRows={1}
+                            maxRows={3}
+                            label={`Prompt ${index + 1}`}
+                            placeholder="Describe this audio file..."
+                            value={data.prompt || ''}
+                            onChange={(e) => onChange(index, { ...data, prompt: e.target.value })}
+                            variant="outlined"
+                        />
+                    </Grid>
+
+                    <Grid item xs={12} sm={1} sx={audioUploadRowStyles.deleteGridItem}>
+                        <IconButton
+                            color="error"
+                            onClick={() => onRemove(index)}
+                            sx={audioUploadRowStyles.deleteIconButton}
+                        >
+                            <DeleteIcon />
+                        </IconButton>
+                    </Grid>
+                </Grid>
+            </CardContent>
+        </Card>
+    );
+}

app/frontend/src/components/BulkAnnotatePanel.js

@@ -0,0 +1,316 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+    Box, Paper, Typography, TextField, Button, MenuItem, Select, FormControl,
+    InputLabel, LinearProgress, Alert, Table, TableHead, TableRow, TableCell,
+    TableBody, TableContainer, Checkbox, Tooltip, CircularProgress,
+} from '@mui/material';
+import {
+    Tags as TagsIcon,
+    CloudDownload as CloudDownloadIcon,
+    Save as SaveIcon,
+    FolderOpen as FolderOpenIcon,
+} from 'lucide-react';
+import api from '../api';
+
+const POLL_INTERVAL_MS = 800;
+
+export default function BulkAnnotatePanel({ onCommitted }) {
+    const [folderPath, setFolderPath] = useState('');
+    const [tier, setTier] = useState('basic');
+    const [status, setStatus] = useState(null);
+    const [results, setResults] = useState([]);
+    const [selected, setSelected] = useState({});
+    const [copyFiles, setCopyFiles] = useState(true);
+    const [message, setMessage] = useState('');
+    const [error, setError] = useState('');
+    const [committing, setCommitting] = useState(false);
+    const pollRef = useRef(null);
+
+    const stopPolling = useCallback(() => {
+        if (pollRef.current) {
+            clearInterval(pollRef.current);
+            pollRef.current = null;
+        }
+    }, []);
+
+    const fetchStatus = useCallback(async () => {
+        let data;
+        try {
+            const resp = await api.get('/api/bulk-annotate/status');
+            data = resp.data;
+        } catch (exc) {
+            // Transient errors (e.g. Flask auto-reload) must not kill polling —
+            // the download/annotation keeps running on the backend side.
+            return;
+        }
+        setStatus(data);
+
+        const annotationState = data.state;
+        const downloadState = data.clap_download?.state;
+
+        if (annotationState === 'done') {
+            try {
+                const resp = await api.get('/api/bulk-annotate/results');
+                setResults(resp.data.results || []);
+                const sel = {};
+                (resp.data.results || []).forEach((r, i) => { sel[i] = !r.error; });
+                setSelected(sel);
+            } catch {
+                return;
+            }
+        } else if (annotationState === 'error') {
+            setError(data.error || 'Annotation failed.');
+        }
+
+        const annotationInactive = annotationState !== 'running';
+        const downloadInactive = downloadState !== 'running';
+        if (annotationInactive && downloadInactive) {
+            stopPolling();
+        }
+    }, [stopPolling]);
+
+    const startPolling = useCallback(() => {
+        stopPolling();
+        pollRef.current = setInterval(fetchStatus, POLL_INTERVAL_MS);
+    }, [fetchStatus, stopPolling]);
+
+    useEffect(() => {
+        fetchStatus();
+        return () => stopPolling();
+    }, [fetchStatus, stopPolling]);
+
+    const startAnnotation = async () => {
+        setError('');
+        setMessage('');
+        setResults([]);
+        try {
+            await api.post('/api/bulk-annotate', { folder_path: folderPath, tier });
+            startPolling();
+        } catch (exc) {
+            setError(exc.response?.data?.error || exc.message);
+        }
+    };
+
+    const pickFolder = async () => {
+        setError('');
+        try {
+            const { data } = await api.post('/api/pick-folder', { start_dir: folderPath || undefined });
+            if (data?.path) setFolderPath(data.path);
+        } catch (exc) {
+            setError(exc.response?.data?.error || exc.message);
+        }
+    };
+
+    const downloadClap = async () => {
+        setError('');
+        try {
+            await api.post('/api/bulk-annotate/download-clap', {});
+            startPolling();
+        } catch (exc) {
+            setError(exc.response?.data?.error || exc.message);
+        }
+    };
+
+    const updatePrompt = (idx, value) => {
+        setResults(prev => prev.map((r, i) => (i === idx ? { ...r, prompt: value } : r)));
+    };
+
+    const toggleSelected = (idx) => {
+        setSelected(prev => ({ ...prev, [idx]: !prev[idx] }));
+    };
+
+    const toggleAll = () => {
+        const allSelected = results.every((_, i) => selected[i]);
+        const next = {};
+        results.forEach((_, i) => { next[i] = !allSelected; });
+        setSelected(next);
+    };
+
+    const commit = async () => {
+        setError('');
+        setMessage('');
+        setCommitting(true);
+        try {
+            const entries = results
+                .filter((_, i) => selected[i])
+                .map(r => ({ file_name: r.file_name, prompt: r.prompt, path: r.path }));
+            const { data } = await api.post('/api/bulk-annotate/commit', { entries, copy_files: copyFiles });
+            setMessage(data.message || 'Committed.');
+            if (onCommitted) onCommitted();
+        } catch (exc) {
+            setError(exc.response?.data?.error || exc.message);
+        } finally {
+            setCommitting(false);
+        }
+    };
+
+    const isRunning = status?.state === 'running';
+    const clapDownload = status?.clap_download;
+    const clapAvailable = !!status?.clap_available;
+    const clapDownloading = clapDownload?.state === 'running';
+    const richBlocked = tier === 'rich' && !clapAvailable;
+    const progressPct = status?.total ? Math.round((status.current / status.total) * 100) : 0;
+
+    return (
+        <Paper sx={{ p: 2, mt: 3 }} variant="outlined">
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1.5 }}>
+                <TagsIcon size={20} />
+                <Typography variant="h6">Bulk Auto-Annotate</Typography>
+            </Box>
+            <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
+                Point at a folder of audio files and auto-generate prompts.
+                Basic uses librosa (tempo + key). Rich adds CLAP tagging (genre, mood, instruments).
+            </Typography>
+
+            <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center', flexWrap: 'wrap', mb: 2 }}>
+                <TextField
+                    label="Folder path"
+                    size="small"
+                    value={folderPath}
+                    onChange={(e) => setFolderPath(e.target.value)}
+                    placeholder="Click Browse to choose a folder…"
+                    sx={{ flexGrow: 1, minWidth: 260 }}
+                    disabled={isRunning}
+                    InputProps={{ readOnly: true }}
+                />
+                <Button
+                    variant="outlined"
+                    onClick={pickFolder}
+                    startIcon={<FolderOpenIcon size={16} />}
+                    disabled={isRunning}
+                >
+                    Browse
+                </Button>
+                <FormControl size="small" sx={{ minWidth: 140 }} disabled={isRunning}>
+                    <InputLabel id="tier-label">Tier</InputLabel>
+                    <Select
+                        labelId="tier-label"
+                        value={tier}
+                        label="Tier"
+                        onChange={(e) => setTier(e.target.value)}
+                    >
+                        <MenuItem value="basic">Basic (no download)</MenuItem>
+                        <MenuItem value="rich">Rich (CLAP, ~2.35 GB)</MenuItem>
+                    </Select>
+                </FormControl>
+                <Tooltip title={richBlocked ? 'Download CLAP to enable Rich tier' : ''}>
+                    <span>
+                        <Button
+                            variant="contained"
+                            onClick={startAnnotation}
+                            startIcon={isRunning ? <CircularProgress size={16} /> : <TagsIcon size={16} />}
+                            disabled={isRunning || !folderPath || richBlocked}
+                        >
+                            {isRunning ? 'Annotating…' : 'Annotate'}
+                        </Button>
+                    </span>
+                </Tooltip>
+                {tier === 'rich' && !clapAvailable && (
+                    <Button
+                        variant="outlined"
+                        onClick={downloadClap}
+                        startIcon={clapDownloading ? <CircularProgress size={16} /> : <CloudDownloadIcon size={16} />}
+                        disabled={clapDownloading}
+                    >
+                        {clapDownloading ? 'Downloading…' : 'Download CLAP'}
+                    </Button>
+                )}
+            </Box>
+
+            {isRunning && (
+                <Box sx={{ mb: 2 }}>
+                    <LinearProgress variant={status?.total ? 'determinate' : 'indeterminate'} value={progressPct} />
+                    <Typography variant="caption" color="textSecondary">
+                        {status?.current}/{status?.total} — {status?.current_file}
+                    </Typography>
+                </Box>
+            )}
+            {clapDownload?.state === 'running' && (
+                <Alert severity="info" sx={{ mb: 2 }}>{clapDownload.message || 'Downloading CLAP checkpoint…'}</Alert>
+            )}
+            {clapDownload?.state === 'error' && (
+                <Alert severity="error" sx={{ mb: 2 }}>CLAP download failed: {clapDownload.error}</Alert>
+            )}
+            {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+            {message && <Alert severity="success" sx={{ mb: 2 }}>{message}</Alert>}
+
+            {results.length > 0 && (
+                <>
+                    <TableContainer sx={{ maxHeight: 420, mb: 2 }}>
+                        <Table size="small" stickyHeader>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell padding="checkbox">
+                                        <Checkbox
+                                            checked={results.every((_, i) => selected[i])}
+                                            indeterminate={
+                                                results.some((_, i) => selected[i]) && !results.every((_, i) => selected[i])
+                                            }
+                                            onChange={toggleAll}
+                                        />
+                                    </TableCell>
+                                    <TableCell>File</TableCell>
+                                    <TableCell>Prompt (editable)</TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {results.map((row, idx) => (
+                                    <TableRow key={row.file_name + idx} hover>
+                                        <TableCell padding="checkbox">
+                                            <Checkbox
+                                                checked={!!selected[idx]}
+                                                onChange={() => toggleSelected(idx)}
+                                                disabled={!!row.error}
+                                            />
+                                        </TableCell>
+                                        <TableCell sx={{ maxWidth: 240, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                            <Tooltip title={row.path || row.file_name}>
+                                                <span>{row.file_name}</span>
+                                            </Tooltip>
+                                            {row.error && (
+                                                <Typography variant="caption" color="error" display="block">
+                                                    {row.error}
+                                                </Typography>
+                                            )}
+                                        </TableCell>
+                                        <TableCell>
+                                            <TextField
+                                                fullWidth
+                                                multiline
+                                                size="small"
+                                                value={row.prompt || ''}
+                                                onChange={(e) => updatePrompt(idx, e.target.value)}
+                                                disabled={!!row.error}
+                                            />
+                                        </TableCell>
+                                    </TableRow>
+                                ))}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+
+                    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+                        <FormControl size="small">
+                            <Select
+                                value={copyFiles ? 'copy' : 'link'}
+                                onChange={(e) => setCopyFiles(e.target.value === 'copy')}
+                            >
+                                <MenuItem value="copy">Copy files into data/</MenuItem>
+                                <MenuItem value="link">Leave files in place</MenuItem>
+                            </Select>
+                        </FormControl>
+                        <Button
+                            variant="contained"
+                            color="primary"
+                            onClick={commit}
+                            startIcon={committing ? <CircularProgress size={16} /> : <SaveIcon size={16} />}
+                            disabled={committing || !Object.values(selected).some(Boolean)}
+                        >
+                            {committing ? 'Saving…' : `Save ${Object.values(selected).filter(Boolean).length} to dataset`}
+                        </Button>
+                    </Box>
+                </>
+            )}
+        </Paper>
+    );
+}

app/frontend/src/components/CheckpointManager.js

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import {
+    Box,
+    Typography,
+    Card,
+    Chip,
+    Button,
+    Alert,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Snackbar,
+} from '@mui/material';
+import { CloudDownload as CloudDownloadIcon, Trash2 as DeleteIcon } from 'lucide-react';
+import api from '../api';
+import { checkpointManagerStyles } from '../theme';
+
+export default function CheckpointManager({ model, onRefresh }) {
+    const [loadingStates, setLoadingStates] = useState({});
+    const [error, setError] = useState(null);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    const [toast, setToast] = useState({
+        open: false,
+        message: '',
+        severity: 'success'
+    });
+
+    const handleUnwrapCheckpoint = async (checkpoint) => {
+        const checkpointId = checkpoint.path;
+        setLoadingStates(prev => ({ ...prev, [checkpointId]: { unwrapping: true } }));
+        setError(null);
+        try {
+            await api.post('/api/unwrap-model', {
+                model_config: model.config_path,
+                ckpt_path: checkpoint.path,
+                name: `${checkpoint.name}_unwrapped`
+            });
+            setError(null);
+            setToast({
+                open: true,
+                message: `Checkpoint "${checkpoint.name}" unwrapped successfully.`,
+                severity: 'success'
+            });
+            onRefresh();
+        } catch (err) {
+            setError(`Failed to unwrap ${checkpoint.name}: ${err.response?.data?.error || err.message}`);
+        } finally {
+            setLoadingStates(prev => ({ ...prev, [checkpointId]: { unwrapping: false } }));
+        }
+    };
+
+    const handleDeleteCheckpoint = async () => {
+        if (!deleteTarget) {
+            return;
+        }
+
+        const checkpointId = deleteTarget.path;
+        setLoadingStates(prev => ({ ...prev, [checkpointId]: { deleting: true } }));
+        setError(null);
+
+        try {
+            await api.post('/api/delete-checkpoint', {
+                checkpoint_path: deleteTarget.path
+            });
+            setToast({
+                open: true,
+                message: `Checkpoint "${deleteTarget.name}" deleted successfully.`,
+                severity: 'success'
+            });
+            onRefresh();
+        } catch (err) {
+            setError(`Failed to delete ${deleteTarget.name}: ${err.response?.data?.error || err.message}`);
+        } finally {
+            setDeleteTarget(null);
+            setLoadingStates(prev => ({ ...prev, [checkpointId]: { deleting: false } }));
+        }
+    };
+
+    const closeToast = (_, reason) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+        setToast(prev => ({ ...prev, open: false }));
+    };
+
+    const checkpoints = model.checkpoints || [];
+
+    return (
+        <>
+            <Box sx={checkpointManagerStyles.root}>
+                <Typography variant="subtitle2" color="textSecondary">
+                    Checkpoints ({checkpoints.length})
+                </Typography>
+
+                {checkpoints.length === 0 ? (
+                    <Typography variant="caption" color="textSecondary" sx={checkpointManagerStyles.emptyText}>
+                        No checkpoints yet.
+                    </Typography>
+                ) : (
+                    <Box sx={checkpointManagerStyles.checkpointsList}>
+                        {checkpoints.map((checkpoint, index) => {
+                            const checkpointId = checkpoint.path;
+                            const isUnwrapping = loadingStates[checkpointId]?.unwrapping;
+                            const isDeleting = loadingStates[checkpointId]?.deleting;
+
+                            const hasUnwrappedVersion = model.unwrapped_models?.some(unwrapped =>
+                                unwrapped.name.includes(checkpoint.name) ||
+                                checkpoint.name.includes(unwrapped.name.replace('_unwrapped', ''))
+                            );
+
+                            return (
+                                <Card key={index} sx={checkpointManagerStyles.checkpointCard}>
+                                    <Box sx={checkpointManagerStyles.checkpointRow}>
+                                        <Box sx={checkpointManagerStyles.checkpointInfo}>
+                                            <Typography variant="body2" sx={checkpointManagerStyles.checkpointName}>
+                                                {checkpoint.name}
+                                                {hasUnwrappedVersion && (
+                                                    <Chip
+                                                        label="Unwrapped"
+                                                        size="small"
+                                                        color="success"
+                                                        sx={checkpointManagerStyles.unwrappedChip}
+                                                    />
+                                                )}
+                                            </Typography>
+                                            <Typography variant="caption" color="textSecondary">
+                                                {checkpoint.size_mb} MB
+                                            </Typography>
+                                        </Box>
+                                        <Box sx={checkpointManagerStyles.actions}>
+                                            {!hasUnwrappedVersion && (
+                                                <Button
+                                                    variant="outlined"
+                                                    color="primary"
+                                                    size="small"
+                                                    startIcon={<CloudDownloadIcon />}
+                                                    onClick={() => handleUnwrapCheckpoint(checkpoint)}
+                                                    disabled={isUnwrapping || isDeleting}
+                                                >
+                                                    {isUnwrapping ? 'Unwrapping...' : 'Unwrap'}
+                                                </Button>
+                                            )}
+
+                                            {hasUnwrappedVersion && (
+                                                <Button
+                                                    variant="outlined"
+                                                    color="error"
+                                                    size="small"
+                                                    startIcon={<DeleteIcon />}
+                                                    onClick={() => setDeleteTarget(checkpoint)}
+                                                    disabled={isDeleting || isUnwrapping}
+                                                >
+                                                    {isDeleting ? 'Deleting...' : 'Delete'}
+                                                </Button>
+                                            )}
+                                        </Box>
+                                    </Box>
+                                </Card>
+                            );
+                        })}
+                    </Box>
+                )}
+
+                {error && (
+                    <Alert severity="error" sx={checkpointManagerStyles.errorAlert}>{error}</Alert>
+                )}
+            </Box>
+
+            <Dialog
+                open={Boolean(deleteTarget)}
+                onClose={() => setDeleteTarget(null)}
+                aria-labelledby="delete-checkpoint-dialog-title"
+            >
+                <DialogTitle id="delete-checkpoint-dialog-title">
+                    Delete Wrapped Checkpoint
+                </DialogTitle>
+                <DialogContent>
+                    <Typography sx={checkpointManagerStyles.deleteDialogText}>
+                        {deleteTarget
+                            ? `Delete "${deleteTarget.name}"? This action cannot be undone.`
+                            : 'Delete this checkpoint?'}
+                    </Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setDeleteTarget(null)}>
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="contained"
+                        color="error"
+                        onClick={handleDeleteCheckpoint}
+                    >
+                        Delete
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
+            <Snackbar
+                open={toast.open}
+                autoHideDuration={3200}
+                onClose={closeToast}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+            >
+                <Alert onClose={closeToast} severity={toast.severity} variant="filled" sx={checkpointManagerStyles.snackbarAlert}>
+                    {toast.message}
+                </Alert>
+            </Snackbar>
+        </>
+    );
+}

app/frontend/src/components/GeneratedFragmentsWindow.js

@@ -0,0 +1,114 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { Paper, Box, Typography, Button, List, ListItem, IconButton } from '@mui/material';
+import { Square as StopIcon, Play as PlayIcon, Download as DownloadIcon } from 'lucide-react';
+import api from '../api';
+import { generatedFragmentsWindowStyles } from '../theme';
+
+export default function GeneratedFragmentsWindow({ fragments, onDownload }) {
+    const [playingFragment, setPlayingFragment] = useState(null);
+    const audioRefs = useRef({});
+
+    const handlePlayPause = (fragment) => {
+        const audio = audioRefs.current[fragment.id];
+        if (!audio) return;
+
+        if (playingFragment === fragment.id) {
+            audio.pause();
+            setPlayingFragment(null);
+        } else {
+            if (playingFragment && audioRefs.current[playingFragment]) {
+                audioRefs.current[playingFragment].pause();
+            }
+            audio.play();
+            setPlayingFragment(fragment.id);
+        }
+    };
+
+    const setAudioRef = useCallback((fragmentId, audioElement) => {
+        if (audioElement) {
+            audioRefs.current[fragmentId] = audioElement;
+        }
+    }, []);
+
+    return (
+        <Paper
+            variant="outlined"
+            sx={generatedFragmentsWindowStyles.rootPaper}
+        >
+            <Box sx={generatedFragmentsWindowStyles.headerRow}>
+                <Box sx={generatedFragmentsWindowStyles.titleRow}>
+                    <Box component="span" sx={generatedFragmentsWindowStyles.titleIcon}>
+                        <DownloadIcon size={20} />
+                    </Box>
+                    <Typography variant="h6" sx={generatedFragmentsWindowStyles.titleText}>
+                        Generated Fragments
+                    </Typography>
+                </Box>
+                <Typography variant="caption" color="textSecondary" sx={generatedFragmentsWindowStyles.countText}>
+                    {fragments.length}
+                </Typography>
+            </Box>
+
+            {fragments.length === 0 ? (
+                <Box
+                    sx={generatedFragmentsWindowStyles.emptyState}
+                >
+                    <Typography variant="body2">
+                        No fragments generated yet
+                    </Typography>
+                </Box>
+            ) : (
+                <List
+                    sx={generatedFragmentsWindowStyles.listRoot}
+                >
+                    {fragments.slice().reverse().map((fragment) => (
+                        <ListItem
+                            key={fragment.id}
+                            sx={generatedFragmentsWindowStyles.listItem}
+                        >
+                            <Box sx={generatedFragmentsWindowStyles.fragmentRow}>
+                                <Box sx={generatedFragmentsWindowStyles.fragmentMeta}>
+                                    <Typography
+                                        variant="subtitle2"
+                                        sx={generatedFragmentsWindowStyles.fragmentPrompt}
+                                    >
+                                        {fragment.prompt}
+                                    </Typography>
+                                    <Typography variant="caption" color="textSecondary">
+                                        {fragment.duration}s • {fragment.timestamp}
+                                    </Typography>
+                                </Box>
+                                <Box sx={generatedFragmentsWindowStyles.fragmentActions}>
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => handlePlayPause(fragment)}
+                                        color={playingFragment === fragment.id ? "primary" : "default"}
+                                        sx={generatedFragmentsWindowStyles.playPauseButton(playingFragment === fragment.id)}
+                                    >
+                                        {playingFragment === fragment.id ? <StopIcon /> : <PlayIcon />}
+                                    </IconButton>
+                                    <Button
+                                        size="small"
+                                        variant="outlined"
+                                        startIcon={<DownloadIcon />}
+                                        onClick={() => onDownload(fragment)}
+                                    >
+                                        Download
+                                    </Button>
+                                </Box>
+                            </Box>
+
+                            <audio
+                                ref={el => setAudioRef(fragment.id, el)}
+                                src={fragment.audioUrl}
+                                onEnded={() => setPlayingFragment(null)}
+                                onPause={() => setPlayingFragment(null)}
+                                style={generatedFragmentsWindowStyles.hiddenAudio}
+                            />
+                        </ListItem>
+                    ))}
+                </List>
+            )}
+        </Paper>
+    );
+}

app/frontend/src/components/HfAuthDialog.js

@@ -0,0 +1,245 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Typography,
+    TextField,
+    Box,
+    CircularProgress,
+    Stepper,
+    Step,
+    StepLabel,
+    Link,
+    Alert,
+    LinearProgress
+} from '@mui/material';
+import api from '../api';
+import { hfAuthDialogStyles } from '../theme';
+
+const HfAuthDialog = ({ open, onClose, onModelsDownloaded }) => {
+    const [activeStep, setActiveStep] = useState(0);
+    const [missingModels, setMissingModels] = useState([]);
+    const [checkingStatus, setCheckingStatus] = useState(true);
+    const [token, setToken] = useState('');
+    const [error, setError] = useState(null);
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [downloadingModel, setDownloadingModel] = useState(null);
+
+    const steps = ['Check required models', 'Authenticate', 'Download models'];
+
+    useEffect(() => {
+        if (open) {
+            checkModelStatus();
+        } else {
+            // Reset state on close
+            setActiveStep(0);
+            setError(null);
+            setToken('');
+            setMissingModels([]);
+        }
+    }, [open]);
+
+    const checkModelStatus = async () => {
+        setCheckingStatus(true);
+        setError(null);
+        try {
+            const response = await api.get('/api/base-models/status');
+            const models = response.data.base_models;
+            const missing = Object.entries(models)
+                .filter(([_, info]) => !info.downloaded)
+                .map(([id, info]) => ({ id, ...info }));
+            
+            setMissingModels(missing);
+            
+            if (missing.length === 0) {
+                // All models exist
+                setActiveStep(3);
+            } else {
+                setActiveStep(1);
+            }
+        } catch (err) {
+            setError(err.response?.data?.error || err.message || 'Failed to check model status.');
+        } finally {
+            setCheckingStatus(false);
+        }
+    };
+
+    const handleLogin = async () => {
+        if (!token.trim()) {
+            setError('Please enter a Hugging Face token.');
+            return;
+        }
+
+        setIsProcessing(true);
+        setError(null);
+        try {
+            await api.post('/api/hf-login', { token: token.trim() });
+            
+            // If login successful, move to download
+            setActiveStep(2);
+            startDownloads();
+        } catch (err) {
+            setError(err.response?.data?.error || err.message || 'Authentication failed. Please check your token.');
+            setIsProcessing(false);
+        }
+    };
+
+    const startDownloads = async () => {
+        try {
+            for (const model of missingModels) {
+                setDownloadingModel(model.name);
+                
+                // Record terms acceptance
+                await api.post(`/api/models/${model.id}/accept-terms`);
+
+                await api.post(`/api/models/${model.id}/download`);
+            }
+            
+            // All done
+            setActiveStep(3);
+            if (onModelsDownloaded) {
+                onModelsDownloaded();
+            }
+        } catch (err) {
+            setError(err.response?.data?.error || err.message || 'Failed to download models.');
+        } finally {
+            setIsProcessing(false);
+            setDownloadingModel(null);
+        }
+    };
+
+    const handleClose = () => {
+        if (isProcessing && activeStep === 2) {
+            // Cannot close while downloading
+            return;
+        }
+        onClose(activeStep === 3); // return true if finished successfully
+    };
+
+    const getStepContent = (stepIndex) => {
+        if (checkingStatus) {
+            return (
+                <Box sx={hfAuthDialogStyles.checkingBox}>
+                    <CircularProgress sx={hfAuthDialogStyles.checkingProgress} />
+                    <Typography>Checking model availability...</Typography>
+                </Box>
+            );
+        }
+
+        switch (stepIndex) {
+            case 1:
+                return (
+                    <Box sx={hfAuthDialogStyles.authStepBox}>
+                        <Typography variant="body1" paragraph>
+                            Some required base models are missing. You need a Hugging Face access token to download them.
+                        </Typography>
+                        
+                        <Typography variant="body2" color="textSecondary" paragraph>
+                            Before proceeding, please ensure you have visited huggingface.co and accepted the terms of use for the required models (e.g., stabilityai/stable-audio-open-1.0).
+                        </Typography>
+                        
+                        <TextField
+                            fullWidth
+                            label="Hugging Face Access Token"
+                            type="password"
+                            value={token}
+                            onChange={(e) => setToken(e.target.value)}
+                            placeholder="hf_xxxxxxxxxxxxxxxxxxx..."
+                            margin="normal"
+                            variant="outlined"
+                        />
+                        <Typography variant="caption" color="textSecondary">
+                            You can get a token from{' '}
+                            <Link href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener">
+                                your Hugging Face settings
+                            </Link>. "Read" access to public gated repos is needed.
+                        </Typography>
+                    </Box>
+                );
+            case 2:
+                return (
+                    <Box sx={hfAuthDialogStyles.downloadStepBox}>
+                        <Typography variant="h6" paragraph>
+                            Downloading {downloadingModel}...
+                        </Typography>
+                        <LinearProgress sx={hfAuthDialogStyles.downloadProgress} />
+                        <Typography variant="body2" color="textSecondary">
+                            This may take several minutes depending on your connection speed. Do not close the application.
+                        </Typography>
+                    </Box>
+                );
+            case 3:
+                return (
+                    <Box sx={hfAuthDialogStyles.successStepBox}>
+                        <Typography variant="h6" color="success.main" paragraph>
+                            All models are ready!
+                        </Typography>
+                        <Typography variant="body1">
+                            You can now close this dialog and begin using Fragmenta.
+                        </Typography>
+                    </Box>
+                );
+            default:
+                return "Unknown step";
+        }
+    };
+
+    return (
+        <Dialog 
+            open={open} 
+            onClose={handleClose}
+            maxWidth="sm"
+            fullWidth
+            disableEscapeKeyDown={isProcessing && activeStep === 2}
+        >
+            <DialogTitle>
+                Hugging Face Authentication
+            </DialogTitle>
+            <DialogContent dividers>
+                <Stepper activeStep={activeStep} alternativeLabel sx={hfAuthDialogStyles.stepper}>
+                    {steps.map((label) => (
+                        <Step key={label}>
+                            <StepLabel>{label}</StepLabel>
+                        </Step>
+                    ))}
+                </Stepper>
+                
+                {error && (
+                    <Alert severity="error" sx={hfAuthDialogStyles.errorAlert}>{error}</Alert>
+                )}
+                
+                {getStepContent(activeStep)}
+            </DialogContent>
+            
+            <DialogActions>
+                {activeStep !== 3 && activeStep !== 2 && (
+                    <Button onClick={handleClose} disabled={isProcessing}>
+                        Cancel
+                    </Button>
+                )}
+                
+                {activeStep === 1 && (
+                    <Button 
+                        variant="contained" 
+                        color="primary" 
+                        onClick={handleLogin}
+                        disabled={isProcessing || !token}
+                    >
+                        {isProcessing ? <CircularProgress size={hfAuthDialogStyles.loginSpinnerSize} /> : 'Login & Download'}
+                    </Button>
+                )}
+                
+                {activeStep === 3 && (
+                    <Button variant="contained" color="primary" onClick={handleClose}>
+                        Close
+                    </Button>
+                )}
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default HfAuthDialog;

app/frontend/src/components/LossChart.js

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { lossChartStyles } from '../theme';
+
+function fmtTime(sec) {
+    const m = Math.floor(sec / 60);
+    const s = Math.floor(sec % 60).toString().padStart(2, '0');
+    return `${m}:${s}`;
+}
+
+export default function LossChart({ data, width = 600, height = 200 }) {
+    const [hover, setHover] = useState(null);
+    const padding = lossChartStyles.padding;
+    const colors = lossChartStyles.colors;
+    const axisFontSize = lossChartStyles.axisFontSize;
+    const tooltip = lossChartStyles.tooltip;
+
+    if (!data || data.length === 0) return null;
+
+    const innerW = width - padding.left - padding.right;
+    const innerH = height - padding.top - padding.bottom;
+
+    const xs = data.map(d => d.time);
+    const ys = data.map(d => d.loss);
+    const xMin = Math.min(...xs);
+    const xMax = Math.max(...xs);
+    const yMin = Math.min(...ys);
+    const yMax = Math.max(...ys);
+    const xRange = xMax - xMin || 1;
+    const yRange = yMax - yMin || 1;
+
+    const xScale = v => padding.left + ((v - xMin) / xRange) * innerW;
+    const yScale = v => padding.top + innerH - ((v - yMin) / yRange) * innerH;
+
+    const points = data.map(d => `${xScale(d.time)},${yScale(d.loss)}`).join(' ');
+
+    const yTicks = 4;
+    const xTicks = Math.min(5, data.length);
+
+    const handleMove = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const px = ((e.clientX - rect.left) / rect.width) * width;
+        let nearest = data[0];
+        let bestDist = Infinity;
+        for (const d of data) {
+            const dist = Math.abs(xScale(d.time) - px);
+            if (dist < bestDist) { bestDist = dist; nearest = d; }
+        }
+        setHover(nearest);
+    };
+
+    return (
+        <svg
+            viewBox={`0 0 ${width} ${height}`}
+            preserveAspectRatio="none"
+            style={lossChartStyles.svg}
+            onMouseMove={handleMove}
+            onMouseLeave={() => setHover(null)}
+        >
+            {Array.from({ length: yTicks + 1 }, (_, i) => {
+                const v = yMin + (yRange * i) / yTicks;
+                const y = yScale(v);
+                return (
+                    <g key={`y${i}`}>
+                        <line x1={padding.left} x2={width - padding.right} y1={y} y2={y}
+                            stroke={colors.grid} strokeDasharray="3 3" />
+                        <text x={padding.left - 6} y={y + 4} textAnchor="end"
+                            fontSize={axisFontSize} fill={colors.axis}>{v.toFixed(3)}</text>
+                    </g>
+                );
+            })}
+
+            {Array.from({ length: xTicks }, (_, i) => {
+                const v = xMin + (xRange * i) / Math.max(xTicks - 1, 1);
+                const x = xScale(v);
+                return (
+                    <text key={`x${i}`} x={x} y={height - padding.bottom + 16}
+                          textAnchor="middle" fontSize={axisFontSize} fill={colors.axis}>
+                        {fmtTime(v)}
+                    </text>
+                );
+            })}
+
+            <polyline fill="none" stroke={colors.line} strokeWidth="2" points={points} />
+
+            {data.map((d, i) => (
+                <circle key={i} cx={xScale(d.time)} cy={yScale(d.loss)} r="2" fill={colors.point} />
+            ))}
+
+            {hover && (
+                <g>
+                    <line x1={xScale(hover.time)} x2={xScale(hover.time)}
+                          y1={padding.top} y2={height - padding.bottom}
+                          stroke={colors.axis} strokeDasharray="2 2" />
+                    <circle cx={xScale(hover.time)} cy={yScale(hover.loss)} r="4" fill={colors.line} />
+                    <g transform={`translate(${Math.min(xScale(hover.time) + 8, width - (tooltip.width + 10))}, ${padding.top + 6})`}>
+                        <rect width={tooltip.width} height={tooltip.height} rx={tooltip.rx} fill={colors.tooltipBg} stroke={colors.tooltipBorder} />
+                        <text x={tooltip.textX} y={tooltip.timeY} fontSize={axisFontSize} fill={colors.tooltipText}>Time: {fmtTime(hover.time)}</text>
+                        <text x={tooltip.textX} y={tooltip.lossY} fontSize={axisFontSize} fill={colors.tooltipText}>Loss: {hover.loss.toFixed(4)}</text>
+                    </g>
+                </g>
+            )}
+        </svg>
+    );
+}

app/frontend/src/components/ModelUnwrapButton.js

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Button, Box, Link, Typography } from '@mui/material';
+import { CloudDownload as CloudDownloadIcon } from 'lucide-react';
+import api from '../api';
+import { modelUnwrapButtonStyles } from '../theme';
+
+export default function ModelUnwrapButton({ model, onUnwrap, onRefresh }) {
+    const [loading, setLoading] = useState(false);
+    const [result, setResult] = useState(null);
+    const [error, setError] = useState(null);
+
+    const handleUnwrap = async () => {
+        setLoading(true);
+        setResult(null);
+        setError(null);
+
+        try {
+            const response = await api.post('/api/unwrap-model', {
+                model_config: model.configPath,
+                ckpt_path: model.ckptPath,
+                name: model.name + '_unwrapped'
+            });
+            setResult(response.data);
+            if (onUnwrap) onUnwrap(response.data);
+            if (onRefresh) onRefresh();
+        } catch (err) {
+            console.error('Unwrap error:', err);
+            setError(err.response?.data?.error || err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <Box sx={modelUnwrapButtonStyles.root}>
+            <Button
+                variant="outlined"
+                color="primary"
+                size="small"
+                startIcon={<CloudDownloadIcon />}
+                onClick={handleUnwrap}
+                disabled={loading}
+            >
+                {loading ? 'Unwrapping...' : 'Unwrap for Inference'}
+            </Button>
+            {result && result.unwrapped_path && (
+                <Box sx={modelUnwrapButtonStyles.result}>
+                    <Link href={`file://${result.unwrapped_path}`} target="_blank" rel="noopener noreferrer">
+                        Download Unwrapped Model
+                    </Link>
+                </Box>
+            )}
+            {error && (
+                <Typography sx={modelUnwrapButtonStyles.error}>{error}</Typography>
+            )}
+        </Box>
+    );
+}

app/frontend/src/components/TabPanel.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { tabPanelStyles } from '../theme';
+
+export default function TabPanel({ children, value, index, ...other }) {
+    return (
+        <div
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+        >
+            {value === index && (
+                <Box sx={tabPanelStyles.root}>
+                    {children}
+                </Box>
+            )}
+        </div>
+    );
+}

app/frontend/src/components/TrainingMonitor.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Paper, Box, Typography, LinearProgress, Grid, Alert } from '@mui/material';
+import { Activity as ActivityIcon } from 'lucide-react';
+import LossChart from './LossChart';
+import { trainingMonitorStyles } from '../theme';
+
+export default function TrainingMonitor({
+    trainingProgress,
+    trainingStatus,
+    trainingError,
+    trainingConfig,
+    indicatorState,
+}) {
+    const getProgressColor = () => {
+        if (trainingError) return 'error';
+        if (trainingProgress === 100) return 'success';
+        return 'primary';
+    };
+
+    const status = indicatorState?.status || 'idle';
+    const label = indicatorState?.label || 'Idle';
+    const animate = indicatorState?.animate || false;
+
+    return (
+        <Paper sx={trainingMonitorStyles.rootPaper}>
+            <Box sx={trainingMonitorStyles.headerRow}>
+                <Box sx={trainingMonitorStyles.headerTitleWrap}>
+                    <Box component="span" sx={trainingMonitorStyles.headerIcon}>
+                        <ActivityIcon size={20} />
+                    </Box>
+                    <Typography variant="h6" sx={trainingMonitorStyles.headerTitle}>
+                        Training Monitor
+                    </Typography>
+                </Box>
+                <Box sx={trainingMonitorStyles.statusInline}>
+                    <Box sx={trainingMonitorStyles.statusDot(status, animate)} />
+                    <Typography variant="caption" sx={trainingMonitorStyles.statusText(status)}>
+                        {label}
+                    </Typography>
+                </Box>
+            </Box>
+
+            <Box sx={trainingMonitorStyles.progressSection}>
+                <Box sx={trainingMonitorStyles.progressHeader}>
+                    <Typography variant="body2">Progress</Typography>
+                    <Typography variant="body2">{trainingProgress}%</Typography>
+                </Box>
+                <LinearProgress
+                    variant="determinate"
+                    value={trainingProgress}
+                    color={getProgressColor()}
+                    sx={trainingMonitorStyles.progressBar}
+                />
+            </Box>
+
+            {trainingStatus?.device_info && (
+                <Box sx={trainingMonitorStyles.deviceSection}>
+                    <Typography variant="body2" color="textSecondary" gutterBottom>
+                        <strong>Device Used for Training</strong>
+                    </Typography>
+                    <Typography variant="body2">
+                        Device: {trainingStatus.device_info.device} ({trainingStatus.device_info.memory_gb?.toFixed(2)}GB VRAM)
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" sx={trainingMonitorStyles.deviceInfo}>
+                        Info: {trainingStatus.device_info.type === 'cuda' ? 'CUDA GPU available and selected for training' :
+                            trainingStatus.device_info.type === 'cpu' ? 'Using CPU (no CUDA GPU available or compatible)' :
+                                'Using MPS (Apple Silicon GPU)'}
+                    </Typography>
+                </Box>
+            )}
+
+            <Grid container spacing={2} sx={trainingMonitorStyles.metricsGrid}>
+                <Grid item xs={12} sm={6}>
+                    <Typography variant="body2" color="textSecondary">Current Epoch</Typography>
+                    <Typography variant="body1">
+                        {trainingStatus?.current_epoch !== undefined ?
+                            `${trainingStatus.current_epoch + 1} / ${trainingConfig.epochs}` :
+                            '0 / ' + trainingConfig.epochs}
+                    </Typography>
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <Typography variant="body2" color="textSecondary">Global Step / Total Steps</Typography>
+                    <Typography variant="body1" color="primary">
+                        {trainingStatus?.global_step !== undefined && trainingStatus?.total_steps !== undefined ?
+                            `${trainingStatus.global_step} / ${trainingStatus.total_steps}` :
+                            'N/A'}
+                    </Typography>
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <Typography variant="body2" color="textSecondary">Checkpoints Saved</Typography>
+                    <Typography variant="body1">
+                        {trainingStatus?.checkpoints_saved || 0}
+                    </Typography>
+                </Grid>
+                <Grid item xs={12} sm={6}>
+                    <Typography variant="body2" color="textSecondary">Current Loss</Typography>
+                    <Typography variant="body1">
+                        {trainingStatus?.loss ? parseFloat(trainingStatus.loss).toFixed(4) : 'N/A'}
+                    </Typography>
+                </Grid>
+            </Grid>
+
+            {trainingStatus?.loss_history && trainingStatus.loss_history.length > 0 && (
+                <Box sx={trainingMonitorStyles.lossSection}>
+                    <Typography variant="body2" color="textSecondary" gutterBottom>
+                        <strong>Loss History</strong>
+                    </Typography>
+                    <Box sx={trainingMonitorStyles.lossChartBox}>
+                        <LossChart data={trainingStatus.loss_history} />
+                    </Box>
+                </Box>
+            )}
+
+            {trainingError && (
+                <Alert severity="error" sx={trainingMonitorStyles.errorAlert}>
+                    <Typography variant="body2">
+                        <strong>Training Error:</strong> {trainingError}
+                    </Typography>
+                </Alert>
+            )}
+        </Paper>
+    );
+}

app/frontend/src/components/WelcomePage.js

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from 'react';
+import { Backdrop, Box, Fade, Typography, Button, Checkbox, FormControlLabel } from '@mui/material';
+import { welcomePageStyles } from '../theme';
+
+export default function WelcomePage({ open, onClose }) {
+    const [titleVisible, setTitleVisible] = useState(false);
+    const [textVisible, setTextVisible] = useState(false);
+    const [dontShowAgain, setDontShowAgain] = useState(false);
+
+    useEffect(() => {
+        if (open) {
+            const titleTimer = setTimeout(() => setTitleVisible(true), 500);
+            const textTimer = setTimeout(() => setTextVisible(true), 1500);
+            return () => {
+                clearTimeout(titleTimer);
+                clearTimeout(textTimer);
+            };
+        } else {
+            setTitleVisible(false);
+            setTextVisible(false);
+        }
+    }, [open]);
+
+    if (!open) return null;
+
+    return (
+        <Backdrop
+            open={open}
+            onClick={() => onClose(false)}
+            sx={welcomePageStyles.backdrop}
+        >
+            <Box
+                sx={welcomePageStyles.panel}
+                onClick={(e) => e.stopPropagation()}
+            >
+                <Fade in={titleVisible} timeout={800}>
+                    <Box sx={welcomePageStyles.logo} />
+                </Fade>
+
+                <Fade in={titleVisible} timeout={1000}>
+                    <Typography
+                        variant="h2"
+                        component="h1"
+                        sx={welcomePageStyles.title}
+                    >
+                        Welcome to Fragmenta
+                    </Typography>
+                </Fade>
+
+                <Fade in={textVisible} timeout={1000}>
+                    <Box>
+                        <Typography
+                            variant="overline"
+                            sx={welcomePageStyles.overline}
+                        >
+                            An End-to-End Pipeline to Fine-Tune and Use Text-to-Audio Models.
+                        </Typography>
+
+
+                        <Typography
+                            variant="body2"
+                            sx={welcomePageStyles.footer}
+                        >
+                            @2025-2026 Misagh Azimi
+                        </Typography>
+                        <Typography
+                            variant="body2"
+                            sx={welcomePageStyles.version}
+                        >
+                            Version 0.0.2
+                        </Typography>
+                        <Button
+                            variant="contained"
+                            onClick={() => onClose(dontShowAgain)}
+                            sx={welcomePageStyles.ctaButton}
+                        >
+                            Get Started
+                        </Button>
+                        <Box sx={{ mt: 1.5 }}>
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        checked={dontShowAgain}
+                                        onChange={(e) => setDontShowAgain(e.target.checked)}
+                                        size="small"
+                                        sx={{ color: 'text.secondary' }}
+                                    />
+                                }
+                                label={
+                                    <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                                        Don't show this again
+                                    </Typography>
+                                }
+                            />
+                        </Box>
+
+                    </Box>
+                </Fade>
+            </Box>
+        </Backdrop>
+    );
+}

app/frontend/src/index.js

@@ -4,16 +4,8 @@ import App from './App';
 
 document.body.style.margin = '0';
 document.body.style.padding = '0';
-document.body.style.backgroundColor = '#0D1117';
-
-document.body.style.overflow = 'auto';
-document.documentElement.style.backgroundColor = '#0D1117';
-
-document.documentElement.style.overflow = 'auto';
 
 const rootElement = document.getElementById('root');
-
-rootElement.style.overflow = 'auto';
 rootElement.style.minHeight = '100vh';
 
 const root = ReactDOM.createRoot(rootElement);

app/frontend/src/theme.js

@@ -0,0 +1,2113 @@
+import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+
+let theme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#35C2D4',
+            light: '#73D7E3',
+            dark: '#1B98A8',
+            contrastText: '#061017',
+        },
+        secondary: {
+            main: '#9AA7BA',
+            light: '#C4CEDB',
+            dark: '#6E7C92',
+            contrastText: '#09101A',
+        },
+        background: {
+            default: '#090C12',
+            paper: '#121926',
+        },
+        text: {
+            primary: '#E8EDF5',
+            secondary: '#9DA9BC',
+        },
+        divider: 'rgba(194, 207, 228, 0.16)',
+        error: {
+            main: '#E36C61',
+        },
+        warning: {
+            main: '#E3A34B',
+        },
+        success: {
+            main: '#53C18A',
+        },
+        info: {
+            main: '#35C2D4',
+        },
+    },
+    shape: {
+        borderRadius: 12,
+    },
+    typography: {
+        fontFamily: [
+            'Helvetica Neue',
+            'Helvetica',
+            'Arial',
+            'sans-serif'
+        ].join(','),
+        h1: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 1500,
+        },
+        h2: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 200,
+        },
+        h3: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 250,
+        },
+        h4: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 300,
+            letterSpacing: '0.01em',
+        },
+        h5: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 350,
+            letterSpacing: '0.01em',
+        },
+        h6: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+        },
+        body1: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 300,
+        },
+        body2: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 300,
+        },
+        button: {
+            fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+            letterSpacing: '0.01em',
+        },
+    },
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                ':root': {
+                    colorScheme: 'dark',
+                },
+                body: {
+                    margin: 0,
+                    minHeight: '100vh',
+                    backgroundColor: '#090C12',
+                    backgroundImage: 'radial-gradient(1400px 700px at 8% -10%, rgba(53, 194, 212, 0.16), transparent 55%), radial-gradient(900px 500px at 92% -20%, rgba(83, 193, 138, 0.12), transparent 60%), linear-gradient(160deg, #090C12 0%, #0D121B 45%, #0A0F16 100%)',
+                    color: '#E8EDF5',
+                },
+                '#root': {
+                    minHeight: '100vh',
+                },
+                '*::-webkit-scrollbar': {
+                    width: '10px',
+                    height: '10px',
+                },
+                '*::-webkit-scrollbar-track': {
+                    background: 'rgba(157, 169, 188, 0.14)',
+                    borderRadius: '999px',
+                },
+                '*::-webkit-scrollbar-thumb': {
+                    background: 'rgba(157, 169, 188, 0.45)',
+                    borderRadius: '999px',
+                    border: '2px solid rgba(0, 0, 0, 0)',
+                    backgroundClip: 'padding-box',
+                    '&:hover': {
+                        background: 'rgba(157, 169, 188, 0.62)',
+                    },
+                },
+                '*::-webkit-scrollbar-corner': {
+                    background: 'rgba(157, 169, 188, 0.12)',
+                },
+                '*': {
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'rgba(157, 169, 188, 0.45) rgba(157, 169, 188, 0.14)',
+                },
+            },
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#121926',
+                    backgroundImage: 'linear-gradient(180deg, rgba(20, 27, 40, 0.92) 0%, rgba(15, 22, 34, 0.95) 100%)',
+                    border: '1px solid rgba(194, 207, 228, 0.14)',
+                    boxShadow: '0 18px 32px rgba(4, 8, 14, 0.42)',
+                    backdropFilter: 'blur(8px)',
+                },
+            },
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#111826',
+                    backgroundImage: 'linear-gradient(180deg, rgba(18, 25, 38, 0.98) 0%, rgba(15, 22, 34, 0.96) 100%)',
+                    border: '1px solid rgba(194, 207, 228, 0.14)',
+                    boxShadow: '0 10px 18px rgba(4, 8, 14, 0.3)',
+                    transition: 'border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease',
+                    '&:hover': {
+                        borderColor: 'rgba(115, 215, 227, 0.3)',
+                        boxShadow: '0 16px 30px rgba(4, 8, 14, 0.46)',
+                        transform: 'translateY(-1px)',
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    textTransform: 'none',
+                    borderRadius: 10,
+                    fontWeight: 600,
+                    paddingInline: 16,
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    lineHeight: 1.2,
+                    '& .MuiButton-startIcon, & .MuiButton-endIcon': {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                    },
+                    transition: 'transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease',
+                },
+                contained: {
+                    boxShadow: '0 8px 18px rgba(6, 10, 18, 0.46)',
+                    '&:hover': {
+                        boxShadow: '0 12px 22px rgba(6, 10, 18, 0.58)',
+                        transform: 'translateY(-1px)',
+                    },
+                },
+                containedPrimary: {
+                    backgroundImage: 'linear-gradient(135deg, #35C2D4 0%, #2AA9B9 55%, #228E9D 100%)',
+                },
+                containedError: {
+                    backgroundImage: 'linear-gradient(135deg, #E36C61 0%, #CF5A4E 100%)',
+                },
+                outlined: {
+                    borderColor: 'rgba(157, 169, 188, 0.4)',
+                    '&:hover': {
+                        borderColor: '#35C2D4',
+                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
+                    },
+                },
+            },
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                root: {
+                    '&:not(.MuiInputBase-multiline)': {
+                        alignItems: 'center',
+                    },
+                },
+                input: {
+                    lineHeight: 1.4,
+                },
+            },
+        },
+        MuiTextField: {
+            styleOverrides: {
+                root: {
+                    '& .MuiOutlinedInput-root': {
+                        backgroundColor: 'rgba(10, 15, 23, 0.84)',
+                        '& fieldset': {
+                            borderColor: 'rgba(157, 169, 188, 0.3)',
+                        },
+                        '&:hover fieldset': {
+                            borderColor: 'rgba(157, 169, 188, 0.55)',
+                        },
+                        '&.Mui-focused fieldset': {
+                            borderColor: '#35C2D4',
+                        },
+                    },
+                },
+            },
+        },
+        MuiSelect: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(10, 15, 23, 0.84)',
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'rgba(157, 169, 188, 0.3)',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'rgba(157, 169, 188, 0.55)',
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#35C2D4',
+                    },
+                },
+                select: {
+                    display: 'flex',
+                    alignItems: 'center',
+                },
+            },
+        },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#121926',
+                    '&:hover': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
+                    },
+                    '&.Mui-selected': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.14)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(53, 194, 212, 0.2)',
+                        },
+                    },
+                },
+            },
+        },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(157, 169, 188, 0.16)',
+                    color: '#E8EDF5',
+                    border: '1px solid rgba(157, 169, 188, 0.24)',
+                    '&.MuiChip-colorPrimary': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.2)',
+                        color: '#C8F3F9',
+                    },
+                },
+                outlined: {
+                    borderColor: 'rgba(157, 169, 188, 0.4)',
+                    '&.MuiChip-colorPrimary': {
+                        borderColor: '#35C2D4',
+                        color: '#73D7E3',
+                    },
+                },
+            },
+        },
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(12, 18, 28, 0.7)',
+                    border: '1px solid rgba(194, 207, 228, 0.16)',
+                    borderRadius: 12,
+                    overflow: 'hidden',
+                    '&:before': {
+                        display: 'none',
+                    },
+                    '&.Mui-expanded': {
+                        margin: 0,
+                    },
+                },
+            },
+        },
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(15, 22, 34, 0.8)',
+                    borderRadius: 12,
+                    minHeight: 44,
+                    '& .MuiAccordionSummary-content': {
+                        margin: '10px 0',
+                        alignItems: 'center',
+                    },
+                    '&.Mui-expanded': {
+                        minHeight: 44,
+                    },
+                    '&.Mui-expanded .MuiAccordionSummary-content': {
+                        margin: '10px 0',
+                    },
+                    '&:hover': {
+                        backgroundColor: 'rgba(19, 28, 42, 0.9)',
+                    },
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: '#121926',
+                    backgroundImage: 'linear-gradient(180deg, rgba(20, 27, 40, 0.98) 0%, rgba(14, 21, 33, 0.98) 100%)',
+                    border: '1px solid rgba(194, 207, 228, 0.18)',
+                    borderRadius: 14,
+                    boxShadow: '0 28px 48px rgba(4, 8, 14, 0.6)',
+                },
+            },
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(14, 21, 33, 0.8)',
+                    borderBottom: '1px solid rgba(194, 207, 228, 0.15)',
+                    color: '#F4F7FC',
+                    fontWeight: 600,
+                    fontSize: '1.15rem',
+                },
+            },
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(14, 21, 33, 0.64)',
+                    color: '#CCD5E3',
+                },
+            },
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(14, 21, 33, 0.72)',
+                    borderTop: '1px solid rgba(194, 207, 228, 0.15)',
+                    padding: '14px 20px',
+                    gap: 8,
+                },
+            },
+        },
+        MuiListItem: {
+            styleOverrides: {
+                root: {
+                    '&:hover': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
+                    },
+                    '&.Mui-selected': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.14)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(53, 194, 212, 0.2)',
+                        },
+                    },
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                    color: '#9AA7BA',
+                    '&.Mui-checked': {
+                        color: '#35C2D4',
+                    },
+                    '&:hover': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
+                    },
+                },
+            },
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                label: {
+                    color: '#CCD5E3',
+                    fontSize: '0.875rem',
+                },
+            },
+        },
+        MuiSlider: {
+            styleOverrides: {
+                root: {
+                    color: '#35C2D4',
+                },
+                rail: {
+                    backgroundColor: 'rgba(157, 169, 188, 0.24)',
+                },
+                track: {
+                    backgroundColor: '#35C2D4',
+                    border: 0,
+                },
+                thumb: {
+                    backgroundColor: '#74DEE9',
+                    '&:hover': {
+                        boxShadow: '0 0 0 8px rgba(53, 194, 212, 0.2)',
+                    },
+                },
+            },
+        },
+        MuiLinearProgress: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(157, 169, 188, 0.2)',
+                },
+                bar: {
+                    backgroundColor: '#35C2D4',
+                },
+            },
+        },
+        MuiCircularProgress: {
+            styleOverrides: {
+                root: {
+                    color: '#35C2D4',
+                },
+            },
+        },
+        MuiTabs: {
+            styleOverrides: {
+                root: {
+                    '& .MuiTabs-indicator': {
+                        backgroundColor: '#35C2D4',
+                    },
+                },
+            },
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    color: '#9DA9BC',
+                    '&.Mui-selected': {
+                        color: '#35C2D4',
+                    },
+                    '&:hover': {
+                        color: '#E8EDF5',
+                    },
+                },
+            },
+        },
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(5, 9, 16, 0.84)',
+                    backdropFilter: 'blur(4px)',
+                },
+            },
+        },
+        MuiDivider: {
+            styleOverrides: {
+                root: {
+                    borderColor: 'rgba(194, 207, 228, 0.16)',
+                },
+            },
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    color: '#9DA9BC',
+                    '&:hover': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.1)',
+                        color: '#73D7E3',
+                    },
+                },
+            },
+        },
+        MuiContainer: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'transparent',
+                    background: 'transparent',
+                },
+            },
+        },
+    },
+});
+
+theme = responsiveFontSizes(theme, {
+    breakpoints: ['sm', 'md', 'lg'],
+    factor: 2.4,
+});
+
+export const lightTheme = createTheme(theme, {
+    palette: {
+        mode: 'light',
+        primary: {
+            main: '#1497A8',
+            light: '#4CBCCA',
+            dark: '#0F7482',
+            contrastText: '#F7FDFF',
+        },
+        secondary: {
+            main: '#64748B',
+            light: '#93A3B8',
+            dark: '#475569',
+            contrastText: '#F8FAFC',
+        },
+        background: {
+            default: '#F5F9FC',
+            paper: '#FFFFFF',
+        },
+        text: {
+            primary: '#0F172A',
+            secondary: '#475569',
+        },
+        divider: 'rgba(15, 23, 42, 0.14)',
+        error: {
+            main: '#DC5B57',
+        },
+        warning: {
+            main: '#D08C30',
+        },
+        success: {
+            main: '#2E9E63',
+        },
+        info: {
+            main: '#1497A8',
+        },
+    },
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                ':root': {
+                    colorScheme: 'light',
+                },
+                body: {
+                    margin: 0,
+                    minHeight: '100vh',
+                    backgroundColor: '#F5F9FC',
+                    backgroundImage: 'radial-gradient(1400px 700px at 8% -10%, rgba(20, 151, 168, 0.14), transparent 55%), radial-gradient(900px 500px at 92% -20%, rgba(46, 158, 99, 0.1), transparent 60%), linear-gradient(160deg, #F6FAFD 0%, #EFF5FA 45%, #F8FBFE 100%)',
+                    color: '#0F172A',
+                },
+                '#root': {
+                    minHeight: '100vh',
+                },
+                '*::-webkit-scrollbar-track': {
+                    background: 'rgba(100, 116, 139, 0.12)',
+                    borderRadius: '999px',
+                },
+                '*::-webkit-scrollbar-thumb': {
+                    background: 'rgba(100, 116, 139, 0.38)',
+                    borderRadius: '999px',
+                    '&:hover': {
+                        background: 'rgba(100, 116, 139, 0.52)',
+                    },
+                },
+                '*::-webkit-scrollbar-corner': {
+                    background: 'rgba(100, 116, 139, 0.1)',
+                },
+                '*': {
+                    scrollbarWidth: 'thin',
+                    scrollbarColor: 'rgba(100, 116, 139, 0.38) rgba(100, 116, 139, 0.12)',
+                },
+            },
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#FFFFFF',
+                    backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 255, 0.98) 100%)',
+                    border: '1px solid rgba(15, 23, 42, 0.12)',
+                    boxShadow: '0 14px 26px rgba(15, 23, 42, 0.08)',
+                },
+            },
+        },
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#FFFFFF',
+                    backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.99) 100%)',
+                    border: '1px solid rgba(15, 23, 42, 0.12)',
+                    boxShadow: '0 10px 18px rgba(15, 23, 42, 0.08)',
+                    '&:hover': {
+                        borderColor: 'rgba(20, 151, 168, 0.32)',
+                        boxShadow: '0 16px 30px rgba(15, 23, 42, 0.12)',
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            styleOverrides: {
+                contained: {
+                    boxShadow: '0 8px 18px rgba(20, 151, 168, 0.22)',
+                    '&:hover': {
+                        boxShadow: '0 12px 24px rgba(20, 151, 168, 0.28)',
+                    },
+                },
+                containedPrimary: {
+                    backgroundImage: 'linear-gradient(135deg, #1497A8 0%, #1AAABC 55%, #107A88 100%)',
+                },
+                containedError: {
+                    backgroundImage: 'linear-gradient(135deg, #DC5B57 0%, #CB4B45 100%)',
+                },
+                outlined: {
+                    borderColor: 'rgba(100, 116, 139, 0.32)',
+                    '&:hover': {
+                        borderColor: '#1497A8',
+                        backgroundColor: 'rgba(20, 151, 168, 0.08)',
+                    },
+                },
+            },
+        },
+        MuiTextField: {
+            styleOverrides: {
+                root: {
+                    '& .MuiOutlinedInput-root': {
+                        backgroundColor: 'rgba(255, 255, 255, 0.92)',
+                        '& fieldset': {
+                            borderColor: 'rgba(100, 116, 139, 0.28)',
+                        },
+                        '&:hover fieldset': {
+                            borderColor: 'rgba(100, 116, 139, 0.5)',
+                        },
+                        '&.Mui-focused fieldset': {
+                            borderColor: '#1497A8',
+                        },
+                    },
+                },
+            },
+        },
+        MuiSelect: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(255, 255, 255, 0.92)',
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'rgba(100, 116, 139, 0.28)',
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: 'rgba(100, 116, 139, 0.5)',
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                        borderColor: '#1497A8',
+                    },
+                },
+            },
+        },
+        MuiMenuItem: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: '#FFFFFF',
+                    '&:hover': {
+                        backgroundColor: 'rgba(20, 151, 168, 0.08)',
+                    },
+                    '&.Mui-selected': {
+                        backgroundColor: 'rgba(20, 151, 168, 0.14)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(20, 151, 168, 0.2)',
+                        },
+                    },
+                },
+            },
+        },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(100, 116, 139, 0.12)',
+                    color: '#0F172A',
+                    border: '1px solid rgba(100, 116, 139, 0.24)',
+                },
+            },
+        },
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(255, 255, 255, 0.82)',
+                    border: '1px solid rgba(15, 23, 42, 0.12)',
+                    borderRadius: 12,
+                    overflow: 'hidden',
+                    '&:before': {
+                        display: 'none',
+                    },
+                    '&.Mui-expanded': {
+                        margin: 0,
+                    },
+                },
+            },
+        },
+        MuiAccordionSummary: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(248, 251, 255, 0.95)',
+                    borderRadius: 12,
+                    '&:hover': {
+                        backgroundColor: 'rgba(239, 245, 250, 1)',
+                    },
+                },
+            },
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: {
+                    backgroundColor: '#FFFFFF',
+                    backgroundImage: 'linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 254, 0.99) 100%)',
+                    border: '1px solid rgba(15, 23, 42, 0.12)',
+                    boxShadow: '0 28px 48px rgba(15, 23, 42, 0.16)',
+                },
+            },
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(246, 250, 254, 0.98)',
+                    borderBottom: '1px solid rgba(15, 23, 42, 0.1)',
+                    color: '#0F172A',
+                },
+            },
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                    color: '#334155',
+                },
+            },
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(246, 250, 254, 0.98)',
+                    borderTop: '1px solid rgba(15, 23, 42, 0.1)',
+                },
+            },
+        },
+        MuiListItem: {
+            styleOverrides: {
+                root: {
+                    '&:hover': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.08)',
+                    },
+                    '&.Mui-selected': {
+                        backgroundColor: 'rgba(53, 194, 212, 0.14)',
+                        '&:hover': {
+                            backgroundColor: 'rgba(53, 194, 212, 0.2)',
+                        },
+                    },
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: {
+                root: {
+                    color: '#64748B',
+                    '&.Mui-checked': {
+                        color: '#1497A8',
+                    },
+                    '&:hover': {
+                        backgroundColor: 'rgba(20, 151, 168, 0.08)',
+                    },
+                },
+            },
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                label: {
+                    color: '#334155',
+                },
+            },
+        },
+        MuiSlider: {
+            styleOverrides: {
+                root: {
+                    color: '#1497A8',
+                },
+                rail: {
+                    backgroundColor: 'rgba(100, 116, 139, 0.24)',
+                },
+                track: {
+                    backgroundColor: '#1497A8',
+                    border: 0,
+                },
+                thumb: {
+                    backgroundColor: '#4CBCCA',
+                    '&:hover': {
+                        boxShadow: '0 0 0 8px rgba(20, 151, 168, 0.2)',
+                    },
+                },
+            },
+        },
+        MuiLinearProgress: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(100, 116, 139, 0.2)',
+                },
+                bar: {
+                    backgroundColor: '#1497A8',
+                },
+            },
+        },
+        MuiCircularProgress: {
+            styleOverrides: {
+                root: {
+                    color: '#1497A8',
+                },
+            },
+        },
+        MuiTabs: {
+            styleOverrides: {
+                root: {
+                    '& .MuiTabs-indicator': {
+                        backgroundColor: '#1497A8',
+                    },
+                },
+            },
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    color: '#64748B',
+                    '&.Mui-selected': {
+                        color: '#1497A8',
+                    },
+                    '&:hover': {
+                        color: '#0F172A',
+                    },
+                },
+            },
+        },
+        MuiBackdrop: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'rgba(15, 23, 42, 0.38)',
+                    backdropFilter: 'blur(4px)',
+                },
+            },
+        },
+        MuiDivider: {
+            styleOverrides: {
+                root: {
+                    borderColor: 'rgba(15, 23, 42, 0.14)',
+                },
+            },
+        },
+        MuiIconButton: {
+            styleOverrides: {
+                root: {
+                    color: '#64748B',
+                    '&:hover': {
+                        backgroundColor: 'rgba(20, 151, 168, 0.1)',
+                        color: '#1497A8',
+                    },
+                },
+            },
+        },
+    },
+});
+
+export const appStyles = {
+    root: {
+        minHeight: '100vh',
+        background: 'transparent',
+        backgroundColor: 'transparent',
+        overflow: 'visible',
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    container: (showWelcomePage) => ({
+        py: { xs: 1, sm: 1.5, md: 2.5 },
+        px: { xs: 0.75, sm: 1.25, md: 2.5 },
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'transparent',
+        background: 'transparent',
+        overflow: 'visible',
+        boxSizing: 'border-box',
+        width: '100%',
+        maxWidth: '100%',
+        filter: showWelcomePage ? 'blur(8px)' : 'none',
+        transition: 'filter 0.3s ease-in-out',
+    }),
+    headerRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: { xs: 'stretch', md: 'flex-start' },
+        flexDirection: { xs: 'column', md: 'row' },
+        gap: { xs: 1.25, sm: 1.75, md: 2 },
+        mb: { xs: 1, sm: 1.5 },
+    },
+    headerBrand: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        gap: { xs: 1.25, sm: 2 },
+        py: { xs: 0.25, sm: 0.5 },
+    },
+    logo: {
+        width: 60,
+        height: 60,
+        backgroundImage: 'url(/fragmenta_icon_1024.png)',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        borderRadius: 2,
+        border: '1px solid rgba(194, 207, 228, 0.22)',
+        boxShadow: '0 10px 20px rgba(4, 8, 14, 0.36)',
+        filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))',
+    },
+    title: {
+        color: 'text.primary',
+        fontFamily: '"Bitcount Single", "IBM Plex Mono", "JetBrains Mono", "Space Mono", "Courier New", monospace',
+        fontWeight: 400,
+        letterSpacing: '0.02em',
+        textShadow: '0 2px 10px rgba(0, 0, 0, 0.6)',
+    },
+    headerActionsContainer: (isCompactLayout) => ({
+        display: 'flex',
+        alignItems: 'stretch',
+        justifyContent: { xs: 'flex-start', md: 'flex-end' },
+        gap: { xs: 1, sm: 1.5 },
+        flexDirection: isCompactLayout ? 'column' : 'row',
+        flexWrap: isCompactLayout ? 'wrap' : 'nowrap',
+        width: { xs: '100%', md: 'auto' },
+    }),
+    headerActionsGrid: (isCompactLayout) => ({
+        display: 'grid',
+        gridTemplateColumns: isCompactLayout
+            ? 'repeat(2, minmax(0, 1fr))'
+            : 'repeat(2, 122px)',
+        gap: { xs: 0.75, sm: 1 },
+        justifyContent: 'flex-end',
+        flex: isCompactLayout ? '1 1 auto' : '0 1 auto',
+        width: isCompactLayout ? '100%' : 'auto',
+    }),
+    headerActionButton: {
+        fontSize: { xs: '0.70rem', sm: '0.72rem' },
+        height: { xs: 34, sm: 36 },
+        minWidth: 0,
+        width: '100%',
+        px: { xs: 1, sm: 1.5 },
+        '& .MuiButton-startIcon svg': {
+            width: { xs: 14, sm: 15 },
+            height: { xs: 14, sm: 15 },
+        },
+    },
+    gpuCard: (isCompactLayout) => ({
+        p: { xs: 1.25, sm: 1.75 },
+        bgcolor: 'background.paper',
+        borderRadius: 2.5,
+        border: '1px solid',
+        borderColor: 'divider',
+        minWidth: isCompactLayout ? '100%' : 270,
+        flexShrink: 0,
+        position: 'relative',
+        overflow: 'hidden',
+        boxShadow: '0 16px 32px rgba(4, 8, 14, 0.44)',
+    }),
+    gpuUsageTrack: {
+        position: 'relative',
+        width: '100%',
+        height: 6,
+        bgcolor: 'rgba(157, 169, 188, 0.2)',
+        borderRadius: 3,
+        overflow: 'hidden',
+    },
+    gpuUsageFill: (width, color) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width,
+        bgcolor: color,
+        borderRadius: 3,
+        transition: 'width 0.3s ease-in-out',
+    }),
+    emphasizedPrimaryBody2: {
+        fontWeight: 'bold',
+        color: 'primary.main',
+    },
+    advancedSettingsDetails: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            backgroundColor: isDark
+                ? 'rgba(10, 15, 23, 0.46)'
+                : 'rgba(255, 255, 255, 0.82)',
+            borderTop: isDark
+                ? '1px solid rgba(194, 207, 228, 0.12)'
+                : '1px solid rgba(15, 23, 42, 0.08)',
+            borderBottomLeftRadius: 12,
+            borderBottomRightRadius: 12,
+            maxHeight: { xs: 'none', md: '400px' },
+            overflowY: { xs: 'visible', md: 'auto' },
+            overflowX: 'hidden',
+            '&::-webkit-scrollbar': {
+                width: '8px',
+            },
+            '&::-webkit-scrollbar-track': {
+                background: isDark
+                    ? 'rgba(157, 169, 188, 0.14)'
+                    : 'rgba(100, 116, 139, 0.14)',
+                borderRadius: '4px',
+            },
+            '&::-webkit-scrollbar-thumb': {
+                background: isDark
+                    ? 'rgba(157, 169, 188, 0.45)'
+                    : 'rgba(100, 116, 139, 0.42)',
+                borderRadius: '4px',
+                '&:hover': {
+                    background: isDark
+                        ? 'rgba(157, 169, 188, 0.62)'
+                        : 'rgba(100, 116, 139, 0.56)',
+                },
+            },
+        };
+    },
+    mainLayout: {
+        display: 'flex',
+        flexDirection: { xs: 'column', md: 'row' },
+        width: '100%',
+        flex: 1,
+        gap: { xs: 1, sm: 1.25, md: 1.5 },
+        borderRadius: 3,
+        minHeight: 0,
+    },
+    navPaper: {
+        width: { xs: '100%', md: 220 },
+        backgroundColor: 'background.paper',
+        borderRadius: 2.5,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+    },
+    navigationTabs: (isCompactLayout) => ({
+        height: isCompactLayout ? 'auto' : '100%',
+        p: { xs: 0.5, sm: 1 },
+        gap: { xs: 0.25, sm: 0.5 },
+        '& .MuiTabs-indicator': {
+            display: 'none',
+        },
+        '& .MuiTab-root': {
+            alignItems: 'center',
+            justifyContent: isCompactLayout ? 'center' : 'flex-start',
+            textAlign: isCompactLayout ? 'center' : 'left',
+            minHeight: { xs: 40, sm: 46 },
+            fontSize: { xs: '0.78rem', sm: '0.86rem' },
+            fontWeight: 500,
+            textTransform: 'none',
+            color: 'text.secondary',
+            borderRadius: 2,
+            px: { xs: 1, sm: 1.5 },
+            py: { xs: 0.75, sm: 1 },
+            mx: isCompactLayout ? 0.25 : 0,
+            '& .MuiTab-iconWrapper': {
+                marginBottom: '0 !important',
+            },
+            '&.Mui-selected': {
+                color: 'primary.main',
+                fontWeight: 600,
+                backgroundColor: 'rgba(53, 194, 212, 0.16)',
+                boxShadow: 'inset 0 0 0 1px rgba(115, 215, 227, 0.35)',
+            },
+            '&:hover': {
+                color: 'text.primary',
+                backgroundColor: 'rgba(53, 194, 212, 0.08)',
+            },
+        },
+    }),
+    mainContentPaper: (muiTheme) => ({
+        flex: 1,
+        backgroundColor: 'background.paper',
+        borderRadius: 2.5,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: { xs: 'auto', md: 0 },
+        overflow: 'visible',
+        '& .MuiTypography-body1, & .MuiTypography-body2, & .MuiTypography-caption, & .MuiTypography-subtitle2': {
+            fontSize: muiTheme.typography.body2.fontSize,
+            lineHeight: muiTheme.typography.body2.lineHeight,
+        },
+        '& .MuiButton-startIcon svg, & .MuiButton-endIcon svg, & .MuiIconButton-root svg, & .MuiAccordionSummary-expandIconWrapper svg': {
+            width: 20,
+            height: 20,
+        },
+    }),
+    elevatedInfoCard: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            p: { xs: 1.5, sm: 2 },
+            mb: 2,
+            boxShadow: isDark
+                ? '0 14px 28px rgba(4, 8, 14, 0.44)'
+                : '0 14px 26px rgba(15, 23, 42, 0.1)',
+            borderRadius: 2.5,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.16)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
+                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            '&:hover': {
+                boxShadow: isDark
+                    ? '0 20px 34px rgba(4, 8, 14, 0.56)'
+                    : '0 20px 34px rgba(15, 23, 42, 0.14)',
+                transform: 'translateY(-1px)',
+                transition: 'all 0.3s ease',
+            },
+            transition: 'all 0.3s ease',
+        };
+    },
+    modelMissingAlert: {
+        mt: 2,
+        backgroundColor: 'rgba(219, 80, 68, 0)',
+        border: '1px solid #DB5044',
+        borderRadius: 2,
+        '& .MuiAlert-icon': {
+            color: '#DB5044',
+        },
+    },
+    modelMissingLink: {
+        fontWeight: 600,
+        color: 'primary.main',
+        textDecoration: 'none',
+        '&:hover': {
+            textDecoration: 'underline',
+        },
+    },
+    headerActionButtonWithOpacity: (isEnabled) => ({
+        fontSize: { xs: '0.70rem', sm: '0.72rem' },
+        height: { xs: 34, sm: 36 },
+        minWidth: 0,
+        width: '100%',
+        px: { xs: 1, sm: 1.5 },
+        opacity: isEnabled ? 1 : 0.5,
+        '& .MuiButton-startIcon svg': {
+            width: { xs: 14, sm: 15 },
+            height: { xs: 14, sm: 15 },
+        },
+    }),
+    gpuHeaderRow: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        mb: 1,
+    },
+    gpuLabel: {
+        fontWeight: 500,
+    },
+    gpuStatusGroup: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.5,
+    },
+    gpuStatusDot: (status, animate = true) => ({
+        width: 6,
+        height: 6,
+        borderRadius: '50%',
+        bgcolor: status === 'good'
+            ? 'success.main'
+            : status === 'low'
+                ? 'warning.main'
+                : 'error.main',
+        animation: animate ? 'pulse 2s infinite' : 'none',
+        '@keyframes pulse': {
+            '0%': { opacity: 1 },
+            '50%': { opacity: 0.5 },
+            '100%': { opacity: 1 },
+        },
+    }),
+    gpuUsageWrap: {
+        mb: 1.25,
+    },
+    gpuFooterRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    gpuFreeText: {
+        fontWeight: 'bold',
+    },
+    centeredCaption: {
+        display: 'block',
+        textAlign: 'center',
+    },
+    centeredCaptionWithMargin: {
+        display: 'block',
+        textAlign: 'center',
+        mt: 0.5,
+    },
+    dataProcessingGrid: {
+        flex: 1,
+        minHeight: 0,
+        flexWrap: 'wrap',
+        alignItems: 'stretch',
+    },
+    primaryPaneItem: {
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        overflow: 'visible',
+    },
+    primaryPaneContent: {
+        flex: 1,
+        overflow: 'visible',
+        pr: { xs: 0, md: 1 },
+    },
+    secondaryPaneItem: {
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'visible',
+    },
+    secondaryPaneContent: {
+        flex: 1,
+        overflow: 'visible',
+        pl: { xs: 0, md: 1 },
+    },
+    addRowButton: {
+        mb: { xs: 2, sm: 3 },
+    },
+    sectionInfoAlert: {
+        mb: 2,
+    },
+    recentFilesBlock: {
+        mt: 1,
+    },
+    responsiveGrid: {
+        height: 'auto',
+        flexWrap: 'wrap',
+    },
+    formControlMarginBottom: {
+        mb: 2,
+    },
+    fieldMarginBottom: {
+        mb: 2,
+    },
+    fieldMarginBottomLarge: {
+        mb: 3,
+    },
+    accordionMarginBottom: {
+        mb: 2,
+    },
+    sliderRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
+    },
+    sliderFlexGrow: {
+        flex: 1,
+    },
+    sliderInputSmall: {
+        width: { xs: '72px', sm: '80px' },
+    },
+    sliderInputMedium: {
+        width: { xs: '88px', sm: '100px' },
+    },
+    trainingActionRow: {
+        display: 'flex',
+        gap: { xs: 1.25, sm: 2 },
+        flexDirection: { xs: 'column', sm: 'row' },
+    },
+    actionButtonFlexGrow: {
+        flex: 1,
+    },
+    mediumWeightBodyText: {
+        fontWeight: 500,
+    },
+    trainingMonitorWrap: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    trainingMonitorHeaderRow: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        mb: 1,
+    },
+    trainingMonitorTitle: {
+        mb: 0,
+    },
+    trainingMonitorStatusInline: (muiTheme) => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.75,
+        px: 1,
+        py: 0.35,
+        borderRadius: 999,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: muiTheme.palette.mode === 'dark'
+            ? 'rgba(10, 15, 23, 0.7)'
+            : 'rgba(255, 255, 255, 0.9)',
+    }),
+    trainingMonitorStatusDot: (status, animate = false) => ({
+        width: 8,
+        height: 8,
+        borderRadius: '50%',
+        bgcolor: status === 'live'
+            ? 'success.main'
+            : status === 'error'
+                ? 'error.main'
+                : status === 'complete'
+                    ? 'primary.main'
+                    : 'text.secondary',
+        animation: animate ? 'pulse 2s infinite' : 'none',
+        '@keyframes pulse': {
+            '0%': { opacity: 1 },
+            '50%': { opacity: 0.5 },
+            '100%': { opacity: 1 },
+        },
+    }),
+    trainingMonitorStatusText: (status) => ({
+        color: status === 'live'
+            ? 'success.main'
+            : status === 'error'
+                ? 'error.main'
+                : status === 'complete'
+                    ? 'primary.main'
+                    : 'text.secondary',
+        fontWeight: 600,
+        letterSpacing: '0.03em',
+        textTransform: 'uppercase',
+        fontSize: { xs: '0.64rem', sm: '0.7rem' },
+        lineHeight: 1,
+    }),
+    generationModelRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: { xs: 1, sm: 2 },
+        mb: 2,
+    },
+    refreshModelsButton: {
+        minWidth: 40,
+    },
+    durationRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: { xs: 1, sm: 2 },
+        mb: 2,
+    },
+    generatingWrap: {
+        mb: 3,
+    },
+    generatingHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        mb: 1,
+    },
+    generatingSpinner: {
+        mr: 1,
+    },
+    generatingProgress: {
+        height: 8,
+        borderRadius: 4,
+    },
+    generatingHint: {
+        mt: 1,
+        display: 'block',
+    },
+    generateButton: {
+        mb: 2,
+    },
+    warningAlertTop: {
+        mt: 2,
+    },
+    sectionCardHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        mb: 1.5,
+    },
+    sectionCardIcon: {
+        display: 'inline-flex',
+        color: 'text.primary',
+        lineHeight: 0,
+    },
+    sectionCardTitle: {
+        fontWeight: 500,
+    },
+    selectedModelCard: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            p: { xs: 1.5, sm: 2 },
+            mb: 2,
+            boxShadow: isDark
+                ? '0 14px 28px rgba(4, 8, 14, 0.44)'
+                : '0 14px 26px rgba(15, 23, 42, 0.1)',
+            borderRadius: 2.5,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.16)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
+                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            '&:hover': {
+                boxShadow: isDark
+                    ? '0 20px 34px rgba(4, 8, 14, 0.56)'
+                    : '0 20px 34px rgba(15, 23, 42, 0.14)',
+                transform: 'translateY(-1px)',
+                transition: 'all 0.3s ease',
+            },
+            transition: 'all 0.3s ease',
+        };
+    },
+    boldBodyText: {
+        fontWeight: 'bold',
+    },
+    selectedModelMetaText: {
+        display: 'block',
+        mt: 0.5,
+    },
+    unwrappedInfoWrap: {
+        mt: 2,
+    },
+    dialogBodyText: {
+        mt: 3,
+    },
+    dialogErrorText: {
+        mt: 2,
+    },
+    modeToggleButton: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            position: 'fixed',
+            left: { xs: 12, sm: 16 },
+            bottom: { xs: 58, sm: 66 },
+            width: { xs: 38, sm: 42 },
+            height: { xs: 38, sm: 42 },
+            zIndex: 1350,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.22)'
+                : '1px solid rgba(15, 23, 42, 0.16)',
+            background: isDark
+                ? 'linear-gradient(145deg, rgba(18, 25, 38, 0.96) 0%, rgba(12, 19, 30, 0.96) 100%)'
+                : 'linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            color: isDark ? 'primary.light' : 'primary.main',
+            boxShadow: isDark
+                ? '0 14px 24px rgba(4, 8, 14, 0.5)'
+                : '0 14px 24px rgba(15, 23, 42, 0.14)',
+            '&:hover': {
+                background: isDark
+                    ? 'linear-gradient(145deg, rgba(20, 28, 42, 1) 0%, rgba(14, 22, 34, 1) 100%)'
+                    : 'linear-gradient(145deg, rgba(244, 250, 255, 1) 0%, rgba(236, 245, 252, 1) 100%)',
+                transform: 'translateY(-1px)',
+                boxShadow: isDark
+                    ? '0 18px 28px rgba(4, 8, 14, 0.6)'
+                    : '0 18px 28px rgba(15, 23, 42, 0.18)',
+            },
+        };
+    },
+    infoButton: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            position: 'fixed',
+            left: { xs: 12, sm: 16 },
+            bottom: { xs: 12, sm: 16 },
+            width: { xs: 38, sm: 42 },
+            height: { xs: 38, sm: 42 },
+            zIndex: 1350,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.22)'
+                : '1px solid rgba(15, 23, 42, 0.16)',
+            background: isDark
+                ? 'linear-gradient(145deg, rgba(18, 25, 38, 0.96) 0%, rgba(12, 19, 30, 0.96) 100%)'
+                : 'linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            color: isDark ? 'primary.light' : 'primary.main',
+            boxShadow: isDark
+                ? '0 14px 24px rgba(4, 8, 14, 0.5)'
+                : '0 14px 24px rgba(15, 23, 42, 0.14)',
+            '&:hover': {
+                background: isDark
+                    ? 'linear-gradient(145deg, rgba(20, 28, 42, 1) 0%, rgba(14, 22, 34, 1) 100%)'
+                    : 'linear-gradient(145deg, rgba(244, 250, 255, 1) 0%, rgba(236, 245, 252, 1) 100%)',
+                transform: 'translateY(-1px)',
+                boxShadow: isDark
+                    ? '0 18px 28px rgba(4, 8, 14, 0.6)'
+                    : '0 18px 28px rgba(15, 23, 42, 0.18)',
+            },
+        };
+    },
+    infoDialogTitleRow: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 1,
+    },
+    infoDialogIntro: {
+        mt: 1,
+        color: 'text.secondary',
+    },
+    infoDialogSectionTitle: {
+        mt: 2.25,
+        mb: 1,
+        color: 'text.primary',
+        fontWeight: 700,
+        letterSpacing: '0.03em',
+        textTransform: 'uppercase',
+        fontSize: { xs: '0.7rem', sm: '0.74rem' },
+    },
+    infoDialogActionStack: {
+        mt: 0.25,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+    },
+    infoDocButton: {
+        justifyContent: 'flex-start',
+    },
+};
+
+export const tabPanelStyles = {
+    root: {
+        p: { xs: 1.25, md: 2 },
+        background: 'transparent',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        overflow: 'visible',
+    },
+};
+
+export const audioUploadRowStyles = {
+    card: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            mb: { xs: 1.5, sm: 2 },
+            boxShadow: isDark
+                ? '0 12px 24px rgba(4, 8, 14, 0.34)'
+                : '0 12px 24px rgba(15, 23, 42, 0.1)',
+            borderRadius: 2.2,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.15)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
+                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            '&:hover': {
+                boxShadow: isDark
+                    ? '0 16px 30px rgba(4, 8, 14, 0.46)'
+                    : '0 16px 30px rgba(15, 23, 42, 0.14)',
+                transform: 'translateY(-1px)',
+                transition: 'all 0.3s ease',
+            },
+            transition: 'all 0.3s ease',
+        };
+    },
+    cardContent: {
+        p: { xs: 1.5, sm: 2 },
+        '&:last-child': {
+            pb: { xs: 1.5, sm: 2 },
+        },
+    },
+    gridSpacing: { xs: 1.5, sm: 2 },
+    uploadDropZone: (isDragActive) => (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            border: isDark
+                ? '1.5px dashed rgba(194, 207, 228, 0.35)'
+                : '1.5px dashed rgba(100, 116, 139, 0.34)',
+            borderRadius: 2,
+            p: { xs: 1.5, sm: 2 },
+            textAlign: 'center',
+            cursor: 'pointer',
+            '&:hover': {
+                borderColor: 'primary.main',
+                backgroundColor: isDark
+                    ? 'rgba(53, 194, 212, 0.08)'
+                    : 'rgba(20, 151, 168, 0.08)',
+            },
+            backgroundColor: isDragActive
+                ? (isDark ? 'rgba(53, 194, 212, 0.12)' : 'rgba(20, 151, 168, 0.12)')
+                : (isDark ? 'rgba(10, 15, 23, 0.8)' : 'rgba(255, 255, 255, 0.9)'),
+        };
+    },
+    hiddenInput: {
+        display: 'none',
+    },
+    audioPreview: {
+        width: '100%',
+        marginTop: 8,
+    },
+    deleteGridItem: {
+        display: 'flex',
+        justifyContent: { xs: 'flex-end', sm: 'center' },
+    },
+    deleteIconButton: {
+        alignSelf: { xs: 'center', sm: 'flex-start' },
+    },
+};
+
+export const generatedFragmentsWindowStyles = {
+    rootPaper: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            p: 2,
+            height: 240,
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: 2.5,
+            borderColor: isDark
+                ? 'rgba(194, 207, 228, 0.16)'
+                : 'rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.94) 0%, rgba(13, 20, 31, 0.9) 100%)'
+                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            boxShadow: isDark
+                ? '0 14px 28px rgba(4, 8, 14, 0.42)'
+                : '0 14px 28px rgba(15, 23, 42, 0.1)',
+        };
+    },
+    headerRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        mb: 2,
+    },
+    titleRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        minWidth: 0,
+    },
+    titleIcon: {
+        display: 'inline-flex',
+        color: 'text.primary',
+        lineHeight: 0,
+    },
+    titleText: {
+        fontWeight: 500,
+    },
+    countText: {
+        fontWeight: 600,
+        minWidth: 20,
+        textAlign: 'right',
+    },
+    emptyState: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        color: 'text.secondary',
+    },
+    listRoot: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            flex: 1,
+            overflow: 'auto',
+            maxHeight: 180,
+            '& .MuiListItem-root': {
+                border: '1px solid',
+                borderColor: isDark
+                    ? 'rgba(194, 207, 228, 0.16)'
+                    : 'rgba(15, 23, 42, 0.12)',
+                borderRadius: 1.5,
+                mb: 1,
+                backgroundColor: isDark
+                    ? 'rgba(12, 18, 28, 0.62)'
+                    : 'rgba(248, 251, 255, 0.9)',
+                '&:last-child': {
+                    mb: 0,
+                },
+            },
+        };
+    },
+    listItem: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'stretch',
+        py: 1,
+    },
+    fragmentRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        mb: 1,
+    },
+    fragmentMeta: {
+        flex: 1,
+        minWidth: 0,
+    },
+    fragmentPrompt: {
+        fontWeight: 'bold',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: 'vertical',
+    },
+    fragmentActions: {
+        display: 'flex',
+        gap: 1,
+        flexShrink: 0,
+    },
+    playPauseButton: (isPlaying) => (muiTheme) => ({
+        border: '1px solid',
+        borderColor: isPlaying
+            ? 'primary.main'
+            : (muiTheme.palette.mode === 'dark' ? 'rgba(194, 207, 228, 0.22)' : 'rgba(15, 23, 42, 0.2)'),
+    }),
+    hiddenAudio: {
+        display: 'none',
+    },
+};
+
+export const trainingMonitorStyles = {
+    rootPaper: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            p: 3,
+            mb: 2,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            boxShadow: isDark
+                ? '0 16px 30px rgba(4, 8, 14, 0.48)'
+                : '0 16px 30px rgba(15, 23, 42, 0.1)',
+            borderRadius: 2.5,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.16)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
+                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            '&:hover': {
+                boxShadow: isDark
+                    ? '0 22px 38px rgba(4, 8, 14, 0.58)'
+                    : '0 22px 38px rgba(15, 23, 42, 0.14)',
+                transform: 'translateY(-1px)',
+                transition: 'all 0.3s ease',
+            },
+            transition: 'all 0.3s ease',
+        };
+    },
+    headerRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 1,
+        mb: 2,
+    },
+    headerTitleWrap: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+    },
+    headerIcon: {
+        display: 'inline-flex',
+        color: 'text.primary',
+        lineHeight: 0,
+    },
+    headerTitle: {
+        fontWeight: 500,
+    },
+    statusInline: (muiTheme) => ({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 0.75,
+        px: 1,
+        py: 0.35,
+        borderRadius: 999,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: muiTheme.palette.mode === 'dark'
+            ? 'rgba(10, 15, 23, 0.7)'
+            : 'rgba(255, 255, 255, 0.9)',
+    }),
+    statusDot: (status, animate = false) => ({
+        width: 8,
+        height: 8,
+        borderRadius: '50%',
+        bgcolor: status === 'live'
+            ? 'success.main'
+            : status === 'error'
+                ? 'error.main'
+                : status === 'complete'
+                    ? 'primary.main'
+                    : 'text.secondary',
+        animation: animate ? 'pulse 2s infinite' : 'none',
+        '@keyframes pulse': {
+            '0%': { opacity: 1 },
+            '50%': { opacity: 0.5 },
+            '100%': { opacity: 1 },
+        },
+    }),
+    statusText: (status) => ({
+        color: status === 'live'
+            ? 'success.main'
+            : status === 'error'
+                ? 'error.main'
+                : status === 'complete'
+                    ? 'primary.main'
+                    : 'text.secondary',
+        fontWeight: 600,
+        letterSpacing: '0.03em',
+        textTransform: 'uppercase',
+        fontSize: { xs: '0.64rem', sm: '0.7rem' },
+        lineHeight: 1,
+    }),
+    progressSection: {
+        mb: 2,
+    },
+    progressHeader: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        mb: 1,
+    },
+    progressBar: {
+        height: 8,
+        borderRadius: 4,
+    },
+    deviceSection: {
+        mb: 2,
+    },
+    deviceInfo: {
+        fontSize: { xs: '0.74rem', sm: '0.8rem' },
+        mt: 0.5,
+    },
+    metricsGrid: {
+        mb: 2,
+    },
+    lossSection: {
+        mb: 2,
+    },
+    lossChartBox: {
+        height: 200,
+        width: '100%',
+    },
+    errorAlert: {
+        mb: 2,
+    },
+};
+
+export const welcomePageStyles = {
+    backdrop: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            zIndex: 9999,
+            background: isDark
+                ? 'radial-gradient(1200px 600px at 8% -15%, rgba(53, 194, 212, 0.2), transparent 55%), radial-gradient(800px 500px at 92% 110%, rgba(83, 193, 138, 0.16), transparent 65%), linear-gradient(160deg, #090C12 0%, #0C1119 45%, #090D13 100%)'
+                : 'radial-gradient(1200px 600px at 8% -15%, rgba(20, 151, 168, 0.16), transparent 55%), radial-gradient(800px 500px at 92% 110%, rgba(72, 171, 118, 0.14), transparent 65%), linear-gradient(160deg, #F4FAFF 0%, #EAF4FF 45%, #F8FCFF 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: { xs: 2, md: 4 },
+            cursor: 'pointer',
+        };
+    },
+    panel: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            textAlign: 'center',
+            width: 'min(920px, 100%)',
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.2)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            borderRadius: 4,
+            background: isDark
+                ? 'linear-gradient(170deg, rgba(19, 27, 41, 0.95) 0%, rgba(12, 19, 31, 0.96) 100%)'
+                : 'linear-gradient(170deg, rgba(255, 255, 255, 0.98) 0%, rgba(242, 248, 255, 0.98) 100%)',
+            boxShadow: isDark
+                ? '0 32px 56px rgba(4, 8, 14, 0.64)'
+                : '0 24px 46px rgba(15, 23, 42, 0.2)',
+            backdropFilter: 'blur(10px)',
+            px: { xs: 3, md: 7 },
+            py: { xs: 5, md: 6 },
+        };
+    },
+    logo: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            width: { xs: 96, sm: 122 },
+            height: { xs: 96, sm: 122 },
+            backgroundImage: 'url(/fragmenta_icon_1024.png)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            borderRadius: 3,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.24)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            boxShadow: isDark
+                ? '0 16px 28px rgba(4, 8, 14, 0.45)'
+                : '0 12px 24px rgba(15, 23, 42, 0.22)',
+            filter: isDark
+                ? 'drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4))'
+                : 'drop-shadow(0 6px 12px rgba(15, 23, 42, 0.22))',
+            mx: 'auto',
+            mb: 1.5,
+        };
+    },
+    title: {
+        fontFamily: '"Bitcount Single", "IBM Plex Mono", "JetBrains Mono", "Space Mono", "Courier New", monospace',
+        fontWeight: 400,
+        color: 'text.primary',
+        mb: 1,
+        fontSize: { xs: '2.5rem', sm: '3.5rem', md: '4rem' },
+        letterSpacing: '0.02em',
+    },
+    overline: {
+        color: 'primary.main',
+        letterSpacing: { xs: '0.12em', md: '0.18em' },
+        fontWeight: 700,
+        fontSize: { xs: '0.62rem', sm: '0.7rem' },
+    },
+    footer: {
+        color: 'text.secondary',
+        opacity: 0.6,
+        fontSize: { xs: '0.64rem', sm: '0.7rem' },
+        marginTop: 5,
+    },
+    version: {
+        color: 'text.secondary',
+        opacity: 0.6,
+        fontSize: { xs: '0.64rem', sm: '0.7rem' },
+        fontStyle: 'italic',
+    },
+    ctaButton: {
+        mt: 3,
+        mb: 2,
+        px: { xs: 3.25, md: 4.5 },
+        py: { xs: 1.2, md: 1.5 },
+        borderRadius: 2,
+        textTransform: 'none',
+        fontSize: { xs: '0.98rem', sm: '1.05rem', md: '1.1rem' },
+        fontWeight: 500,
+    },
+};
+
+export const checkpointManagerStyles = {
+    root: {
+        mt: 2,
+        pt: 2,
+        borderTop: '1px solid',
+        borderColor: 'divider',
+    },
+    panelPaper: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            p: 2,
+            mb: 2,
+            boxShadow: isDark
+                ? '0 16px 30px rgba(4, 8, 14, 0.48)'
+                : '0 16px 30px rgba(15, 23, 42, 0.1)',
+            borderRadius: 2.5,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.16)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(160deg, rgba(17, 24, 37, 0.96) 0%, rgba(13, 20, 31, 0.92) 100%)'
+                : 'linear-gradient(160deg, rgba(255, 255, 255, 0.99) 0%, rgba(245, 250, 255, 0.98) 100%)',
+            '&:hover': {
+                boxShadow: isDark
+                    ? '0 22px 38px rgba(4, 8, 14, 0.58)'
+                    : '0 22px 38px rgba(15, 23, 42, 0.14)',
+                transform: 'translateY(-1px)',
+                transition: 'all 0.3s ease',
+            },
+            transition: 'all 0.3s ease',
+        };
+    },
+    checkpointsList: {
+        mt: 1,
+        display: 'grid',
+        gap: 1,
+    },
+    checkpointCard: (muiTheme) => {
+        const isDark = muiTheme.palette.mode === 'dark';
+        return {
+            mb: 1,
+            p: 1.25,
+            boxShadow: isDark
+                ? '0 10px 20px rgba(4, 8, 14, 0.34)'
+                : '0 10px 18px rgba(15, 23, 42, 0.08)',
+            borderRadius: 1.75,
+            border: isDark
+                ? '1px solid rgba(194, 207, 228, 0.16)'
+                : '1px solid rgba(15, 23, 42, 0.12)',
+            background: isDark
+                ? 'linear-gradient(180deg, rgba(18, 25, 38, 0.98) 0%, rgba(15, 22, 34, 0.96) 100%)'
+                : 'linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 251, 255, 0.99) 100%)',
+            '&:hover': {
+                boxShadow: isDark
+                    ? '0 14px 26px rgba(4, 8, 14, 0.44)'
+                    : '0 16px 28px rgba(15, 23, 42, 0.12)',
+                transform: 'translateY(-1px)',
+                transition: 'all 0.2s ease',
+            },
+            transition: 'all 0.2s ease',
+        };
+    },
+    checkpointRow: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 1,
+    },
+    checkpointInfo: {
+        flex: 1,
+    },
+    checkpointName: {
+        fontWeight: 600,
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 0.75,
+    },
+    unwrappedChip: {
+        fontSize: '0.7rem',
+    },
+    emptyText: {
+        display: 'block',
+        mt: 0.5,
+    },
+    metaNext: {
+        ml: 1,
+    },
+    actions: {
+        display: 'flex',
+        gap: 1,
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+    },
+    errorAlert: {
+        mt: 2,
+    },
+    deleteDialogText: {
+        mt: 1.5,
+    },
+    snackbarAlert: {
+        width: '100%',
+    },
+};
+
+export const hfAuthDialogStyles = {
+    checkingBox: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        my: 4,
+    },
+    checkingProgress: {
+        mb: 2,
+    },
+    authStepBox: {
+        mt: 2,
+    },
+    downloadStepBox: {
+        mt: 2,
+        textAlign: 'center',
+    },
+    downloadProgress: {
+        mb: 2,
+        height: 10,
+        borderRadius: 5,
+    },
+    successStepBox: {
+        mt: 2,
+        textAlign: 'center',
+    },
+    stepper: {
+        mb: 4,
+    },
+    errorAlert: {
+        mb: 2,
+    },
+    loginSpinnerSize: 24,
+};
+
+export const modelUnwrapButtonStyles = {
+    root: {
+        mt: 1,
+    },
+    result: {
+        mt: 0.5,
+    },
+    error: {
+        color: '#DB5044',
+        mt: 0.5,
+    },
+};
+
+export const lossChartStyles = {
+    padding: { top: 10, right: 16, bottom: 28, left: 44 },
+    colors: {
+        grid: '#2B3446',
+        axis: '#9DA9BC',
+        line: '#35C2D4',
+        point: '#73D7E3',
+        tooltipBg: '#111826',
+        tooltipBorder: 'rgba(194, 207, 228, 0.2)',
+        tooltipText: '#E8EDF5',
+    },
+    svg: {
+        width: '100%',
+        height: '100%',
+    },
+    axisFontSize: 10,
+    tooltip: {
+        width: 100,
+        height: 34,
+        rx: 4,
+        textX: 6,
+        timeY: 14,
+        lossY: 28,
+    },
+};
+
+export default theme;

app/frontend/src/utils/format.js

@@ -0,0 +1,8 @@
+export function formatDuration(seconds) {
+    const sec = Math.floor(seconds % 60);
+    const min = Math.floor((seconds / 60) % 60);
+    const hr = Math.floor(seconds / 3600);
+    return [hr, min, sec]
+        .map((v, i) => (i === 0 ? v : v.toString().padStart(2, '0')))
+        .join(':');
+}

app/frontend/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+    plugins: [react({ include: /\.(js|jsx)$/ })],
+    esbuild: {
+        loader: 'jsx',
+        include: /src\/.*\.jsx?$/,
+        exclude: [],
+    },
+    optimizeDeps: {
+        esbuildOptions: {
+            loader: { '.js': 'jsx' },
+        },
+    },
+    build: {
+        outDir: 'build',
+        sourcemap: false,
+    },
+    server: {
+        port: 3000,
+        proxy: {
+            '/api': 'http://localhost:5001',
+        },
+    },
+});

docker-entrypoint.sh

@@ -24,13 +24,22 @@ echo "[startup] Python: $(python --version 2>&1)"
 echo "[startup] Working dir: $(pwd)"
 echo "[startup] User: $(whoami) (uid=$(id -u))"
 
-# Quick smoke-test: can we import the core deps? (avoid CUDA init — it's slow)
-echo "[startup] Checking core Python imports…"
+# Smoke-test: verify core imports and detect GPU
+echo "[startup] Checking core Python imports and GPU…"
 python -c "
 import flask, flask_cors, torch, torchaudio, soundfile
 print(f'  Flask {flask.__version__}  |  torch {torch.__version__}')
 print(f'  CUDA build: {torch.version.cuda or \"none\"}')
-print('  GPU detection deferred to first request (faster startup)')
+if torch.cuda.is_available():
+    name = torch.cuda.get_device_name(0)
+    vram = torch.cuda.get_device_properties(0).total_memory / 1024**3
+    print(f'  GPU: {name} ({vram:.1f} GB VRAM) — CUDA ready')
+else:
+    print('  No CUDA GPU detected — will run on CPU')
+    print('  If you have an NVIDIA GPU, check:')
+    print('    1. Run \"docker compose up\" (not \"docker-compose up\")')
+    print('    2. Docker Desktop is using the WSL2 backend')
+    print('    3. \"nvidia-smi\" works on the host')
 " || {
     echo "ERROR: Core Python imports failed. Check requirements."
     exit 1

models/config/dataset-config.json

@@ -2,10 +2,11 @@
     "dataset_type": "audio_dir",
     "datasets": [
         {
-            "id": "fine_tune_data",
-            "path": "/home/misagh/Documents/Fragmenta_Desktop/data",
+            "id": "custom_dataset",
+            "path": "/home/misagh/Documents/Fragmenta_Revised/data",
             "custom_metadata_module": "custom_metadata"
         }
     ],
-    "random_crop": true
+    "random_crop": true,
+    "drop_last": true
 }

requirements.txt

@@ -1,8 +1,5 @@
 --extra-index-url https://download.pytorch.org/whl/cu128
 
-PyQt6
-PyQt6-WebEngine>=6.4.0
-
 Flask>=2.3.0
 Flask-CORS>=4.0.0
 requests>=2.28.0
@@ -15,32 +12,23 @@ diffusers>=0.20.0
 accelerate>=0.20.0
 peft>=0.4.0
 datasets>=2.14.0
-huggingface-hub>=0.16.0 
-flash-attn>=2.8.3 
+huggingface-hub>=0.16.0
 
 librosa>=0.10.0
 soundfile>=0.12.0
 scipy>=1.10.0
-numpy==1.23.5 
-
-gradio>=3.40.0
-matplotlib>=3.7.0
-plotly>=5.15.0
+numpy==1.23.5
 
-setuptools<82
+setuptools<70
 tqdm>=4.65.0
-psutil>=5.9.0 
-wandb>=0.15.0 
+psutil>=5.9.0
 omegaconf>=2.3.0
-click>=8.1.0  
+click>=8.1.0
+Pillow>=9.0.0
+python-dotenv>=1.0.0
 
-pytest>=7.4.0
-black>=23.0.0
-isort>=5.12.0
-flake8>=6.0.0
-Pillow>=9.0.0 
+pywebview>=4.4.1
+Pycairo ; sys_platform == 'linux'
+PyGObject<3.49 ; sys_platform == 'linux'
 
-fastapi>=0.100.0
-uvicorn>=0.23.0
-python-dotenv>=1.0.0 
-setproctitle>=1.3.0 
+flash-attn>=2.8.3

stable-audio-tools/custom_metadata.py

@@ -6,25 +6,25 @@ logging.basicConfig(level=logging.WARNING)
 
 def _load_metadata():
     metadata = {}
-    project_root = os.path.join(os.path.dirname(__file__), '..')
+    here = os.path.dirname(__file__)
+    candidates = [
+        os.path.join(here, '..', 'data', 'metadata.json'),               # current layout
+        os.path.join(here, '..', 'app', 'backend', 'data', 'metadata.json'),  # legacy
+    ]
 
-    # Primary location: <project_root>/data/metadata.json (where the UI saves it)
-    primary_path = os.path.join(project_root, 'data', 'metadata.json')
-    # Legacy fallback: <project_root>/app/backend/data/metadata.json
-    legacy_path = os.path.join(project_root, 'app', 'backend', 'data', 'metadata.json')
-
-    json_path = primary_path if os.path.isfile(primary_path) else legacy_path
+    chosen = next((p for p in candidates if os.path.exists(p)), None)
+    if chosen is None:
+        logging.warning(f"Metadata file not found in any of: {candidates}")
+        return metadata
 
     try:
-        with open(json_path, 'r') as jsonfile:
+        with open(chosen, 'r') as jsonfile:
             metadata_list = json.load(jsonfile)
             for item in metadata_list:
                 metadata[item['file_name']] = item['prompt']
-    except FileNotFoundError:
-        logging.warning(f"Metadata file not found at {primary_path} or {legacy_path}")
     except Exception as e:
-        logging.warning(f"Error loading metadata: {e}")
-    
+        logging.warning(f"Error loading metadata from {chosen}: {e}")
+
     return metadata
 
 def get_custom_metadata(info, audio):

stable-audio-tools/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "stable-audio-tools",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

stable-audio-tools/stable_audio_tools/models/conditioners.py

@@ -261,7 +261,7 @@ class CLAPAudioConditioner(Conditioner):
         # Convert to mono
         mono_audios = audios.mean(dim=1)
 
-        with torch.amp.autocast(device_type=str(device) if str(device) in ('cuda', 'cpu') else 'cpu', enabled=False):
+        with torch.amp.autocast("cuda", enabled=False):
             audio_embedding = self.model.get_audio_embedding_from_data(mono_audios.float(), use_tensor=True)
 
         audio_embedding = audio_embedding.unsqueeze(1).to(device)
@@ -350,8 +350,11 @@ class T5Conditioner(Conditioner):
 
         self.model.eval()
             
-        _autocast_device = 'cuda' if torch.cuda.is_available() else 'cpu'
-        with torch.amp.autocast(device_type=_autocast_device, dtype=torch.float16) and torch.set_grad_enabled(self.enable_grad):
+        with torch.amp.autocast(
+            "cuda",
+            dtype=torch.float16,
+            enabled=str(device).startswith("cuda"),
+        ) and torch.set_grad_enabled(self.enable_grad):
             embeddings = self.model(
                 input_ids=input_ids, attention_mask=attention_mask
             )["last_hidden_state"]    

stable-audio-tools/stable_audio_tools/training/arc.py

@@ -285,7 +285,7 @@ class ARCTrainingWrapper(pl.LightningModule):
             self.diffusion.pretransform.to(self.device)
 
             if not self.pre_encoded:
-                with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu') and torch.set_grad_enabled(self.diffusion.pretransform.enable_grad):
+                with torch.cuda.amp.autocast() and torch.set_grad_enabled(self.diffusion.pretransform.enable_grad):
                     self.diffusion.pretransform.train(self.diffusion.pretransform.enable_grad)
 
                     diffusion_input = self.diffusion.pretransform.encode(diffusion_input)

stable-audio-tools/stable_audio_tools/training/diffusion.py

@@ -120,7 +120,7 @@ class DiffusionUncondTrainingWrapper(pl.LightningModule):
         noised_inputs = diffusion_input * alphas + noise * sigmas
         targets = noise * alphas - diffusion_input * sigmas
 
-        with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        with torch.cuda.amp.autocast():
             v = self.diffusion(noised_inputs, t)
 
             loss_info.update({
@@ -185,7 +185,7 @@ class DiffusionUncondDemoCallback(pl.Callback):
         noise = torch.randn([self.num_demos, module.diffusion.io_channels, demo_samples]).to(module.device)
 
         try:
-            with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+            with torch.cuda.amp.autocast():
                 fakes = sample(module.diffusion_ema, noise, self.demo_steps, 0)
 
                 if module.diffusion.pretransform is not None:
@@ -347,7 +347,7 @@ class DiffusionCondTrainingWrapper(pl.LightningModule):
             self.diffusion.pretransform.to(self.device)
 
             if not self.pre_encoded:
-                with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu') and torch.set_grad_enabled(self.diffusion.pretransform.enable_grad):
+                with torch.cuda.amp.autocast() and torch.set_grad_enabled(self.diffusion.pretransform.enable_grad):
                     self.diffusion.pretransform.train(self.diffusion.pretransform.enable_grad)
 
                     diffusion_input = self.diffusion.pretransform.encode(diffusion_input)
@@ -467,7 +467,7 @@ class DiffusionCondTrainingWrapper(pl.LightningModule):
 
         diffusion_input = reals
 
-        with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu') and torch.no_grad():
+        with torch.cuda.amp.autocast() and torch.no_grad():
             conditioning = self.diffusion.conditioner(metadata, self.device)
 
         # TODO: decide what to do with padding masks during validation
@@ -483,7 +483,7 @@ class DiffusionCondTrainingWrapper(pl.LightningModule):
             self.diffusion.pretransform.to(self.device)
 
             if not self.pre_encoded:
-                with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu') and torch.no_grad():
+                with torch.cuda.amp.autocast() and torch.no_grad():
                     self.diffusion.pretransform.train(self.diffusion.pretransform.enable_grad)
 
                     diffusion_input = self.diffusion.pretransform.encode(diffusion_input)
@@ -522,7 +522,7 @@ class DiffusionCondTrainingWrapper(pl.LightningModule):
             # if use_padding_mask:
             #     extra_args["mask"] = padding_masks
 
-            with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu') and torch.no_grad():
+            with torch.cuda.amp.autocast() and torch.no_grad():
                 output = self.diffusion(noised_inputs, t, cond=conditioning, cfg_dropout_prob = 0, **extra_args)
 
                 val_loss = F.mse_loss(output, targets)
@@ -621,7 +621,7 @@ class DiffusionCondDemoCallback(pl.Callback):
 
         try:
             print("Getting conditioning")
-            with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+            with torch.cuda.amp.autocast():
                 conditioning = module.diffusion.conditioner(demo_cond, module.device)
 
             cond_inputs = module.diffusion.get_conditioning_inputs(conditioning)
@@ -665,7 +665,7 @@ class DiffusionCondDemoCallback(pl.Callback):
 
                 print(f"Generating demo for cfg scale {cfg_scale}")
 
-                with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+                with torch.cuda.amp.autocast():
                     model = module.diffusion_ema.model if module.diffusion_ema is not None else module.diffusion.model
 
                     if module.diffusion_objective == "v":
@@ -917,7 +917,7 @@ class DiffusionCondInpaintTrainingWrapper(pl.LightningModule):
 
         p.tick("setup")
 
-        #with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        #with torch.cuda.amp.autocast():
         conditioning = self.diffusion.conditioner(metadata, self.device)
 
         p.tick("conditioning")
@@ -983,7 +983,7 @@ class DiffusionCondInpaintTrainingWrapper(pl.LightningModule):
 
         extra_args = {}
 
-        #with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        #with torch.cuda.amp.autocast():
         p.tick("amp")
         output = self.diffusion(noised_inputs, t, cond=conditioning, cfg_dropout_prob = self.cfg_dropout_prob, **extra_args)
         p.tick("diffusion")
@@ -1127,7 +1127,7 @@ class DiffusionCondInpaintDemoCallback(pl.Callback):
                 model = module.diffusion_ema.model if module.diffusion_ema is not None else module.diffusion.model
                 print(f"Generating demo for cfg scale {cfg_scale}")
 
-                with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+                with torch.cuda.amp.autocast():
                     if module.diffusion_objective == "v":
                         fakes = sample(model, noise, self.demo_steps, 0, **cond_inputs, cfg_scale=cfg_scale, dist_shift=module.diffusion.dist_shift, batch_cfg=True)
                     elif module.diffusion_objective == "rectified_flow":
@@ -1274,7 +1274,7 @@ class DiffusionAutoencoderTrainingWrapper(pl.LightningModule):
         noised_reals = reals * alphas + noise * sigmas
         targets = noise * alphas - reals * sigmas
 
-        with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        with torch.cuda.amp.autocast():
             v = self.diffae.diffusion(noised_reals, t, input_concat_cond=latents)
 
             loss_info.update({
@@ -1354,7 +1354,7 @@ class DiffusionAutoencoderDemoCallback(pl.Callback):
 
         demo_reals = demo_reals.to(module.device)
 
-        with torch.no_grad() and torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        with torch.no_grad() and torch.cuda.amp.autocast():
             latents = module.diffae_ema.ema_model.encode(encoder_input).float()
             fakes = module.diffae_ema.ema_model.decode(latents, steps=self.demo_steps)
 
@@ -1387,7 +1387,7 @@ class DiffusionAutoencoderDemoCallback(pl.Callback):
             audio_spectrogram_image(reals_fakes))
 
         if module.diffae_ema.ema_model.pretransform is not None:
-            with torch.no_grad() and torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+            with torch.no_grad() and torch.cuda.amp.autocast():
                 initial_latents = module.diffae_ema.ema_model.pretransform.encode(encoder_input)
                 first_stage_fakes = module.diffae_ema.ema_model.pretransform.decode(initial_latents)
                 first_stage_fakes = rearrange(first_stage_fakes, 'b d n -> d (b n)')
@@ -1546,7 +1546,7 @@ class DiffusionPriorTrainingWrapper(pl.LightningModule):
                     source = self.diffusion.pretransform.encode(source)
 
         if self.diffusion.conditioner is not None:
-            with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+            with torch.cuda.amp.autocast():
                 conditioning = self.diffusion.conditioner(metadata, self.device)
         else:
             conditioning = {}
@@ -1566,7 +1566,7 @@ class DiffusionPriorTrainingWrapper(pl.LightningModule):
         noised_reals = reals * alphas + noise * sigmas
         targets = noise * alphas - reals * sigmas
 
-        with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        with torch.cuda.amp.autocast():
 
             conditioning['source'] = [source]
 
@@ -1675,13 +1675,13 @@ class DiffusionPriorDemoCallback(pl.Callback):
         encoder_input = demo_reals
 
         if module.diffusion.conditioner is not None:
-            with torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+            with torch.cuda.amp.autocast():
                 conditioning_tensors = module.diffusion.conditioner(metadata, module.device)
 
         else:
             conditioning_tensors = {}
 
-        with torch.no_grad() and torch.amp.autocast('cuda' if torch.cuda.is_available() else 'cpu'):
+        with torch.no_grad() and torch.cuda.amp.autocast():
             if module.prior_type == PriorType.MonoToStereo and encoder_input.shape[1] > 1:
                 source = encoder_input.mean(dim=1, keepdim=True).repeat(1, encoder_input.shape[1], 1).to(module.device)
 

stable-audio-tools/train.py

@@ -145,7 +145,7 @@ def main():
 
     trainer = pl.Trainer(
         devices="auto",
-        accelerator="auto",
+        accelerator="gpu",
         num_nodes = args.num_nodes,
         strategy=strategy,
         precision=args.precision,