diff --git a/App.tsx b/App.tsx
index 789a970..461623a 100644
--- a/App.tsx
+++ b/App.tsx
@@ -20,6 +20,8 @@ import { List } from 'lucide-react';
 import { PlaylistDetail } from './components/PlaylistDetail';
 import { Toast, ToastType } from './components/Toast';
 import { SearchPage } from './components/SearchPage';
+import { TrainingPanel } from './components/TrainingPanel';
+import { NewsPage } from './components/NewsPage';
 import { ConfirmDialog } from './components/ConfirmDialog';
 
 
@@ -106,6 +108,7 @@ function AppContent() {
   const [reuseData, setReuseData] = useState<{ song: Song, timestamp: number } | null>(null);
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const selectedSongRef = useRef<Song | null>(null);
   const currentSongIdRef = useRef<string | null>(null);
   const pendingSeekRef = useRef<number | null>(null);
   const playNextRef = useRef<() => void>(() => {});
@@ -164,6 +167,9 @@ function AppContent() {
     }
   }, [token]);
 
+  // Keep selectedSongRef in sync for use in callbacks without stale closures
+  useEffect(() => { selectedSongRef.current = selectedSong; }, [selectedSong]);
+
   // Cleanup active jobs on unmount
   useEffect(() => {
     return () => {
@@ -280,6 +286,8 @@ function AppContent() {
         }
       } else if (path === '/search') {
         setCurrentView('search');
+      } else if (path === '/news') {
+        setCurrentView('news');
       }
     };
 
@@ -622,7 +630,8 @@ function AppContent() {
       });
 
       // If the current selection was a temp/generating song, replace it with newest real song
-      if (selectedSong?.isGenerating || (selectedSong && !loadedSongs.some(s => s.id === selectedSong.id))) {
+      const current = selectedSongRef.current;
+      if (current?.isGenerating || (current && !loadedSongs.some(s => s.id === current.id))) {
         setSelectedSong(loadedSongs[0] ?? null);
       }
     } catch (error) {
@@ -1040,7 +1049,7 @@ function AppContent() {
       if (songToAddToPlaylist) {
         await playlistsApi.addSong(res.playlist.id, songToAddToPlaylist.id, token);
         setSongToAddToPlaylist(null);
-        playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists));
+        playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists)).catch(() => {});
       }
       showToast(t('playlistCreated'));
     } catch (error) {
@@ -1060,7 +1069,7 @@ function AppContent() {
       await playlistsApi.addSong(playlistId, songToAddToPlaylist.id, token);
       setSongToAddToPlaylist(null);
       showToast(t('songAddedToPlaylist'));
-      playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists));
+      playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists)).catch(() => {});
     } catch (error) {
       console.error('Add song error:', error);
       showToast(t('failedToAddSong'), 'error');
@@ -1212,6 +1221,12 @@ function AppContent() {
           />
         );
 
+      case 'training':
+        return <TrainingPanel />;
+
+      case 'news':
+        return <NewsPage />;
+
       case 'create':
       default:
         return (
@@ -1311,6 +1326,8 @@ function AppContent() {
               window.history.pushState({}, '', '/library');
             } else if (v === 'search') {
               window.history.pushState({}, '', '/search');
+            } else if (v === 'news') {
+              window.history.pushState({}, '', '/news');
             }
             if (isMobile) setShowLeftSidebar(false);
           }}
diff --git a/components/CreatePanel.tsx b/components/CreatePanel.tsx
index c02b466..79be27e 100644
--- a/components/CreatePanel.tsx
+++ b/components/CreatePanel.tsx
@@ -4,7 +4,7 @@ import { GenerationParams, Song } from '../types';
 import { useAuth } from '../context/AuthContext';
 import { useI18n } from '../context/I18nContext';
 import { generateApi } from '../services/api';
