feat: AI MIDI Prompt Template & Preset Engine

- promptTemplateManager.js: standalone service with keyword scoring, CRUD, fav toggle
- ai_presets.py: backend CRUD router (JSON file, auth isolation)
- AIPresetModal: PromptTemplateManager, star/fav column, backend API sync
- Piano Roll AI: preset matching support
- 7 tests: matching, CRUD, anonymous auth, user isolation

app/api/v1/ai_presets.py

@@ -0,0 +1,148 @@
+import json, os, time
+from fastapi import APIRouter, HTTPException, Header
+from pydantic import BaseModel
+from typing import Optional, List
+from app.core.auth import decode_token
+from app.config import settings
+
+router = APIRouter()
+
+DATA_FILE = os.path.join(settings.PROCESSED_DIR, "ai_presets.json")
+
+DEFAULT_PRESETS = [
+    {
+        "id": "preset_epic_orchestra_intro",
+        "name": "Epic Orchestra Intro (8 Bars)",
+        "keywords": ["epic orchestra", "epic orchestral", "hoành tráng", "nhạc phim epic"],
+        "category": "Orchestral / Film Score",
+        "default_bars": 8,
+        "default_bpm": 130,
+        "default_scale": "C Minor",
+        "system_instruction_template": "You are a professional film composer. Create a powerful, dramatic 8-bar orchestral intro. Keep the note density low (e.g. use mostly whole notes, half notes, or quarter notes) and do NOT generate dense 16th notes or complex drum rolls. This is critical to avoid output token limit timeouts. The required structure to return via the `generate_multitrack_midi` tool consists of 3 tracks: 1. Strings: plays smooth legato chord changes (one chord per 1 or 2 bars). 2. Brass Theme: plays a swelling simple melodic line in the C3-C5 range. 3. Epic Percussion: hits heavily on beats 1 and 3. Ensure the duration is precisely 8 bars (32 beats).",
+        "is_user_defined": False,
+        "is_favorite": False,
+        "created_at": "2026-07-23T16:00:00Z"
+    },
+    {
+        "id": "preset_pop_piano_chords",
+        "name": "Pop Piano Chords (4 Bars)",
+        "keywords": ["pop piano", "piano chords", "ballad piano", "hợp âm piano"],
+        "category": "Pop / Ballad",
+        "default_bars": 4,
+        "default_bpm": 90,
+        "default_scale": "C Major",
+        "system_instruction_template": "You are a professional Pop Piano player. Generate a beautiful 4-bar piano chord progression (e.g. C - G - Am - F) with pleasant chord voicing and simple accompaniment. Return the MIDI notes via `generate_multitrack_midi` function on a track named 'Pop Piano'. Keep notes simple, using mostly whole/half/quarter notes. Ensure the duration of the track is precisely 4 bars (16 beats).",
+        "is_user_defined": False,
+        "is_favorite": False,
+        "created_at": "2026-07-23T16:00:00Z"
+    },
+    {
+        "id": "preset_cyberpunk_synth",
+        "name": "Cyberpunk Synthwave (8 Bars)",
+        "keywords": ["cyberpunk synth", "synthwave", "cyberpunk", "futuristic synth"],
+        "category": "Electronic / Synthwave",
+        "default_bars": 8,
+        "default_bpm": 120,
+        "default_scale": "A Minor",
+        "system_instruction_template": "You are a Synthwave producer. Generate a driving 8-bar cyberpunk synth theme. Return MIDI notes via `generate_multitrack_midi` containing: 1. Synth Bass: eighth notes on pitch A1, C2, G1. 2. Synth Lead: simple melodic line in high register C4-E5. Keep notes clean and concise to ensure fast generation.",
+        "is_user_defined": False,
+        "is_favorite": False,
+        "created_at": "2026-07-23T16:00:00Z"
+    }
+]
+
+
+class AIPresetSchema(BaseModel):
+    id: str
+    name: str
+    keywords: List[str]
+    category: str = "General"
+    default_bars: int = 8
+    default_bpm: int = 120
+    default_scale: str = "C Major"
+    system_instruction_template: str
+    is_user_defined: bool = True
+    is_favorite: bool = False
+    created_at: Optional[str] = None
+
+
+def _load_data():
+    if not os.path.exists(DATA_FILE):
+        return {"user_presets": {}}
+    try:
+        with open(DATA_FILE, "r") as f:
+            return json.load(f)
+    except Exception:
+        return {"user_presets": {}}
+
+
+def _save_data(user_presets):
+    os.makedirs(os.path.dirname(DATA_FILE), exist_ok=True)
+    with open(DATA_FILE, "w") as f:
+        json.dump({"user_presets": user_presets}, f, indent=2)
+
+
+def _get_user_id(authorization):
+    if not authorization or not authorization.startswith("Bearer "):
+        return "anonymous"
+    token = authorization.split(" ")[1]
+    payload = decode_token(token)
+    if not payload:
+        return "anonymous"
+    return payload.get("user_id", "anonymous")
+
+
+@router.get("/presets")
+async def list_presets(authorization: Optional[str] = Header(None)):
+    uid = _get_user_id(authorization)
+    data = _load_data()
+    user_presets = data.get("user_presets", {}).get(uid, [])
+    merged = DEFAULT_PRESETS + user_presets
+    return {"success": True, "presets": merged}
+
+
+@router.post("/presets")
+async def save_preset(req: AIPresetSchema, authorization: Optional[str] = Header(None)):
+    uid = _get_user_id(authorization)
+    if uid == "anonymous":
+        raise HTTPException(status_code=401, detail="Authentication required to save presets")
+
+    data = _load_data()
+    user_presets = data.get("user_presets", {}).get(uid, [])
+
+    if not req.created_at:
+        req.created_at = time.strftime("%Y-%m-%dT%H:%M:%SZ", time.gmtime())
+
+    existing_idx = next((i for i, p in enumerate(user_presets) if p["id"] == req.id), None)
+    preset_dict = req.model_dump()
+
+    if existing_idx is not None:
+        user_presets[existing_idx] = preset_dict
+    else:
+        user_presets.append(preset_dict)
+
+    if "user_presets" not in data:
+        data["user_presets"] = {}
+    data["user_presets"][uid] = user_presets
+    _save_data(data["user_presets"])
+    return {"success": True, "preset": preset_dict}
+
+
+@router.delete("/presets/{preset_id}")
+async def delete_preset(preset_id: str, authorization: Optional[str] = Header(None)):
+    uid = _get_user_id(authorization)
+    if uid == "anonymous":
+        raise HTTPException(status_code=401, detail="Authentication required to delete presets")
+
+    data = _load_data()
+    user_presets = data.get("user_presets", {}).get(uid, [])
+    filtered = [p for p in user_presets if p["id"] != preset_id]
+
+    if len(filtered) == len(user_presets):
+        raise HTTPException(status_code=404, detail="Preset not found")
+
+    if "user_presets" not in data:
+        data["user_presets"] = {}
+    data["user_presets"][uid] = filtered
+    _save_data(data["user_presets"])
+    return {"success": True, "message": "Preset deleted"}

