|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mureka Music Generator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.glass-effect { |
|
|
background: rgba(255, 255, 255, 0.15); |
|
|
backdrop-filter: blur(10px); |
|
|
-webkit-backdrop-filter: blur(10px); |
|
|
border-radius: 20px; |
|
|
border: 1px solid rgba(255, 255, 255, 0.18); |
|
|
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
} |
|
|
|
|
|
.song-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.song-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 4px; |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: white; |
|
|
border-radius: 2px; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.lyrics-input { |
|
|
min-height: 150px; |
|
|
resize: none; |
|
|
} |
|
|
|
|
|
.audio-player { |
|
|
width: 100%; |
|
|
height: 40px; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(255, 255, 255, 0.5); |
|
|
} |
|
|
|
|
|
|
|
|
.tab { |
|
|
padding: 10px 20px; |
|
|
cursor: pointer; |
|
|
border-radius: 9999px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.tab.active { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
|
|
|
.spinner { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border: 3px solid rgba(255,255,255,0.3); |
|
|
border-radius: 50%; |
|
|
border-top-color: white; |
|
|
animation: spin 1s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="gradient-bg min-h-screen text-white font-sans"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-music text-3xl mr-3"></i> |
|
|
<h1 class="text-3xl font-bold">Mureka Music</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="accountBtn" class="glass-effect px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-user mr-2"></i> |
|
|
<span>Account</span> |
|
|
</button> |
|
|
<button id="settingsBtn" class="glass-effect px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-cog mr-2"></i> |
|
|
<span>Settings</span> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="glass-effect p-6 rounded-2xl lg:col-span-2"> |
|
|
<div class="flex space-x-2 mb-6"> |
|
|
<div class="tab active" data-tab="song">Song</div> |
|
|
<div class="tab" data-tab="instrumental">Instrumental</div> |
|
|
<div class="tab" data-tab="lyrics">Lyrics</div> |
|
|
<div class="tab" data-tab="video">Video</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="songTab" class="tab-content"> |
|
|
<h2 class="text-2xl font-semibold mb-6">Create New Song</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Song Title</label> |
|
|
<input type="text" id="songTitle" placeholder="Enter song title" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Lyrics</label> |
|
|
<textarea id="songLyrics" placeholder="Enter your lyrics here..." |
|
|
class="lyrics-input glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Genre</label> |
|
|
<select id="songGenre" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="pop">Pop</option> |
|
|
<option value="rock">Rock</option> |
|
|
<option value="r&b">R&B</option> |
|
|
<option value="hiphop">Hip Hop</option> |
|
|
<option value="electronic">Electronic</option> |
|
|
<option value="jazz">Jazz</option> |
|
|
<option value="classical">Classical</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Mood</label> |
|
|
<select id="songMood" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="happy">Happy</option> |
|
|
<option value="sad">Sad</option> |
|
|
<option value="energetic">Energetic</option> |
|
|
<option value="calm">Calm</option> |
|
|
<option value="romantic">Romantic</option> |
|
|
<option value="angry">Angry</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Vocal Type</label> |
|
|
<select id="songVocal" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="male">Male</option> |
|
|
<option value="female">Female</option> |
|
|
<option value="duet">Duet</option> |
|
|
<option value="choir">Choir</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Model</label> |
|
|
<select id="songModel" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="auto">Auto (Recommended)</option> |
|
|
<option value="mureka-6">Mureka V6</option> |
|
|
<option value="mureka-5.5">Mureka V5.5</option> |
|
|
<option value="mureka-o1">Mureka O1</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="advancedOptions" class="rounded"> |
|
|
<label for="advancedOptions">Advanced Options</label> |
|
|
</div> |
|
|
|
|
|
<button id="generateSongBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Generate Song |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="advancedOptionsPanel" class="mt-6 hidden"> |
|
|
<h3 class="text-lg font-medium mb-4">Advanced Options</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Tempo (BPM)</label> |
|
|
<input type="range" id="songTempo" min="60" max="200" value="120" |
|
|
class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs mt-1"> |
|
|
<span>60</span> |
|
|
<span id="tempoValue">120</span> |
|
|
<span>200</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Duration (seconds)</label> |
|
|
<input type="range" id="songDuration" min="30" max="300" value="180" |
|
|
class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs mt-1"> |
|
|
<span>30</span> |
|
|
<span id="durationValue">180</span> |
|
|
<span>300</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-2">Reference Track (URL)</label> |
|
|
<input type="text" id="songReference" placeholder="Paste a YouTube or Spotify URL" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Additional Description</label> |
|
|
<textarea id="songDescription" placeholder="Describe the style, instruments, or any specific requirements..." |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="instrumentalTab" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-semibold mb-6">Create Instrumental</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Track Title</label> |
|
|
<input type="text" id="instrumentalTitle" placeholder="Enter track title" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Genre</label> |
|
|
<select id="instrumentalGenre" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="electronic">Electronic</option> |
|
|
<option value="orchestral">Orchestral</option> |
|
|
<option value="jazz">Jazz</option> |
|
|
<option value="rock">Rock</option> |
|
|
<option value="ambient">Ambient</option> |
|
|
<option value="hiphop">Hip Hop</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Mood</label> |
|
|
<select id="instrumentalMood" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="happy">Happy</option> |
|
|
<option value="sad">Sad</option> |
|
|
<option value="energetic">Energetic</option> |
|
|
<option value="calm">Calm</option> |
|
|
<option value="dark">Dark</option> |
|
|
<option value="uplifting">Uplifting</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Instruments</label> |
|
|
<select id="instrumentalInstruments" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="piano">Piano</option> |
|
|
<option value="guitar">Guitar</option> |
|
|
<option value="strings">Strings</option> |
|
|
<option value="synth">Synth</option> |
|
|
<option value="drums">Drums</option> |
|
|
<option value="full-band">Full Band</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Model</label> |
|
|
<select id="instrumentalModel" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="auto">Auto (Recommended)</option> |
|
|
<option value="mureka-6">Mureka V6</option> |
|
|
<option value="mureka-5.5">Mureka V5.5</option> |
|
|
<option value="mureka-o1">Mureka O1</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="instrumentalAdvancedOptions" class="rounded"> |
|
|
<label for="instrumentalAdvancedOptions">Advanced Options</label> |
|
|
</div> |
|
|
|
|
|
<button id="generateInstrumentalBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Generate Instrumental |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="instrumentalAdvancedOptionsPanel" class="mt-6 hidden"> |
|
|
<h3 class="text-lg font-medium mb-4">Advanced Options</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Tempo (BPM)</label> |
|
|
<input type="range" id="instrumentalTempo" min="60" max="200" value="120" |
|
|
class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs mt-1"> |
|
|
<span>60</span> |
|
|
<span id="instrumentalTempoValue">120</span> |
|
|
<span>200</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Duration (seconds)</label> |
|
|
<input type="range" id="instrumentalDuration" min="30" max="300" value="180" |
|
|
class="w-full h-2 bg-white/20 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs mt-1"> |
|
|
<span>30</span> |
|
|
<span id="instrumentalDurationValue">180</span> |
|
|
<span>300</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-2">Reference Track (URL)</label> |
|
|
<input type="text" id="instrumentalReference" placeholder="Paste a YouTube or Spotify URL" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Additional Description</label> |
|
|
<textarea id="instrumentalDescription" placeholder="Describe the style, instruments, or any specific requirements..." |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="lyricsTab" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-semibold mb-6">Generate Lyrics</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Song Title</label> |
|
|
<input type="text" id="lyricsTitle" placeholder="Enter song title" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Theme/Subject</label> |
|
|
<textarea id="lyricsTheme" placeholder="Describe what the song should be about..." |
|
|
class="lyrics-input glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Genre</label> |
|
|
<select id="lyricsGenre" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="pop">Pop</option> |
|
|
<option value="rock">Rock</option> |
|
|
<option value="r&b">R&B</option> |
|
|
<option value="hiphop">Hip Hop</option> |
|
|
<option value="country">Country</option> |
|
|
<option value="jazz">Jazz</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Mood</label> |
|
|
<select id="lyricsMood" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="happy">Happy</option> |
|
|
<option value="sad">Sad</option> |
|
|
<option value="romantic">Romantic</option> |
|
|
<option value="angry">Angry</option> |
|
|
<option value="nostalgic">Nostalgic</option> |
|
|
<option value="hopeful">Hopeful</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Style</label> |
|
|
<select id="lyricsStyle" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="standard">Standard</option> |
|
|
<option value="poetic">Poetic</option> |
|
|
<option value="simple">Simple</option> |
|
|
<option value="complex">Complex</option> |
|
|
<option value="metaphorical">Metaphorical</option> |
|
|
<option value="direct">Direct</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Length</label> |
|
|
<select id="lyricsLength" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="short">Short (1 verse + chorus)</option> |
|
|
<option value="medium" selected>Medium (2 verses + chorus)</option> |
|
|
<option value="long">Long (3 verses + chorus + bridge)</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="lyricsAdvancedOptions" class="rounded"> |
|
|
<label for="lyricsAdvancedOptions">Advanced Options</label> |
|
|
</div> |
|
|
|
|
|
<button id="generateLyricsBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Generate Lyrics |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="lyricsAdvancedOptionsPanel" class="mt-6 hidden"> |
|
|
<h3 class="text-lg font-medium mb-4">Advanced Options</h3> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-2">Reference Artist/Song</label> |
|
|
<input type="text" id="lyricsReference" placeholder="E.g., 'Taylor Swift style'" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Specific Instructions</label> |
|
|
<textarea id="lyricsInstructions" placeholder="Any specific requirements for the lyrics..." |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="generatedLyricsContainer" class="mt-6 hidden"> |
|
|
<h3 class="text-lg font-medium mb-4">Generated Lyrics</h3> |
|
|
<div id="generatedLyrics" class="glass-effect p-4 rounded-xl whitespace-pre-line"></div> |
|
|
<div class="flex justify-end mt-4"> |
|
|
<button id="copyLyricsBtn" class="glass-effect px-4 py-2 rounded-full mr-2"> |
|
|
<i class="fas fa-copy mr-2"></i> Copy |
|
|
</button> |
|
|
<button id="useLyricsBtn" class="bg-white text-purple-700 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-music mr-2"></i> Use for Song |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="videoTab" class="tab-content hidden"> |
|
|
<h2 class="text-2xl font-semibold mb-6">Generate Music Video</h2> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Select Song</label> |
|
|
<select id="videoSongSelect" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="">Select a generated song...</option> |
|
|
|
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Video Style</label> |
|
|
<select id="videoStyle" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="abstract">Abstract</option> |
|
|
<option value="performance">Performance</option> |
|
|
<option value="story">Story</option> |
|
|
<option value="lyric">Lyric Video</option> |
|
|
<option value="concert">Concert</option> |
|
|
<option value="animation">Animation</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label class="block text-sm font-medium mb-2">Theme/Concept</label> |
|
|
<textarea id="videoTheme" placeholder="Describe the video concept or provide reference images/links..." |
|
|
class="lyrics-input glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Color Palette</label> |
|
|
<select id="videoColors" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="vibrant">Vibrant</option> |
|
|
<option value="pastel">Pastel</option> |
|
|
<option value="monochrome">Monochrome</option> |
|
|
<option value="dark">Dark</option> |
|
|
<option value="light">Light</option> |
|
|
<option value="custom">Custom</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Video Length</label> |
|
|
<select id="videoLength" class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
<option value="full">Full Song</option> |
|
|
<option value="30s">30 Seconds</option> |
|
|
<option value="60s">60 Seconds</option> |
|
|
<option value="90s">90 Seconds</option> |
|
|
<option value="teaser">Teaser (15s)</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<input type="checkbox" id="videoAdvancedOptions" class="rounded"> |
|
|
<label for="videoAdvancedOptions">Advanced Options</label> |
|
|
</div> |
|
|
|
|
|
<button id="generateVideoBtn" class="bg-white text-purple-700 px-6 py-3 rounded-full font-medium hover:bg-white/90 transition flex items-center"> |
|
|
<i class="fas fa-video mr-2"></i> Generate Video |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="videoAdvancedOptionsPanel" class="mt-6 hidden"> |
|
|
<h3 class="text-lg font-medium mb-4">Advanced Options</h3> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium mb-2">Reference Videos (URLs)</label> |
|
|
<input type="text" id="videoReferences" placeholder="Paste YouTube or Vimeo URLs separated by commas" |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Specific Instructions</label> |
|
|
<textarea id="videoInstructions" placeholder="Any specific requirements for the video..." |
|
|
class="glass-effect w-full px-4 py-3 rounded-xl bg-transparent border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/30"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="generationProgress" class="mt-6 hidden"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium" id="progressTitle">Generating your song...</span> |
|
|
<span id="progressPercent">0%</span> |
|
|
</div> |
|
|
<div class="progress-bar"> |
|
|
<div id="progressFill" class="progress-fill" style="width: 0%"></div> |
|
|
</div> |
|
|
<div class="text-sm text-center mt-2" id="statusMessage">Preparing generation...</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="glass-effect p-6 rounded-2xl"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-semibold">Your Library</h2> |
|
|
<button id="refreshLibraryBtn" class="glass-effect px-3 py-1 rounded-full text-sm"> |
|
|
<i class="fas fa-sync-alt mr-1"></i> Refresh |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2 mb-4"> |
|
|
<div class="tab active" data-filter="all">All</div> |
|
|
<div class="tab" data-filter="songs">Songs</div> |
|
|
<div class="tab" data-filter="instrumentals">Instrumentals</div> |
|
|
<div class="tab" data-filter="videos">Videos</div> |
|
|
</div> |
|
|
|
|
|
<div id="libraryContent" class="space-y-4 max-h-[600px] overflow-y-auto pr-2"> |
|
|
|
|
|
<div class="text-center py-8"> |
|
|
<i class="fas fa-music text-4xl mb-4 opacity-50"></i> |
|
|
<p class="opacity-70">Your generated content will appear here</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="accountModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="glass-effect w-full max-w-md p-6 rounded-2xl"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Account</h3> |
|
|
<button id="closeAccountModal" class="text-xl">×</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-16 h-16 rounded-full bg-white/20 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-user text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium" id="accountName">Guest User</h4> |
|
|
<p class="text-sm opacity-70" id="accountEmail">guest@example.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass-effect p-4 rounded-xl mb-4"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">Plan</span> |
|
|
<span id="accountPlan" class="bg-white text-purple-700 px-2 py-1 rounded-full text-xs">Basic</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span>Credits</span> |
|
|
<span id="accountCredits">400</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass-effect p-4 rounded-xl"> |
|
|
<div class="flex justify-between items-center mb-2"> |
|
|
<span class="font-medium">API Key</span> |
|
|
<button id="showApiKey" class="text-xs">Show</button> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<input type="password" id="apiKeyField" value="sk_test_1234567890abcdef" |
|
|
class="glass-effect w-full px-3 py-2 rounded bg-transparent border border-white/20 text-sm" readonly> |
|
|
<button id="copyApiKey" class="absolute right-2 top-1/2 transform -translate-y-1/2"> |
|
|
<i class="fas fa-copy"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between"> |
|
|
<button class="glass-effect px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-sign-out-alt mr-2"></i> Logout |
|
|
</button> |
|
|
<button class="bg-white text-purple-700 px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-crown mr-2"></i> Upgrade |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="glass-effect w-full max-w-md p-6 rounded-2xl"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-semibold">Settings</h3> |
|
|
<button id="closeSettingsModal" class="text-xl">×</button> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Default Model</label> |
|
|
<select class="glass-effect w-full px-4 py-2 rounded-xl bg-transparent border border-white/20"> |
|
|
<option value="auto">Auto (Recommended)</option> |
|
|
<option value="mureka-6">Mureka V6</option> |
|
|
<option value="mureka-5.5">Mureka V5.5</option> |
|
|
<option value="mureka-o1">Mureka O1</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Default Quality</label> |
|
|
<select class="glass-effect w-full px-4 py-2 rounded-xl bg-transparent border border-white/20"> |
|
|
<option value="standard">Standard</option> |
|
|
<option value="high">High (uses more credits)</option> |
|
|
<option value="premium">Premium (best quality)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium mb-2">Default Duration</label> |
|
|
<select class="glass-effect w-full px-4 py-2 rounded-xl bg-transparent border border-white/20"> |
|
|
<option value="short">Short (30-60s)</option> |
|
|
<option value="medium" selected>Medium (2-3 min)</option> |
|
|
<option value="full">Full Length (3-5 min)</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between pt-4 border-t border-white/20"> |
|
|
<span>Dark Mode</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-white/20 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between"> |
|
|
<span>Auto-save generations</span> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer" checked> |
|
|
<div class="w-11 h-6 bg-white/20 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button class="bg-white text-purple-700 px-4 py-2 rounded-full"> |
|
|
Save Settings |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// DOM Elements |
|
|
const tabs = document.querySelectorAll('[data-tab]'); |
|
|
const tabContents = document.querySelectorAll('.tab-content'); |
|
|
const filterTabs = document.querySelectorAll('[data-filter]'); |
|
|
const advancedOptionsCheckbox = document.getElementById('advancedOptions'); |
|
|
const advancedOptionsPanel = document.getElementById('advancedOptionsPanel'); |
|
|
const instrumentalAdvancedOptionsCheckbox = document.getElementById('instrumentalAdvancedOptions'); |
|
|
const instrumentalAdvancedOptionsPanel = document.getElementById('instrumentalAdvancedOptionsPanel'); |
|
|
const lyricsAdvancedOptionsCheckbox = document.getElementById('lyricsAdvancedOptions'); |
|
|
const lyricsAdvancedOptionsPanel = document.getElementById('lyricsAdvancedOptionsPanel'); |
|
|
const videoAdvancedOptionsCheckbox = document.getElementById('videoAdvancedOptions'); |
|
|
const videoAdvancedOptionsPanel = document.getElementById('videoAdvancedOptionsPanel'); |
|
|
|
|
|
// Generation buttons |
|
|
const generateSongBtn = document.getElementById('generateSongBtn'); |
|
|
const generateInstrumentalBtn = document.getElementById('generateInstrumentalBtn'); |
|
|
const generateLyricsBtn = document.getElementById('generateLyricsBtn'); |
|
|
const generateVideoBtn = document.getElementById('generateVideoBtn'); |
|
|
|
|
|
// Progress elements |
|
|
const generationProgress = document.getElementById('generationProgress'); |
|
|
const progressFill = document.getElementById('progressFill'); |
|
|
const progressPercent = document.getElementById('progressPercent'); |
|
|
const progressTitle = document.getElementById('progressTitle'); |
|
|
const statusMessage = document.getElementById('statusMessage'); |
|
|
|
|
|
// Library elements |
|
|
const libraryContent = document.getElementById('libraryContent'); |
|
|
const refreshLibraryBtn = document.getElementById('refreshLibraryBtn'); |
|
|
const videoSongSelect = document.getElementById('videoSongSelect'); |
|
|
|
|
|
// Lyrics elements |
|
|
const generatedLyricsContainer = document.getElementById('generatedLyricsContainer'); |
|
|
const generatedLyrics = document.getElementById('generatedLyrics'); |
|
|
const copyLyricsBtn = document.getElementById('copyLyricsBtn'); |
|
|
const useLyricsBtn = document.getElementById('useLyricsBtn'); |
|
|
|
|
|
// Modal elements |
|
|
const accountBtn = document.getElementById('accountBtn'); |
|
|
const accountModal = document.getElementById('accountModal'); |
|
|
const closeAccountModal = document.getElementById('closeAccountModal'); |
|
|
const showApiKey = document.getElementById('showApiKey'); |
|
|
const apiKeyField = document.getElementById('apiKeyField'); |
|
|
const copyApiKey = document.getElementById('copyApiKey'); |
|
|
|
|
|
const settingsBtn = document.getElementById('settingsBtn'); |
|
|
const settingsModal = document.getElementById('settingsModal'); |
|
|
const closeSettingsModal = document.getElementById('closeSettingsModal'); |
|
|
|
|
|
// Form elements |
|
|
const songTitle = document.getElementById('songTitle'); |
|
|
const songLyrics = document.getElementById('songLyrics'); |
|
|
const songGenre = document.getElementById('songGenre'); |
|
|
const songMood = document.getElementById('songMood'); |
|
|
const songVocal = document.getElementById('songVocal'); |
|
|
const songModel = document.getElementById('songModel'); |
|
|
const songTempo = document.getElementById('songTempo'); |
|
|
const tempoValue = document.getElementById('tempoValue'); |
|
|
const songDuration = document.getElementById('songDuration'); |
|
|
const durationValue = document.getElementById('durationValue'); |
|
|
const songReference = document.getElementById('songReference'); |
|
|
const songDescription = document.getElementById('songDescription'); |
|
|
|
|
|
const instrumentalTitle = document.getElementById('instrumentalTitle'); |
|
|
const instrumentalGenre = document.getElementById('instrumentalGenre'); |
|
|
const instrumentalMood = document.getElementById('instrumentalMood'); |
|
|
const instrumentalInstruments = document.getElementById('instrumentalInstruments'); |
|
|
const instrumentalModel = document.getElementById('instrumentalModel'); |
|
|
const instrumentalTempo = document.getElementById('instrumentalTempo'); |
|
|
const instrumentalTempoValue = document.getElementById('instrumentalTempoValue'); |
|
|
const instrumentalDuration = document.getElementById('instrumentalDuration'); |
|
|
const instrumentalDurationValue = document.getElementById('instrumentalDurationValue'); |
|
|
const instrumentalReference = document.getElementById('instrumentalReference'); |
|
|
const instrumentalDescription = document.getElementById('instrumentalDescription'); |
|
|
|
|
|
const lyricsTitle = document.getElementById('lyricsTitle'); |
|
|
const lyricsTheme = document.getElementById('lyricsTheme'); |
|
|
const lyricsGenre = document.getElementById('lyricsGenre'); |
|
|
const lyricsMood = document.getElementById('lyricsMood'); |
|
|
const lyricsStyle = document.getElementById('lyricsStyle'); |
|
|
const lyricsLength = document.getElementById('lyricsLength'); |
|
|
const lyricsReference = document.getElementById('lyricsReference'); |
|
|
const lyricsInstructions = document.getElementById('lyricsInstructions'); |
|
|
|
|
|
const videoStyle = document.getElementById('videoStyle'); |
|
|
const videoTheme = document.getElementById('videoTheme'); |
|
|
const videoColors = document.getElementById('videoColors'); |
|
|
const videoLength = document.getElementById('videoLength'); |
|
|
const videoReferences = document.getElementById('videoReferences'); |
|
|
const videoInstructions = document.getElementById('videoInstructions'); |
|
|
|
|
|
// Mock data |
|
|
const mockSongs = [ |
|
|
{ |
|
|
id: 'song1', |
|
|
title: 'Summer Breeze', |
|
|
type: 'song', |
|
|
genre: 'Pop', |
|
|
mood: 'Happy', |
|
|
vocal: 'Female', |
|
|
duration: '2:45', |
|
|
date: '2023-06-15', |
|
|
cover: 'https://via.placeholder.com/150', |
|
|
audio: 'https://example.com/audio1.mp3' |
|
|
}, |
|
|
{ |
|
|
id: 'song2', |
|
|
title: 'Midnight Thoughts', |
|
|
type: 'song', |
|
|
genre: 'R&B', |
|
|
mood: 'Sad', |
|
|
vocal: 'Male', |
|
|
duration: '3:12', |
|
|
date: '2023-06-10', |
|
|
cover: 'https://via.placeholder.com/150', |
|
|
audio: 'https://example.com/audio2.mp3' |
|
|
}, |
|
|
{ |
|
|
id: 'inst1', |
|
|
title: 'Dreamscape', |
|
|
type: 'instrumental', |
|
|
genre: 'Ambient', |
|
|
mood: 'Calm', |
|
|
vocal: 'None', |
|
|
duration: '4:20', |
|
|
date: '2023-06-05', |
|
|
cover: 'https://via.placeholder.com/150', |
|
|
audio: 'https://example.com/audio3.mp3' |
|
|
}, |
|
|
{ |
|
|
id: 'video1', |
|
|
title: 'Summer Breeze Video', |
|
|
type: 'video', |
|
|
genre: 'Pop', |
|
|
mood: 'Happy', |
|
|
duration: '2:45', |
|
|
date: '2023-06-18', |
|
|
cover: 'https://via.placeholder.com/150', |
|
|
video: 'https://example.com/video1.mp4' |
|
|
} |
|
|
]; |
|
|
|
|
|
// Mock API Key - In a real app, this would be securely stored and retrieved |
|
|
const MUREKA_API_KEY = 'your_api_key_here'; |
|
|
|
|
|
// Initialize the app |
|
|
function initApp() { |
|
|
// Load library content |
|
|
loadLibraryContent('all'); |
|
|
|
|
|
// Populate video song select |
|
|
populateVideoSongSelect(); |
|
|
} |
|
|
|
|
|
// Tab switching |
|
|
tabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
// Remove active class from all tabs |
|
|
tabs.forEach(t => t.classList.remove('active')); |
|
|
// Add active class to clicked tab |
|
|
tab.classList.add('active'); |
|
|
|
|
|
// Hide all tab contents |
|
|
tabContents.forEach(content => content.classList.add('hidden')); |
|
|
// Show the selected tab content |
|
|
const tabId = tab.getAttribute('data-tab') + 'Tab'; |
|
|
document.getElementById(tabId).classList.remove('hidden'); |
|
|
|
|
|
// Update progress title based on tab |
|
|
switch(tab.getAttribute('data-tab')) { |
|
|
case 'song': |
|
|
progressTitle.textContent = 'Generating your song...'; |
|
|
break; |
|
|
case 'instrumental': |
|
|
progressTitle.textContent = 'Generating instrumental...'; |
|
|
break; |
|
|
case 'lyrics': |
|
|
progressTitle.textContent = 'Generating lyrics...'; |
|
|
break; |
|
|
case 'video': |
|
|
progressTitle.textContent = 'Generating video...'; |
|
|
break; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Filter switching |
|
|
filterTabs.forEach(tab => { |
|
|
tab.addEventListener('click', () => { |
|
|
// Remove active class from all filter tabs |
|
|
filterTabs.forEach(t => t.classList.remove('active')); |
|
|
// Add active class to clicked tab |
|
|
tab.classList.add('active'); |
|
|
|
|
|
// Load content based on filter |
|
|
const filter = tab.getAttribute('data-filter'); |
|
|
loadLibraryContent(filter); |
|
|
}); |
|
|
}); |
|
|
|
|
|
// Advanced options toggles |
|
|
advancedOptionsCheckbox.addEventListener('change', function() { |
|
|
advancedOptionsPanel.classList.toggle('hidden', !this.checked); |
|
|
}); |
|
|
|
|
|
instrumentalAdvancedOptionsCheckbox.addEventListener('change', function() { |
|
|
instrumentalAdvancedOptionsPanel.classList.toggle('hidden', !this.checked); |
|
|
}); |
|
|
|
|
|
lyricsAdvancedOptionsCheckbox.addEventListener('change', function() { |
|
|
lyricsAdvancedOptionsPanel.classList.toggle('hidden', !this.checked); |
|
|
}); |
|
|
|
|
|
videoAdvancedOptionsCheckbox.addEventListener('change', function() { |
|
|
videoAdvancedOptionsPanel.classList.toggle('hidden', !this.checked); |
|
|
}); |
|
|
|
|
|
// Range input updates |
|
|
songTempo.addEventListener('input', function() { |
|
|
tempoValue.textContent = this.value; |
|
|
}); |
|
|
|
|
|
songDuration.addEventListener('input', function() { |
|
|
durationValue.textContent = this.value; |
|
|
}); |
|
|
|
|
|
instrumentalTempo.addEventListener('input', function() { |
|
|
instrumentalTempoValue.textContent = this.value; |
|
|
}); |
|
|
|
|
|
instrumentalDuration.addEventListener('input', function() { |
|
|
instrumentalDurationValue.textContent = this.value; |
|
|
}); |
|
|
|
|
|
// Generate buttons |
|
|
generateSongBtn.addEventListener('click', generateSong); |
|
|
generateInstrumentalBtn.addEventListener('click', generateInstrumental); |
|
|
generateLyricsBtn.addEventListener('click', generateLyrics); |
|
|
generateVideoBtn.addEventListener('click', generateVideo); |
|
|
|
|
|
// Library refresh |
|
|
refreshLibraryBtn.addEventListener('click', function() { |
|
|
const activeFilter = document.querySelector('[data-filter].active').getAttribute('data-filter'); |
|
|
loadLibraryContent(activeFilter); |
|
|
}); |
|
|
|
|
|
// Lyrics actions |
|
|
copyLyricsBtn.addEventListener('click', copyLyrics); |
|
|
useLyricsBtn.addEventListener('click', useLyricsForSong); |
|
|
|
|
|
// Modal controls |
|
|
accountBtn.addEventListener('click', () => accountModal.classList.remove('hidden')); |
|
|
closeAccountModal.addEventListener('click', () => accountModal.classList.add('hidden')); |
|
|
|
|
|
settingsBtn.addEventListener('click', () => settingsModal.classList.remove('hidden')); |
|
|
closeSettingsModal.addEventListener('click', () => settingsModal.classList.add('hidden')); |
|
|
|
|
|
// API key controls |
|
|
showApiKey.addEventListener('click', function() { |
|
|
if (apiKeyField.type === 'password') { |
|
|
apiKeyField.type = 'text'; |
|
|
this.textContent = 'Hide'; |
|
|
} else { |
|
|
apiKeyField.type = 'password'; |
|
|
this.textContent = 'Show'; |
|
|
} |
|
|
}); |
|
|
|
|
|
copyApiKey.addEventListener('click', function() { |
|
|
apiKeyField.select(); |
|
|
document.execCommand('copy'); |
|
|
|
|
|
// Show copied feedback |
|
|
const originalText = this.innerHTML; |
|
|
this.innerHTML = '<i class="fas fa-check"></i> Copied!'; |
|
|
setTimeout(() => { |
|
|
this.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
// Close modals when clicking outside |
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === accountModal) { |
|
|
accountModal.classList.add('hidden'); |
|
|
} |
|
|
if (e.target === settingsModal) { |
|
|
settingsModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
// Load library content |
|
|
function loadLibraryContent(filter) { |
|
|
// In a real app, this would fetch from API |
|
|
let content = mockSongs; |
|
|
|
|
|
if (filter !== 'all') { |
|
|
content = content.filter(item => item.type === filter || |
|
|
(filter === 'songs' && item.type === 'song') || |
|
|
(filter === 'instrumentals' && item.type === 'instrumental') || |
|
|
(filter === 'videos' && item.type === 'video')); |
|
|
} |
|
|
|
|
|
if (content.length === 0) { |
|
|
libraryContent.innerHTML = ` |
|
|
<div class="text-center py-8"> |
|
|
<i class="fas fa-music text-4xl mb-4 opacity-50"></i> |
|
|
<p class="opacity-70">No ${filter} found in your library</p> |
|
|
</div> |
|
|
`; |
|
|
return; |
|
|
} |
|
|
|
|
|
libraryContent.innerHTML = ''; |
|
|
|
|
|
content.forEach(item => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'song-card glass-effect p-4 rounded-xl'; |
|
|
|
|
|
let typeIcon = 'fa-music'; |
|
|
if (item.type === 'instrumental') typeIcon = 'fa-headphones'; |
|
|
if (item.type === 'video') typeIcon = 'fa-video'; |
|
|
|
|
|
card.innerHTML = ` |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<div> |
|
|
<h3 class="font-medium">${item.title}</h3> |
|
|
<p class="text-sm opacity-70">${item.genre} • ${item.mood}${item.vocal !== 'None' ? ' • ' + item.vocal : ''}</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="glass-effect p-2 rounded-full" data-id="${item.id}" data-type="${item.type}"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
<button class="glass-effect p-2 rounded-full" data-id="${item.id}" data-type="${item.type}"> |
|
|
<i class="fas fa-share-alt"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between text-sm opacity-70 mb-2"> |
|
|
<span><i class="fas ${typeIcon} mr-1"></i> ${item.type.charAt(0).toUpperCase() + item.type.slice(1)}</span> |
|
|
<span>${item.date}</span> |
|
|
</div> |
|
|
<div class="audio-player flex items-center px-3"> |
|
|
<button class="mr-3"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<div class="flex-1"> |
|
|
<input type="range" class="w-full" value="0"> |
|
|
</div> |
|
|
<span class="ml-3 text-xs">${item.duration}</span> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
// Add play button functionality |
|
|
const playBtn = card.querySelector('.audio-player button'); |
|
|
playBtn.addEventListener('click', function() { |
|
|
const icon = this.querySelector('i'); |
|
|
if(icon.classList.contains('fa-play')) { |
|
|
icon.classList.remove('fa-play'); |
|
|
icon.classList.add('fa-pause'); |
|
|
// In a real app, would play the audio here |
|
|
} else { |
|
|
icon.classList.remove('fa-pause'); |
|
|
icon.classList.add('fa-play'); |
|
|
// In a real app, would pause the audio here |
|
|
} |
|
|
}); |
|
|
|
|
|
libraryContent.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Populate video song select |
|
|
function populateVideoSongSelect() { |
|
|
// In a real app, this would fetch from API |
|
|
const songs = mockSongs.filter(item => item.type === 'song'); |
|
|
|
|
|
videoSongSelect.innerHTML = '<option value="">Select a generated song...</option>'; |
|
|
|
|
|
songs.forEach(song => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = song.id; |
|
|
option.textContent = song.title; |
|
|
videoSongSelect.appendChild(option); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Generate song |
|
|
async function generateSong() { |
|
|
// Validate inputs |
|
|
if(!songLyrics.value.trim()) { |
|
|
alert('Please enter lyrics for your song'); |
|
|
return; |
|
|
} |
|
|
|
|
|
// Show loading state on button |
|
|
const originalBtnContent = generateSongBtn.innerHTML; |
|
|
generateSongBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...'; |
|
|
generateSongBtn.disabled = true; |
|
|
|
|
|
// Show progress |
|
|
generationProgress.classList.remove('hidden'); |
|
|
|
|
|
// Prepare request data |
|
|
const requestData = { |
|
|
lyrics: songLyrics.value, |
|
|
title: songTitle.value || 'Untitled Song', |
|
|
model: songModel.value, |
|
|
prompt: `${songGenre.value}, ${songMood.value}, ${songVocal.value} vocal` |
|
|
}; |
|
|
|
|
|
// Add advanced options if enabled |
|
|
if(advancedOptionsCheckbox.checked) { |
|
|
requestData.tempo = songTempo.value; |
|
|
requestData.duration = songDuration.value; |
|
|
requestData.reference = songReference.value; |
|
|
requestData.additional_description = songDescription.value; |
|
|
} |
|
|
|
|
|
// Simulate API call with progress updates |
|
|
await simulateApiCall(requestData, 'song'); |
|
|
|
|
|
// Restore button state |
|
|
generateSongBtn.innerHTML = originalBtnContent; |
|
|
generateSongBtn.disabled = false; |
|
|
} |
|
|
|
|
|
// Generate instrumental |
|
|
async function generateInstrumental() { |
|
|
// Show loading state on button |
|
|
const originalBtnContent = generateInstrumentalBtn.innerHTML; |
|
|
generateInstrumentalBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...'; |
|
|
generateInstrumentalBtn.disabled = true; |
|
|
|
|
|
// Show progress |
|
|
generationProgress.classList.remove('hidden'); |
|
|
|
|
|
// Prepare request data |
|
|
const requestData = { |
|
|
title: instrumentalTitle.value || 'Untitled Instrumental', |
|
|
model: instrumentalModel.value, |
|
|
prompt: `${instrumentalGenre.value}, ${instrumentalMood.value}, ${instrumentalInstruments.value}` |
|
|
}; |
|
|
|
|
|
// Add advanced options if enabled |
|
|
if(instrumentalAdvancedOptionsCheckbox.checked) { |
|
|
requestData.tempo = instrumentalTempo.value; |
|
|
requestData.duration = instrumentalDuration.value; |
|
|
requestData.reference = instrumentalReference.value; |
|
|
requestData.additional_description = instrumentalDescription.value; |
|
|
} |
|
|
|
|
|
// Simulate API call with progress updates |
|
|
await simulateApiCall(requestData, 'instrumental'); |
|
|
|
|
|
// Restore button state |
|
|
generateInstrumentalBtn.innerHTML = originalBtnContent; |
|
|
generateInstrumentalBtn.disabled = false; |
|
|
} |
|
|
|
|
|
// Generate lyrics |
|
|
async function generateLyrics() { |
|
|
// Validate inputs |
|
|
if(!lyricsTheme.value.trim()) { |
|
|
alert('Please enter a theme or subject for the lyrics'); |
|
|
return; |
|
|
} |
|
|
|
|
|
// Show loading state on button |
|
|
const originalBtnContent = generateLyricsBtn.innerHTML; |
|
|
generateLyricsBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...'; |
|
|
generateLyricsBtn.disabled = true; |
|
|
|
|
|
// Show progress |
|
|
generationProgress.classList.remove('hidden'); |
|
|
|
|
|
// Prepare request data |
|
|
const requestData = { |
|
|
theme: lyricsTheme.value, |
|
|
title: lyricsTitle.value || 'Untitled Lyrics', |
|
|
genre: lyricsGenre.value, |
|
|
mood: lyricsMood.value, |
|
|
style: lyricsStyle.value, |
|
|
length: lyricsLength.value |
|
|
}; |
|
|
|
|
|
// Add advanced options if enabled |
|
|
if(lyricsAdvancedOptionsCheckbox.checked) { |
|
|
requestData.reference = lyricsReference.value; |
|
|
requestData.instructions = lyricsInstructions.value; |
|
|
} |
|
|
|
|
|
// Simulate API call with progress updates |
|
|
await simulateApiCall(requestData, 'lyrics'); |
|
|
|
|
|
// Restore button state |
|
|
generateLyricsBtn.innerHTML = originalBtnContent; |
|
|
generateLyricsBtn.disabled = false; |
|
|
} |
|
|
|
|
|
// Generate video |
|
|
async function generateVideo() { |
|
|
// Validate inputs |
|
|
if(!videoSongSelect.value) { |
|
|
alert('Please select a song to create a video for'); |
|
|
return; |
|
|
} |
|
|
|
|
|
// Show loading state on button |
|
|
const originalBtnContent = generateVideoBtn.innerHTML; |
|
|
generateVideoBtn.innerHTML = '<div class="spinner mr-2"></div> Generating...'; |
|
|
generateVideoBtn.disabled = true; |
|
|
|
|
|
// Show progress |
|
|
generationProgress.classList.remove('hidden'); |
|
|
|
|
|
// Prepare request data |
|
|
const selectedSong = mockSongs.find(song => song.id === videoSongSelect.value); |
|
|
const requestData = { |
|
|
song_id: videoSongSelect.value, |
|
|
song_title: selectedSong.title, |
|
|
style: videoStyle.value, |
|
|
theme: videoTheme.value, |
|
|
color_palette: videoColors.value, |
|
|
length: videoLength.value |
|
|
}; |
|
|
|
|
|
// Add advanced options if enabled |
|
|
if(videoAdvancedOptionsCheckbox.checked) { |
|
|
requestData.references = videoReferences.value; |
|
|
requestData.instructions = videoInstructions.value; |
|
|
} |
|
|
|
|
|
// Simulate API call with progress updates |
|
|
await simulateApiCall(requestData, 'video'); |
|
|
|
|
|
// Restore button state |
|
|
generateVideoBtn.innerHTML = originalBtnContent; |
|
|
generateVideoBtn.disabled = false; |
|
|
} |
|
|
|
|
|
// Simulate API call with progress updates |
|
|
function simulateApiCall(requestData, type) { |
|
|
return new Promise((resolve) => { |
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if(progress > 100) progress = 100; |
|
|
|
|
|
progressFill.style.width = `${progress}%`; |
|
|
progressPercent.textContent = `${Math.floor(progress)}%`; |
|
|
|
|
|
// Update status messages based on type |
|
|
if(type === 'song') { |
|
|
if(progress < 20) { |
|
|
statusMessage.textContent = 'Preparing generation...'; |
|
|
} else if(progress < 50) { |
|
|
statusMessage.textContent = 'Generating melody...'; |
|
|
} else if(progress < 80) { |
|
|
statusMessage.textContent = 'Adding vocals...'; |
|
|
} else { |
|
|
statusMessage.textContent = 'Finalizing your song...'; |
|
|
} |
|
|
} |
|
|
else if(type === 'instrumental') { |
|
|
if(progress < 20) { |
|
|
statusMessage.textContent = 'Preparing generation...'; |
|
|
} else if(progress < 60) { |
|
|
statusMessage.textContent = 'Composing instrumental...'; |
|
|
} else { |
|
|
statusMessage.textContent = 'Finalizing your track...'; |
|
|
} |
|
|
} |
|
|
else if(type === 'lyrics') { |
|
|
if(progress < 30) { |
|
|
statusMessage.textContent = 'Brainstorming ideas...'; |
|
|
} else if(progress < 70) { |
|
|
statusMessage.textContent = 'Writing lyrics...'; |
|
|
} else { |
|
|
statusMessage.textContent = 'Refining your lyrics...'; |
|
|
} |
|
|
} |
|
|
else if(type === 'video') { |
|
|
if(progress < 20) { |
|
|
statusMessage.textContent = 'Analyzing song...'; |
|
|
} else if(progress < 50) { |
|
|
statusMessage.textContent = 'Generating visuals...'; |
|
|
} else if(progress < 80) { |
|
|
statusMessage.textContent = 'Editing video...'; |
|
|
} else { |
|
|
statusMessage.textContent = 'Rendering final video...'; |
|
|
} |
|
|
} |
|
|
|
|
|
// When complete |
|
|
if(progress >= 100) { |
|
|
clearInterval(interval); |
|
|
statusMessage.textContent = 'Generation complete!'; |
|
|
|
|
|
// Add the new content to the library after a short delay |
|
|
setTimeout(() => { |
|
|
if(type === 'lyrics') { |
|
|
showGeneratedLyrics(requestData); |
|
|
} else { |
|
|
addGeneratedContent(requestData, type); |
|
|
} |
|
|
|
|
|
generationProgress.classList.add('hidden'); |
|
|
progressFill.style.width = '0%'; |
|
|
resolve(); |
|
|
}, 1000); |
|
|
} |
|
|
}, 500); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Show generated lyrics |
|
|
function showGeneratedLyrics(requestData) { |
|
|
// Mock generated lyrics |
|
|
const mockLyrics = `[Verse 1] |
|
|
${requestData.theme || 'Walking through the city lights'} |
|
|
${requestData.theme || 'Memories of you keep me up at night'} |
|
|
${requestData.theme || 'Every corner holds a piece of you'} |
|
|
${requestData.theme || 'Every shadow makes me think it's true'} |
|
|
|
|
|
[Chorus] |
|
|
${requestData.theme || 'I'm lost without you, can't you see'} |
|
|
${requestData.theme || 'You're the only one who completes me'} |
|
|
${requestData.theme || 'Come back home, don't make me plead'} |
|
|
${requestData.theme || 'You're the air that I need to breathe'} |
|
|
|
|
|
[Verse 2] |
|
|
${requestData.theme || 'Empty rooms and silent phones'} |
|
|
${requestData.theme || 'Wondering if you're all alone'} |
|
|
${requestData.theme || 'Time moves slow when you're not here'} |
|
|
${requestData.theme || 'Wish I could make it all disappear'} |
|
|
|
|
|
[Chorus] |
|
|
${requestData.theme || 'I'm lost without you, can't you see'} |
|
|
${requestData.theme || 'You're the only one who completes me'} |
|
|
${requestData.theme || 'Come back home, don't make me plead'} |
|
|
${requestData.theme || 'You're the air that I need to breathe'}`; |
|
|
|
|
|
generatedLyrics.textContent = mockLyrics; |
|
|
generatedLyricsContainer.classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
// Copy lyrics to clipboard |
|
|
function copyLyrics() { |
|
|
navigator.clipboard.writeText(generatedLyrics.textContent) |
|
|
.then(() => { |
|
|
const originalText = copyLyricsBtn.innerHTML; |
|
|
copyLyricsBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; |
|
|
setTimeout(() => { |
|
|
copyLyricsBtn.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}) |
|
|
.catch(err => { |
|
|
console.error('Failed to copy lyrics: ', err); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Use lyrics for song |
|
|
function useLyricsForSong() { |
|
|
songLyrics.value = generatedLyrics.textContent; |
|
|
if(lyricsTitle.value) { |
|
|
songTitle.value = lyricsTitle.value; |
|
|
} |
|
|
|
|
|
// Switch to song tab |
|
|
document.querySelector('[data-tab="song"]').click(); |
|
|
generatedLyricsContainer.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
// Add generated content to library |
|
|
function addGeneratedContent(requestData, type) { |
|
|
// In a real app, this would be the actual API response |
|
|
const newContent = { |
|
|
id: `new-${type}-${Date.now()}`, |
|
|
title: requestData.title || `New ${type.charAt(0).toUpperCase() + type.slice(1)}`, |
|
|
type: type, |
|
|
genre: requestData.prompt ? requestData.prompt.split(',')[0] : 'Various', |
|
|
mood: requestData.prompt ? requestData.prompt.split(',')[1] : 'Various', |
|
|
vocal: type === 'song' ? (requestData.prompt ? requestData.prompt.split(',')[2] : 'Unknown') : 'None', |
|
|
duration: requestData.duration ? `${Math.floor(requestData.duration / 60)}:${(requestData.duration % 60).toString().padStart(2, '0')}` : '2:30', |
|
|
date: new Date().toISOString().split('T')[0], |
|
|
cover: 'https://via.placeholder.com/150', |
|
|
audio: type !== 'video' ? 'https://example.com/new-audio.mp3' : undefined, |
|
|
video: type === 'video' ? 'https://example.com/new-video.mp4' : undefined |
|
|
}; |
|
|
|
|
|
// Add to mock data |
|
|
mockSongs.unshift(newContent); |
|
|
|
|
|
// Reload library |
|
|
const activeFilter = document.querySelector('[data-filter].active').getAttribute('data-filter'); |
|
|
loadLibraryContent(activeFilter); |
|
|
|
|
|
// Update video song select if a new song was added |
|
|
if(type === 'song') { |
|
|
populateVideoSongSelect(); |
|
|
} |
|
|
|
|
|
// Show success message |
|
|
alert(`${type.charAt(0).toUpperCase() + type.slice(1)} generated successfully!`); |
|
|
} |
|
|
|
|
|
// In a real implementation, you would have actual API calls like this: |
|
|
/* |
|
|
async function callMurekaApi(endpoint, data) { |
|
|
try { |
|
|
const response = await fetch(`https://api.mureka.ai/v1/${endpoint}`, { |
|
|
method: 'POST', |
|
|
headers: { |
|
|
'Authorization': `Bearer ${MUREKA_API_KEY}`, |
|
|
'Content-Type': 'application/json' |
|
|
}, |
|
|
body: JSON.stringify(data) |
|
|
}); |
|
|
|
|
|
if(!response.ok) { |
|
|
throw new Error(`API request failed with status ${response.status}`); |
|
|
} |
|
|
|
|
|
return await response.json(); |
|
|
} catch (error) { |
|
|
console.error('Error calling Mureka API:', error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
*/ |
|
|
|
|
|
// Initialize the app |
|
|
initApp(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=FGF897/mureka" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
