Skip to content

Commit

Permalink
Merge pull request #200 from hyperaudio/199-abstract-deepgram-wc
Browse files Browse the repository at this point in the history 
199 abstract deepgram wc
  • Loading branch information
@maboa
maboa authored Nov 8, 2023
2 parents b545c90 + e185475 commit aa41ecc
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 122 deletions.
8 changes: 0 additions & 8 deletions error.svg
View file

This file was deleted.

40 changes: 40 additions & 0 deletions hyperaudio-deepgram-modal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html>
<body>
<div id="deepgram-modal-template">
<form id="deepgram-form" name="deepgram-form">
<div class="flex flex-col gap-4 w-full">
<label id="close-modal" for="transcribe-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
<h3 class="font-bold text-lg">Transcribe</h3>
<input id="token" type="text" placeholder="Deepgram token" class="input input-bordered w-full max-w-xs" />
<hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
<input id="media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
<span class="label-text">or</span>
<input id="file" name="file" type="file" class="file-input w-full max-w-xs" />
<hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />

<span class="label-text">Model</span>
<div>
<select id="language-model" name="language-model" placeholder="language-model" class="select select-bordered w-full max-w-xs">
</select>
</div>

<span class="label-text">Language</span>
<select id="language" name="language" placeholder="language" class="select select-bordered w-full max-w-xs">
</select>

<span class="label-text">Quality</span>
<select id="tier" name="tier" placeholder="tier" class="select select-bordered w-full max-w-xs">
<option value="base">Base</option>
<option value="enhanced">Enhanced (Better)</option>
<option value="nova">Nova (Best)</option>
</select>

</div>
<div class="modal-action">
<label id="transcribe-btn" for="transcribe-modal" class="btn btn-primary">Transcribe</label>
</div>
</form>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ <h3 class="text-lg font-bold">Topics</h3>
<input type="checkbox" id="transcribe-modal" class="modal-toggle" />
<div class="modal">
<div class="modal-box">
<deepgram-service></deepgram-service>
<deepgram-service templateUrl="hyperaudio-deepgram-modal.html"></deepgram-service>
</div>
</div>
</div>
Expand Down
148 changes: 77 additions & 71 deletions js/hyperaudio-lite-editor-deepgram.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
/*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
/*! Version 1.0.1 */

