前端页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
grid-template-columns: 280px 1fr;
gap: 20px;
padding: 20px;
min-height: 100vh;
}
.voice-library {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
}
.processing-card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.05);
margin-bottom: 20px;
}
.audio-visualizer {
height: 80px;
background: #f4f6fc;
border-radius: 6px;
margin: 10px 0;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<div class="main-container">
<!-- 声音样本库侧边栏 -->
<aside class="voice-library">
<h5>声音样本管理</h5>
<button class="btn btn-sm btn-primary w-100 mb-3">新建声音样本</button>
<div class="sample-list">
<div class="sample-card">
<div class="d-flex justify-content-between">
<span>王老师-语文</span>
<div>
<button class="btn btn-sm btn-outline-secondary">采样</button>
<button class="btn btn-sm btn-danger">×</button>
</div>
</div>
<div class="audio-visualizer"></div>
<small class="text-muted">时长：15s | 创建：2023-10-01</small>
</div>
</div>
</aside>
<!-- 主内容区 -->
<main>
<!-- 文本处理模块 -->
<div class="processing-card">
<h5>教学内容处理</h5>
<div class="row g-3">
<div class="col-9">
<textareaclass="form-control"rows="6"
placeholder="输入或粘贴教学内容（800-2000字）"></textarea>
</div>
<div class="col-3">
<select class="form-select mb-3">
普通话</option>
<option>美式英语</option>
</select>
<div class="mb-3">
<label>语速调节</label>
<input type="range" class="form-range" min="0.5" max="2" step="0.1">
</div>
<button class="btn btn-primary w-100">生成语音讲解</button>
</div>
</div>
</div>
块 -->
<div class="processing-card">
<h5>音视频处理（可选）</h5>
<div class="row g-3">
<div class="col-4">
<input type="file" class="form-control" accept="video/*, audio/*">
</div>
<div class="col-4">
<select class="form-select">
<opti
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label">同步生成字幕</label>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://cdn.bo
浙公网安备 33010602011771号