Spaces:
Running
Running
File size: 14,386 Bytes
4b292f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Prompt 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'music-blue': '#1d4ed8',
'music-indigo': '#4f46e5',
'prompt-purple': '#7e22ce',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400&display=swap');
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
min-height: 100vh;
}
.mono-font {
font-family: 'JetBrains Mono', monospace;
}
.card-gradient {
background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
border: 1px solid rgba(125, 211, 252, 0.1);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.input-field {
background: rgba(30, 41, 59, 0.7);
border: 1px solid rgba(125, 211, 252, 0.2);
transition: all 0.3s ease;
}
.input-field:focus {
border-color: #60a5fa;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.glow-button {
box-shadow: 0 0 15px rgba(79, 70, 229, 0.5);
transition: all 0.3s ease;
}
.glow-button:hover {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
transform: translateY(-2px);
}
.tag-badge {
background: rgba(79, 70, 229, 0.15);
border: 1px solid rgba(99, 102, 241, 0.3);
}
.prompt-box {
background: rgba(15, 23, 42, 0.8);
border: 1px solid rgba(79, 70, 229, 0.3);
}
.divider {
border-color: rgba(99, 102, 241, 0.2);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 0.7; }
50% { opacity: 1; }
100% { opacity: 0.7; }
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body class="text-slate-200">
<div class="container mx-auto px-4 py-8 max-w-5xl">
<!-- Header -->
<header class="text-center mb-12">
<div class="flex justify-center mb-4">
<div class="bg-music-indigo p-3 rounded-full">
<i class="fas fa-music text-3xl text-white"></i>
</div>
</div>
<h1 class="text-4xl font-bold mb-3 bg-gradient-to-r from-blue-400 to-indigo-500 text-transparent bg-clip-text">Music Prompt Generator</h1>
<p class="text-slate-400 max-w-2xl mx-auto">Create detailed music prompts for AI generators using our structured template system</p>
</header>
<!-- Main Content -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Form Section -->
<div class="card-gradient rounded-2xl p-6">
<h2 class="text-2xl font-bold mb-6 text-indigo-300">Create Your Music Prompt</h2>
<form id="promptForm" class="space-y-5">
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Genre Tags</label>
<input type="text" id="genreTags" placeholder="e.g., Lo-fi Hip Hop" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Subgenre Tags</label>
<input type="text" id="subgenreTags" placeholder="e.g., Jazz Hop, Chillhop" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Mood Tags</label>
<input type="text" id="moodTags" placeholder="e.g., melancholic, introspective" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Instrument Tags</label>
<input type="text" id="instrumentTags" placeholder="e.g., muffled boom-bap drum machine, upright bass" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Tempo Tags</label>
<input type="text" id="tempoTags" placeholder="e.g., slow, relaxed, 75 bpm" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Vocal Style Tags</label>
<input type="text" id="vocalTags" placeholder="e.g., instrumental" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Key Signature Tags</label>
<input type="text" id="keyTags" placeholder="e.g., F minor" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div>
<label class="block text-sm font-medium mb-2 text-indigo-200">Time Signature Tags</label>
<input type="text" id="timeTags" placeholder="e.g., 4/4" class="w-full px-4 py-3 rounded-lg input-field">
</div>
<div class="flex space-x-4">
<button type="button" id="generateBtn" class="flex-1 bg-music-indigo hover:bg-indigo-600 text-white font-semibold py-3 rounded-lg glow-button">
Generate Prompt
</button>
<button type="button" id="exampleBtn" class="flex-1 bg-purple-700 hover:bg-purple-800 text-white font-semibold py-3 rounded-lg">
Load Example
</button>
</div>
</form>
</div>
<!-- Output Section -->
<div class="card-gradient rounded-2xl p-6">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-indigo-300">Generated Prompt</h2>
<button id="copyBtn" class="bg-indigo-700 hover:bg-indigo-800 text-white px-4 py-2 rounded-lg text-sm flex items-center">
<i class="fas fa-copy mr-2"></i> Copy Prompt
</button>
</div>
<div class="prompt-box rounded-lg p-5 mb-6">
<div id="promptOutput" class="mono-font text-slate-300 text-sm leading-relaxed">
<p class="text-center text-slate-400 py-8">Your generated music prompt will appear here</p>
</div>
</div>
<div class="bg-slate-800/50 rounded-lg p-5">
<h3 class="font-bold text-indigo-300 mb-3">How to Use</h3>
<ul class="text-sm space-y-2 text-slate-400">
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i>
<span>Fill in the form fields with comma-separated tags</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i>
<span>Click "Generate Prompt" to create your music description</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i>
<span>Use "Load Example" to see a sample prompt</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-indigo-400 mt-1 mr-2"></i>
<span>Copy the prompt to use with AI music generators</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Example Prompt -->
<div class="card-gradient rounded-2xl p-6 mt-8">
<h2 class="text-2xl font-bold mb-4 text-indigo-300">Example Prompt</h2>
<div class="prompt-box rounded-lg p-5">
<p class="mono-font text-sm text-slate-300 leading-relaxed">
Lo-fi Hip Hop, Jazz Hop, Chillhop, melancholic, introspective, rainy, calm, soothing, muffled boom-bap drum machine, upright bass, jazzy piano chords, soft saxophone melody, vinyl crackle, slow, relaxed, 75 bpm, instrumental, F minor, 4/4, Intro, Verse, Chorus, Saxophone Solo, Outro, rainy night, late night drive, Seoul city, nostalgia, lo-fi, warm analog, vinyl emulation, cinematic, atmospheric, instrumental, Korean jazz influence, 2020s, sidechain compression, warm bass, minimal intro, builds slightly with saxophone, fades out with rain sounds
</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('promptForm');
const generateBtn = document.getElementById('generateBtn');
const exampleBtn = document.getElementById('exampleBtn');
const copyBtn = document.getElementById('copyBtn');
const promptOutput = document.getElementById('promptOutput');
// Generate prompt from form
generateBtn.addEventListener('click', function() {
const genreTags = document.getElementById('genreTags').value.trim();
const subgenreTags = document.getElementById('subgenreTags').value.trim();
const moodTags = document.getElementById('moodTags').value.trim();
const instrumentTags = document.getElementById('instrumentTags').value.trim();
const tempoTags = document.getElementById('tempoTags').value.trim();
const vocalTags = document.getElementById('vocalTags').value.trim();
const keyTags = document.getElementById('keyTags').value.trim();
const timeTags = document.getElementById('timeTags').value.trim();
// Create prompt array
const promptArray = [
genreTags,
subgenreTags,
moodTags,
instrumentTags,
tempoTags,
vocalTags,
keyTags,
timeTags
].filter(tag => tag !== '');
// Display the prompt
promptOutput.innerHTML = `<p class="fade-in">${promptArray.join(', ')}</p>`;
});
// Load example data
exampleBtn.addEventListener('click', function() {
document.getElementById('genreTags').value = 'Lo-fi Hip Hop';
document.getElementById('subgenreTags').value = 'Jazz Hop, Chillhop';
document.getElementById('moodTags').value = 'melancholic, introspective, rainy, calm, soothing';
document.getElementById('instrumentTags').value = 'muffled boom-bap drum machine, upright bass, jazzy piano chords, soft saxophone melody, vinyl crackle';
document.getElementById('tempoTags').value = 'slow, relaxed, 75 bpm';
document.getElementById('vocalTags').value = 'instrumental';
document.getElementById('keyTags').value = 'F minor';
document.getElementById('timeTags').value = '4/4';
// Generate the example prompt
generateBtn.click();
});
// Copy prompt to clipboard
copyBtn.addEventListener('click', function() {
const text = promptOutput.innerText;
navigator.clipboard.writeText(text).then(() => {
// Show feedback
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
setTimeout(() => {
copyBtn.innerHTML = originalText;
}, 2000);
});
});
});
</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=Dxtrmst/music-prompt-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |