diff --git a/electron/main/custom_document.html b/electron/main/custom_document.html index a12b429..e6e79a8 100644 --- a/electron/main/custom_document.html +++ b/electron/main/custom_document.html @@ -1,210 +1,17 @@ + Custom Document + -
-

Manage document types

- - - - - -
- - -
- - - - -
- - - - -
- -
-
- - - - + + \ No newline at end of file diff --git a/electron/main/index.html b/electron/main/index.html index 0fa59e0..703ebe9 100644 --- a/electron/main/index.html +++ b/electron/main/index.html @@ -5,6 +5,7 @@ Video to document + @@ -19,30 +20,66 @@

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

+ @@ -160,7 +208,7 @@
- + diff --git a/electron/main/languages.js b/electron/main/languages.js index 271c3aa..fc0b1da 100644 --- a/electron/main/languages.js +++ b/electron/main/languages.js @@ -12,7 +12,37 @@ 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:", + + "customDocBtn": "Manage document types", + "cd_h1": "Manage document types", + "cd_existingDocs": "Select existing documents (optional):", + "cd_docName": "Document name", + "docName": "Enter the document name here", + "cd_promt": "Your prompt:", + "prompt": "Type the prompt for your document here...", + "goBackBtn": "Return", + "deleteBtn": "Delete document", + "generateBtn": "Save document", + "newDoc": "-- Create new document --" + }, "de":{ "flagPath": "flags/germany-flag-png-large.jpg", @@ -27,7 +57,36 @@ 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:", + + "customDocBtn": "Dokumenttypen verwalten", + "cd_h1": "Dokumenttypen verwalten", + "cd_existingDocs": "Vorhandene Dokumente auswählen (optional):", + "cd_docName": "Dokument Name", + "docName": "Geben Sie hier den Dokumentnamen ein", + "cd_promt": "Ihr Prompt:", + "prompt": "Geben Sie hier die Eingabeaufforderung für Ihr Dokument ein...", + "goBackBtn": "Zurück", + "deleteBtn": "Lösche Dokument", + "generateBtn": "Speicher Dokument", + "newDoc": "-- Neues Dokument erstellen --" }, "in":{ "flagPath": "flags/india-flag-png-large.png", @@ -42,7 +101,37 @@ 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": "दस्तावेज़ प्रकार चुनें:", + + "customDocBtn": "दस्तावेज़ प्रकार प्रबंधित करें", + "cd_h1": "दस्तावेज़ प्रकार प्रबंधित करें", + "cd_existingDocs": "मौजूदा दस्तावेज़ों का चयन करें (वैकल्पिक):", + "cd_docName": "दस्तावेज़ का नाम", + "docName": "यहां दस्तावेज़ का नाम दर्ज करें", + "cd_promt": "आपका संकेत:", + "prompt": "अपने दस्तावेज़ के लिए प्रॉम्प्ट यहां टाइप करें...", + "goBackBtn": "वापस करना", + "deleteBtn": "दस्तावेज़ हटाएँ", + "generateBtn": "दस्तावेज़ सहेजें", + "newDoc": "-- नया दस्तावेज़ बनाएँ --" + } }; \ No newline at end of file diff --git a/electron/main/preload.js b/electron/main/preload.js index 80c4140..bf134fe 100644 --- a/electron/main/preload.js +++ b/electron/main/preload.js @@ -5,10 +5,10 @@ try { onFileDrop: (file) => webUtils.getPathForFile(file) }) contextBridge.exposeInMainWorld("submit", { - submit: (meeting_specifications) => {ipcRenderer.send("file_submit", meeting_specifications)} + submit: (meeting_specifications) => { ipcRenderer.send("file_submit", meeting_specifications) } }) contextBridge.exposeInMainWorld("electronAPI", { - getFilePath: (file) => {return webUtils.getPathForFile(file)} + getFilePath: (file) => { return webUtils.getPathForFile(file) } }) contextBridge.exposeInMainWorld("onStartup", { @@ -23,27 +23,26 @@ try { speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback) }) contextBridge.exposeInMainWorld("submitSpeaker", { - speaker_submit: (speaker_names) => {ipcRenderer.send("speaker_submit", speaker_names)} + speaker_submit: (speaker_names) => { ipcRenderer.send("speaker_submit", speaker_names) } }) contextBridge.exposeInMainWorld("download", { - file_download: () => {ipcRenderer.send("file_download")} + file_download: () => { ipcRenderer.send("file_download") } }) - - - + //documenttypes - contextBridge.exposeInMainWorld('api', { - getTxtFiles: () => ipcRenderer.invoke('get-txt-files'), - saveTxtFile: (name, content) => - ipcRenderer.invoke('save-txt-file', name, content), - readTxtFile: (fileName) => - ipcRenderer.invoke('read-txt-file', fileName) + getTxtFiles: () => ipcRenderer.invoke('get-txt-files'), + saveTxtFile: (name, content) => + ipcRenderer.invoke('save-txt-file', name, content), + readTxtFile: (fileName) => + ipcRenderer.invoke('read-txt-file', fileName), + deleteTxtFile: (fileName) => + ipcRenderer.invoke('delete-txt-file', fileName) }); - - ipcRenderer.on("error", (event, err) => {alert(err)}) + + ipcRenderer.on("error", (event, err) => { alert(err) }) } catch (error) { console.log("Error in preload.js"); } diff --git a/electron/main/renderer.js b/electron/main/renderer.js index a45626a..38d8e78 100644 --- a/electron/main/renderer.js +++ b/electron/main/renderer.js @@ -1,58 +1,102 @@ +/* -uploadContainer.addEventListener("dragover", (e) =>{ +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 { - e.stopPropagation(); - e.preventDefault(); + const step = parseInt(btn.dataset.step); + showStep(step); } catch (error) { - console.log("Error in renderer.js dragover listener function") + } - + }); +}); + +//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(); + e.preventDefault(); + } catch (error) { + console.log("Error in renderer.js dragover listener function") + } + }); //listener for when a file get dropped on the drag&drop field uploadContainer.addEventListener("drop", (e) => { - try { - e.stopPropagation() - e.preventDefault() - const files = e.dataTransfer.files - const filePath = window.explorer.onFileDrop(files[0]) - const testEndings = [".mp4", ".mov", ".avi", ".mkv"]; - var pathToLower = filePath.toLowerCase(); - if(testEndings.some(e => pathToLower.endsWith(e))){ - const files1 = e.dataTransfer.files; - handleFiles(files1); - }else{ - alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].'); - } - - } catch (error) { - console.log("Error in renderer.js with the listerner for the drop function"); - console.log(error); - } -}) - -window.addEventListener('load', async (e) => { try { - loadLanguageOptions(); - const value = await window.onStartup.getModuleNames(); - loadAiOptions(value.ai_modules); - loadTranscriptionOptions(value.transcription_modules); + e.stopPropagation() + e.preventDefault() + const files = e.dataTransfer.files + const filePath = window.explorer.onFileDrop(files[0]) + const testEndings = [".mp4", ".mov", ".avi", ".mkv"]; + var pathToLower = filePath.toLowerCase(); + if (testEndings.some(e => pathToLower.endsWith(e))) { + const files1 = e.dataTransfer.files; + handleFiles(files1); + } else { + alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].'); + } } catch (error) { - + console.log("Error in renderer.js with the listerner for the drop function"); + console.log(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", () => { @@ -74,170 +118,274 @@ manualUploadBtn.addEventListener('click', () => { console.log("Error in manualBtn EventListener click"); console.log(error); } - + }); -stepButtons.forEach(btn => { - btn.addEventListener("click", () => { - try { - const step = parseInt(btn.dataset.step); - showStep(step); - } catch (error) { - - } +/* + +Listeners for Step 2 + +*/ + +/* + +Listeners for Step 3 + +*/ + +window.api.getTxtFiles().then(files => { + var menu = document.getElementById('customDocumentTypes'); + var l = document.getElementById('customDocumentTypes').options.length - 1; + for (i = l; i >= 0; i--) { + menu.remove(i); + } + 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ß + menu.appendChild(option); }); }); -prevBtn.addEventListener("click", () => { - try { - if (currentStep > 1) showStep(currentStep - 1); - } catch (error) { - - } -}); - -nextBtn.addEventListener("click", () => { - try { - if(currentStep < totalSteps) showStep(currentStep + 1); - } catch (error) { - - } -}); - //Checkboxlistener so that only one can be selected at a time -docFormat.addEventListener("change", (e) =>{ +docFormat.addEventListener("change", (e) => { try { - if(docFormat.checked){ + if (docFormat.checked) { docFormatSummary1.checked = false; docFormatSummary2.checked = false; docFormatSummary3.checked = false; docFormatCustom.checked = false; } } catch (error) { - + } }); -docFormatSummary1.addEventListener("change", (e) =>{ +docFormatSummary1.addEventListener("change", (e) => { try { - if(docFormatSummary1.checked){ + if (docFormatSummary1.checked) { docFormat.checked = false; docFormatSummary2.checked = false; docFormatSummary3.checked = false; docFormatCustom.checked = false; } } catch (error) { - + } }); -docFormatSummary2.addEventListener("change", (e) =>{ +docFormatSummary2.addEventListener("change", (e) => { try { - if(docFormatSummary2.checked){ + if (docFormatSummary2.checked) { docFormatSummary1.checked = false; docFormat.checked = false; docFormatSummary3.checked = false; docFormatCustom.checked = false; } } catch (error) { - + } }); -docFormatSummary3.addEventListener("change", (e) =>{ +docFormatSummary3.addEventListener("change", (e) => { try { - if(docFormatSummary3.checked){ + if (docFormatSummary3.checked) { docFormatSummary1.checked = false; docFormatSummary2.checked = false; docFormat.checked = false; docFormatCustom.checked = false; } } catch (error) { - + } }); -docFormatCustom.addEventListener("change", (e) =>{ +docFormatCustom.addEventListener("change", (e) => { try { - if(docFormatCustom.checked){ + if (docFormatCustom.checked) { docFormatSummary1.checked = false; docFormatSummary2.checked = false; docFormatSummary3.checked = false; docFormat.checked = false; } } catch (error) { - + } }); -//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(); - }else if(arg.curstep == 2){ - setCircleZwo(); - } else if(arg.curstep == 3){ - setCircleThree(); - }else if(arg.curstep == 4){ - setCircleFour(); - } + if (arg.curstep == 1) { + setCircleOne(); + } else if (arg.curstep == 2) { + setCircleZwo(); + } else if (arg.curstep == 3) { + setCircleThree(); + } else if (arg.curstep == 4) { + setCircleFour(); + } }); -function setCircleOne(){ +function setCircleOne() { try { - if(document.getElementById("box1").style.backgroundColor == "green"){ + if (document.getElementById("box1").style.backgroundColor == "green") { document.getElementById("box1").style.backgroundColor = "red"; - }else{ + } else { document.getElementById("box1").style.backgroundColor = "green"; } } catch (error) { } }; -function setCircleZwo(){ +function setCircleZwo() { try { - if(document.getElementById("box2").style.backgroundColor == "green"){ + if (document.getElementById("box2").style.backgroundColor == "green") { document.getElementById("box2").style.backgroundColor = "red"; - }else{ + } else { document.getElementById("box2").style.backgroundColor = "green"; } } catch (error) { - + } - + }; -function setCircleThree(){ +function setCircleThree() { try { - if(document.getElementById("box3").style.backgroundColor == "green"){ + if (document.getElementById("box3").style.backgroundColor == "green") { document.getElementById("box3").style.backgroundColor = "red"; - }else{ + } else { document.getElementById("box3").style.backgroundColor = "green"; } } catch (error) { - + } - + }; -function setCircleFour(){ +function setCircleFour() { try { - if(document.getElementById("box4").style.backgroundColor == "green"){ + if (document.getElementById("box4").style.backgroundColor == "green") { document.getElementById("box4").style.backgroundColor = "red"; - }else{ + } else { document.getElementById("box4").style.backgroundColor = "green"; } } catch (error) { - - } + + } }; +/* + +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); +}); + +/* + +Listeners for the costum documents section + +*/ + +goBackBtn.addEventListener("click", () => { + showCD(); +}); + +// dokumente speichern +generateBtn.addEventListener("click", () => { + const name = docName.value.trim(); + const content = document.getElementById("prompt").value.trim(); + if (!name || !content) { + result.textContent = "Bitte Dokumentname und Prompt ausfüllen."; + console.log(name + " " + content); + setTimeout(() => { + result.textContent = ""; + }, 3000); + return; + } + window.api.saveTxtFile(name, content).then(); + result.textContent = "Dokument erfolgreich gespeichert!"; + setTimeout(() => { + result.textContent = ""; + }, 3000); + reloadDocuments(); + +}); + +// dokumente löschen +deleteBtn.addEventListener("click", () => { + const name = docName.value.trim(); + + if (!name) { + result.textContent = "Bitte Dokumentname angeben."; + setTimeout(() => { + result.textContent = ""; + }, 3000); + return; + } + + const confirmDelete = confirm( + `Möchtest du das Dokument "${name}" wirklich löschen?` + ); + + if (!confirmDelete) return; + + window.api.deleteTxtFile(name).then((success) => { + if (success) { + result.textContent = "Dokument erfolgreich gelöscht!"; + reloadDocuments(); + existingDocs.value = "newDoc"; + existingDocs.dispatchEvent(new Event("change")); + } else { + result.textContent = "Dokument konnte nicht gelöscht werden."; + } + + setTimeout(() => { + result.textContent = ""; + }, 3000); + }); +}); + + +//function to load existingDoc options to the drop down list + +window.api.getTxtFiles().then(files => { + reloadDocuments(); +}); + +//content anzeigen +existingDocs.addEventListener("change", async () => { + const existingDocsed = existingDocs.value; + const exampleText = ""; + + if (existingDocsed === "newDoc") { + docNameWrapper.classList.remove("hidden"); + docName.value = ""; + prompt.value = exampleText; + return; + } + docNameWrapper.classList.add("hidden"); + + const content = await window.api.readTxtFile(existingDocsed); + prompt.value = content; + docName.value = existingDocsed.replace(".txt", ""); +}); + diff --git a/electron/main/script.js b/electron/main/script.js index 910000e..78e2054 100644 --- a/electron/main/script.js +++ b/electron/main/script.js @@ -1,103 +1,118 @@ let currentVideoPath = null; -//function to check if one checkbox is at least klicked -function checkBoxes() { - try { - const checkboxes = document.querySelectorAll('input[name="docFormat"]'); - let isChecked = false; - var checkedCounter = 0; - checkboxes.forEach(function(checkbox){ - if(checkbox.checked){ - isChecked = true; - checkedCounter++; - } - }); - if (isChecked) { - //Code to submit the video - var selectedCheckboxes = {}; - checkboxes.forEach(function(checkbox){ - if(checkbox.checked){ - selectedCheckboxes[checkbox.nextElementSibling.textContent] = ""; - } - }); +/* - const testEndings = [".mp4", ".mov", ".avi", ".mkv"]; - var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]); - var pathToLower = pathTest.toLowerCase(); - if(testEndings.some(e => pathToLower.endsWith(e))){ - //assembly of the json for the main +Functions used in the setup or affect most of the gui - var typeCheckbox; - if(document.getElementById("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value; - if(document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value; - if(document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value; - if(document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value; - if(document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value; - - document.getElementById("testy").style.visibility = "visible" - document.getElementById("box1").style.backgroundColor = "red"; - document.getElementById("box2").style.backgroundColor = "red"; - document.getElementById("box3").style.backgroundColor = "red"; - document.getElementById("box4").style.backgroundColor = "red"; - console.log(selectedCheckboxes); - const outputType = document.getElementById("output_type"); - const transcriptionType = document.getElementById("transkript_type"); - const aiType = document.getElementById("ai_type"); - const sendingPackage = { - "video": { - "module":"extraction-video-to-audio", - "inputVideoPath": pathTest - }, - "transcription": { - "module": transcriptionType.value - }, - "document": { - "module":aiType.value, - "type": typeCheckbox, - "outputType": outputType.value - } - }; - window.submit.submit(sendingPackage) - }else{ - alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].'); - } - - - } else { - //language only english at the moment - alert('Please select at least one document type.'); - } - } catch (error) { - console.log("Error in script.js checkBoxes function"); - console.log(error); +*/ +var showCDValue = 0; +function showCD() { + if(showCDValue == 0){ + document.getElementById('cdContainer').style.display = "block"; + document.getElementById('step1').style.display ="none"; + document.getElementById('step2').style.display ="none"; + document.getElementById('step3').style.display ="none"; + document.getElementById('step4').style.display ="none"; + document.getElementById('step5').style.display ="none"; + document.getElementById('step6').style.display ="none"; + showCDValue = 1; + } else { + currentStep = 1; + showCDValue = 0; + document.getElementById('cdContainer').style.display = "none"; + showStep(1); } - } -//language changing feature +//language changing feature => changes the language of every displayed text function changeLanguage(language) { try { - document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath; + //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('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('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; + + document.getElementById('customDocBtn').textContent = languageOptions[language].customDocBtn; + document.getElementById('cd_h1').textContent = languageOptions[language].cd_h1; + document.getElementById('cd_existingDocs').textContent = languageOptions[language].cd_existingDocs; + document.getElementById('cd_docName').textContent = languageOptions[language].cd_docName; + document.getElementById('docName').placeholder = languageOptions[language].docName; + document.getElementById('cd_promt').textContent = languageOptions[language].cd_promt; + document.getElementById('prompt').placeholder = languageOptions[language].prompt; + document.getElementById('goBackBtn').textContent = languageOptions[language].goBackBtn; + document.getElementById('deleteBtn').textContent = languageOptions[language].deleteBtn; + document.getElementById('generateBtn').textContent = languageOptions[language].generateBtn; + document.getElementById('newDoc').textContent = languageOptions[language].newDoc; } 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 { @@ -119,27 +134,40 @@ function handleFiles(files) { } -//function to regulate the progress on the progressbar -function updateProgressBar(bar, value) { +//Video thumbnail generation. Shows a scene from the selected video file as a preview +function generateThumbnail(path) { try { - value = Math.round(value); - bar.querySelector(".progress_fill").style.width = `${value}%`; - bar.querySelector(".progress_text").textContent = `${value}%`; + 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 scripts.js updateProgressBar function"); + 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){ +function loadAiOptions(options) { try { var menu = document.getElementById('ai_type'); var object_holdy; - var choice ; + var choice; object_holdy = options - for(i = 0; i < options.length; i++){ + for (i = 0; i < options.length; i++) { choice = document.createElement('option'); choice.textContent = object_holdy[i].displayname; choice.value = object_holdy[i].name; @@ -152,13 +180,13 @@ function loadAiOptions(options){ } //function to load transcription options to the drop down list -function loadTranscriptionOptions(options){ +function loadTranscriptionOptions(options) { try { var menu = document.getElementById('transkript_type'); var object_holdy; - var choice ; + var choice; object_holdy = options - for(i = 0; i < options.length; i++){ + for (i = 0; i < options.length; i++) { choice = document.createElement('option'); choice.textContent = object_holdy[i].displayname; choice.value = object_holdy[i].name; @@ -171,13 +199,13 @@ function loadTranscriptionOptions(options){ } //function to load data type options to the drop down list -function loadDataTypeOptions(options){ +function loadDataTypeOptions(options) { try { var menu = document.getElementById('output_type'); var object_holdy; - var choice ; + var choice; object_holdy = options - for(i = 0; i < options.length; i++){ + for (i = 0; i < options.length; i++) { choice = document.createElement('option'); choice.textContent = object_holdy[i].displayname; choice.value = object_holdy[i].name; @@ -190,36 +218,177 @@ function loadDataTypeOptions(options){ } //function to load language options to the drop down list -function loadLanguageOptions(){ +function loadLanguageOptions() { try { + var menu = document.getElementById('language_option'); + var menu_doc = document.getElementById('document_language_option'); var object_holdy; - var choice ; + var choice; + var choice2; object_holdy = Object.keys(languageOptions); - for(i = 0; i < object_holdy.length; i++){ + 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); + choice2 = document.createElement('option'); + choice2.textContent = object_holdy[i]; + choice2.value = object_holdy[i]; + choice2.setAttribute('data-image', languageOptions[object_holdy[i]].flagPath); + menu_doc.appendChild(choice2); menu.appendChild(choice); + } + new lc_select(document.getElementById('language_option')); //loads the flag images so they get displayed in the gui + new lc_select(document.getElementById('document_language_option')); } 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"]'); + let isChecked = false; + var checkedCounter = 0; + checkboxes.forEach(function (checkbox) { + if (checkbox.checked) { + isChecked = true; + checkedCounter++; + } + }); + + if (isChecked) { + //Code to submit the video + var selectedCheckboxes = {}; + checkboxes.forEach(function (checkbox) { + if (checkbox.checked) { + selectedCheckboxes[checkbox.nextElementSibling.textContent] = ""; + } + }); + + const testEndings = [".mp4", ".mov", ".avi", ".mkv"]; + var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]); + var pathToLower = pathTest.toLowerCase(); + if (testEndings.some(e => pathToLower.endsWith(e))) { + //assembly of the json for the main + + var typeCheckbox; + if (document.getElementById("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value; + if (document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value; + if (document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value; + if (document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value; + if (document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value; + + document.getElementById("testy").style.visibility = "visible" + document.getElementById("box1").style.backgroundColor = "red"; + document.getElementById("box2").style.backgroundColor = "red"; + document.getElementById("box3").style.backgroundColor = "red"; + document.getElementById("box4").style.backgroundColor = "red"; + console.log(selectedCheckboxes); + const outputType = document.getElementById("output_type"); + const transcriptionType = document.getElementById("transkript_type"); + const aiType = document.getElementById("ai_type"); + const sendingPackage = { + "video": { + "module": "extraction-video-to-audio", + "inputVideoPath": pathTest + }, + "transcription": { + "module": transcriptionType.value + }, + "document": { + "module": aiType.value, + "type": typeCheckbox, + "outputType": outputType.value + } + }; + window.submit.submit(sendingPackage) + } else { + alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].'); + } + + + } else { + //language only english at the moment + alert('Please select at least one document type.'); + } + } catch (error) { + console.log("Error in script.js checkBoxes function"); + console.log(error); + } + +} + +//function the the submit button on step 4 can be pressed +function activateSubmitBtn(hasFile) { + try { + document.getElementById("submitButton").disabled = !hasFile; + } catch (error) { + console.log(error); + } +} + +//function to regulate the progress on the progressbar +function updateProgressBar(bar, value) { + try { + value = Math.round(value); + bar.querySelector(".progress_fill").style.width = `${value}%`; + bar.querySelector(".progress_text").textContent = `${value}%`; + } catch (error) { + console.log("Error in scripts.js updateProgressBar function"); + console.log(error); + } + +} + +//function to hide the progressbar +function deaktivateProgressbar() { + try { + document.getElementById("progressbar").style.visibility = "hidden"; + } catch (error) { + console.log(error); + } +} + +/* + +Functions used in Step 5 + +*/ + + //function to load speaker options to the drop down list -function loadSpeakerOptions(options){ +function loadSpeakerOptions(options) { try { var menu = document.getElementById('cur_speaker'); - var l = document.getElementById('cur_speaker').options.length -1; - for(i = l; i >= 0; i--){ + var l = document.getElementById('cur_speaker').options.length - 1; + for (i = l; i >= 0; i--) { menu.remove(i); } var object_holdy; var choice; object_holdy = Object.keys(options); - for(i = 0; i < object_holdy.length; i++){ + for (i = 0; i < object_holdy.length; i++) { choice = document.createElement('option'); choice.textContent = options[object_holdy[i]].name; choice.value = object_holdy[i]; @@ -233,7 +402,7 @@ function loadSpeakerOptions(options){ } //function to load speaker audio file options to the drop down list -function loadSpeakerAudio(option){ +function loadSpeakerAudio(option) { try { var menu = document.getElementById('speakerAudioViewer'); var aud = document.createElement("source"); @@ -245,75 +414,20 @@ 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 = {}; -function setSpeakerAudiosValue(valy){ +function setSpeakerAudiosValue(valy) { try { speakerAudios = valy; speakerRewriten = valy; document.getElementById("speakerAudioViewer").src = valy.speakerA.src; } catch (error) { - + } } - -function rewriteSpeakerName(){ +//Function to rewrite the speaker name in the json +function rewriteSpeakerName() { try { var tempy = document.getElementById("cur_speaker").value; speakerAudios[tempy].name = document.getElementById("newSpeaker").value; @@ -322,15 +436,21 @@ function rewriteSpeakerName(){ console.log("\n\n\n" + error + "\n\n\n") } } - -function sendSpeakerPackages(){ +//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 +458,31 @@ function fileDownload() { console.error("Download failed:", error); } } + + + + + +/* + +Functions for the custom document section + +*/ + +//reload drop down +function reloadDocuments() { + [...existingDocs.querySelectorAll('option:not([value="newDoc"])')] + .forEach(o => o.remove()); + + 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ß + existingDocs.appendChild(option); + }); + }); +} \ No newline at end of file diff --git a/electron/main/style.css b/electron/main/style.css index 4040e09..0d6c781 100644 --- a/electron/main/style.css +++ b/electron/main/style.css @@ -9,7 +9,7 @@ body { gap: 10px; margin: 0; } - + #h1 { position: absolute; left: 50%; @@ -22,42 +22,42 @@ body { #h1-wrapper { position: relative; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - width: 770px; - height: 60px; + width: 780px; + height: 60px; background-color: #FFF; - box-shadow: 0px 4px 10px rgba(0,0,0,0.1); + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); border-radius: 5px; margin-bottom: 10px; display: flex; align-items: center; -} +} .upload-container { background: white; padding: 40px; border-radius: 12px; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); text-align: center; width: 350px; height: 200px; transition: border 0.3s, background-color 0.3s; border: 2px dashed #7378c9; } - - + + .upload-container.dragover { border-color: #007BFF; background-color: #eaf0ff; } - - + + .upload-container p { margin: 0 0 15px 0; font-size: 16px; color: #555; } - - + + .file-name { margin-top: 10px; font-size: 14px; @@ -66,19 +66,19 @@ body { text-overflow: ellipsis; white-space: nowrap; } - + #thumbnailContainer { width: 100%; display: flex; justify-content: center; margin-bottom: 15px; } - + #thumbnailImage { width: 200px; height: auto; border-radius: 10px; - box-shadow: 0px 4px 10px rgba(0,0,0,0.1); + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); object-fit: cover; } @@ -87,7 +87,7 @@ body { height: 100px; /*border: 1px dashed black;*/ } - + .custom-btn { padding: 10px 20px; margin-top: 10px; @@ -98,81 +98,87 @@ body { cursor: pointer; font-size: 14px; } - - + + .custom-btn:hover { background-color: #0056b3; } - + .submit-btn:hover { background-color: #0056b3; } #step2 { - gap: 30px; + gap: 25px; } .KI-wrapper { - margin-top: 40px; + margin-top: 10px; } - + input[type="file"] { display: none; } - + .checkbox-group { - --borderColor: #007bfff5; - --borderWidth: .125em; - } + --borderColor: #007bfff5; + --borderWidth: .125em; +} - .checkbox-group input[type=checkbox] { - -webkit-appearance: none; - appearance: none; - vertical-align: middle; - background: #fff; - font-size: 1.8em; - border-radius: 0.125em; - display: inline-block; - border: var(--borderWidth) solid var(--borderColor); - width: 1em; - height: 1em; - position: relative; - } - .checkbox-group input[type=checkbox]:before, - .checkbox-group input[type=checkbox]:after { - content: ""; - position: absolute; - background: var(--borderColor); - width: calc(var(--borderWidth) * 3); - height: var(--borderWidth); - top: 50%; - left: 10%; - transform-origin: left center; - } - .checkbox-group input[type=checkbox]:before { - transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0); - transition: transform 200ms ease-in 200ms; - } - .checkbox-group input[type=checkbox]:after { - width: calc(var(--borderWidth) * 5); - transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0); - transform-origin: left center; - transition: transform 200ms ease-in; - } - .checkbox-group input[type=checkbox]:checked:before { - transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1); - transition: transform 200ms ease-in; - } - .checkbox-group input[type=checkbox]:checked:after { - width: calc(var(--borderWidth) * 5); - transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1); - transition: transform 200ms ease-out 200ms; - } - .checkbox-group input[type=checkbox]:focus { - outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25); - } +.checkbox-group input[type=checkbox] { + -webkit-appearance: none; + appearance: none; + vertical-align: middle; + background: #fff; + font-size: 1.8em; + border-radius: 0.125em; + display: inline-block; + border: var(--borderWidth) solid var(--borderColor); + width: 1em; + height: 1em; + position: relative; +} -.checkbox-container{ +.checkbox-group input[type=checkbox]:before, +.checkbox-group input[type=checkbox]:after { + content: ""; + position: absolute; + background: var(--borderColor); + width: calc(var(--borderWidth) * 3); + height: var(--borderWidth); + top: 50%; + left: 10%; + transform-origin: left center; +} + +.checkbox-group input[type=checkbox]:before { + transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0); + transition: transform 200ms ease-in 200ms; +} + +.checkbox-group input[type=checkbox]:after { + width: calc(var(--borderWidth) * 5); + transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0); + transform-origin: left center; + transition: transform 200ms ease-in; +} + +.checkbox-group input[type=checkbox]:checked:before { + transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1); + transition: transform 200ms ease-in; +} + +.checkbox-group input[type=checkbox]:checked:after { + width: calc(var(--borderWidth) * 5); + transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1); + transition: transform 200ms ease-out 200ms; +} + +.checkbox-group input[type=checkbox]:focus { + outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25); +} + +.checkbox-container { margin-top: 8px; display: flex; justify-items: left; @@ -186,7 +192,7 @@ input[type="file"] { align-items: center; justify-content: center; padding: 10px 20px; - margin: 130px auto 10px auto; + margin: 110px auto 10px auto; background-color: #007BFF; color: white; border: none; @@ -194,29 +200,29 @@ input[type="file"] { cursor: pointer; font-size: 14px; } - + .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } - + .mitte { background-color: #FFF; display: flex; - width: 700px; + width: 780px; + height: 500px; flex-direction: column; align-items: center; - padding: 40px; gap: 10px; border: 0px; border-color: black; border-style: solid; border-radius: 6px; - box-shadow: 0px 4px 10px rgba(0,0,0,0.1); + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); } - -.progressbar{ + +.progressbar { position: relative; width: 210px; height: 30px; @@ -226,15 +232,15 @@ input[type="file"] { overflow: hidden; visibility: hidden; } - -.progress_fill{ + +.progress_fill { width: 0%; height: 100%; background: green; transition: all 0.2s; } - -.progress_text{ + +.progress_text { position: absolute; top: 50%; right: 5px; @@ -252,7 +258,9 @@ input[type="file"] { padding: 2px 10px 2px 10px; } -#ai_type, #transkript_type, #language_option { +#ai_type, +#transkript_type, +#language_option { padding: 3px; } @@ -260,7 +268,7 @@ input[type="file"] { gap: 60px; display: flex; justify-content: center; - overflow-wrap:inherit; + overflow-wrap: inherit; padding-bottom: 20px; margin-top: 40px; margin-bottom: 10px; @@ -274,7 +282,9 @@ input[type="file"] { background: #fff; padding: 10px 30px; border-radius: 6px; - box-shadow: 0 4px 10px rgba(0,0,0,0.1); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + max-width: 720px; + min-width: 720px; } .step-item { @@ -297,10 +307,11 @@ input[type="file"] { /*panels*/ .step { - margin-top: 70px; + margin-top: 40px; + margin-bottom: 40px;; display: flex; flex-direction: column; - min-height: 400px; + min-height: 425px; } /*Navigation arrows*/ @@ -336,7 +347,7 @@ input[type="file"] { cursor: not-allowed; } -.testy{ +.testy { background-color: #FFF; display: flex; width: auto; @@ -352,13 +363,13 @@ input[type="file"] { } .box2 { - background-color: red; - width: 40px; - height: 40px; - padding: 5px; - border: 1px solid black; - margin: 5px; - border-radius: 100px; + background-color: red; + width: 40px; + height: 40px; + padding: 5px; + border: 1px solid black; + margin: 5px; + border-radius: 100px; } li { @@ -394,24 +405,24 @@ li { display: none; } -#toggle1:checked + .hamburger1 .top { +#toggle1:checked+.hamburger1 .top { -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); + transform: rotate(-45deg); margin-top: 22.5px; } -#toggle1:checked + .hamburger1 .meat { +#toggle1:checked+.hamburger1 .meat { -webkit-transform: rotate(45deg); - transform: rotate(45deg); + transform: rotate(45deg); margin-top: -5px; } -#toggle1:checked + .hamburger1 .bottom { +#toggle1:checked+.hamburger1 .bottom { -webkit-transform: scale(0); - transform: scale(0); + transform: scale(0); } -#toggle1:checked ~ .menu1 { +#toggle1:checked~.menu1 { height: 150px; width: 300px; } @@ -465,7 +476,9 @@ li { transition: all 0.3s ease; } -#step2, #step3, #step5 { +#step2, +#step3, +#step5 { font-size: larger; } @@ -489,10 +502,7 @@ li { align-items: center; justify-content: center; padding: 10px 20px; - margin-left: auto; - margin-right: 0px; - margin-top: 130px; - margin-bottom: 10px; + margin: 110px auto 10px auto; background-color: #007BFF; color: white; border: none; @@ -501,7 +511,8 @@ li { font-size: 14px; } -#speakerLocker, #speakerResender{ +#speakerLocker, +#speakerResender { padding: 10px 20px; margin: 20px auto; background-color: #007BFF; @@ -510,4 +521,83 @@ li { border-radius: 8px; cursor: pointer; font-size: 14px; +} + +.h2 { + font-size: 25px; +} + +.speakerView, +.speakerAudio, +.speakerWrite { + margin-top: auto; + margin-bottom: auto; +} + +.container { + background: white; + padding: 30px; + margin-top: 50px; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); + width: 90%; + max-width: 650px; +} + +input[type="text"], +textarea, +select { + width: 80%; + padding: 10px; + margin-top: 5px; + border-radius: 6px; + border: 1px solid #ccc; + font-size: 14px; +} + +textarea { + height: 120px; + resize: vertical; +} + +.buttons { + display: flex; + justify-content: space-between; + margin-top: 25px; +} + +.hidden { + visibility: hidden; +} + +button { + padding: 10px 20px; + font-size: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + transition: 0.2s; + background-color: #007BFF; + color: white; +} + +button:hover { + background-color: #0056b3; +} + +@media (max-width: 500px) { + .buttons { + flex-direction: column; + } + + .buttons button { + width: 100%; + margin-top: 10px; + } +} + +#result { + margin-top: 20px; + color: #333; + word-break: break-word; } \ No newline at end of file diff --git a/main.js b/main.js index a2c7e34..efe940b 100644 --- a/main.js +++ b/main.js @@ -281,8 +281,21 @@ electron.ipcMain.handle('save-txt-file', (event, fileName, content) => { return true; }); -// +//read file content electron.ipcMain.handle('read-txt-file', (event, fileName) => { const filePath = `${mainDir}/storage/documentType/${fileName}`; return fs.readFileSync(filePath, 'utf8'); +}); + +//delete documentfiles + +electron.ipcMain.handle('delete-txt-file', (event, fileName) => { + const filePath = `${mainDir}/storage/documentType/${fileName}.txt`; + + if (fs.existsSync(filePath)) { + fs.unlinkSync(filePath); + return true; + } else { + return false; + } }); \ No newline at end of file