fix tạm lỗi cài đặt AI prompt

2026-07-21 21:38:37 +07:00
parent bbc42c630e
commit 04403b0af7
7 changed files with 484 additions and 198 deletions
@@ -2999,6 +2999,11 @@ const App = () => {
    data: null,
    isRunning: false
  });
+  const [aiPrompt, setAiPrompt] = useState('');
+  const [aiProvider, setAiProvider] = useState('OpenAI');
+  const [aiModel, setAiModel] = useState('GPT-4o');
+  const [aiActionLog, setAiActionLog] = useState([]);
+  const [aiProcessing, setAiProcessing] = useState(false);
  const [exportSettings, setExportSettings] = useState({
    sampleRate: '44100',
    bitDepth: '16',
@@ -7004,6 +7009,253 @@ const App = () => {
    showToast(`Đã gộp ${clips.length} clips thành công.`, 'success');
  };

+  // ── DAW Command Registration for AI (28_AI_PANEL.md §1 & §2) ──
+  useEffect(() => {
+    if (typeof window.DAWCommandDispatcher === 'undefined') return;
+    const api = {
+      createTrack: args => {
+        const name = args.name || `AI_Track_${Date.now()}`;
+        const type = args.type || 'audio';
+        const newId = addNewTrack();
+        if (name && name !== `AI_Track_${Date.now()}`) {
+          updateTrackName(newId, name);
+        }
+        return {
+          success: true,
+          trackId: newId,
+          name
+        };
+      },
+      deleteTrack: args => {
+        const tid = args.track_id || selectedTrackId;
+        if (!tid) return {
+          success: false,
+          error: 'No track_id provided'
+        };
+        deleteTrack(tid);
+        return {
+          success: true,
+          trackId: tid
+        };
+      },
+      addClip: args => {
+        const trackId = args.track_id || selectedTrackId;
+        const startTime = args.start_time || args.start_bar ? args.start_bar * (60 / parseInt(bpm || 120)) * 4 : currentTime;
+        const track = tracks.find(t => t.id === trackId);
+        if (!track) return {
+          success: false,
+          error: 'Track not found'
+        };
+        const ctx = getAudioContext();
+        const sr = 44100;
+        const duration = args.duration_seconds || args.length_bars ? args.length_bars * (60 / parseInt(bpm || 120)) * 4 : 2;
+        const buffer = ctx.createBuffer(1, Math.floor(sr * duration), sr);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < data.length; i++) data[i] = 0;
+        const clipId = 'clip_' + Date.now();
+        setTracks(prev => prev.map(t => {
+          if (t.id !== trackId) return t;
+          const clips = t.clips && t.clips.length > 0 ? t.clips : t.buffer ? [{
+            id: 'default_' + t.id,
+            buffer: t.buffer,
+            startTime: t.startTime || 0,
+            name: t.name
+          }] : [];
+          return {
+            ...t,
+            clips: [...clips, {
+              id: clipId,
+              buffer,
+              startTime,
+              name: args.name || 'AI Clip'
+            }],
+            buffer: clips.length > 0 ? clips[0].buffer : buffer,
+            startTime: clips.length > 0 ? clips[0].startTime : startTime,
+            name: clips.length > 0 ? clips[0].name : args.name || t.name
+          };
+        }));
+        return {
+          success: true,
+          clipId,
+          trackId
+        };
+      },
+      removeClip: args => {
+        const trackId = args.track_id || selectedTrackId;
+        const clipId = args.clip_id;
+        setTracks(prev => prev.map(t => {
+          if (t.id !== trackId) return t;
+          const updatedClips = (t.clips || []).filter(c => c.id !== clipId);
+          return {
+            ...t,
+            clips: updatedClips,
+            buffer: updatedClips[0]?.buffer || null,
+            startTime: updatedClips[0]?.startTime || 0,
+            name: updatedClips[0]?.name || t.name
+          };
+        }));
+        return {
+          success: true
+        };
+      },
+      setTrackVolume: args => {
+        const trackId = args.track_id || selectedTrackId;
+        const vol = args.volume_db ?? args.volume ?? 0;
+        updateTrackVolumeDb(trackId, parseFloat(vol));
+        return {
+          success: true,
+          trackId,
+          volumeDb: vol
+        };
+      },
+      setTrackPan: args => {
+        const trackId = args.track_id || selectedTrackId;
+        const pan = args.pan ?? 0;
+        updateTrackPan(trackId, parseInt(pan));
+        return {
+          success: true,
+          trackId,
+          pan
+        };
+      },
+      toggleMute: args => {
+        const trackId = args.track_id || selectedTrackId;
+        toggleTrackMute(trackId);
+        const track = tracks.find(t => t.id === trackId);
+        return {
+          success: true,
+          trackId,
+          muted: track ? track.muted : null
+        };
+      },
+      toggleSolo: args => {
+        const trackId = args.track_id || selectedTrackId;
+        toggleTrackSoloEvaluate(trackId);
+        const track = tracks.find(t => t.id === trackId);
+        return {
+          success: true,
+          trackId,
+          solo: track ? track.solo : null
+        };
+      },
+      processAudioDsp: args => {
+        const trackId = args.track_id || selectedTrackId;
+        const action = args.action;
+        const params = args.params || {};
+        const track = tracks.find(t => t.id === trackId);
+        if (!track || !track.buffer) return {
+          success: false,
+          error: 'Track has no audio buffer'
+        };
+        if (action === 'normalize') {
+          const channelData = track.buffer.getChannelData(0);
+          let maxVal = 0;
+          for (let i = 0; i < channelData.length; i++) maxVal = Math.max(maxVal, Math.abs(channelData[i]));
+          if (maxVal > 0) {
+            const gain = 1.0 / maxVal;
+            for (let i = 0; i < channelData.length; i++) channelData[i] *= gain;
+          }
+          return {
+            success: true,
+            action: 'normalize'
+          };
+        } else if (action === 'invert_phase') {
+          const channelData = track.buffer.getChannelData(0);
+          for (let i = 0; i < channelData.length; i++) channelData[i] *= -1;
+          return {
+            success: true,
+            action: 'invert_phase'
+          };
+        } else if (action === 'gain') {
+          const gainDb = params.gain_db ?? 0;
+          const scale = Math.pow(10, gainDb / 20);
+          const channelData = track.buffer.getChannelData(0);
+          for (let i = 0; i < channelData.length; i++) channelData[i] = Math.max(-1, Math.min(1, channelData[i] * scale));
+          return {
+            success: true,
+            action: 'gain',
+            gainDb
+          };
+        } else if (action === 'pitch_shift') {
+          const semitones = params.semitones ?? 0;
+          const ratio = Math.pow(2, semitones / 12);
+          const applyResample = (data, r) => {
+            const newLen = Math.round(data.length * r);
+            const out = new Float32Array(newLen);
+            for (let i = 0; i < newLen; i++) {
+              const srcIdx = i / r;
+              const idx0 = Math.floor(srcIdx);
+              const idx1 = Math.min(idx0 + 1, data.length - 1);
+              const frac = srcIdx - idx0;
+              out[i] = data[idx0] * (1 - frac) + data[idx1] * frac;
+            }
+            return out;
+          };
+          const channelData = track.buffer.getChannelData(0);
+          const newData = applyResample(channelData, 1 / ratio);
+          const ctx = getAudioContext();
+          const newBuffer = ctx.createBuffer(1, newData.length, track.buffer.sampleRate);
+          newBuffer.copyToChannel(newData, 0);
+          setTracks(prev => prev.map(t => t.id === trackId ? {
+            ...t,
+            buffer: newBuffer
+          } : t));
+          return {
+            success: true,
+            action: 'pitch_shift',
+            semitones
+          };
+        }
+        return {
+          success: false,
+          error: `Unknown action: ${action}`
+        };
+      },
+      setBpm: args => {
+        const bpmVal = args.bpm || args.tempo || 120;
+        setBpm(String(bpmVal));
+        return {
+          success: true,
+          bpm: bpmVal
+        };
+      },
+      setPlayhead: args => {
+        const time = args.time ?? args.position ?? 0;
+        handlePlayheadSet(time);
+        return {
+          success: true,
+          time
+        };
+      },
+      addMarker: args => {
+        const trackId = args.track_id || selectedTrackId;
+        const time = args.time ?? currentTime;
+        const track = tracks.find(t => t.id === trackId);
+        if (!track) return {
+          success: false,
+          error: 'Track not found'
+        };
+        setTracks(prev => prev.map(t => {
+          if (t.id !== trackId) return t;
+          return {
+            ...t,
+            markers: [...(t.markers || []), {
+              id: 'ai_marker_' + Date.now(),
+              time,
+              label: args.label || 'AI Marker'
+            }]
+          };
+        }));
+        return {
+          success: true,
+          trackId,
+          time
+        };
+      }
+    };
+    window.DAWCommandDispatcher.registerDAWCommands(api);
+  }, [tracks, selectedTrackId, currentTime, bpm]);
+
  // ── Save AI config to localStorage ──
  useEffect(() => {
    localStorage.setItem('ai_base_url', aiConfig.baseUrl);
@@ -7847,7 +8099,21 @@ const App = () => {
      }, /*#__PURE__*/React.createElement("i", {
        "data-lucide": "cpu",
        className: "w-3.5 h-3.5 text-purple-400"
-      })), " AI"), /*#__PURE__*/React.createElement("button", {
+      })), " AI Copilot"), /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-1"
+      }, /*#__PURE__*/React.createElement("button", {
+        onClick: () => {
+          setAiActionLog([]);
+          showToast('Đã xoá nhật ký AI.', 'info');
+        },
+        className: "text-zinc-600 hover:text-zinc-300",
+        title: "Clear log"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "inline-flex items-center shrink-0"
+      }, /*#__PURE__*/React.createElement("i", {
+        "data-lucide": "trash-2",
+        className: "w-3 h-3"
+      }))), /*#__PURE__*/React.createElement("button", {
        onClick: () => closePanel('ai'),
        className: "text-zinc-600 hover:text-zinc-300"
      }, /*#__PURE__*/React.createElement("span", {
@@ -7855,8 +8121,8 @@ const App = () => {
      }, /*#__PURE__*/React.createElement("i", {
        "data-lucide": "x",
        className: "w-3 h-3"
-      })))), /*#__PURE__*/React.createElement("div", {
-        className: "p-1.5 bg-[#141414] rounded border border-zinc-800 text-[9px] font-mono min-h-[24px]"
+      }))))), /*#__PURE__*/React.createElement("div", {
+        className: "p-1.5 bg-[#141414] rounded border border-zinc-800 text-[9px] font-mono min-h-[20px]"
      }, /*#__PURE__*/React.createElement("div", {
        className: "text-zinc-500"
      }, "// ", /*#__PURE__*/React.createElement("span", {
@@ -7873,16 +8139,16 @@ const App = () => {
      }, /*#__PURE__*/React.createElement("i", {
        "data-lucide": "map-pin",
        className: "w-3 h-3"
-      })), " AI Scan"), /*#__PURE__*/React.createElement("button", {
+      })), " Scan"), /*#__PURE__*/React.createElement("button", {
        onClick: handleAICutToNewTrack,
        disabled: analysisState.isRunning,
-        className: "py-1 bg-fuchsia-800 hover:bg-fuchsia-700 text-white font-bold rounded text-[9px] flex items-center justify-center gap-1"
+        className: "py-1 bg-fuchsia-800 hover:bg-fuchsia-700 text-white font-bold rounded text-[9px] border border-fuchsia-600 flex items-center justify-center gap-1"
      }, /*#__PURE__*/React.createElement("span", {
        className: "inline-flex items-center shrink-0"
      }, /*#__PURE__*/React.createElement("i", {
        "data-lucide": "scissors",
        className: "w-3 h-3"
-      })), " AI Cut"), /*#__PURE__*/React.createElement("button", {
+      })), " Cut"), /*#__PURE__*/React.createElement("button", {
        onClick: handleAIAnalysicLoop,
        disabled: analysisState.isRunning,
        className: "py-1 bg-violet-800 hover:bg-violet-700 text-violet-100 font-bold rounded text-[9px] border border-violet-600 flex items-center justify-center gap-1"
@@ -7891,7 +8157,85 @@ const App = () => {
      }, /*#__PURE__*/React.createElement("i", {
        "data-lucide": "sparkles",
        className: "w-3 h-3"
-      })), " AI Analysic Loop")));
+      })), " Loop"))), /*#__PURE__*/React.createElement("div", {
+        className: "border-t border-zinc-800 pt-1.5 mt-1"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-[9px] font-bold text-zinc-400 uppercase mb-1 flex items-center gap-1"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "inline-flex items-center shrink-0"
+      }, /*#__PURE__*/React.createElement("i", {
+        "data-lucide": "message-square",
+        className: "w-3 h-3"
+      })), " Copilot Prompt"), /*#__PURE__*/React.createElement("textarea", {
+        value: aiPrompt,
+        onChange: e => setAiPrompt(e.target.value),
+        placeholder: "Nhập lệnh điều khiển DAW... (VD: Tạo track mới tên Beat, đặt BPM 128)",
+        className: "w-full bg-[#1e1e1e] text-zinc-200 p-1.5 rounded border border-zinc-700 focus:outline-none focus:border-purple-600 font-mono text-[10px] resize-none",
+        rows: 2,
+        onKeyDown: e => {
+          if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            executeAIPrompt();
+          }
+        }
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "flex items-center gap-1 mt-1"
+      }, /*#__PURE__*/React.createElement("button", {
+        onClick: executeAIPrompt,
+        disabled: aiProcessing,
+        className: "flex-1 py-1 bg-purple-700 hover:bg-purple-600 text-white font-bold rounded text-[10px] border border-purple-500 flex items-center justify-center gap-1"
+      }, aiProcessing ? 'Đang suy luận...' : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "inline-flex items-center shrink-0"
+      }, /*#__PURE__*/React.createElement("i", {
+        "data-lucide": "send",
+        className: "w-3 h-3"
+      })), " Gửi")), /*#__PURE__*/React.createElement("button", {
+        onClick: () => {
+          setAiPrompt('');
+          setAiActionLog([]);
+        },
+        className: "px-2 py-1 bg-zinc-800 hover:bg-zinc-700 text-zinc-400 rounded text-[9px] border border-zinc-700"
+      }, "Clear")), /*#__PURE__*/React.createElement("div", {
+        className: "text-[8px] text-zinc-600 mt-0.5"
+      }, "Ctrl+Enter để gửi nhanh")), /*#__PURE__*/React.createElement("div", {
+        className: "border-t border-zinc-800 pt-1.5 mt-1"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "text-[9px] font-bold text-zinc-400 uppercase mb-1 flex items-center justify-between"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "inline-flex items-center gap-1"
+      }, /*#__PURE__*/React.createElement("i", {
+        "data-lucide": "list",
+        className: "w-3 h-3"
+      }), " Action Log"), aiActionLog.length > 0 && /*#__PURE__*/React.createElement("button", {
+        onClick: () => {
+          if (window.DAWCommandDispatcher && window.DAWCommandDispatcher.undo) {
+            const entry = window.DAWCommandDispatcher.undo();
+            if (entry) {
+              setAiActionLog(prev => [...prev, {
+                type: 'undo',
+                text: `Undo: ${entry.name}`,
+                time: Date.now()
+              }]);
+              showToast(`Undo AI: ${entry.name}`, 'info');
+            }
+          } else {
+            handleUndo();
+            setAiActionLog(prev => [...prev, {
+              type: 'undo',
+              text: 'Undo (Ctrl+Z)',
+              time: Date.now()
+            }]);
+          }
+        },
+        className: "text-[8px] text-amber-400 hover:text-amber-300 border border-amber-800 rounded px-1 py-0.5"
+      }, "Undo"))), /*#__PURE__*/React.createElement("div", {
+        className: "flex-1 overflow-y-auto no-scrollbar bg-[#0f0f0f] rounded border border-zinc-800 p-1 max-h-[120px]"
+      }, aiActionLog.length === 0 ? /*#__PURE__*/React.createElement("div", {
+        className: "text-[9px] text-zinc-600 italic"
+      }, "Chưa có hành động nào.") : aiActionLog.map((entry, i) => /*#__PURE__*/React.createElement("div", {
+        key: i,
+        className: `text-[9px] font-mono py-0.5 border-b border-zinc-900 last:border-0 ${entry.type === 'error' ? 'text-red-400' : entry.type === 'status' ? 'text-zinc-400 italic' : entry.type === 'undo' ? 'text-amber-400' : 'text-zinc-300'}`
+      }, new Date(entry.time).toLocaleTimeString(), entry.text)));
      if (panelId === 'python_tools') return /*#__PURE__*/React.createElement("div", {
        className: "flex flex-col h-full gap-1.5"
      }, /*#__PURE__*/React.createElement("div", {