Skip to content

Commit

Permalink
server : add Speech Recognition & Synthesis to UI (fixes)
Browse files Browse the repository at this point in the history
  • Loading branch information
ElYaiko committed Jul 25, 2024
1 parent 10895d3 commit c5f12a1
Showing 1 changed file with 20 additions and 10 deletions.
30 changes: 20 additions & 10 deletions examples/server/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -141,10 +141,8 @@
gap: 0.5em;
}
.message-controls > div:nth-child(2) > div {
margin-left: auto;
}
.message-controls > div:nth-child(2) > div:nth-child(1) {
display: flex;
margin-left: auto;
gap: 0.5em;
}

Expand Down Expand Up @@ -285,7 +283,7 @@

import { llama } from './completion.js';
import { SchemaConverter } from './json-schema-to-grammar.mjs';

let selected_image = false;
var slot_id = -1;

Expand Down Expand Up @@ -620,12 +618,12 @@
if (e) e.preventDefault();

talkActive.value = false;
talkRecognition?.stop();
talkRecognition?.stop();
}
const talk = (e) => {
e.preventDefault();

if (talkRecognition)
if (talkRecognition)
talkRecognition.start();
else
alert("Speech recognition is not supported by this browser.");
Expand Down Expand Up @@ -685,17 +683,29 @@
<div>
<div>
<button type="submit" disabled=${generating.value || talkActive.value}>Send</button>
<button disabled=${generating.value} onclick=${talkActive.value ? talkStop : talk}>${talkActive.value ? "Stop Talking" : "Talk"}</button>
<button disabled=${generating.value || talkActive.value} onclick=${uploadImage}>Upload Image</button>
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
<button onclick=${reset}>Reset</button>
</div>
<div>
<input type="checkbox" id="send-on-talk" name="send-on-talk" checked="${sendOnTalk}" onchange=${(e) => sendOnTalk.value = e.target.checked} />
<label for="send-on-talk" style="line-height: initial;">Send after talking</label>
<a href="#" style="cursor: help;" title="Help" onclick=${e => {
e.preventDefault();
alert(`STT supported by your browser: ${SpeechRecognition ? 'Yes' : 'No'}\n` +
`(TTS and speech recognition are not provided by llama.cpp)\n` +
`Note: STT requires HTTPS to work.`);
}}>[?]</a>
<button disabled=${generating.value} onclick=${talkActive.value ? talkStop : talk}>${talkActive.value ? "Stop Talking" : "Talk"}</button>
<div>
<input type="checkbox" id="send-on-talk" name="send-on-talk" checked="${sendOnTalk}" onchange=${(e) => sendOnTalk.value = e.target.checked} />
<label for="send-on-talk" style="line-height: initial;">Send after talking</label>
</div>
</div>
<div>
<label for="tts-voices" style="margin-right: 4px;line-height: initial;">Voice:</label>
<a href="#" style="cursor: help;" title="Help" onclick=${e => {
e.preventDefault();
alert(`TTS supported by your browser: ${tts ? 'Yes' : 'No'}\n(TTS and speech recognition are not provided by llama.cpp)`);
}}>[?]</a>
<label for="tts-voices" style="line-height: initial;">Bot Voice:</label>
<select id="tts-voices" name="tts-voices" onchange=${(e) => ttsVoice.value = e.target.value} style="max-width: 100px;">
<option value="" selected="${!ttsVoice.value}">None</option>
${[
Expand Down

0 comments on commit c5f12a1

Please sign in to comment.