app/main.py

@@ -12,6 +12,7 @@ from app.api.v1.admin import router as admin_router
 from app.api.v1.projects import router as projects_router
 from app.api.v1.user_config import router as user_config_router
 from app.api.v1.ai_proxy import router as ai_proxy_router
+from app.api.v1.ai_presets import router as ai_presets_router
 from app.api.v1.plugins import router as plugins_router
 from app.core.auth import seed_admin
 from app.core.soundfont_converter import SoundFontConverter
@@ -50,6 +51,7 @@ app.include_router(admin_router, prefix="/api/v1/admin", tags=["admin"])
 app.include_router(projects_router, prefix="/api/v1/projects", tags=["projects"])
 app.include_router(user_config_router, prefix="/api/v1/user", tags=["user_config"])
 app.include_router(ai_proxy_router, prefix="/api/v1/ai", tags=["ai"])
+app.include_router(ai_presets_router, prefix="/api/v1/ai", tags=["ai"])
 app.include_router(plugins_router, prefix="/api/v1/plugins", tags=["plugins"])
 
 # Seed admin user on startup

app/static/js/app.jsx

@@ -4271,65 +4271,20 @@ const SystemManagerModal = ({
   }, "Xóa")))))))));
 };
 
-const DEFAULT_PRESETS = [
-  {
-    id: "preset_epic_orchestra_intro",
-    name: "Epic Orchestra Intro (8 Bars)",
-    keywords: ["epic orchestra", "epic orchestral", "hoành tráng", "nhạc phim epic"],
-    category: "Orchestral / Film Score",
-    default_bars: 8,
-    default_bpm: 130,
-    default_scale: "C Minor",
-    system_instruction_template: "You are a professional film composer. Create a powerful, dramatic 8-bar orchestral intro. Keep the note density low (e.g. use mostly whole notes, half notes, or quarter notes) and do NOT generate dense 16th notes or complex drum rolls. This is critical to avoid output token limit timeouts. The required structure to return via the `generate_multitrack_midi` tool consists of 3 tracks: 1. Strings: plays smooth legato chord changes (one chord per 1 or 2 bars). 2. Brass Theme: plays a swelling simple melodic line in the C3-C5 range. 3. Epic Percussion: hits heavily on beats 1 and 3. Ensure the duration is precisely 8 bars (32 beats).",
-    is_user_defined: false,
-    created_at: "2026-07-23T16:00:00Z"
-  },
-  {
-    id: "preset_pop_piano_chords",
-    name: "Pop Piano Chords (4 Bars)",
-    keywords: ["pop piano", "piano chords", "ballad piano", "hợp âm piano"],
-    category: "Pop / Ballad",
-    default_bars: 4,
-    default_bpm: 90,
-    default_scale: "C Major",
-    system_instruction_template: "You are a professional Pop Piano player. Generate a beautiful 4-bar piano chord progression (e.g. C - G - Am - F) with pleasant chord voicing and simple accompaniment. Return the MIDI notes via `generate_multitrack_midi` function on a track named 'Pop Piano'. Keep notes simple, using mostly whole/half/quarter notes. Ensure the duration of the track is precisely 4 bars (16 beats).",
-    is_user_defined: false,
-    created_at: "2026-07-23T16:00:00Z"
-  },
-  {
-    id: "preset_cyberpunk_synth",
-    name: "Cyberpunk Synthwave (8 Bars)",
-    keywords: ["cyberpunk synth", "synthwave", "cyberpunk", "futuristic synth"],
-    category: "Electronic / Synthwave",
-    default_bars: 8,
-    default_bpm: 120,
-    default_scale: "A Minor",
-    system_instruction_template: "You are a Synthwave producer. Generate a driving 8-bar cyberpunk synth theme. Return MIDI notes via `generate_multitrack_midi` containing: 1. Synth Bass: eighth notes on pitch A1, C2, G1. 2. Synth Lead: simple melodic line in high register C4-E5. Keep notes clean and concise to ensure fast generation.",
-    is_user_defined: false,
-    created_at: "2026-07-23T16:00:00Z"
-  }
-];
-
 const AIPresetModal = ({ isOpen, onClose }) => {
   if (!isOpen) return null;
 
-  const [presets, setPresets] = React.useState(() => {
-    const local = localStorage.getItem('daw_ai_prompt_presets');
-    if (!local) return DEFAULT_PRESETS;
-    try {
-      const parsed = JSON.parse(local);
-      const userPresets = parsed.filter(p => p.is_user_defined);
-      return [...DEFAULT_PRESETS, ...userPresets];
-    } catch (_) {
-      return DEFAULT_PRESETS;
-    }
-  });
+  const mgrRef = React.useRef(null);
+  if (!mgrRef.current) mgrRef.current = new window.PromptTemplateManager();
+  const mgr = mgrRef.current;
 
+  const [presets, setPresets] = React.useState(() => [...mgr.getPresets()]);
   const [search, setSearch] = React.useState('');
   const [filterCategory, setFilterCategory] = React.useState('ALL');
-  const [editingPreset, setEditingPreset] = React.useState(null); // preset object or 'new'
+  const [showFavoritesOnly, setShowFavoritesOnly] = React.useState(false);
+  const [editingPreset, setEditingPreset] = React.useState(null);
+  const [syncing, setSyncing] = React.useState(false);
 
-  // Form states
   const [formName, setFormName] = React.useState('');
   const [formKeywords, setFormKeywords] = React.useState('');
   const [formCategory, setFormCategory] = React.useState('Orchestral / Film Score');
@@ -4338,9 +4293,32 @@ const AIPresetModal = ({ isOpen, onClose }) => {
   const [formScale, setFormScale] = React.useState('C Minor');
   const [formTemplate, setFormTemplate] = React.useState('');
 
+  // Try to sync from backend on mount
+  React.useEffect(() => {
+    if (!window.SonicAPI) return;
+    setSyncing(true);
+    window.SonicAPI.getAIPresets()
+      .then(data => {
+        if (data && data.presets && data.presets.length > 0) {
+          mgr.presets = data.presets;
+          setPresets([...data.presets]);
+        }
+      })
+      .catch(() => {})
+      .finally(() => setSyncing(false));
+  }, []);
+
   const savePresets = (newPresets) => {
     setPresets(newPresets);
-    localStorage.setItem('daw_ai_prompt_presets', JSON.stringify(newPresets));
+    mgr.presets = newPresets;
+    mgr.savePresets();
+    // Sync to backend if available
+    const userDefined = newPresets.filter(p => p.is_user_defined);
+    if (window.SonicAPI && userDefined.length > 0) {
+      userDefined.forEach(p => {
+        window.SonicAPI.saveAIPreset(p).catch(() => {});
+      });
+    }
   };
 
   const handleEdit = (p) => {
@@ -4365,9 +4343,22 @@ const AIPresetModal = ({ isOpen, onClose }) => {
     setFormTemplate('');
   };
 
+  const handleToggleFav = (id) => {
+    mgr.toggleFavorite(id);
+    setPresets([...mgr.getPresets()]);
+    const p = mgr.presets.find(x => x.id === id);
+    if (p && p.is_user_defined && window.SonicAPI) {
+      window.SonicAPI.saveAIPreset(p).catch(() => {});
+    }
+  };
+
   const handleDelete = (id) => {
-    const updated = presets.filter(p => p.id !== id);
-    savePresets(updated);
+    const p = presets.find(x => x.id === id);
+    if (p && p.is_user_defined && window.SonicAPI) {
+      window.SonicAPI.deleteAIPreset(id).catch(() => {});
+    }
+    mgr.deletePreset(id);
+    setPresets([...mgr.getPresets()]);
     showToast('Đã xóa preset.', 'info');
   };
 
@@ -4389,27 +4380,34 @@ const AIPresetModal = ({ isOpen, onClose }) => {
       default_scale: formScale,
       system_instruction_template: formTemplate.trim(),
       is_user_defined: true,
+      is_favorite: editingPreset === 'new' ? false : (editingPreset.is_favorite || false),
       created_at: editingPreset === 'new' ? new Date().toISOString() : editingPreset.created_at
     };
 
-    let updated;
-    if (editingPreset === 'new') {
-      updated = [...presets, presetObj];
-    } else {
-      updated = presets.map(p => p.id === presetObj.id ? presetObj : p);
-    }
-
-    savePresets(updated);
+    mgr.saveUserPreset(presetObj);
+    setPresets([...mgr.getPresets()]);
     setEditingPreset(null);
+
+    if (window.SonicAPI) {
+      window.SonicAPI.saveAIPreset(presetObj).catch(() => {});
+    }
     showToast('Đã lưu preset thành công!', 'success');
   };
 
-  const categories = ['ALL', ...new Set(presets.map(p => p.category))];
+  const categories = ['ALL', '★ Yêu thích', ...new Set(presets.map(p => p.category))];
 
   const filtered = presets.filter(p => {
     const matchesSearch = p.name.toLowerCase().includes(search.toLowerCase()) || 
                           p.keywords.some(k => k.toLowerCase().includes(search.toLowerCase()));
-    const matchesCategory = filterCategory === 'ALL' || p.category === filterCategory;
+    let matchesCategory;
+    if (filterCategory === 'ALL') {
+      matchesCategory = true;
+    } else if (filterCategory === '★ Yêu thích') {
+      matchesCategory = p.is_favorite;
+    } else {
+      matchesCategory = p.category === filterCategory;
+    }
+    if (showFavoritesOnly) matchesCategory = matchesCategory && p.is_favorite;
     return matchesSearch && matchesCategory;
   });
 
@@ -4424,7 +4422,9 @@ const AIPresetModal = ({ isOpen, onClose }) => {
   }, /*#__PURE__*/React.createElement("i", {
     "data-lucide": "sliders",
     className: "w-4 h-4"
-  }), "AI Prompt Preset Manager"), /*#__PURE__*/React.createElement("button", {
+  }), "AI Prompt Preset Manager", syncing && /*#__PURE__*/React.createElement("span", {
+    className: "text-[10px] text-zinc-500 ml-2"
+  }, "đang đồng bộ...")), /*#__PURE__*/React.createElement("button", {
     onClick: () => { setEditingPreset(null); onClose(); },
     className: "text-zinc-400 hover:text-zinc-200 transition"
   }, /*#__PURE__*/React.createElement("i", {
@@ -4450,6 +4450,13 @@ const AIPresetModal = ({ isOpen, onClose }) => {
     key: c,
     value: c
   }, c === 'ALL' ? 'Tất cả danh mục' : c))), /*#__PURE__*/React.createElement("button", {
+    onClick: () => setShowFavoritesOnly(!showFavoritesOnly),
+    className: `px-2.5 py-1 rounded text-xs font-bold transition shrink-0 ${showFavoritesOnly ? 'bg-yellow-700 text-yellow-300' : 'bg-zinc-800 text-zinc-400 hover:bg-zinc-700'}`,
+    title: "Chỉ hiện yêu thích"
+  }, /*#__PURE__*/React.createElement("i", {
+    "data-lucide": "star",
+    className: "w-3.5 h-3.5 inline-block mr-1"
+  }), "★"), /*#__PURE__*/React.createElement("button", {
     onClick: handleNew,
     className: "px-3 py-1 bg-purple-700 hover:bg-purple-600 text-white rounded text-xs font-bold flex items-center gap-1.5 shadow transition shrink-0"
   }, /*#__PURE__*/React.createElement("i", {
@@ -4464,6 +4471,8 @@ const AIPresetModal = ({ isOpen, onClose }) => {
   }, /*#__PURE__*/React.createElement("thead", {
     className: "bg-[#1f1f23] text-zinc-400 font-bold border-b border-zinc-800"
   }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    className: "p-2.5 w-8"
+  }, ""), /*#__PURE__*/React.createElement("th", {
     className: "p-2.5 w-1/4"
   }, "Tên Preset"), /*#__PURE__*/React.createElement("th", {
     className: "p-2.5 w-1/4"
@@ -4477,6 +4486,12 @@ const AIPresetModal = ({ isOpen, onClose }) => {
     key: p.id,
     className: "border-b border-zinc-800/50 hover:bg-zinc-850"
   }, /*#__PURE__*/React.createElement("td", {
+    className: "p-2.5 text-center"
+  }, /*#__PURE__*/React.createElement("button", {
+    onClick: () => handleToggleFav(p.id),
+    className: `transition ${p.is_favorite ? 'text-yellow-400' : 'text-zinc-600 hover:text-zinc-400'}`,
+    title: p.is_favorite ? 'Bỏ yêu thích' : 'Đánh dấu yêu thích'
+  }, p.is_favorite ? "★" : "☆")), /*#__PURE__*/React.createElement("td", {
     className: "p-2.5 font-semibold text-purple-300"
   }, p.name), /*#__PURE__*/React.createElement("td", {
     className: "p-2.5 text-zinc-400 font-mono text-[11px] truncate max-w-[150px]"
@@ -4490,7 +4505,7 @@ const AIPresetModal = ({ isOpen, onClose }) => {
     type: "button",
     onClick: () => handleEdit(p),
     className: "px-2 py-0.5 bg-zinc-850 hover:bg-zinc-700 text-zinc-300 rounded border border-zinc-700 text-[10px]"
-  }, "Sửa"), /*#__PURE__*/React.createElement("button", {
+  }, "Sửa"), p.is_user_defined && /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: () => handleDelete(p.id),
     className: "px-2 py-0.5 bg-red-950/40 hover:bg-red-800 text-red-400 rounded border border-red-900 text-[10px]"
@@ -13646,13 +13661,26 @@ const App = () => {
         const apiKey = provider.api_key || provider.apiKey || '';
         const model = provider.model_name || provider.model || 'deepseek-chat';
         setAiActionLog(prev => [...prev, { type: 'info', text: ` Provider: ${provider.name || 'default'} | Model: ${model}`, time: Date.now() }]);
+
+        let pianoSystemInstruction = 'You are a MIDI composer. Output ONLY valid JSON array of notes. No markdown, no explanation. Use 4/4 time. pitch=C4=60, D4=62, E4=64, F4=65, G4=67, A4=69, B4=71, C5=72.';
+        try {
+          const mgr = new window.PromptTemplateManager();
+          const match = mgr.matchPreset(prompt);
+          if (match) {
+            pianoSystemInstruction = match.preset.system_instruction_template;
+            setAiActionLog(prev => [...prev, { type: 'status', text: ` 🎯 Khớp Preset: "${match.preset.name}". Tự động tối ưu gợi ý...`, time: Date.now() }]);
+          }
+        } catch (e) {
+          console.error("Lỗi khi tìm preset:", e);
+        }
+
         const result = await window.AIGateway.executeAIPrompt({
           prompt: 'Generate MIDI notes for a piano roll. Return ONLY a JSON array: [{pitch(0-127), start_beat, duration_beats, velocity(0.0-1.0)}]. ' + prompt,
           provider: provider.name || 'default',
           model: model,
           apiKey: apiKey,
           baseUrl: baseUrl.replace(/\/chat\/completions$/, '').replace(/\/$/, ''),
-          systemInstruction: 'You are a MIDI composer. Output ONLY valid JSON array of notes. No markdown, no explanation. Use 4/4 time. pitch=C4=60, D4=62, E4=64, F4=65, G4=67, A4=69, B4=71, C5=72.'
+          systemInstruction: pianoSystemInstruction
         });
         if (!result) throw new Error('AI không phản hồi');
         let notesData = null;
@@ -13721,12 +13749,11 @@ const App = () => {
 
       let matchedInstruction = '';
       try {
-        const localPresets = localStorage.getItem('daw_ai_prompt_presets');
-        const presets = localPresets ? JSON.parse(localPresets) : DEFAULT_PRESETS;
-        const matched = presets.find(p => p.keywords.some(kw => prompt.toLowerCase().includes(kw.toLowerCase())));
-        if (matched) {
-          matchedInstruction = matched.system_instruction_template;
-          setAiActionLog(prev => [...prev, { type: 'status', text: ` 🎯 Khớp Preset: "${matched.name}". Tự động tối ưu gợi ý...`, time: Date.now() }]);
+        const mgr = new window.PromptTemplateManager();
+        const match = mgr.matchPreset(prompt);
+        if (match) {
+          matchedInstruction = match.preset.system_instruction_template;
+          setAiActionLog(prev => [...prev, { type: 'status', text: ` 🎯 Khớp Preset: "${match.preset.name}". Tự động tối ưu gợi ý...`, time: Date.now() }]);
         }
       } catch (e) {
         console.error("Lỗi khi tìm preset:", e);

app/static/js/services/api.js

@@ -66,6 +66,10 @@ window.API_BASE_URL = window.API_BASE_URL || window.location.origin;
         getSoundfontCatalog: () => apiRequest('/api/v1/plugins/soundfonts/catalog', { method: 'GET' }),
         listDefaultSoundfonts: () => apiRequest('/api/v1/plugins/default-soundfonts', { method: 'GET' }),
         listSoundfontInstruments: (sfId) => apiRequest(`/api/v1/plugins/soundfont-instruments/${sfId}`, { method: 'GET' }),
+        getAIPresets: () => apiRequest('/api/v1/ai/presets', { method: 'GET' }),
+        saveAIPreset: (preset) => apiRequest('/api/v1/ai/presets', { method: 'POST', body: JSON.stringify(preset) }),
+        deleteAIPreset: (presetId) => apiRequest(`/api/v1/ai/presets/${presetId}`, { method: 'DELETE' }),
+
         renderProject: (projectJson, outputFilename) => apiRequest('/api/v1/plugins/render', { method: 'POST', body: JSON.stringify({ project_json: projectJson, output_filename: outputFilename }) }),
         deleteSoundFont: (sfId) => apiRequest(`/api/v1/plugins/soundfont/${sfId}`, { method: 'DELETE' }),
         uploadSoundFont: async (file) => {

app/static/js/services/promptTemplateManager.js

@@ -0,0 +1,135 @@
+const PromptTemplateManager = (function() {
+  const DEFAULT_PRESETS = [
+    {
+      id: "preset_epic_orchestra_intro",
+      name: "Epic Orchestra Intro (8 Bars)",
+      keywords: ["epic orchestra", "epic orchestral", "hoành tráng", "nhạc phim epic"],
+      category: "Orchestral / Film Score",
+      default_bars: 8,
+      default_bpm: 130,
+      default_scale: "C Minor",
+      system_instruction_template: "You are a professional film composer. Create a powerful, dramatic 8-bar orchestral intro. Keep the note density low (e.g. use mostly whole notes, half notes, or quarter notes) and do NOT generate dense 16th notes or complex drum rolls. This is critical to avoid output token limit timeouts. The required structure to return via the `generate_multitrack_midi` tool consists of 3 tracks: 1. Strings: plays smooth legato chord changes (one chord per 1 or 2 bars). 2. Brass Theme: plays a swelling simple melodic line in the C3-C5 range. 3. Epic Percussion: hits heavily on beats 1 and 3. Ensure the duration is precisely 8 bars (32 beats).",
+      is_user_defined: false,
+      is_favorite: false,
+      created_at: "2026-07-23T16:00:00Z"
+    },
+    {
+      id: "preset_pop_piano_chords",
+      name: "Pop Piano Chords (4 Bars)",
+      keywords: ["pop piano", "piano chords", "ballad piano", "hợp âm piano"],
+      category: "Pop / Ballad",
+      default_bars: 4,
+      default_bpm: 90,
+      default_scale: "C Major",
+      system_instruction_template: "You are a professional Pop Piano player. Generate a beautiful 4-bar piano chord progression (e.g. C - G - Am - F) with pleasant chord voicing and simple accompaniment. Return the MIDI notes via `generate_multitrack_midi` function on a track named 'Pop Piano'. Keep notes simple, using mostly whole/half/quarter notes. Ensure the duration of the track is precisely 4 bars (16 beats).",
+      is_user_defined: false,
+      is_favorite: false,
+      created_at: "2026-07-23T16:00:00Z"
+    },
+    {
+      id: "preset_cyberpunk_synth",
+      name: "Cyberpunk Synthwave (8 Bars)",
+      keywords: ["cyberpunk synth", "synthwave", "cyberpunk", "futuristic synth"],
+      category: "Electronic / Synthwave",
+      default_bars: 8,
+      default_bpm: 120,
+      default_scale: "A Minor",
+      system_instruction_template: "You are a Synthwave producer. Generate a driving 8-bar cyberpunk synth theme. Return MIDI notes via `generate_multitrack_midi` containing: 1. Synth Bass: eighth notes on pitch A1, C2, G1. 2. Synth Lead: simple melodic line in high register C4-E5. Keep notes clean and concise to ensure fast generation.",
+      is_user_defined: false,
+      is_favorite: false,
+      created_at: "2026-07-23T16:00:00Z"
+    }
+  ];
+
+  const STORAGE_KEY = 'daw_ai_prompt_presets';
+
+  function PromptTemplateManager() {
+    this.presets = [];
+    this.loadPresets();
+  }
+
+  PromptTemplateManager.prototype.loadPresets = function() {
+    try {
+      const localData = localStorage.getItem(STORAGE_KEY);
+      if (localData) {
+        const parsed = JSON.parse(localData);
+        const userPresets = parsed.filter(p => p.is_user_defined);
+        this.presets = [...DEFAULT_PRESETS, ...userPresets];
+      } else {
+        this.presets = [...DEFAULT_PRESETS];
+        this.savePresets();
+      }
+    } catch (_) {
+      this.presets = [...DEFAULT_PRESETS];
+    }
+  };
+
+  PromptTemplateManager.prototype.savePresets = function() {
+    const userData = this.presets.filter(p => p.is_user_defined);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(userData));
+  };
+
+  PromptTemplateManager.prototype.getPresets = function() {
+    return this.presets;
+  };
+
+  PromptTemplateManager.prototype.matchPreset = function(userQuery) {
+    if (!userQuery) return null;
+    const queryLower = userQuery.toLowerCase();
+    let bestMatch = null;
+    let bestScore = 0;
+
+    for (const preset of this.presets) {
+      for (const kw of preset.keywords) {
+        const kwLower = kw.toLowerCase();
+        if (queryLower === kwLower) {
+          if (3 > bestScore) {
+            bestScore = 3;
+            bestMatch = { preset, score: 3 };
+          }
+        } else if (queryLower.includes(kwLower)) {
+          if (2 > bestScore) {
+            bestScore = 2;
+            bestMatch = { preset, score: 2 };
+          }
+        } else if (kwLower.includes(queryLower)) {
+          if (1 > bestScore) {
+            bestScore = 1;
+            bestMatch = { preset, score: 1 };
+          }
+        }
+      }
+    }
+    return bestMatch;
+  };
+
+  PromptTemplateManager.prototype.saveUserPreset = function(presetObject) {
+    const index = this.presets.findIndex(p => p.id === presetObject.id);
+    if (index >= 0) {
+      this.presets[index] = presetObject;
+    } else {
+      this.presets.push(presetObject);
+    }
+    this.savePresets();
+  };
+
+  PromptTemplateManager.prototype.deletePreset = function(id) {
+    this.presets = this.presets.filter(p => p.id !== id);
+    this.savePresets();
+  };
+
+  PromptTemplateManager.prototype.toggleFavorite = function(id) {
+    const preset = this.presets.find(p => p.id === id);
+    if (preset) {
+      preset.is_favorite = !preset.is_favorite;
+      if (preset.is_user_defined) {
+        this.savePresets();
+      }
+    }
+  };
+
+  return PromptTemplateManager;
+})();
+
+window.PromptTemplateManager = PromptTemplateManager;
+window.DEFAULT_PRESETS = (new PromptTemplateManager()).getPresets();

app/templates/index.html

@@ -20,6 +20,7 @@
     <script src="/static/js/services/dawCommandDispatcher.js?v=202607271016"></script>
     <script src="/static/js/services/pianoRollTabService.js?v=202607272044"></script>
     <script src="/static/js/services/ghostNoteExtractor.js?v=202607271727"></script>
+    <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
     <script src="/static/js/app.precompiled.js?v=202607271245" defer></script>
     <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
     <style>