class DeepgramService extends HTMLElement {

constructor() {
super();
}

configureLanguage() {
const select = document.querySelector('#language');

populateLanguageDeepgram();

const selectModel = document.querySelector('#language-model');
const selectModel = document.querySelector('#deepgram-form #language-model');
const optionLanguageModel = {
"General": "general",
"Whisper (Tiny)": "whisper-tiny",
Expand Down Expand Up @@ -67,7 +69,7 @@ class DeepgramService extends HTMLElement {
}

updateDropdowns(event) {
let model = document.querySelector('#language-model').value;
let model = document.querySelector('#deepgram-form #language-model').value;

// update languages depending on model
if (model.startsWith("whisper")){
Expand Down Expand Up @@ -131,8 +133,8 @@ class DeepgramService extends HTMLElement {
"uk_general": ["base"]
}

let model = document.querySelector('#language-model').value;
let lang = document.querySelector('#language').value;
let model = document.querySelector('#deepgram-form #language-model').value;
let lang = document.querySelector('#deepgram-form #language').value;
let tiers = deepgramModelCompatibility[lang+"_"+model];

let options = document.querySelector('#tier').options;
Expand All @@ -146,7 +148,7 @@ class DeepgramService extends HTMLElement {
}

getData(event) {
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><center>Transcribing....</center><br/><img src="rings.svg" width="50" alt="transcribing" style="margin: auto; display: block;"></div>';
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><center>Transcribing....</center><br/><img src="'+transcribingSvg+'" width="50" alt="transcribing" style="margin: auto; display: block;"></div>';
const language = document.querySelector('#language').value;
const model = document.querySelector('#language-model').value;
let media = document.querySelector('#media').value;
Expand All @@ -167,61 +169,63 @@ class DeepgramService extends HTMLElement {
player.src = media;
fetchData(token, media, tier, language, model);
} else {
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="error.svg" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Please include both a link to the media and token in the form. </center></div>';
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="'+errorSvg+'" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Please include both a link to the media and token in the form. </center></div>';
}
}
}

connectedCallback() {
this.innerHTML = `
<form id="deepgram-form" name="deepgram-form">
<div class="flex flex-col gap-4 w-full">
<label id="close-modal" for="transcribe-modal" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
<h3 class="font-bold text-lg">Transcribe</h3>
<input id="token" type="text" placeholder="Deepgram token" class="input input-bordered w-full max-w-xs" />
<hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
<input id="media" type="text" placeholder="Link to media" class="input input-bordered w-full max-w-xs" />
<span class="label-text">or</span>
<input id="file" name="file" type="file" class="file-input w-full max-w-xs" />
<hr class="my-2 h-0 border border-t-0 border-solid border-neutral-700 opacity-50 dark:border-neutral-200" />
<span class="label-text">Model</span>
<div>
<select id="language-model" name="language-model" placeholder="language-model" class="select select-bordered w-full max-w-xs">
</select>
</div>
<span class="label-text">Language</span>
<select id="language" name="language" placeholder="language" class="select select-bordered w-full max-w-xs">
</select>
<span class="label-text">Quality</span>
<select id="tier" name="tier" placeholder="tier" class="select select-bordered w-full max-w-xs">
<option value="base">Base</option>
<option value="enhanced">Enhanced (Better)</option>
<option value="nova">Nova (Best)</option>
</select>
</div>
<div class="modal-action">
<label id="transcribe-btn" for="transcribe-modal" class="btn btn-primary">Transcribe</label>
</div>
</form>`;

document.querySelector('#file').addEventListener('change',this.clearMediaUrl);
document.querySelector('#media').addEventListener('change',this.clearFilePicker);
document.querySelector('#transcribe-btn').addEventListener('click', this.getData);
document.querySelector('#file').addEventListener('change', this.updatePlayerWithLocalFile);
document.querySelector('#language-model').addEventListener('change', this.updateDropdowns);
document.querySelector('#language-model').addEventListener('change', this.updateTierDropdown);
document.querySelector('#language').addEventListener('change', this.updateTierDropdown);

this.configureLanguage();

let template = null;
let modal = this;

const templateUrl = this.getAttribute("templateUrl");
const templateSelector = this.getAttribute("templateSelector");

console.log(templateUrl);
console.log(templateSelector);

if (templateUrl !== null) {
fetch(templateUrl)
.then(function(response) {
// When the page is loaded convert it to text
return response.text()
})
.then(function(html) {
// Initialize the DOM parser
let parser = new DOMParser();

// Parse the text
template = parser.parseFromString(html, "text/html");
let deepgramTempl = template.querySelector('#deepgram-modal-template').cloneNode(true);
modal.innerHTML = deepgramTempl.innerHTML;
modal.configureLanguage();
addModalEventListeners(modal);
})
.catch(function(err) {
console.log('Template error: ', err);
});
} else {
modal.innerHTML = document.querySelector(templateSelector).innerHTML;
document.querySelector(templateSelector).remove();
modal.configureLanguage();
addModalEventListeners(modal);
}
}
}

customElements.define('deepgram-service', DeepgramService);

function addModalEventListeners(modal) {
document.querySelector('#file').addEventListener('change',modal.clearMediaUrl);
document.querySelector('#media').addEventListener('change',modal.clearFilePicker);
document.querySelector('#transcribe-btn').addEventListener('click', modal.getData);
document.querySelector('#file').addEventListener('change', modal.updatePlayerWithLocalFile);
document.querySelector('#language-model').addEventListener('change', modal.updateDropdowns);
document.querySelector('#language-model').addEventListener('change', modal.updateTierDropdown);
document.querySelector('#language').addEventListener('change', modal.updateTierDropdown);
}

function fetchData(token, media, tier, language, model) {

let url = null;
Expand Down Expand Up @@ -263,14 +267,6 @@ function fetchData(token, media, tier, language, model) {
displayNoWordsError();
} else {
parseData(json);
document.querySelector("#summary").innerHTML = extractSummary(json);
document.querySelector("#topics").innerHTML = extractTopics(json).join(", ");

language = getLanguageCode(json);

let track = document.querySelector('#hyperplayer-vtt');
track.label = language;
track.srcLang = language;
}
})
.catch(function (error) {
Expand Down Expand Up @@ -352,14 +348,6 @@ function fetchDataLocal(token, file, tier, language, model) {
displayNoWordsError();
} else {
parseData(json);
document.querySelector("#summary").innerHTML = extractSummary(json);
document.querySelector("#topics").innerHTML = extractTopics(json).join(", ");

language = getLanguageCode(json);

let track = document.querySelector('#hyperplayer-vtt');
track.label = language;
track.srcLang = language;
}
})
.catch(function (error) {
Expand Down Expand Up @@ -388,24 +376,25 @@ function fetchDataLocal(token, file, tier, language, model) {

function displayError(error, tier) {
if (error.indexOf("401") > 0 || (error.indexOf("400") > 0 && tier === "base")) {
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="error.svg" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>It appears that the media URL does not exist<br/> or the token is invalid.</center></div>';
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="'+errorSvg+'" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>It appears that the media URL does not exist<br/> or the token is invalid.</center></div>';
return true;
}
if (error.indexOf("402") > 0) {
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="error.svg" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>It appears that the token is invalid.</center></div>';
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="'+errorSvg+'" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>It appears that the token is invalid.</center></div>';
return true;
}
return false;
}

function displayGenericError() {
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="error.svg" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>An unexpected error has occurred.</center></div>';
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="'+errorSvg+'" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>An unexpected error has occurred.</center></div>';
}

function displayNoWordsError() {
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="error.svg" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>No words were detected.<br/>Please verify that audio contains speech.</center></div>';
document.querySelector('#hypertranscript').innerHTML = '<div class="vertically-centre"><img src="'+errorSvg+'" width="50" alt="error" style="margin: auto; display: block;"><br/><center>Sorry.<br/>No words were detected.<br/>Please verify that audio contains speech.</center></div>';
}


function getLanguageCode(json){
// prepare the VTT track so that the correct language is defined

Expand Down Expand Up @@ -439,6 +428,20 @@ function parseData(json) {
let wordsInPara = 0;
let showDiarization = true;

if (document.querySelector("#summary") !== null) {
document.querySelector("#summary").innerHTML = extractSummary(json);
}

if (document.querySelector("#topics") !== null) {
document.querySelector("#topics").innerHTML = extractTopics(json).join(", ");
}

language = getLanguageCode(json);

let track = document.querySelector('#hyperplayer-vtt');
track.label = language;
track.srcLang = language;

wordData.forEach((element, index) => {

let currentWord = punctuatedWords[index];
Expand Down Expand Up @@ -676,3 +679,6 @@ function populateLanguageDeepgramRestricted() {
document.querySelector("#tier").disabled=false;
}

const transcribingSvg = "data:image/svg+xml,%3Csvg width='45' height='45' viewBox='0 0 45 45' xmlns='http://www.w3.org/2000/svg' stroke='%23000'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='6' stroke-opacity='0'%3E%3Canimate attributeName='r' begin='1.5s' dur='3s' values='6;22' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='1.5s' dur='3s' values='1;0' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-width' begin='1.5s' dur='3s' values='2;0' calcMode='linear' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='6' stroke-opacity='0'%3E%3Canimate attributeName='r' begin='3s' dur='3s' values='6;22' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='3s' dur='3s' values='1;0' calcMode='linear' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-width' begin='3s' dur='3s' values='2;0' calcMode='linear' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='8'%3E%3Canimate attributeName='r' begin='0s' dur='1.5s' values='6;1;2;3;4;5;6' calcMode='linear' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E";

const errorSvg = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='256' height='256' viewBox='0 0 256 256' xml:space='preserve'%3E%3Cdefs%3E%3C/defs%3E%3Cg style='stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;' transform='translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)' %3E%3Cpath d='M 85.429 85.078 H 4.571 c -1.832 0 -3.471 -0.947 -4.387 -2.533 c -0.916 -1.586 -0.916 -3.479 0 -5.065 L 40.613 7.455 C 41.529 5.869 43.169 4.922 45 4.922 c 0 0 0 0 0 0 c 1.832 0 3.471 0.947 4.386 2.533 l 40.429 70.025 c 0.916 1.586 0.916 3.479 0.001 5.065 C 88.901 84.131 87.261 85.078 85.429 85.078 z M 45 7.922 c -0.747 0 -1.416 0.386 -1.79 1.033 L 2.782 78.979 c -0.373 0.646 -0.373 1.419 0 2.065 c 0.374 0.647 1.042 1.033 1.789 1.033 h 80.858 c 0.747 0 1.416 -0.387 1.789 -1.033 s 0.373 -1.419 0 -2.065 L 46.789 8.955 C 46.416 8.308 45.747 7.922 45 7.922 L 45 7.922 z M 45 75.325 c -4.105 0 -7.446 -3.34 -7.446 -7.445 s 3.34 -7.445 7.446 -7.445 s 7.445 3.34 7.445 7.445 S 49.106 75.325 45 75.325 z M 45 63.435 c -2.451 0 -4.446 1.994 -4.446 4.445 s 1.995 4.445 4.446 4.445 s 4.445 -1.994 4.445 -4.445 S 47.451 63.435 45 63.435 z M 45 57.146 c -3.794 0 -6.882 -3.087 -6.882 -6.882 V 34.121 c 0 -3.794 3.087 -6.882 6.882 -6.882 c 3.794 0 6.881 3.087 6.881 6.882 v 16.144 C 51.881 54.06 48.794 57.146 45 57.146 z M 45 30.239 c -2.141 0 -3.882 1.741 -3.882 3.882 v 16.144 c 0 2.141 1.741 3.882 3.882 3.882 c 2.14 0 3.881 -1.741 3.881 -3.882 V 34.121 C 48.881 31.98 47.14 30.239 45 30.239 z' style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform=' matrix(1 0 0 1 0 0) ' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E";
Loading

0 comments on commit aa41ecc

Please sign in to comment.