Spaces:
Sleeping
Sleeping
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>AI 音樂翻唱工具</title> | |
| <style> | |
| body { font-family: sans-serif; background: #f4f4f4; padding: 2rem; text-align: center; } | |
| .container { max-width: 600px; margin: auto; background: #fff; padding: 2rem; border-radius: 12px; box-shadow: 0 0 12px rgba(0,0,0,0.1); } | |
| h1 { color: #444; } | |
| label { display: block; margin-top: 1rem; font-weight: bold; text-align: left; } | |
| input, textarea, select, button { | |
| margin-top: 0.5rem; width: 100%; padding: 0.75rem; border: 1px solid #ccc; border-radius: 6px; | |
| } | |
| button { | |
| background: #4caf50; color: white; font-weight: bold; border: none; cursor: pointer; | |
| } | |
| button:hover { background: #45a049; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🎵 AI 音樂翻唱工具</h1> | |
| <form id="musicForm" enctype="multipart/form-data"> | |
| <label for="music">上傳歌曲（MP3）</label> | |
| <input type="file" id="music" name="music" accept="audio/*" required /> | |
| <label for="vocal">上傳清唱人聲（MP3 或 WAV）</label> | |
| <input type="file" id="vocal" name="vocal" accept="audio/*" required /> | |
| <label for="model">選擇聲音模型</label> | |
| <select name="model" id="model"> | |
| <option value="anime_female">💖 女聲動漫風</option> | |
| <option value="gentle_male">🎙️ 男聲溫柔風</option> | |
| <option value="robot_neutral">🤖 中性機器人聲</option> | |
| </select> | |
| <label for="lyrics">輸入你的歌詞</label> | |
| <textarea id="lyrics" name="lyrics" rows="6" placeholder="請在此輸入你想唱的歌詞"></textarea> | |
| <button type="submit">開始合成</button> | |
| </form> | |
| <div id="status" style="margin-top: 1rem;"></div> | |
| <div id="download" style="margin-top: 1rem;"></div> | |
| </div> | |
| <script> | |
| document.getElementById("musicForm").addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(e.target); | |
| document.getElementById("status").innerText = "🎶 正在處理中，請稍候..."; | |
| document.getElementById("download").innerHTML = ""; | |
| try { | |
| const response = await fetch("/process", { method: "POST", body: formData }); | |
| const result = await response.json(); | |
| if (result.download_url) { | |
| document.getElementById("status").innerText = "✅ 處理完成！"; | |
| document.getElementById("download").innerHTML = | |
| '<a href="' + result.download_url + '" download>⬇️ 點此下載 AI 翻唱歌曲</a>'; | |
| } else { | |
| throw new Error("沒有接收到檔案連結"); | |
| } | |
| } catch (err) { | |
| document.getElementById("status").innerText = "❌ 發生錯誤，請稍後再試。"; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |