From 4f3131b4a36d8e1557edb31d3754a431717dab7b Mon Sep 17 00:00:00 2001 From: yum Date: Fri, 30 Jun 2023 19:44:27 -0700 Subject: Add visual commit indicator to OBS browser source Circle goes red when speaking, grey when done. Ideally it would be in the top right portion of the browser source, but this is a good start. Also, hard-cap transcripts to 4096 chars. This prevents the STT from lagging during long sessions. --- BrowserSource/index.html | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'BrowserSource') diff --git a/BrowserSource/index.html b/BrowserSource/index.html index 000f366..96692cf 100644 --- a/BrowserSource/index.html +++ b/BrowserSource/index.html @@ -17,6 +17,24 @@ color: #89CFF0; -webkit-text-stroke: 3.0px #000; } + .red_circle { + height: 50px; + width: 50px; + background-color: red; + border-radius: 50%; + display: inline-block; + vertical-align: middle; + margin: 20px; + } + .grey_circle { + height: 50px; + width: 50px; + background-color: grey; + border-radius: 50%; + display: inline-block; + vertical-align: middle; + margin: 20px; + }

@@ -31,7 +49,15 @@ dataType: 'json', success: function(data) { var transcript = data.transcript; - $('#transcript').html(transcript); + var red_circle = ''; + var grey_circle = ''; + var transcript_w_circle = transcript; + if (data.is_final == 1) { + transcript_w_circle += grey_circle; + } else { + transcript_w_circle += red_circle; + } + $('#transcript').html(transcript_w_circle); $('#transcript').css("background-color", "#00000080"); }, error: function(jqXHR, textStatus, errorThrown) { -- cgit v1.2.3