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
This commit is contained in:
+101
-74
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user