lanhao
186 lines
8.6 KiB
HTML
186 lines
8.6 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>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="logo">
|
|
<svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"/>
|
|
<polygon points="10,8 16,12 10,16"/>
|
|
</svg>
|
|
<span class="logo-text">军事科技 <span class="logo-sub">AI配音</span></span>
|
|
</div>
|
|
<div class="header-info">
|
|
<span class="engine-badge" id="engineBadge">蓝皓</span>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Center Panel -->
|
|
<section class="panel panel-center">
|
|
<div class="panel-header">
|
|
<h2>配音文稿</h2>
|
|
<div class="char-count">
|
|
<span id="charCount">0</span> / 2000
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-group">
|
|
<span class="toolbar-label">引擎：</span>
|
|
<button class="switch-btn active" data-engine="minimax">
|
|
<span class="engine-icon minimax-icon">M</span>
|
|
MiniMax
|
|
</button>
|
|
<button class="switch-btn" data-engine="cosyvoice">
|
|
<span class="engine-icon cosyvoice-icon">C</span>
|
|
CosyVoice
|
|
</button>
|
|
</div>
|
|
<div class="toolbar-group emotion-group">
|
|
<span class="toolbar-label">情绪：</span>
|
|
<button class="emotion-btn" data-emotion="happy" title="开心愉快">😊</button>
|
|
<button class="emotion-btn" data-emotion="sad" title="悲伤">😢</button>
|
|
<button class="emotion-btn" data-emotion="angry" title="激昂">🔥</button>
|
|
<button class="emotion-btn" data-emotion="surprised" title="惊讶">❗</button>
|
|
<button class="emotion-btn" data-emotion="fearful" title="害怕">😨</button>
|
|
<button class="emotion-btn" data-emotion="disgusted" title="厌恶">😒</button>
|
|
<span class="toolbar-hint">← 选择整段语音的情绪风格</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Editor -->
|
|
<div class="editor-wrapper">
|
|
<div class="editor" id="editor" contenteditable="true" spellcheck="false"></div>
|
|
<div class="editor-placeholder" id="editorPlaceholder">
|
|
请输入配音文稿...<br><br>
|
|
<span class="hint">💡 提示：点击上方情绪按钮选择整段语音的情绪风格，生成时自动应用</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parameter Controls -->
|
|
<div class="param-controls">
|
|
<div class="param-group">
|
|
<label>语速</label>
|
|
<input type="range" id="speedSlider" min="0.5" max="2.0" step="0.1" value="1.0">
|
|
<span class="param-value" id="speedValue">1.0x</span>
|
|
</div>
|
|
<div class="param-group">
|
|
<label>声调</label>
|
|
<input type="range" id="pitchSlider" min="-12" max="12" step="1" value="0">
|
|
<span class="param-value" id="pitchValue">0</span>
|
|
</div>
|
|
<div class="param-group">
|
|
<label>音量</label>
|
|
<input type="range" id="volumeSlider" min="0" max="10" step="0.1" value="1.0">
|
|
<span class="param-value" id="volumeValue">1.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons">
|
|
<button class="btn btn-primary" id="generateBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="5,3 19,12 5,21"/>
|
|
</svg>
|
|
生成配音
|
|
</button>
|
|
<button class="btn btn-secondary" id="clearBtn">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
|
|
</svg>
|
|
清空
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Right Panel -->
|
|
<aside class="panel panel-right">
|
|
<div class="panel-header">
|
|
<h2>音频预览</h2>
|
|
</div>
|
|
|
|
<div class="audio-display" id="audioDisplay">
|
|
<div class="audio-placeholder">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<path d="M9 18V5l12-2v13"/>
|
|
<circle cx="6" cy="18" r="3"/>
|
|
<circle cx="18" cy="16" r="3"/>
|
|
</svg>
|
|
<p>生成音频后在此预览</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="audio-controls" id="audioControls" style="display: none;">
|
|
<button class="control-btn play-btn" id="playBtn">
|
|
<svg class="icon-play" viewBox="0 0 24 24" fill="currentColor">
|
|
<polygon points="5,3 19,12 5,21"/>
|
|
</svg>
|
|
<svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
|
|
<rect x="6" y="4" width="4" height="16"/>
|
|
<rect x="14" y="4" width="4" height="16"/>
|
|
</svg>
|
|
</button>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<span class="time-display" id="timeDisplay">00:00 / 00:00</span>
|
|
<button class="control-btn download-btn" id="downloadBtn" title="下载">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="audio-info" id="audioInfo" style="display: none;">
|
|
<div class="info-row">
|
|
<span class="info-label">引擎</span>
|
|
<span class="info-value" id="infoEngine">MiniMax</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">采样率</span>
|
|
<span class="info-value">32kHz</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">格式</span>
|
|
<span class="info-value">MP3</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="history-section">
|
|
<h3>历史记录</h3>
|
|
<div class="history-list" id="historyList">
|
|
<div class="history-empty">
|
|
<p>暂无生成记录</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<div class="loading-overlay" id="loadingOverlay" style="display: none;">
|
|
<div class="loading-spinner">
|
|
<svg viewBox="0 0 50 50">
|
|
<circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4"/>
|
|
</svg>
|
|
</div>
|
|
<p id="loadingText">正在生成音频...</p>
|
|
</div>
|
|
|
|
<div class="toast" id="toast">
|
|
<span class="toast-message"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |