feat: frontend, add a table with all entries from language df and pick the and their API

aip_trainer/lambdas/lambdaGetSample.py

@@ -4,8 +4,9 @@ import random
 from pathlib import Path
 
 import epitran
+import pandas as pd
 
-from aip_trainer import PROJECT_ROOT_FOLDER
+from aip_trainer import PROJECT_ROOT_FOLDER, app_logger
 from aip_trainer.models import RuleBasedModels
 
 
@@ -16,25 +17,33 @@ class TextDataset:
         self.language = language
 
     def __getitem__(self, idx):
-
-        if self.language == 'de':
-            line = [self.table_dataframe['de_sentence'].iloc[idx]]
-        elif self.language == 'en':
-            line = [self.table_dataframe['en_sentence'].iloc[idx]]
-        else:
-            line = [self.table_dataframe['sentence'].iloc[idx]]
-        return line
+        language_sentence = f"{self.language}_sentence" if self.language != '-' else 'sentence'
+        language_series = self.table_dataframe[language_sentence]
+        return [language_series.iloc[idx]]
 
     def __len__(self):
         return self.number_of_samples
 
+    def get_category_from_df_by_language(self, language: str, category_value:int):
+        selector = self.table_dataframe[f"{language}_category"] == category_value
+        df_by_category = self.table_dataframe[selector]
+        return df_by_category
+
+    def get_random_sample_from_df(self, language: str, category_value:int):
+        app_logger.info(f"language={language}, category_value={category_value}.")
+        choice = self.table_dataframe.sample(n=1)
+        if category_value !=0:
+            df_language_filtered_by_category_and_language = self.get_category_from_df_by_language(language, category_value)
+            choice = df_language_filtered_by_category_and_language.sample(n=1)
+        return [choice[f"{language}_sentence"].iloc[0]]
+
 
 sample_folder = Path(PROJECT_ROOT_FOLDER / "aip_trainer" / "lambdas")
 lambda_database = {}
 lambda_ipa_converter = {}
 
-with open(sample_folder / 'data_de_en_2.pickle', 'rb') as handle:
-    df = pickle.load(handle)
+with open(sample_folder / 'data_de_en_with_categories.json', 'r') as src:
+    df = pd.read_json(src)
 
 lambda_database['de'] = TextDataset(df, 'de')
 lambda_database['en'] = TextDataset(df, 'en')
@@ -45,40 +54,31 @@ lambda_ipa_converter['en'] = RuleBasedModels.EngPhonemConverter()
 
 
 def lambda_handler(event, context):
-
     body = json.loads(event['body'])
 
-    category = int(body['category'])
+    try:
+        category = int(body['category'])
+    except KeyError:
+        category = 0
 
     language = body['language']
-
-    sample_in_category = False
-
-    while not sample_in_category:
-        valid_sequence = False
-        while not valid_sequence:
-            try:
-                sample_idx = random.randint(0, len(lambda_database[language]))
-                current_transcript = lambda_database[language][
-                    sample_idx]
-                valid_sequence = True
-            except:
-                pass
-
-        sentence_category = getSentenceCategory(
-            current_transcript[0])
-
-        sample_in_category = (sentence_category ==
-                              category) or category == 0
-
-    translated_trascript = ""
-
-    current_ipa = lambda_ipa_converter[language].convertToPhonem(
-        current_transcript[0])
-
-    result = {'real_transcript': current_transcript,
-              'ipa_transcript': current_ipa,
-              'transcript_translation': translated_trascript}
+    try:
+        sample_idx = int(body['idx'])
+    except KeyError:
+        sample_idx = None
+
+    app_logger.info(f"category={category}, language={language}, sample_idx={sample_idx}.")
+    lambda_df_lang = lambda_database[language]
+    current_transcript = lambda_df_lang[sample_idx] if sample_idx is not None else lambda_df_lang.get_random_sample_from_df(language, category)
+    # sentence_category = getSentenceCategory(current_transcript[0])
+    current_ipa = lambda_ipa_converter[language].convertToPhonem(current_transcript[0])
+
+    app_logger.info(f"real_transcript={current_transcript}, ipa_transcript={current_ipa}.")
+    result = {
+        'real_transcript': current_transcript,
+        'ipa_transcript': current_ipa,
+        'transcript_translation': ""
+    }
 
     return json.dumps(result)
 
