Spaces:

budokai-msi
/

cc

Running

App Files Files Community

budokai-msi commited on 3 days ago

Commit

d0916a3

verified ·

1 Parent(s): 16838eb

Of course. Here is a detailed and structured prompt designed to guide an AI in generating the complex front-end for your "ChordCraft" application.

Browse files

This prompt is structured to be fed into a UI generation platform like Vercel's v0. It describes the application's layout, components, features, and aesthetic in detail to maximize the quality of the generated code.
AI Prompt for ChordCraft UI
Create a sophisticated, modern, and highly interactive web application interface for ChordCraft, an AI-powered music production studio that translates music into editable code. The application should be built as a single-page application using React and styled with Tailwind CSS. All UI components should be based on shadcn/ui, ensuring a cohesive and professional aesthetic.
The overall theme is a dark, futuristic interface with a neon-gradient color scheme (vibrant cyan, magenta, and electric purple) for accents, interactive elements, highlights, and data visualizations.
The application layout is a three-panel design:
* Left Panel (Collapsible): Project Management & Asset Library
* Center Panel: Main Workspace (dynamic, toggles between Studio and Code Editor)
* Right Panel (Collapsible): AI Companion & Inspector
## 1. Header & Main Navigation
* Sticky Header: Contains the application logo (a stylized 'CC' with a neon glow), the current project title (editable on click), and a user profile section.
* Project Actions: A group of buttons on the right: Save Project (icon: Save), Export (Download), and a primary Share button.
* User Profile: An Avatar component with a dropdown Menubar for "Settings," "Billing," and "Logout."
## 2. Left Panel: Project Manager
* A resizable, collapsible sidebar using ResizablePanel.
* Project Browser: Use an Accordion component with three sections:
* "My Projects": A list of user projects. Each item shows the project name and last modified date. Clicking a project loads it into the main workspace. Includes a + New Project button.
* "Audio Assets": A file browser for uploaded audio files (WAV, MP3). Each file has a play icon button next to it for previewing.
* "AI Tools": A list of available AI models, e.g., "Stem Separator," "Harmonic Analyzer," "Rhythm Generator."
* File Upload: A prominent Dropzone area at the bottom of the panel for dragging and dropping audio files.
## 3. Center Panel: The Workspace
This is the core of the application, using a Tabs component to switch between two primary views: "Studio" and "Code Editor."
### Studio View (DAW Interface)
* Transport Controls: A fixed control bar at the top of this panel with Buttons for: Play, Pause, Stop, Record, Toggle Loop, and a display for the current playhead time.
* Timeline & Tracks:
* A multi-track horizontal timeline. The top ruler should show time markers (e.g., 0:00, 0:05, 0:10).
* Each track is a horizontal container with:
* Track Header (Left): Track name, a Mute button, a Solo button, a volume Slider, and a pan Slider.
* Track Lane (Right): A visual representation of the audio waveform. This should be a placeholder component that looks like a colorful, detailed waveform using the neon gradient.
* Users can drag audio clips onto these lanes from the Left Panel.
* Action Button: A large, vibrant, gradient-background Button with an icon (Wand2) that says "Analyze & Convert to Code."
### Code Editor View
* Monaco Editor Integration: The entire panel should be an instance of the Monaco code editor, pre-configured with a dark theme that matches the application's aesthetic.
* Generated Code Display: This view will display the AI-generated code representation of the music from the Studio view. The code should have syntax highlighting.
* Editor Toolbar: A toolbar above the editor with three key actions:
* Render Audio: A primary Button with a Play icon. This converts the current code back into an audio preview.
* Analyze Code: A secondary Button that sends the code to the AI Companion for analysis.
* Format: A Button to auto-format the code.
## 4. Right Panel: AI Companion & Inspector
* A resizable, collapsible sidebar that provides context-aware information.
* Uses a Tabs component to switch between "AI Companion" and "Inspector."
### AI Companion View
* This panel is for AI-driven feedback and analysis.
* Display analysis results in Card components. For example:
* A Card titled "Harmonic Analysis" displaying the song's Key, BPM, and a list of detected Chords using Badge components (e.g., Cm7, G#, A#).
* A Card titled "AI Suggestions" with actionable suggestions like "Try resolving this F#dim chord to a Gm" or "The rhythm in measure 4 is off-beat."
### Inspector View
* This panel displays properties for the currently selected item (e.g., an audio clip, a track, a line of code).
* When an audio clip is selected in the Studio: Show its filename, duration, sample rate, and controls for gain (Slider) and pitch shifting (Slider).
* When a track is selected: Show advanced options like assigning it to a mixer channel or adding placeholder effects (e.g., Reverb, EQ).
- Initial Deployment

