-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
250 lines (231 loc) · 11.6 KB
/
Copy pathindex.html
File metadata and controls
250 lines (231 loc) · 11.6 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PersonaHire - 终极AI面试官</title>
<!-- 外部样式引用 -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="container" id="mainContainer">
<!-- 页面头部 -->
<div class="header">
<div class="badge" id="modeBadge">🚀 GPT-4.1 + ElevenLabs TTS</div>
<h1>🎭 PersonaHire Ultimate</h1>
<p id="headerDesc">顶级AI驱动的智能面试官 - 最强推理能力 + 真人语音</p>
</div>
<!-- 状态消息显示 -->
<div id="statusMessage" style="display: none;"></div>
<!-- =============== 开发者模式UI =============== -->
<div class="dev-mode-ui">
<!-- API配置面板 -->
<div class="api-setup" id="apiSetup" style="display: none;">
<h3>🔑 API 配置 (开发者模式)</h3>
<div class="api-row">
<input type="password" id="openaiKey" placeholder="OpenAI API Key (sk-...)">
<input type="password" id="elevenKey" placeholder="ElevenLabs API Key (可选)">
</div>
<div style="display: flex; gap: 16px; margin-bottom: 16px;">
<button onclick="saveApiKeys()">保存配置</button>
<button onclick="testAllApis()" style="background: linear-gradient(135deg, #28a745, #20c997);">🧪 测试连接</button>
<button onclick="clearApiKeys()" style="background: linear-gradient(135deg, #dc3545, #c82333);">🗑️ 清除配置</button>
</div>
<small style="color: #666; display: block;">
💡 只有OpenAI Key是必需的。ElevenLabs Key可以获得更好的语音体验
</small>
<!-- Token状态检测面板 -->
<div class="token-status" id="tokenStatus" style="display: none;">
<h4>🔍 Token状态检测</h4>
<div class="status-grid">
<div class="status-item">
<div class="status-indicator" id="openaiStatus"></div>
<span>OpenAI API</span>
<small id="openaiInfo">未检测</small>
</div>
<div class="status-item">
<div class="status-indicator" id="elevenStatus"></div>
<span>ElevenLabs TTS</span>
<small id="elevenInfo">未配置</small>
</div>
<div class="status-item">
<div class="status-indicator" id="gptStatus"></div>
<span>GPT-4.1 权限</span>
<small id="gptInfo">未验证</small>
</div>
</div>
</div>
<!-- 使用统计面板 -->
<div class="usage-stats" id="usageStats">
<h4>📊 使用统计</h4>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-number" id="apiCallCount">0</div>
<div class="stat-label">API调用次数</div>
</div>
<div class="stat-card">
<div class="stat-number" id="tokenUsed">0</div>
<div class="stat-label">消耗Token</div>
</div>
<div class="stat-card">
<div class="stat-number" id="estimatedCost">$0.00</div>
<div class="stat-label">预估成本</div>
</div>
<div class="stat-card">
<div class="stat-number" id="avgResponseTime">0ms</div>
<div class="stat-label">平均响应时间</div>
</div>
</div>
</div>
</div>
<!-- Token详细日志面板 -->
<div class="token-logs" id="tokenLogs" style="display: none;">
<!-- 内容将由JavaScript动态生成 -->
</div>
<!-- 高级设置面板 -->
<div class="advanced-settings" id="advancedSettings" style="display: none;">
<h3>⚙️ 高级设置</h3>
<div class="settings-row">
<div class="setting-group">
<label>Temperature (0.0-2.0)</label>
<input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7">
<small>当前值: <span id="tempValue">0.7</span></small>
</div>
<div class="setting-group">
<label>Max Tokens</label>
<input type="number" id="maxTokens" min="100" max="4000" value="800">
</div>
<div class="setting-group">
<label>TTS模型选择</label>
<select id="ttsModel">
<option value="tts-1">标准质量</option>
<option value="tts-1-hd" selected>高清质量</option>
</select>
</div>
<div class="setting-group">
<label>调试模式</label>
<select id="debugMode">
<option value="off">关闭</option>
<option value="on">开启</option>
</select>
</div>
</div>
</div>
</div>
<!-- =============== 用户模式UI =============== -->
<div class="user-mode-ui">
<!-- 面试官设置面板 -->
<div class="settings-panel">
<h3>🎛️ 面试官设置</h3>
<div class="voice-settings">
<select id="interviewerStyle">
<option value="professional">专业严谨型</option>
<option value="friendly" selected>友好鼓励型</option>
<option value="pressure">压力测试型</option>
<option value="creative">创意开放型</option>
</select>
<select id="voiceStyle">
<option value="alloy">Alloy (中性)</option>
<option value="echo">Echo (男性)</option>
<option value="fable">Fable (英国口音)</option>
<option value="onyx">Onyx (深沉)</option>
<option value="nova" selected>Nova (女性)</option>
<option value="shimmer">Shimmer (柔和)</option>
</select>
<select id="difficulty">
<option value="beginner">初级难度</option>
<option value="intermediate" selected>中级难度</option>
<option value="advanced">高级难度</option>
<option value="expert">专家难度</option>
</select>
</div>
</div>
<!-- 聊天对话区域 -->
<div class="chat-area" id="chatArea">
<div class="message interviewer">
<strong>🎭 AI面试官 Sarah：</strong>
<span id="welcomeMessage">
欢迎来到PersonaHire Ultimate！我是您的专属AI面试官Sarah，搭载了最强大的GPT-4.1推理引擎和ElevenLabs语音技术。
<br><br>
我能够：
<br>• 🧠 进行深度逻辑分析和追问
<br>• 🎯 根据您的回答动态调整面试策略
<br>• 🗣️ 提供接近真人的语音交互体验
<br>• 📊 生成专业的面试评估报告
<br><br>
请选择面试风格和难度，然后点击"开始面试"开始我们的专业面试！
</span>
<div class="voice-controls">
<button class="voice-btn" onclick="playWelcomeMessage()">🔊 听语音欢迎</button>
</div>
</div>
</div>
<!-- 用户输入区域 -->
<div class="input-area">
<textarea id="userInput" placeholder="在这里输入您的回答，或点击语音按钮说话..." disabled></textarea>
<button class="send-btn" onclick="sendMessage()" id="sendBtn" disabled>
📤 发送回答
</button>
</div>
<!-- 面试控制按钮 -->
<div class="controls">
<button onclick="startInterview()" id="startBtn">🎯 开始面试</button>
<button onclick="generateReport()" id="reportBtn" disabled>📊 生成报告</button>
<button onclick="endInterview()" id="endBtn" disabled>🏁 结束面试</button>
<button onclick="clearChat()">🗑️ 清空对话</button>
<button onclick="exportConversation()" class="user-export-btn">💾 导出对话</button>
</div>
</div>
<!-- 加载状态指示器 -->
<div class="loading" id="loading">
<div class="audio-indicator" id="audioIndicator">🎵 正在生成语音...</div>
🤖 AI面试官正在深度思考中...
</div>
<!-- 底部链接 -->
<div class="footer-links">
<a href="#" onclick="return false;" id="devModeLink">
🔧 开发者模式
</a>
<span>|</span>
<a href="https://github.com/Kyle-Wang0211/PersonaHire-Ultimate" target="_blank">
💻 查看源码
</a>
<span>|</span>
<a href="mailto:wkd20040211@gmail.com">
📧 联系作者
</a>
<span>|</span>
<a href="#" onclick="showDebugInfo()">
🐛 调试信息
</a>
</div>
</div>
<!-- JavaScript模块引用 - 按依赖顺序 -->
<script src="js/config.js"></script>
<script src="js/security.js"></script>
<script src="js/tokenMonitoring.js"></script>
<script src="js/main.js"></script>
<!-- 页面初始化脚本 -->
<script>
// 页面加载完成后初始化
window.addEventListener('load', () => {
console.log('🚀 PersonaHire Ultimate initializing...');
// 初始化各个模块
initializeApiKeys(); // 配置模式和API密钥
initTokenMonitoring(); // Token监控系统
setupEventListeners(); // 事件监听器
// 初始化高级设置（如果是开发者模式）
if (isDeveloperMode) {
initAdvancedSettings();
// 显示Token日志面板
const tokenLogsPanel = document.getElementById('tokenLogs');
if (tokenLogsPanel) {
tokenLogsPanel.style.display = 'block';
}
}
console.log('✅ PersonaHire Ultimate initialized successfully');
console.log('Current mode:', isDeveloperMode ? 'Developer' : 'User');
});
</script>
</body>
</html>