@@ -86,6 +86,26 @@ def lambda_handler(event, context):
 def getSentenceCategory(sentence) -> int:
     number_of_words = len(sentence.split())
     categories_word_limits = [0, 8, 20, 100000]
-    for category in range(len(categories_word_limits)-1):
+    for category in range(len(categories_word_limits) - 1):
         if categories_word_limits[category] < number_of_words <= categories_word_limits[category + 1]:
-            return category+1
+            return category + 1
+
+
+if __name__ == "__main__":
+    import pandas as pd
+    with open(sample_folder / 'data_de_en_2.pickle', 'rb') as handle:
+        df = pickle.load(handle)
+        pass
+        df["de_category"] = df["de_sentence"].apply(getSentenceCategory)
+        print("de_category added")
+        df["en_category"] = df["en_sentence"].apply(getSentenceCategory)
+        print("en_category added")
+    df_json = df.to_json()
+    with open(sample_folder / 'data_de_en_with_categories.json', 'w') as dst:
+        dst.write(df_json)
+        print("data_de_en_with_categories.json written")
+    with open(sample_folder / 'data_de_en_with_categories.json', 'r') as src:
+        jj = json.load(src)
+        print("jj:", jj)
+        df2 = pd.read_json(json.dumps(jj))
+        print(df2)

aip_trainer/lambdas/lambdaSpeechToScore.py

@@ -35,7 +35,7 @@ def lambda_handler(event, context):
             'headers': {
                 'Access-Control-Allow-Headers': '*',
                 'Access-Control-Allow-Credentials': "true",
-                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Origin': 'http://127.0.0.1:3000/',
                 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
             },
             'body': ''

aip_trainer/lambdas/lambdaTTS.py

