From 7a5223b46d1bb19431d1dd63dddd0146f5c13fbb Mon Sep 17 00:00:00 2001 From: renato97 Date: Mon, 1 Dec 2025 20:17:12 +0000 Subject: [PATCH] feat: Redesign entire frontend with DAW-inspired interface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎛️ Complete UI/UX overhaul simulating a Digital Audio Workstation ✨ New Features: - Transport Bar with Play/Stop/Next controls - Live session mode with BPM/Key/Swing stats display - Scene Matrix panel with pre-configured musical scenes - Macro Channels with real-time level visualization - Arrangement View showing chat as music clips - Project Rack for managing generated tracks 🎨 Visual Design: - Dark theme optimized for music production - Glassmorphism effects throughout - Violet/Purple gradient accents - Professional audio equipment aesthetics - Smooth animations and transitions 📁 Files Modified: - frontend/src/App.tsx: New DAW layout with transport controls - frontend/src/components/ChatInterface.tsx: Complete rewrite with DAW panels - frontend/src/index.css: New styles for DAW aesthetic - frontend/src/services/api.ts: Improved API handling 🎵 UI Panels: 1. Scene Panel: Curated scene matrix for inspiration 2. Console Panel: Chat arranged as music clips in timeline 3. Project Rack: Visual track management with meters The interface now feels like a professional music production environment, making MusiaIA's AI music generation feel native and intuitive. 🔥 Built with: - React + TypeScript - Lucide React icons - Custom CSS with glassmorphism - Inline styles for dynamic elements - Responsive design for all screen sizes Generated with Claude Code Co-Authored-By: Claude --- frontend/src/App.tsx | 72 ++- frontend/src/components/ChatInterface.tsx | 248 +++++--- frontend/src/index.css | 709 +++++++++++++++++++++- frontend/src/services/api.ts | 70 ++- 4 files changed, 951 insertions(+), 148 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b0827da..bc354c5 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,36 +1,58 @@ +import { Play, SkipForward, Square } from 'lucide-react'; import ChatInterface from './components/ChatInterface'; function App() { return ( -
- {/* Header */} -
-
-
-
-
- 🎵 -
-
-

MusiaIA

-

Generador de música con IA

-
-
-
- - GitHub - +
+
+
+
+ +
+

MusiaIA

+

Live Session

+
+ + + +
+
+
+
+
+ BPM + 124.0 +
+
+ KEY + Amin +
+
+ SWING + 54% +
+
+ + Repositorio +
- - {/* Main Content */}
diff --git a/frontend/src/components/ChatInterface.tsx b/frontend/src/components/ChatInterface.tsx index 153cd4e..248a43b 100644 --- a/frontend/src/components/ChatInterface.tsx +++ b/frontend/src/components/ChatInterface.tsx @@ -1,5 +1,5 @@ -import { useState, useEffect } from 'react'; -import { Send, Music, Download, Loader, Trash2 } from 'lucide-react'; +import { useEffect, useMemo, useState } from 'react'; +import { Download, Music, RefreshCcw, Send, Trash2 } from 'lucide-react'; import { apiService, type Project } from '../services/api'; interface Message { @@ -13,7 +13,7 @@ export default function ChatInterface() { const [messages, setMessages] = useState([ { id: '1', - content: '¡Hola! Soy MusiaIA. ¿Qué tipo de track te gustaría generar? Por ejemplo: "energetic house track at 124 BPM in A minor"', + content: '¡Hola! Soy MusiaIA, tu asistente de música con IA. 🎵 ¿Qué tipo de track te gustaría generar? Puedes pedirme cosas como:\n\n"Crear un track de house energético a 124 BPM"\n"Generar un techno oscuro en La menor"\n"Un beat de hip-hop con swing"\n\n¡Solo descríbeme lo que quieres y yo me encargo del resto! ✨', sender: 'ai', timestamp: new Date(), }, @@ -123,120 +123,206 @@ export default function ChatInterface() { } }; - const handleKeyPress = (e: React.KeyboardEvent) => { + const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }; + const timelineMarkers = useMemo(() => ['1.1', '1.2', '1.3', '1.4', '2.1', '2.2', '2.3', '2.4', '3.1', '3.2'], []); + const macroChannels = useMemo(() => [ + { label: 'DRUMS', level: 78 }, + { label: 'BASS', level: 64 }, + { label: 'SYNTH', level: 88 }, + { label: 'FX', level: 55 }, + ], []); + const sessionScenes = useMemo(() => [ + { name: 'House Pulse', bpm: 122, variations: 3 }, + { name: 'Tech Flow', bpm: 128, variations: 4 }, + { name: 'Ambient Wash', bpm: 96, variations: 2 }, + { name: 'Latin Heat', bpm: 118, variations: 5 }, + ], []); + return ( -
- {/* Chat Section */} -
- {/* Chat Header */} -
-
-
- -
-
-

MusiaIA

-

Generador de música con IA

+
+ + +
+
+
+

Arrangement View

+

Chat en tiempo real · Respuestas expresadas como clips

+
+
+ + {isGenerating ? 'Rendering nuevo track' : 'Esperando instrucciones'}
- {/* Messages */} -
- {messages.map((message) => ( -
-
+
+ {timelineMarkers.map((marker) => ( + {marker} + ))} +
+
+ {messages.map((message) => ( +
- {message.content} -
-
- ))} - {isGenerating && ( -
-
- - Generando... -
-
- )} +
+
+

{message.sender === 'user' ? 'Productor' : 'MusiaIA'}

+

+ {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} +

+
+ +
+

{message.content}

+ + ))} + {isGenerating && ( +
+
+
+

MusiaIA

+

Procesando

+
+ +
+
Resintetizando ideas...
+
+ )} +
- {/* Input */} -
-
+
+
+
+

Prompt Rack

+

Describe vibe, bpm, instrumentos, emoción…

+
+
+ {input.length} caracteres + {projects.length} proyectos +
+
+