import React, { useState, useEffect, useMemo, useRef } from 'react'; const AI_Music_Gen_View = () => { const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 562; // 16:9 const DURATION = 12000; // 12 seconds loop const [time, setTime] = useState(0); // Animation Loop useEffect(() => { let startTimestamp; let reqId; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const elapsed = timestamp - startTimestamp; setTime(elapsed % DURATION); reqId = requestAnimationFrame(step); }; reqId = requestAnimationFrame(step); return () => cancelAnimationFrame(reqId); }, []); // Phase Logic // 0-4000ms: Phase 1 (Input & Lyrics) // 4000-8000ms: Phase 2 (Processing & Bars) // 8000-12000ms: Phase 3 (Player & Result) const phase = time < 4000 ? 1 : time < 8000 ? 2 : 3; const phaseTime = time < 4000 ? time : time < 8000 ? time - 4000 : time - 8000; // --- Phase 1 Data --- const lyrics = "奔跑在光阴的旷野，追逐那不落的星辰..."; const typedLyricsLength = Math.min(lyrics.length, Math.floor(phaseTime / 100)); // --- Phase 2 Data --- // Generate random notes for background const notes = useMemo(() => Array.from({ length: 15 }).map((_, i) => ({ id: i, x: 100 + Math.random() * 800, y: 500 + Math.random() * 200, speed: 1 + Math.random() * 2, type: Math.random() > 0.5 ? '♪' : '♫', delay: Math.random() * 1000 })), []); // --- Phase 3 Data --- // Waveform visualization points const wavePoints = useMemo(() => { return Array.from({ length: 100 }).map((_, i) => i); }, []); // Helper for smooth easing const easeOutCubic = (x) => 1 - Math.pow(1 - x, 3); const easeInOutQuad = (x) => x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2; // Dynamic Waveform Generator const getWavePath = (t, amplitude, frequency, yOffset) => { let path = `M 0 ${yOffset}`; for (let i = 0; i <= VIEW_WIDTH; i += 10) { const y = yOffset + Math.sin((i * frequency) + (t * 0.01)) * amplitude * Math.sin((i + t * 0.5) * 0.02); path += ` L ${i} ${y}`; } return path; }; return (

); }; export default AI_Music_Gen_View;