diff --git a/App.tsx b/App.tsx
index 0f8bdfd..2ef185c 100644
--- a/App.tsx
+++ b/App.tsx
@@ -15,6 +15,7 @@ import { Song, GenerationParams, View, Playlist } from './types';
 import { generateApi, songsApi, playlistsApi, getAudioUrl } from './services/api';
 import { useAuth } from './context/AuthContext';
 import { useResponsive } from './context/ResponsiveContext';
+import { lmService } from './services/lmService';
 import { List } from 'lucide-react';
 import { PlaylistDetail } from './components/PlaylistDetail';
 import { Toast, ToastType } from './components/Toast';
@@ -28,9 +29,10 @@ export default function App() {
   // Auth
   const { user, token, isAuthenticated, isLoading: authLoading, setupUser, logout } = useAuth();
   const [showUsernameModal, setShowUsernameModal] = useState(false);
-  // Track multiple concurrent generation jobs
-  const activeJobsRef = useRef<Map<string, { tempId: string; pollInterval: ReturnType<typeof setInterval> }>>(new Map());
+  const activeJobsRef = useRef<Map<string, { tempId: string, pollInterval: NodeJS.Timeout }>>(new Map());
   const [activeJobCount, setActiveJobCount] = useState(0);
+  const radioStartedRef = useRef(false);
+  const generationLockRef = useRef(false);
 
   // Theme State
   const [theme, setTheme] = useState<'dark' | 'light'>(() => {
@@ -62,6 +64,8 @@ export default function App() {
   const [volume, setVolume] = useState(0.8);
   const [isShuffle, setIsShuffle] = useState(false);
   const [repeatMode, setRepeatMode] = useState<'none' | 'all' | 'one'>('all');
+  const [isRadioMode, setIsRadioMode] = useState(false);
+  const [radioParams, setRadioParams] = useState<GenerationParams | null>(null);
 
   // UI State
   const [isGenerating, setIsGenerating] = useState(false);
@@ -97,7 +101,7 @@ export default function App() {
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const pendingSeekRef = useRef<number | null>(null);
-  const playNextRef = useRef<() => void>(() => {});
+  const playNextRef = useRef<() => void>(() => { });
 
   // Mobile Details Modal State
   const [showMobileDetails, setShowMobileDetails] = useState(false);
@@ -328,6 +332,35 @@ export default function App() {
     loadSongs();
   }, [isAuthenticated, token]);
 
+  // Re-sort songs when Radio Mode changes to ensure correct display order
+  useEffect(() => {
+    setSongs(prev => {
+      const sorted = [...prev].sort((a, b) => {
+        const timeA = new Date(a.createdAt).getTime();
+        const timeB = new Date(b.createdAt).getTime();
+        return isRadioMode ? timeA - timeB : timeB - timeA;
+      });
+      return sorted;
+    });
+  }, [isRadioMode]);
+
+  // Sync currentSong with updated song references from songs list
+  // This is crucial for Radio Mode to pick up audioUrl when generation finishes
+  useEffect(() => {
+    if (currentSong) {
+      const updated = songs.find(s => s.id === currentSong.id);
+      if (updated && updated !== currentSong) {
+        setCurrentSong(updated);
+      }
+    }
+    if (selectedSong) {
+      const updated = songs.find(s => s.id === selectedSong.id);
+      if (updated && updated !== selectedSong) {
+        setSelectedSong(updated);
+      }
+    }
+  }, [songs, currentSong, selectedSong]);
+
   const loadReferenceTracks = useCallback(async () => {
     if (!isAuthenticated || !token) return;
     try {
@@ -362,15 +395,58 @@ export default function App() {
 
   const playNext = useCallback(() => {
     if (!currentSong) return;
-    const queue = getActiveQueue(currentSong);
+
+    // In Radio Mode, always use the dynamic 'songs' list as the source of truth.
+    // This ensures newly generated songs are immediately picked up.
+    // Otherwise, use the active queue.
+    const queue = isRadioMode ? songs : getActiveQueue(currentSong);
+
     if (queue.length === 0) return;
 
-    const currentIndex = queueIndex >= 0 && queue[queueIndex]?.id === currentSong.id
-      ? queueIndex
-      : queue.findIndex(s => s.id === currentSong.id);
+    // Find current index in the chosen queue
+    const currentIndex = queue.findIndex(s => s.id === currentSong.id);
     if (currentIndex === -1) return;
 
-    if (repeatMode === 'one') {
+    // Determine Next Index
+    let nextIndex;
+    if (isShuffle && !isRadioMode) { // Shuffle makes no sense in Radio Mode (chronological)
+      // Simple shuffle logic
+      nextIndex = Math.floor(Math.random() * queue.length);
+      // Avoid repeating same song if possible
+      if (queue.length > 1 && nextIndex === currentIndex) {
+        nextIndex = (nextIndex + 1) % queue.length;
+      }
+    } else {
+      // Sequential
+      nextIndex = (currentIndex + 1) % queue.length;
+    }
+
+    // Radio Mode Logic: Stop at end of list (don't wrap to old songs)
+    if (isRadioMode) {
+      // If we wrapped around to 0, it means we reached the end.
+      // In "Append" mode (Oldest First), the newest song is at end.
+      // If we are at end, we wait for next song (which should be generating).
+      if (nextIndex === 0 && currentIndex === queue.length - 1) {
+        // End of list. Stop playing. The 'useEffect' trigger should pick up when new song arrives?
+        // Or if new song IS ready (already appended), nextIndex wouldn't be 0 yet?
+        // Wait, (currentIndex + 1) % length.
+        // If length is 5. Current is 4. Next is 0.
+        // We want to stop.
+        setIsPlaying(false);
+        return;
+      }
+    }
+
+    const nextSong = queue[nextIndex];
+
+    // Safety: Don't play if generating or invalid
+    if (!nextSong || (isRadioMode && (nextSong.isGenerating || !nextSong.audioUrl))) {
+      setIsPlaying(false);
+      return;
+    }
+
+    // Normal Transition
+    if (repeatMode === 'one' && !isRadioMode) {
       if (audioRef.current) {
         audioRef.current.currentTime = 0;
         audioRef.current.play();
@@ -378,20 +454,10 @@ export default function App() {
       return;
     }
 
-    let nextIndex;
-    if (isShuffle) {
-      do {
-        nextIndex = Math.floor(Math.random() * queue.length);
-      } while (queue.length > 1 && nextIndex === currentIndex);
-    } else {
-      nextIndex = (currentIndex + 1) % queue.length;
-    }
-
-    const nextSong = queue[nextIndex];
     setQueueIndex(nextIndex);
     setCurrentSong(nextSong);
     setIsPlaying(true);
-  }, [currentSong, queueIndex, isShuffle, repeatMode, playQueue, songs]);
+  }, [currentSong, queueIndex, isShuffle, repeatMode, playQueue, songs, isRadioMode]);
 
   const playPrevious = useCallback(() => {
     if (!currentSong) return;
@@ -423,6 +489,78 @@ export default function App() {
     playNextRef.current = playNext;
   }, [playNext]);
 
+  // Radio Mode Logic: Trigger next generation
+  const generateNextRadioSong = useCallback(async (baseParams: GenerationParams) => {
+    // Robust Locking
+    if (generationLockRef.current || isGenerating) return;
+    generationLockRef.current = true;
+
+    try {
+      // 1. Force batch size to 1 for Radio mode
+      const newParams = { ...baseParams, batchSize: 1 };
+
+      // 2. Extract topic
+      const topic = newParams.songDescription || newParams.style || "Free style";
+
+      // 3. Generate new Style/Lyrics/Title using lmService
+      setIsGenerating(true);
+
+      const style = await lmService.generateStyle(topic);
+      const lyrics = await lmService.generateLyrics(topic, style);
+      const title = await lmService.generateTitle(topic);
+
+      // 4. Update params with new unique content
+      newParams.style = style;
+      newParams.lyrics = lyrics;
+      newParams.title = title;
+      newParams.prompt = lyrics;
+
+      // 5. Trigger generation
+      // setIsGenerating(false); // REMOVED: Caused race condition re-triggering useEffect
+
+      await handleGenerate(newParams);
+
+    } catch (error) {
+      console.error("Failed to generate next radio song:", error);
+      setIsGenerating(false);
+      await handleGenerate({ ...baseParams, batchSize: 1 });
+    } finally {
+      // Release lock after initiation
+      generationLockRef.current = false;
+    }
+  }, [isGenerating, isRadioMode]);
+
+  useEffect(() => {
+    if (!isRadioMode || !radioParams) return;
+
+    // Case 1: Initial Start via Ref (prevents double generation)
+    if (radioStartedRef.current) {
+      radioStartedRef.current = false;
+      generateNextRadioSong(radioParams);
+      return;
+    }
+
+    // Case 2: Standard Loop
+    // Only buffer if playing, not currently generating, and we have songs in the list.
+    if (isPlaying && currentSong && !isGenerating && !generationLockRef.current && songs.length > 0) {
+      // If we are playing the LATEST song, generate the next one.
+      /* Loop Logic */
+      if (songs.length > 0) {
+        const newestSong = songs[songs.length - 1]; // Oldest First -> Last is newest
+
+        // Strict Double-Generation Guard:
+        // If the newest song is ALREADY generating (temp), do NOT trigger another one.
+        if (newestSong.isGenerating) return;
+
+        if (newestSong && newestSong.id === currentSong.id) {
+          // Current song is the last one. Generate next.
+          // Pass params but force batch 1
+          generateNextRadioSong(radioParams);
+        }
+      }
+    }
+  }, [isRadioMode, isPlaying, currentSong, songs, radioParams, isGenerating, generateNextRadioSong]);
+
   // Audio Setup
   useEffect(() => {
     audioRef.current = new Audio();
@@ -509,7 +647,12 @@ export default function App() {
       }
     };
 
-    if (audio.src !== currentSong.audioUrl) {
+    // Normalize URLs for comparison to avoid unnecessary reloads
+    const getAbsoluteUrl = (url: string) => new URL(url, window.location.href).href;
+    const currentSrc = getAbsoluteUrl(audio.src);
+    const targetSrc = getAbsoluteUrl(currentSong.audioUrl);
+
+    if (currentSrc !== targetSrc) {
       audio.src = currentSong.audioUrl;
       audio.load();
       if (isPlaying) playAudio();
@@ -551,7 +694,7 @@ export default function App() {
     if (!token) return;
     try {
       const response = await songsApi.getMySongs(token);
-      const loadedSongs: Song[] = response.songs.map(s => ({
+      let fetchedSongs: Song[] = response.songs.map(s => ({
         id: s.id,
         title: s.title,
         lyrics: s.lyrics,
@@ -568,35 +711,52 @@ export default function App() {
         creator: s.creator,
         generationParams: (() => {
           try {
-            if (!s.generation_params) return undefined;
-            return typeof s.generation_params === 'string' ? JSON.parse(s.generation_params) : s.generation_params;
+            if (s.generation_params) {
+              return typeof s.generation_params === 'string' ? JSON.parse(s.generation_params) : s.generation_params;
+            }
+            return undefined;
           } catch {
             return undefined;
           }
         })(),
       }));
 
-      // Preserve any generating songs that aren't in the loaded list
       setSongs(prev => {
-        const generatingSongs = prev.filter(s => s.isGenerating);
-        const mergedSongs = [...generatingSongs];
-        for (const song of loadedSongs) {
-          if (!mergedSongs.some(s => s.id === song.id)) {
-            mergedSongs.push(song);
-          }
-        }
-        // Sort by creation date, newest first
-        return mergedSongs.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+        // 1. Keep any local songs that are currently generating (temp songs)
+        // AND are not already in the fetched list
+        const generatingSongs = prev.filter(p =>
+          p.isGenerating && !fetchedSongs.some(f => f.id === p.id)
+        );
+
+        // 2. Merge: Fetched Songs + Generating Songs
+        let mergedSongs = [...fetchedSongs, ...generatingSongs];
+
+        // 3. Sort based on mode
+        // ALWAYS sort by CreatedAt.
+        // Normal Mode: Newest First (Desc)
+        // Radio Mode: Oldest First (Asc) -> So "End" is "Newest"
+        mergedSongs.sort((a, b) => {
+          const timeA = new Date(a.createdAt).getTime();
+          const timeB = new Date(b.createdAt).getTime();
+          return isRadioMode ? timeA - timeB : timeB - timeA;
+        });
+
+        return mergedSongs;
       });
 
-      // 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))) {
-        setSelectedSong(loadedSongs[0] ?? null);
-      }
+      // Update selected song if needed (e.g. if it was just loaded)
+      // Note: We avoid doing this in the setSongs callback to keep it pure.
+      // But we can't easily access the NEW state here. 
+      // Just relying on ID persistence is usually enough.
+
     } catch (error) {
-      console.error('Failed to refresh songs:', error);
+      console.error('Failed to load songs', error);
+      if (error instanceof Error && error.message === 'Unauthorized') {
+        logout();
+      }
     }
-  }, [token]);
+  }, [token, logout, isRadioMode]);
+
 
   const beginPollingJob = useCallback((jobId: string, tempId: string) => {
     if (!token) return;
@@ -672,8 +832,13 @@ export default function App() {
     }
 
     setIsGenerating(true);
-    setCurrentView('create');
-    setMobileShowList(false);
+
+    // In Radio Mode, avoid layout thrashing or changing view, 
+    // to prevent audio element unmounting or UI jumping.
+    if (!isRadioMode) {
+      setCurrentView('create');
+      setMobileShowList(false);
+    }
 
     // Create unique temp ID for this job
     const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -690,9 +855,22 @@ export default function App() {
       isPublic: true
     };
 
-    setSongs(prev => [tempSong, ...prev]);
-    setSelectedSong(tempSong);
-    setShowRightSidebar(true);
+    setSongs(prev => {
+      const newSongs = [...prev, tempSong];
+      // Enforce consistent sorting immediately
+      return newSongs.sort((a, b) => {
+        const timeA = new Date(a.createdAt).getTime();
+        const timeB = new Date(b.createdAt).getTime();
+        return isRadioMode ? timeA - timeB : timeB - timeA;
+      });
+    });
+
+    // Only select and show sidebar in normal mode.
+    // In Radio mode, we want to keep listening to the CURRENT song, not jump to the new temp one.
+    if (!isRadioMode) {
+      setSelectedSong(tempSong);
+      setShowRightSidebar(true);
+    }
 
     try {
       const job = await generateApi.startGeneration({
@@ -799,10 +977,16 @@ export default function App() {
               }
             })();
 
-            next.unshift(buildTempSongFromParams(params, tempId, job.created_at));
+            next.push(buildTempSongFromParams(params, tempId, job.created_at));
             existingIds.add(tempId);
           }
-          return next;
+
+          // Sort resumed jobs correctly
+          return next.sort((a, b) => {
+            const timeA = new Date(a.createdAt).getTime();
+            const timeB = new Date(b.createdAt).getTime();
+            return isRadioMode ? timeA - timeB : timeB - timeA;
+          });
         });
 
         for (const job of jobsToResume) {
@@ -828,8 +1012,8 @@ export default function App() {
     const nextQueue = list && list.length > 0
       ? list
       : (playQueue.length > 0 && playQueue.some(s => s.id === song.id))
-          ? playQueue
-          : (songs.some(s => s.id === song.id) ? songs : [song]);
+        ? playQueue
+        : (songs.some(s => s.id === song.id) ? songs : [song]);
     const nextIndex = nextQueue.findIndex(s => s.id === song.id);
     setPlayQueue(nextQueue);
     setQueueIndex(nextIndex);
@@ -1219,6 +1403,19 @@ export default function App() {
             `}>
               <CreatePanel
                 onGenerate={handleGenerate}
+                onStartRadio={(params) => {
+                  setIsRadioMode(true);
+                  setRadioParams(params);
+                  radioStartedRef.current = true;
+                  // Let useEffect handle the first generation to prevent double triggers
+                  showToast('Radio Mode Started! Continuous music coming up.', 'success');
+                }}
+                onStopRadio={() => {
+                  setIsRadioMode(false);
+                  setRadioParams(null);
+                  showToast('Radio Mode Stopped.', 'success');
+                }}
+                isRadioMode={isRadioMode}
                 isGenerating={isGenerating}
                 initialData={reuseData}
                 createdSongs={songs}
diff --git a/components/CreatePanel.tsx b/components/CreatePanel.tsx
index a041000..2cfebab 100644
--- a/components/CreatePanel.tsx
+++ b/components/CreatePanel.tsx
@@ -3,6 +3,7 @@ import { Sparkles, ChevronDown, Settings2, Trash2, Music2, Sliders, Dices, Hash,
 import { GenerationParams, Song } from '../types';
 import { useAuth } from '../context/AuthContext';
 import { generateApi } from '../services/api';
+import { lmService } from '../services/lmService';
 
 interface ReferenceTrack {
   id: string;
@@ -22,6 +23,9 @@ interface CreatePanelProps {
   createdSongs?: Song[];
   pendingAudioSelection?: { target: 'reference' | 'source'; url: string; title?: string } | null;
   onAudioSelectionApplied?: () => void;
+  onStartRadio?: (params: GenerationParams) => void;
+  onStopRadio?: () => void;
+  isRadioMode?: boolean;
 }
 
 const KEY_SIGNATURES = [
@@ -108,6 +112,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   createdSongs = [],
   pendingAudioSelection,
   onAudioSelectionApplied,
+  onStartRadio,
+  onStopRadio,
+  isRadioMode = false,
 }) => {
   const { isAuthenticated, token, user } = useAuth();
 
@@ -202,6 +209,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
   const [uploadError, setUploadError] = useState<string | null>(null);
   const [isFormattingStyle, setIsFormattingStyle] = useState(false);
   const [isFormattingLyrics, setIsFormattingLyrics] = useState(false);
+  const [isGeneratingStyle, setIsGeneratingStyle] = useState(false);
+  const [isGeneratingLyrics, setIsGeneratingLyrics] = useState(false);
+  const [isGeneratingTitle, setIsGeneratingTitle] = useState(false);
   const [isDraggingFile, setIsDraggingFile] = useState(false);
   const [dragKind, setDragKind] = useState<'file' | 'audio' | null>(null);
   const referenceInputRef = useRef<HTMLInputElement>(null);
@@ -451,6 +461,69 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     e.target.value = '';
   };
 
+  const handleGenerateLyrics = async () => {
+    if (!songDescription && !style) {
+      alert("Please provide a song description or style first.");
+      return;
+    }
+    setIsGeneratingLyrics(true);
+    try {
+      const topic = songDescription || style;
+      const result = await lmService.generateLyrics(topic, style);
+      if (result) {
+        setLyrics(result);
+        setCustomMode(true);
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Failed to generate lyrics: " + (err instanceof Error ? err.message : String(err)));
+    } finally {
+      setIsGeneratingLyrics(false);
+    }
+  };
+
+  const handleGenerateStyle = async () => {
+    if (!songDescription && !lyrics) {
+      alert("Please provide a song description or lyrics first.");
+      return;
+    }
+    setIsGeneratingStyle(true);
+    try {
+      const topic = songDescription || lyrics;
+      const result = await lmService.generateStyle(topic);
+      if (result) {
+        setStyle(result);
+        setCustomMode(true);
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Failed to generate style: " + (err instanceof Error ? err.message : String(err)));
+    } finally {
+      setIsGeneratingStyle(false);
+    }
+  };
+
+  const handleGenerateTitle = async () => {
+    if (!songDescription && !lyrics && !style) {
+      alert("Please provide some information about the song first.");
+      return;
+    }
+    setIsGeneratingTitle(true);
+    try {
+      const topic = songDescription || lyrics || style;
+      const result = await lmService.generateTitle(topic);
+      if (result) {
+        setTitle(result);
+        setCustomMode(true);
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Failed to generate title: " + (err instanceof Error ? err.message : String(err)));
+    } finally {
+      setIsGeneratingTitle(false);
+    }
+  };
+
   // Format handler - uses LLM to enhance style/lyrics and auto-fill parameters
   const handleFormat = async (target: 'style' | 'lyrics') => {
     if (!token || !style.trim()) return;
@@ -460,19 +533,36 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
       setIsFormattingLyrics(true);
     }
     try {
-      const result = await generateApi.formatInput({
-        caption: style,
-        lyrics: lyrics,
-        bpm: bpm > 0 ? bpm : undefined,
-        duration: duration > 0 ? duration : undefined,
-        keyScale: keyScale || undefined,
-        timeSignature: timeSignature || undefined,
-        temperature: lmTemperature,
-        topK: lmTopK > 0 ? lmTopK : undefined,
-        topP: lmTopP,
-        lmModel: lmModel || 'acestep-5Hz-lm-0.6B',
-        lmBackend: lmBackend || 'pt',
-      }, token);
+      let result;
+      // Try Client-side Gemini first
+      const settings = lmService.getSettings();
+      if (settings.backend === 'gemini' && settings.geminiApiKey) {
+        result = await lmService.formatInput({
+          caption: style,
+          lyrics: lyrics,
+          bpm: bpm > 0 ? bpm : undefined,
+          duration: duration > 0 ? duration : undefined,
+          keyScale: keyScale || undefined,
+          timeSignature: timeSignature || undefined
+        });
+      }
+
+      // If not Gemini or Gemini failed (signaled by FALLBACK_TO_SERVER or null), use Server API
+      if (!result || (result.error === 'FALLBACK_TO_SERVER')) {
+        result = await generateApi.formatInput({
+          caption: style,
+          lyrics: lyrics,
+          bpm: bpm > 0 ? bpm : undefined,
+          duration: duration > 0 ? duration : undefined,
+          keyScale: keyScale || undefined,
+          timeSignature: timeSignature || undefined,
+          temperature: lmTemperature,
+          topK: lmTopK > 0 ? lmTopK : undefined,
+          topP: lmTopP,
+          lmModel: lmModel || 'acestep-5Hz-lm-0.6B',
+          lmBackend: lmBackend || 'pt',
+        }, token);
+      }
 
       if (result.success) {
         // Update fields with LLM-generated values
@@ -728,7 +818,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
     }
   };
 
-  const handleGenerate = () => {
+  const executeGenerate = (mode: 'normal' | 'radio') => {
     const styleWithGender = (() => {
       if (!vocalGender) return style;
       const genderHint = vocalGender === 'male' ? 'Male vocals' : 'Female vocals';
@@ -736,24 +826,25 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
       return trimmed ? `${trimmed}\n${genderHint}` : genderHint;
     })();
 
-    // Bulk generation: loop bulkCount times
-    for (let i = 0; i < bulkCount; i++) {
+    const count = mode === 'radio' ? 1 : bulkCount;
+
+    // Bulk generation: loop bulkCount times (or once for radio)
+    for (let i = 0; i < count; i++) {
       // Seed handling: first job uses user's seed, rest get random seeds
       let jobSeed = -1;
       if (!randomSeed && i === 0) {
         jobSeed = seed;
       } else if (!randomSeed && i > 0) {
-        // Subsequent jobs get random seeds for variety
         jobSeed = Math.floor(Math.random() * 4294967295);
       }
 
-      onGenerate({
+      const params = {
         customMode,
         songDescription: customMode ? undefined : songDescription,
         prompt: lyrics,
         lyrics,
         style: styleWithGender,
-        title: bulkCount > 1 ? `${title} (${i + 1})` : title,
+        title: count > 1 ? `${title} (${i + 1})` : title,
         instrumental,
         vocalLanguage,
         bpm,
@@ -762,7 +853,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
         duration,
         inferenceSteps,
         guidanceScale,
-        batchSize,
+        batchSize: mode === 'radio' ? 1 : batchSize,
         randomSeed: randomSeed || i > 0, // Force random for subsequent bulk jobs
         seed: jobSeed,
         thinking,
@@ -809,15 +900,24 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
           return parsed.length ? parsed : undefined;
         })(),
         isFormatCaption,
-      });
+      };
+
+      if (mode === 'radio' && onStartRadio) {
+        onStartRadio(params);
+      } else {
+        onGenerate(params);
+      }
     }
 
     // Reset bulk count after generation
-    if (bulkCount > 1) {
+    if (bulkCount > 1 && mode === 'normal') {
       setBulkCount(1);
     }
   };
 
+  const handleGenerate = () => executeGenerate('normal');
+  const handleRadio = () => executeGenerate('radio');
+
   return (
     <div
       className="relative flex flex-col h-full bg-zinc-50 dark:bg-suno-panel w-full overflow-y-auto custom-scrollbar transition-colors duration-300"
@@ -917,6 +1017,24 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 placeholder="A happy pop song about summer adventures with friends..."
                 className="w-full h-32 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 flex gap-2">
+                <button
+                  onClick={handleGenerateLyrics}
+                  disabled={isGeneratingLyrics || !songDescription}
+                  className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-600 dark:text-zinc-300 rounded-lg text-xs font-bold transition-all disabled:opacity-50"
+                >
+                  {isGeneratingLyrics ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
+                  Write Lyrics
+                </button>
+                <button
+                  onClick={handleGenerateStyle}
+                  disabled={isGeneratingStyle || !songDescription}
+                  className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-600 dark:text-zinc-300 rounded-lg text-xs font-bold transition-all disabled:opacity-50"
+                >
+                  {isGeneratingStyle ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
+                  Suggest Style
+                </button>
+              </div>
             </div>
 
             {/* Vocal Language (Simple) */}
@@ -1066,22 +1184,20 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     <button
                       type="button"
                       onClick={() => setAudioTab('reference')}
-                      className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${
-                        audioTab === 'reference'
-                          ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
-                          : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
-                      }`}
+                      className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${audioTab === 'reference'
+                        ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
+                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
+                        }`}
                     >
                       Reference
                     </button>
                     <button
                       type="button"
                       onClick={() => setAudioTab('source')}
-                      className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${
-                        audioTab === 'source'
-                          ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
-                          : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
-                      }`}
+                      className={`px-2.5 py-1 rounded-md text-[11px] font-medium transition-all ${audioTab === 'source'
+                        ? 'bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white shadow-sm'
+                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
+                        }`}
                     >
                       Cover
                     </button>
@@ -1100,9 +1216,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                       className="relative flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 text-white flex items-center justify-center shadow-lg shadow-pink-500/20 hover:scale-105 transition-transform"
                     >
                       {referencePlaying ? (
-                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" /></svg>
                       ) : (
-                        <svg className="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                        <svg className="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
                       )}
                       <span className="absolute -bottom-1 -right-1 text-[8px] font-bold bg-zinc-900 text-white px-1 py-0.5 rounded">
                         {formatTime(referenceDuration)}
@@ -1139,7 +1255,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                       onClick={() => { setReferenceAudioUrl(''); setReferenceAudioTitle(''); setReferencePlaying(false); setReferenceTime(0); setReferenceDuration(0); }}
                       className="p-1.5 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-400 hover:text-zinc-600 dark:hover:text-white transition-colors"
                     >
-                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/></svg>
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                     </button>
                   </div>
                 )}
@@ -1153,9 +1269,9 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                       className="relative flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-br from-emerald-500 to-teal-600 text-white flex items-center justify-center shadow-lg shadow-emerald-500/20 hover:scale-105 transition-transform"
                     >
                       {sourcePlaying ? (
-                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/></svg>
+                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" /></svg>
                       ) : (
-                        <svg className="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                        <svg className="w-4 h-4 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
                       )}
                       <span className="absolute -bottom-1 -right-1 text-[8px] font-bold bg-zinc-900 text-white px-1 py-0.5 rounded">
                         {formatTime(sourceDuration)}
@@ -1192,7 +1308,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                       onClick={() => { setSourceAudioUrl(''); setSourceAudioTitle(''); setSourcePlaying(false); setSourceTime(0); setSourceDuration(0); }}
                       className="p-1.5 rounded-full hover:bg-zinc-200 dark:hover:bg-white/10 text-zinc-400 hover:text-zinc-600 dark:hover:text-white transition-colors"
                     >
-                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/></svg>
+                      <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                     </button>
                   </div>
                 )}
@@ -1205,7 +1321,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     className="flex-1 flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
                   >
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
                     </svg>
                     Library
                   </button>
@@ -1221,7 +1337,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                     className="flex-1 flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-[11px] font-medium bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
                   >
                     <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                     </svg>
                     Upload
                   </button>
@@ -1243,14 +1359,21 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                 <div className="flex items-center gap-2">
                   <button
                     onClick={() => setInstrumental(!instrumental)}
-                    className={`px-2.5 py-1 rounded-full text-[10px] font-semibold border transition-colors ${
-                      instrumental
-                        ? 'bg-pink-600 text-white border-pink-500'
-                        : 'bg-white dark:bg-suno-card border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/10'
-                    }`}
+                    className={`px-2.5 py-1 rounded-full text-[10px] font-semibold border transition-colors ${instrumental
+                      ? 'bg-pink-600 text-white border-pink-500'
+                      : 'bg-white dark:bg-suno-card border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/10'
+                      }`}
                   >
                     {instrumental ? 'Instrumental' : 'Vocal'}
                   </button>
+                  <button
+                    className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isGeneratingLyrics ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                    title="Generate Lyrics"
+                    onClick={handleGenerateLyrics}
+                    disabled={isGeneratingLyrics || (!style.trim() && !songDescription.trim())}
+                  >
+                    {isGeneratingLyrics ? <Loader2 size={14} className="animate-spin" /> : <Music2 size={14} />}
+                  </button>
                   <button
                     className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormattingLyrics ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
                     title="AI Format - Enhance style & auto-fill parameters"
@@ -1291,14 +1414,24 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   <span className="text-xs font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-wide">Style of Music</span>
                   <p className="text-[11px] text-zinc-400 dark:text-zinc-500 mt-0.5">Genre, mood, instruments, vibe</p>
                 </div>
-                <button
-                  className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormattingStyle ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
-                  title="AI Format - Enhance style & auto-fill parameters"
-                  onClick={() => handleFormat('style')}
-                  disabled={isFormattingStyle || !style.trim()}
-                >
-                  {isFormattingStyle ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
-                </button>
+                <div className="flex items-center gap-1">
+                  <button
+                    className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isGeneratingStyle ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                    title="Suggest Style"
+                    onClick={handleGenerateStyle}
+                    disabled={isGeneratingStyle || (!lyrics.trim() && !songDescription.trim())}
+                  >
+                    {isGeneratingStyle ? <Loader2 size={14} className="animate-spin" /> : <Dices size={14} />}
+                  </button>
+                  <button
+                    className={`p-1.5 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isFormattingStyle ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                    title="AI Format - Enhance style & auto-fill parameters"
+                    onClick={() => handleFormat('style')}
+                    disabled={isFormattingStyle || !style.trim()}
+                  >
+                    {isFormattingStyle ? <Loader2 size={14} className="animate-spin" /> : <Sparkles size={14} />}
+                  </button>
+                </div>
               </div>
               <textarea
                 value={style}
@@ -1321,8 +1454,16 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
 
             {/* Title Input */}
             <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">
-                Title
+              <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 flex items-center justify-between">
+                <span>Title</span>
+                <button
+                  className={`p-1 hover:bg-zinc-200 dark:hover:bg-white/10 rounded transition-colors ${isGeneratingTitle ? 'text-pink-500' : 'text-zinc-500 hover:text-black dark:hover:text-white'}`}
+                  title="Generate Title"
+                  onClick={handleGenerateTitle}
+                  disabled={isGeneratingTitle || (!lyrics.trim() && !style.trim() && !songDescription.trim())}
+                >
+                  {isGeneratingTitle ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}
+                </button>
               </div>
               <input
                 type="text"
@@ -1525,11 +1666,10 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   <button
                     key={count}
                     onClick={() => { setBulkCount(count); localStorage.setItem('ace-bulkCount', String(count)); }}
-                    className={`flex-1 py-2 rounded-lg text-xs font-bold transition-all ${
-                      bulkCount === count
-                        ? 'bg-gradient-to-r from-orange-500 to-pink-600 text-white shadow-md'
-                        : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700'
-                    }`}
+                    className={`flex-1 py-2 rounded-lg text-xs font-bold transition-all ${bulkCount === count
+                      ? 'bg-gradient-to-r from-orange-500 to-pink-600 text-white shadow-md'
+                      : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700'
+                      }`}
                   >
                     {count}
                   </button>
@@ -2033,7 +2173,7 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   className="p-1.5 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors"
                 >
                   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                   </svg>
                 </button>
               </div>
@@ -2097,22 +2237,20 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
                   <button
                     type="button"
                     onClick={() => setLibraryTab('uploads')}
-                    className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
-                      libraryTab === 'uploads'
-                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
-                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
-                    }`}
+                    className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${libraryTab === 'uploads'
+                      ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                      : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
+                      }`}
                   >
                     Uploaded
                   </button>
                   <button
                     type="button"
                     onClick={() => setLibraryTab('created')}
-                    className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${
-                      libraryTab === 'created'
-                        ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
-                        : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
-                    }`}
+                    className={`px-3 py-1 rounded-full text-xs font-semibold transition-colors ${libraryTab === 'created'
+                      ? 'bg-zinc-900 dark:bg-white text-white dark:text-zinc-900'
+                      : 'text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200'
+                      }`}
                   >
                     Created
                   </button>
@@ -2339,17 +2477,30 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
 
       {/* Footer Create Button */}
       <div className="p-4 mt-auto sticky bottom-0 bg-zinc-50/95 dark:bg-suno-panel/95 backdrop-blur-sm z-10 border-t border-zinc-200 dark:border-white/5 space-y-3">
-        <button
-          onClick={handleGenerate}
-          className="w-full h-12 rounded-xl font-bold text-base flex items-center justify-center gap-2 transition-all transform active:scale-[0.98] bg-gradient-to-r from-orange-500 to-pink-600 text-white shadow-lg hover:brightness-110"
-        >
-          <Sparkles size={18} />
-          <span>
-            {bulkCount > 1
-              ? `Create ${bulkCount} Jobs (${bulkCount * batchSize} tracks)`
-              : `Create${batchSize > 1 ? ` (${batchSize} variations)` : ''}`}
-          </span>
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={isRadioMode ? onStopRadio : handleRadio}
+            className={`flex-1 h-12 rounded-xl font-bold text-base flex items-center justify-center gap-2 transition-all transform active:scale-[0.98] border shadow-md group ${isRadioMode
+                ? 'bg-pink-600 text-white border-pink-500 hover:bg-pink-700'
+                : 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700'
+              }`}
+            title={isRadioMode ? "Stop Radio Mode" : "Start Radio Mode"}
+          >
+            <Music2 size={18} className={`${isRadioMode ? 'text-white' : 'text-pink-600 dark:text-pink-400'} group-hover:scale-110 transition-transform ${isRadioMode ? 'animate-pulse' : ''}`} />
+            <span>{isRadioMode ? 'Radio ON' : 'Radio'}</span>
+          </button>
+          <button
+            onClick={handleGenerate}
+            className="flex-[3] h-12 rounded-xl font-bold text-base flex items-center justify-center gap-2 transition-all transform active:scale-[0.98] bg-gradient-to-r from-orange-500 to-pink-600 text-white shadow-lg hover:brightness-110"
+          >
+            <Sparkles size={18} />
+            <span>
+              {bulkCount > 1
+                ? `Create ${bulkCount} Jobs (${bulkCount * batchSize} tracks)`
+                : `Create${batchSize > 1 ? ` (${batchSize} variations)` : ''}`}
+            </span>
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/components/SettingsModal.tsx b/components/SettingsModal.tsx
index 0f61b8c..ca2726f 100644
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -15,6 +15,26 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
     const { user } = useAuth();
     const [isEditProfileOpen, setIsEditProfileOpen] = useState(false);
 
+    // LM Settings State
+    const [lmBackend, setLmBackend] = useState<'gemini' | 'koboldcpp' | 'local'>(() => {
+        return (localStorage.getItem('ace-lm-backend') as any) || 'local';
+    });
+    const [geminiApiKey, setGeminiApiKey] = useState(() => {
+        return localStorage.getItem('ace-gemini-api-key') || '';
+    });
+    const [koboldApiUrl, setKoboldApiUrl] = useState(() => {
+        return localStorage.getItem('ace-kobold-api-url') || 'http://localhost:5001/api/v1/generate';
+    });
+    const [lyricsPrompt, setLyricsPrompt] = useState(() => {
+        return localStorage.getItem('ace-lyrics-prompt') || 'Generate professional song lyrics based on the topic: "{{topic}}". \nStyle requested: {{style}}. \nFormat with [Verse], [Chorus] headers. \nReturn only the lyrics.';
+    });
+    const [stylePrompt, setStylePrompt] = useState(() => {
+        return localStorage.getItem('ace-style-prompt') || 'Based on the user topic: "{{topic}}", suggest a detailed music style description (genre, mood, instruments). \nKeep it concise (1-2 sentences).';
+    });
+    const [titlePrompt, setTitlePrompt] = useState(() => {
+        return localStorage.getItem('ace-title-prompt') || 'Based on the lyrics or topic: "{{topic}}", suggest a catchy song title. \nReturn only the title.';
+    });
+
     if (!isOpen || !user) {
         if (isEditProfileOpen && user) {
             return (
@@ -131,6 +151,113 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, t
                         </div>
                     </div>
 
+                    {/* LM Settings Section */}
+                    <div className="space-y-6 pt-4 border-t border-zinc-200 dark:border-white/5">
+                        <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
+                            <Edit3 size={20} />
+                            <h3 className="font-semibold">AI Text Generation (LM)</h3>
+                        </div>
+                        
+                        <div className="pl-7 space-y-4">
+                            <div className="space-y-2">
+                                <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Backend</label>
+                                <div className="flex flex-wrap gap-2">
+                                    {['gemini', 'koboldcpp', 'local'].map((b) => (
+                                        <button
+                                            key={b}
+                                            onClick={() => {
+                                                setLmBackend(b as any);
+                                                localStorage.setItem('ace-lm-backend', b);
+                                            }}
+                                            className={`px-4 py-2 rounded-lg text-sm font-medium border transition-colors ${
+                                                lmBackend === b
+                                                    ? 'bg-indigo-600 text-white border-indigo-600'
+                                                    : 'bg-transparent text-zinc-600 dark:text-zinc-400 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
+                                            }`}
+                                        >
+                                            {b === 'gemini' ? 'Google Gemini' : b === 'koboldcpp' ? 'Koboldcpp' : 'Local (ACE-Step)'}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+
+                            {lmBackend === 'gemini' && (
+                                <div className="space-y-2 animate-in fade-in slide-in-from-top-1">
+                                    <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Gemini API Key</label>
+                                    <input
+                                        type="password"
+                                        value={geminiApiKey}
+                                        onChange={(e) => {
+                                            setGeminiApiKey(e.target.value);
+                                            localStorage.setItem('ace-gemini-api-key', e.target.value);
+                                        }}
+                                        placeholder="Enter your Google Gemini API Key"
+                                        className="w-full bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg px-4 py-2 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                                    />
+                                    <p className="text-[11px] text-zinc-500">Used for lyric and style generation.</p>
+                                </div>
+                            )}
+
+                            {lmBackend === 'koboldcpp' && (
+                                <div className="space-y-2 animate-in fade-in slide-in-from-top-1">
+                                    <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Koboldcpp API URL</label>
+                                    <input
+                                        type="text"
+                                        value={koboldApiUrl}
+                                        onChange={(e) => {
+                                            setKoboldApiUrl(e.target.value);
+                                            localStorage.setItem('ace-kobold-api-url', e.target.value);
+                                        }}
+                                        placeholder="http://localhost:5001/api/v1/generate"
+                                        className="w-full bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg px-4 py-2 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                                    />
+                                    <p className="text-[11px] text-zinc-500">The base URL for your Koboldcpp instance.</p>
+                                </div>
+                            )}
+
+                            <div className="space-y-3 pt-2">
+                                <div className="space-y-1.5">
+                                    <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Lyrics Generation Prompt</label>
+                                    <textarea
+                                        value={lyricsPrompt}
+                                        onChange={(e) => {
+                                            setLyricsPrompt(e.target.value);
+                                            localStorage.setItem('ace-lyrics-prompt', e.target.value);
+                                        }}
+                                        className="w-full h-24 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg px-4 py-2 text-xs font-mono text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+                                    />
+                                    <p className="text-[10px] text-zinc-500">Use {"{{topic}}"} and {"{{style}}"} as placeholders.</p>
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Style Generation Prompt</label>
+                                    <textarea
+                                        value={stylePrompt}
+                                        onChange={(e) => {
+                                            setStylePrompt(e.target.value);
+                                            localStorage.setItem('ace-style-prompt', e.target.value);
+                                        }}
+                                        className="w-full h-24 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg px-4 py-2 text-xs font-mono text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+                                    />
+                                    <p className="text-[10px] text-zinc-500">Use {"{{topic}}"} as placeholder.</p>
+                                </div>
+
+                                <div className="space-y-1.5">
+                                    <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">Title Generation Prompt</label>
+                                    <textarea
+                                        value={titlePrompt}
+                                        onChange={(e) => {
+                                            setTitlePrompt(e.target.value);
+                                            localStorage.setItem('ace-title-prompt', e.target.value);
+                                        }}
+                                        className="w-full h-24 bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg px-4 py-2 text-xs font-mono text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
+                                    />
+                                    <p className="text-[10px] text-zinc-500">Use {"{{topic}}"} as placeholder.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
                     {/* About Section */}
                     <div className="space-y-4">
                         <div className="flex items-center gap-2 text-zinc-900 dark:text-white">
diff --git a/server/scripts/format_sample.py b/server/scripts/format_sample.py
index dd24b7b..faac1a2 100644
--- a/server/scripts/format_sample.py
+++ b/server/scripts/format_sample.py
@@ -130,7 +130,13 @@ def main():
 
     args = parser.parse_args()
 
+    # Capture original stdout to ensure we can print clean JSON at the end
+    original_stdout = sys.stdout
+    
     try:
+        # Redirect stdout to stderr for all intermediate steps/logging
+        sys.stdout = sys.stderr
+        
         start_time = time.time()
         result = format_input(
             caption=args.caption,
@@ -148,6 +154,9 @@ def main():
         elapsed = time.time() - start_time
         result["elapsed_seconds"] = elapsed
 
+        # Restore stdout for the final output
+        sys.stdout = original_stdout
+
         if args.json:
             print(json.dumps(result))
         else:
@@ -163,6 +172,7 @@ def main():
                 print(f"Error: {result['status_message']}")
 
     except Exception as e:
+        sys.stdout = original_stdout
         if args.json:
             print(json.dumps({"success": False, "error": str(e)}))
         else:
@@ -170,4 +180,21 @@ def main():
         sys.exit(1)
 
 if __name__ == "__main__":
-    main()
+    # Redirect stdout to stderr to prevent libraries from polluting the output
+    # We only want the final JSON to be on stdout
+    original_stdout = sys.stdout
+    sys.stdout = sys.stderr
+    
+    try:
+        main()
+    except SystemExit as e:
+        # If main calls sys.exit(), we need to catch it to ensure we don't break
+        # But main() prints result before exit.
+        # Ensure we restore stdout if we want to print anything else
+        sys.stdout = original_stdout
+        raise e
+    except Exception as e:
+        sys.stdout = original_stdout
+        # print json error to stdout
+        print(json.dumps({"success": False, "error": str(e)}))
+        sys.exit(1)
diff --git a/server/scripts/simple_generate.py b/server/scripts/simple_generate.py
index c444315..820c730 100644
--- a/server/scripts/simple_generate.py
+++ b/server/scripts/simple_generate.py
@@ -223,8 +223,14 @@ def main():
     parser.add_argument("--json", action="store_true", help="Output as JSON")
 
     args = parser.parse_args()
+    
+    # Capture original stdout to ensure we can print clean JSON at the end
+    original_stdout = sys.stdout
 
     try:
+        # Redirect stdout to stderr for all intermediate steps/logging
+        sys.stdout = sys.stderr
+
         result = generate(
             # Basic
             prompt=args.prompt,
@@ -274,6 +280,9 @@ def main():
             output_dir=args.output_dir,
         )
 
+        # Restore stdout for the final output
+        sys.stdout = original_stdout
+
         if args.json:
             print(json.dumps(result))
         else:
@@ -281,6 +290,7 @@ def main():
             for path in result['audio_paths']:
                 print(f"  {path}")
     except Exception as e:
+        sys.stdout = original_stdout
         if args.json:
             print(json.dumps({"success": False, "error": str(e)}))
         else:
@@ -288,4 +298,21 @@ def main():
         sys.exit(1)
 
 if __name__ == "__main__":
-    main()
+    # Redirect stdout to stderr to prevent libraries from polluting the output
+    # We only want the final JSON to be on stdout
+    original_stdout = sys.stdout
+    sys.stdout = sys.stderr
+    
+    try:
+        main()
+    except SystemExit as e:
+        # If main calls sys.exit(), we need to catch it to ensure we don't break
+        # But main() prints result before exit.
+        # Ensure we restore stdout if we want to print anything else
+        sys.stdout = original_stdout
+        raise e
+    except Exception as e:
+        sys.stdout = original_stdout
+        # print json error to stdout
+        print(json.dumps({"success": False, "error": str(e)}))
+        sys.exit(1)
diff --git a/services/lmService.ts b/services/lmService.ts
new file mode 100644
index 0000000..f37ed6b
--- /dev/null
+++ b/services/lmService.ts
@@ -0,0 +1,215 @@
+import { GoogleGenAI } from "@google/genai";
+import { generateApi } from "./api";
+
+export interface SongGenerationResult {
+  title?: string;
+  lyrics?: string;
+  style?: string;
+  tags?: string[];
+}
+
+export const lmService = {
+  getSettings() {
+    return {
+      backend: localStorage.getItem('ace-lm-backend') || 'local',
+      geminiApiKey: localStorage.getItem('ace-gemini-api-key') || '',
+      koboldApiUrl: localStorage.getItem('ace-kobold-api-url') || 'http://localhost:5001/api/v1/generate',
+      lyricsPrompt: localStorage.getItem('ace-lyrics-prompt') || 'Generate professional song lyrics based on the topic: "{{topic}}". \nStyle requested: {{style}}. \nFormat with [Verse], [Chorus] headers. \nReturn only the lyrics.',
+      stylePrompt: localStorage.getItem('ace-style-prompt') || 'Based on the user topic: "{{topic}}", suggest a detailed music style description (genre, mood, instruments). \nKeep it concise (1-2 sentences).',
+      titlePrompt: localStorage.getItem('ace-title-prompt') || 'Based on the lyrics or topic: "{{topic}}", suggest a catchy song title. \nReturn only the title.',
+    };
+  },
+
+  async generateLyrics(topic: string, style: string): Promise<string> {
+    const settings = this.getSettings();
+    const prompt = settings.lyricsPrompt
+      .replace('{{topic}}', topic)
+      .replace('{{style}}', style);
+
+    if (settings.backend === 'gemini' && settings.geminiApiKey) {
+      return this.generateWithGemini(prompt, settings.geminiApiKey);
+    } else if (settings.backend === 'koboldcpp') {
+      return this.generateWithKobold(prompt, settings.koboldApiUrl);
+    } else {
+      return this.generateWithLocal(topic, style, 'lyrics');
+    }
+  },
+
+  async generateStyle(topic: string): Promise<string> {
+    const settings = this.getSettings();
+    const prompt = settings.stylePrompt.replace('{{topic}}', topic);
+
+    if (settings.backend === 'gemini' && settings.geminiApiKey) {
+      return this.generateWithGemini(prompt, settings.geminiApiKey);
+    } else if (settings.backend === 'koboldcpp') {
+      return this.generateWithKobold(prompt, settings.koboldApiUrl);
+    } else {
+      return this.generateWithLocal(topic, "", 'style');
+    }
+  },
+
+  async generateTitle(topic: string): Promise<string> {
+    const settings = this.getSettings();
+    const prompt = settings.titlePrompt.replace('{{topic}}', topic);
+
+    if (settings.backend === 'gemini' && settings.geminiApiKey) {
+      return this.generateWithGemini(prompt, settings.geminiApiKey);
+    } else if (settings.backend === 'koboldcpp') {
+      return this.generateWithKobold(prompt, settings.koboldApiUrl);
+    } else {
+      // Local title generation not explicitly supported by format API, 
+      // but it often returns a title in some variants. 
+      // For now, we'll just use Gemini/Kobold for title generation.
+      return "";
+    }
+  },
+
+  async generateWithLocal(topic: string, style: string, target: 'lyrics' | 'style'): Promise<string> {
+    try {
+      const token = localStorage.getItem('acestep_token') || localStorage.getItem('token');
+      if (!token) throw new Error("Not authenticated");
+
+      const result = await generateApi.formatInput({
+        caption: topic || style || "music",
+        lyrics: target === 'lyrics' ? "" : undefined,
+      }, token);
+
+      if (target === 'lyrics') {
+        return result.lyrics || "Failed to generate lyrics locally.";
+      } else {
+        return result.caption || "Failed to generate style locally.";
+      }
+    } catch (error) {
+      console.error("Local LM error:", error);
+      throw new Error(`Local generation failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  },
+
+  async generateWithGemini(prompt: string, apiKey: string): Promise<string> {
+    try {
+      const ai = new GoogleGenAI({ apiKey });
+      const response = await ai.models.generateContent({
+        model: "gemini-2.0-flash",
+        contents: prompt
+      });
+      return (response.text || "").trim();
+    } catch (error: any) {
+      console.error("Gemini error:", error);
+      throw new Error(`Gemini failed: ${error.message || String(error)}`);
+    }
+  },
+
+  async generateWithKobold(prompt: string, apiUrl: string): Promise<string> {
+    try {
+      const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          prompt,
+          max_context_length: 2048,
+          max_length: 512,
+          temperature: 0.7,
+          top_p: 0.9,
+        }),
+      });
+
+      if (!response.ok) throw new Error(`Koboldcpp error: ${response.status}`);
+
+      const data = await response.json();
+      return (data.results?.[0]?.text || "").trim();
+    } catch (error) {
+      console.error("Koboldcpp error:", error);
+      throw new Error(`Koboldcpp failed: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  },
+
+  async formatInput(params: {
+    caption: string;
+    lyrics?: string;
+    bpm?: number;
+    duration?: number;
+    keyScale?: string;
+    timeSignature?: string;
+  }): Promise<{
+    success: boolean;
+    caption?: string;
+    lyrics?: string;
+    bpm?: number;
+    duration?: number;
+    key_scale?: string;
+    language?: string;
+    time_signature?: string;
+    status_message?: string;
+    error?: string;
+  }> {
+    const settings = this.getSettings();
+
+    if (settings.backend === 'gemini' && settings.geminiApiKey) {
+      return this.formatWithGemini(params, settings.geminiApiKey);
+    }
+
+    // For other backends, we return null so the caller (CreatePanel) knows to fall back to the server API
+    // or we could throw an error, but returning null/undefined is safer if we change the return type.
+    // However, keeping strict typing, let's signal to fallback.
+    return { success: false, error: "FALLBACK_TO_SERVER" };
+  },
+
+  async formatWithGemini(params: any, apiKey: string): Promise<any> {
+    try {
+      const ai = new GoogleGenAI({ apiKey });
+
+      const prompt = `You are a professional music producer assistant. Analyze the following user input and enhance/format it.
+      
+      User Style/Caption: "${params.caption || ''}"
+      User Lyrics: "${params.lyrics || ''}"
+      
+      Task:
+      1. Enhance the style description to be more descriptive (genre, instruments, mood) if it's too short.
+      2. If lyrics are provided, ensure they are formatted with [Verse], [Chorus] tags.
+      3. Infer or suggest the best BPM, Duration (in seconds), Key Scale, Time Signature, and Vocal Language.
+      4. If user provided BPM/Duration/etc, respect them unless they are 0.
+      
+      User constraints (0 or empty means auto):
+      BPM: ${params.bpm}
+      Duration: ${params.duration}
+      Key: ${params.keyScale}
+      Time Sig: ${params.timeSignature}
+      
+      Return a JSON object with this structure:
+      {
+        "caption": "enhanced style string",
+        "lyrics": "formatted lyrics string",
+        "bpm": number,
+        "duration": number,
+        "key_scale": "C Major etc",
+        "time_signature": "4/4 etc",
+        "language": "en" 
+      }`;
+
+      const response = await ai.models.generateContent({
+        model: "gemini-2.0-flash",
+        contents: prompt,
+        config: {
+          responseMimeType: "application/json"
+        }
+      });
+
+      const text = response.text || "{}";
+      const data = JSON.parse(text);
+
+      return {
+        success: true,
+        caption: data.caption,
+        lyrics: data.lyrics,
+        bpm: data.bpm,
+        duration: data.duration,
+        key_scale: data.key_scale,
+        time_signature: data.time_signature,
+        language: data.language
+      };
+    } catch (error: any) {
+      console.error("Gemini format error:", error);
+      return { success: false, error: error.message || String(error) };
+    }
+  }
+};