51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Voice Assistant</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Voice Assistant</h1>
|
|
<p class="subtitle">Azure Speech + Gemma LLM, real-time conversation</p>
|
|
</header>
|
|
|
|
<div class="controls">
|
|
<button id="startBtn" class="btn btn-primary">Start Conversation</button>
|
|
<button id="stopBtn" class="btn btn-danger" disabled>Stop</button>
|
|
</div>
|
|
|
|
<div class="voice-panel">
|
|
<label for="voiceSelect">Voice:</label>
|
|
<select id="voiceSelect">
|
|
<option value="en-US-AvaNeural" selected>Ava (DragonHD)</option>
|
|
<option value="en-US-JennyNeural">Jenny</option>
|
|
<option value="en-US-GuyNeural">Guy</option>
|
|
<option value="en-US-AndrewNeural">Andrew</option>
|
|
<option value="en-US-AriaNeural">Aria</option>
|
|
<option value="en-US-EmmaNeural">Emma</option>
|
|
<option value="en-US-EricNeural">Eric</option>
|
|
<option value="en-US-BrianNeural">Brian</option>
|
|
<option value="en-US-AshleyNeural">Ashley</option>
|
|
<option value="en-US-RichardNeural">Richard</option>
|
|
<option value="en-US-TinaNeural">Tina</option>
|
|
<option value="en-US-SteffanNeural">Steffan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="status" id="status">Disconnected</div>
|
|
|
|
<div class="transcript" id="transcript">
|
|
<div class="transcript-header">Conversation</div>
|
|
<div id="messages"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.umd.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|