feat: preset manager, multi-select, stop generation, delete upload, video encoder fix

.gitignore

@@ -102,3 +102,12 @@ logs/
 release/
 dist-electron/
 
+# ACE-Step binaries (macOS-specific, distributed separately via DMG)
+bin/
+
+# AI Models (too large for git)
+models/
+
+# FFmpeg WASM core (derived from node_modules, regenerated by setup)
+server/public/ffmpeg-core/
+

App.tsx

@@ -88,6 +88,7 @@ function AppContent() {
   const [isCreatePlaylistModalOpen, setIsCreatePlaylistModalOpen] = useState(false);
   const [isAddToPlaylistModalOpen, setIsAddToPlaylistModalOpen] = useState(false);
   const [songToAddToPlaylist, setSongToAddToPlaylist] = useState<Song | null>(null);
+  const [songsToAddToPlaylist, setSongsToAddToPlaylist] = useState<Song[]>([]);
 
   // Video Modal
   const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
@@ -864,6 +865,8 @@ function AppContent() {
         isFormatCaption: params.isFormatCaption,
       }, token);
 
+      // Store jobId on the temp song so the cancel button can use it
+      setSongs(prev => prev.map(s => s.id === tempId ? { ...s, jobId: job.jobId } : s));
       beginPollingJob(job.jobId, tempId);
 
     } catch (e) {
@@ -1096,6 +1099,34 @@ function AppContent() {
     });
   };
 
+  const handleCancelGeneration = async (song: Song) => {
+    if (!token || !song.jobId) return;
+    try {
+      await generateApi.cancelGeneration(song.jobId, token);
+      // Remove the temp song from the list immediately
+      setSongs(prev => prev.filter(s => s.id !== song.id));
+      // Stop polling
+      const jobData = activeJobsRef.current.get(song.jobId);
+      if (jobData) {
+        clearInterval(jobData.pollInterval);
+        activeJobsRef.current.delete(song.jobId);
+        setActiveJobCount(activeJobsRef.current.size);
+        if (activeJobsRef.current.size === 0) setIsGenerating(false);
+      }
+      showToast('Generation cancelled');
+    } catch (e) {
+      console.error('Cancel error:', e);
+      showToast('Failed to cancel generation', 'error');
+    }
+  };
+
+  const handleAddToPlaylistMany = (songsToAdd: Song[]) => {
+    // Open playlist modal with first song; after selection add all
+    if (!songsToAdd.length) return;
+    setSongsToAddToPlaylist(songsToAdd);
+    setIsAddToPlaylistModalOpen(true);
+  };
+
   const handleDeleteReferenceTrack = (trackId: string) => {
     if (!token) return;
 
@@ -1146,11 +1177,18 @@ function AppContent() {
   };
 
   const addSongToPlaylist = async (playlistId: string) => {
-    if (!songToAddToPlaylist || !token) return;
+    if (!token) return;
     try {
-      await playlistsApi.addSong(playlistId, songToAddToPlaylist.id, token);
-      setSongToAddToPlaylist(null);
-      showToast(t('songAddedToPlaylist'));
+      // Multi-select mode
+      if (songsToAddToPlaylist.length > 0) {
+        await Promise.all(songsToAddToPlaylist.map(s => playlistsApi.addSong(playlistId, s.id, token)));
+        setSongsToAddToPlaylist([]);
+        showToast(`${songsToAddToPlaylist.length} songs added to playlist`);
+      } else if (songToAddToPlaylist) {
+        await playlistsApi.addSong(playlistId, songToAddToPlaylist.id, token);
+        setSongToAddToPlaylist(null);
+        showToast(t('songAddedToPlaylist'));
+      }
       playlistsApi.getMyPlaylists(token).then(r => setPlaylists(r.playlists)).catch(() => {});
     } catch (error) {
       console.error('Add song error:', error);
@@ -1364,11 +1402,14 @@ function AppContent() {
                 onReusePrompt={handleReuse}
                 onDelete={handleDeleteSong}
                 onDeleteMany={handleDeleteSongs}
+                onAddToPlaylistMany={handleAddToPlaylistMany}
                 onUseAsReference={handleUseAsReference}
                 onCoverSong={handleCoverSong}
                 onUseUploadAsReference={handleUseUploadAsReference}
                 onCoverUpload={handleCoverUpload}
+                onDeleteUpload={handleDeleteReferenceTrack}
                 onSongUpdate={handleSongUpdate}
+                onCancelGeneration={handleCancelGeneration}
               />
             </div>
 

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 { useI18n } from '../context/I18nContext';
+import { PresetManager, PresetData } from './PresetManager';
 import { generateApi } from '../services/api';
 import { MAIN_STYLES } from '../data/genres';
 import { EditableSlider } from './EditableSlider';
@@ -1486,6 +1487,46 @@ export const CreatePanel: React.FC<CreatePanelProps> = ({
         </div>
 
 
+        {/* PRESET BAR */}
+        <PresetManager
+          currentValues={{
+            style, musicTags,
+            lyrics,
+            instrumental, vocalLanguage, vocalGender,
+            duration, bpm, keyScale, timeSignature,
+            inferenceSteps, guidanceScale, shift, inferMethod, batchSize,
+            lmTemperature, lmCfgScale, lmTopP, lmTopK, lmNegativePrompt,
+            loraPath, loraEnabled, loraScale,
+            taskType,
+          }}
+          onLoad={(data: PresetData) => {
+            if (data.style !== undefined) setStyle(data.style);
+            if (data.musicTags !== undefined) setMusicTags(data.musicTags);
+            if (data.lyrics !== undefined) setLyrics(data.lyrics);
+            if (data.instrumental !== undefined) setInstrumental(data.instrumental);
+            if (data.vocalLanguage !== undefined) setVocalLanguage(data.vocalLanguage);
+            if (data.vocalGender !== undefined) setVocalGender(data.vocalGender as 'male' | 'female' | '');
+            if (data.duration !== undefined) setDuration(data.duration);
+            if (data.bpm !== undefined) setBpm(data.bpm);
+            if (data.keyScale !== undefined) setKeyScale(data.keyScale);
+            if (data.timeSignature !== undefined) setTimeSignature(data.timeSignature);
+            if (data.inferenceSteps !== undefined) setInferenceSteps(data.inferenceSteps);
+            if (data.guidanceScale !== undefined) setGuidanceScale(data.guidanceScale);
+            if (data.shift !== undefined) setShift(data.shift);
+            if (data.inferMethod !== undefined) setInferMethod(data.inferMethod as 'ode' | 'sde');
+            if (data.batchSize !== undefined) setBatchSize(data.batchSize);
+            if (data.lmTemperature !== undefined) setLmTemperature(data.lmTemperature);
+            if (data.lmCfgScale !== undefined) setLmCfgScale(data.lmCfgScale);
+            if (data.lmTopP !== undefined) setLmTopP(data.lmTopP);
+            if (data.lmTopK !== undefined) setLmTopK(data.lmTopK);
+            if (data.lmNegativePrompt !== undefined) setLmNegativePrompt(data.lmNegativePrompt);
+            if (data.loraPath !== undefined) setLoraPath(data.loraPath);
+            if (data.loraEnabled !== undefined) setLoraEnabled(data.loraEnabled);
+            if (data.loraScale !== undefined) setLoraScale(data.loraScale);
+            if (data.taskType !== undefined) setTaskType(data.taskType);
+          }}
+        />
+
         {/* UNIFIED PANEL */}
         <div className="space-y-5">
           {/* Title Input */}