Delete index.html
Browse files- index.html +0 -111
index.html
DELETED
|
@@ -1,111 +0,0 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="en">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>AI Music Generator</title>
|
| 7 |
-
<style>
|
| 8 |
-
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #121212; color: white; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
|
| 9 |
-
.card { background: #1e1e1e; padding: 30px; border-radius: 15px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); width: 100%; max-width: 450px; text-align: center; border: 1px solid #333; }
|
| 10 |
-
h2 { color: #bb86fc; margin-top: 0; }
|
| 11 |
-
|
| 12 |
-
input[type="text"] { width: 100%; padding: 12px; margin-top: 10px; background: #2d2d2d; border: 1px solid #444; color: white; border-radius: 8px; box-sizing: border-box; }
|
| 13 |
-
|
| 14 |
-
.controls { display: flex; gap: 10px; margin-top: 10px; }
|
| 15 |
-
select { flex: 1; padding: 12px; background: #2d2d2d; border: 1px solid #444; color: white; border-radius: 8px; }
|
| 16 |
-
|
| 17 |
-
button { width: 100%; padding: 15px; margin-top: 20px; background: linear-gradient(45deg, #bb86fc, #3700b3); color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 16px; transition: 0.3s; }
|
| 18 |
-
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
| 19 |
-
|
| 20 |
-
#status { margin-top: 20px; font-size: 14px; min-height: 20px; color: #aaa; }
|
| 21 |
-
audio { width: 100%; margin-top: 20px; display: none; }
|
| 22 |
-
|
| 23 |
-
.loader { display: none; margin: 20px auto; border: 4px solid #f3f3f3; border-top: 4px solid #bb86fc; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; }
|
| 24 |
-
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
| 25 |
-
</style>
|
| 26 |
-
</head>
|
| 27 |
-
<body>
|
| 28 |
-
|
| 29 |
-
<div class="card">
|
| 30 |
-
<h2>🎵 AI Music Gen</h2>
|
| 31 |
-
|
| 32 |
-
<!-- Hidden Settings -->
|
| 33 |
-
<input type="hidden" id="apiUrl" value="https://akwbw-tts.hf.space">
|
| 34 |
-
<input type="hidden" id="apiKey" value="MySecretPassword123">
|
| 35 |
-
|
| 36 |
-
<label style="float:left; font-size:12px; color:#aaa;">Music Description:</label>
|
| 37 |
-
<input type="text" id="prompt" placeholder="e.g. Sad piano in rain, Lo-fi beat, Flute melody">
|
| 38 |
-
|
| 39 |
-
<div class="controls">
|
| 40 |
-
<select id="duration">
|
| 41 |
-
<option value="5">⏱️ 5 Seconds (Fast)</option>
|
| 42 |
-
<option value="10">⏱️ 10 Seconds (Slow)</option>
|
| 43 |
-
</select>
|
| 44 |
-
</div>
|
| 45 |
-
|
| 46 |
-
<button id="btn" onclick="generateMusic()">🎹 Generate Music</button>
|
| 47 |
-
|
| 48 |
-
<div class="loader" id="loader"></div>
|
| 49 |
-
<div id="status">Ready to create magic...</div>
|
| 50 |
-
<audio id="player" controls></audio>
|
| 51 |
-
</div>
|
| 52 |
-
|
| 53 |
-
<script>
|
| 54 |
-
async function generateMusic() {
|
| 55 |
-
const btn = document.getElementById('btn');
|
| 56 |
-
const status = document.getElementById('status');
|
| 57 |
-
const loader = document.getElementById('loader');
|
| 58 |
-
const player = document.getElementById('player');
|
| 59 |
-
|
| 60 |
-
// Settings
|
| 61 |
-
let apiUrl = document.getElementById('apiUrl').value.replace(/\/$/, "");
|
| 62 |
-
const apiKey = document.getElementById('apiKey').value;
|
| 63 |
-
const prompt = document.getElementById('prompt').value;
|
| 64 |
-
const duration = document.getElementById('duration').value;
|
| 65 |
-
|
| 66 |
-
if(!prompt) { alert("Please describe the music first!"); return; }
|
| 67 |
-
|
| 68 |
-
// UI Updates
|
| 69 |
-
btn.disabled = true;
|
| 70 |
-
btn.innerText = "Generating (Wait 1-2 mins)...";
|
| 71 |
-
status.innerText = "🚀 Sending request to AI...";
|
| 72 |
-
status.style.color = "#bb86fc";
|
| 73 |
-
loader.style.display = "block";
|
| 74 |
-
player.style.display = "none";
|
| 75 |
-
|
| 76 |
-
try {
|
| 77 |
-
// API Call
|
| 78 |
-
const response = await fetch(`${apiUrl}/generate?prompt=${encodeURIComponent(prompt)}&duration=${duration}`, {
|
| 79 |
-
method: 'POST',
|
| 80 |
-
headers: { 'x-api-key': apiKey }
|
| 81 |
-
});
|
| 82 |
-
|
| 83 |
-
if (!response.ok) {
|
| 84 |
-
const err = await response.json();
|
| 85 |
-
throw new Error(err.detail || "Server Error");
|
| 86 |
-
}
|
| 87 |
-
|
| 88 |
-
// Play Audio
|
| 89 |
-
const blob = await response.blob();
|
| 90 |
-
const url = URL.createObjectURL(blob);
|
| 91 |
-
|
| 92 |
-
player.src = url;
|
| 93 |
-
player.style.display = "block";
|
| 94 |
-
player.play();
|
| 95 |
-
|
| 96 |
-
status.innerText = "✨ Music Generated Successfully!";
|
| 97 |
-
status.style.color = "#03dac6";
|
| 98 |
-
|
| 99 |
-
} catch (e) {
|
| 100 |
-
status.innerText = "❌ Error: " + e.message;
|
| 101 |
-
status.style.color = "#cf6679";
|
| 102 |
-
} finally {
|
| 103 |
-
btn.disabled = false;
|
| 104 |
-
btn.innerText = "🎹 Generate Music";
|
| 105 |
-
loader.style.display = "none";
|
| 106 |
-
}
|
| 107 |
-
}
|
| 108 |
-
</script>
|
| 109 |
-
|
| 110 |
-
</body>
|
| 111 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|