chat.html
5.76 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>chat</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: #f0f2f5;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
gap: 20px;
}
.container {
display: flex;
align-items: center;
gap: 20px;
}
.input-container {
width: 100%;
max-width: 320px;
background: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 8px;
}
input {
flex: 1;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
}
button {
white-space: nowrap;
padding: 8px 12px;
background: #1890ff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
background: #40a9ff;
}
#unity-canvas {
width: 320px;
height: 480px;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* 新增聊天窗口样式 */
.chat-container {
width: 550px;
height: 550px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
}
.chat-messages {
flex: 1;
height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 5px;
}
.chat-message {
max-width: 70%;
padding: 8px 12px;
border-radius: 8px;
font-size: 14px;
line-height: 1.4;
}
.chat-message.user {
background: #1890ff;
color: white;
align-self: flex-end;
}
.chat-message.bot {
background: #f0f2f5;
color: #333;
align-self: flex-start;
}
.chat-input {
display: flex;
gap: 8px;
}
</style>
</head>
<body>
<div class="container">
<div>
<canvas id="unity-canvas" tabindex="-1" style="background: #231F20"></canvas>
<div class="input-container">
<input type="text" placeholder="输入要朗读的文字">
<button>朗读</button>
</div>
</div>
<!-- 新增聊天窗口结构 -->
<div class="chat-container">
<div class="chat-messages" id="chat-messages"></div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="输入聊天消息">
<button id="send-btn">发送</button>
</div>
</div>
</div>
<script src="assets/unity/build_web.loader.js"></script>
<script>
function initInput(canvas, config, progress) {
let inputField = document.querySelector('input');
let speakButton = document.querySelector('button');
speakButton.addEventListener('click', () => {
const text = inputField.value;
if (text) {
console.log('text', text);
window.unityInstance.SendMessage('UnityReceiverFromJs', 'ReceiveText', text);
inputField.value = '';
}
});
}
// 聊天功能初始化函数
function initChat() {
const chatInput = document.querySelector('#chat-input');
const sendBtn = document.querySelector('#send-btn');
const chatMessages = document.querySelector('#chat-messages');
const fixedReplies = [
"你好呀！有什么可以帮你的吗？",
"今天天气不错呢～",
"我收到你的消息啦！",
"稍后我会仔细看看的～",
"最近我学习了很多新知识，比如如何识别不同的天气模式，你想了解一下吗？",
"用户的需求是我们最关注的，如果你有任何建议或问题，都可以随时告诉我，我会尽力帮你解决的～",
"今天看到一个有趣的故事，说的是一只小松鼠如何在冬天储存足够的坚果，你想听我详细讲讲吗？"
];
function addMessage(text, isUser) {
const messageDiv = document.createElement('div');
messageDiv.className = `chat-message ${isUser ? 'user' : 'bot'}`;
messageDiv.textContent = text;
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
sendBtn.addEventListener('click', () => {
const text = chatInput.value.trim();
if (text) {
addMessage(text, true);
chatInput.value = '';
// 模拟1秒后回复固定消息（新增语音调用）
setTimeout(() => {
const randomIndex = Math.floor(Math.random() * fixedReplies.length);
const botText = fixedReplies[randomIndex];
addMessage(botText, false);
// 调用Unity语音朗读能力
window.unityInstance.SendMessage('UnityReceiverFromJs', 'ReceiveText', botText);
}, 1000);
}
});
// 支持回车键发送
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendBtn.click();
});
}
async function initializeUnity() {
window.unityInstance = await createUnityInstance(document.querySelector("#unity-canvas"), {
dataUrl: "assets/unity/build_web.data",
frameworkUrl: "assets/unity/build_web.framework.js",
codeUrl: "assets/unity/build_web.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "DianWang_HDRP",
productVersion: "0.1",
});
}
initializeUnity();
initInput();
initChat();
</script>
</body>
</html>