461 lines
26 KiB
HTML
461 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>教学音乐AI生成助手</title>
|
||
<style>
|
||
* {
|
||
margin: 0; padding: 0; box-sizing: border-box;
|
||
font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
body { background-color: #f5f7fa; color: #333; line-height: 1.6; }
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 20px; }
|
||
header { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #3498db, #8e44ad); color: white; border-radius: 10px; margin-bottom: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
|
||
h1 { font-size: 2.5rem; margin-bottom: 15px; font-weight: 700; }
|
||
.subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 800px; margin: 0 auto; }
|
||
|
||
/* 导航栏样式 */
|
||
.navbar { background-color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 6px; margin-bottom: 30px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
|
||
.navbar-brand { font-size: 1.5rem; font-weight: bold; color: #3498db; text-decoration: none; }
|
||
.navbar-links { display: flex; gap: 20px; }
|
||
.navbar-link { color: #333; text-decoration: none; padding: 8px 15px; border-radius: 6px; transition: background 0.3s; }
|
||
.navbar-link:hover { background-color: #f5f7fa; }
|
||
.navbar-link.active { background-color: #e8f4fd; color: #3498db; font-weight: 500; }
|
||
|
||
/* 表单样式 */
|
||
.form-container { background-color: white; border-radius: 10px; padding: 30px; margin-bottom: 40px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); }
|
||
.form-title { font-size: 1.8rem; margin-bottom: 20px; color: #2c3e50; text-align: center; }
|
||
.form-group { margin-bottom: 25px; }
|
||
.form-label { display: block; margin-bottom: 10px; font-weight: 500; color: #2c3e50; }
|
||
.form-input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; transition: border 0.3s; }
|
||
.form-input:focus { border-color: #3498db; outline: none; }
|
||
.form-select { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; background-color: white; transition: border 0.3s; }
|
||
.form-select:focus { border-color: #3498db; outline: none; }
|
||
.form-helper { font-size: 14px; color: #7f8c8d; margin-top: 5px; }
|
||
.btn { padding: 12px 25px; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.3s; text-decoration: none; display: inline-block; }
|
||
.btn-primary { background-color: #3498db; color: white; }
|
||
.btn-primary:hover { background-color: #2980b9; }
|
||
.btn-secondary { background-color: #95a5a6; color: white; margin-left: 10px; }
|
||
.btn-secondary:hover { background-color: #7f8c8d; }
|
||
.form-actions { text-align: center; margin-top: 30px; }
|
||
|
||
/* 结果展示区域 */
|
||
.result-container { background-color: white; border-radius: 10px; padding: 30px; margin-bottom: 40px; box-shadow: 0 2px 15px rgba(0,0,0,0.05); display: none; }
|
||
.result-title { font-size: 1.8rem; margin-bottom: 20px; color: #2c3e50; text-align: center; }
|
||
.result-content { background-color: #f8f9fa; padding: 20px; border-radius: 6px; border: 1px solid #eee; font-size: 16px; line-height: 1.6; min-height: 100px; word-break: break-all; }
|
||
.result-actions { text-align: center; margin-top: 20px; }
|
||
|
||
/* 功能特点区域 */
|
||
.features { display: flex; flex-wrap: wrap; justify-content: space-around; margin: 60px 0; }
|
||
.feature-card { background-color: white; border-radius: 10px; padding: 25px; margin: 15px; width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s; }
|
||
.feature-card:hover { transform: translateY(-5px); }
|
||
.feature-icon { font-size: 2.5rem; margin-bottom: 15px; color: #8e44ad; }
|
||
.feature-title { font-size: 1.2rem; margin-bottom: 10px; color: #2c3e50; }
|
||
.feature-description { color: #666; }
|
||
|
||
footer { text-align: center; padding: 30px 0; margin-top: 60px; color: #7f8c8d; border-top: 1px solid #eee; }
|
||
|
||
@media screen and (max-width: 768px) {
|
||
h1 { font-size: 2rem; }
|
||
.navbar { flex-direction: column; gap: 15px; }
|
||
.navbar-links { width: 100%; justify-content: center; }
|
||
.feature-card { width: 100%; max-width: 300px; }
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="../layui/css/layui.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1>教学音乐AI生成助手</h1>
|
||
<p class="subtitle">轻松创建专业级教学音乐，从提示词到完整音频，一站式AI生成解决方案</p>
|
||
</header>
|
||
|
||
<!-- 添加导航栏 -->
|
||
<nav class="navbar">
|
||
<a href="index.html" class="navbar-brand">教学音乐AI</a>
|
||
<div class="navbar-links">
|
||
<a href="index.html" class="navbar-link">首页</a>
|
||
<a href="prompt_input.html" class="navbar-link active">音乐创作</a>
|
||
<a href="cases.html" class="navbar-link"><i class="fas fa-star"></i> 推荐案例</a>
|
||
<a href="history.html" class="navbar-link"><i class="fas fa-history"></i> 历史记录</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 功能特点 -->
|
||
<div class="features">
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fas fa-music"></i></div>
|
||
<h3 class="feature-title">智能音乐提示词</h3>
|
||
<p class="feature-description">通过结构化模板，帮助您创建精准、专业的音乐生成提示词</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fas fa-sliders-h"></i></div>
|
||
<h3 class="feature-title">多维度控制</h3>
|
||
<p class="feature-description">从风格、情绪、节拍到乐器，全方位控制音乐生成效果</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon"><i class="fas fa-magic"></i></div>
|
||
<h3 class="feature-title">AI智能生成</h3>
|
||
<p class="feature-description">基于提示词生成高质量、符合教学场景的音乐内容</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示词生成表单 -->
|
||
<div class="form-container">
|
||
<h2 class="form-title"><i class="fas fa-magic"></i> 音乐提示词生成器</h2>
|
||
<form id="musicPromptForm">
|
||
<div class="form-group">
|
||
<label for="style" class="form-label">1. 音乐风格与时代</label>
|
||
<!-- 修复音乐风格下拉菜单中的空格问题 -->
|
||
<select id="style" class="form-select" required>
|
||
<option value="">请选择音乐风格</option>
|
||
<option value="华语流行">华语流行</option>
|
||
<option value="City Pop">City Pop</option>
|
||
<option value="古风">古风</option>
|
||
<option value="民谣">民谣</option>
|
||
<option value="电子 R&B">电子 R&B</option>
|
||
<option value="Classical">古典</option> <!-- 移除前置空格 -->
|
||
<option value="爵士">爵士</option>
|
||
<option value="摇滚">摇滚</option>
|
||
</select>
|
||
<div class="form-helper">示例：「华语流行」「City Pop」「古风」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="mood" class="form-label">2. 情绪与场景</label>
|
||
<select id="mood" class="form-select" required>
|
||
<option value="">请选择情绪与场景</option>
|
||
<option value="夏日海边">夏日海边</option>
|
||
<option value="深夜治愈">深夜治愈</option>
|
||
<option value="热血沥水">热血沥水</option>
|
||
<option value="国风江湖">国风江湖</option>
|
||
<option value="安静学习">安静学习</option>
|
||
<option value="欢快活泼">欢快活泼</option>
|
||
<option value="庄重严肃">庄重严肃</option>
|
||
<option value="温馨感动">温馨感动</option>
|
||
</select>
|
||
<div class="form-helper">示例：「夏日海边」「深夜治愈」「热血沥水」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="vocal" class="form-label">3. 主唱性别与音色</label>
|
||
<select id="vocal" class="form-select" required>
|
||
<option value="">请选择主唱风格</option>
|
||
<option value="清澈男声">清澈男声</option>
|
||
<option value="温柔女声">温柔女声</option>
|
||
<option value="童声合唱">童声合唱</option>
|
||
<option value="沙哑烟嗓">沙哑烟嗓</option>
|
||
<option value="甜美女声">甜美女声</option>
|
||
<option value="低沉男声">低沉男声</option>
|
||
<option value="高亢女声">高亢女声</option>
|
||
<option value="中性嗓音">中性嗓音</option>
|
||
</select>
|
||
<div class="form-helper">示例：「清澈男声」「温柔女声」「童声合唱」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="tempo" class="form-label">4. 节拍与速度</label>
|
||
<select id="tempo" class="form-select" required>
|
||
<option value="">请选择节拍与速度</option>
|
||
<option value="4/4 拍 100 BPM">4/4 拍 100 BPM</option>
|
||
<option value="6/8 拍 85 BPM 慢摇">6/8 拍 85 BPM 慢摇</option>
|
||
<option value="4/4 拍 120 BPM">4/4 拍 120 BPM</option>
|
||
<option value="3/4 拍 90 BPM">3/4 拍 90 BPM</option>
|
||
<option value="4/4 拍 80 BPM">4/4 拍 80 BPM</option>
|
||
<option value="4/4 拍 140 BPM">4/4 拍 140 BPM</option>
|
||
</select>
|
||
<div class="form-helper">示例：「4/4 拍 100 BPM」「6/8 拍 85 BPM 慢摇」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="instruments" class="form-label">5. 乐器与编曲亮点</label>
|
||
<select id="instruments" class="form-select" required>
|
||
<option value="">请选择乐器配置</option>
|
||
<option value="木吉他主奏">木吉他主奏</option>
|
||
<option value="钢琴弦乐">钢琴弦乐</option>
|
||
<option value="古筝+电子鼓">古筝+电子鼓</option>
|
||
<option value="808 鼓点+萨克斯">808 鼓点+萨克斯</option>
|
||
<option value="小提琴+钢琴">小提琴+钢琴</option>
|
||
<option value="吉他+贝斯+鼓">吉他+贝斯+鼓</option>
|
||
<option value="电子合成器">电子合成器</option>
|
||
<option value="笛子+古筝">笛子+古筝</option>
|
||
</select>
|
||
<div class="form-helper">示例：「木吉他主奏」「钢琴弦乐」「古筝+电子鼓」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="theme" class="form-label">6. 主题/歌词关键词</label>
|
||
<input type="text" id="theme" class="form-input" placeholder="请输入主题关键词" required>
|
||
<div class="form-helper">示例：「把星星装进信封」「江湖路远，少年不老」「知识就是力量」</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="teachingSubject" class="form-label">7. 教学科目（可选）</label>
|
||
<input type="text" id="teachingSubject" class="form-input" placeholder="例如：数学、语文、英语等">
|
||
<div class="form-helper">添加教学科目可以让音乐更贴合特定学科的学习氛围</div>
|
||
</div>
|
||
|
||
<!-- 添加音乐时长输入字段 -->
|
||
<div class="form-group">
|
||
<label for="duration" class="form-label">8. 音乐时长（分钟）</label>
|
||
<input type="number" id="duration" class="form-input" min="0.5" max="10" step="0.5" value="2" required>
|
||
<div class="form-helper">请输入0.5-10分钟之间的时长，步长0.5分钟</div>
|
||
</div>
|
||
|
||
<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>
|
||
</div>
|
||
|
||
<!-- 结果展示区域 -->
|
||
<div id="resultContainer" class="result-container">
|
||
<h2 class="result-title"><i class="fas fa-music"></i> 生成的音乐提示词</h2>
|
||
<div id="resultContent" class="result-content"></div>
|
||
<div class="result-actions">
|
||
<button id="copyResult" class="btn btn-primary"><i class="fas fa-copy"></i> 复制提示词</button>
|
||
<button id="generateMusic" class="btn btn-secondary"><i class="fas fa-play"></i> 生成音乐</button>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2023 教学音乐AI生成助手 | 让教育内容创作更简单</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 音乐示例数据
|
||
// 修复musicSamples数组中的vocal属性值
|
||
const musicSamples = [
|
||
{
|
||
style: "华语流行",
|
||
mood: "欢快活泼",
|
||
vocal: "甜美女声",
|
||
tempo: "4/4 拍 120 BPM",
|
||
instruments: "吉他+贝斯+鼓",
|
||
theme: "快乐学习",
|
||
teachingSubject: "英语",
|
||
duration: 1 // 添加时长字段
|
||
},
|
||
{
|
||
style: "古风",
|
||
mood: "国风江湖",
|
||
vocal: "清澈男声",
|
||
tempo: "4/4 拍 80 BPM",
|
||
instruments: "笛子+古筝",
|
||
theme: "诗词歌赋",
|
||
teachingSubject: "语文",
|
||
duration: 1 // 添加时长字段
|
||
},
|
||
{
|
||
style: "Classical",
|
||
mood: "安静学习",
|
||
vocal: "清澈男声", // 将"钢琴弦乐"改为下拉菜单中存在的值
|
||
tempo: "3/4 拍 90 BPM",
|
||
instruments: "钢琴弦乐",
|
||
theme: "数学的旋律",
|
||
teachingSubject: "数学",
|
||
duration: 1 // 添加时长字段
|
||
},
|
||
{
|
||
style: "民谣",
|
||
mood: "温馨感动",
|
||
vocal: "温柔女声",
|
||
tempo: "4/4 拍 100 BPM",
|
||
instruments: "木吉他主奏",
|
||
theme: "自然科学的奥秘",
|
||
teachingSubject: "科学", // 保留一个teachingSubject属性
|
||
duration: 1
|
||
},
|
||
{
|
||
style: "City Pop",
|
||
mood: "夏日海边",
|
||
vocal: "中性嗓音",
|
||
tempo: "4/4 拍 120 BPM",
|
||
instruments: "电子合成器",
|
||
theme: "阳光沙滩海浪",
|
||
teachingSubject: "地理", // 保留一个teachingSubject属性
|
||
duration: 1
|
||
},
|
||
{
|
||
style: "电子 R&B",
|
||
mood: "深夜治愈",
|
||
vocal: "低沉男声",
|
||
tempo: "6/8 拍 85 BPM 慢摇",
|
||
instruments: "808 鼓点+萨克斯",
|
||
theme: "历史的回声",
|
||
teachingSubject: "历史", // 保留一个teachingSubject属性
|
||
duration: 1
|
||
},
|
||
{
|
||
style: "摇滚",
|
||
mood: "热血沥水",
|
||
vocal: "高亢女声",
|
||
tempo: "4/4 拍 140 BPM",
|
||
instruments: "吉他+贝斯+鼓",
|
||
theme: "运动精神",
|
||
teachingSubject: "体育", // 保留一个teachingSubject属性
|
||
duration: 1
|
||
},
|
||
{
|
||
style: "爵士",
|
||
mood: "庄重严肃",
|
||
vocal: "沙哑烟嗓",
|
||
tempo: "4/4 拍 100 BPM",
|
||
instruments: "钢琴弦乐",
|
||
theme: "艺术欣赏",
|
||
teachingSubject: "美术", // 保留一个teachingSubject属性
|
||
duration: 1
|
||
}
|
||
];
|
||
|
||
// 获取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;
|
||
document.getElementById('duration').value = sample.duration; // 填充时长
|
||
|
||
// 隐藏结果区域
|
||
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;
|
||
const duration = document.getElementById('duration').value; // 获取时长
|
||
|
||
// 生成提示词
|
||
let prompt = `${style} ${mood}，${vocal}，${tempo}，配${instruments}，主题围绕'${theme}'`;
|
||
if (teachingSubject) {
|
||
prompt += `，适合${teachingSubject}教学使用`;
|
||
}
|
||
prompt += `，时长${duration}分钟。`; // 添加时长到提示词
|
||
|
||
// 显示结果
|
||
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;
|
||
|
||
// 优先使用clipboard API
|
||
if (navigator.clipboard) {
|
||
navigator.clipboard.writeText(textToCopy).then(function() {
|
||
alert('提示词已复制到剪贴板！');
|
||
}).catch(function(err) {
|
||
// 失败时使用备用方法
|
||
fallbackCopyText(textToCopy);
|
||
});
|
||
} else {
|
||
// 不支持clipboard API时直接使用备用方法
|
||
fallbackCopyText(textToCopy);
|
||
}
|
||
|
||
// 备用复制方法
|
||
function fallbackCopyText(text) {
|
||
const textArea = document.createElement('textarea');
|
||
textArea.value = text;
|
||
textArea.style.position = 'fixed'; // 避免滚动到视图外
|
||
document.body.appendChild(textArea);
|
||
textArea.select();
|
||
|
||
try {
|
||
const successful = document.execCommand('copy');
|
||
const msg = successful ? '提示词已复制到剪贴板！' : '复制失败，请手动复制';
|
||
alert(msg);
|
||
} catch (err) {
|
||
alert('复制失败: ' + err);
|
||
}
|
||
|
||
document.body.removeChild(textArea);
|
||
}
|
||
});
|
||
|
||
// 生成音乐按钮点击事件
|
||
generateMusicBtn.addEventListener('click', function() {
|
||
const prompt = resultContent.textContent;
|
||
if (!prompt) {
|
||
alert('请先生成音乐提示词');
|
||
return;
|
||
}
|
||
|
||
// 显示加载状态
|
||
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.data && data.data.task_id) {
|
||
// 跳转到进度页面
|
||
window.location.href = `/static/Suno/music_progress.html?task_id=${data.data.task_id}`;
|
||
} else {
|
||
alert('生成音乐任务失败: ' + (data.error || data.message || '未知错误'));
|
||
}
|
||
})
|
||
.catch(error => {
|
||
generateMusicBtn.disabled = false;
|
||
generateMusicBtn.innerHTML = '<i class="fas fa-play"></i> 生成音乐';
|
||
alert('请求失败: ' + error.message);
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</script>
|
||
</body>
|
||
</html> |