Skip to content

Commit 630d9fd

Browse files
juntaojuntao
authored
Add files via upload
1 parent 56f4072 commit 630d9fd

File tree

3 files changed

+334
-18
lines changed

3 files changed

+334
-18
lines changed

‎chat/chat-1.png‎

232 KB
Loading

‎chat/chat-2.png‎

237 KB
Loading

‎chat/index.html‎

Lines changed: 334 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,351 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dim">
3-
2+
<html lang="en">
43
<head>
54
<meta charset="UTF-8">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
76
<title>Voice Chat</title>
8-
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
9-
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
10-
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
11-
<!-- Add MessagePack dependency -->
12-
<script crossorigin src="https://unpkg.com/@msgpack/msgpack"></script>
13-
</head>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
16+
line-height: 1.6;
17+
color: #333;
18+
background-color: #f8f9fa;
19+
padding: 20px;
20+
}
21+
22+
.container {
23+
max-width: 900px;
24+
margin: 0 auto;
25+
background: white;
26+
border-radius: 12px;
27+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
28+
overflow: hidden;
29+
}
30+
31+
.header {
32+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
33+
color: white;
34+
padding: 40px 30px;
35+
text-align: center;
36+
}
37+
38+
.header h1 {
39+
font-size: 2.5em;
40+
margin-bottom: 10px;
41+
font-weight: 700;
42+
}
43+
44+
.header p {
45+
font-size: 1.2em;
46+
opacity: 0.9;
47+
}
48+
49+
.content {
50+
padding: 30px;
51+
}
52+
53+
.step {
54+
margin-bottom: 50px;
55+
padding: 25px;
56+
border-left: 4px solid #667eea;
57+
background: #f8f9ff;
58+
border-radius: 0 8px 8px 0;
59+
}
60+
61+
.step-header {
62+
display: flex;
63+
align-items: center;
64+
margin-bottom: 20px;
65+
}
66+
67+
.step-number {
68+
background: #667eea;
69+
color: white;
70+
width: 40px;
71+
height: 40px;
72+
border-radius: 50%;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
font-weight: bold;
77+
font-size: 1.2em;
78+
margin-right: 15px;
79+
}
80+
81+
.step-title {
82+
font-size: 1.8em;
83+
font-weight: 600;
84+
color: #2d3748;
85+
}
86+
87+
.step-content {
88+
margin-left: 55px;
89+
}
90+
91+
.step-description {
92+
font-size: 1.1em;
93+
margin-bottom: 20px;
94+
color: #4a5568;
95+
}
96+
97+
.image-container {
98+
margin: 20px 0;
99+
text-align: center;
100+
}
101+
102+
.image-placeholder {
103+
width: 100%;
104+
max-width: 600px;
105+
height: 300px;
106+
background: #e2e8f0;
107+
border: 2px dashed #cbd5e0;
108+
border-radius: 8px;
109+
display: flex;
110+
align-items: center;
111+
justify-content: center;
112+
color: #718096;
113+
font-size: 1.1em;
114+
margin: 0 auto;
115+
}
116+
117+
.code-block {
118+
background: #2d3748;
119+
color: #e2e8f0;
120+
padding: 20px;
121+
border-radius: 8px;
122+
margin: 20px 0;
123+
font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
124+
font-size: 0.9em;
125+
overflow-x: auto;
126+
}
127+
128+
.code-header {
129+
background: #4a5568;
130+
color: #e2e8f0;
131+
padding: 10px 20px;
132+
font-size: 0.9em;
133+
border-radius: 8px 8px 0 0;
134+
margin-bottom: 0;
135+
}
136+
137+
.bullet-points {
138+
margin: 20px 0;
139+
}
140+
141+
.bullet-points ul {
142+
padding-left: 20px;
143+
}
144+
145+
.bullet-points li {
146+
margin-bottom: 8px;
147+
font-size: 1.05em;
148+
}
149+
150+
.highlight-box {
151+
background: #fff3cd;
152+
border: 1px solid #ffeaa7;
153+
border-radius: 8px;
154+
padding: 20px;
155+
margin: 20px 0;
156+
}
157+
158+
.highlight-box .icon {
159+
display: inline-block;
160+
margin-right: 10px;
161+
font-size: 1.2em;
162+
}
163+
164+
.button {
165+
display: inline-block;
166+
background: #667eea;
167+
color: white;
168+
padding: 12px 24px;
169+
border-radius: 6px;
170+
text-decoration: none;
171+
font-weight: 600;
172+
transition: background 0.3s;
173+
margin: 10px 0;
174+
}
175+
176+
.button:hover {
177+
background: #5a67d8;
178+
}
14179

