huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-08-21 13:19:41 +08:00
parent bf105e4f6a
commit a1631ce070
3 changed files with 330 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
dsLightRag/static/Suno/prompt_input.html Normal file
View File

@@ -0,0 +1,312 @@
<!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-actions">
<button type="submit" class="btn btn-primary"><i class="fas fa-magic"></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() {
// 表单提交事件
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)';
}
});
}
// 初始化样式
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';
});
// 检查可见性
checkElements();
window.addEventListener('scroll', checkElements);
});
</script>
</body>
</html>