FIX: Đã đổi tên (v202608060900)

app/static/js/app.jsx

@@ -7036,6 +7036,81 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
     if (undoStackRef.current.length > 50) undoStackRef.current.shift();
   }, []);
 
+  // ── Humanize: ngẫu nhiên hóa velocity + timing theo cường độ ──
+  const [humanizeStrength, setHumanizeStrength] = React.useState(0.10); // 0.05 nhẹ / 0.10 vừa / 0.18 mạnh
+  const applyHumanize = React.useCallback(() => {
+    if (!notes || !notes.length) { showToast('Không có nốt nào để humanize.', 'warning'); return; }
+    const velAmt = humanizeStrength;
+    const timeAmt = humanizeStrength * 0.15; // ±0.015 beat @ vừa (~12ms @120bpm)
+    pushToUndo(notes);
+    setNotes(prev => (prev || []).map(n => ({
+      ...n,
+      velocity: Math.max(0.05, Math.min(1.0, (n.velocity || 0.8) + (Math.random() * 2 - 1) * velAmt)),
+      start_beat: Math.max(0, (n.start_beat || 0) + (Math.random() * 2 - 1) * timeAmt)
+    })));
+    showToast('Đã humanize ' + notes.length + ' nốt (velocity ±' + Math.round(velAmt * 100) + '%, timing ±' + Math.round(timeAmt * 1000) + 'ms).', 'success');
+  }, [notes, pushToUndo, setNotes, showToast, humanizeStrength]);
+
+  // ── Transpose semitone: dịch pitch tất cả nốt (clamp 0-127) ──
+  const applyTranspose = React.useCallback((semi) => {
+    const s = parseInt(semi);
+    if (isNaN(s) || s === 0) { showToast('Nhập số semitone khác 0.', 'warning'); return; }
+    if (!notes || !notes.length) { showToast('Không có nốt nào để transpose.', 'warning'); return; }
+    pushToUndo(notes);
+    setNotes(prev => (prev || []).map(n => ({
+      ...n,
+      pitch: Math.max(0, Math.min(127, (n.pitch || 60) + s))
+    })));
+    showToast('Đã transpose ' + notes.length + ' nốt ' + (s > 0 ? '+' : '') + s + ' semitone.', 'success');
+  }, [notes, pushToUndo, setNotes, showToast]);
+
+  // ── Transpose theo SCALE (chuyển giọng): detect key hiện tại → map degree ──
+  const SCALE_PATTERNS = { major: [0, 2, 4, 5, 7, 9, 11], minor: [0, 2, 3, 5, 7, 8, 10] };
+  const SCALE_ROOTS = { C: 0, 'C#': 1, D: 2, 'D#': 3, E: 4, F: 5, 'F#': 6, G: 7, 'G#': 8, A: 9, 'A#': 10, B: 11 };
+  const detectKey = React.useCallback((noteList) => {
+    const roots = Object.keys(SCALE_ROOTS);
+    let best = null, bestScore = -1;
+    for (let ri = 0; ri < roots.length; ri++) {
+      for (const st of ['major', 'minor']) {
+        const tones = new Set(SCALE_PATTERNS[st].map(s => (SCALE_ROOTS[roots[ri]] + s) % 12));
+        let score = 0;
+        (noteList || []).forEach(n => { const pc = (((n.pitch || 60) % 12) + 12) % 12; if (tones.has(pc)) score++; });
+        if (score > bestScore) { bestScore = score; best = { root: roots[ri], scale: st }; }
+      }
+    }
+    return best || { root: 'C', scale: 'major' };
+  }, []);
+  const [keyTargetRoot, setKeyTargetRoot] = React.useState('C');
+  const [keyTargetScale, setKeyTargetScale] = React.useState('major');
+  const applyTransposeToKey = React.useCallback(() => {
+    if (!notes || !notes.length) { showToast('Không có nốt nào để chuyển giọng.', 'warning'); return; }
+    const srcKey = detectKey(notes);
+    const dstKey = { root: keyTargetRoot, scale: keyTargetScale };
+    if (srcKey.root === dstKey.root && srcKey.scale === dstKey.scale) {
+      showToast('Đã ở giọng ' + dstKey.root + ' ' + dstKey.scale + ' rồi.', 'info');
+      return;
+    }
+    const srcTones = SCALE_PATTERNS[srcKey.scale].map(s => (SCALE_ROOTS[srcKey.root] + s) % 12);
+    const dstTones = SCALE_PATTERNS[dstKey.scale].map(s => (SCALE_ROOTS[dstKey.root] + s) % 12);
+    pushToUndo(notes);
+    setNotes(prev => (prev || []).map(n => {
+      const p = n.pitch || 60;
+      const pc = ((p % 12) + 12) % 12;
+      // Degree gần nhất trong scale nguồn (7 bậc)
+      let bestIdx = 0, bestDist = 99;
+      for (let i = 0; i < 7; i++) {
+        let d = Math.abs(pc - srcTones[i]); if (d > 6) d = 12 - d;
+        if (d < bestDist) { bestDist = d; bestIdx = i; }
+      }
+      let shift = dstTones[bestIdx] - srcTones[bestIdx];
+      if (shift > 6) shift -= 12; else if (shift < -6) shift += 12;
+      return { ...n, pitch: Math.max(0, Math.min(127, p + shift)) };
+    }));
+    showToast('Chuyển giọng ' + srcKey.root + ' ' + srcKey.scale + ' → ' + dstKey.root + ' ' + dstKey.scale + ' (' + notes.length + ' nốt).', 'success');
+  }, [notes, pushToUndo, setNotes, showToast, detectKey, keyTargetRoot, keyTargetScale]);
+
+  const [transposeSemis, setTransposeSemis] = React.useState(0);
+
   const handleUndo = React.useCallback(() => {
     const prev = undoStackRef.current.pop();
     if (!prev) return;
@@ -8387,9 +8462,9 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
   return React.createElement("div", {
     className: "flex-1 flex overflow-hidden min-h-0 bg-[#1e1e1e] flex-col h-full"
   }, 
-    /* 1. TOOLBAR HEADER */
+    /* 1. TOOLBAR HEADER — 2 hàng (wrap tự nhiên; spacer 100% ép hàng mới) */
     React.createElement("div", {
-      className: "h-10 bg-[#282828] border-b border-zinc-900 flex items-center justify-between px-4 shrink-0 text-slate-200"
+      className: "bg-[#282828] border-b border-zinc-900 flex flex-wrap items-center gap-x-2 gap-y-1 px-4 py-1.5 shrink-0 text-slate-200"
     }, React.createElement("div", {
       className: "flex items-center gap-4"
     }, React.createElement("select", {
@@ -8475,12 +8550,50 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
         return showGhostNotes ? base + 'bg-purple-900/60 text-purple-300 border border-purple-700' : base + 'text-zinc-500 hover:text-zinc-300';
       }(),
       title: "Toggle ghost notes visibility"
-    }, "\uD83D\uDC7B Ghost"), React.createElement("div", {
+    }, "\\uD83D\\uDC7B MIDI ghost notes"), React.createElement("div", {
+      style: { flexBasis: "100%", height: 0 }
+    }), React.createElement("button", {
+      onClick: applyHumanize,
+      className: "px-2 py-1 rounded text-xs bg-amber-900/40 text-amber-300 border border-amber-700/60 hover:bg-amber-800/50 transition",
+      title: "Humanize: randomize velocity + timing"
+    }, "\uD83C\uDF9A Humanize"), React.createElement("select", {
+      key: "humstr", value: humanizeStrength,
+      onChange: function(e) { setHumanizeStrength(parseFloat(e.target.value)); },
+      className: "px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-zinc-300 cursor-pointer",
+      title: "Cường độ humanize"
+    }, React.createElement("option", { key: "l", value: 0.05 }, "Nh\u1EB9"), React.createElement("option", { key: "m", value: 0.10 }, "V\u1EEBa"), React.createElement("option", { key: "s", value: 0.18 }, "M\u1EA1nh")), React.createElement("div", {
+      key: "transpose", className: "flex items-center gap-1"
+    }, React.createElement("input", {
+      key: "in", type: "number", step: 1, min: -24, max: 24, value: transposeSemis,
+      onChange: function(e) { setTransposeSemis(e.target.value); },
+      className: "w-12 px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-center text-zinc-200",
+      title: "Semitone offset (vd 2 = cao hơn 1 tone)"
+    }), React.createElement("button", {
+      key: "btn", onClick: function() { applyTranspose(transposeSemis); },
+      className: "px-2 py-1 rounded text-xs bg-sky-900/40 text-sky-300 border border-sky-700/60 hover:bg-sky-800/50 transition",
+      title: "Transpose all notes by the semitone offset"
+    }, "Transpose")), React.createElement("div", {
+      key: "keyshift", className: "flex items-center gap-1"
+    }, React.createElement("select", {
+      key: "root", value: keyTargetRoot,
+      onChange: function(e) { setKeyTargetRoot(e.target.value); },
+      className: "px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-zinc-300 cursor-pointer",
+      title: "Giọng đích (root)"
+    }, ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"].map(function(r) { return React.createElement("option", { key: r, value: r }, r); })), React.createElement("select", {
+      key: "scale", value: keyTargetScale,
+      onChange: function(e) { setKeyTargetScale(e.target.value); },
+      className: "px-1 py-1 rounded text-xs bg-zinc-900 border border-zinc-700 text-zinc-300 cursor-pointer",
+      title: "Thể scale đích"
+    }, React.createElement("option", { key: "maj", value: "major" }, "major"), React.createElement("option", { key: "min", value: "minor" }, "minor")), React.createElement("button", {
+      key: "btn", onClick: applyTransposeToKey,
+      className: "px-2 py-1 rounded text-xs bg-violet-900/40 text-violet-300 border border-violet-700/60 hover:bg-violet-800/50 transition",
+      title: "Chuyển giọng: map degree hiện tại sang giọng đích (auto-detect key nguồn)"
+    }, "\uD83C\uDFB5 Chuy\u1EC3n gi\u1ECDng")), React.createElement("div", {
       className: "flex items-center gap-1"
     }, React.createElement("button", {
       onClick: () => onSaveNotes(st.id, st.trackId, st.target_id, notes),
       className: "px-2.5 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded text-xs flex items-center gap-1 transition font-semibold"
-    }, React.createElement("i", { "data-lucide": "save", className: "w-3 h-3" }), "Lưu"), React.createElement("button", {
+    }, React.createElement("i", { "data-lucide": "save", className: "w-3 h-3" }), "L\u01B0u"), React.createElement("button", {
       onClick: () => {
         const ppq = 480;
         const bpmNum = parseInt(bpm) || 120;

app/templates/index.html

@@ -24,7 +24,7 @@
     <script src="/static/js/services/midiExtractor.js?v=202607281052"></script>
     <script src="/static/js/services/promptTemplateManager.js?v=202607281039"></script>
     <script src="/static/js/services/undoRedoEngine.js?v=202607290941"></script>
-    <script src="/static/js/app.precompiled.js?v=202608060700" defer></script>
+    <script src="/static/js/app.precompiled.js?v=202608060900" defer></script>
     <link rel="stylesheet" href="/static/css/styles.css?v=202607271016">
     <style>
         :root {

wiki.md

@@ -1995,3 +1995,30 @@
 - **FIX (app/main.py):** index.html (`/`) thêm `Cache-Control: no-cache, no-store, must-revalidate` — HTML luôn mới, bundle JS bust bằng ?v=.
 - **Các file ảnh hưởng:** `app/main.py`. Cần rebuild docker + restart.
 - **Ghi chú/Test:** sau khi deploy: incognito (đóng + mở lại tab — hoặc Ctrl+Shift+R 1 lần) → load trang → bundle mới. Verify: console thấy stamp mới.
+
+### [2026-08-06 07:30] Task: PIANO ROLL TAB — Humanize + Transpose (có undo)
+- **Yêu cầu user:** cài đặt tính năng Humanize (midi note) + Transpose (chuyển giọng) trong piano roll tab.
+- **FIX (app.jsx PianoRollTabEditor):**
+  (1) `applyHumanize()` — random velocity ±8% + start_beat ±0.015 beat (~12ms @120bpm), clamp 0.05-1.0/≥0 — pushToUndo trước khi đổi.
+  (2) `applyTranspose(semi)` — dịch pitch ±s semitone, clamp 0-127 — pushToUndo trước khi đổi.
+  (3) Toolbar: nút **🎚 Humanize** (sau nút Ghost) + nhóm **input semitone + nút Transpose** (trước nút Lưu). State `transposeSemis` local.
+  (4) Cả 2 đều qua `pushToUndo(notes)` → Ctrl+Z/Ctrl+Shift+Z hoạt động (undo stack local của piano roll).
+- **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/templates/index.html` (?v=202608060730), `wiki.md`. Rebuild precompiled.
+- **Ghi chú/Test:** `npm run build` → hard refresh → mở piano roll → bấm Humanize (nghe velocity/timing đổi) → Transpose +2 (nghe cao hơn 1 tone) → Ctrl+Z hoàn tác.
+
+### [2026-08-06 08:00] Task: Humanize có cường độ (Nhẹ/Vừa/Mạnh) + Transpose theo SCALE (12 tông major/minor)
+- **Yêu cầu user:** tùy chỉnh lượng humanize (mạnh/nhẹ) + transpose theo scale major/minor đủ 12 tông.
+- **FIX (app.jsx PianoRollTabEditor):**
+  (1) Humanize: `humanizeStrength` state (0.05 Nhẹ / 0.10 Vừa / 0.18 Mạnh) + select trong toolbar — velocity ±strength, timing ±strength*0.15 beat.
+  (2) Transpose theo SCALE: `SCALE_PATTERNS` (major [0,2,4,5,7,9,11], minor [0,2,3,5,7,8,10]) + `SCALE_ROOTS` (12 tông) + **`detectKey()` auto-detect key nguồn** (best-fit root+scale theo pitch class) + `applyTransposeToKey()` map **degree → degree** (nốt về bậc gần nhất trong scale nguồn → shift sang bậc tương ứng scale đích, ±6 clamp octave).
+  (3) Toolbar: `[🎚 Humanize] [Nhẹ|Vừa|Mạnh] [semis|Transpose] [C..B][major|minor][🎵 Chuyển giọng]` — đều qua pushToUndo (Ctrl+Z hoạt động).
+- **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/templates/index.html` (?v=202608060800), `wiki.md`. Rebuild precompiled.
+- **Ghi chú/Test:** `npm run build` → hard refresh → piano roll → Humanize Mạnh vs Nhẹ; Chuyển giọng C major → D minor (map degree — melody giữ hình dạng) → Ctrl+Z.
+
+### [2026-08-06 08:30] Task: Toolbar piano roll 2 hàng — nhóm nút chỉnh sửa note sang hàng mới
+- **Yêu cầu user:** thêm hàng toolbar mới, di chuyển nút tính năng tương tự sang hàng mới.
+- **FIX (app.jsx):** header toolbar đổi `h-10 flex items-center justify-between` → `flex flex-wrap items-center gap-x-2 gap-y-1 px-4 py-1.5` + **row-break spacer** (`flexBasis:100%, height:0`) trước nút Humanize.
+  - **Hàng 1:** track select, Snap to Scale, Snap, ARM, MIDI Input, Instrument, AI bar range, CC mode/CC, Session/Isolated, Ghost.
+  - **Hàng 2:** 🎚 Humanize + [Nhẹ|Vừa|Mạnh], ±semis Transpose, [C..B][major|minor] 🎵 Chuyển giọng, Lưu, Export, Đóng.
+- **Các file ảnh hưởng:** `app/static/js/app.jsx`, `app/templates/index.html` (?v=202608060830), `wiki.md`. Rebuild precompiled.
+- **Ghi chú/Test:** `npm run build` → hard refresh → mở piano roll → thấy 2 hàng toolbar; nút edit note (Humanize/Transpose/Chuyển giọng) ở hàng 2.