'commit'
This commit is contained in:
@@ -134,7 +134,7 @@
|
||||
<option value="安静学习">安静学习</option>
|
||||
<option value="欢快活泼">欢快活泼</option>
|
||||
<option value="庄重严肃">庄重严肃</option>
|
||||
<option value="温馨感人">温馨感人</option>
|
||||
<option value="温馨感动">温馨感动</option>
|
||||
</select>
|
||||
<div class="form-helper">示例：「夏日海边」「深夜治愈」「热血励志」</div>
|
||||
</div>
|
||||
@@ -199,6 +199,7 @@
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary"><i class="fas fa-magic"></i> 生成音乐提示词</button>
|
||||
<button type="button" id="randomSampleBtn" class="btn btn-info"><i class="fas fa-random"></i> 随机示例</button>
|
||||
<button type="button" id="resetForm" class="btn btn-secondary"><i class="fas fa-undo"></i> 重置</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -220,93 +221,195 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 表单提交事件
|
||||
const form = document.getElementById('musicPromptForm');
|
||||
const resultContainer = document.getElementById('resultContainer');
|
||||
const resultContent = document.getElementById('resultContent');
|
||||
const resetFormBtn = document.getElementById('resetForm');
|
||||
const copyResultBtn = document.getElementById('copyResult');
|
||||
const generateMusicBtn = document.getElementById('generateMusic');
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 获取表单数据
|
||||
const style = document.getElementById('style').value;
|
||||
const mood = document.getElementById('mood').value;
|
||||
const vocal = document.getElementById('vocal').value;
|
||||
const tempo = document.getElementById('tempo').value;
|
||||
const instruments = document.getElementById('instruments').value;
|
||||
const theme = document.getElementById('theme').value;
|
||||
const teachingSubject = document.getElementById('teachingSubject').value;
|
||||
|
||||
// 生成提示词
|
||||
let prompt = `${style} ${mood}，${vocal}，${tempo}，配${instruments}，主题围绕'${theme}'`;
|
||||
if (teachingSubject) {
|
||||
prompt += `，适合${teachingSubject}教学使用`;
|
||||
}
|
||||
prompt += `，时长 2 分钟。`;
|
||||
|
||||
// 显示结果
|
||||
resultContent.textContent = prompt;
|
||||
resultContainer.style.display = 'block';
|
||||
|
||||
// 滚动到结果区域
|
||||
resultContainer.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
// 重置表单
|
||||
resetFormBtn.addEventListener('click', function() {
|
||||
form.reset();
|
||||
resultContainer.style.display = 'none';
|
||||
});
|
||||
|
||||
// 复制结果
|
||||
copyResultBtn.addEventListener('click', function() {
|
||||
const textToCopy = resultContent.textContent;
|
||||
navigator.clipboard.writeText(textToCopy).then(function() {
|
||||
// 显示复制成功提示
|
||||
const originalText = copyResultBtn.innerHTML;
|
||||
copyResultBtn.innerHTML = '<i class="fas fa-check"></i> 已复制';
|
||||
setTimeout(function() {
|
||||
copyResultBtn.innerHTML = originalText;
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
// 生成音乐
|
||||
generateMusicBtn.addEventListener('click', function() {
|
||||
alert('音乐生成功能已触发，正在处理您的请求...');
|
||||
// 这里可以添加实际的音乐生成逻辑
|
||||
});
|
||||
|
||||
// 添加页面加载动画
|
||||
const featureCards = document.querySelectorAll('.feature-card');
|
||||
|
||||
function checkElements() {
|
||||
const triggerBottom = window.innerHeight * 0.8;
|
||||
|
||||
featureCards.forEach(card => {
|
||||
const cardTop = card.getBoundingClientRect().top;
|
||||
if (cardTop < triggerBottom) {
|
||||
card.style.opacity = '1';
|
||||
card.style.transform = 'translateY(0)';
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 音乐示例数据
|
||||
const musicSamples = [
|
||||
{
|
||||
style: "华语流行",
|
||||
mood: "欢快活泼",
|
||||
vocal: "甜美女声",
|
||||
tempo: "4/4 拍 120 BPM",
|
||||
instruments: "吉他+贝斯+鼓",
|
||||
theme: "快乐学习",
|
||||
teachingSubject: "英语"
|
||||
},
|
||||
{
|
||||
style: "古风",
|
||||
mood: "国风江湖",
|
||||
vocal: "清澈男声",
|
||||
tempo: "4/4 拍 80 BPM",
|
||||
instruments: "笛子+古筝",
|
||||
theme: "诗词歌赋",
|
||||
teachingSubject: "语文"
|
||||
},
|
||||
{
|
||||
style: "Classical",
|
||||
mood: "安静学习",
|
||||
vocal: "钢琴弦乐",
|
||||
tempo: "3/4 拍 90 BPM",
|
||||
instruments: "钢琴弦乐",
|
||||
theme: "数学的旋律",
|
||||
teachingSubject: "数学"
|
||||
},
|
||||
{
|
||||
style: "民谣",
|
||||
mood: "温馨感动",
|
||||
vocal: "温柔女声",
|
||||
tempo: "4/4 拍 100 BPM",
|
||||
instruments: "木吉他主奏",
|
||||
theme: "自然科学的奥秘",
|
||||
teachingSubject: "科学"
|
||||
},
|
||||
{
|
||||
style: "City Pop",
|
||||
mood: "夏日海边",
|
||||
vocal: "中性嗓音",
|
||||
tempo: "4/4 拍 120 BPM",
|
||||
instruments: "电子合成器",
|
||||
theme: "阳光沙滩海浪",
|
||||
teachingSubject: "地理"
|
||||
},
|
||||
{
|
||||
style: "电子 R&B",
|
||||
mood: "深夜治愈",
|
||||
vocal: "低沉男声",
|
||||
tempo: "6/8 拍 85 BPM 慢摇",
|
||||
instruments: "808 鼓点+萨克斯",
|
||||
theme: "历史的回声",
|
||||
teachingSubject: "历史"
|
||||
},
|
||||
{
|
||||
style: "摇滚",
|
||||
mood: "热血励志",
|
||||
vocal: "高亢女声",
|
||||
tempo: "4/4 拍 140 BPM",
|
||||
instruments: "吉他+贝斯+鼓",
|
||||
theme: "运动精神",
|
||||
teachingSubject: "体育"
|
||||
},
|
||||
{
|
||||
style: "爵士",
|
||||
mood: "庄重严肃",
|
||||
vocal: "沙哑烟嗓",
|
||||
tempo: "4/4 拍 100 BPM",
|
||||
instruments: "钢琴弦乐",
|
||||
theme: "艺术欣赏",
|
||||
teachingSubject: "美术"
|
||||
}
|
||||
];
|
||||
|
||||
// 获取DOM元素
|
||||
const form = document.getElementById('musicPromptForm');
|
||||
const resultContainer = document.getElementById('resultContainer');
|
||||
const resultContent = document.getElementById('resultContent');
|
||||
const resetFormBtn = document.getElementById('resetForm');
|
||||
const copyResultBtn = document.getElementById('copyResult');
|
||||
const generateMusicBtn = document.getElementById('generateMusic');
|
||||
const randomSampleBtn = document.getElementById('randomSampleBtn');
|
||||
|
||||
// 随机示例按钮点击事件
|
||||
randomSampleBtn.addEventListener('click', function() {
|
||||
// 随机选择一个示例
|
||||
const randomIndex = Math.floor(Math.random() * musicSamples.length);
|
||||
const sample = musicSamples[randomIndex];
|
||||
|
||||
// 填充表单
|
||||
document.getElementById('style').value = sample.style;
|
||||
document.getElementById('mood').value = sample.mood;
|
||||
document.getElementById('vocal').value = sample.vocal;
|
||||
document.getElementById('tempo').value = sample.tempo;
|
||||
document.getElementById('instruments').value = sample.instruments;
|
||||
document.getElementById('theme').value = sample.theme;
|
||||
document.getElementById('teachingSubject').value = sample.teachingSubject;
|
||||
|
||||
// 隐藏结果区域
|
||||
resultContainer.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// 表单提交事件
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// 获取表单数据
|
||||
const style = document.getElementById('style').value;
|
||||
const mood = document.getElementById('mood').value;
|
||||
const vocal = document.getElementById('vocal').value;
|
||||
const tempo = document.getElementById('tempo').value;
|
||||
const instruments = document.getElementById('instruments').value;
|
||||
const theme = document.getElementById('theme').value;
|
||||
const teachingSubject = document.getElementById('teachingSubject').value;
|
||||
|
||||
// 生成提示词
|
||||
let prompt = `${style} ${mood}，${vocal}，${tempo}，配${instruments}，主题围绕'${theme}'`;
|
||||
if (teachingSubject) {
|
||||
prompt += `，适合${teachingSubject}教学使用`;
|
||||
}
|
||||
prompt += `，时长 2 分钟。`;
|
||||
|
||||
// 显示结果
|
||||
resultContent.textContent = prompt;
|
||||
resultContainer.style.display = 'block';
|
||||
});
|
||||
|
||||
// 重置表单按钮点击事件
|
||||
resetFormBtn.addEventListener('click', function() {
|
||||
form.reset();
|
||||
resultContainer.style.display = 'none';
|
||||
});
|
||||
|
||||
// 复制结果按钮点击事件
|
||||
copyResultBtn.addEventListener('click', function() {
|
||||
const textToCopy = resultContent.textContent;
|
||||
navigator.clipboard.writeText(textToCopy).then(function() {
|
||||
alert('提示词已复制到剪贴板！');
|
||||
}).catch(function(err) {
|
||||
alert('复制失败: ' + err);
|
||||
});
|
||||
});
|
||||
|
||||
// 生成音乐按钮点击事件
|
||||
generateMusicBtn.addEventListener('click', function() {
|
||||
const prompt = resultContent.textContent;
|
||||
if (!prompt) {
|
||||
alert('请先生成音乐提示词');
|
||||
return;
|
||||
}
|
||||
|
||||
// 初始化样式
|
||||
featureCards.forEach(card => {
|
||||
card.style.opacity = '0';
|
||||
card.style.transform = 'translateY(20px)';
|
||||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease, delay 0.1s';
|
||||
// 显示加载状态
|
||||
generateMusicBtn.disabled = true;
|
||||
generateMusicBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 提交中...';
|
||||
|
||||
// 调用后端API生成音乐任务
|
||||
fetch('/api/suno/prompt_input', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
prompt: prompt,
|
||||
is_instrumental: false // 默认为带 vocals 的音乐
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
generateMusicBtn.disabled = false;
|
||||
generateMusicBtn.innerHTML = '<i class="fas fa-play"></i> 生成音乐';
|
||||
|
||||
if (data.task_id) {
|
||||
// 跳转到进度页面
|
||||
window.location.href = `/static/Suno/music_progress.html?task_id=${data.task_id}`;
|
||||
} else {
|
||||
alert('生成音乐任务失败: ' + (data.error || '未知错误'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
generateMusicBtn.disabled = false;
|
||||
generateMusicBtn.innerHTML = '<i class="fas fa-play"></i> 生成音乐';
|
||||
alert('请求失败: ' + error.message);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 检查可见性
|
||||
checkElements();
|
||||
window.addEventListener('scroll', checkElements);
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user