@@ -37,7 +37,7 @@ def lambda_handler(event, context):
             'statusCode': 200,
             'headers': {
                 'Access-Control-Allow-Headers': '*',
-                'Access-Control-Allow-Origin': '*',
+                'Access-Control-Allow-Origin': 'http://127.0.0.1:3000/',
                 'Access-Control-Allow-Methods': 'OPTIONS,POST,GET'
             },
             'body': json.dumps(

static/css/style-new.css

@@ -127,9 +127,9 @@ a.disabled {
 	display: block;
 	position: absolute;
 	left: 2%;
-	top: 18%;
+	top: 15%;
 	transform: translate(-0%, -0%);
-	height: 59%;
+	height: 45%;
 	width: 96%;
 	max-width: 96%;
 	background: #ffff;
@@ -138,13 +138,30 @@ a.disabled {
 	box-shadow: 0 0 20px 8px #d0d0d0;
 }
 
+.container2 {
+	display: block;
+	position: absolute;
+	left: 2%;
+	top: 63%;
+	transform: translate(-0%, -0%);
+	height: 30%;
+	width: 96%;
+	max-width: 96%;
+	background: #ffff;
+	overflow: hidden;
+	border-radius: 20px;
+	box-shadow: 0 0 20px 8px #d0d0d0;
+	overflow: scroll;
+    max-height: 30em;
+}
+
 .container-small {
 	position: fixed;
-	left: 68%;
-	top: 79%;
+	left: 73%;
+	top: 95%;
 	transform: translate(-0%, -0%);
-	height: 7%;
-	width: 30%;
+	height: 4%;
+	width: 15%;
 	background: #ffff;
 	overflow: hidden;
 	border-radius: 20px;
@@ -223,8 +240,8 @@ a.disabled {
 
 .mic-button-div {
 	position: fixed;
-	left: 50%;
-	top: 80%
+	left: 60%;
+	top: 5%
 }
 
 /*############### Drop-down ############# */
@@ -345,7 +362,7 @@ a.disabled {
 .credits-icon-div {
 	position: fixed;
 	left: 90.5%;
-	top: 95%;
+	top: 96%;
 	font-size: x-small;
 }
 
@@ -384,9 +401,9 @@ a.disabled {
 		display: block;
 		position: absolute;
 		left: 2%;
-		top: 22%;
+		top: 15%;
 		transform: translate(-0%, -0%);
-		height: 55%;
+		height: 85%;
 		width: 96%;
 		max-width: 96%;
 		background: #ffff;
@@ -395,6 +412,23 @@ a.disabled {
 		box-shadow: 0 0 20px 8px #d0d0d0;
 	}
 
+    .container2 {
+        display: block;
+        position: absolute;
+        left: 2%;
+        top: 63%;
+        transform: translate(-0%, -0%);
+        height: 30%;
+        width: 96%;
+        max-width: 96%;
+        background: #ffff;
+        overflow: hidden;
+        border-radius: 20px;
+        box-shadow: 0 0 20px 8px #d0d0d0;
+        overflow: scroll;
+        max-height: 30em;
+    }
+
 	.icon-text {
 		font-size: 0.8em !important;
 		text-align: center;
@@ -427,7 +461,7 @@ a.disabled {
 	.mic-button-div {
 		position: fixed;
 		left: 40%;
-		top: 80%
+		top: 5%
 	}
 
 	.link-icon-div {
@@ -468,4 +502,4 @@ a.disabled {
 		font-size: 0.8em;
 	}
 
-}
+}

static/javascript/callbacks.js

@@ -1,5 +1,3 @@
-
-
 // Audio context initialization
 let mediaRecorder, audioChunks, audioBlob, stream, audioRecorded;
 const ctx = new AudioContext();
@@ -25,12 +23,14 @@ let currentSoundRecorded = false;
 let currentText, currentIpa, real_transcripts_ipa, matched_transcripts_ipa;
 let wordCategories;
 let startTime, endTime;
+let allSamples = {};
+let currentSamplesObj = {};
+var timeout = null
 
 // API related variables 
 let AILanguage = "de"; // Standard is German
 
-
-let STScoreAPIKey = 'rll5QsTiv83nti99BW6uCmvs9BDVxSB39SVFceYb'; // Public Key. If, for some reason, you would like a private one, send-me a message and we can discuss some possibilities
+let STScoreAPIKey = '';
 let apiMainPathSample = '';// 'http://127.0.0.1:3001';// 'https://a3hj0l2j2m.execute-api.eu-central-1.amazonaws.com/Prod';
 let apiMainPathSTS = '';// 'https://wrg7ayuv7i.execute-api.eu-central-1.amazonaws.com/Prod';
 
@@ -57,8 +57,6 @@ const unblockUI = () => {
 
     if (currentSoundRecorded)
         document.getElementById("playRecordedAudio").classList.remove('disabled');
-
-
 };
 
 const blockUI = () => {
@@ -79,24 +77,24 @@ const UIError = () => {
     document.getElementById("buttonNext").onclick = () => getNextSample(); //If error, user can only try to get a new sample
     document.getElementById("buttonNext").style["background-color"] = '#58636d';
 
-    document.getElementById("recorded_ipa_script").innerHTML = "";
-    document.getElementById("single_word_ipa_pair").innerHTML = "Error";
-    document.getElementById("ipa_script").innerHTML = "Error"
+    document.getElementById("recorded_ipa_script").innerText = "";
+    document.getElementById("single_word_ipa_pair").innerText = "Error";
+    document.getElementById("ipa_script").innerText = "Error"
 
-    document.getElementById("main_title").innerHTML = 'Server Error';
-    document.getElementById("original_script").innerHTML = 'Server error. Either the daily quota of the server is over or there was some internal error. You can try to generate a new sample in a few seconds. If the error persist, try comming back tomorrow or download the local version from Github :)';
+    document.getElementById("main_title").innerText = 'Server Error';
+    document.getElementById("original_script").innerText = 'Server error. Either the daily quota of the server is over or there was some internal error. You can try to generate a new sample in a few seconds. If the error persist, try comming back tomorrow or download the local version from Github :)';
 };
 
 const UINotSupported = () => {
     unblockUI();
 
-    document.getElementById("main_title").innerHTML = "Browser unsupported";
+    document.getElementById("main_title").innerText = "Browser unsupported";
 
 }
 
 const UIRecordingError = () => {
     unblockUI();
-    document.getElementById("main_title").innerHTML = "Recording error, please try again or restart page.";
+    document.getElementById("main_title").innerText = "Recording error, please try again or restart page.";
     startMediaDevice();
 }
 
@@ -112,19 +110,19 @@ function updateScore(currentPronunciationScore) {
 }
 
 const cacheSoundFiles = async () => {
-    await fetch(soundsPath + '/ASR_good.wav').then(data => data.arrayBuffer()).
+    await fetch(soundsPath + '/ASR_good.wav').then(dataSound1 => dataSound1.arrayBuffer()).
         then(arrayBuffer => ctx.decodeAudioData(arrayBuffer)).
         then(decodeAudioData => {
             soundFileGood = decodeAudioData;
         });
 
-    await fetch(soundsPath + '/ASR_okay.wav').then(data => data.arrayBuffer()).
+    await fetch(soundsPath + '/ASR_okay.wav').then(dataSound2 => dataSound2.arrayBuffer()).
         then(arrayBuffer => ctx.decodeAudioData(arrayBuffer)).
         then(decodeAudioData => {
             soundFileOkay = decodeAudioData;
         });
 
-    await fetch(soundsPath + '/ASR_bad.wav').then(data => data.arrayBuffer()).
+    await fetch(soundsPath + '/ASR_bad.wav').then(dataSound3 => dataSound3.arrayBuffer()).
         then(arrayBuffer => ctx.decodeAudioData(arrayBuffer)).
         then(decodeAudioData => {
             soundFileBad = decodeAudioData;
@@ -132,28 +130,7 @@ const cacheSoundFiles = async () => {
 }
 
 const getNextSample = async () => {
-
-
-
-    blockUI();
-
-    if (!serverIsInitialized)
-        await initializeServer();
-
-    if (!serverWorking) {
-        UIError();
-        return;
-    }
-
-    if (soundFileBad == null)
-        cacheSoundFiles();
-
-
-
-    updateScore(parseFloat(document.getElementById("pronunciation_accuracy").innerHTML));
-
-    document.getElementById("main_title").innerHTML = "Processing new sample...";
-
+    await prepareUiForNextSample()
 
     if (document.getElementById('lengthCat1').checked) {
         sample_difficult = 0;
@@ -178,44 +155,60 @@ const getNextSample = async () => {
             body: JSON.stringify({
                 "category": sample_difficult.toString(), "language": AILanguage
             }),
-            headers: { "X-Api-Key": STScoreAPIKey }
-        }).then(res => res.json()).
-            then(data => {
+        }).then(res => res.json()).then(dataFromNextSample => {
+            // console.debug(`getNextSample:: dataFromNextSample: `, typeof dataFromNextSample, "=>", dataFromNextSample, "#");
+            populateSampleById(dataFromNextSample)
+        })
+    }
+    catch {
+        UIError();
+    }
 
+};
 
+const prepareUiForNextSample = async () => {
+    blockUI();
 
-                let doc = document.getElementById("original_script");
-                currentText = data.real_transcript;
-                doc.innerHTML = currentText;
+    if (!serverIsInitialized)
+        await initializeServer();
 
-                currentIpa = data.ipa_transcript
+    if (!serverWorking) {
+        UIError();
+        return;
+    }
 
-                let doc_ipa = document.getElementById("ipa_script");
-                doc_ipa.innerHTML = "/ " + currentIpa + " /";
+    if (soundFileBad == null)
+        cacheSoundFiles();
 
-                document.getElementById("recorded_ipa_script").innerHTML = ""
-                document.getElementById("pronunciation_accuracy").innerHTML = "";
-                document.getElementById("single_word_ipa_pair").innerHTML = "Reference | Spoken"
-                document.getElementById("section_accuracy").innerHTML = "| Score: " + currentScore.toString() + " - (" + currentSample.toString() + ")";
-                currentSample += 1;
+    updateScore(parseFloat(document.getElementById("pronunciation_accuracy").innerHTML));
 
-                document.getElementById("main_title").innerHTML = page_title;
+    document.getElementById("main_title").innerText = "Processing new sample...";
+}
 
-                document.getElementById("translated_script").innerHTML = data.transcript_translation;
+const populateSampleById = (dataById) => {
+    // console.debug(`populateSampleById:: dataById: `, typeof dataById, "=>", dataById, "#");
+    let doc = document.getElementById("original_script");
+    currentText = dataById.real_transcript;
+    doc.innerText = currentText;
+    currentIpa = dataById.ipa_transcript
 
-                currentSoundRecorded = false;
-                unblockUI();
-                document.getElementById("playRecordedAudio").classList.add('disabled');
+    let doc_ipa = document.getElementById("ipa_script");
+    doc_ipa.innerText = `/ ${String(currentIpa)} /`
 
-            })
-    }
-    catch
-    {
-        UIError();
-    }
+    document.getElementById("recorded_ipa_script").innerText = ""
+    document.getElementById("pronunciation_accuracy").innerText = "";
+    document.getElementById("single_word_ipa_pair").innerText = "Reference | Spoken"
+    // document.getElementById("section_accuracy").innerText = "| Score: " + currentScore.toString() + " - (" + currentSample.toString() + ")";
+    document.getElementById("section_accuracy").innerText = `| Score: ${currentScore.toString()} - sample n: ${currentSample.toString()}`;
+    currentSample += 1;
 
+    document.getElementById("main_title").innerText = page_title;
+    document.getElementById("translated_script").innerText = dataById.transcript_translation;
 
-};
+    currentSoundRecorded = false;
+    unblockUI();
+    document.getElementById("playRecordedAudio").classList.add('disabled');
+}
 
 const updateRecordingState = async () => {
     if (isRecording) {
@@ -229,15 +222,15 @@ const updateRecordingState = async () => {
 }
 
 const generateWordModal = (word_idx) => {
-
-    document.getElementById("single_word_ipa_pair").innerHTML = wrapWordForPlayingLink(real_transcripts_ipa[word_idx], word_idx, false, "black")
-        + ' | ' + wrapWordForPlayingLink(matched_transcripts_ipa[word_idx], word_idx, true, accuracy_colors[parseInt(wordCategories[word_idx])])
+    innerText0 = wrapWordForPlayingLink(real_transcripts_ipa[word_idx], word_idx, false, "black")
+    innerText1 = wrapWordForPlayingLink(matched_transcripts_ipa[word_idx], word_idx, true, accuracy_colors[parseInt(wordCategories[word_idx])])
+    document.getElementById("single_word_ipa_pair").innerText = `${innerText0} | ${innerText1}`
 }
 
 const recordSample = async () => {
 
-    document.getElementById("main_title").innerHTML = "Recording... click again when done speaking";
-    document.getElementById("recordIcon").innerHTML = 'pause_presentation';
+    document.getElementById("main_title").innerText = "Recording... click again when done speaking";
+    document.getElementById("recordIcon").innerText = 'pause_presentation';
     blockUI();
     document.getElementById("recordAudio").classList.remove('disabled');
     audioChunks = [];
@@ -251,17 +244,16 @@ const changeLanguage = (language, generateNewSample = false) => {
     AILanguage = language;
     languageFound = false;
     let languageIdentifier, languageName;
+    document.getElementById("field-filter-samples").value = "";
     switch (language) {
         case 'de':
-
-            document.getElementById("languageBox").innerHTML = "German";
+            document.getElementById("languageBox").innerText = "German";
             languageIdentifier = 'de';
             languageName = 'Anna';
             break;
 
         case 'en':
-
-            document.getElementById("languageBox").innerHTML = "English";
+            document.getElementById("languageBox").innerText = "English";
             languageIdentifier = 'en';
             languageName = 'Daniel';
             break;
@@ -285,6 +277,7 @@ const changeLanguage = (language, generateNewSample = false) => {
             }
         }
     }
+    getTableFromSamples(allSamples, `${AILanguage}_sentence`);
     if (generateNewSample)
         getNextSample();
 }
@@ -303,10 +296,10 @@ const startMediaDevice = () => {
         stream = _stream
         mediaRecorder = new MediaRecorder(stream);
 
-        let currentSamples = 0
+        let currentSamplesN = 0
         mediaRecorder.ondataavailable = event => {
 
-            currentSamples += event.data.length
+            currentSamplesN += event.data.length
             audioChunks.push(event.data);
         };
 
@@ -334,29 +327,28 @@ const startMediaDevice = () => {
                 await fetch(apiMainPathSTS + '/GetAccuracyFromRecordedAudio', {
                     method: "post",
                     body: JSON.stringify({ "title": currentText[0], "base64Audio": audioBase64, "language": AILanguage }),
-                    headers: { "X-Api-Key": STScoreAPIKey }
 
                 }).then(res => res.json()).
-                    then(data => {
+                    then(mediaData => {
 
                         if (playAnswerSounds)
-                            playSoundForAnswerAccuracy(parseFloat(data.pronunciation_accuracy))
+                            playSoundForAnswerAccuracy(parseFloat(mediaData.pronunciation_accuracy))
 
-                        document.getElementById("recorded_ipa_script").innerHTML = "/ " + data.ipa_transcript + " /";
+                        document.getElementById("recorded_ipa_script").innerText = `/ ${mediaData.ipa_transcript} /`
                         document.getElementById("recordAudio").classList.add('disabled');
-                        document.getElementById("main_title").innerHTML = page_title;
-                        document.getElementById("pronunciation_accuracy").innerHTML = data.pronunciation_accuracy + "%";
+                        document.getElementById("main_title").innerText = page_title;
+                        document.getElementById("pronunciation_accuracy").innerText = `${mediaData.pronunciation_accuracy}%`;
 
-                        lettersOfWordAreCorrect = data.is_letter_correct_all_words.split(" ")
+                        lettersOfWordAreCorrect = mediaData.is_letter_correct_all_words.split(" ")
 
 
-                        startTime = data.start_time;
-                        endTime = data.end_time;
+                        startTime = mediaData.start_time;
+                        endTime = mediaData.end_time;
 
 
-                        real_transcripts_ipa = data.real_transcripts_ipa.split(" ")
-                        matched_transcripts_ipa = data.matched_transcripts_ipa.split(" ")
-                        wordCategories = data.pair_accuracy_category.split(" ")
+                        real_transcripts_ipa = mediaData.real_transcripts_ipa.split(" ")
+                        matched_transcripts_ipa = mediaData.matched_transcripts_ipa.split(" ")
+                        wordCategories = mediaData.pair_accuracy_category.split(" ")
                         let currentTextWords = currentText[0].split(" ")
 
                         coloredWords = "";
@@ -413,9 +405,9 @@ const playSoundForAnswerAccuracy = async (accuracy) => {
 
 const playAudio = async () => {
 
-    document.getElementById("main_title").innerHTML = "Generating sound...";
+    document.getElementById("main_title").innerText = "Generating sound...";
     playWithMozillaApi(currentText[0]);
-    document.getElementById("main_title").innerHTML = "Current Sound was played";
+    document.getElementById("main_title").innerText = "Current Sound was played";
 
 };
 
@@ -436,7 +428,7 @@ const playRecording = async (start = null, end = null) => {
             audioRecorded.addEventListener("ended", function () {
                 audioRecorded.currentTime = 0;
                 unblockUI();
-                document.getElementById("main_title").innerHTML = "Recorded Sound was played";
+                document.getElementById("main_title").innerText = "Recorded Sound was played";
             });
             await audioRecorded.play();
 
@@ -450,7 +442,7 @@ const playRecording = async (start = null, end = null) => {
                 unblockUI();
                 audioRecorded.pause();
                 audioRecorded.currentTime = 0;
-                document.getElementById("main_title").innerHTML = "Recorded Sound was played";
+                document.getElementById("main_title").innerText = "Recorded Sound was played";
             }, endTimeInMs);
 
         }
@@ -473,15 +465,15 @@ const playNativeAndRecordedWord = async (word_idx) => {
 const stopRecording = () => {
     isRecording = false
     mediaRecorder.stop()
-    document.getElementById("main_title").innerHTML = "Processing audio...";
+    document.getElementById("main_title").innerText = "Processing audio...";
 }
 
 
 const playCurrentWord = async (word_idx) => {
 
-    document.getElementById("main_title").innerHTML = "Generating word...";
+    document.getElementById("main_title").innerText = "Generating word...";
     playWithMozillaApi(currentText[0].split(' ')[word_idx]);
-    document.getElementById("main_title").innerHTML = "Word was played";
+    document.getElementById("main_title").innerText = "Word was played";
 }
 
 // TODO: Check if fallback is correct
@@ -534,19 +526,19 @@ const wrapWordForPlayingLink = (word, word_idx, isFromRecording, word_accuracy_c
 }
 
 const wrapWordForIndividualPlayback = (word, word_idx) => {
-
-
     return '<a onmouseover="generateWordModal(' + word_idx.toString() + ')" style = " white-space:nowrap; " href="javascript:playNativeAndRecordedWord(' + word_idx.toString() + ')"  >' + word + '</a> '
-
 }
 
 // ########## Function to initialize server ###############
 // This is to try to avoid aws lambda cold start 
 try {
+    fetch(apiMainPathSTS + '/getAllSamples').then(res => res.json()).then(dataAllSamples => {
+        populateAllSamples(dataAllSamples);
+        getTableFromSamples(dataAllSamples, `${AILanguage}_sentence`);
+    });
     fetch(apiMainPathSTS + '/GetAccuracyFromRecordedAudio', {
         method: "post",
         body: JSON.stringify({ "title": '', "base64Audio": '', "language": AILanguage }),
-        headers: { "X-Api-Key": STScoreAPIKey }
 
     });
 }
@@ -555,7 +547,7 @@ catch { }
 const initializeServer = async () => {
 
     valid_response = false;
-    document.getElementById("main_title").innerHTML = 'Initializing server, this may take up to 2 minutes...';
+    document.getElementById("main_title").innerText = 'Initializing server, this may take up to 2 minutes...';
     let number_of_tries = 0;
     let maximum_number_of_tries = 4;
 
@@ -569,16 +561,77 @@ const initializeServer = async () => {
             await fetch(apiMainPathSTS + '/GetAccuracyFromRecordedAudio', {
                 method: "post",
                 body: JSON.stringify({ "title": '', "base64Audio": '', "language": AILanguage }),
-                headers: { "X-Api-Key": STScoreAPIKey }
 
-            }).then(
-                valid_response = true);
+            }).then(valid_response = true);
             serverIsInitialized = true;
         }
-        catch
-        {
+        catch {
             number_of_tries += 1;
         }
     }
 }
 
+const populateAllSamples = async (allData) => {
+    allSamples = allData;
+}
+
+const getTableFromSamples = async (obj, lang, isFiltered = false) => {
+    let table = document.getElementById("field-samples");
+    table.innerHTML = "";
+    let objLang = obj[lang];
+    // let lenAllSamples = Object.entries(allSamples[lang]).length;
+    // console.debug(`getTableFromSamples, isFiltered: ${isFiltered}, typeof objLang: ${typeof objLang}, lenAllSamples:${lenAllSamples}, objLang.length: `, Object.entries(objLang).length, "#", objLang);
+    for (let key2 in objLang) {
+        var tr = createTableRow(`${key2}: ${objLang[key2]} || ${lang}.`, key2, isFiltered);
+        table.appendChild(tr);
+    }
+    table.appendChild(tr);
+}
+
+const createTableRow = (contentRow, sampleIdx, isFiltered = false) => {
+    var tr = document.createElement('tr');
+    tr.append(`${contentRow}`);
+    tr.onclick = async function () {
+        await prepareUiForNextSample()
+        // console.debug(`createTableRow:: ${isFiltered}, sampleIdx: `, sampleIdx);
+        await fetch(apiMainPathSample + '/getSample', {
+            method: "post",
+            body: JSON.stringify({
+                "language": AILanguage, "idx": sampleIdx
+            }),
+        }).then(res => {
+            let res2json = res.json()
+            // console.debug(`createTableRow:: ${isFiltered}, res2json: `, typeof res2json, "=>", res2json, "#");
+            return res2json
+        }).then(dataOnRowCreation => {
+            // console.debug(`createTableRow:: ${isFiltered}, dataOnRowCreation: `, typeof dataOnRowCreation, "=>", dataOnRowCreation, "#");
+            populateSampleById(dataOnRowCreation)
+            tr.style["background-color"] = "#f0f0f0";
+        })
+    };
+    return tr;
+}
+
+const filterAllSamples = async (obj, filter, lang) => {
+    if (filter == "") {
+        currentSamplesObj = {...obj}
+    };
+    objByLAng = obj[lang];
+    const filtered = Object.entries(objByLAng).filter(([key, value]) => value.toLowerCase().includes(filter));
+    currentSamplesObj = {
+        [lang]: Object.entries(filtered).map(([key, value]) => value[1])
+    };
+}
+
+// todo: fix the request from the rows filtered not working
+$(document).ready(function(){
+    $("#field-filter-samples").on("keyup", function(e) {
+        e.preventDefault();
+        var keycode = (e.keyCode ? e.keyCode : e.which);
+        if (keycode === 13 || e.key === 'Enter') {
+            var valueFilter = $(this).val().toLowerCase();
+            filterAllSamples(allSamples, valueFilter, `${AILanguage}_sentence`)
+            getTableFromSamples(currentSamplesObj, `${AILanguage}_sentence`, true);
+        }
+    });
+});

static/main.html

@@ -68,6 +68,11 @@
 
         </div>
 
+        <div id="btn-record" class="expanded mic-button-div">
+            <a id="recordAudio" href="javascript:updateRecordingState()" class="round-button-mic disabled"
+                style="color:white; text-align:center; "><i id="recordIcon" class="material-icons icon-text-mic">mic</i>
+            </a>
+        </div>
 
         <div class="container">
 
@@ -116,26 +121,16 @@
                     <span></span>
                 </button>
             </div>
-        </div>
-
 
-
-
-        <div class="container-small flex expand"
-            style="align-items: center; text-align: center; vertical-align:middle; ">
-            <p id="single_word_ipa_pair" class="expand ipa-text-small"
-                style="text-align: center; vertical-align: middle;">Reference | Spoken
-            </p>
         </div>
 
-
-        <div id="btn-record" class="expanded mic-button-div">
-            <a id="recordAudio" href="javascript:updateRecordingState()" class="round-button-mic disabled"
-                style="color:white; text-align:center; "><i id="recordIcon" class="material-icons icon-text-mic">mic</i>
-            </a>
+        <div class="container2">
+            <div id="div-field-filter-samples" style="position: absolute; width: 97%; margin: 1em;">
+                <input id="field-filter-samples" type="search" class="form-control" placeholder="Write and press enter to filter">
+                <div id="field-samples">{}</div>
+            </div>
         </div>
 
-
         <div id="radio-difficulty" class="radio" style="position: fixed; top: 95%; left: 2%;">
             <input label="Random" type="radio" id="lengthCat1" name='length' onclick="javascript:getNextSample()">
             <input label="Easy" type="radio" id="lengthCat2" name='length' checked onclick="javascript:getNextSample()">
@@ -143,6 +138,13 @@
             <input label="Hard" type="radio" id="lengthCat4" name='length' onclick="javascript:getNextSample()">
         </div>
 
+        <div class="container-small flex expand"
+            style="align-items: center; text-align: center; vertical-align:middle; ">
+            <p id="single_word_ipa_pair" class="expand ipa-text-small"
+                style="text-align: center; vertical-align: middle;">Reference | Spoken
+            </p>
+        </div>
+
     </div>
 
 

webApp.py

@@ -1,8 +1,8 @@
 import json
-import os
 import webbrowser
 
-from flask import Flask, render_template, request
+from aip_trainer import PROJECT_ROOT_FOLDER, app_logger
+from flask import Flask, render_template, request, Response
 from flask_cors import CORS
 
 from aip_trainer.lambdas import lambdaGetSample
@@ -22,6 +22,34 @@ def main():
     return render_template('main.html')
 
 
+@app.route(rootPath+'/getAllSamples')
+def getDataDeEnAll():
+    import pickle
+    from pathlib import Path
+    sample_folder = Path(PROJECT_ROOT_FOLDER / "aip_trainer" / "lambdas")
+    with open(sample_folder / 'data_de_en_2.pickle', 'rb') as handle:
+        df = pickle.load(handle)
+        j = df.to_json()
+        return Response(j, mimetype='application/json')
+
+
+@app.route(rootPath+'/getSampleSearch', methods=['POST'])
+def getDataDeEnSearch():
+    import pickle
+    from pathlib import Path
+    sample_folder = Path(PROJECT_ROOT_FOLDER / "aip_trainer" / "lambdas")
+    with open(sample_folder / 'data_de_en_2.pickle', 'rb') as handle:
+        event = request.get_json(force=True)
+        df = pickle.load(handle)
+        lang = event.get('language')
+        filter_key = event.get('search')
+        df_by_language = df[f"{lang}_sentence"]
+        filter_obj = df_by_language.str.contains(filter_key)
+        filtered = df_by_language[filter_obj]
+        j = filtered.to_json()
+        return Response(j, mimetype='application/json')
+
+
 @app.route(rootPath+'/getAudioFromText', methods=['POST'])
 def getAudioFromText():
     event = {'body': json.dumps(request.get_json(force=True))}
@@ -39,15 +67,15 @@ def GetAccuracyFromRecordedAudio():
     try:
         event = {'body': json.dumps(request.get_json(force=True))}
         lambda_correct_output = lambdaSpeechToScore.lambda_handler(event, [])
+        return lambda_correct_output
     except Exception as e:
         import traceback
-        print(e)
-        print(traceback.format_exc())
-    return lambda_correct_output
+        app_logger.error(e)
+        app_logger.error(traceback.format_exc())
+        raise e
 
 
 if __name__ == "__main__":
     language = 'de'
-    print(os.system('pwd'))
     webbrowser.open_new('http://127.0.0.1:3000/')
-    app.run(host="0.0.0.0", port=3000)
+    app.run(host="0.0.0.0", port=3000)  # , debug=True)