-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdialect-practice.html
More file actions
143 lines (136 loc) · 6.54 KB
/
Copy pathdialect-practice.html
File metadata and controls
143 lines (136 loc) · 6.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方言对练助手</title>
<link rel="stylesheet" href="dialect-style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<h1><i class="fas fa-microphone-alt"></i> 方言对练助手</h1>
<p>与AI助手练习北京话、上海话、四川话，提升方言发音水平</p>
</header>
<div class="main-content">
<!-- 方言选择区域 -->
<div class="dialect-selector">
<h2>选择方言</h2>
<div class="dialect-options">
<div class="dialect-option" data-dialect="beijing">
<div class="dialect-icon">🏛️</div>
<h3>北京话</h3>
<p>标准普通话，儿化音特色</p>
</div>
<div class="dialect-option" data-dialect="shanghai">
<div class="dialect-icon">🏙️</div>
<h3>上海话</h3>
<p>吴语方言，软糯动听</p>
</div>
<div class="dialect-option" data-dialect="sichuan">
<div class="dialect-icon">🌶️</div>
<h3>四川话</h3>
<p>西南官话，热情豪爽</p>
</div>
</div>
</div>
<!-- 聊天区域 -->
<div class="chat-container" id="chatContainer">
<div class="chat-header">
<h3 id="currentDialect">请选择方言开始练习</h3>
<div class="chat-controls">
<button id="clearChat" class="btn-secondary">
<i class="fas fa-trash"></i> 清空聊天
</button>
</div>
</div>
<div class="chat-messages" id="chatMessages">
<div class="welcome-message">
<div class="ai-avatar">🤖</div>
<div class="message-content">
<p>欢迎使用方言对练助手！请选择您想练习的方言，然后点击麦克风开始语音对话。</p>
<p><strong>使用说明：</strong></p>
<ul style="margin: 10px 0; padding-left: 20px;">
<li>1. 点击右下角设置按钮 ⚙️</li>
<li>2. 输入您的阿里云Qwen API密钥</li>
<li>3. 选择要练习的方言</li>
<li>4. 点击麦克风开始语音对话</li>
</ul>
<p><small>💡 获取API密钥：访问 <a href="https://dashscope.aliyun.com/" target="_blank">阿里云DashScope</a> 注册并获取Qwen API密钥</small></p>
</div>
</div>
</div>
</div>
<!-- 语音控制区域 -->
<div class="voice-controls">
<div class="voice-buttons">
<button id="startRecording" class="voice-btn">
<i class="fas fa-microphone"></i>
<span>开始录音</span>
</button>
<button id="stopRecording" class="voice-btn stop" style="display: none;">
<i class="fas fa-stop"></i>
<span>停止录音</span>
</button>
</div>
<div class="recording-status" id="recordingStatus">
<div class="status-indicator"></div>
<span id="statusText">准备就绪</span>
</div>
</div>
<!-- 发音纠正区域 -->
<div class="pronunciation-feedback" id="pronunciationFeedback" style="display: none;">
<h3>发音反馈</h3>
<div class="feedback-content">
<div class="score-display">
<div class="score-circle">
<span id="pronunciationScore">85</span>
<small>分</small>
</div>
</div>
<div class="feedback-details">
<div class="feedback-item">
<i class="fas fa-check-circle"></i>
<span id="correctAspects">声调准确，语调自然</span>
</div>
<div class="feedback-item">
<i class="fas fa-exclamation-triangle"></i>
<span id="improvementAreas">注意儿化音发音</span>
</div>
</div>
</div>
</div>
</div>
<!-- 设置面板 -->
<div class="settings-panel" id="settingsPanel">
<div class="settings-header">
<h3><i class="fas fa-cog"></i> 设置</h3>
<button id="closeSettings" class="btn-close">×</button>
</div>
<div class="settings-content">
<!-- 添加API密钥输入框 -->
<div class="setting-group">
<label for="apiKey">Qwen API密钥:</label>
<input type="password" id="apiKey" placeholder="请输入您的Qwen API密钥" class="api-key-input">
<small class="api-key-hint">请输入您的阿里云Qwen API密钥，用于语音识别和文本生成</small>
</div>
<div class="setting-group">
<label for="voiceSpeed">语音速度:</label>
<input type="range" id="voiceSpeed" min="0.5" max="2.0" step="0.1" value="1.0">
<span id="speedValue">1.0x</span>
</div>
<div class="setting-group">
<label for="autoPlay">自动播放回复:</label>
<input type="checkbox" id="autoPlay" checked>
</div>
</div>
</div>
<!-- 设置按钮 -->
<button id="openSettings" class="settings-btn">
<i class="fas fa-cog"></i>
</button>
</div>
<script src="dialect-app.js"></script>
</body>
</html>