diff --git a/electron/main/custom_document.html b/electron/main/custom_document.html index a8df41a..a35de73 100644 --- a/electron/main/custom_document.html +++ b/electron/main/custom_document.html @@ -234,14 +234,10 @@ .replace(/_/g, ' ') // Leerzeichen ersetzen .replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß existingDocs.appendChild(option); - //customDocumentTypes.appendChild(option); }); }); - } - - diff --git a/electron/main/index.html b/electron/main/index.html index 1e3bd46..ea7fd98 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -5,6 +5,7 @@ Video to document + @@ -26,23 +27,31 @@

Video to document

+ +
+ +
+
-
1. Step
-
2. Step
-
3. Step
-
4. Step
-
5. Step
-
6. Step
+
1. Step
+
2. Step
+
3. Step
+
4. Step
+
5. Step
+
6. Step
+
+
+

Upload your video here:

Drag and drop video file

+ - + diff --git a/electron/main/languages.js b/electron/main/languages.js index 271c3aa..31ed3f9 100644 --- a/electron/main/languages.js +++ b/electron/main/languages.js @@ -12,7 +12,25 @@ var languageOptions = { "checkbox_group": "Choose prefered document style:", "label_format": "Meeting report", "label_summary": "Summary with timestamps", - "submitButton": "Submit" + "submitButton": "Submit", + "step_nav1": "Step 1", + "step_nav2": "Step 2", + "step_nav3": "Step 3", + "step_nav4": "Step 4", + "step_nav5": "Step 5", + "step_nav6": "Step 6", + "h2": "Upload your video here:", + "labelSpeaker": "Select Speaker:", + "labelSpeakerAudio": "Selected Speaker:", + "labelSpeakerWriter": "Write name:", + "speakerLocker": "Rename speaker", + "speakerResender": "Rewrite document", + "downloadButton": "Download", + "box1_p1": "---Starting---", + "box2_p2": "---Transkribing---", + "box3_p3": "---Document creation---", + "labelType": "Select document type:" + }, "de":{ "flagPath": "flags/germany-flag-png-large.jpg", @@ -27,7 +45,24 @@ var languageOptions = { "checkbox_group": "Bevorzugte Dokumentvarianten:", "label_format": "Meeting Bericht", "label_summary": "Zusammenfassung mit Zeitstempeln", - "submitButton": "Absenden" + "submitButton": "Absenden", + "step_nav1": "Schritt 1", + "step_nav2": "Schritt 2", + "step_nav3": "Schritt 3", + "step_nav4": "Schritt 4", + "step_nav5": "Schritt 5", + "step_nav6": "Schritt 6", + "h2": "Uploade dein Video hier:", + "labelSpeaker": "Wähle Sprecher:", + "labelSpeakerAudio": "Ausgewählter Sprecher:", + "labelSpeakerWriter": "Schreib Namen:", + "speakerLocker": "Ersetze Namen", + "speakerResender": "Überschreibe Dokument", + "downloadButton": "Download", + "box1_p1": "---Startet---", + "box2_p2": "---Transkribing---", + "box3_p3": "---Dokument kreieren---", + "labelType": "Wähle Dokumenttype:" }, "in":{ "flagPath": "flags/india-flag-png-large.png", @@ -42,7 +77,25 @@ var languageOptions = { "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:", "label_format": "बैठक रिपोर्ट", "label_summary": "टाइमस्टैम्प के साथ सारांश", - "submitButton": "जमा करना" + "submitButton": "जमा करना", + "step_nav1": "स्टेप 1", + "step_nav2": "स्टेप 2", + "step_nav3": "स्टेप 3", + "step_nav4": "स्टेप 4", + "step_nav5": "स्टेप 5", + "step_nav6": "स्टेप 6", + "h2": "अपना वीडियो यहां अपलोड करें:", + "labelSpeaker": "स्पीकर चुनें:", + "labelSpeakerAudio": "चयनित वक्ता:", + "labelSpeakerWriter": "नाम लिखें:", + "speakerLocker": "स्पीकर का नाम बदलें", + "speakerResender": "दस्तावेज़ पुनः लिखें", + "downloadButton": "डाउनलोड करना", + "box1_p1": "---प्रारंभ---", + "box2_p2": "---प्रतिलेखन---", + "box3_p3": "---दस्तावेज़ निर्माण---", + "labelType": "दस्तावेज़ प्रकार चुनें:" + } }; \ No newline at end of file diff --git a/electron/main/renderer.js b/electron/main/renderer.js index a45626a..58856de 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -1,4 +1,71 @@ +/* +Listeners for the program setup and changes + +*/ + +//Listener for when the gui has been loaded so it can fill the dop down menus in step 2 and the language options +window.addEventListener('load', async (e) => { + try { + loadLanguageOptions(); + const value = await window.onStartup.getModuleNames(); + loadAiOptions(value.ai_modules); + loadTranscriptionOptions(value.transcription_modules); + + } catch (error) { + console.log("Error in the window listener load in the renderer.js \n"); + console.log(error); + } +}); + +//Listener if the language of the displayed text's in the gui should be changed +language_option.addEventListener('change', (e)=>{ + try { + const select = document.getElementById('language_option'); + changeLanguage(select.value); + } catch (error) { + console.log("Error in the language_option change listener in the renderer.js"); + console.log(error); + } + +}); + +stepButtons.forEach(btn => { + btn.addEventListener("click", () => { + try { + const step = parseInt(btn.dataset.step); + showStep(step); + } catch (error) { + + } + }); +}); + +//Listener if the button to change the current step to the previus one is pressed +prevBtn.addEventListener("click", () => { + try { + if (currentStep > 1) showStep(currentStep - 1); + } catch (error) { + + } +}); + +//Listener if the button to change the current step to the next one is pressed +nextBtn.addEventListener("click", () => { + try { + if(currentStep < totalSteps) showStep(currentStep + 1); + } catch (error) { + + } +}); + +/* + +Listeners for Step 1 + +*/ + +//Listener if a file has been draged over the drop down field uploadContainer.addEventListener("dragover", (e) =>{ try { e.stopPropagation(); @@ -31,29 +98,6 @@ uploadContainer.addEventListener("drop", (e) => { } }) -window.addEventListener('load', async (e) => { - try { - loadLanguageOptions(); - const value = await window.onStartup.getModuleNames(); - loadAiOptions(value.ai_modules); - loadTranscriptionOptions(value.transcription_modules); - - } catch (error) { - - } - -}); - -language_option.addEventListener('change', (e)=>{ - try { - const select = document.getElementById('language_option'); - changeLanguage(select.value); - } catch (error) { - - } - -}); - //listener for the file explorer search when something got selected videoUpload.addEventListener("change", () => { try { @@ -77,32 +121,17 @@ manualUploadBtn.addEventListener('click', () => { }); -stepButtons.forEach(btn => { - btn.addEventListener("click", () => { - try { - const step = parseInt(btn.dataset.step); - showStep(step); - } catch (error) { - - } - }); -}); +/* -prevBtn.addEventListener("click", () => { - try { - if (currentStep > 1) showStep(currentStep - 1); - } catch (error) { - - } -}); +Listeners for Step 2 -nextBtn.addEventListener("click", () => { - try { - if(currentStep < totalSteps) showStep(currentStep + 1); - } catch (error) { - - } -}); +*/ + +/* + +Listeners for Step 3 + +*/ //Checkboxlistener so that only one can be selected at a time docFormat.addEventListener("change", (e) =>{ @@ -166,20 +195,12 @@ docFormatCustom.addEventListener("change", (e) =>{ } }); -//Speaker change listener -cur_speaker.addEventListener("change", (e) =>{ - try { - document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src; - } catch (error) { - - } -}); +/* -window.audios.speakerAudios((event, arg) => { - loadSpeakerOptions(arg); - setSpeakerAudiosValue(arg); -}); +Listeners for Step 4 +*/ +//Functions the the displayed progress in the progressbar can be changed out of the main process window.electron.progress((event, arg) => { if(arg.curstep == 1){ setCircleOne(); @@ -239,5 +260,27 @@ function setCircleFour(){ } }; +/* + +Listeners for Step 5 + +*/ + +//Speaker change listener +cur_speaker.addEventListener("change", (e) =>{ + try { + document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src; + } catch (error) { + + } +}); +//Function so the main process can give the gui a json with the speakers and their audio +window.audios.speakerAudios((event, arg) => { + loadSpeakerOptions(arg); + setSpeakerAudiosValue(arg); +}); + + + diff --git a/electron/main/script.js b/electron/main/script.js index 910000e..4b56dd5 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -1,5 +1,231 @@ let currentVideoPath = null; -//function to check if one checkbox is at least klicked + +/* + +Functions used in the setup or affect most of the gui + +*/ + +//language changing feature => changes the language of every displayed text +function changeLanguage(language) { + try { + //document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath; + document.getElementById('labelKI').textContent = languageOptions[language].labelKI; + document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription; + document.getElementById('labelLanguage').textContent = languageOptions[language].labelLanguage; + document.getElementById('title').textContent = languageOptions[language].title; + //document.getElementById('h1').textContent = languageOptions[language].h1; + document.getElementById('p1').textContent = languageOptions[language].p1; + document.getElementById('fileName').textContent = languageOptions[language].fileName; + document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn; + document.getElementById('label_format').textContent = languageOptions[language].label_format; + document.getElementById('label_summary').textContent = languageOptions[language].label_summary; + document.getElementById('submitButton').textContent = languageOptions[language].submitButton; + document.getElementById('step_nav1').textContent = languageOptions[language].step_nav1; + document.getElementById('step_nav2').textContent = languageOptions[language].step_nav2; + document.getElementById('step_nav3').textContent = languageOptions[language].step_nav3; + document.getElementById('step_nav4').textContent = languageOptions[language].step_nav4; + document.getElementById('step_nav5').textContent = languageOptions[language].step_nav5; + document.getElementById('step_nav6').textContent = languageOptions[language].step_nav6; + //document.getElementById('h2').textContent = languageOptions[language].h2; + document.getElementById('labelSpeaker').textContent = languageOptions[language].labelSpeaker; + document.getElementById('labelSpeakerAudio').textContent = languageOptions[language].labelSpeakerAudio; + document.getElementById('labelSpeakerWriter').textContent = languageOptions[language].labelSpeakerWriter; + document.getElementById('speakerLocker').textContent = languageOptions[language].speakerLocker; + document.getElementById('speakerResender').textContent = languageOptions[language].speakerResender; + document.getElementById('downloadButton').textContent = languageOptions[language].downloadButton; + document.getElementById('box1_p1').textContent = languageOptions[language].box1_p1; + document.getElementById('box2_p2').textContent = languageOptions[language].box2_p2; + document.getElementById('box3_p3').textContent = languageOptions[language].box3_p3; + document.getElementById('labelType').textContent = languageOptions[language].labelType; + + } catch (error) { + console.log("Error in script.js changeLanguage function"); + console.log(error); + } + +} + +/* + +Functions used for the step navigation + +*/ + +//Step-navigation +const steps = document.querySelectorAll(".step"); +const stepButtons = document.querySelectorAll(".step-item"); +let currentStep = 1; +const totalSteps = steps.length; + +function showStep(stepNumber) { + if (stepNumber < 1 || stepNumber > totalSteps){ + console.error("StepNumber out of Bounds", stepNumber); + return; + } + steps.forEach(step => step.style.display = "none"); + document.getElementById("step" + stepNumber).style.display = "flex"; + + stepButtons.forEach(btn => btn.classList.remove("active")); + document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active"); + const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`); + + if(activeBtn) activeBtn.classList.add("active"); + + prevBtn.disabled = stepNumber == 1; + nextBtn.disabled = stepNumber === totalSteps; + currentStep = stepNumber; +} + +/* + +Functions used in Step 1 + +*/ + +//function to display the file path in the drop down box +function handleFiles(files) { + try { + if (files.length > 0) { + const file = files[0]; + if (file.type.startsWith('video/')) { + const filePath = window.explorer.onFileDrop(files[0]) + videoUpload.files = files; + fileName.textContent = `Chosen video: ${file.name}`; + currentVideoPath = filePath; + generateThumbnail(filePath); + activateSubmitBtn(true); + } + } + } catch (error) { + console.log("Error in script.js handleFiles function"); + console.log(error); + } + +} + +//Video thumbnail generation. Shows a scene from the selected video file as a preview +function generateThumbnail(path){ + try { + const videoElement = document.getElementById("previewThumbnail"); + while (videoElement.firstChild) videoElement.removeChild(videoElement.firstChild); + videoElement.src = path; + videoElement.type = "video/mov"; + videoElement.load(); + videoElement.style.maxWidth = 40; + videoElement.style.maxHeight = 40; + videoElement.autoplay = false; + } catch (error) { + console.log("Error in the generateThumbnail function in the script.js file \n"); + console.log(error); + } + +} + + + +/* + +Functions used in Step 2 + +*/ + +//function to load ai options to the drop down list +function loadAiOptions(options){ + try { + var menu = document.getElementById('ai_type'); + var object_holdy; + var choice ; + object_holdy = options + for(i = 0; i < options.length; i++){ + choice = document.createElement('option'); + choice.textContent = object_holdy[i].displayname; + choice.value = object_holdy[i].name; + menu.appendChild(choice); + } + } catch (error) { + console.log("Error in script.js loadAiOptions function"); + console.log(error); + } +} + +//function to load transcription options to the drop down list +function loadTranscriptionOptions(options){ + try { + var menu = document.getElementById('transkript_type'); + var object_holdy; + var choice ; + object_holdy = options + for(i = 0; i < options.length; i++){ + choice = document.createElement('option'); + choice.textContent = object_holdy[i].displayname; + choice.value = object_holdy[i].name; + menu.appendChild(choice); + } + } catch (error) { + console.log("Error in script.js function loadTranscriptionOptions"); + console.log(error); + } +} + +//function to load data type options to the drop down list +function loadDataTypeOptions(options){ + try { + var menu = document.getElementById('output_type'); + var object_holdy; + var choice ; + object_holdy = options + for(i = 0; i < options.length; i++){ + choice = document.createElement('option'); + choice.textContent = object_holdy[i].displayname; + choice.value = object_holdy[i].name; + menu.appendChild(choice); + } + } catch (error) { + console.log("Error in script.js function loadDataTypeOptions"); + console.log(error); + } +} + +//function to load language options to the drop down list +function loadLanguageOptions(){ + try { + + var menu = document.getElementById('language_option'); + var object_holdy; + var choice ; + object_holdy = Object.keys(languageOptions); + for(i = 0; i < object_holdy.length; i++){ + choice = document.createElement('option'); + choice.textContent = object_holdy[i]; + choice.value = object_holdy[i]; + choice.setAttribute('data-image', languageOptions[object_holdy[i]].flagPath); + menu.appendChild(choice); + } + new lc_select(document.getElementById('language_option')); //loads the flag images so they get displayed in the gui + } catch (error) { + console.log("Error in script.js loadLanguageOptions function"); + console.log(error); + } +} + + + +/* + +Functions used in Step 3 + +*/ + + + +/* + +Functions used in Step 4 + +*/ + +//function to check if one checkbox is at least klicked. Final controll function before sending the input to the generation function checkBoxes() { try { const checkboxes = document.querySelectorAll('input[name="docFormat"]'); @@ -74,49 +300,13 @@ function checkBoxes() { } -//language changing feature -function changeLanguage(language) { +//function the the submit button on step 4 can be pressed +function activateSubmitBtn(hasFile){ try { - document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath; - document.getElementById('labelKI').textContent = languageOptions[language].labelKI; - document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription; - document.getElementById('labelLanguage').textContent = languageOptions[language].labelLanguage; - document.getElementById('title').textContent = languageOptions[language].title; - document.getElementById('h1').textContent = languageOptions[language].h1; - document.getElementById('p1').textContent = languageOptions[language].p1; - document.getElementById('fileName').textContent = languageOptions[language].fileName; - document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn; - document.getElementById('checkbox_group').textContent = languageOptions[language].checkbox_group; - document.getElementById('label_format').textContent = languageOptions[language].label_format; - document.getElementById('label_summary').textContent = languageOptions[language].label_summary; - document.getElementById('submitButton').textContent = languageOptions[language].submitButton; - + document.getElementById("submitButton").disabled = !hasFile; } catch (error) { - console.log("Error in script.js changeLanguage function"); console.log(error); } - -} - -//function to display the file path in the drop down box -function handleFiles(files) { - try { - if (files.length > 0) { - const file = files[0]; - if (file.type.startsWith('video/')) { - const filePath = window.explorer.onFileDrop(files[0]) - videoUpload.files = files; - fileName.textContent = `Chosen video: ${file.name}`; - currentVideoPath = filePath; - generateThumbnail(filePath); - activateSubmitBtn(true); - } - } - } catch (error) { - console.log("Error in script.js handleFiles function"); - console.log(error); - } - } //function to regulate the progress on the progressbar @@ -132,81 +322,21 @@ function updateProgressBar(bar, value) { } -//function to load ai options to the drop down list -function loadAiOptions(options){ +//function to hide the progressbar +function deaktivateProgressbar(){ try { - var menu = document.getElementById('ai_type'); - var object_holdy; - var choice ; - object_holdy = options - for(i = 0; i < options.length; i++){ - choice = document.createElement('option'); - choice.textContent = object_holdy[i].displayname; - choice.value = object_holdy[i].name; - menu.appendChild(choice); - } + document.getElementById("progressbar").style.visibility = "hidden"; } catch (error) { - console.log("Error in script.js loadAiOptions function"); console.log(error); } } -//function to load transcription options to the drop down list -function loadTranscriptionOptions(options){ - try { - var menu = document.getElementById('transkript_type'); - var object_holdy; - var choice ; - object_holdy = options - for(i = 0; i < options.length; i++){ - choice = document.createElement('option'); - choice.textContent = object_holdy[i].displayname; - choice.value = object_holdy[i].name; - menu.appendChild(choice); - } - } catch (error) { - console.log("Error in script.js function loadTranscriptionOptions"); - console.log(error); - } -} +/* -//function to load data type options to the drop down list -function loadDataTypeOptions(options){ - try { - var menu = document.getElementById('output_type'); - var object_holdy; - var choice ; - object_holdy = options - for(i = 0; i < options.length; i++){ - choice = document.createElement('option'); - choice.textContent = object_holdy[i].displayname; - choice.value = object_holdy[i].name; - menu.appendChild(choice); - } - } catch (error) { - console.log("Error in script.js function loadDataTypeOptions"); - console.log(error); - } -} +Functions used in Step 5 + +*/ -//function to load language options to the drop down list -function loadLanguageOptions(){ - try { - var menu = document.getElementById('language_option'); - var object_holdy; - var choice ; - object_holdy = Object.keys(languageOptions); - for(i = 0; i < object_holdy.length; i++){ - choice = document.createElement('option'); - choice.textContent = object_holdy[i]; - choice.value = object_holdy[i]; - menu.appendChild(choice); - } - } catch (error) { - console.log("Error in script.js loadLanguageOptions function"); - console.log(error); - } -} //function to load speaker options to the drop down list function loadSpeakerOptions(options){ @@ -245,61 +375,6 @@ function loadSpeakerAudio(option){ } } - -function activateSubmitBtn(hasFile){ - try { - document.getElementById("submitButton").disabled = !hasFile; - } catch (error) { - console.log(error); - } -} - -function deaktivateProgressbar(){ - try { - document.getElementById("progressbar").style.visibility = "hidden"; - } catch (error) { - console.log(error); - } -} - -//Video thumbnail generation -function generateThumbnail(path){ - const videoElement = document.getElementById("previewThumbnail"); - while (videoElement.firstChild) videoElement.removeChild(videoElement.firstChild); - videoElement.src = path; - videoElement.type = "video/mov"; - videoElement.load(); - videoElement.style.maxWidth = 40; - videoElement.style.maxHeight = 40; - videoElement.autoplay = false; -} - -//Step-navigation -const steps = document.querySelectorAll(".step"); -const stepButtons = document.querySelectorAll(".step-item"); -let currentStep = 1; -const totalSteps = steps.length; - -function showStep(stepNumber) { - if (stepNumber < 1 || stepNumber > totalSteps){ - console.error("StepNumber out of Bounds", stepNumber); - return; - } - steps.forEach(step => step.style.display = "none"); - document.getElementById("step" + stepNumber).style.display = "flex"; - - stepButtons.forEach(btn => btn.classList.remove("active")); - document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active"); - const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`); - - if(activeBtn) activeBtn.classList.add("active"); - - prevBtn.disabled = stepNumber == 1; - nextBtn.disabled = stepNumber === totalSteps; - currentStep = stepNumber; -} - - //Audio value setter var speakerAudios = {}; var speakerEndValues = {}; @@ -312,7 +387,7 @@ function setSpeakerAudiosValue(valy){ } } - +//Function to rewrite the speaker name in the json function rewriteSpeakerName(){ try { var tempy = document.getElementById("cur_speaker").value; @@ -322,15 +397,21 @@ function rewriteSpeakerName(){ console.log("\n\n\n" + error + "\n\n\n") } } - +//Function to send the json with the given names back to the program to rewrite the document file function sendSpeakerPackages(){ try { window.submitSpeaker.speaker_submit(speakerAudios); } catch (error) { - + console.log(error); } } +/* + +Functions for Step 6 + +*/ + function fileDownload() { try { window.download.file_download(); @@ -338,3 +419,16 @@ function fileDownload() { console.error("Download failed:", error); } } + + +window.api.getTxtFiles().then(files => { + files.forEach(file => { + const option = document.createElement('option'); + option.value = file; + option.textContent = file + .replace('.txt', '') // Endung entfernen + .replace(/_/g, ' ') // Leerzeichen ersetzen + .replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß + costumDocumentType.appendChild(option); + }); + }); \ No newline at end of file diff --git a/electron/main/style.css b/electron/main/style.css index 4040e09..4f30c2d 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -113,7 +113,7 @@ body { } .KI-wrapper { - margin-top: 40px; + margin-top: 10px; } input[type="file"] { @@ -186,7 +186,7 @@ input[type="file"] { align-items: center; justify-content: center; padding: 10px 20px; - margin: 130px auto 10px auto; + margin: 100px auto 10px auto; background-color: #007BFF; color: white; border: none; @@ -297,10 +297,10 @@ input[type="file"] { /*panels*/ .step { - margin-top: 70px; + margin-top: 50px; display: flex; flex-direction: column; - min-height: 400px; + min-height: 425px; } /*Navigation arrows*/ @@ -489,10 +489,7 @@ li { align-items: center; justify-content: center; padding: 10px 20px; - margin-left: auto; - margin-right: 0px; - margin-top: 130px; - margin-bottom: 10px; + margin: 100px auto 10px auto; background-color: #007BFF; color: white; border: none; @@ -510,4 +507,13 @@ li { border-radius: 8px; cursor: pointer; font-size: 14px; +} + +.h2 { + font-size: 25px; +} + +.speakerView, .speakerAudio, .speakerWrite{ + margin-top: auto; + margin-bottom: auto; } \ No newline at end of file