Files changed (3) hide show

README.md +6 -4
index.html +548 -18
prompts.txt +50 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Cc
-emoji: 🦀
-colorFrom: blue
 colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: cc
+emoji: 🐳
+colorFrom: green
 colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,549 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChordCraft - AI Music Production Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#00f0ff',
+                        secondary: '#ff00f0',
+                        accent: '#8a2be2',
+                        dark: '#0a0a1a',
+                        darker: '#050510',
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                        mono: ['Fira Code', 'monospace'],
+                    },
+                }
+            }
+        }
+    </script>
+    <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');
+        body {
+            background-color: #050510;
+            color: #e0e0e0;
+            font-family: 'Inter', sans-serif;
+        }
+        .gradient-text {
+            background: linear-gradient(90deg, #00f0ff, #ff00f0);
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+        }
+        .gradient-border {
+            position: relative;
+            border-radius: 0.5rem;
+        }
+        .gradient-border::before {
+            content: '';
+            position: absolute;
+            top: -1px;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            border-radius: 0.5rem;
+            background: linear-gradient(45deg, #00f0ff, #ff00f0, #8a2be2);
+            z-index: -1;
+        }
+        .waveform {
+            background: linear-gradient(90deg, rgba(0,240,255,0.1), rgba(138,43,226,0.3), rgba(255,0,240,0.1));
+            background-size: 200% 100%;
+            animation: waveformAnimation 3s infinite linear;
+        }
+        @keyframes waveformAnimation {
+            0% { background-position: 0% 50%; }
+            100% { background-position: 200% 50%; }
+        }
+        .neon-shadow {
+            box-shadow: 0 0 10px rgba(0, 240, 255, 0.5),
+                        0 0 20px rgba(255, 0, 240, 0.3);
+        }
+        .neon-shadow-hover:hover {
+            box-shadow: 0 0 15px rgba(0, 240, 255, 0.7),
+                        0 0 25px rgba(255, 0, 240, 0.5);
+        }
+        .scrollbar-custom::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        .scrollbar-custom::-webkit-scrollbar-track {
+            background: rgba(10, 10, 26, 0.5);
+        }
+        .scrollbar-custom::-webkit-scrollbar-thumb {
+            background: linear-gradient(#00f0ff, #ff00f0);
+            border-radius: 3px;
+        }
+    </style>
+</head>
+<body class="h-screen flex flex-col overflow-hidden">
+    <!-- Header -->
+    <header class="bg-darker border-b border-gray-800 px-4 py-3 flex items-center justify-between sticky top-0 z-50">
+        <div class="flex items-center space-x-4">
+            <div class="flex items-center">
+                <h1 class="text-2xl font-bold gradient-text">CC</h1>
+                <span class="ml-2 text-xl font-semibold">ChordCraft</span>
+            </div>
+            <div class="hidden md:block">
+                <div class="flex items-center space-x-2 bg-dark rounded-full px-4 py-1 cursor-pointer hover:bg-gray-800 transition">
+                    <i data-feather="music" class="w-4 h-4 text-primary"></i>
+                    <span class="text-sm">Untitled Project</span>
+                    <i data-feather="edit-2" class="w-4 h-4 text-gray-400"></i>
+                </div>
+            </div>
+        </div>
+        <div class="flex items-center space-x-3">
+            <button class="hidden md:flex items-center space-x-1 bg-dark hover:bg-gray-800 px-3 py-1.5 rounded-md transition">
+                <i data-feather="save" class="w-4 h-4 text-gray-300"></i>
+                <span class="text-sm">Save</span>
+            </button>
+            <button class="hidden md:flex items-center space-x-1 bg-dark hover:bg-gray-800 px-3 py-1.5 rounded-md transition">
+                <i data-feather="download" class="w-4 h-4 text-gray-300"></i>
+                <span class="text-sm">Export</span>
+            </button>
+            <button class="flex items-center space-x-1 bg-gradient-to-r from-primary to-secondary text-darker font-medium px-4 py-1.5 rounded-md transition hover:opacity-90">
+                <i data-feather="share-2" class="w-4 h-4"></i>
+                <span class="text-sm">Share</span>
+            </button>
+            <div class="relative">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center cursor-pointer">
+                    <i data-feather="user" class="w-4 h-4 text-darker"></i>
+                </div>
+                <div class="hidden absolute right-0 mt-2 w-48 bg-dark rounded-md shadow-lg py-1 z-50 border border-gray-800">
+                    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Settings</a>
+                    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Billing</a>
+                    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-800">Logout</a>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <div class="flex flex-1 overflow-hidden">
+        <!-- Left Panel - Project Manager -->
+        <aside class="w-64 bg-dark border-r border-gray-800 flex flex-col transition-all duration-300 ease-in-out" id="leftPanel">
+            <div class="p-4 border-b border-gray-800">
+                <h2 class="text-lg font-semibold flex items-center justify-between">
+                    <span>Project Manager</span>
+                    <button class="text-gray-400 hover:text-white" id="collapseLeft">
+                        <i data-feather="chevron-left" class="w-5 h-5"></i>
+                    </button>
+                </h2>
+            </div>
+            <div class="flex-1 overflow-y-auto scrollbar-custom p-4 space-y-4">
+                <!-- Projects Accordion -->
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between cursor-pointer">
+                        <h3 class="font-medium text-gray-300">My Projects</h3>
+                        <i data-feather="plus" class="w-4 h-4 text-gray-400"></i>
+                    </div>
+                    <div class="space-y-1 ml-2">
+                        <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Summer Vibes</span>
+                            <span class="text-xs text-gray-400">2h ago</span>
+                        </div>
+                        <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Dark Synth</span>
+                            <span class="text-xs text-gray-400">1d ago</span>
+                        </div>
+                        <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Jazz Improv</span>
+                            <span class="text-xs text-gray-400">3d ago</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Audio Assets Accordion -->
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between cursor-pointer">
+                        <h3 class="font-medium text-gray-300">Audio Assets</h3>
+                        <i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i>
+                    </div>
+                    <div class="space-y-1 ml-2">
+                        <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Kick Drum.wav</span>
+                            <button class="text-gray-400 hover:text-primary">
+                                <i data-feather="play" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Synth Lead.mp3</span>
+                            <button class="text-gray-400 hover:text-primary">
+                                <i data-feather="play" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <div class="flex items-center justify-between p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Bassline.wav</span>
+                            <button class="text-gray-400 hover:text-primary">
+                                <i data-feather="play" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- AI Tools Accordion -->
+                <div class="space-y-2">
+                    <div class="flex items-center justify-between cursor-pointer">
+                        <h3 class="font-medium text-gray-300">AI Tools</h3>
+                        <i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i>
+                    </div>
+                    <div class="space-y-1 ml-2">
+                        <div class="p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Stem Separator</span>
+                        </div>
+                        <div class="p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Harmonic Analyzer</span>
+                        </div>
+                        <div class="p-2 rounded hover:bg-gray-800 cursor-pointer">
+                            <span class="text-sm">Rhythm Generator</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- File Upload Area -->
+            <div class="p-4 border-t border-gray-800">
+                <div class="gradient-border p-4 rounded-md text-center cursor-pointer hover:bg-gray-800 transition">
+                    <i data-feather="upload" class="w-6 h-6 mx-auto text-primary"></i>
+                    <p class="text-sm mt-2">Drag & drop audio files here</p>
+                    <p class="text-xs text-gray-400 mt-1">or click to browse</p>
+                </div>
+            </div>
+        </aside>
+        <!-- Center Panel - Workspace -->
+        <main class="flex-1 flex flex-col bg-darker overflow-hidden">
+            <!-- Workspace Tabs -->
+            <div class="flex border-b border-gray-800">
+                <button class="flex-1 py-3 text-center font-medium border-b-2 border-primary text-primary">
+                    Studio
+                </button>
+                <button class="flex-1 py-3 text-center font-medium text-gray-400 hover:text-white">
+                    Code Editor
+                </button>
+            </div>
+            <!-- Transport Controls -->
+            <div class="bg-dark px-4 py-2 flex items-center justify-between border-b border-gray-800">
+                <div class="flex items-center space-x-3">
+                    <button class="w-8 h-8 rounded-full bg-primary text-darker flex items-center justify-center hover:bg-opacity-90">
+                        <i data-feather="play" class="w-4 h-4"></i>
+                    </button>
+                    <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600">
+                        <i data-feather="pause" class="w-4 h-4"></i>
+                    </button>
+                    <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600">
+                        <i data-feather="square" class="w-4 h-4"></i>
+                    </button>
+                    <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600">
+                        <i data-feather="circle" class="w-4 h-4"></i>
+                    </button>
+                    <button class="w-8 h-8 rounded-full bg-gray-700 text-gray-300 flex items-center justify-center hover:bg-gray-600">
+                        <i data-feather="repeat" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="text-sm font-mono">0:00.000</div>
+                    <button class="flex items-center space-x-1 bg-gradient-to-r from-primary to-secondary text-darker font-medium px-4 py-1 rounded-md transition hover:opacity-90 neon-shadow-hover">
+                        <i data-feather="wand-2" class="w-4 h-4"></i>
+                        <span>Analyze & Convert to Code</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Timeline -->
+            <div class="flex-1 overflow-auto scrollbar-custom">
+                <!-- Timeline Ruler -->
+                <div class="h-8 bg-dark sticky top-0 z-10 border-b border-gray-800 flex items-center px-4">
+                    <div class="flex space-x-8">
+                        <span class="text-xs text-gray-400">0:00</span>
+                        <span class="text-xs text-gray-400">0:05</span>
+                        <span class="text-xs text-gray-400">0:10</span>
+                        <span class="text-xs text-gray-400">0:15</span>
+                    </div>
+                </div>
+                <!-- Tracks -->
+                <div class="space-y-2 p-4">
+                    <!-- Track 1 -->
+                    <div class="flex h-16">
+                        <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2">
+                            <button class="text-gray-400 hover:text-white">
+                                <i data-feather="volume-2" class="w-4 h-4"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4"></i>
+                            </button>
+                            <span class="text-sm truncate">Kick Drum</span>
+                            <div class="ml-auto flex space-x-1">
+                                <button class="text-gray-400 hover:text-red-500">
+                                    <i data-feather="mic-off" class="w-4 h-4"></i>
+                                </button>
+                                <button class="text-gray-400 hover:text-primary">
+                                    <i data-feather="headphones" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md overflow-hidden relative">
+                            <div class="waveform absolute inset-0 rounded-r-md"></div>
+                            <div class="absolute left-20 w-32 h-full bg-gradient-to-r from-primary/20 to-transparent"></div>
+                        </div>
+                    </div>
+                    <!-- Track 2 -->
+                    <div class="flex h-16">
+                        <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2">
+                            <button class="text-gray-400 hover:text-white">
+                                <i data-feather="volume-2" class="w-4 h-4"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4"></i>
+                            </button>
+                            <span class="text-sm truncate">Bassline</span>
+                            <div class="ml-auto flex space-x-1">
+                                <button class="text-gray-400 hover:text-red-500">
+                                    <i data-feather="mic-off" class="w-4 h-4"></i>
+                                </button>
+                                <button class="text-gray-400 hover:text-primary">
+                                    <i data-feather="headphones" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md overflow-hidden relative">
+                            <div class="waveform absolute inset-0 rounded-r-md"></div>
+                            <div class="absolute left-40 w-48 h-full bg-gradient-to-r from-secondary/20 to-transparent"></div>
+                        </div>
+                    </div>
+                    <!-- Track 3 -->
+                    <div class="flex h-16">
+                        <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2">
+                            <button class="text-gray-400 hover:text-white">
+                                <i data-feather="volume-2" class="w-4 h-4"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4"></i>
+                            </button>
+                            <span class="text-sm truncate">Synth Lead</span>
+                            <div class="ml-auto flex space-x-1">
+                                <button class="text-gray-400 hover:text-red-500">
+                                    <i data-feather="mic-off" class="w-4 h-4"></i>
+                                </button>
+                                <button class="text-gray-400 hover:text-primary">
+                                    <i data-feather="headphones" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md overflow-hidden relative">
+                            <div class="waveform absolute inset-0 rounded-r-md"></div>
+                            <div class="absolute left-60 w-24 h-full bg-gradient-to-r from-accent/20 to-transparent"></div>
+                        </div>
+                    </div>
+                    <!-- Track 4 (Empty) -->
+                    <div class="flex h-16">
+                        <div class="w-48 bg-dark rounded-l-md border border-gray-800 flex items-center px-3 space-x-2">
+                            <button class="text-gray-400 hover:text-white">
+                                <i data-feather="volume-2" class="w-4 h-4"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-yellow-400">
+                                <i data-feather="star" class="w-4 h-4"></i>
+                            </button>
+                            <span class="text-sm text-gray-400 italic">Drag audio here</span>
+                        </div>
+                        <div class="flex-1 bg-dark border border-l-0 border-gray-800 rounded-r-md"></div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <!-- Right Panel - AI Companion -->
+        <aside class="w-72 bg-dark border-l border-gray-800 flex flex-col transition-all duration-300 ease-in-out" id="rightPanel">
+            <div class="p-4 border-b border-gray-800">
+                <h2 class="text-lg font-semibold flex items-center justify-between">
+                    <span>AI Companion</span>
+                    <button class="text-gray-400 hover:text-white" id="collapseRight">
+                        <i data-feather="chevron-right" class="w-5 h-5"></i>
+                    </button>
+                </h2>
+                <div class="flex mt-2">
+                    <button class="flex-1 py-1 text-center font-medium border-b-2 border-primary text-primary text-sm">
+                        Analysis
+                    </button>
+                    <button class="flex-1 py-1 text-center font-medium text-gray-400 hover:text-white text-sm">
+                        Inspector
+                    </button>
+                </div>
+            </div>
+            <div class="flex-1 overflow-y-auto scrollbar-custom p-4 space-y-4">
+                <!-- Harmonic Analysis Card -->
+                <div class="gradient-border p-4 rounded-md">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="font-medium">Harmonic Analysis</h3>
+                        <i data-feather="activity" class="w-5 h-5 text-primary"></i>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">Key</span>
+                            <span class="text-sm font-mono">C minor</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">BPM</span>
+                            <span class="text-sm font-mono">128</span>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">Time Signature</span>
+                            <span class="text-sm font-mono">4/4</span>
+                        </div>
+                        <div class="mt-3">
+                            <h4 class="text-xs text-gray-400 mb-1">Detected Chords</h4>
+                            <div class="flex flex-wrap gap-1">
+                                <span class="px-2 py-1 bg-gray-800 rounded text-xs">Cm7</span>
+                                <span class="px-2 py-1 bg-gray-800 rounded text-xs">G#</span>
+                                <span class="px-2 py-1 bg-gray-800 rounded text-xs">A#</span>
+                                <span class="px-2 py-1 bg-gray-800 rounded text-xs">Fm</span>
+                                <span class="px-2 py-1 bg-gray-800 rounded text-xs">D#7</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- AI Suggestions Card -->
+                <div class="gradient-border p-4 rounded-md">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="font-medium">AI Suggestions</h3>
+                        <i data-feather="zap" class="w-5 h-5 text-secondary"></i>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex items-start">
+                            <div class="w-2 h-2 rounded-full bg-primary mt-1 mr-2"></div>
+                            <p class="text-sm">Try resolving this F#dim chord to a Gm for smoother harmonic transition.</p>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-2 h-2 rounded-full bg-primary mt-1 mr-2"></div>
+                            <p class="text-sm">The rhythm in measure 4 is slightly off-beat. Consider quantizing to 16th notes.</p>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="w-2 h-2 rounded-full bg-primary mt-1 mr-2"></div>
+                            <p class="text-sm">Adding a high-pass filter to the bassline around 100Hz could reduce muddiness.</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Stem Separation Card -->
+                <div class="gradient-border p-4 rounded-md">
+                    <div class="flex items-center justify-between mb-3">
+                        <h3 class="font-medium">Stem Separation</h3>
+                        <i data-feather="layers" class="w-5 h-5 text-accent"></i>
+                    </div>
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">Vocals</span>
+                            <div class="w-24 bg-gray-800 rounded-full h-1.5">
+                                <div class="bg-primary h-1.5 rounded-full" style="width: 92%"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">Drums</span>
+                            <div class="w-24 bg-gray-800 rounded-full h-1.5">
+                                <div class="bg-primary h-1.5 rounded-full" style="width: 88%"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">Bass</span>
+                            <div class="w-24 bg-gray-800 rounded-full h-1.5">
+                                <div class="bg-primary h-1.5 rounded-full" style="width: 85%"></div>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between">
+                            <span class="text-sm text-gray-300">Other</span>
+                            <div class="w-24 bg-gray-800 rounded-full h-1.5">
+                                <div class="bg-primary h-1.5 rounded-full" style="width: 78%"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="w-full mt-3 py-1.5 bg-gray-800 hover:bg-gray-700 rounded text-sm transition">
+                        Extract Stems
+                    </button>
+                </div>
+            </div>
+            <div class="p-4 border-t border-gray-800">
+                <div class="flex items-center space-x-2">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
+                        <i data-feather="cpu" class="w-4 h-4 text-darker"></i>
+                    </div>
+                    <div class="flex-1">
+                        <div class="text-sm">AI Processing</div>
+                        <div class="w-full bg-gray-800 rounded-full h-1 mt-1">
+                            <div class="bg-gradient-to-r from-primary to-secondary h-1 rounded-full" style="width: 65%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    </div>
+    <script>
+        // Initialize AOS animations
+        AOS.init({
+            duration: 800,
+            easing: 'ease-in-out',
+            once: true
+        });
+        // Initialize Feather Icons
+        feather.replace();
+        // Panel collapse functionality
+        document.getElementById('collapseLeft').addEventListener('click', function() {
+            const panel = document.getElementById('leftPanel');
+            panel.classList.toggle('hidden');
+            panel.classList.toggle('md:block');
+            this.querySelector('i').setAttribute('data-feather', panel.classList.contains('hidden') ? 'chevron-right' : 'chevron-left');
+            feather.replace();
+        });
+        document.getElementById('collapseRight').addEventListener('click', function() {
+            const panel = document.getElementById('rightPanel');
+            panel.classList.toggle('hidden');
+            panel.classList.toggle('md:block');
+            this.querySelector('i').setAttribute('data-feather', panel.classList.contains('hidden') ? 'chevron-left' : 'chevron-right');
+            feather.replace();
+        });
+        // Simulate waveform animation
+        const waveforms = document.querySelectorAll('.waveform');
+        waveforms.forEach(wave => {
+            const duration = Math.random() * 2 + 3;
+            wave.style.animationDuration = `${duration}s`;
+        });
+    </script>
+</body>
 </html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,50 @@

+Of course. Here is a detailed and structured prompt designed to guide an AI in generating the complex front-end for your "ChordCraft" application.
+This prompt is structured to be fed into a UI generation platform like Vercel's v0. It describes the application's layout, components, features, and aesthetic in detail to maximize the quality of the generated code.
+AI Prompt for ChordCraft UI
+Create a sophisticated, modern, and highly interactive web application interface for ChordCraft, an AI-powered music production studio that translates music into editable code. The application should be built as a single-page application using React and styled with Tailwind CSS. All UI components should be based on shadcn/ui, ensuring a cohesive and professional aesthetic.
+The overall theme is a dark, futuristic interface with a neon-gradient color scheme (vibrant cyan, magenta, and electric purple) for accents, interactive elements, highlights, and data visualizations.
+The application layout is a three-panel design:
+ * Left Panel (Collapsible): Project Management & Asset Library
+ * Center Panel: Main Workspace (dynamic, toggles between Studio and Code Editor)
+ * Right Panel (Collapsible): AI Companion & Inspector
+## 1. Header & Main Navigation
+ * Sticky Header: Contains the application logo (a stylized 'CC' with a neon glow), the current project title (editable on click), and a user profile section.
+ * Project Actions: A group of buttons on the right: Save Project (icon: Save), Export (Download), and a primary Share button.
+ * User Profile: An Avatar component with a dropdown Menubar for "Settings," "Billing," and "Logout."
+## 2. Left Panel: Project Manager
+ * A resizable, collapsible sidebar using ResizablePanel.
+ * Project Browser: Use an Accordion component with three sections:
+   * "My Projects": A list of user projects. Each item shows the project name and last modified date. Clicking a project loads it into the main workspace. Includes a + New Project button.
+   * "Audio Assets": A file browser for uploaded audio files (WAV, MP3). Each file has a play icon button next to it for previewing.
+   * "AI Tools": A list of available AI models, e.g., "Stem Separator," "Harmonic Analyzer," "Rhythm Generator."
+ * File Upload: A prominent Dropzone area at the bottom of the panel for dragging and dropping audio files.
+## 3. Center Panel: The Workspace
+This is the core of the application, using a Tabs component to switch between two primary views: "Studio" and "Code Editor."
+### Studio View (DAW Interface)
+ * Transport Controls: A fixed control bar at the top of this panel with Buttons for: Play, Pause, Stop, Record, Toggle Loop, and a display for the current playhead time.
+ * Timeline & Tracks:
+   * A multi-track horizontal timeline. The top ruler should show time markers (e.g., 0:00, 0:05, 0:10).
+   * Each track is a horizontal container with:
+     * Track Header (Left): Track name, a Mute button, a Solo button, a volume Slider, and a pan Slider.
+     * Track Lane (Right): A visual representation of the audio waveform. This should be a placeholder component that looks like a colorful, detailed waveform using the neon gradient.
+     * Users can drag audio clips onto these lanes from the Left Panel.
+ * Action Button: A large, vibrant, gradient-background Button with an icon (Wand2) that says "Analyze & Convert to Code."
+### Code Editor View
+ * Monaco Editor Integration: The entire panel should be an instance of the Monaco code editor, pre-configured with a dark theme that matches the application's aesthetic.
+ * Generated Code Display: This view will display the AI-generated code representation of the music from the Studio view. The code should have syntax highlighting.
+ * Editor Toolbar: A toolbar above the editor with three key actions:
+   * Render Audio: A primary Button with a Play icon. This converts the current code back into an audio preview.
+   * Analyze Code: A secondary Button that sends the code to the AI Companion for analysis.
+   * Format: A Button to auto-format the code.
+## 4. Right Panel: AI Companion & Inspector
+ * A resizable, collapsible sidebar that provides context-aware information.
+ * Uses a Tabs component to switch between "AI Companion" and "Inspector."
+### AI Companion View
+ * This panel is for AI-driven feedback and analysis.
+ * Display analysis results in Card components. For example:
+   * A Card titled "Harmonic Analysis" displaying the song's Key, BPM, and a list of detected Chords using Badge components (e.g., Cm7, G#, A#).
+   * A Card titled "AI Suggestions" with actionable suggestions like "Try resolving this F#dim chord to a Gm" or "The rhythm in measure 4 is off-beat."
+### Inspector View
+ * This panel displays properties for the currently selected item (e.g., an audio clip, a track, a line of code).
+ * When an audio clip is selected in the Studio: Show its filename, duration, sample rate, and controls for gain (Slider) and pitch shifting (Slider).
+ * When a track is selected: Show advanced options like assigning it to a mixer channel or adding placeholder effects (e.g., Reverb, EQ).