180+
.navigation {
181+
display: flex;
182+
justify-content: space-between;
183+
align-items: center;
184+
margin-top: 40px;
185+
padding-top: 20px;
186+
border-top: 1px solid #e2e8f0;
187+
}
188+
189+
.nav-button {
190+
background: #f7fafc;
191+
border: 1px solid #e2e8f0;
192+
color: #667eea;
193+
padding: 10px 20px;
194+
border-radius: 6px;
195+
text-decoration: none;
196+
font-weight: 500;
197+
transition: all 0.3s;
198+
}
199+
200+
.nav-button:hover {
201+
background: #667eea;
202+
color: white;
203+
}
204+
205+
.nav-button.disabled {
206+
opacity: 0.5;
207+
cursor: not-allowed;
208+
}
209+
210+
@media (max-width: 768px) {
211+
.container {
212+
margin: 10px;
213+
border-radius: 8px;
214+
}
215+
216+
.header {
217+
padding: 30px 20px;
218+
}
219+
220+
.header h1 {
221+
font-size: 2em;
222+
}
223+
224+
.content {
225+
padding: 20px;
226+
}
227+
228+
.step {
229+
padding: 20px;
230+
margin-bottom: 30px;
231+
}
232+
233+
.step-content {
234+
margin-left: 0;
235+
}
236+
237+
.step-header {
238+
flex-direction: column;
239+
align-items: flex-start;
240+
}
241+
242+
.step-number {
243+
margin-bottom: 10px;
244+
margin-right: 0;
245+
}
246+
}
247+
</style>
248+
</head>
15249
<body>
16-
<div class="card shadow-xl">
17-
<div class="card-body">
18-
<h1 class="card-title text-2xl justify-center mb-6">Waiting for your EchoKit device? Try any EchoKit server from your computer!</h1>
250+
<div class="container">
251+
<div class="header">
252+
<h1>Waiting for your EchoKit device?</h1>
253+
<p>Try any EchoKit server from your computer!</p>
254+
</div>
19255

20-
<div class="flex gap-2 mb-6 text-xl justify-center">
21-
Please download the following HTML and JavaScript file and save it to your local computer.
256+
<div class="content">
257+
<!-- Step 1 -->
258+
<div class="step">
259+
<div class="step-header">
260+
<div class="step-number">1</div>
261+
<div class="step-title">Download a web app</div>
262+
</div>
263+
<div class="step-content">
264+
<div class="step-description">
265+
Please download the following <code>index.html</code> file and save it to your local computer.
266+
</div>
267+
268+
<a href="resources/index.html" class="button" download>👉 English</a>
269+
<a href="resources/index_zh.html" class="button" download>👉 中文</a>
270+
</div>
271+
</div>
272+
273+
<!-- Step 2 -->
274+
<div class="step">
275+
<div class="step-header">
276+
<div class="step-number">2</div>
277+
<div class="step-title">Open the web app</div>
278+
</div>
279+
<div class="step-content">
280+
<div class="step-description">
281+
Double-click on the downloaded file. It should open in your web browser and you can start chatting with your EchoKit server!
282+
</div>
283+
284+
</div>
22285
</div>
23286

24-
<div class="flex gap-2 mb-6 text-2xl justify-center">
25-
👉 <a href="resources/index.html" download>English</a> | <a href="resources/index_zh.html" download>中文</a>
287+
<!-- Step 3 -->
288+
<div class="step">
289+
<div class="step-header">
290+
<div class="step-number">3</div>
291+
<div class="step-title">Chat</div>
292+
</div>
293+
<div class="step-content">
294+
<div class="step-description">
295+
Enter the chat mode to have the EchoKit server answer your questions using voice.
296+
</div>
297+
298+
<div class="bullet-points">
299+
<h4>Steps:</h4>
300+
<ul>
301+
<li>Enter your EchoKit server's WebSocket URL, such as <code>ws://34.44.85.57:9090/ws/</code></li>
302+
<li>Click on "Connect"</li>
303+
<li>Click on "Start Listening"</li>
304+
<li>Start speaking!</li>
305+
</ul>
306+
</div>
307+
308+
<div class="image-container">
309+
<img style="max-width: 100%" src="chat-1.png">
310+
</div>
311+
312+
</div>
26313
</div>
27314

28-
<div class="flex gap-2 mb-6 text-xl justify-center">
29-
Then double-click on the downloaded file. It should open in your web browser and you can start chatting with your EchoKit server!
315+
<!-- Step 4 -->
316+
<div class="step">
317+
<div class="step-header">
318+
<div class="step-number">4</div>
319+
<div class="step-title">Record</div>
320+
</div>
321+
<div class="step-content">
322+
<div class="step-description">
323+
Have the application listening and recording whenever someone speaks!
324+
</div>
325+
326+
<div class="bullet-points">
327+
<h4>Steps:</h4>
328+
<ul>
329+
<li>Enter your EchoKit server's WebSocket URL, such as <code>ws://34.44.85.57:9090/ws/</code></li>
330+
<li>Select and turn on "Recording mode"</li>
331+
<li>Click on "Connect"</li>
332+
<li>Click on "Start Listening"</li>
333+
<li>Start speaking!</li>
334+
</ul>
335+
</div>
336+
337+
<div class="image-container">
338+
<img style="max-width: 100%" src="chat-2.png">
339+
</div>
340+
341+
<div class="highlight-box">
342+
<span class="icon">✅</span>
343+
The recorded audio files are in the <code>record</code> folder on the EchoKit server.
344+
</div>
345+
</div>
30346
</div>
347+
31348
</div>
32349
</div>
33350
</body>
34-
35351
</html>

0 commit comments

Comments
 (0)