-import { MAIN_STYLES, SUB_STYLES } from '../data/genres';
+import { MAIN_STYLES } from '../data/genres';
 import { EditableSlider } from './EditableSlider';
 
 interface ReferenceTrack {
@@ -48,7 +48,12 @@ const KEY_SIGNATURES = [
   'B major', 'B minor'
 ];
 
-const TIME_SIGNATURES = ['', '2/4', '3/4', '4/4', '6/8'];
+const TIME_SIGNATURES = ['', '2', '3', '4', '6', 'N/A'];
+
+const TRACK_NAMES = [
+  'woodwinds', 'brass', 'fx', 'synth', 'strings', 'percussion',
+  'keyboard', 'guitar', 'bass', 'drums', 'backing_vocals', 'vocals',
+];
 
 const VOCAL_LANGUAGE_KEYS = [
   { value: 'unknown', key: 'autoInstrumental' as const },
@@ -215,6 +220,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   const [showLoraPanel, setShowLoraPanel] = useState(false);
   const [loraPath, setLoraPath] = useState('./lora_output/final/adapter');
   const [loraLoaded, setLoraLoaded] = useState(false);
+  const [loraEnabled, setLoraEnabled] = useState(true);
   const [loraScale, setLoraScale] = useState(1.0);
   const [loraError, setLoraError] = useState<string | null>(null);
   const [isLoraLoading, setIsLoraLoading] = useState(false);
@@ -263,19 +269,6 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     return modelId.includes('turbo');
   };
 
-  // Genre selection state (cascading)
-  const [selectedMainGenre, setSelectedMainGenre] = useState<string>('');
-  const [selectedSubGenre, setSelectedSubGenre] = useState<string>('');
-
-  // Filter sub-genres based on selected main genre
-  const filteredSubGenres = useMemo(() => {
-    if (!selectedMainGenre) return [];
-    const mainLower = selectedMainGenre.toLowerCase().trim();
-    return SUB_STYLES.filter(style => 
-      style.toLowerCase().includes(mainLower)
-    );
-  }, [selectedMainGenre]);
-
   const [isUploadingReference, setIsUploadingReference] = useState(false);
   const [isUploadingSource, setIsUploadingSource] = useState(false);
   const [isTranscribingReference, setIsTranscribingReference] = useState(false);
@@ -427,7 +420,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
 
   const handleLoraScaleChange = async (newScale: number) => {
     setLoraScale(newScale);
-    
+
     if (!token || !loraLoaded) return;
 
     try {
@@ -437,6 +430,61 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     }
   };
 
+  const handleLoraEnabledToggle = async () => {
+    if (!token || !loraLoaded) return;
+    const newEnabled = !loraEnabled;
+    setLoraEnabled(newEnabled);
+    try {
+      await generateApi.toggleLora({ enabled: newEnabled }, token);
+    } catch (err) {
+      console.error('Failed to toggle LoRA:', err);
+      setLoraEnabled(!newEnabled); // revert on error
+    }
+  };
+
+  // Load generation parameters from JSON file
+  const handleLoadParamsFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      try {
+        const data = JSON.parse(ev.target?.result as string);
+        if (data.lyrics !== undefined) setLyrics(data.lyrics);
+        if (data.style !== undefined) setStyle(data.style);
+        if (data.title !== undefined) setTitle(data.title);
+        if (data.caption !== undefined) setStyle(data.caption);
+        if (data.instrumental !== undefined) setInstrumental(data.instrumental);
+        if (data.vocal_language !== undefined) setVocalLanguage(data.vocal_language);
+        if (data.bpm !== undefined) setBpm(data.bpm);
+        if (data.key_scale !== undefined) setKeyScale(data.key_scale);
+        if (data.time_signature !== undefined) setTimeSignature(data.time_signature);
+        if (data.duration !== undefined) setDuration(data.duration);
+        if (data.inference_steps !== undefined) setInferenceSteps(data.inference_steps);
+        if (data.guidance_scale !== undefined) setGuidanceScale(data.guidance_scale);
+        if (data.audio_format !== undefined) setAudioFormat(data.audio_format);
+        if (data.infer_method !== undefined) setInferMethod(data.infer_method);
+        if (data.seed !== undefined) { setSeed(data.seed); setRandomSeed(false); }
+        if (data.shift !== undefined) setShift(data.shift);
+        if (data.lm_temperature !== undefined) setLmTemperature(data.lm_temperature);
+        if (data.lm_cfg_scale !== undefined) setLmCfgScale(data.lm_cfg_scale);
+        if (data.lm_top_k !== undefined) setLmTopK(data.lm_top_k);
+        if (data.lm_top_p !== undefined) setLmTopP(data.lm_top_p);
+        if (data.lm_negative_prompt !== undefined) setLmNegativePrompt(data.lm_negative_prompt);
+        if (data.task_type !== undefined) setTaskType(data.task_type);
+        if (data.audio_codes !== undefined) setAudioCodes(data.audio_codes);
+        if (data.repainting_start !== undefined) setRepaintingStart(data.repainting_start);
+        if (data.repainting_end !== undefined) setRepaintingEnd(data.repainting_end);
+        if (data.instruction !== undefined) setInstruction(data.instruction);
+        if (data.audio_cover_strength !== undefined) setAudioCoverStrength(data.audio_cover_strength);
+      } catch {
+        console.error('Failed to parse parameters JSON');
+      }
+    };
+    reader.readAsText(file);
+    e.target.value = ''; // reset so same file can be reloaded
+  };
+
   // Reuse Effect - must be after all state declarations
   useEffect(() => {
     if (initialData) {
@@ -628,28 +676,6 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     setIsResizing(true);
   };
 
-  const uploadAudio = async (file: File, target: 'reference' | 'source') => {
-    if (!token) {
-      setUploadError('Please sign in to upload audio.');
-      return;
-    }
-    setUploadError(null);
-    const setUploading = target === 'reference' ? setIsUploadingReference : setIsUploadingSource;
-    const setUrl = target === 'reference' ? setReferenceAudioUrl : setSourceAudioUrl;
-    setUploading(true);
-    try {
-      const result = await generateApi.uploadAudio(file, token);
-      setUrl(result.url);
-      setShowAudioModal(false);
-      setTempAudioUrl('');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Upload failed';
-      setUploadError(message);
-    } finally {
-      setUploading(false);
-    }
-  };
-
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>, target: 'reference' | 'source') => {
     const file = e.target.files?.[0];
     if (file) {
@@ -1182,8 +1208,28 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           <div className="space-y-5">
             {/* Song Description */}
             <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden">
-              <div className="px-3 py-2.5 text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/5">
-                {t('describeYourSong')}
+              <div className="px-3 py-2.5 flex items-center justify-between border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/5">
+                <span className="text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
+                  {t('describeYourSong')}
+                </span>
+                <button
+                  type="button"
+                  onClick={async () => {
+                    if (!token) return;
+                    try {
+                      const result = await generateApi.getRandomDescription(token);
+                      setSongDescription(result.description);
+                      setInstrumental(result.instrumental);
+                      setVocalLanguage(result.vocalLanguage || 'unknown');
+                    } catch (err) {
+                      console.error('Failed to load random description:', err);
+                    }
+                  }}
+                  title="Load random description"
+                  className="p-1 rounded-md text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                >
+                  <Dices size={14} />
+                </button>
               </div>
               <textarea
                 value={songDescription}
@@ -1194,32 +1240,37 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             </div>
 
             {/* Vocal Language (Simple) */}
-            <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 overflow-hidden">
-              <div className="px-3 py-2.5 text-xs font-bold uppercase tracking-wide text-zinc-500 dark:text-zinc-400 border-b border-zinc-100 dark:border-white/5 bg-zinc-50 dark:bg-white/5">
-                {t('vocalLanguage')}
-              </div>
-              <div className="flex flex-wrap items-center gap-2 p-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide px-1">
+                  {t('vocalLanguage')}
+                </label>
                 <select
                   value={vocalLanguage}
                   onChange={(e) => setVocalLanguage(e.target.value)}
-                  className="flex-1 min-w-[180px] bg-transparent text-sm text-zinc-900 dark:text-white focus:outline-none"
+                  className="w-full bg-white dark:bg-suno-card border border-zinc-200 dark:border-white/5 rounded-xl px-3 py-2 text-sm text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
                 >
                   {VOCAL_LANGUAGE_KEYS.map(lang => (
-                    <option key={lang.value} value={lang.value}>{lang.key}</option>
+                    <option key={lang.value} value={lang.value}>{t(lang.key)}</option>
                   ))}
                 </select>
+              </div>
+              <div className="space-y-1.5">
+                <label className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide px-1">
+                  {t('vocalGender')}
+                </label>
                 <div className="flex items-center gap-2">
                   <button
                     type="button"
                     onClick={() => setVocalGender(vocalGender === 'male' ? '' : 'male')}
-                    className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors ${vocalGender === 'male' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
+                    className={`flex-1 px-3 py-2 rounded-lg text-xs font-semibold border transition-colors ${vocalGender === 'male' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
                   >
                     {t('male')}
                   </button>
                   <button
                     type="button"
                     onClick={() => setVocalGender(vocalGender === 'female' ? '' : 'female')}
-                    className={`px-3 py-1.5 rounded-full text-xs font-semibold border transition-colors ${vocalGender === 'female' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
+                    className={`flex-1 px-3 py-2 rounded-lg text-xs font-semibold border transition-colors ${vocalGender === 'female' ? 'bg-pink-600 text-white border-pink-600' : 'border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:border-zinc-300 dark:hover:border-white/20'}`}
                   >
                     {t('female')}
                   </button>
@@ -1239,7 +1290,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 label={t('duration')}
                 value={duration}
                 min={-1}
-                max={600}
+                max={activeMaxDuration}
                 step={5}
                 onChange={setDuration}
                 formatDisplay={(val) => val === -1 ? t('auto') : `${val}${t('seconds')}`}
@@ -1584,70 +1635,6 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 className="w-full h-20 bg-transparent p-3 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none resize-none"
               />
               <div className="px-3 pb-3 space-y-3">
-                {/* Cascading Genre Selector */}
-                <div className="space-y-2">
-                  {/* First Level: Main Genre */}
-                  <div className="flex gap-2">
-                    <select
-                      value={selectedMainGenre}
-                      onChange={(e) => {
-                        setSelectedMainGenre(e.target.value);
-                        setSelectedSubGenre(''); // Reset sub genre when main changes
-                        if (e.target.value) {
-                          setStyle(prev => prev ? `${prev}, ${e.target.value}` : e.target.value);
-                        }
-                      }}
-                      className="flex-1 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
-                    >
-                      <option value="">{t('mainGenre')}</option>
-                      {MAIN_STYLES.map(genre => (
-                        <option key={genre} value={genre}>{genre}</option>
-                      ))}
-                    </select>
-                    {selectedMainGenre && (
-                      <button
-                        onClick={() => {
-                          setSelectedMainGenre('');
-                          setSelectedSubGenre('');
-                        }}
-                        className="px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors"
-                        title={t('cancel')}
-                      >
-                        ✕
-                      </button>
-                    )}
-                  </div>
-                  
-                  {/* Second Level: Sub Genre (only show when main genre is selected) */}
-                  {selectedMainGenre && filteredSubGenres.length > 0 && (
-                    <div className="flex gap-2 pl-4 border-l-2 border-zinc-200 dark:border-white/10">
-                      <select
-                        value={selectedSubGenre}
-                        onChange={(e) => {
-                          setSelectedSubGenre(e.target.value);
-                          if (e.target.value) {
-                            setStyle(prev => prev ? `${prev}, ${e.target.value}` : e.target.value);
-                          }
-                        }}
-                        className="flex-1 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-xl px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none focus:border-pink-500 dark:focus:border-pink-500 transition-colors cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800 [&>option]:text-zinc-900 [&>option]:dark:text-white"
-                      >
-                        <option value="">{t('subGenre')} ({filteredSubGenres.length})</option>
-                        {filteredSubGenres.map(genre => (
-                          <option key={genre} value={genre}>{genre}</option>
-                        ))}
-                      </select>
-                      {selectedSubGenre && (
-                        <button
-                          onClick={() => setSelectedSubGenre('')}
-                          className="px-2 py-1.5 text-xs text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors"
-                          title={t('cancel')}
-                        >
-                          ✕
-                        </button>
-                      )}
-                    </div>
-                  )}
-                </div>
                 {/* Quick Tags */}
                 <div className="flex flex-wrap gap-2">
                   {musicTags.map(tag => (
@@ -1799,13 +1786,27 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   )}
                 </div>
 
+                {/* Use LoRA Checkbox (enable/disable without unloading) */}
+                <div className={`flex items-center justify-between py-2 border-t border-zinc-100 dark:border-white/5 ${!loraLoaded ? 'opacity-40 pointer-events-none' : ''}`}>
+                  <label className="flex items-center gap-2 text-xs font-medium text-zinc-600 dark:text-zinc-400 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={loraEnabled}
+                      onChange={handleLoraEnabledToggle}
+                      disabled={!loraLoaded}
+                      className="accent-pink-600"
+                    />
+                    Use LoRA
+                  </label>
+                </div>
+
                 {/* LoRA Scale Slider */}
-                <div className={!loraLoaded ? 'opacity-40 pointer-events-none' : ''}>
+                <div className={!loraLoaded || !loraEnabled ? 'opacity-40 pointer-events-none' : ''}>
                   <EditableSlider
                     label={t('loraScale')}
                     value={loraScale}
                     min={0}
-                    max={2}
+                    max={1}
                     step={0.05}
                     onChange={handleLoraScaleChange}
                     formatDisplay={(val) => val.toFixed(2)}
@@ -1881,6 +1882,17 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
 
         {showAdvanced && (
           <div className="bg-white dark:bg-suno-card rounded-xl border border-zinc-200 dark:border-white/5 p-4 space-y-4">
+            {/* Load Parameters from JSON */}
+            <label className="flex items-center gap-2 px-3 py-2 rounded-lg border border-dashed border-zinc-300 dark:border-white/15 text-xs font-medium text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-white/5 cursor-pointer transition-colors">
+              <Upload size={14} />
+              Load Parameters (JSON)
+              <input
+                type="file"
+                accept=".json"
+                onChange={handleLoadParamsFile}
+                className="hidden"
+              />
+            </label>
 
             {/* Duration */}
             <EditableSlider
@@ -1937,8 +1949,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
             <EditableSlider
               label={t('inferenceSteps')}
               value={inferenceSteps}
-              min={4}
-              max={32}
+              min={1}
+              max={isTurboModel(selectedModel) ? 20 : 200}
               step={1}
               onChange={setInferenceSteps}
               helpText={t('moreStepsBetterQuality')}
@@ -1951,7 +1963,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
               value={guidanceScale}
               min={1}
               max={15}
-              step={0.5}
+              step={0.1}
               onChange={setGuidanceScale}
               formatDisplay={(val) => val.toFixed(1)}
               helpText={t('howCloselyFollowPrompt')}
@@ -2098,8 +2110,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   value={lmTemperature}
                   min={0}
                   max={2}
-                  step={0.05}
-                  onChange={(e) => setLmTemperature(Number(e.target.value))}
+                  step={0.1}
+                  onChange={setLmTemperature}
                   formatDisplay={(val) => val.toFixed(2)}
                   helpText={t('higherMoreRandom')}
                   title="Higher temperature = more random word choices."
@@ -2167,6 +2179,33 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 placeholder={t('optionalAudioCodes')}
                 className="w-full h-16 bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg p-2 text-xs text-zinc-900 dark:text-white focus:outline-none resize-none"
               />
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={() => {
+                    // Convert source audio to LM codes — requires Gradio lambda (not exposed as API)
+                    // This is a placeholder: Gradio's convert_src_audio_to_codes_wrapper is not a named endpoint
+                    console.log('Convert to Codes: requires source audio upload. Use Gradio UI for this feature.');
+                  }}
+                  disabled={!sourceAudioUrl}
+                  title="Convert source audio to LM codes (requires source audio)"
+                  className="px-2 py-1 rounded text-[10px] font-medium bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                >
+                  Convert to Codes
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    // Transcribe audio codes to metadata — requires Gradio lambda (not exposed as API)
+                    console.log('Transcribe: requires audio codes. Use Gradio UI for this feature.');
+                  }}
+                  disabled={!audioCodes.trim()}
+                  title="Transcribe audio codes to metadata (requires audio codes)"
+                  className="px-2 py-1 rounded text-[10px] font-medium bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                >
+                  Transcribe
+                </button>
+              </div>
             </div>
 
             <div className="grid grid-cols-2 gap-3">
@@ -2187,7 +2226,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="How strongly the source audio shapes the result.">{t('audioCoverStrength')}</label>
                 <input
                   type="number"
-                  step="0.05"
+                  step="0.01"
                   min="0"
                   max="1"
                   value={audioCoverStrength}
@@ -2238,7 +2277,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fraction of the diffusion process to start applying guidance.">{t('cfgIntervalStart')}</label>
                 <input
                   type="number"
-                  step="0.05"
+                  step="0.01"
                   min="0"
                   max="1"
                   value={cfgIntervalStart}
@@ -2250,7 +2289,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Fraction of the diffusion process to stop applying guidance.">{t('cfgIntervalEnd')}</label>
                 <input
                   type="number"
-                  step="0.05"
+                  step="0.01"
                   min="0"
                   max="1"
                   value={cfgIntervalEnd}
@@ -2276,7 +2315,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400" title="Scales score-based guidance (advanced).">{t('scoreScale')}</label>
                 <input
                   type="number"
-                  step="0.05"
+                  step="0.01"
+                  min="0.01"
+                  max="1"
                   value={scoreScale}
                   onChange={(e) => setScoreScale(Number(e.target.value))}
                   className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
@@ -2287,6 +2328,8 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <input
                   type="number"
                   min="1"
+                  max="32"
+                  step="1"
                   value={lmBatchChunkSize}
                   onChange={(e) => setLmBatchChunkSize(Number(e.target.value))}
                   className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
@@ -2296,24 +2339,42 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
 
             <div className="space-y-1.5">
               <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('trackName')}</label>
-              <input
-                type="text"
+              <select
                 value={trackName}
                 onChange={(e) => setTrackName(e.target.value)}
-                placeholder={t('optionalTrackName')}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
-              />
+                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-2 py-1.5 text-xs text-zinc-900 dark:text-white focus:outline-none cursor-pointer [&>option]:bg-white [&>option]:dark:bg-zinc-800"
+              >
+                <option value="">None</option>
+                {TRACK_NAMES.map(name => (
+                  <option key={name} value={name}>{name}</option>
+                ))}
+              </select>
             </div>
 
             <div className="space-y-1.5">
               <label className="text-xs font-medium text-zinc-600 dark:text-zinc-400">{t('completeTrackClasses')}</label>
-              <input
-                type="text"
-                value={completeTrackClasses}
-                onChange={(e) => setCompleteTrackClasses(e.target.value)}
-                placeholder={t('trackClassesPlaceholder')}
-                className="w-full bg-zinc-50 dark:bg-black/20 border border-zinc-200 dark:border-white/10 rounded-lg px-3 py-2 text-xs text-zinc-900 dark:text-white focus:outline-none"
-              />
+              <div className="flex flex-wrap gap-2">
+                {TRACK_NAMES.map(name => {
+                  const selected = completeTrackClasses.split(',').map(s => s.trim()).filter(Boolean);
+                  const isChecked = selected.includes(name);
+                  return (
+                    <label key={name} className="flex items-center gap-1 text-[10px] font-medium text-zinc-500 dark:text-zinc-400 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        onChange={() => {
+                          const next = isChecked
+                            ? selected.filter(s => s !== name)
+                            : [...selected, name];
+                          setCompleteTrackClasses(next.join(','));
+                        }}
+                        className="accent-pink-600"
+                      />
+                      {name}
+                    </label>
+                  );
+                })}
+              </div>
             </div>
 
             <div className="grid grid-cols-2 gap-3">
diff --git a/components/NewsPage.tsx b/components/NewsPage.tsx
new file mode 100644
index 0000000..669bc27
--- /dev/null
+++ b/components/NewsPage.tsx
@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { Newspaper, X, Star, Github } from 'lucide-react';
+import { useI18n } from '../context/I18nContext';
+import newsData from '../data/news.json';
+
+interface NewsItem {
+  id: string;
+  date: string;
+  title: string;
+  body: string;
+  tags: string[];
+}
+
+export const NewsPage: React.FC = () => {
+  const { t } = useI18n();
+  const [dismissedNews, setDismissedNews] = useState<Set<string>>(() => {
+    try {
+      const stored = localStorage.getItem('ace-dismissed-news');
+      return stored ? new Set(JSON.parse(stored)) : new Set();
+    } catch {
+      return new Set();
+    }
+  });
+
+  const allNews = newsData as NewsItem[];
+  const activeNews = allNews.filter(n => !dismissedNews.has(n.id));
+  const dismissed = allNews.filter(n => dismissedNews.has(n.id));
+
+  const dismissNewsItem = (id: string) => {
+    setDismissedNews(prev => {
+      const next = new Set(prev);
+      next.add(id);
+      localStorage.setItem('ace-dismissed-news', JSON.stringify([...next]));
+      return next;
+    });
+  };
+
+  const restoreNewsItem = (id: string) => {
+    setDismissedNews(prev => {
+      const next = new Set(prev);
+      next.delete(id);
+      localStorage.setItem('ace-dismissed-news', JSON.stringify([...next]));
+      return next;
+    });
+  };
+
+  const tagColor = (tag: string) => {
+    switch (tag) {
+      case 'experimental':
+        return 'bg-amber-500/15 text-amber-600 dark:text-amber-400';
+      case 'backend':
+        return 'bg-blue-500/15 text-blue-600 dark:text-blue-400';
+      case 'training':
+        return 'bg-purple-500/15 text-purple-600 dark:text-purple-400';
+      case 'feature':
+        return 'bg-green-500/15 text-green-600 dark:text-green-400';
+      case 'bugfix':
+        return 'bg-red-500/15 text-red-600 dark:text-red-400';
+      default:
+        return 'bg-zinc-200 dark:bg-white/10 text-zinc-500 dark:text-zinc-400';
+    }
+  };
+
+  const renderCard = (item: NewsItem, isDismissed: boolean) => (
+    <div
+      key={item.id}
+      className={`
+        group rounded-2xl border transition-all duration-200
+        ${isDismissed
+          ? 'bg-zinc-100 dark:bg-white/[0.02] border-zinc-200 dark:border-white/5 opacity-50'
+          : 'bg-white dark:bg-suno-card border-zinc-200 dark:border-white/5 hover:border-zinc-300 dark:hover:border-white/10'
+        }
+      `}
+    >
+      <div className="p-5 sm:p-6">
+        {/* Header */}
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1 min-w-0">
+            <h3 className="text-base sm:text-lg font-semibold text-zinc-900 dark:text-zinc-100 leading-snug">
+              {item.title}
+            </h3>
+            <p className="text-xs text-zinc-400 dark:text-zinc-500 mt-1">{item.date}</p>
+          </div>
+          {!isDismissed ? (
+            <button
+              onClick={() => dismissNewsItem(item.id)}
+              className="opacity-0 group-hover:opacity-100 p-1.5 rounded-lg text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/10 transition-all flex-shrink-0"
+              title="Dismiss"
+            >
+              <X size={16} />
+            </button>
+          ) : (
+            <button
+              onClick={() => restoreNewsItem(item.id)}
+              className="text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:underline transition-colors flex-shrink-0"
+            >
+              Restore
+            </button>
+          )}
+        </div>
+
+        {/* Body */}
+        <p className="text-sm text-zinc-600 dark:text-zinc-400 mt-3 leading-relaxed">
+          {item.body}
+        </p>
+
+        {/* Tags */}
+        <div className="flex flex-wrap items-center gap-2 mt-4">
+          {item.tags.map(tag => (
+            <span
+              key={tag}
+              className={`text-[11px] font-medium px-2.5 py-1 rounded-full ${tagColor(tag)}`}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex-1 bg-white dark:bg-black overflow-y-auto p-6 lg:p-10 pb-32 transition-colors duration-300">
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-8">
+          <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center flex-shrink-0">
+            <Newspaper size={20} className="text-amber-600 dark:text-amber-400" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-zinc-900 dark:text-white">{t('news')}</h1>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400">Updates and announcements</p>
+          </div>
+        </div>
+
+        {/* Star Repo */}
+        <a
+          href="https://github.com/fspecii/ace-step-ui"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-3 mb-8 px-5 py-4 rounded-2xl border border-zinc-200 dark:border-white/5 bg-white dark:bg-suno-card hover:border-zinc-300 dark:hover:border-white/10 transition-all group"
+        >
+          <Github size={20} className="text-zinc-500 dark:text-zinc-400 flex-shrink-0" />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">fspecii/ace-step-ui</p>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">Star the repo to support the project</p>
+          </div>
+          <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-700 dark:text-zinc-300 text-sm font-medium group-hover:bg-amber-500/15 group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors flex-shrink-0">
+            <Star size={14} />
+            Star
+          </div>
+        </a>
+
+        {/* Active News */}
+        {activeNews.length > 0 ? (
+          <div className="space-y-4">
+            {activeNews.map(item => renderCard(item, false))}
+          </div>
+        ) : (
+          <div className="text-center py-16">
+            <Newspaper size={48} className="mx-auto text-zinc-300 dark:text-zinc-600 mb-4" />
+            <p className="text-zinc-500 dark:text-zinc-400 text-sm">No new updates</p>
+          </div>
+        )}
+
+        {/* Dismissed News */}
+        {dismissed.length > 0 && (
+          <div className="mt-10">
+            <h2 className="text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500 mb-4">
+              Dismissed
+            </h2>
+            <div className="space-y-3">
+              {dismissed.map(item => renderCard(item, true))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/components/PlaylistDetail.tsx b/components/PlaylistDetail.tsx
index 0fee0de..30c7ddf 100644
--- a/components/PlaylistDetail.tsx
+++ b/components/PlaylistDetail.tsx
@@ -40,7 +40,7 @@ export const PlaylistDetail: React.FC<PlaylistDetailProps> = ({ playlistId, onBa
                 duration: s.duration,
                 bpm: s.bpm,
                 tags: s.tags || [],
-                isPublic: s.is_public || false,
+                is_public: s.is_public || false,
                 likeCount: s.like_count || 0,
                 viewCount: s.view_count || 0,
                 creator: s.creator,
diff --git a/components/RightSidebar.tsx b/components/RightSidebar.tsx
index e64dd87..e4a5f79 100644
--- a/components/RightSidebar.tsx
+++ b/components/RightSidebar.tsx
@@ -489,7 +489,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ song, onClose, onOpe
                                     </span>
                                 ))
                             ) : (
-                                song.style.split(',').map((tag, idx) => (
+                                (song.style || '').split(',').filter(Boolean).map((tag, idx) => (
                                     <span key={idx} className="px-2 py-0.5 bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 border border-zinc-200 dark:border-white/10 rounded text-[11px] font-medium text-zinc-600 dark:text-zinc-300 transition-colors">
                                         {tag.trim()}
                                     </span>
diff --git a/components/SearchPage.tsx b/components/SearchPage.tsx
index 65f07ac..e52d31f 100644
--- a/components/SearchPage.tsx
+++ b/components/SearchPage.tsx
@@ -103,7 +103,6 @@ export const SearchPage: React.FC<SearchPageProps> = ({
             uniqueCreators.set(song.creator, {
               id: song.user_id || song.userId || song.creator,
               username: song.creator,
-              email: '',
               created_at: song.created_at || song.createdAt,
               avatar_url: song.creator_avatar || song.creatorAvatar || null,
             });
diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index e884e1d..ab0a26d 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { X, User as UserIcon, Palette, Info, Edit3, ExternalLink, Globe, ChevronDown, Github } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { useI18n } from '../context/I18nContext';
@@ -16,6 +16,19 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
     const { user } = useAuth();
     const { t, language, setLanguage } = useI18n();
     const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
+    const [showLangInfo, setShowLangInfo] = useState(false);
+    const langInfoRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!showLangInfo) return;
+        const handleClick = (e: MouseEvent) => {
+            if (langInfoRef.current && !langInfoRef.current.contains(e.target as Node)) {
+                setShowLangInfo(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [showLangInfo]);
 
     if (!isOpen || !user) {
         if (isEditProfileOpen && user) {
@@ -108,6 +121,43 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                         <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
                             <Globe size={20} />
                             <h3 className="font-semibold">{t('language')}</h3>
+                            <div className="relative" ref={langInfoRef}>
+                                <button
+                                    onClick={() => setShowLangInfo(!showLangInfo)}
+                                    className="p-1 rounded-full text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors"
+                                >
+                                    <Info size={14} />
+                                </button>
+                                {showLangInfo && (
+                                    <div className="absolute left-0 top-8 z-10 w-64 bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl shadow-xl p-3">
+                                        <p className="text-xs text-zinc-500 dark:text-zinc-400 mb-2">{t('localizedBy')}</p>
+                                        <div className="flex flex-wrap gap-1.5">
+                                            <a
+                                                href="https://x.com/bdsqlsz"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-black dark:bg-white text-white dark:text-black rounded-lg text-xs font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
+                                            >
+                                                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
+                                                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                                                </svg>
+                                                @bdsqlsz
+                                            </a>
+                                            <a
+                                                href="https://space.bilibili.com/219296"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 bg-[#00A1D6] text-white rounded-lg text-xs font-medium hover:bg-[#0090C0] transition-colors"
+                                            >
+                                                <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">
+                                                    <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/>
+                                                </svg>
+                                                青龙圣者
+                                            </a>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
                         </div>
                         <div className="pl-7 space-y-3">
                             <div className="relative">
@@ -200,33 +250,6 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                                         Report issues or request features on GitHub
                                     </p>
                                 </div>
-                                <div>
-                                    <p className="text-zinc-900 dark:text-white font-medium mb-2">{t('localizedBy')}</p>
-                                    <div className="flex flex-wrap gap-2">
-                                        <a
-                                            href="https://x.com/bdsqlsz"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="inline-flex items-center gap-2 px-4 py-2 bg-black dark:bg-white text-white dark:text-black rounded-lg text-sm font-medium hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors"
-                                        >
-                                            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
-                                            </svg>
-                                            {t('follow')} @bdsqlsz
-                                        </a>
-                                        <a
-                                            href="https://space.bilibili.com/219296"
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            className="inline-flex items-center gap-2 px-4 py-2 bg-[#00A1D6] text-white rounded-lg text-sm font-medium hover:bg-[#0090C0] transition-colors"
-                                        >
-                                            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-                                                <path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/>
-                                            </svg>
-                                            {t('follow')} 青龙圣者
-                                        </a>
-                                    </div>
-                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 3e90a79..f719ade 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Library, Disc, Search, User, LogIn, LogOut, Sun, Moon } from 'lucide-react';
+import { Library, Disc, Search, LogIn, LogOut, Sun, Moon, GraduationCap, Newspaper } from 'lucide-react';
 import { View } from '../types';
 import { useI18n } from '../context/I18nContext';
 
@@ -104,6 +104,21 @@ export const Sidebar: React.FC<SidebarProps> = ({
           onClick={() => onNavigate('search')}
           isExpanded={isOpen}
         />
+        <NavItem
+          icon={<GraduationCap size={20} />}
+          label={t('training')}
+          active={currentView === 'training'}
+          onClick={() => onNavigate('training')}
+          isExpanded={isOpen}
+        />
+        <NavItem
+          icon={<Newspaper size={20} />}
+          label={t('news')}
+          active={currentView === 'news'}
+          onClick={() => onNavigate('news')}
+          isExpanded={isOpen}
+        />
+
         <div className="mt-auto flex flex-col gap-2">
           {/* Theme Toggle */}
           <button
diff --git a/components/TrainingPanel.tsx b/components/TrainingPanel.tsx
new file mode 100644
index 0000000..362d096
--- /dev/null
+++ b/components/TrainingPanel.tsx
@@ -0,0 +1,1171 @@
+import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import {
+  Database, Play, Square, Download, FolderOpen, Save, Loader2, Music2,
+  Edit3, Upload, X, Volume2, FileAudio, ChevronRight, Zap, Search,
+  Cpu, Wand2, Settings, RefreshCw,
+} from 'lucide-react';
+import { useAuth } from '../context/AuthContext';
+import { useI18n } from '../context/I18nContext';
+import { trainingApi, getTrainingAudioUrl, TrainingSample, DatasetSettings } from '../services/api';
+
+type TrainingTab = 'dataset' | 'train' | 'export';
+
+interface DataframeRow {
+  [key: string]: unknown;
+}
+
+const LANGUAGES = [
+  { value: 'instrumental', label: 'Instrumental' },
+  { value: 'en', label: 'English' },
+  { value: 'zh', label: 'Chinese' },
+  { value: 'ja', label: 'Japanese' },
+  { value: 'ko', label: 'Korean' },
+  { value: 'es', label: 'Spanish' },
+  { value: 'fr', label: 'French' },
+  { value: 'de', label: 'German' },
+  { value: 'pt', label: 'Portuguese' },
+  { value: 'ru', label: 'Russian' },
+  { value: 'unknown', label: 'Unknown' },
+];
+
+const TIME_SIGS = ['', '2', '3', '4', '6', 'N/A'];
+
+const DEVICES = ['auto', 'cuda', 'mps', 'xpu', 'cpu'];
+const BACKENDS = ['pt', 'vllm', 'mlx'];
+
+// Pipeline step definitions
+const PIPELINE_STEPS = [
+  { key: 'upload', label: 'Upload', icon: Upload },
+  { key: 'edit', label: 'Edit', icon: Edit3 },
+  { key: 'save', label: 'Save', icon: Save },
+  { key: 'preprocess', label: 'Preprocess', icon: Zap },
+  { key: 'train', label: 'Train', icon: Play },
+  { key: 'export', label: 'Export', icon: Download },
+] as const;
+
+type PipelineStepKey = typeof PIPELINE_STEPS[number]['key'];
+
+export const TrainingPanel: React.FC = () => {
+  const { token } = useAuth();
+  const { t } = useI18n();
+
+  const [activeTab, setActiveTab] = useState<TrainingTab>('dataset');
+
+  // Pipeline completion tracking
+  const [completedSteps, setCompletedSteps] = useState<Set<PipelineStepKey>>(new Set());
+
+  // Model / Service config state
+  const [showModelConfig, setShowModelConfig] = useState(false);
+  const [modelCheckpoints, setModelCheckpoints] = useState<string[]>([]);
+  const [modelConfigs, setModelConfigs] = useState<string[]>([]);
+  const [selectedCheckpoint, setSelectedCheckpoint] = useState('');
+  const [selectedConfig, setSelectedConfig] = useState('');
+  const [selectedDevice, setSelectedDevice] = useState('auto');
+  const [selectedBackend, setSelectedBackend] = useState('pt');
+  const [initLlm, setInitLlm] = useState(false);
+  const [lmModelPath, setLmModelPath] = useState('');
+  const [useFlashAttention, setUseFlashAttention] = useState(false);
+  const [offloadToCpu, setOffloadToCpu] = useState(false);
+  const [offloadDitToCpu, setOffloadDitToCpu] = useState(false);
+  const [compileModel, setCompileModel] = useState(false);
+  const [quantization, setQuantization] = useState(false);
+  const [modelInitStatus, setModelInitStatus] = useState('');
+  const [modelInitializing, setModelInitializing] = useState(false);
+
+  // Upload state
+  const [queuedFiles, setQueuedFiles] = useState<File[]>([]);
+  const [uploadDatasetName, setUploadDatasetName] = useState('my_lora_dataset');
+  const [uploading, setUploading] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState('');
+  const [isDragOver, setIsDragOver] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Scan directory state
+  const [scanDir, setScanDir] = useState('');
+  const [scanning, setScanning] = useState(false);
+  const [scanStatus, setScanStatus] = useState('');
+
+  // Dataset state
+  const [datasetPath, setDatasetPath] = useState('./datasets/my_lora_dataset.json');
+  const [datasetLoaded, setDatasetLoaded] = useState(false);
+  const [datasetLoading, setDatasetLoading] = useState(false);
+  const [sampleCount, setSampleCount] = useState(0);
+  const [currentSampleIdx, setCurrentSampleIdx] = useState(0);
+  const [currentSample, setCurrentSample] = useState<TrainingSample | null>(null);
+  const [datasetSettings, setDatasetSettings] = useState<DatasetSettings>({
+    datasetName: 'my_lora_dataset',
+    customTag: '',
+    tagPosition: 'replace',
+    allInstrumental: true,
+    genreRatio: 0,
+  });
+  const [datasetStatus, setDatasetStatus] = useState('');
+
+  // Dataset table state
+  const [dataframeHeaders, setDataframeHeaders] = useState<string[]>([]);
+  const [dataframeRows, setDataframeRows] = useState<DataframeRow[]>([]);
+
+  // Auto-label state
+  const [autoLabeling, setAutoLabeling] = useState(false);
+  const [autoLabelStatus, setAutoLabelStatus] = useState('');
+  const [skipMetas, setSkipMetas] = useState(false);
+  const [formatLyrics, setFormatLyrics] = useState(false);
+  const [transcribeLyrics, setTranscribeLyrics] = useState(false);
+  const [onlyUnlabeled, setOnlyUnlabeled] = useState(false);
+
+  // Editing sample state
+  const [editCaption, setEditCaption] = useState('');
+  const [editGenre, setEditGenre] = useState('');
+  const [editPromptOverride, setEditPromptOverride] = useState('Use Global Ratio');
+  const [editLyrics, setEditLyrics] = useState('');
+  const [editBpm, setEditBpm] = useState(120);
+  const [editKey, setEditKey] = useState('');
+  const [editTimeSig, setEditTimeSig] = useState('');
+  const [editDuration, setEditDuration] = useState(0);
+  const [editLanguage, setEditLanguage] = useState('instrumental');
+  const [editInstrumental, setEditInstrumental] = useState(true);
+  const [editRawLyrics, setEditRawLyrics] = useState('');
+
+  // Dataset save state
+  const [savePath, setSavePath] = useState('./datasets/my_lora_dataset.json');
+  const [saveStatus, setSaveStatus] = useState('');
+  const [editSaveStatus, setEditSaveStatus] = useState('');
+
+  // Preprocess state — has its own load-existing-dataset sub-section (matches Gradio)
+  const [preprocessDatasetPath, setPreprocessDatasetPath] = useState('./datasets/my_lora_dataset.json');
+  const [preprocessDatasetLoading, setPreprocessDatasetLoading] = useState(false);
+  const [preprocessDatasetStatus, setPreprocessDatasetStatus] = useState('');
+  const [preprocessOutputDir, setPreprocessOutputDir] = useState('./datasets/preprocessed_tensors');
+  const [preprocessing, setPreprocessing] = useState(false);
+  const [preprocessStatus, setPreprocessStatus] = useState('');
+
+  // Training state
+  const [trainingParams, setTrainingParams] = useState({
+    tensorDir: './datasets/preprocessed_tensors',
+    rank: 64,
+    alpha: 128,
+    dropout: 0.1,
+    learningRate: 0.0003,
+    epochs: 1000,
+    batchSize: 1,
+    gradientAccumulation: 1,
+    saveEvery: 200,
+    shift: 3.0,
+    seed: 42,
+    outputDir: './lora_output',
+    resumeCheckpoint: '' as string,
+  });
+  const [isTraining, setIsTraining] = useState(false);
+  const [trainingProgress, setTrainingProgress] = useState('');
+  const [trainingLog, setTrainingLog] = useState('');
+  const [trainingMetrics, setTrainingMetrics] = useState<unknown>(null);
+  const [trainingDatasetInfo, setTrainingDatasetInfo] = useState('');
+
+  // Export state
+  const [exportPath, setExportPath] = useState('./lora_output/final_lora');
+  const [exportOutputDir, setExportOutputDir] = useState('./lora_output');
+  const [exportStatus, setExportStatus] = useState('');
+
+  // Loading states
+  const [saving, setSaving] = useState(false);
+  const [exporting, setExporting] = useState(false);
+
+  // Audio preview URL
+  const audioPreviewUrl = useMemo(() => {
+    if (!currentSample?.audio) return undefined;
+    return getTrainingAudioUrl(currentSample.audio);
+  }, [currentSample?.audio]);
+
+  const markStep = useCallback((step: PipelineStepKey) => {
+    setCompletedSteps(prev => new Set([...prev, step]));
+  }, []);
+
+  const populateSampleFields = (sample: TrainingSample) => {
+    setEditCaption(sample.caption || '');
+    setEditGenre(sample.genre || '');
+    setEditPromptOverride(sample.promptOverride || 'Use Global Ratio');
+    setEditLyrics(sample.lyrics || '');
+    setEditBpm(sample.bpm || 120);
+    setEditKey(sample.key || '');
+    setEditTimeSig(sample.timeSignature || '');
+    setEditDuration(sample.duration || 0);
+    setEditLanguage(sample.language || 'instrumental');
+    setEditInstrumental(sample.instrumental ?? true);
+    setEditRawLyrics(sample.rawLyrics || '');
+  };
+
+  // Parse dataframe from Gradio response
+  const parseDataframe = (df: unknown) => {
+    if (!df || typeof df !== 'object') return;
+    const dfObj = df as { headers?: string[]; data?: unknown[][] };
+    if (dfObj.headers && Array.isArray(dfObj.data)) {
+      setDataframeHeaders(dfObj.headers);
+      setDataframeRows(dfObj.data.map(row => {
+        const obj: DataframeRow = {};
+        dfObj.headers!.forEach((h, i) => { obj[h] = row[i]; });
+        return obj;
+      }));
+    }
+  };
+
+  // Load checkpoints on mount
+  useEffect(() => {
+    if (!token) return;
+    trainingApi.getCheckpoints(token).then(result => {
+      setModelCheckpoints(result.checkpoints);
+      setModelConfigs(result.configs);
+      if (result.checkpoints.length > 0 && !selectedCheckpoint) {
+        setSelectedCheckpoint(result.checkpoints[0]);
+      }
+      if (result.configs.length > 0 && !selectedConfig) {
+        setSelectedConfig(result.configs[0]);
+      }
+    }).catch(() => { /* ignore */ });
+  }, [token]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // === Model init ===
+  const handleRefreshCheckpoints = useCallback(async () => {
+    if (!token) return;
+    try {
+      const result = await trainingApi.getCheckpoints(token);
+      setModelCheckpoints(result.checkpoints);
+      setModelConfigs(result.configs);
+    } catch { /* ignore */ }
+  }, [token]);
+
+  const handleInitModel = useCallback(async () => {
+    if (!token) return;
+    setModelInitializing(true);
+    setModelInitStatus('Initializing model...');
+    try {
+      const result = await trainingApi.initModel({
+        checkpoint: selectedCheckpoint,
+        configPath: selectedConfig,
+        device: selectedDevice,
+        initLlm,
+        lmModelPath,
+        backend: selectedBackend,
+        useFlashAttention,
+        offloadToCpu,
+        offloadDitToCpu,
+        compileModel,
+        quantization,
+      }, token);
+      setModelInitStatus(result.status || result.error || '');
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : 'Failed';
+      setModelInitStatus(msg.includes('501') ? 'Use Gradio UI to initialize model' : msg);
+    } finally {
+      setModelInitializing(false);
+    }
+  }, [token, selectedCheckpoint, selectedConfig, selectedDevice, initLlm, lmModelPath, selectedBackend, useFlashAttention, offloadToCpu, offloadDitToCpu, compileModel, quantization]);
+
+  // === Drop zone handlers ===
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    const files = Array.from(e.dataTransfer.files).filter((f: File) => {
+      const ext = f.name.toLowerCase().split('.').pop();
+      return ['wav', 'mp3', 'flac', 'ogg', 'opus'].includes(ext || '');
+    });
+    if (files.length > 0) {
+      setQueuedFiles(prev => [...prev, ...files]);
+    }
+  }, []);
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setQueuedFiles(prev => [...prev, ...Array.from(e.target.files!)]);
+    }
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  }, []);
+
+  const removeQueuedFile = useCallback((idx: number) => {
+    setQueuedFiles(prev => prev.filter((_, i) => i !== idx));
+  }, []);
+
+  // === Upload + Build Dataset ===
+  const handleUploadAndBuild = useCallback(async () => {
+    if (!token || queuedFiles.length === 0) return;
+    setUploading(true);
+    setUploadStatus('Uploading files...');
+    try {
+      await trainingApi.uploadAudio(queuedFiles, uploadDatasetName, token);
+      setUploadStatus(`Uploaded ${queuedFiles.length} files. Building dataset...`);
+      const result = await trainingApi.buildDataset({
+        datasetName: uploadDatasetName,
+        customTag: datasetSettings.customTag,
+        tagPosition: datasetSettings.tagPosition,
+        allInstrumental: datasetSettings.allInstrumental,
+      }, token);
+      setDatasetLoaded(true);
+      setSampleCount(result.sampleCount);
+      setCurrentSampleIdx(0);
+      if (result.sample) {
+        setCurrentSample(result.sample);
+        populateSampleFields(result.sample);
+      }
+      if (result.settings) setDatasetSettings(result.settings);
+      if (result.dataframe) parseDataframe(result.dataframe);
+      const dp = result.datasetPath || `./datasets/${uploadDatasetName}.json`;
+      setDatasetPath(dp);
+      setSavePath(dp);
+      setDatasetStatus(result.status as string);
+      setQueuedFiles([]);
+      markStep('upload');
+      setUploadStatus('');
+    } catch (error) {
+      setUploadStatus(`Error: ${error instanceof Error ? error.message : 'Upload failed'}`);
+    } finally {
+      setUploading(false);
+    }
+  }, [token, queuedFiles, uploadDatasetName, datasetSettings, markStep]);
+
+  // === Scan directory ===
+  const handleScanDirectory = useCallback(async () => {
+    if (!token || !scanDir) return;
+    setScanning(true);
+    setScanStatus('Scanning...');
+    try {
+      const result = await trainingApi.scanDirectory({
+        audioDir: scanDir,
+        datasetName: datasetSettings.datasetName,
+        customTag: datasetSettings.customTag,
+        tagPosition: datasetSettings.tagPosition,
+        allInstrumental: datasetSettings.allInstrumental,
+      }, token);
+      setScanStatus(result.status);
+      setSampleCount(result.sampleCount);
+      if (result.dataframe) parseDataframe(result.dataframe);
+    } catch (error) {
+      setScanStatus(`Error: ${error instanceof Error ? error.message : 'Scan failed'}`);
+    } finally {
+      setScanning(false);
+    }
+  }, [token, scanDir, datasetSettings]);
+
+  // === Load existing dataset ===
+  const handleLoadDataset = useCallback(async () => {
+    if (!token || !datasetPath) return;
+    setDatasetLoading(true);
+    setDatasetStatus(t('loadingDataset'));
+    try {
+      const result = await trainingApi.loadDataset(datasetPath, token);
+      setDatasetLoaded(true);
+      setSampleCount(result.sampleCount);
+      setCurrentSampleIdx(0);
+      setCurrentSample(result.sample);
+      populateSampleFields(result.sample);
+      setDatasetSettings(result.settings);
+      parseDataframe(result.dataframe);
+      setDatasetStatus(result.status as string);
+      setSavePath(datasetPath);
+      markStep('upload');
+    } catch (error) {
+      setDatasetStatus(`${t('error')}: ${error instanceof Error ? error.message : 'Failed'}`);
+    } finally {
+      setDatasetLoading(false);
+    }
+  }, [token, datasetPath, t, markStep]);
+
+  // === Auto-label ===
+  const handleAutoLabel = useCallback(async () => {
+    if (!token) return;
+    setAutoLabeling(true);
+    setAutoLabelStatus(t('autoLabeling'));
+    try {
+      const result = await trainingApi.autoLabel({
+        skipMetas,
+        formatLyrics,
+        transcribeLyrics,
+        onlyUnlabeled,
+      }, token);
+      if (result.dataframe) parseDataframe(result.dataframe);
+      setAutoLabelStatus(result.status || result.hint || '');
+      // Refresh current sample
+      if (token && sampleCount > 0) {
+        const sample = await trainingApi.getSamplePreview(currentSampleIdx, token);
+        setCurrentSample(sample);
+        populateSampleFields(sample);
+      }
+    } catch (error) {
+      const msg = error instanceof Error ? error.message : 'Failed';
+      setAutoLabelStatus(msg.includes('501') ? 'Auto-label requires model loaded in Gradio UI' : msg);
+    } finally {
+      setAutoLabeling(false);
+    }
+  }, [token, skipMetas, formatLyrics, transcribeLyrics, onlyUnlabeled, sampleCount, currentSampleIdx, t]);
+
+  // === Sample navigation ===
+  const handleSampleNavigate = useCallback(async (idx: number) => {
+    if (!token || idx < 0 || idx >= sampleCount) return;
+    setCurrentSampleIdx(idx);
+    try {
+      const sample = await trainingApi.getSamplePreview(idx, token);
+      setCurrentSample(sample);
+      populateSampleFields(sample);
+    } catch (error) {
+      console.error('Failed to load sample:', error);
+    }
+  }, [token, sampleCount]);
+
+  // === Save sample ===
+  const handleSaveSample = useCallback(async () => {
+    if (!token) return;
+    setSaving(true);
+    try {
+      const result = await trainingApi.saveSample({
+        sampleIdx: currentSampleIdx,
+        caption: editCaption,
+        genre: editGenre,
+        promptOverride: editPromptOverride,
+        lyrics: editLyrics,
+        bpm: editBpm,
+        key: editKey,
+        timeSignature: editTimeSig,
+        language: editLanguage,
+        instrumental: editInstrumental,
+      }, token);
+      if (result.dataframe) parseDataframe(result.dataframe);
+      setEditSaveStatus(result.status as string);
+      markStep('edit');
+    } catch (error) {
+      setEditSaveStatus(`${t('error')}: ${error instanceof Error ? error.message : 'Failed'}`);
+    } finally {
+      setSaving(false);
+    }
+  }, [token, currentSampleIdx, editCaption, editGenre, editPromptOverride, editLyrics, editBpm, editKey, editTimeSig, editLanguage, editInstrumental, t, markStep]);
+
+  // === Update settings ===
+  const handleUpdateSettings = useCallback(async () => {
+    if (!token) return;
+    try {
+      await trainingApi.updateSettings({
+        customTag: datasetSettings.customTag,
+        tagPosition: datasetSettings.tagPosition,
+        allInstrumental: datasetSettings.allInstrumental,
+        genreRatio: datasetSettings.genreRatio,
+      }, token);
+      setDatasetStatus('Settings updated');
+    } catch (error) {
+      setDatasetStatus(`${t('error')}: ${error instanceof Error ? error.message : 'Failed'}`);
+    }
+  }, [token, datasetSettings, t]);
+
+  // === Save dataset ===
+  const handleSaveDataset = useCallback(async () => {
+    if (!token) return;
+    setSaving(true);
+    setSaveStatus(t('savingDataset'));
+    try {
+      const result = await trainingApi.saveDataset({
+        savePath: savePath || `./datasets/${datasetSettings.datasetName}.json`,
+        datasetName: datasetSettings.datasetName,
+      }, token);
+      setSaveStatus(result.status as string);
+      if (result.path) setSavePath(result.path);
+      markStep('save');
+    } catch (error) {
+      setSaveStatus(`${t('error')}: ${error instanceof Error ? error.message : 'Failed'}`);
+    } finally {
+      setSaving(false);
+    }
+  }, [token, savePath, datasetSettings.datasetName, t, markStep]);
+
+  // === Load existing dataset for preprocessing (matches Gradio's load_existing_dataset_for_preprocess) ===
+  const handleLoadDatasetForPreprocess = useCallback(async () => {
+    if (!token) return;
+    setPreprocessDatasetLoading(true);
+    setPreprocessDatasetStatus('Loading dataset for preprocessing...');
+    try {
+      const result = await trainingApi.loadDataset(preprocessDatasetPath, token);
+      setPreprocessDatasetStatus(result.status || `Loaded ${result.sampleCount} samples`);
+      if (result.sampleCount) setSampleCount(result.sampleCount);
+      if (result.dataframe) parseDataframe(result.dataframe);
+    } catch (error) {
+      setPreprocessDatasetStatus(`Error: ${error instanceof Error ? error.message : 'Failed to load'}`);
+    } finally {
+      setPreprocessDatasetLoading(false);
+    }
+  }, [token, preprocessDatasetPath]);
+
+  // === Preprocess ===
+  const handlePreprocess = useCallback(async () => {
+    if (!token) return;
+    setPreprocessing(true);
+    setPreprocessStatus('Preprocessing...');
+    try {
+      const result = await trainingApi.preprocess({
+        datasetPath: preprocessDatasetPath || savePath || datasetPath,
+        outputDir: preprocessOutputDir,
+      }, token);
+      setPreprocessStatus(result.message || result.status);
+      markStep('preprocess');
+    } catch (error) {
+      setPreprocessStatus(`Error: ${error instanceof Error ? error.message : 'Preprocessing failed'}`);
+    } finally {
+      setPreprocessing(false);
+    }
+  }, [token, preprocessDatasetPath, savePath, datasetPath, preprocessOutputDir, markStep]);
+
+  // === Load tensors ===
+  const handleLoadTensors = useCallback(async () => {
+    if (!token) return;
+    try {
+      const result = await trainingApi.loadTensors(trainingParams.tensorDir, token);
+      setTrainingDatasetInfo(result.status);
+    } catch (error) {
+      setTrainingDatasetInfo(`Error: ${error instanceof Error ? error.message : 'Failed'}`);
+    }
+  }, [token, trainingParams.tensorDir]);
+
+  // === Training ===
+  const handleStartTraining = useCallback(async () => {
+    if (!token) return;
+    setIsTraining(true);
+    setTrainingProgress(t('startingTraining'));
+    setTrainingLog('');
+    setTrainingMetrics(null);
+    try {
+      const result = await trainingApi.startTraining({
+        ...trainingParams,
+        resumeCheckpoint: trainingParams.resumeCheckpoint || null,
+      }, token);
+      setTrainingProgress(result.progress as string);
+      setTrainingLog(result.log as string);
+      setTrainingMetrics(result.metrics);
+      markStep('train');
+    } catch (error) {
+      setTrainingProgress(`${t('error')}: ${error instanceof Error ? error.message : 'Failed'}`);
+    } finally {
+      setIsTraining(false);
+    }
+  }, [token, trainingParams, t, markStep]);
+
+  const handleStopTraining = useCallback(async () => {
+    if (!token) return;
+    try {
+      const result = await trainingApi.stopTraining(token);
+      setTrainingProgress(result.status as string);
+      setIsTraining(false);
+    } catch (error) {
+      console.error('Failed to stop training:', error);
+    }
+  }, [token]);
+
+  // === Export ===
+  const handleExportLora = useCallback(async () => {
+    if (!token) return;
+    setExporting(true);
+    setExportStatus('Exporting...');
+    try {
+      const result = await trainingApi.exportLora({
+        exportPath,
+        loraOutputDir: exportOutputDir,
+      }, token);
+      setExportStatus(result.status as string);
+      markStep('export');
+    } catch (error) {
+      setExportStatus(`${t('error')}: ${error instanceof Error ? error.message : 'Failed'}`);
+    } finally {
+      setExporting(false);
+    }
+  }, [token, exportPath, exportOutputDir, t, markStep]);
+
+  // === Loss chart ===
+  const lossChartSvg = useMemo(() => {
+    if (!trainingMetrics) return null;
+    let points: { step: number; loss: number }[] = [];
+    const m = trainingMetrics as any;
+    if (m?.data && Array.isArray(m.data)) {
+      points = m.data.map((row: unknown[]) => ({ step: Number(row[0]) || 0, loss: Number(row[1]) || 0 })).filter((p: { loss: number }) => p.loss > 0);
+    } else if (Array.isArray(m)) {
+      points = m.map((item: any, i: number) => ({ step: item.step ?? item.x ?? i, loss: item.loss ?? item.y ?? 0 })).filter((p: { loss: number }) => p.loss > 0);
+    }
+    if (points.length < 2) return null;
+    const width = 280, height = 100, pad = 4;
+    const minStep = Math.min(...points.map(p => p.step));
+    const maxStep = Math.max(...points.map(p => p.step));
+    const minLoss = Math.min(...points.map(p => p.loss));
+    const maxLoss = Math.max(...points.map(p => p.loss));
+    const rangeStep = maxStep - minStep || 1;
+    const rangeLoss = maxLoss - minLoss || 1;
+    const polyPoints = points.map(p => {
+      const x = pad + ((p.step - minStep) / rangeStep) * (width - 2 * pad);
+      const y = pad + (1 - (p.loss - minLoss) / rangeLoss) * (height - 2 * pad);
+      return `${x},${y}`;
+    }).join(' ');
+    return (
+      <svg width={width} height={height} className="w-full" viewBox={`0 0 ${width} ${height}`}>
+        <polyline points={polyPoints} fill="none" stroke="rgb(236 72 153)" strokeWidth="1.5" strokeLinejoin="round" />
+        <text x={pad} y={height - 2} fontSize="8" fill="rgb(113 113 122)" fontFamily="monospace">{minStep}</text>
+        <text x={width - pad} y={height - 2} fontSize="8" fill="rgb(113 113 122)" fontFamily="monospace" textAnchor="end">{maxStep}</text>
+        <text x={pad} y={10} fontSize="8" fill="rgb(113 113 122)" fontFamily="monospace">{minLoss.toFixed(4)}</text>
+      </svg>
+    );
+  }, [trainingMetrics]);
+
+  // Mutual exclusion: formatLyrics / transcribeLyrics
+  useEffect(() => {
+    if (formatLyrics && transcribeLyrics) setTranscribeLyrics(false);
+  }, [formatLyrics]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (transcribeLyrics && formatLyrics) setFormatLyrics(false);
+  }, [transcribeLyrics]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const tabs: { id: TrainingTab; label: string; icon: React.ReactNode }[] = [
+    { id: 'dataset', label: t('datasetBuilder'), icon: <Database size={16} /> },
+    { id: 'train', label: t('trainLora'), icon: <Music2 size={16} /> },
+    { id: 'export', label: 'Export', icon: <Download size={16} /> },
+  ];
+
+  return (
+    <div className="h-full w-full flex flex-col bg-zinc-50 dark:bg-suno-panel overflow-hidden">
+      {/* Header */}
+      <div className="px-4 pt-4 pb-2 flex-shrink-0">
+        <h2 className="text-lg font-bold text-zinc-900 dark:text-white">{t('loraTraining')}</h2>
+        <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{t('trainingDescription')}</p>
+      </div>
+
+      {/* Pipeline Steps */}
+      <div className="flex items-center gap-0.5 px-4 pb-2 flex-shrink-0 overflow-x-auto scrollbar-hide">
+        {PIPELINE_STEPS.map((step, i) => {
+          const Icon = step.icon;
+          const done = completedSteps.has(step.key);
+          return (
+            <React.Fragment key={step.key}>
+              {i > 0 && <ChevronRight size={10} className="text-zinc-600 flex-shrink-0" />}
+              <div className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] flex-shrink-0 ${done ? 'bg-green-500/15 text-green-400' : 'bg-white/5 text-zinc-500'}`}>
+                <Icon size={10} />
+                {step.label}
+              </div>
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {/* Tab Bar */}
+      <div className="flex px-4 gap-1 flex-shrink-0">
+        {tabs.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${activeTab === tab.id ? 'bg-pink-500/20 text-pink-400 border border-pink-500/30' : 'text-zinc-400 hover:text-zinc-200 hover:bg-white/5'}`}
+          >
+            {tab.icon}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab Content */}
+      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3 scrollbar-hide">
+
+        {/* ===== MODEL CONFIGURATION (shown at top of all tabs) ===== */}
+        <Section title={
+          <button onClick={() => setShowModelConfig(!showModelConfig)} className="flex items-center gap-1.5 w-full text-left">
+            <Settings size={12} />
+            <span>Model Configuration</span>
+            <ChevronRight size={12} className={`ml-auto transition-transform ${showModelConfig ? 'rotate-90' : ''}`} />
+          </button>
+        }>
+          {showModelConfig && (
+            <div className="space-y-2 mt-2">
+              <div className="flex gap-2 items-center">
+                <FieldRow label="Checkpoint">
+                  <select value={selectedCheckpoint} onChange={e => setSelectedCheckpoint(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-xs text-zinc-200">
+                    {modelCheckpoints.map(c => <option key={c} value={c}>{c}</option>)}
+                    {modelCheckpoints.length === 0 && <option value="">No checkpoints found</option>}
+                  </select>
+                </FieldRow>
+                <button onClick={handleRefreshCheckpoints} className="p-1.5 bg-white/5 hover:bg-white/10 rounded-lg text-zinc-400">
+                  <RefreshCw size={12} />
+                </button>
+              </div>
+              <FieldRow label="Config">
+                <select value={selectedConfig} onChange={e => setSelectedConfig(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-xs text-zinc-200">
+                  {modelConfigs.map(c => <option key={c} value={c}>{c}</option>)}
+                  {modelConfigs.length === 0 && <option value="">No configs found</option>}
+                </select>
+              </FieldRow>
+              <div className="grid grid-cols-2 gap-2">
+                <FieldRow label="Device">
+                  <select value={selectedDevice} onChange={e => setSelectedDevice(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-xs text-zinc-200">
+                    {DEVICES.map(d => <option key={d} value={d}>{d}</option>)}
+                  </select>
+                </FieldRow>
+                <FieldRow label="Backend">
+                  <select value={selectedBackend} onChange={e => setSelectedBackend(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-xs text-zinc-200">
+                    {BACKENDS.map(b => <option key={b} value={b}>{b}</option>)}
+                  </select>
+                </FieldRow>
+              </div>
+              <div className="flex flex-wrap gap-x-4 gap-y-1">
+                <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                  <input type="checkbox" checked={initLlm} onChange={e => setInitLlm(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                  Init LLM
+                </label>
+                <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                  <input type="checkbox" checked={useFlashAttention} onChange={e => setUseFlashAttention(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                  Flash Attention
+                </label>
+                <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                  <input type="checkbox" checked={offloadToCpu} onChange={e => setOffloadToCpu(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                  Offload CPU
+                </label>
+                <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                  <input type="checkbox" checked={offloadDitToCpu} onChange={e => setOffloadDitToCpu(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                  Offload DiT CPU
+                </label>
+                <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                  <input type="checkbox" checked={compileModel} onChange={e => setCompileModel(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                  Compile
+                </label>
+                <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                  <input type="checkbox" checked={quantization} onChange={e => setQuantization(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                  Quantization
+                </label>
+              </div>
+              {initLlm && (
+                <FieldRow label="LM Model">
+                  <input type="text" value={lmModelPath} onChange={e => setLmModelPath(e.target.value)} placeholder="LM model path" className="flex-1 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-xs text-zinc-200" />
+                </FieldRow>
+              )}
+              <button onClick={handleInitModel} disabled={modelInitializing} className="w-full py-1.5 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5 disabled:opacity-50">
+                {modelInitializing ? <Loader2 size={12} className="animate-spin" /> : <Cpu size={12} />}
+                Initialize Service
+              </button>
+              {modelInitStatus && <p className="text-[10px] text-zinc-400 break-words">{modelInitStatus}</p>}
+            </div>
+          )}
+        </Section>
+
+        {activeTab === 'dataset' && (
+          <>
+            {/* Drop Zone */}
+            <Section title={t('uploadAudio')}>
+              <div
+                onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop}
+                onClick={() => fileInputRef.current?.click()}
+                className={`border-2 border-dashed rounded-xl p-4 text-center cursor-pointer transition-all ${isDragOver ? 'border-pink-500 bg-pink-500/10' : 'border-white/10 hover:border-white/20 hover:bg-white/[0.02]'}`}
+              >
+                <Upload size={24} className={`mx-auto mb-2 ${isDragOver ? 'text-pink-400' : 'text-zinc-500'}`} />
+                <p className="text-xs text-zinc-400">Drop audio files here or click to browse</p>
+                <p className="text-[10px] text-zinc-600 mt-1">.wav, .mp3, .flac, .ogg, .opus</p>
+                <input ref={fileInputRef} type="file" multiple accept=".wav,.mp3,.flac,.ogg,.opus" onChange={handleFileSelect} className="hidden" />
+              </div>
+              {queuedFiles.length > 0 && (
+                <div className="mt-2 space-y-1 max-h-32 overflow-y-auto">
+                  {queuedFiles.map((f, i) => (
+                    <div key={`${f.name}-${i}`} className="flex items-center gap-2 bg-white/5 rounded-lg px-2 py-1">
+                      <FileAudio size={12} className="text-zinc-400 flex-shrink-0" />
+                      <span className="text-[11px] text-zinc-300 truncate flex-1">{f.name}</span>
+                      <span className="text-[10px] text-zinc-500">{(f.size / 1024 / 1024).toFixed(1)}MB</span>
+                      <button onClick={() => removeQueuedFile(i)} className="text-zinc-500 hover:text-red-400"><X size={12} /></button>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {queuedFiles.length > 0 && (
+                <div className="mt-2 space-y-2">
+                  <FieldRow label={t('datasetName')}>
+                    <input type="text" value={uploadDatasetName} onChange={e => setUploadDatasetName(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder="my_lora_dataset" />
+                  </FieldRow>
+                  <button onClick={handleUploadAndBuild} disabled={uploading || !uploadDatasetName.trim()} className="w-full py-2 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white rounded-lg text-xs font-medium flex items-center justify-center gap-2 disabled:opacity-50">
+                    {uploading ? <Loader2 size={14} className="animate-spin" /> : <Upload size={14} />}
+                    Upload & Create Dataset ({queuedFiles.length} files)
+                  </button>
+                </div>
+              )}
+              {uploadStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{uploadStatus}</p>}
+            </Section>
+
+            {/* Scan Directory */}
+            <Section title="Scan Directory">
+              <div className="flex gap-2">
+                <input type="text" value={scanDir} onChange={e => setScanDir(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder="./path/to/audio/folder" />
+                <button onClick={handleScanDirectory} disabled={scanning || !scanDir} className="px-3 py-1.5 bg-white/5 hover:bg-white/10 text-zinc-300 rounded-lg text-xs font-medium flex items-center gap-1.5 disabled:opacity-50">
+                  {scanning ? <Loader2 size={14} className="animate-spin" /> : <Search size={14} />}
+                  Scan
+                </button>
+              </div>
+              {scanStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{scanStatus}</p>}
+            </Section>
+
+            {/* Load Existing Dataset */}
+            <Section title={t('loadExistingDataset')}>
+              <div className="flex gap-2">
+                <input type="text" value={datasetPath} onChange={e => setDatasetPath(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder="./datasets/my_dataset.json" />
+                <button onClick={handleLoadDataset} disabled={datasetLoading} className="px-3 py-1.5 bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg text-xs font-medium flex items-center gap-1.5 disabled:opacity-50">
+                  {datasetLoading ? <Loader2 size={14} className="animate-spin" /> : <FolderOpen size={14} />}
+                  {t('loadDataset')}
+                </button>
+              </div>
+              {datasetStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{datasetStatus}</p>}
+            </Section>
+
+            {/* Dataset Table */}
+            {dataframeRows.length > 0 && (
+              <Section title={`Dataset (${dataframeRows.length} samples)`}>
+                <div className="overflow-x-auto max-h-48 overflow-y-auto rounded-lg border border-white/5">
+                  <table className="w-full text-[10px]">
+                    <thead>
+                      <tr className="bg-white/5 sticky top-0">
+                        <th className="text-left px-2 py-1 text-zinc-400 font-medium">#</th>
+                        {dataframeHeaders.slice(0, 6).map(h => (
+                          <th key={h} className="text-left px-2 py-1 text-zinc-400 font-medium truncate max-w-[80px]">{h}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {dataframeRows.map((row, i) => (
+                        <tr key={i} onClick={() => handleSampleNavigate(i)} className={`cursor-pointer transition-colors ${i === currentSampleIdx ? 'bg-pink-500/10 text-pink-300' : 'hover:bg-white/5 text-zinc-300'}`}>
+                          <td className="px-2 py-0.5 text-zinc-500">{i + 1}</td>
+                          {dataframeHeaders.slice(0, 6).map(h => (
+                            <td key={h} className="px-2 py-0.5 truncate max-w-[80px]">{String(row[h] ?? '')}</td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </Section>
+            )}
+
+            {/* Dataset Settings */}
+            {datasetLoaded && (
+              <>
+                <Section title={t('datasetSettings')}>
+                  <div className="space-y-2">
+                    <FieldRow label={t('datasetName')}>
+                      <input type="text" value={datasetSettings.datasetName} onChange={e => setDatasetSettings(s => ({ ...s, datasetName: e.target.value }))} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                    </FieldRow>
+                    <FieldRow label={t('customActivationTag')}>
+                      <input type="text" value={datasetSettings.customTag} onChange={e => setDatasetSettings(s => ({ ...s, customTag: e.target.value }))} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder="e.g. my_style" />
+                    </FieldRow>
+                    <FieldRow label={t('tagPosition')}>
+                      <select value={datasetSettings.tagPosition} onChange={e => setDatasetSettings(s => ({ ...s, tagPosition: e.target.value as DatasetSettings['tagPosition'] }))} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50">
+                        <option value="prepend">{t('tagPrepend')}</option>
+                        <option value="append">{t('tagAppend')}</option>
+                        <option value="replace">{t('tagReplace')}</option>
+                      </select>
+                    </FieldRow>
+                    <FieldRow label={t('allInstrumental')}>
+                      <input type="checkbox" checked={datasetSettings.allInstrumental} onChange={e => setDatasetSettings(s => ({ ...s, allInstrumental: e.target.checked }))} className="w-4 h-4 accent-pink-500" />
+                    </FieldRow>
+                    <FieldRow label={`${t('genreRatio')} (${datasetSettings.genreRatio}%)`}>
+                      <input type="range" min={0} max={100} value={datasetSettings.genreRatio} onChange={e => setDatasetSettings(s => ({ ...s, genreRatio: parseInt(e.target.value) }))} className="flex-1 accent-pink-500" />
+                    </FieldRow>
+                    <p className="text-[10px] text-zinc-500">{t('genreRatioHint')}</p>
+                    <button onClick={handleUpdateSettings} className="w-full py-1.5 bg-white/5 hover:bg-white/10 text-zinc-300 rounded-lg text-xs font-medium">
+                      Apply Settings
+                    </button>
+                  </div>
+                </Section>
+
+                {/* Auto-Label */}
+                <Section title={t('autoLabelWithAI')}>
+                  <p className="text-[10px] text-zinc-500 mb-2">{t('autoLabelDescription')}</p>
+                  <div className="flex flex-wrap gap-x-4 gap-y-1 mb-2">
+                    <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                      <input type="checkbox" checked={skipMetas} onChange={e => setSkipMetas(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                      {t('skipMetas')}
+                    </label>
+                    <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                      <input type="checkbox" checked={formatLyrics} onChange={e => setFormatLyrics(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                      {t('formatLyrics')}
+                    </label>
+                    <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                      <input type="checkbox" checked={transcribeLyrics} onChange={e => setTranscribeLyrics(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                      Transcribe Lyrics
+                    </label>
+                    <label className="flex items-center gap-1.5 text-[10px] text-zinc-400">
+                      <input type="checkbox" checked={onlyUnlabeled} onChange={e => setOnlyUnlabeled(e.target.checked)} className="w-3 h-3 accent-pink-500" />
+                      {t('onlyUnlabeled')}
+                    </label>
+                  </div>
+                  <button onClick={handleAutoLabel} disabled={autoLabeling} className="w-full py-1.5 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5 disabled:opacity-50">
+                    {autoLabeling ? <Loader2 size={14} className="animate-spin" /> : <Wand2 size={14} />}
+                    {t('autoLabelAll')}
+                  </button>
+                  {autoLabelStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{autoLabelStatus}</p>}
+                </Section>
+
+                {/* Sample Editor */}
+                <Section title={`${t('editSample')} (${currentSampleIdx + 1}/${sampleCount})`}>
+                  {/* Sample Navigation */}
+                  <div className="flex items-center gap-2 mb-2">
+                    <button onClick={() => handleSampleNavigate(currentSampleIdx - 1)} disabled={currentSampleIdx <= 0} className="px-2 py-1 bg-white/5 hover:bg-white/10 text-zinc-300 rounded text-xs disabled:opacity-30">Prev</button>
+                    <input type="number" min={1} max={sampleCount} value={currentSampleIdx + 1} onChange={e => { const v = parseInt(e.target.value) - 1; if (v >= 0 && v < sampleCount) handleSampleNavigate(v); }} className="w-16 bg-white/5 border border-white/10 rounded px-2 py-1 text-xs text-center text-zinc-200" />
+                    <button onClick={() => handleSampleNavigate(currentSampleIdx + 1)} disabled={currentSampleIdx >= sampleCount - 1} className="px-2 py-1 bg-white/5 hover:bg-white/10 text-zinc-300 rounded text-xs disabled:opacity-30">Next</button>
+                    <span className="text-[10px] text-zinc-500 ml-auto truncate max-w-[100px]">{currentSample?.filename || ''}</span>
+                  </div>
+
+                  {/* Audio Preview */}
+                  {audioPreviewUrl && (
+                    <div className="mb-2 flex items-center gap-2 bg-white/5 rounded-lg px-2 py-1.5">
+                      <Volume2 size={14} className="text-pink-400 flex-shrink-0" />
+                      <audio controls src={audioPreviewUrl} className="w-full h-7 [&::-webkit-media-controls-panel]:bg-transparent" preload="metadata" />
+                    </div>
+                  )}
+
+                  <div className="space-y-2">
+                    <FieldRow label={t('caption')}>
+                      <input type="text" value={editCaption} onChange={e => setEditCaption(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder={t('musicDescription')} />
+                    </FieldRow>
+                    <FieldRow label={t('genre')}>
+                      <input type="text" value={editGenre} onChange={e => setEditGenre(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                    </FieldRow>
+                    <FieldRow label={t('promptOverride')}>
+                      <select value={editPromptOverride} onChange={e => setEditPromptOverride(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50">
+                        <option value="Use Global Ratio">{t('useGlobalRatio')}</option>
+                        <option value="Caption">{t('caption')}</option>
+                        <option value="Genre">{t('genre')}</option>
+                      </select>
+                    </FieldRow>
+                    <div>
+                      <label className="text-[11px] text-zinc-500 mb-0.5 block">Lyrics ({t('editableUsedForTraining')})</label>
+                      <textarea value={editLyrics} onChange={e => setEditLyrics(e.target.value)} rows={3} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50 resize-none" />
+                    </div>
+                    {editRawLyrics && (
+                      <div>
+                        <label className="text-[11px] text-zinc-500 mb-0.5 block">Raw Lyrics (read-only)</label>
+                        <textarea value={editRawLyrics} readOnly rows={3} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-400 resize-none opacity-60" />
+                      </div>
+                    )}
+                    <div className="grid grid-cols-2 gap-2">
+                      <div>
+                        <label className="text-[11px] text-zinc-500 mb-0.5 block">BPM</label>
+                        <input type="number" value={editBpm} onChange={e => setEditBpm(parseInt(e.target.value) || 0)} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                      </div>
+                      <div>
+                        <label className="text-[11px] text-zinc-500 mb-0.5 block">Key</label>
+                        <input type="text" value={editKey} onChange={e => setEditKey(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder="e.g. C major" />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2">
+                      <div>
+                        <label className="text-[11px] text-zinc-500 mb-0.5 block">Time Sig</label>
+                        <select value={editTimeSig} onChange={e => setEditTimeSig(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50">
+                          {TIME_SIGS.map(ts => <option key={ts} value={ts}>{ts || 'Auto'}</option>)}
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-[11px] text-zinc-500 mb-0.5 block">Duration</label>
+                        <input type="number" value={editDuration} readOnly className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-400 opacity-60" />
+                      </div>
+                      <div>
+                        <label className="text-[11px] text-zinc-500 mb-0.5 block">Language</label>
+                        <select value={editLanguage} onChange={e => setEditLanguage(e.target.value)} className="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50">
+                          {LANGUAGES.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
+                        </select>
+                      </div>
+                    </div>
+                    <FieldRow label={t('allInstrumental')}>
+                      <input type="checkbox" checked={editInstrumental} onChange={e => setEditInstrumental(e.target.checked)} className="w-4 h-4 accent-pink-500" />
+                    </FieldRow>
+                    <button onClick={handleSaveSample} disabled={saving} className="w-full py-1.5 bg-pink-500/20 hover:bg-pink-500/30 text-pink-400 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5 disabled:opacity-50">
+                      {saving ? <Loader2 size={14} className="animate-spin" /> : <Edit3 size={14} />}
+                      Save Sample
+                    </button>
+                    {editSaveStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{editSaveStatus}</p>}
+                  </div>
+                </Section>
+
+                {/* Save Dataset */}
+                <Section title={t('saveDataset')}>
+                  <FieldRow label="Save Path">
+                    <input type="text" value={savePath} onChange={e => setSavePath(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                  </FieldRow>
+                  <button onClick={handleSaveDataset} disabled={saving} className="w-full mt-2 py-2 bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5 disabled:opacity-50">
+                    {saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+                    {t('saveDataset')}
+                  </button>
+                  {saveStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{saveStatus}</p>}
+                </Section>
+
+                {/* Preprocess to Tensors (matches Gradio's Step 5 with its own Load Existing Dataset) */}
+                <Section title="Preprocess to Tensors">
+                  <p className="text-[10px] text-zinc-500 mb-2">{t('preprocessDescription')}</p>
+
+                  {/* Load Existing Dataset for Preprocess (Gradio: load_existing_dataset_path/btn/status) */}
+                  <div className="mb-3 p-2 bg-white/[0.02] border border-white/5 rounded-lg space-y-2">
+                    <label className="text-[10px] text-zinc-500 font-medium">Load Existing Dataset</label>
+                    <div className="flex gap-2">
+                      <input type="text" value={preprocessDatasetPath} onChange={e => setPreprocessDatasetPath(e.target.value)} placeholder="./datasets/my_lora_dataset.json" className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                      <button onClick={handleLoadDatasetForPreprocess} disabled={preprocessDatasetLoading} className="px-3 py-1.5 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg text-xs font-medium flex items-center gap-1.5 disabled:opacity-50">
+                        {preprocessDatasetLoading ? <Loader2 size={14} className="animate-spin" /> : <FolderOpen size={14} />}
+                        Load
+                      </button>
+                    </div>
+                    {preprocessDatasetStatus && <p className="text-[10px] text-zinc-400 break-words">{preprocessDatasetStatus}</p>}
+                  </div>
+
+                  <FieldRow label="Output Dir">
+                    <input type="text" value={preprocessOutputDir} onChange={e => setPreprocessOutputDir(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                  </FieldRow>
+                  <button onClick={handlePreprocess} disabled={preprocessing} className="w-full mt-2 py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5 disabled:opacity-50">
+                    {preprocessing ? <Loader2 size={14} className="animate-spin" /> : <Zap size={14} />}
+                    {preprocessing ? 'Preprocessing...' : 'Preprocess'}
+                  </button>
+                  {preprocessStatus && <p className="text-xs text-zinc-400 mt-1.5 break-words">{preprocessStatus}</p>}
+                </Section>
+              </>
+            )}
+          </>
+        )}
+
+        {activeTab === 'train' && (
+          <>
+            {/* Load Tensors */}
+            <Section title={t('preprocessedDataset')}>
+              <div className="flex gap-2">
+                <input type="text" value={trainingParams.tensorDir} onChange={e => setTrainingParams(p => ({ ...p, tensorDir: e.target.value }))} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                <button onClick={handleLoadTensors} className="px-3 py-1.5 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 rounded-lg text-xs font-medium flex items-center gap-1.5">
+                  <FolderOpen size={14} />
+                  Load
+                </button>
+              </div>
+              {trainingDatasetInfo && <p className="text-xs text-zinc-400 mt-1.5 break-words whitespace-pre-wrap">{trainingDatasetInfo}</p>}
+            </Section>
+
+            {/* LoRA Settings */}
+            <Section title={t('loraSettings')}>
+              <div className="space-y-2">
+                <ParamSlider label={`${t('loraRank')} (r)`} value={trainingParams.rank} min={4} max={256} step={4} onChange={v => setTrainingParams(p => ({ ...p, rank: v }))} />
+                <ParamSlider label={`${t('loraAlpha')} (a)`} value={trainingParams.alpha} min={4} max={512} step={4} onChange={v => setTrainingParams(p => ({ ...p, alpha: v }))} />
+                <ParamSlider label={`${t('dropout')}`} value={trainingParams.dropout} min={0} max={0.5} step={0.05} onChange={v => setTrainingParams(p => ({ ...p, dropout: v }))} />
+              </div>
+            </Section>
+
+            {/* Training Parameters */}
+            <Section title={t('trainingParameters')}>
+              <div className="space-y-2">
+                <FieldRow label={t('learningRate')}>
+                  <input type="number" value={trainingParams.learningRate} onChange={e => setTrainingParams(p => ({ ...p, learningRate: parseFloat(e.target.value) || 0.0003 }))} step={0.0001} className="w-28 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                </FieldRow>
+                <ParamSlider label={t('maxEpochs')} value={trainingParams.epochs} min={1} max={4000} step={1} onChange={v => setTrainingParams(p => ({ ...p, epochs: v }))} />
+                <ParamSlider label="Batch Size" value={trainingParams.batchSize} min={1} max={8} step={1} onChange={v => setTrainingParams(p => ({ ...p, batchSize: v }))} />
+                <ParamSlider label={t('gradientAccumulation')} value={trainingParams.gradientAccumulation} min={1} max={16} step={1} onChange={v => setTrainingParams(p => ({ ...p, gradientAccumulation: v }))} />
+                <ParamSlider label={`${t('saveEvery')} (${t('epochs')})`} value={trainingParams.saveEvery} min={50} max={1000} step={50} onChange={v => setTrainingParams(p => ({ ...p, saveEvery: v }))} />
+                <ParamSlider label="Shift" value={trainingParams.shift} min={1.0} max={5.0} step={0.5} onChange={v => setTrainingParams(p => ({ ...p, shift: v }))} />
+                <FieldRow label="Seed">
+                  <input type="number" value={trainingParams.seed} onChange={e => setTrainingParams(p => ({ ...p, seed: parseInt(e.target.value) || 42 }))} className="w-24 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                </FieldRow>
+                <FieldRow label={t('outputDirectory')}>
+                  <input type="text" value={trainingParams.outputDir} onChange={e => setTrainingParams(p => ({ ...p, outputDir: e.target.value }))} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                </FieldRow>
+                <FieldRow label="Resume Checkpoint">
+                  <input type="text" value={trainingParams.resumeCheckpoint} onChange={e => setTrainingParams(p => ({ ...p, resumeCheckpoint: e.target.value }))} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" placeholder="./lora_output/checkpoints/epoch_200" />
+                </FieldRow>
+              </div>
+            </Section>
+
+            {/* Training Controls */}
+            <div className="flex gap-2">
+              {!isTraining ? (
+                <button onClick={handleStartTraining} className="flex-1 py-2.5 bg-gradient-to-r from-pink-500 to-purple-600 hover:from-pink-600 hover:to-purple-700 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2">
+                  <Play size={16} />
+                  {t('startTraining')}
+                </button>
+              ) : (
+                <button onClick={handleStopTraining} className="flex-1 py-2.5 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg text-sm font-medium flex items-center justify-center gap-2">
+                  <Square size={16} />
+                  {t('stopTraining')}
+                </button>
+              )}
+            </div>
+
+            {/* Training Progress */}
+            {(trainingProgress || trainingLog) && (
+              <Section title={t('trainingProgress')}>
+                {trainingProgress && <p className="text-xs text-zinc-300 mb-2 break-words">{trainingProgress}</p>}
+                {trainingLog && (
+                  <pre className="text-[10px] text-zinc-400 bg-black/20 rounded-lg p-2 max-h-40 overflow-y-auto whitespace-pre-wrap">{trainingLog}</pre>
+                )}
+              </Section>
+            )}
+
+            {/* Loss Chart */}
+            {lossChartSvg && (
+              <Section title="Training Loss">
+                <div className="bg-black/20 rounded-lg p-2">{lossChartSvg}</div>
+              </Section>
+            )}
+          </>
+        )}
+
+        {activeTab === 'export' && (
+          <>
+            <Section title="Export LoRA">
+              <div className="space-y-2">
+                <FieldRow label="Export Path">
+                  <input type="text" value={exportPath} onChange={e => setExportPath(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                </FieldRow>
+                <FieldRow label="LoRA Output Dir">
+                  <input type="text" value={exportOutputDir} onChange={e => setExportOutputDir(e.target.value)} className="flex-1 bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-sm text-zinc-200 focus:outline-none focus:border-pink-500/50" />
+                </FieldRow>
+              </div>
+              <button onClick={handleExportLora} disabled={exporting} className="w-full mt-3 py-2.5 bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2 disabled:opacity-50">
+                {exporting ? <Loader2 size={16} className="animate-spin" /> : <Download size={16} />}
+                Export LoRA
+              </button>
+              {exportStatus && <p className="text-xs text-zinc-400 mt-2 break-words">{exportStatus}</p>}
+            </Section>
+
+            <Section title="Load LoRA for Inference">
+              <p className="text-xs text-zinc-500 mb-2">
+                After exporting, use the LoRA controls in the Create panel to load your trained adapter.
+              </p>
+            </Section>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Reusable Section component (supports string or ReactNode title)
+const Section: React.FC<{ title: string | React.ReactNode; children: React.ReactNode }> = ({ title, children }) => (
+  <div className="bg-white/[0.02] border border-white/5 rounded-xl p-3">
+    <h3 className="text-xs font-semibold text-zinc-300 mb-2">{title}</h3>
+    {children}
+  </div>
+);
+
+const FieldRow: React.FC<{ label: string; children: React.ReactNode }> = ({ label, children }) => (
+  <div className="flex items-center gap-2">
+    <label className="text-[11px] text-zinc-500 w-28 flex-shrink-0">{label}</label>
+    {children}
+  </div>
+);
+
+const ParamSlider: React.FC<{
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  onChange: (v: number) => void;
+}> = ({ label, value, min, max, step, onChange }) => (
+  <div>
+    <div className="flex items-center justify-between mb-0.5">
+      <label className="text-[11px] text-zinc-500">{label}</label>
+      <span className="text-[11px] text-zinc-400 font-mono">{step < 1 ? value.toFixed(2) : value}</span>
+    </div>
+    <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(parseFloat(e.target.value))} className="w-full accent-pink-500 h-1.5" />
+  </div>
+);
diff --git a/data/news.json b/data/news.json
new file mode 100644
index 0000000..17d6f68
--- /dev/null
+++ b/data/news.json
@@ -0,0 +1,16 @@
+[
+  {
+    "id": "v1-gradio-migration",
+    "date": "2025-02-09",
+    "title": "Switched to Gradio API Backend",
+    "body": "We migrated the backend from REST API to Gradio API for direct communication with ACE-Step. This version is experimental — if you encounter any bugs, please report them or open a PR on our GitHub repo.",
+    "tags": ["backend", "experimental"]
+  },
+  {
+    "id": "v1-training-experimental",
+    "date": "2025-02-09",
+    "title": "LoRA Training (Experimental)",
+    "body": "The training feature is now available but still experimental. You may encounter bugs during dataset building, preprocessing, or training. Bug reports and PRs are welcome!",
+    "tags": ["training", "experimental"]
+  }
+]
diff --git a/i18n/translations.ts b/i18n/translations.ts
index 4debdd0..87d5426 100644
--- a/i18n/translations.ts
+++ b/i18n/translations.ts
@@ -7,7 +7,8 @@ export const translations = {
     library: 'Library',
     search: 'Search',
     training: 'Training',
-    
+    news: 'News',
+
     // Theme
     lightMode: 'Light Mode',
     darkMode: 'Dark Mode',
@@ -601,7 +602,8 @@ export const translations = {
     library: '音乐库',
     search: '搜索',
     training: '训练',
-    
+    news: '新闻',
+
     // Theme
     lightMode: '浅色模式',
     darkMode: '深色模式',
@@ -1195,7 +1197,8 @@ export const translations = {
     library: 'ライブラリ',
     search: '検索',
     training: 'トレーニング',
-    
+    news: 'ニュース',
+
     // Theme
     lightMode: 'ライトモード',
     darkMode: 'ダークモード',
@@ -1789,7 +1792,8 @@ export const translations = {
     library: '라이브러리',
     search: '검색',
     training: '훈련',
-    
+    news: '뉴스',
+
     // Theme
     lightMode: '라이트 모드',
     darkMode: '다크 모드',
diff --git a/server/scripts/preprocess_dataset.py b/server/scripts/preprocess_dataset.py
new file mode 100644
index 0000000..13defac
--- /dev/null
+++ b/server/scripts/preprocess_dataset.py
@@ -0,0 +1,140 @@
+"""
+Standalone dataset preprocessor for ACE-Step LoRA training.
+
+Converts labeled audio samples from a dataset JSON into pre-computed
+tensor files (.pt) suitable for training. This script loads the VAE and
+text encoder independently, so it does NOT require the Gradio app to be
+running.
+
+Usage:
+    python preprocess_dataset.py --dataset /path/to/dataset.json --output /path/to/tensors [--json]
+
+The --json flag makes the script output a final JSON summary line to stdout.
+"""
+
+import argparse
+import json
+import os
+import sys
+
+def main():
+    parser = argparse.ArgumentParser(description="Preprocess dataset to tensors for LoRA training")
+    parser.add_argument("--dataset", required=True, help="Path to dataset JSON file")
+    parser.add_argument("--output", required=True, help="Output directory for tensor files")
+    parser.add_argument("--max-duration", type=float, default=240.0, help="Max audio duration in seconds")
+    parser.add_argument("--json", action="store_true", help="Output JSON summary")
+    args = parser.parse_args()
+
+    if not os.path.exists(args.dataset):
+        print(f"Error: Dataset file not found: {args.dataset}", file=sys.stderr)
+        sys.exit(1)
+
+    # Add ACE-Step root to path for imports
+    ace_step_root = os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
+    # Walk up to find ACE-Step-1.5 directory
+    for candidate in [
+        os.path.join(ace_step_root, "ACE-Step-1.5"),
+        os.path.join(os.path.dirname(ace_step_root), "ACE-Step-1.5"),
+        os.getcwd(),
+    ]:
+        if os.path.isdir(candidate) and os.path.isdir(os.path.join(candidate, "acestep")):
+            ace_step_root = candidate
+            break
+
+    if ace_step_root not in sys.path:
+        sys.path.insert(0, ace_step_root)
+
+    try:
+        from acestep.training.dataset_builder import DatasetBuilder
+    except ImportError as e:
+        print(f"Error: Could not import ACE-Step modules: {e}", file=sys.stderr)
+        print("Make sure this script is run from the ACE-Step-1.5 directory or with the correct Python environment.", file=sys.stderr)
+        sys.exit(1)
+
+    # Load dataset JSON
+    print(f"Loading dataset: {args.dataset}")
+    with open(args.dataset, "r") as f:
+        dataset_data = json.load(f)
+
+    # Reconstruct DatasetBuilder from JSON
+    builder = DatasetBuilder()
+    builder.load_from_dict(dataset_data)
+
+    labeled_count = sum(1 for s in builder.samples if s.labeled)
+    total_count = len(builder.samples)
+    print(f"Dataset loaded: {total_count} samples, {labeled_count} labeled")
+
+    if labeled_count == 0:
+        msg = "No labeled samples found. Please label samples before preprocessing."
+        print(f"Warning: {msg}", file=sys.stderr)
+        if args.json:
+            print(json.dumps({"status": "error", "message": msg, "labeled": 0, "total": total_count}))
+        sys.exit(1)
+
+    # Load models for preprocessing
+    print("Loading models for preprocessing (this may take a moment)...")
+    try:
+        from acestep.pipeline_ace_step import ACEStepPipeline
+
+        checkpoint_dir = os.path.join(ace_step_root, "checkpoints")
+        if not os.path.isdir(checkpoint_dir):
+            checkpoint_dir = os.path.join(ace_step_root, "checkpoints", "ACE-Step-v1.5")
+
+        pipe = ACEStepPipeline(checkpoint_dir=checkpoint_dir)
+        pipe.load_checkpoint()
+
+        # Create a minimal dit_handler-like object for preprocess_to_tensors
+        class DitHandlerProxy:
+            def __init__(self, pipeline):
+                self.model = pipeline.dit
+                self.vae = pipeline.vae
+                self.text_encoder = pipeline.text_encoder
+                self.text_tokenizer = pipeline.text_tokenizer
+                self.silence_latent = getattr(pipeline, "silence_latent", None)
+                self.device = pipeline.device
+                self.dtype = pipeline.dtype
+
+        handler = DitHandlerProxy(pipe)
+    except Exception as e:
+        # If pipeline loading fails, try a simpler approach
+        print(f"Warning: Could not load full pipeline: {e}", file=sys.stderr)
+        print("Preprocessing requires model access. Please use the Gradio UI for preprocessing.", file=sys.stderr)
+        if args.json:
+            print(json.dumps({
+                "status": "error",
+                "message": f"Model loading failed: {str(e)}. Use Gradio UI preprocess instead.",
+                "labeled": labeled_count,
+                "total": total_count,
+            }))
+        sys.exit(1)
+
+    # Run preprocessing
+    os.makedirs(args.output, exist_ok=True)
+    print(f"Preprocessing to: {args.output}")
+
+    def progress_cb(msg):
+        print(f"  {msg}")
+
+    output_paths, status = builder.preprocess_to_tensors(
+        dit_handler=handler,
+        output_dir=args.output,
+        max_duration=args.max_duration,
+        progress_callback=progress_cb,
+    )
+
+    print(f"Done: {status}")
+    print(f"Output files: {len(output_paths)}")
+
+    if args.json:
+        print(json.dumps({
+            "status": "complete",
+            "message": status,
+            "output_files": len(output_paths),
+            "output_dir": args.output,
+            "labeled": labeled_count,
+            "total": total_count,
+        }))
+
+
+if __name__ == "__main__":
+    main()
diff --git a/server/src/config/index.ts b/server/src/config/index.ts
index b5c27a8..5fd6213 100644
--- a/server/src/config/index.ts
+++ b/server/src/config/index.ts
@@ -35,6 +35,12 @@ export const config = {
     audioDir: process.env.AUDIO_DIR || path.join(__dirname, '../../public/audio'),
   },
 
+  // Training datasets (inside ACE-Step-1.5 so Gradio can access them)
+  datasets: {
+    dir: process.env.DATASETS_DIR || path.join(__dirname, '../../../ACE-Step-1.5/datasets'),
+    uploadsDir: process.env.DATASETS_UPLOADS_DIR || path.join(__dirname, '../../../ACE-Step-1.5/datasets/uploads'),
+  },
+
   // Simplified JWT (for local session, not critical security)
   jwt: {
     secret: process.env.JWT_SECRET || 'ace-step-ui-local-secret',
diff --git a/server/src/db/pool.ts b/server/src/db/pool.ts
index d9dc646..c8ba079 100644
--- a/server/src/db/pool.ts
+++ b/server/src/db/pool.ts
@@ -19,6 +19,7 @@ try {
 const dbInstance = new Database(config.database.path);
 dbInstance.pragma('journal_mode = WAL');
 dbInstance.pragma('foreign_keys = ON');
+dbInstance.pragma('busy_timeout = 5000');
 
 export { dbInstance as db };
 
diff --git a/server/src/index.ts b/server/src/index.ts
index 031bcd1..15e9c1f 100644
--- a/server/src/index.ts
+++ b/server/src/index.ts
@@ -24,6 +24,7 @@ import playlistsRoutes from './routes/playlists.js';
 import contactRoutes from './routes/contact.js';
 import referenceTrackRoutes from './routes/referenceTrack.js';
 import loraRoutes from './routes/lora.js';
+import trainingRoutes from './routes/training.js';
 import { pool } from './db/pool.js';
 import './db/migrate.js';
 
@@ -405,6 +406,7 @@ app.use('/api/playlists', playlistsRoutes);
 app.use('/api/contact', contactRoutes);
 app.use('/api/reference-tracks', referenceTrackRoutes);
 app.use('/api/lora', loraRoutes);
+app.use('/api/training', trainingRoutes);
 
 // Error handler
 app.use((err: Error, _req: express.Request, res: express.Response, _next: express.NextFunction) => {
diff --git a/server/src/routes/contact.ts b/server/src/routes/contact.ts
index 5e249d1..f75b4df 100644
--- a/server/src/routes/contact.ts
+++ b/server/src/routes/contact.ts
@@ -36,21 +36,7 @@ router.post('/', async (req: Request, res: Response) => {
       return;
     }
 
-    // Create table if not exists
-    await pool.query(`
-      CREATE TABLE IF NOT EXISTS contact_submissions (
-        id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-        name VARCHAR(255) NOT NULL,
-        email VARCHAR(255) NOT NULL,
-        subject VARCHAR(500) NOT NULL,
-        message TEXT NOT NULL,
-        category VARCHAR(50) DEFAULT 'general',
-        is_read BOOLEAN DEFAULT FALSE,
-        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-      )
-    `);
-
-    // Insert submission
+    // Insert submission (table created in migrate.ts)
     const result = await pool.query(
       `INSERT INTO contact_submissions (name, email, subject, message, category)
        VALUES ($1, $2, $3, $4, $5)
diff --git a/server/src/routes/generate.ts b/server/src/routes/generate.ts
index de9effd..aee3b59 100644
--- a/server/src/routes/generate.ts
+++ b/server/src/routes/generate.ts
@@ -4,7 +4,9 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { pool } from '../db/pool.js';
 import { generateUUID } from '../db/sqlite.js';
+import { config } from '../config/index.js';
 import { authMiddleware, AuthenticatedRequest } from '../middleware/auth.js';
+import { getGradioClient } from '../services/gradio-client.js';
 import {
   generateMusicViaAPI,
   getJobStatus,
@@ -125,7 +127,15 @@ interface GenerateBody {
   isFormatCaption?: boolean;
 }
 
-router.post('/upload-audio', authMiddleware, audioUpload.single('audio'), async (req: AuthenticatedRequest, res: Response) => {
+router.post('/upload-audio', authMiddleware, (req: AuthenticatedRequest, res: Response, next: Function) => {
+  audioUpload.single('audio')(req, res, (err: any) => {
+    if (err) {
+      res.status(400).json({ error: err.message || 'Invalid file upload' });
+      return;
+    }
+    next();
+  });
+}, async (req: AuthenticatedRequest, res: Response) => {
   try {
     if (!req.file) {
       res.status(400).json({ error: 'Audio file is required' });
@@ -161,7 +171,7 @@ router.post('/upload-audio', authMiddleware, audioUpload.single('audio'), async
     const ext = extFromName || extFromType || '.audio';
     const key = `references/${req.user!.id}/${Date.now()}-${generateUUID()}${ext}`;
     const storedKey = await storage.upload(key, req.file.buffer, req.file.mimetype);
-    const publicUrl = storedKey;
+    const publicUrl = storage.getPublicUrl(storedKey);
 
     res.json({ url: publicUrl, key: storedKey });
   } catch (error) {
@@ -351,6 +361,7 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
         const aceStatus = await getJobStatus(job.acestep_task_id);
 
         if (aceStatus.status !== job.status) {
+          // Use optimistic lock: only update if status hasn't changed (prevents duplicate song creation)
           let updateQuery = `UPDATE generation_jobs SET status = ?, updated_at = datetime('now')`;
           const updateParams: unknown[] = [aceStatus.status];
 
@@ -362,17 +373,19 @@ router.get('/status/:jobId', authMiddleware, async (req: AuthenticatedRequest, r
             updateParams.push(aceStatus.error);
           }
 
-          updateQuery += ` WHERE id = ?`;
-          updateParams.push(req.params.jobId);
+          updateQuery += ` WHERE id = ? AND status = ?`;
+          updateParams.push(req.params.jobId, job.status);
 
-          await pool.query(updateQuery, updateParams);
+          const updateResult = await pool.query(updateQuery, updateParams);
+          const wasUpdated = updateResult.rowCount > 0;
 
-          // If succeeded, create song records
-          if (aceStatus.status === 'succeeded' && aceStatus.result) {
+          // If succeeded AND we were the first to update (optimistic lock), create song records
+          if (aceStatus.status === 'succeeded' && aceStatus.result && wasUpdated) {
             const params = typeof job.params === 'string' ? JSON.parse(job.params) : job.params;
-            const audioUrls = aceStatus.result.audioUrls.filter((url: string) =>
-              url.endsWith('.mp3') || url.endsWith('.flac')
-            );
+            const audioUrls = aceStatus.result.audioUrls.filter((url: string) => {
+              const lower = url.toLowerCase();
+              return lower.endsWith('.mp3') || lower.endsWith('.flac') || lower.endsWith('.wav');
+            });
             const localPaths: string[] = [];
             const storage = getStorageProvider();
 
@@ -554,6 +567,103 @@ router.get('/endpoints', authMiddleware, async (_req: AuthenticatedRequest, res:
   }
 });
 
+router.get('/models', async (_req, res: Response) => {
+  try {
+    const ACESTEP_DIR = process.env.ACESTEP_PATH || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../ACE-Step-1.5');
+    const checkpointsDir = path.join(ACESTEP_DIR, 'checkpoints');
+
+    // All known DiT models from Gradio's model_downloader.py registry:
+    // - MAIN_MODEL_COMPONENTS includes "acestep-v15-turbo" (bundled with main download)
+    // - SUBMODEL_REGISTRY includes the rest (separate HuggingFace repos, auto-downloaded on init)
+    const ALL_DIT_MODELS = [
+      'acestep-v15-turbo',             // default, from main model repo
+      'acestep-v15-base',              // submodel
+      'acestep-v15-sft',               // submodel
+      'acestep-v15-turbo-shift1',      // submodel
+      'acestep-v15-turbo-shift3',      // submodel
+      'acestep-v15-turbo-continuous',   // submodel
+    ];
+
+    // Query Gradio /v1/models to get the currently loaded/active model
+    let activeModel: string | null = null;
+    try {
+      const apiRes = await fetch(`${config.acestep.apiUrl}/v1/models`);
+      if (apiRes.ok) {
+        const data = await apiRes.json() as any;
+        const gradioModels = data?.data?.models || data?.models || [];
+        if (gradioModels.length > 0) {
+          activeModel = gradioModels[0]?.name || null;
+        }
+      }
+    } catch {
+      // Gradio API unavailable
+    }
+
+    // Check which models are downloaded (exist on disk)
+    // Matches Gradio's handler.py check_model_exists() and get_available_acestep_v15_models()
+    const { existsSync, statSync } = await import('fs');
+    const downloaded = new Set<string>();
+    for (const model of ALL_DIT_MODELS) {
+      const modelPath = path.join(checkpointsDir, model);
+      try {
+        if (existsSync(modelPath) && statSync(modelPath).isDirectory()) {
+          downloaded.add(model);
+        }
+      } catch { /* skip */ }
+    }
+
+    // Also scan for any additional acestep-v15-* models on disk not in the registry
+    // (e.g. user-trained or community models)
+    try {
+      const { readdirSync } = await import('fs');
+      for (const entry of readdirSync(checkpointsDir)) {
+        if (entry.startsWith('acestep-v15-') && statSync(path.join(checkpointsDir, entry)).isDirectory()) {
+          downloaded.add(entry);
+          if (!ALL_DIT_MODELS.includes(entry)) {
+            ALL_DIT_MODELS.push(entry);
+          }
+        }
+      }
+    } catch { /* checkpoints dir may not exist */ }
+
+    const models = ALL_DIT_MODELS.map(name => ({
+      name,
+      is_active: name === activeModel,
+      is_preloaded: downloaded.has(name),
+    }));
+
+    // Sort: active first, then downloaded, then alphabetical
+    models.sort((a, b) => {
+      if (a.is_active !== b.is_active) return a.is_active ? -1 : 1;
+      if (a.is_preloaded !== b.is_preloaded) return a.is_preloaded ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+
+    res.json({ models });
+  } catch (error) {
+    console.error('Models error:', error);
+    res.status(500).json({ error: (error as Error).message });
+  }
+});
+
+// GET /api/generate/random-description — Load a random simple description from Gradio
+router.get('/random-description', authMiddleware, async (_req: AuthenticatedRequest, res: Response) => {
+  try {
+    const client = await getGradioClient();
+    const result = await client.predict('/load_random_simple_description', []);
+    const data = result.data as unknown[];
+    // Returns [description, instrumental, vocal_language]
+    res.json({
+      description: data[0] || '',
+      instrumental: data[1] || false,
+      vocalLanguage: data[2] || 'unknown',
+    });
+  } catch (error) {
+    console.error('Random description error:', error);
+    res.status(500).json({ error: (error as Error).message });
+  }
+});
+
 router.get('/health', async (_req, res: Response) => {
   try {
     const healthy = await checkSpaceHealth();
@@ -566,7 +676,7 @@ router.get('/health', async (_req, res: Response) => {
 router.get('/limits', async (_req, res: Response) => {
   try {
     const { spawn } = await import('child_process');
-    const ACESTEP_DIR = process.env.ACESTEP_PATH || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../ACE-Step-1.5');
+    const ACESTEP_DIR = process.env.ACESTEP_PATH || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../ACE-Step-1.5');
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);
     const SCRIPTS_DIR = path.join(__dirname, '../../scripts');
@@ -642,7 +752,7 @@ router.post('/format', authMiddleware, async (req: AuthenticatedRequest, res: Re
 
     const { spawn } = await import('child_process');
 
-    const ACESTEP_DIR = process.env.ACESTEP_PATH || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../../ACE-Step-1.5');
+    const ACESTEP_DIR = process.env.ACESTEP_PATH || path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../../ACE-Step-1.5');
     const __filename = fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);
     const SCRIPTS_DIR = path.join(__dirname, '../../scripts');
diff --git a/server/src/routes/songs.ts b/server/src/routes/songs.ts
index 6dd9ec5..c3e7414 100644
--- a/server/src/routes/songs.ts
+++ b/server/src/routes/songs.ts
@@ -519,13 +519,9 @@ router.get('/liked/list', authMiddleware, async (req: AuthenticatedRequest, res:
   }
 });
 
-// Toggle song privacy (paid users only can make songs private)
+// Toggle song privacy
 router.patch('/:id/privacy', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
   try {
-    // Get user's account tier
-    const userResult = await pool.query('SELECT account_tier FROM users WHERE id = $1', [req.user!.id]);
-    const accountTier = userResult.rows[0]?.account_tier || 'free';
-
     const check = await pool.query('SELECT user_id, is_public FROM songs WHERE id = $1', [req.params.id]);
     if (check.rows.length === 0) {
       res.status(404).json({ error: 'Song not found' });
@@ -538,12 +534,6 @@ router.patch('/:id/privacy', authMiddleware, async (req: AuthenticatedRequest, r
 
     const newPublicState = !check.rows[0].is_public;
 
-    // Free users cannot make songs private
-    if (accountTier === 'free' && !newPublicState) {
-      res.status(403).json({ error: 'Upgrade to Pro or Unlimited to make songs private' });
-      return;
-    }
-
     await pool.query('UPDATE songs SET is_public = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2', [
       newPublicState,
       req.params.id,
diff --git a/server/src/routes/training.ts b/server/src/routes/training.ts
new file mode 100644
index 0000000..07c3e5d
--- /dev/null
+++ b/server/src/routes/training.ts
@@ -0,0 +1,870 @@
+import { Router, Request, Response } from 'express';
+import { authMiddleware, AuthenticatedRequest } from '../middleware/auth.js';
+import { getGradioClient } from '../services/gradio-client.js';
+import { config } from '../config/index.js';
+import { resolvePythonPath } from '../services/acestep.js';
+import multer from 'multer';
+import path from 'path';
+import { existsSync, readdirSync, statSync, readFileSync } from 'fs';
+import { mkdir, writeFile, readFile } from 'fs/promises';
+import { execSync, spawn } from 'child_process';
+import { randomUUID } from 'crypto';
+
+const router = Router();
+
+// --- Audio upload via multer disk storage ---
+const AUDIO_EXTENSIONS = ['.wav', '.mp3', '.flac', '.ogg', '.opus'];
+
+const audioStorage = multer.diskStorage({
+  destination: async (_req: Request, _file, cb) => {
+    const datasetName = (_req.body?.datasetName as string) || 'default';
+    const dest = path.join(config.datasets.uploadsDir, datasetName);
+    try {
+      await mkdir(dest, { recursive: true });
+      cb(null, dest);
+    } catch (err) {
+      cb(err as Error, dest);
+    }
+  },
+  filename: (_req, file, cb) => {
+    // Preserve original filename but ensure uniqueness
+    const ext = path.extname(file.originalname).toLowerCase();
+    const base = path.basename(file.originalname, ext);
+    const safeName = base.replace(/[^a-zA-Z0-9_\-. ]/g, '_');
+    cb(null, `${safeName}${ext}`);
+  },
+});
+
+const audioUpload = multer({
+  storage: audioStorage,
+  limits: { fileSize: 100 * 1024 * 1024 }, // 100MB per file
+  fileFilter: (_req, file, cb) => {
+    const ext = path.extname(file.originalname).toLowerCase();
+    if (AUDIO_EXTENSIONS.includes(ext)) {
+      cb(null, true);
+    } else {
+      cb(new Error(`Unsupported file type: ${ext}. Allowed: ${AUDIO_EXTENSIONS.join(', ')}`));
+    }
+  },
+});
+
+// Get audio duration via ffprobe
+function getAudioDuration(filePath: string): number {
+  try {
+    const result = execSync(
+      `ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 "${filePath}"`,
+      { encoding: 'utf-8', timeout: 10000 }
+    );
+    const duration = parseFloat(result.trim());
+    return isNaN(duration) ? 0 : Math.round(duration);
+  } catch {
+    return 0;
+  }
+}
+
+// Resolve ACE-Step base directory
+function getAceStepDir(): string {
+  const envPath = process.env.ACESTEP_PATH;
+  if (envPath) {
+    return path.isAbsolute(envPath) ? envPath : path.resolve(process.cwd(), envPath);
+  }
+  return path.resolve(config.datasets.dir, '..');
+}
+
+// ================== NEW ROUTES ==================
+
+// POST /api/training/upload-audio — Upload audio files for a dataset
+router.post('/upload-audio', authMiddleware, audioUpload.array('audio', 50), async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const files = req.files as Express.Multer.File[];
+    if (!files || files.length === 0) {
+      res.status(400).json({ error: 'No audio files uploaded' });
+      return;
+    }
+
+    const datasetName = (req.body?.datasetName as string) || 'default';
+    const uploadDir = path.join(config.datasets.uploadsDir, datasetName);
+
+    res.json({
+      files: files.map(f => ({
+        filename: f.filename,
+        originalName: f.originalname,
+        size: f.size,
+        path: f.path,
+      })),
+      uploadDir,
+      count: files.length,
+    });
+  } catch (error) {
+    console.error('[Training] Upload audio error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Upload failed' });
+  }
+});
+
+// POST /api/training/build-dataset — Scan audio directory + create dataset JSON
+router.post('/build-dataset', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const {
+      datasetName = 'my_lora_dataset',
+      customTag = '',
+      tagPosition = 'prepend',
+      allInstrumental = true,
+    } = req.body;
+
+    const audioDir = path.join(config.datasets.uploadsDir, datasetName);
+    if (!existsSync(audioDir)) {
+      res.status(400).json({ error: `Audio directory not found: uploads/${datasetName}` });
+      return;
+    }
+
+    // Scan for audio files
+    const entries = readdirSync(audioDir);
+    const audioFiles = entries.filter(f => AUDIO_EXTENSIONS.includes(path.extname(f).toLowerCase()));
+    if (audioFiles.length === 0) {
+      res.status(400).json({ error: 'No audio files found in directory' });
+      return;
+    }
+
+    // Build samples in Gradio's exact format
+    const samples = audioFiles.map(filename => {
+      const audioPath = path.join(audioDir, filename);
+      const duration = getAudioDuration(audioPath);
+      const baseName = path.basename(filename, path.extname(filename));
+
+      // Check for companion .txt lyrics file
+      let rawLyrics = '';
+      const lyricsPath = path.join(audioDir, `${baseName}.txt`);
+      if (existsSync(lyricsPath)) {
+        try {
+          rawLyrics = readFileSync(lyricsPath, 'utf-8').trim();
+        } catch { /* ignore */ }
+      }
+
+      const isInstrumental = allInstrumental || !rawLyrics;
+
+      return {
+        id: randomUUID().slice(0, 8),
+        audio_path: audioPath,
+        filename,
+        caption: '',
+        genre: '',
+        lyrics: isInstrumental ? '[Instrumental]' : rawLyrics,
+        raw_lyrics: rawLyrics,
+        formatted_lyrics: '',
+        bpm: null as number | null,
+        keyscale: '',
+        timesignature: '',
+        duration,
+        language: isInstrumental ? 'instrumental' : 'unknown',
+        is_instrumental: isInstrumental,
+        custom_tag: customTag,
+        labeled: false,
+        prompt_override: null as string | null,
+      };
+    });
+
+    // Build dataset JSON
+    const dataset = {
+      metadata: {
+        name: datasetName,
+        custom_tag: customTag,
+        tag_position: tagPosition,
+        created_at: new Date().toISOString(),
+        num_samples: samples.length,
+        all_instrumental: allInstrumental,
+        genre_ratio: 0,
+      },
+      samples,
+    };
+
+    // Save JSON to datasets dir
+    await mkdir(config.datasets.dir, { recursive: true });
+    const jsonPath = path.join(config.datasets.dir, `${datasetName}.json`);
+    await writeFile(jsonPath, JSON.stringify(dataset, null, 2), 'utf-8');
+
+    // Now load into Gradio state via the existing endpoint
+    try {
+      const client = await getGradioClient();
+      const result = await client.predict('/load_existing_dataset_for_preprocess', [jsonPath]);
+      const data = result.data as unknown[];
+
+      res.json({
+        status: data[0],
+        dataframe: data[1],
+        sampleCount: samples.length,
+        sample: {
+          index: data[2],
+          audio: data[3],
+          filename: data[4],
+          caption: data[5],
+          genre: data[6],
+          promptOverride: data[7],
+          lyrics: data[8],
+          bpm: data[9],
+          key: data[10],
+          timeSignature: data[11],
+          duration: data[12],
+          language: data[13],
+          instrumental: data[14],
+          rawLyrics: data[15],
+        },
+        settings: {
+          datasetName: data[16],
+          customTag: data[17],
+          tagPosition: data[18],
+          allInstrumental: data[19],
+          genreRatio: data[20],
+        },
+        datasetPath: jsonPath,
+      });
+    } catch (gradioError) {
+      // Gradio may not be running — still return dataset info
+      console.warn('[Training] Gradio load failed, returning dataset JSON only:', gradioError);
+      res.json({
+        status: `Dataset saved (${samples.length} samples). Gradio not available for live preview.`,
+        dataframe: null,
+        sampleCount: samples.length,
+        sample: samples.length > 0 ? {
+          index: 0,
+          audio: null,
+          filename: samples[0].filename,
+          caption: samples[0].caption,
+          genre: samples[0].genre,
+          promptOverride: null,
+          lyrics: samples[0].lyrics,
+          bpm: samples[0].bpm,
+          key: samples[0].keyscale,
+          timeSignature: samples[0].timesignature,
+          duration: samples[0].duration,
+          language: samples[0].language,
+          instrumental: samples[0].is_instrumental,
+          rawLyrics: samples[0].raw_lyrics,
+        } : null,
+        settings: {
+          datasetName,
+          customTag,
+          tagPosition,
+          allInstrumental,
+          genreRatio: 0,
+        },
+        datasetPath: jsonPath,
+      });
+    }
+  } catch (error) {
+    console.error('[Training] Build dataset error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to build dataset' });
+  }
+});
+
+// GET /api/training/audio — Proxy audio files from datasets directory
+router.get('/audio', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    let filePath: string;
+    const aceStepDir = getAceStepDir();
+
+    if (req.query.path) {
+      filePath = req.query.path as string;
+    } else if (req.query.file) {
+      // Relative path within datasets dir
+      filePath = path.join(config.datasets.dir, req.query.file as string);
+    } else {
+      res.status(400).json({ error: 'path or file parameter required' });
+      return;
+    }
+
+    // Path traversal protection
+    const resolved = path.resolve(filePath);
+    if (resolved.includes('..') || !resolved.startsWith(aceStepDir)) {
+      res.status(403).json({ error: 'Access denied: path outside ACE-Step directory' });
+      return;
+    }
+
+    if (!existsSync(resolved)) {
+      res.status(404).json({ error: 'Audio file not found' });
+      return;
+    }
+
+    // Determine content type
+    const ext = path.extname(resolved).toLowerCase();
+    const mimeTypes: Record<string, string> = {
+      '.wav': 'audio/wav',
+      '.mp3': 'audio/mpeg',
+      '.flac': 'audio/flac',
+      '.ogg': 'audio/ogg',
+      '.opus': 'audio/opus',
+    };
+
+    res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+    res.sendFile(resolved);
+  } catch (error) {
+    console.error('[Training] Audio proxy error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to serve audio' });
+  }
+});
+
+// POST /api/training/preprocess — Spawn Python preprocessing script
+router.post('/preprocess', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { datasetPath, outputDir } = req.body;
+    if (!datasetPath) {
+      res.status(400).json({ error: 'datasetPath is required' });
+      return;
+    }
+
+    const aceStepDir = getAceStepDir();
+    const scriptPath = path.resolve(__dirname, '../../scripts/preprocess_dataset.py');
+    const pythonPath = resolvePythonPath(aceStepDir);
+    const resolvedOutput = outputDir || path.join(config.datasets.dir, 'preprocessed_tensors');
+
+    // Ensure output dir exists
+    await mkdir(resolvedOutput, { recursive: true });
+
+    // Spawn Python process
+    const child = spawn(pythonPath, [
+      scriptPath,
+      '--dataset', datasetPath,
+      '--output', resolvedOutput,
+      '--json',
+    ], {
+      cwd: aceStepDir,
+      env: { ...process.env },
+    });
+
+    let stdout = '';
+    let stderr = '';
+
+    child.stdout.on('data', (data: Buffer) => { stdout += data.toString(); });
+    child.stderr.on('data', (data: Buffer) => { stderr += data.toString(); });
+
+    child.on('close', (code: number | null) => {
+      if (code === 0) {
+        // Try to parse JSON output
+        try {
+          const result = JSON.parse(stdout.trim().split('\n').pop() || '{}');
+          res.json({ status: 'Preprocessing complete', ...result });
+        } catch {
+          res.json({ status: 'Preprocessing complete', output: stdout.trim() });
+        }
+      } else {
+        res.status(500).json({
+          error: 'Preprocessing failed',
+          code,
+          stderr: stderr.trim(),
+          stdout: stdout.trim(),
+        });
+      }
+    });
+
+    child.on('error', (err: Error) => {
+      res.status(500).json({ error: `Failed to spawn process: ${err.message}` });
+    });
+  } catch (error) {
+    console.error('[Training] Preprocess error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Preprocessing failed' });
+  }
+});
+
+// POST /api/training/scan-directory — Scan a directory for audio files (Node.js implementation)
+router.post('/scan-directory', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const {
+      audioDir,
+      datasetName = 'my_lora_dataset',
+      customTag = '',
+      tagPosition = 'prepend',
+      allInstrumental = true,
+    } = req.body;
+
+    if (!audioDir || typeof audioDir !== 'string') {
+      res.status(400).json({ error: 'audioDir is required' });
+      return;
+    }
+
+    // Resolve path — if relative, resolve from ACE-Step dir
+    const aceStepDir = getAceStepDir();
+    const resolvedDir = path.isAbsolute(audioDir)
+      ? audioDir
+      : path.resolve(aceStepDir, audioDir);
+
+    if (!existsSync(resolvedDir)) {
+      res.status(400).json({ error: `Directory not found: ${audioDir}` });
+      return;
+    }
+
+    // Scan for audio files
+    const entries = readdirSync(resolvedDir);
+    const audioFiles = entries.filter(f => AUDIO_EXTENSIONS.includes(path.extname(f).toLowerCase()));
+    if (audioFiles.length === 0) {
+      res.status(400).json({ error: 'No audio files found in directory' });
+      return;
+    }
+
+    // Build table data matching Gradio's format: [#, Filename, Duration, Lyrics, Labeled, BPM, Key, Caption]
+    const tableHeaders = ['#', 'Filename', 'Duration', 'Lyrics', 'Labeled', 'BPM', 'Key', 'Caption'];
+    const tableData = audioFiles.map((filename, i) => {
+      const audioPath = path.join(resolvedDir, filename);
+      const duration = getAudioDuration(audioPath);
+      const baseName = path.basename(filename, path.extname(filename));
+
+      // Check for companion .txt lyrics file
+      let lyrics = allInstrumental ? '[Instrumental]' : '';
+      const lyricsPath = path.join(resolvedDir, `${baseName}.txt`);
+      if (existsSync(lyricsPath)) {
+        try {
+          lyrics = readFileSync(lyricsPath, 'utf-8').trim().slice(0, 50) + '...';
+        } catch { /* ignore */ }
+      }
+
+      return [i + 1, filename, `${duration}s`, lyrics, '❌', '', '', ''];
+    });
+
+    res.json({
+      status: `Found ${audioFiles.length} audio files`,
+      dataframe: {
+        headers: tableHeaders,
+        data: tableData,
+      },
+      sampleCount: audioFiles.length,
+      audioDir: resolvedDir,
+    });
+  } catch (error) {
+    console.error('[Training] Scan directory error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to scan directory' });
+  }
+});
+
+// POST /api/training/auto-label — Auto-label dataset samples
+// NOTE: Auto-labeling requires the DIT model + LLM to be loaded in Gradio.
+// This endpoint attempts to call the Gradio handler. If the Gradio app does not
+// expose auto_label_all as a named API, this will fail and the user should use
+// the Gradio UI directly.
+router.post('/auto-label', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const {
+      skipMetas = false,
+      formatLyrics = false,
+      transcribeLyrics = false,
+      onlyUnlabeled = false,
+    } = req.body;
+
+    // auto_label_all is a lambda-wrapped handler in Gradio, so it may not be accessible
+    // by name. We try the likely endpoint name; if it fails, return a helpful message.
+    const client = await getGradioClient();
+    try {
+      const result = await client.predict('/auto_label_all', [
+        skipMetas,
+        formatLyrics,
+        transcribeLyrics,
+        onlyUnlabeled,
+      ]);
+      const data = result.data as unknown[];
+      res.json({
+        dataframe: data[0],
+        status: data[1],
+      });
+    } catch (gradioError) {
+      // Lambda endpoints aren't named — suggest using Gradio UI
+      res.status(501).json({
+        error: 'Auto-labeling requires the Gradio UI. The model must be initialized and the dataset loaded in the Gradio training tab.',
+        hint: 'Use the Gradio UI at the ACE-Step server URL to auto-label your dataset, then reload it here.',
+      });
+    }
+  } catch (error) {
+    console.error('[Training] Auto-label error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Auto-label failed' });
+  }
+});
+
+// POST /api/training/init-model — Initialize or change model for training
+// NOTE: Model initialization requires the Gradio app. This endpoint attempts to
+// call the init_service_wrapper. Since it's a lambda, this may not be accessible.
+router.post('/init-model', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const {
+      checkpoint,
+      configPath,
+      device = 'auto',
+      initLlm = false,
+      lmModelPath = '',
+      backend = 'pt',
+      useFlashAttention = false,
+      offloadToCpu = false,
+      offloadDitToCpu = false,
+      compileModel = false,
+      quantization = false,
+    } = req.body;
+
+    const client = await getGradioClient();
+    try {
+      // Try calling by function name (may work if Gradio auto-names it)
+      const result = await client.predict('/init_service_wrapper', [
+        checkpoint ?? '',
+        configPath ?? '',
+        device,
+        initLlm,
+        lmModelPath,
+        backend,
+        useFlashAttention,
+        offloadToCpu,
+        offloadDitToCpu,
+        compileModel,
+        quantization,
+      ]);
+      const data = result.data as unknown[];
+      res.json({
+        status: data[0],
+        modelReady: !!data[1],
+      });
+    } catch (gradioError) {
+      // Lambda endpoints aren't named — suggest using Gradio UI
+      res.status(501).json({
+        error: 'Model initialization requires the Gradio UI.',
+        hint: 'Initialize the model in the ACE-Step Gradio UI service configuration section, then return here for training.',
+      });
+    }
+  } catch (error) {
+    console.error('[Training] Init model error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Model init failed' });
+  }
+});
+
+// GET /api/training/checkpoints — List available model checkpoints
+router.get('/checkpoints', authMiddleware, async (_req: AuthenticatedRequest, res: Response) => {
+  try {
+    const aceStepDir = getAceStepDir();
+    const checkpointDir = path.join(aceStepDir, 'checkpoints');
+    if (!existsSync(checkpointDir)) {
+      res.json({ checkpoints: [], configs: [] });
+      return;
+    }
+
+    // List checkpoint directories
+    const entries = readdirSync(checkpointDir);
+    const checkpoints = entries.filter(e => {
+      const fullPath = path.join(checkpointDir, e);
+      return statSync(fullPath).isDirectory();
+    });
+
+    // List config directories (acestep-v15-*)
+    const configDirs = entries.filter(e =>
+      e.startsWith('acestep-v15') && statSync(path.join(checkpointDir, e)).isDirectory()
+    );
+
+    res.json({ checkpoints, configs: configDirs });
+  } catch (error) {
+    console.error('[Training] List checkpoints error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to list checkpoints' });
+  }
+});
+
+// GET /api/training/lora-checkpoints — List LoRA training checkpoints in output dir
+router.get('/lora-checkpoints', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const outputDir = (req.query.dir as string) || './lora_output';
+    const aceStepDir = getAceStepDir();
+    const resolvedDir = path.isAbsolute(outputDir)
+      ? outputDir
+      : path.resolve(aceStepDir, outputDir);
+
+    if (!existsSync(resolvedDir)) {
+      res.json({ checkpoints: [] });
+      return;
+    }
+
+    const entries = readdirSync(resolvedDir);
+    const checkpointsDir = path.join(resolvedDir, 'checkpoints');
+    const checkpoints: string[] = [];
+
+    if (existsSync(checkpointsDir)) {
+      const cpEntries = readdirSync(checkpointsDir);
+      cpEntries.forEach(e => {
+        if (statSync(path.join(checkpointsDir, e)).isDirectory()) {
+          checkpoints.push(path.join(checkpointsDir, e));
+        }
+      });
+    }
+
+    // Also check for "final" directory
+    const finalDir = path.join(resolvedDir, 'final');
+    if (existsSync(finalDir)) {
+      checkpoints.push(finalDir);
+    }
+
+    res.json({ checkpoints, outputDir: resolvedDir });
+  } catch (error) {
+    console.error('[Training] List LoRA checkpoints error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to list checkpoints' });
+  }
+});
+
+// ================== EXISTING ROUTES ==================
+
+// POST /api/training/load-dataset — Load an existing dataset JSON for preprocessing
+router.post('/load-dataset', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { datasetPath } = req.body;
+    if (!datasetPath || typeof datasetPath !== 'string') {
+      res.status(400).json({ error: 'datasetPath is required' });
+      return;
+    }
+    // Reject path traversal
+    if (datasetPath.includes('..')) {
+      res.status(400).json({ error: 'Invalid path' });
+      return;
+    }
+
+    const client = await getGradioClient();
+    const result = await client.predict('/load_existing_dataset_for_preprocess', [datasetPath]);
+    const data = result.data as unknown[];
+
+    // Returns: [status, dataframe, sampleIdx, audioPreview, filename, caption, genre,
+    //           promptOverride, lyrics, bpm, key, timesig, duration, language, instrumental,
+    //           rawLyrics, datasetName, customTag, tagPosition, allInstrumental, genreRatio]
+    res.json({
+      status: data[0],
+      dataframe: data[1],
+      sampleCount: Array.isArray((data[1] as any)?.data) ? (data[1] as any).data.length : 0,
+      sample: {
+        index: data[2],
+        audio: data[3],
+        filename: data[4],
+        caption: data[5],
+        genre: data[6],
+        promptOverride: data[7],
+        lyrics: data[8],
+        bpm: data[9],
+        key: data[10],
+        timeSignature: data[11],
+        duration: data[12],
+        language: data[13],
+        instrumental: data[14],
+        rawLyrics: data[15],
+      },
+      settings: {
+        datasetName: data[16],
+        customTag: data[17],
+        tagPosition: data[18],
+        allInstrumental: data[19],
+        genreRatio: data[20],
+      },
+    });
+  } catch (error) {
+    console.error('[Training] Load dataset error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to load dataset' });
+  }
+});
+
+// GET /api/training/sample-preview — Get preview data for a specific sample
+router.get('/sample-preview', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const idx = parseInt(req.query.idx as string) || 0;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/get_sample_preview', [idx]);
+    const data = result.data as unknown[];
+
+    // Returns: [audio, filename, caption, genre, promptOverride, lyrics, bpm, key, timesig, duration, language, instrumental, rawLyrics]
+    res.json({
+      audio: data[0],
+      filename: data[1],
+      caption: data[2],
+      genre: data[3],
+      promptOverride: data[4],
+      lyrics: data[5],
+      bpm: data[6],
+      key: data[7],
+      timeSignature: data[8],
+      duration: data[9],
+      language: data[10],
+      instrumental: data[11],
+      rawLyrics: data[12],
+    });
+  } catch (error) {
+    console.error('[Training] Sample preview error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to get sample preview' });
+  }
+});
+
+// POST /api/training/save-sample — Save edits to a dataset sample
+router.post('/save-sample', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { sampleIdx, caption, genre, promptOverride, lyrics, bpm, key, timeSignature, language, instrumental } = req.body;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/save_sample_edit', [
+      sampleIdx ?? 0,
+      caption ?? '',
+      genre ?? '',
+      promptOverride ?? 'Use Global Ratio',
+      lyrics ?? '',
+      bpm ?? 120,
+      key ?? '',
+      timeSignature ?? '',
+      language ?? 'instrumental',
+      instrumental ?? true,
+    ]);
+    const data = result.data as unknown[];
+
+    // Returns: [dataframe, editStatus]
+    res.json({
+      dataframe: data[0],
+      status: data[1],
+    });
+  } catch (error) {
+    console.error('[Training] Save sample error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to save sample edit' });
+  }
+});
+
+// POST /api/training/update-settings — Update dataset global settings
+router.post('/update-settings', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { customTag, tagPosition, allInstrumental, genreRatio } = req.body;
+
+    const client = await getGradioClient();
+    await client.predict('/update_settings', [
+      customTag ?? '',
+      tagPosition ?? 'replace',
+      allInstrumental ?? true,
+      genreRatio ?? 0,
+    ]);
+
+    res.json({ success: true });
+  } catch (error) {
+    console.error('[Training] Update settings error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to update settings' });
+  }
+});
+
+// POST /api/training/save-dataset — Save the dataset to a JSON file
+router.post('/save-dataset', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { savePath, datasetName } = req.body;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/save_dataset', [
+      savePath ?? './datasets/my_lora_dataset.json',
+      datasetName ?? 'my_lora_dataset',
+    ]);
+    const data = result.data as unknown[];
+
+    // Returns: [saveStatus, savePath]
+    res.json({
+      status: data[0],
+      path: data[1],
+    });
+  } catch (error) {
+    console.error('[Training] Save dataset error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to save dataset' });
+  }
+});
+
+// POST /api/training/load-tensors — Load preprocessed tensors for training
+router.post('/load-tensors', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { tensorDir } = req.body;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/load_training_dataset', [
+      tensorDir ?? './datasets/preprocessed_tensors',
+    ]);
+    const data = result.data as unknown[];
+
+    res.json({ status: data[0] });
+  } catch (error) {
+    console.error('[Training] Load tensors error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to load training dataset' });
+  }
+});
+
+// POST /api/training/start — Start LoRA training
+router.post('/start', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const {
+      tensorDir, rank, alpha, dropout, learningRate,
+      epochs, batchSize, gradientAccumulation, saveEvery,
+      shift, seed, outputDir, resumeCheckpoint,
+    } = req.body;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/training_wrapper', [
+      tensorDir ?? './datasets/preprocessed_tensors',
+      rank ?? 64,
+      alpha ?? 128,
+      dropout ?? 0.1,
+      learningRate ?? 0.0003,
+      epochs ?? 1000,
+      batchSize ?? 1,
+      gradientAccumulation ?? 1,
+      saveEvery ?? 200,
+      shift ?? 3.0,
+      seed ?? 42,
+      outputDir ?? './lora_output',
+      resumeCheckpoint ?? null,
+    ]);
+    const data = result.data as unknown[];
+
+    // Returns: [trainingProgress, trainingLog, lineplotData]
+    res.json({
+      progress: data[0],
+      log: data[1],
+      metrics: data[2],
+    });
+  } catch (error) {
+    console.error('[Training] Start training error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to start training' });
+  }
+});
+
+// POST /api/training/stop — Stop current training
+router.post('/stop', authMiddleware, async (_req: AuthenticatedRequest, res: Response) => {
+  try {
+    const client = await getGradioClient();
+    const result = await client.predict('/stop_training', []);
+    const data = result.data as unknown[];
+
+    res.json({ status: data[0] });
+  } catch (error) {
+    console.error('[Training] Stop training error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to stop training' });
+  }
+});
+
+// POST /api/training/export — Export trained LoRA weights
+router.post('/export', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { exportPath, loraOutputDir } = req.body;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/export_lora', [
+      exportPath ?? './lora_output/final_lora',
+      loraOutputDir ?? './lora_output',
+    ]);
+    const data = result.data as unknown[];
+
+    res.json({ status: data[0] });
+  } catch (error) {
+    console.error('[Training] Export LoRA error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to export LoRA' });
+  }
+});
+
+// POST /api/training/import-dataset — Import train/test split
+router.post('/import-dataset', authMiddleware, async (req: AuthenticatedRequest, res: Response) => {
+  try {
+    const { datasetType } = req.body;
+
+    const client = await getGradioClient();
+    const result = await client.predict('/import_dataset', [
+      datasetType ?? 'train',
+    ]);
+    const data = result.data as unknown[];
+
+    res.json({ status: data[0] });
+  } catch (error) {
+    console.error('[Training] Import dataset error:', error);
+    res.status(500).json({ error: error instanceof Error ? error.message : 'Failed to import dataset' });
+  }
+});
+
+export default router;
diff --git a/server/src/scripts/test-queue.ts b/server/src/scripts/test-queue.ts
index d0a0570..1c2f55e 100644
--- a/server/src/scripts/test-queue.ts
+++ b/server/src/scripts/test-queue.ts
@@ -31,9 +31,11 @@ async function main() {
         tier: job.tier as 'free' | 'pro' | 'unlimited',
         createdAt: Date.now(),
         params: {
+          customMode: true,
           lyrics: 'test',
           style: 'test',
           title: 'test',
+          instrumental: false,
           duration: 30,
         },
         run: async () => {
diff --git a/server/src/services/acestep.ts b/server/src/services/acestep.ts
index a3dbe18..cb76c54 100644
--- a/server/src/services/acestep.ts
+++ b/server/src/services/acestep.ts
@@ -34,8 +34,8 @@ function resolveAceStepPath(): string {
   if (envPath) {
     return path.isAbsolute(envPath) ? envPath : path.resolve(process.cwd(), envPath);
   }
-  // Default: sibling directory
-  return path.resolve(__dirname, '../../../../ACE-Step-1.5');
+  // Default: sibling directory (server/src/services -> ../../../ACE-Step-1.5 = app/ACE-Step-1.5)
+  return path.resolve(__dirname, '../../../ACE-Step-1.5');
 }
 
 // Resolve Python path cross-platform (supports venv and portable installations)
@@ -54,11 +54,22 @@ export function resolvePythonPath(baseDir: string): string {
     return portablePath;
   }
 
-  // Standard venv path (different structure on Windows vs Unix)
-  if (isWindows) {
-    return path.join(baseDir, '.venv', 'Scripts', pythonExe);
+  // Check common venv directory names (Pinokio uses 'env', others use '.venv' or 'venv')
+  const venvDirs = ['env', '.venv', 'venv'];
+  for (const venvDir of venvDirs) {
+    const venvPython = isWindows
+      ? path.join(baseDir, venvDir, 'Scripts', pythonExe)
+      : path.join(baseDir, venvDir, 'bin', 'python');
+    if (existsSync(venvPython)) {
+      return venvPython;
+    }
   }
-  return path.join(baseDir, '.venv', 'bin', 'python');
+
+  // Fallback to first option (will produce a clear error if not found)
+  if (isWindows) {
+    return path.join(baseDir, 'env', 'Scripts', pythonExe);
+  }
+  return path.join(baseDir, 'env', 'bin', 'python');
 }
 
 const ACESTEP_DIR = resolveAceStepPath();
@@ -99,7 +110,11 @@ async function prepareAudioFile(audioUrl: string | undefined): Promise<unknown>
   try {
     const buffer = await readFile(filePath);
     const ext = path.extname(filePath).toLowerCase();
-    const mimeType = ext === '.flac' ? 'audio/flac' : ext === '.wav' ? 'audio/wav' : 'audio/mpeg';
+    const mimeMap: Record<string, string> = {
+      '.flac': 'audio/flac', '.wav': 'audio/wav', '.ogg': 'audio/ogg',
+      '.opus': 'audio/opus', '.m4a': 'audio/mp4', '.mp4': 'audio/mp4',
+    };
+    const mimeType = mimeMap[ext] || 'audio/mpeg';
     const blob = new Blob([buffer], { type: mimeType });
     return handle_file(blob);
   } catch (error) {
@@ -113,7 +128,7 @@ async function prepareAudioFile(audioUrl: string | undefined): Promise<unknown>
 }
 
 /**
- * Build the 45 positional arguments for the Gradio /generation_wrapper endpoint.
+ * Build the 50 positional arguments for the Gradio /generation_wrapper endpoint.
  */
 async function buildGradioArgs(params: GenerationParams): Promise<unknown[]> {
   const caption = params.style || 'pop music';
@@ -138,7 +153,7 @@ async function buildGradioArgs(params: GenerationParams): Promise<unknown[]> {
     String(params.seed ?? -1),                                    //  9: Seed
     referenceAudio,                                               // 10: Reference Audio (filepath | null)
     params.duration && params.duration > 0 ? params.duration : -1, // 11: Audio Duration (-1 = auto)
-    params.batchSize ?? 1,                                        // 12: Batch Size
+    Math.min(Math.max(params.batchSize ?? 1, 1), 16),            // 12: Batch Size (clamped 1-16)
     sourceAudio,                                                  // 13: Source Audio (filepath | null)
     params.audioCodes || '',                                      // 14: LM Codes Hints
     params.repaintingStart ?? 0.0,                                // 15: Repainting Start
@@ -162,15 +177,20 @@ async function buildGradioArgs(params: GenerationParams): Promise<unknown[]> {
     isThinking ? (params.useCotMetas ?? true) : false,            // 33: CoT Metas
     isThinking ? (params.useCotCaption ?? true) : false,          // 34: CaptionRewrite
     isThinking ? (params.useCotLanguage ?? true) : false,         // 35: CoT Language
-    params.constrainedDecodingDebug ?? false,                     // 36: Constrained Decoding Debug
-    params.allowLmBatch ?? true,                                  // 37: ParallelThinking
-    params.getScores ?? false,                                    // 38: Auto Score
-    params.getLrc ?? false,                                       // 39: Auto LRC
-    params.scoreScale ?? 0.5,                                     // 40: Quality Score Sensitivity
-    params.lmBatchChunkSize ?? 8,                                 // 41: LM Batch Chunk Size
-    params.trackName || '',                                       // 42: Track Name
-    params.completeTrackClasses || [],                            // 43: Track Names
-    params.autogen ?? false,                                      // 44: AutoGen
+    params.isFormatCaption ?? false,                              // 36: Is Format Caption State
+    params.constrainedDecodingDebug ?? false,                     // 37: Constrained Decoding Debug
+    params.allowLmBatch ?? true,                                  // 38: ParallelThinking
+    params.getScores ?? false,                                    // 39: Auto Score
+    params.getLrc ?? false,                                       // 40: Auto LRC
+    params.scoreScale ?? 0.5,                                     // 41: Quality Score Sensitivity
+    params.lmBatchChunkSize ?? 8,                                 // 42: LM Batch Chunk Size
+    params.trackName || null,                                     // 43: Track Name
+    params.completeTrackClasses || [],                            // 44: Track Names
+    params.autogen ?? false,                                      // 45: AutoGen
+    0,                                                            // 46: Current Batch Index
+    1,                                                            // 47: Total Batches
+    [],                                                           // 48: Batch Queue
+    {},                                                           // 49: Generation Params State
   ];
 }
 
@@ -191,14 +211,20 @@ async function downloadGradioAudioFile(
     return;
   }
 
-  // Fall back to HTTP download via Gradio URL
+  // Fall back to HTTP download via Gradio URL (use temp file for atomicity)
   if (fileObj.url) {
     const response = await fetch(fileObj.url);
     if (!response.ok) {
       throw new Error(`Failed to download Gradio audio: ${response.status}`);
     }
     const buffer = Buffer.from(await response.arrayBuffer());
-    await writeFile(destPath, buffer);
+    if (buffer.length === 0) {
+      throw new Error('Downloaded audio file is empty');
+    }
+    const tmpPath = destPath + '.tmp';
+    await writeFile(tmpPath, buffer);
+    const { rename } = await import('fs/promises');
+    await rename(tmpPath, destPath);
     return;
   }
 
@@ -319,6 +345,9 @@ interface ActiveJob {
 
 const activeJobs = new Map<string, ActiveJob>();
 
+// Periodic cleanup of old jobs (every 10 minutes, remove jobs older than 1 hour)
+setInterval(() => cleanupOldJobs(3600000), 600000);
+
 // Job queue for sequential processing (GPU can only handle one job at a time)
 const jobQueue: string[] = [];
 let isProcessingQueue = false;
@@ -453,6 +482,10 @@ async function processGenerationViaGradio(
   const result = await client.predict('/generation_wrapper', args);
   const data = result.data as unknown[];
 
+  if (!Array.isArray(data) || data.length === 0) {
+    throw new Error(`Gradio returned unexpected data format: ${typeof data}`);
+  }
+
   // Extract audio files from the result
   // Outputs 0-7: individual audio samples (filepath objects)
   // Output 8: "All Generated Files" as list[filepath]
@@ -696,7 +729,7 @@ interface PythonResult {
   error?: string;
 }
 
-function runPythonGeneration(scriptArgs: string[]): Promise<PythonResult> {
+function runPythonGeneration(scriptArgs: string[], timeoutMs = 600000): Promise<PythonResult> {
   return new Promise((resolve) => {
     const pythonPath = resolvePythonPath(ACESTEP_DIR);
     const args = [PYTHON_SCRIPT, ...scriptArgs];
@@ -709,6 +742,13 @@ function runPythonGeneration(scriptArgs: string[]): Promise<PythonResult> {
       },
     });
 
+    // Kill process after timeout (default 10 minutes)
+    const timer = setTimeout(() => {
+      proc.kill('SIGTERM');
+      setTimeout(() => { if (!proc.killed) proc.kill('SIGKILL'); }, 5000);
+      resolve({ success: false, error: `Generation timed out after ${timeoutMs / 1000}s` });
+    }, timeoutMs);
+
     let stdout = '';
     let stderr = '';
 
@@ -727,6 +767,7 @@ function runPythonGeneration(scriptArgs: string[]): Promise<PythonResult> {
     });
 
     proc.on('close', (code) => {
+      clearTimeout(timer);
       if (code !== 0) {
         resolve({ success: false, error: stderr || `Process exited with code ${code}` });
         return;
@@ -749,6 +790,7 @@ function runPythonGeneration(scriptArgs: string[]): Promise<PythonResult> {
     });
 
     proc.on('error', (err) => {
+      clearTimeout(timer);
       resolve({ success: false, error: err.message });
     });
   });
@@ -831,6 +873,20 @@ export async function getAudioStream(audioPath: string): Promise<Response> {
     }
   }
 
+  // Absolute path — try reading directly from disk (Gradio output files)
+  if (audioPath.startsWith('/')) {
+    try {
+      const buffer = await readFile(audioPath);
+      const ext = audioPath.endsWith('.flac') ? 'flac' : audioPath.endsWith('.wav') ? 'wav' : 'mpeg';
+      return new Response(buffer, {
+        status: 200,
+        headers: { 'Content-Type': `audio/${ext}` }
+      });
+    } catch {
+      // Fall through to Gradio API
+    }
+  }
+
   const url = `${ACESTEP_API}/v1/audio?path=${encodeURIComponent(audioPath)}`;
   console.log('Fetching audio from:', url);
   return fetch(url);
diff --git a/services/api.ts b/services/api.ts
index b49bb67..0e8e0de 100644
--- a/services/api.ts
+++ b/services/api.ts
@@ -106,6 +106,7 @@ export interface Song {
   user_id?: string;
   created_at: string;
   creator?: string;
+  creator_avatar?: string;
   ditModel?: string;
   generation_params?: any;
 }
@@ -311,11 +312,14 @@ export interface GenerationParams {
 
 export interface GenerationJob {
   jobId: string;
+  id?: string;
   status: 'pending' | 'queued' | 'running' | 'succeeded' | 'failed';
   queuePosition?: number;
   etaSeconds?: number;
   progress?: number;
   stage?: string;
+  params?: any;
+  created_at?: string;
   result?: {
     audioUrls: string[];
     bpm?: number;
@@ -375,6 +379,13 @@ export const generateApi = {
     error?: string;
   }> => api('/api/generate/format', { method: 'POST', body: params, token }),
 
+  // Random description from Gradio's example library
+  getRandomDescription: (token: string): Promise<{
+    description: string;
+    instrumental: boolean;
+    vocalLanguage: string;
+  }> => api('/api/generate/random-description', { token }),
+
   // LoRA Inference (requires ACE-Step training fork)
   loadLora: (params: {
     lora_path: string;
@@ -393,6 +404,20 @@ export const generateApi = {
     message: string;
     scale: number;
   }> => api('/api/lora/scale', { method: 'POST', body: params, token }),
+
+  toggleLora: (params: {
+    enabled: boolean;
+  }, token: string): Promise<{
+    message: string;
+    active: boolean;
+  }> => api('/api/lora/toggle', { method: 'POST', body: params, token }),
+
+  getLoraStatus: (token: string): Promise<{
+    loaded: boolean;
+    active: boolean;
+    scale: number;
+    path: string;
+  }> => api('/api/lora/status', { token }),
 };
 
 // Users API
@@ -532,3 +557,238 @@ export const contactApi = {
   submit: (data: ContactFormData): Promise<{ success: boolean; message: string; id: string }> =>
     api('/api/contact', { method: 'POST', body: data }),
 };
+
+// Training API (LoRA fine-tuning via Gradio)
+export interface TrainingSample {
+  audio: unknown;
+  filename: string;
+  caption: string;
+  genre: string;
+  promptOverride: string;
+  lyrics: string;
+  bpm: number;
+  key: string;
+  timeSignature: string;
+  duration: number;
+  language: string;
+  instrumental: boolean;
+  rawLyrics?: string;
+}
+
+export interface DatasetSettings {
+  datasetName: string;
+  customTag: string;
+  tagPosition: 'prepend' | 'append' | 'replace';
+  allInstrumental: boolean;
+  genreRatio: number;
+}
+
+export interface TrainingParams {
+  tensorDir?: string;
+  rank?: number;
+  alpha?: number;
+  dropout?: number;
+  learningRate?: number;
+  epochs?: number;
+  batchSize?: number;
+  gradientAccumulation?: number;
+  saveEvery?: number;
+  shift?: number;
+  seed?: number;
+  outputDir?: string;
+  resumeCheckpoint?: string | null;
+}
+
+// Helper: build proxy URL for training audio files
+export function getTrainingAudioUrl(audioPath: unknown, token?: string): string | undefined {
+  if (!audioPath) return undefined;
+
+  // Handle Gradio FileData objects
+  if (typeof audioPath === 'object' && audioPath !== null) {
+    const fd = audioPath as Record<string, unknown>;
+    if (fd.url && typeof fd.url === 'string') return fd.url;
+    if (fd.path && typeof fd.path === 'string') {
+      return `${API_BASE}/api/training/audio?path=${encodeURIComponent(fd.path)}`;
+    }
+    return undefined;
+  }
+
+  // Handle absolute path string
+  if (typeof audioPath === 'string') {
+    if (audioPath.startsWith('http://') || audioPath.startsWith('https://') || audioPath.startsWith('/audio/')) {
+      return audioPath;
+    }
+    return `${API_BASE}/api/training/audio?path=${encodeURIComponent(audioPath)}`;
+  }
+
+  return undefined;
+}
+
+export const trainingApi = {
+  // Upload audio files for a dataset
+  uploadAudio: async (files: File[], datasetName: string, token: string): Promise<{
+    files: Array<{ filename: string; originalName: string; size: number; path: string }>;
+    uploadDir: string;
+    count: number;
+  }> => {
+    const formData = new FormData();
+    formData.append('datasetName', datasetName);
+    for (const file of files) {
+      formData.append('audio', file);
+    }
+    const response = await fetch(`${API_BASE}/api/training/upload-audio`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${token}` },
+      body: formData,
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Upload failed' }));
+      throw new Error(error.error || 'Upload failed');
+    }
+    return response.json();
+  },
+
+  // Build dataset JSON from uploaded audio files
+  buildDataset: (params: {
+    datasetName: string;
+    customTag?: string;
+    tagPosition?: string;
+    allInstrumental?: boolean;
+  }, token: string): Promise<{
+    status: string;
+    dataframe: unknown;
+    sampleCount: number;
+    sample: TrainingSample;
+    settings: DatasetSettings;
+    datasetPath: string;
+  }> => api('/api/training/build-dataset', { method: 'POST', body: params, token }),
+
+  // Scan directory for audio files (Node.js implementation)
+  scanDirectory: (params: {
+    audioDir: string;
+    datasetName?: string;
+    customTag?: string;
+    tagPosition?: string;
+    allInstrumental?: boolean;
+  }, token: string): Promise<{
+    status: string;
+    dataframe: unknown;
+    sampleCount: number;
+    audioDir: string;
+  }> => api('/api/training/scan-directory', { method: 'POST', body: params, token }),
+
+  // Auto-label dataset samples (requires model loaded in Gradio)
+  autoLabel: (params: {
+    skipMetas?: boolean;
+    formatLyrics?: boolean;
+    transcribeLyrics?: boolean;
+    onlyUnlabeled?: boolean;
+  }, token: string): Promise<{
+    dataframe?: unknown;
+    status: string;
+    error?: string;
+    hint?: string;
+  }> => api('/api/training/auto-label', { method: 'POST', body: params, token }),
+
+  // Initialize model for training (requires Gradio)
+  initModel: (params: {
+    checkpoint?: string;
+    configPath?: string;
+    device?: string;
+    initLlm?: boolean;
+    lmModelPath?: string;
+    backend?: string;
+    useFlashAttention?: boolean;
+    offloadToCpu?: boolean;
+    offloadDitToCpu?: boolean;
+    compileModel?: boolean;
+    quantization?: boolean;
+  }, token: string): Promise<{
+    status: string;
+    modelReady?: boolean;
+    error?: string;
+    hint?: string;
+  }> => api('/api/training/init-model', { method: 'POST', body: params, token }),
+
+  // List available checkpoints
+  getCheckpoints: (token: string): Promise<{
+    checkpoints: string[];
+    configs: string[];
+  }> => api('/api/training/checkpoints', { token }),
+
+  // List LoRA training checkpoints
+  getLoraCheckpoints: (dir: string, token: string): Promise<{
+    checkpoints: string[];
+    outputDir: string;
+  }> => api(`/api/training/lora-checkpoints?dir=${encodeURIComponent(dir)}`, { token }),
+
+  // Preprocess dataset to tensors
+  preprocess: (params: {
+    datasetPath: string;
+    outputDir?: string;
+  }, token: string): Promise<{
+    status: string;
+    message?: string;
+    output_files?: number;
+  }> => api('/api/training/preprocess', { method: 'POST', body: params, token }),
+
+  loadDataset: (datasetPath: string, token: string): Promise<{
+    status: string;
+    dataframe: unknown;
+    sampleCount: number;
+    sample: TrainingSample;
+    settings: DatasetSettings;
+  }> => api('/api/training/load-dataset', { method: 'POST', body: { datasetPath }, token }),
+
+  getSamplePreview: (idx: number, token: string): Promise<TrainingSample> =>
+    api(`/api/training/sample-preview?idx=${idx}`, { token }),
+
+  saveSample: (params: {
+    sampleIdx: number;
+    caption: string;
+    genre: string;
+    promptOverride: string;
+    lyrics: string;
+    bpm: number;
+    key: string;
+    timeSignature: string;
+    language: string;
+    instrumental: boolean;
+  }, token: string): Promise<{ dataframe: unknown; status: string }> =>
+    api('/api/training/save-sample', { method: 'POST', body: params, token }),
+
+  updateSettings: (params: {
+    customTag: string;
+    tagPosition: string;
+    allInstrumental: boolean;
+    genreRatio: number;
+  }, token: string): Promise<{ success: boolean }> =>
+    api('/api/training/update-settings', { method: 'POST', body: params, token }),
+
+  saveDataset: (params: {
+    savePath?: string;
+    datasetName?: string;
+  }, token: string): Promise<{ status: string; path: string }> =>
+    api('/api/training/save-dataset', { method: 'POST', body: params, token }),
+
+  loadTensors: (tensorDir: string, token: string): Promise<{ status: string }> =>
+    api('/api/training/load-tensors', { method: 'POST', body: { tensorDir }, token }),
+
+  startTraining: (params: TrainingParams, token: string): Promise<{
+    progress: string;
+    log: string;
+    metrics: unknown;
+  }> => api('/api/training/start', { method: 'POST', body: params, token }),
+
+  stopTraining: (token: string): Promise<{ status: string }> =>
+    api('/api/training/stop', { method: 'POST', token }),
+
+  exportLora: (params: {
+    exportPath?: string;
+    loraOutputDir?: string;
+  }, token: string): Promise<{ status: string }> =>
+    api('/api/training/export', { method: 'POST', body: params, token }),
+
+  importDataset: (datasetType: string, token: string): Promise<{ status: string }> =>
+    api('/api/training/import-dataset', { method: 'POST', body: { datasetType }, token }),
+};
diff --git a/types.ts b/types.ts
index c8e0b85..8f827ec 100644
--- a/types.ts
+++ b/types.ts
@@ -151,4 +151,4 @@ export interface UserProfile {
 }
 
 // Simplified views for ACE-Step UI
-export type View = 'create' | 'library' | 'profile' | 'song' | 'playlist' | 'search';
+export type View = 'create' | 'library' | 'training' | 'profile' | 'song' | 'playlist' | 'search' | 'news';