Merge branch 'feature/customdocument26' of https://gitlab.rlp.net/proj-wise2526-video2document/video2document into feature/customdocument26

This commit is contained in:
santa
2026-01-15 14:19:32 +01:00
6 changed files with 465 additions and 252 deletions
-4
View File
@@ -234,14 +234,10 @@
.replace(/_/g, ' ') // Leerzeichen ersetzen .replace(/_/g, ' ') // Leerzeichen ersetzen
.replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß .replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß
existingDocs.appendChild(option); existingDocs.appendChild(option);
//customDocumentTypes.appendChild(option);
}); });
}); });
} }
</script> </script>
<script src="./renderer.js"></script>
</body> </body>
+34 -13
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Video to document</title> <title id="title">Video to document</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css">
</head> </head>
<body> <body>
@@ -26,23 +27,31 @@
</section> </section>
<h1 id="h1">Video to document</h1> <h1 id="h1">Video to document</h1>
<div class="gui-language">
<!-- to do: Ausprobieren mit li, a oder button, im Notfall ohne Flaggen Icons, kein hover-->
</div>
</div> </div>
<div class="step-nav"> <div class="step-nav">
<div class="step-item active" data-step="1">1. Step</div> <div class="step-item active" data-step="1" id="step_nav1">1. Step</div>
<div class="step-item" data-step="2">2. Step</div> <div class="step-item" data-step="2" id="step_nav2">2. Step</div>
<div class="step-item" data-step="3">3. Step</div> <div class="step-item" data-step="3" id="step_nav3">3. Step</div>
<div class="step-item" data-step="4">4. Step</div> <div class="step-item" data-step="4" id="step_nav4">4. Step</div>
<div class="step-item" data-step="5">5. Step</div> <div class="step-item" data-step="5" id="step_nav5">5. Step</div>
<div class="step-item" data-step="6">6. Step</div> <div class="step-item" data-step="6" id="step_nav6">6. Step</div>
</div> </div>
<div id="middleContainerWrapper" class="middle-container-wrapper"> <div id="middleContainerWrapper" class="middle-container-wrapper">
<button id="prevBtn" class="navBtn" disabled>&larr;</button> <button id="prevBtn" class="navBtn" disabled>&larr;</button>
<!-- Visible middle part-->
<div class="mitte" id="mitte"> <div class="mitte" id="mitte">
<!-- Here starts code from step 1-->
<div class="step" id="step1"> <div class="step" id="step1">
<h2 class="h2">Upload your video here:</h2>
<div class="upload-container" id="uploadContainer"> <div class="upload-container" id="uploadContainer">
<p id="p1">Drag and drop video file</p> <p id="p1">Drag and drop video file</p>
<video id="previewThumbnail" autoplay="false"> <video id="previewThumbnail" autoplay="false">
@@ -56,7 +65,9 @@
</div> </div>
</div> </div>
<!-- Here starts code from step 2-->
<div class="step" id="step2" style="display:none;"> <div class="step" id="step2" style="display:none;">
<h2 class="h2">Choose your preferences:</h2>
<div class="KI-wrapper"> <div class="KI-wrapper">
<label id="labelKI">Select ki:</label> <label id="labelKI">Select ki:</label>
<select name="ai_type" id="ai_type"></select> <select name="ai_type" id="ai_type"></select>
@@ -78,15 +89,19 @@
<div class="language-wrapper"> <div class="language-wrapper">
<label id="labelLanguage">Select language:</label> <label id="labelLanguage">Select language:</label>
<img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
<select name="language_option" id="language_option"> <select name="language_option" id="language_option">
</select> </select>
</div> </div>
</div> </div>
<!-- Here starts code from step 3-->
<!-- Hover Effekt für Dokumentenvorschau, Fragezeichen hinter Text, drüber hoven zeigt Beispieldokument -->
<div class="step" id="step3" style="display:none;"> <div class="step" id="step3" style="display:none;">
<div class="checkbox-group"> <div class="checkbox-group">
<label id="checkbox-label" for="checkbox-group">Choose prefered document style:</label> <h2 class="h2">Choose prefered document style:</h2>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" name ="docFormat" id="docFormat" value="followup-report"> <input type="checkbox" name ="docFormat" id="docFormat" value="followup-report">
<label id="label_format" for="docFormat">Follow-up Report</label> <label id="label_format" for="docFormat">Follow-up Report</label>
@@ -111,32 +126,36 @@
</div> </div>
</div> </div>
<!-- Here starts code from step 4-->
<div class="step" id="step4" style="display:none;"> <div class="step" id="step4" style="display:none;">
<h2 class="h2">Klick to submit:</h2>
<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button> <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
<div class="testy" id="testy"> <div class="testy" id="testy">
<div class="box2" id="box1"> <div class="box2" id="box1">
</div> </div>
<p>---Starting---</p> <p id="box1_p1">---Starting---</p>
<div class="box2" id="box2"> <div class="box2" id="box2">
</div> </div>
<p>---Transkribing---</p> <p id="box2_p2">---Transkribing---</p>
<div class="box2" id="box3"> <div class="box2" id="box3">
</div> </div>
<p>---Document creation---</p> <p id="box3_p3">---Document creation---</p>
<div class="box2" id="box4"> <div class="box2" id="box4">
</div> </div>
</div> </div>
</div> </div>
<!-- Here starts code from step 5-->
<div class="step" id="step5" style="display:none;"> <div class="step" id="step5" style="display:none;">
<h2 class="h2">Change names of the speakers:</h2>
<div class="speakerView" id="speakerView"> <div class="speakerView" id="speakerView">
<label id="labelSpeaker">Select Speaker:</label> <label id="labelSpeaker">Select Speaker:</label>
<select name="cur_speaker" id="cur_speaker"> <select name="cur_speaker" id="cur_speaker">
</select> </select>
</div> </div>
<div class="speakerAudio" id="speakerAutio"> <div class="speakerAudio" id="speakerAutio">
<label id="labelSpeakerAudio">Selected Speaker</label> <label id="labelSpeakerAudio">Selected Speaker:</label>
<audio controls id="speakerAudioViewer"> <audio controls id="speakerAudioViewer">
Currently there is no audio file here. Currently there is no audio file here.
</audio> </audio>
@@ -151,7 +170,9 @@
</div> </div>
</div> </div>
<!-- Here starts code from step 6-->
<div class="step" id="step6" style="display:none;"> <div class="step" id="step6" style="display:none;">
<h2 class="h2">Klick to download your document:</h2>
<button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button> <button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button>
</div> </div>
</div> </div>
@@ -159,7 +180,7 @@
<button id ="nextBtn" class="navBtn">&rarr;</button> <button id ="nextBtn" class="navBtn">&rarr;</button>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
<script src="languages.js"></script> <script src="languages.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
<script src="./renderer.js"></script> <script src="./renderer.js"></script>
+56 -3
View File
@@ -12,7 +12,25 @@ var languageOptions = {
"checkbox_group": "Choose prefered document style:", "checkbox_group": "Choose prefered document style:",
"label_format": "Meeting report", "label_format": "Meeting report",
"label_summary": "Summary with timestamps", "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":{ "de":{
"flagPath": "flags/germany-flag-png-large.jpg", "flagPath": "flags/germany-flag-png-large.jpg",
@@ -27,7 +45,24 @@ var languageOptions = {
"checkbox_group": "Bevorzugte Dokumentvarianten:", "checkbox_group": "Bevorzugte Dokumentvarianten:",
"label_format": "Meeting Bericht", "label_format": "Meeting Bericht",
"label_summary": "Zusammenfassung mit Zeitstempeln", "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":{ "in":{
"flagPath": "flags/india-flag-png-large.png", "flagPath": "flags/india-flag-png-large.png",
@@ -42,7 +77,25 @@ var languageOptions = {
"checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:", "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
"label_format": "बैठक रिपोर्ट", "label_format": "बैठक रिपोर्ट",
"label_summary": "टाइमस्टैम्प के साथ सारांश", "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": "दस्तावेज़ प्रकार चुनें:"
} }
}; };
+99 -56
View File
@@ -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) =>{ uploadContainer.addEventListener("dragover", (e) =>{
try { try {
e.stopPropagation(); 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 //listener for the file explorer search when something got selected
videoUpload.addEventListener("change", () => { videoUpload.addEventListener("change", () => {
try { 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) {
} Listeners for Step 2
});
});
prevBtn.addEventListener("click", () => { */
try {
if (currentStep > 1) showStep(currentStep - 1);
} catch (error) {
} /*
});
nextBtn.addEventListener("click", () => { Listeners for Step 3
try {
if(currentStep < totalSteps) showStep(currentStep + 1);
} catch (error) {
} */
});
//Checkboxlistener so that only one can be selected at a time //Checkboxlistener so that only one can be selected at a time
docFormat.addEventListener("change", (e) =>{ 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) {
} Listeners for Step 4
});
window.audios.speakerAudios((event, arg) => {
loadSpeakerOptions(arg);
setSpeakerAudiosValue(arg);
});
*/
//Functions the the displayed progress in the progressbar can be changed out of the main process
window.electron.progress((event, arg) => { window.electron.progress((event, arg) => {
if(arg.curstep == 1){ if(arg.curstep == 1){
setCircleOne(); 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);
});
+259 -165
View File
@@ -1,5 +1,231 @@
let currentVideoPath = null; 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() { function checkBoxes() {
try { try {
const checkboxes = document.querySelectorAll('input[name="docFormat"]'); const checkboxes = document.querySelectorAll('input[name="docFormat"]');
@@ -74,49 +300,13 @@ function checkBoxes() {
} }
//language changing feature //function the the submit button on step 4 can be pressed
function changeLanguage(language) { function activateSubmitBtn(hasFile){
try { try {
document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath; document.getElementById("submitButton").disabled = !hasFile;
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;
} catch (error) { } catch (error) {
console.log("Error in script.js changeLanguage function");
console.log(error); 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 //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 to hide the progressbar
function loadAiOptions(options){ function deaktivateProgressbar(){
try { try {
var menu = document.getElementById('ai_type'); document.getElementById("progressbar").style.visibility = "hidden";
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) { } catch (error) {
console.log("Error in script.js loadAiOptions function");
console.log(error); 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 Functions used in Step 5
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];
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 to load speaker options to the drop down list
function loadSpeakerOptions(options){ 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 //Audio value setter
var speakerAudios = {}; var speakerAudios = {};
var speakerEndValues = {}; var speakerEndValues = {};
@@ -312,7 +387,7 @@ function setSpeakerAudiosValue(valy){
} }
} }
//Function to rewrite the speaker name in the json
function rewriteSpeakerName(){ function rewriteSpeakerName(){
try { try {
var tempy = document.getElementById("cur_speaker").value; var tempy = document.getElementById("cur_speaker").value;
@@ -322,15 +397,21 @@ function rewriteSpeakerName(){
console.log("\n\n\n" + error + "\n\n\n") 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(){ function sendSpeakerPackages(){
try { try {
window.submitSpeaker.speaker_submit(speakerAudios); window.submitSpeaker.speaker_submit(speakerAudios);
} catch (error) { } catch (error) {
console.log(error);
} }
} }
/*
Functions for Step 6
*/
function fileDownload() { function fileDownload() {
try { try {
window.download.file_download(); window.download.file_download();
@@ -338,3 +419,16 @@ function fileDownload() {
console.error("Download failed:", error); 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);
});
});
+14 -8
View File
@@ -113,7 +113,7 @@ body {
} }
.KI-wrapper { .KI-wrapper {
margin-top: 40px; margin-top: 10px;
} }
input[type="file"] { input[type="file"] {
@@ -186,7 +186,7 @@ input[type="file"] {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 10px 20px;
margin: 130px auto 10px auto; margin: 100px auto 10px auto;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
border: none; border: none;
@@ -297,10 +297,10 @@ input[type="file"] {
/*panels*/ /*panels*/
.step { .step {
margin-top: 70px; margin-top: 50px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 400px; min-height: 425px;
} }
/*Navigation arrows*/ /*Navigation arrows*/
@@ -489,10 +489,7 @@ li {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 10px 20px;
margin-left: auto; margin: 100px auto 10px auto;
margin-right: 0px;
margin-top: 130px;
margin-bottom: 10px;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
border: none; border: none;
@@ -511,3 +508,12 @@ li {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
} }
.h2 {
font-size: 25px;
}
.speakerView, .speakerAudio, .speakerWrite{
margin-top: auto;
margin-bottom: auto;
}