187 lines
8.7 KiB
HTML
187 lines
8.7 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}我的专属声音 - 儿童语言学习系统{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container py-4">
|
||
<!-- 页面标题 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="d-flex align-items-center">
|
||
<a href="{{ url_for('main.dashboard') }}" class="btn btn-outline-secondary me-3">
|
||
<i class="fas fa-arrow-left me-2"></i>返回主页
|
||
</a>
|
||
<div>
|
||
<h2 class="fw-bold mb-1 text-kid-primary">
|
||
🎤 我的专属声音
|
||
</h2>
|
||
<p class="text-muted mb-0">让AI学会你的声音，创造专属于你的语音助手</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态卡片 -->
|
||
<div class="row mb-4">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm" id="status-card">
|
||
<div class="card-body p-4">
|
||
<div id="voice-status-content">
|
||
<!-- 动态加载状态内容 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 录制区域 -->
|
||
<div class="row mb-4">
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm kid-feature-card">
|
||
<div class="card-body p-4">
|
||
<h5 class="fw-bold text-kid-accent mb-3">
|
||
<i class="fas fa-microphone me-2"></i>录制你的声音
|
||
</h5>
|
||
|
||
<form id="voice-upload-form" enctype="multipart/form-data">
|
||
<div class="mb-3">
|
||
<label class="form-label">选择音频文件：</label>
|
||
<input type="file" class="form-control" id="voice-file"
|
||
accept=".wav,.mp3,.m4a" style="border-radius: 15px;">
|
||
<div class="form-text">建议：清晰朗读3-10秒，说一句完整的话</div>
|
||
</div>
|
||
|
||
<div class="text-center mb-3">
|
||
<span class="text-muted">或者</span>
|
||
</div>
|
||
|
||
<div class="text-center mb-3">
|
||
<button type="button" id="start-record" class="btn btn-kid-primary me-2">
|
||
<i class="fas fa-record-vinyl me-2"></i>开始录音
|
||
</button>
|
||
<button type="button" id="stop-record" class="btn btn-secondary" disabled>
|
||
<i class="fas fa-stop me-2"></i>停止录音
|
||
</button>
|
||
<div class="mt-2">
|
||
<small id="record-status" class="text-muted">点击开始录音按钮</small>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-kid-accent w-100" disabled id="upload-btn">
|
||
<i class="fas fa-upload me-2"></i>上传并训练我的声音
|
||
</button>
|
||
</form>
|
||
|
||
<!-- 音频预览 -->
|
||
<div id="audio-preview" class="mt-3" style="display: none;">
|
||
<div class="alert alert-info">
|
||
<h6><i class="fas fa-headphones me-2"></i>预览录音：</h6>
|
||
<audio controls class="w-100 mt-2" id="preview-audio">
|
||
<source id="preview-source" type="audio/wav">
|
||
</audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="card border-0 shadow-sm kid-feature-card">
|
||
<div class="card-body p-4">
|
||
<h5 class="fw-bold text-kid-secondary mb-3">
|
||
<i class="fas fa-magic me-2"></i>用我的声音说话
|
||
</h5>
|
||
|
||
<form id="speech-generate-form">
|
||
<div class="mb-3">
|
||
<label class="form-label">想说什么？</label>
|
||
<textarea class="form-control" id="speech-text" rows="4"
|
||
placeholder="输入你想让AI用你的声音说的话..."
|
||
style="border-radius: 15px;">你好，这是我的专属声音！听起来是不是很像我呢？</textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-kid-secondary w-100" disabled id="generate-btn">
|
||
<i class="fas fa-magic me-2"></i>生成我的声音
|
||
</button>
|
||
</form>
|
||
|
||
<!-- 生成结果 -->
|
||
<div id="speech-result" class="mt-3" style="display: none;">
|
||
<div class="alert alert-success">
|
||
<h6><i class="fas fa-volume-up me-2"></i>生成的语音：</h6>
|
||
<audio controls class="w-100 mt-2" id="generated-audio">
|
||
<source id="generated-source" type="audio/wav">
|
||
</audio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 使用说明 -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-body p-4">
|
||
<h5 class="fw-bold text-center mb-4">
|
||
<i class="fas fa-lightbulb text-warning me-2"></i>使用小贴士
|
||
</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-md-3 text-center mb-3">
|
||
<div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #FF6B6B, #FF8E53);">
|
||
<i class="fas fa-microphone text-white"></i>
|
||
</div>
|
||
<h6 class="fw-bold">清晰发音</h6>
|
||
<p class="small text-muted">说话要清楚，声音要洪亮</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 text-center mb-3">
|
||
<div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #4ECDC4, #44A08D);">
|
||
<i class="fas fa-clock text-white"></i>
|
||
</div>
|
||
<h6 class="fw-bold">合适时长</h6>
|
||
<p class="small text-muted">录音3-10秒，一句话就够了</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 text-center mb-3">
|
||
<div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #A8E6CF, #DCEDC8);">
|
||
<i class="fas fa-volume-up text-white"></i>
|
||
</div>
|
||
<h6 class="fw-bold">安静环境</h6>
|
||
<p class="small text-muted">在安静的地方录音效果更好</p>
|
||
</div>
|
||
|
||
<div class="col-md-3 text-center mb-3">
|
||
<div class="icon-bubble mx-auto mb-2" style="background: linear-gradient(45deg, #FFB347, #FFCC02);">
|
||
<i class="fas fa-smile text-white"></i>
|
||
</div>
|
||
<h6 class="fw-bold">自然语调</h6>
|
||
<p class="small text-muted">用你平时说话的语调</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Modal -->
|
||
<div class="modal fade" id="loadingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
|
||
<div class="modal-dialog modal-dialog-centered">
|
||
<div class="modal-content">
|
||
<div class="modal-body text-center py-4">
|
||
<div class="spinner-border text-primary mb-3" role="status"></div>
|
||
<h5 id="loading-message">正在处理中...</h5>
|
||
<p id="loading-detail" class="text-muted">请稍候...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script src="{{ url_for('static', filename='js/voice_clone.js') }}"></script>
|
||
{% endblock %}
|