Merge commit 'b4f2ed561dbf2ae87d7816e8aa5b708ed70fb596' into feature/modular-ipc-system-implementation

2026-06-15 18:01:52 +02:00 · 2025-11-24 12:20:06 +01:00
parent c2f22b3525 b4f2ed561d
commit 8046fe53d1
5 changed files with 279 additions and 80 deletions
@@ -9,8 +9,21 @@
 <body>
 
 <div class="mitte" id="mitte"> 
-  <div class="flagsBtns" id="flagsBtns">
+  <div class="labelDiv" id="labelDiv">
+    <label id="labelKI">Select ki:</label>
+    <label id="labelTranscription">Select transcription:</label>
+    <label id="labelLanguage">Select language:</label>
+    <img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
+  </div>
+  <div class="dropdownMenus" id="dropdownMenus">
    <select name="ai_type" id="ai_type">
+      <option value="ai">ai</option>
+    </select>
+    <select name="transkript_type" id="transkript_type">
+      <option value="transkripty">transkripty</option>
+    </select>
+    <select name="output_type" id="output_type">
+      <option value="mp4">mp4</option>
    </select>
    <select name="language_option" id="language_option">
    </select>
@@ -20,28 +33,32 @@

  <div class="upload-container" id="uploadContainer">
    <p id="p1">Drag and drop video file</p>
+    <video id="previewThumbnail" autoplay="false">
+    </video>
    <div class="file-name" id="fileName">No video chosen</div>
+    <div id="thumbnailContainer">
+      <img id="thumbnailImage" style="display:none;">
    </div>
-
      <button class="custom-btn" id="manualUploadBtn">Search video</button>
  <input type="file" id="videoUpload" accept="video/*">
+  </div>

 <div class="checkbox-group">
  <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
  <div class="checkbox-container">
-    <input type="checkbox" name ="docFormat" id="docFormat">
+    <input type="checkbox" name ="docFormat" id="docFormat" value="Meeting report">
    <label id="label_format" for="docFormat">Meeting report</label>
  </div>

  <div class="checkbox-container">
-    <input type="checkbox" name="docFormat" id="docFormatSummary">
+    <input type="checkbox" name="docFormat" id="docFormatSummary" value="Summary with timestamps">
    <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
  </div>
 </div>

-<button class="submit-btn" id="submitButton" onclick="checkBoxes()">Submit</button>
+<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>

-<div class="progressbar">
+<div class="progressbar" id="progressbar">
  <div class="progress_fill"></div>
  <span class="progress_text">0%</span>
 </div>
@@ -1,5 +1,9 @@
 var languageOptions = {
    "eng":{
+        "flagPath": "flags/united-kingdom-flag-png-large.jpg",
+        "labelKI": "Select ki:",
+        "labelTranscription": "Select transcription:",
+        "labelLanguage": "Select language:",
        "title": "Video to document",
        "h1": "Video to document",
        "p1": "Drag and drop video file",
@@ -11,6 +15,10 @@ var languageOptions = {
        "submitButton": "Submit"
    },
    "de":{
+        "flagPath": "flags/germany-flag-png-large.jpg",
+        "labelKI": "Waehle KI:",
+        "labelTranscription": "Waehle Transkription:",
+        "labelLanguage": "Waehle Sprache:",
        "title": "Video zu Dokument",
        "h1": "Video zu Dokument",
        "p1": "Video per Drag & Drop ablegen",
@@ -22,6 +30,10 @@ var languageOptions = {
        "submitButton": "Absenden"
    },
    "in":{
+        "flagPath": "flags/india-flag-png-large.png",
+        "labelKI": "की का चयन करें:",
+        "labelTranscription": "प्रतिलेखन चुनें:",
+        "labelLanguage": "भाषा चुने:",
        "title": "दस्तावेज़ के लिए वीडियो",
        "h1": "दस्तावेज़ के लिए वीडियो",
        "p1": "वीडियो फ़ाइल खींचें और छोड़ें",
@@ -16,13 +16,16 @@ uploadContainer.addEventListener("drop", (e) => {
        e.preventDefault()
        const files = e.dataTransfer.files
        const filePath = window.explorer.onFileDrop(files[0])
-        var holdy = filePath + "";
-        if(holdy.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
-            console.log(filePath)
-
+        const testEndings = [".mp4", ".mov", ".avi", ".mkv"];
+        var pathToLower = filePath.toLowerCase();
+        if(testEndings.some(e => pathToLower.endsWith(e))){
+          document.getElementById("progressbar").style.visibility = "visible";
            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");
    } 
@@ -30,12 +33,52 @@ uploadContainer.addEventListener("drop", (e) => {


 window.addEventListener('load', (e) => { 
+    try {
        console.log("test");
        loadLanguageOptions(); 
+    } catch (error) {
+        
+    }
+    
 });

 language_option.addEventListener('change', (e)=>{
+    try {
        const select = document.getElementById('language_option');
-    console.log(select.value);
        changeLanguage(select.value);
+    } catch (error) {
+        
+    }
+    
+});
+
+videoUpload.addEventListener("change", () => {
+  try {
+    activateSubmitBtn(videoUpload.files.length > 0);
+  } catch (error) {
+    console.log(error);
+  }
+  
+});
+
+//listener for the file explorer search when something got selected
+videoUpload.addEventListener('change', () => {
+  try {
+    handleFiles(videoUpload.files);
+  } catch (error) {
+    console.log("Error in manualBtn EventListener change");
+    console.log(error);
+  }
+  
+});
+
+//listener for the file explorer search
+manualUploadBtn.addEventListener('click', () => {
+  try {
+    videoUpload.click();
+  } catch (error) {
+    console.log("Error in manualBtn EventListener click");
+    console.log(error);
+  }
+  
 });
@@ -1,45 +1,86 @@
-//listener for the file explorer search
-manualUploadBtn.addEventListener('click', () => {
-  try {
-    videoUpload.click();
-  } catch (error) {
-    console.log("Error in manualBtn EventListener click");
-  }
-  
-});

 //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]);
-      if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
-        window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"})
+      var pathToLower = pathTest.toLowerCase();
+      if(testEndings.some(e => pathToLower.endsWith(e))){
+        document.getElementById("progressbar").style.visibility = "visible";
+        //assembly of the json for the main
+
+        const selectedStyles = [checkedCounter];
+        var iter = 0;
+        checkboxes.forEach(function(checkbox){
+        if(checkbox.checked){
+          console.log(checkbox.value);
+          selectedStyles[iter] = {iter: checkbox.value};
+          iter++;
+          } 
+        });
+        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-toaudio",
+            "inputVideoPath": pathTest,
+            "outputType": outputType.value
+          },
+          "transcription": {
+            "module": transcriptionType.value
+          },
+          "document": {
+            "module":aiType.value,
+            "style": selectedStyles
+          }
+        };
+        console.log(sendingPackage);
+
+
+
+        //window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"});
+      }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)
+    console.log("Error in script.js checkBoxes function");
+    console.log(error);
  }
  
-// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
 }

 //language changing feature
 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;
@@ -49,34 +90,30 @@ function changeLanguage(language) {
    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) {
+    console.log("Error in script.js changeLanguage function");
    console.log(error);
  }
        
 }

-//listener for the file explorer search when something got selected
-videoUpload.addEventListener('change', () => {
-  try {
-    handleFiles(videoUpload.files);
-  } catch (error) {
-    console.log("Error in manualBtn EventListener change");
-  }
-  
-});
-
 //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}`;
+        generateThumbnail(filePath);
+        activateSubmitBtn(true);
      }
    }
  } catch (error) {
    console.log("Error in script.js handleFiles function");
+    console.log(error);
  }
  
 }
@@ -89,6 +126,7 @@ function updateProgressBar(bar, value){
    bar.querySelector(".progress_text").textContent = `${value}%`;
  } catch (error) {
    console.log("Error in scripts.js updateProgressBar function");
+    console.log(error);
  }
  
 }
@@ -97,12 +135,13 @@ function updateProgressBar(bar, value){
 function loadAiOptions(options){
  try {
    var menu = document.getElementById('ai_type');
+    var object_holdy;
+    var choice ;
+    object_holdy = Object.keys(options);
    for(i = 0; i < options.length; i++){
-      var opty = options[i];
-      var namey = "option" + i;
-      var choice = document.createElement(namey);
-      choice.textContent = "t";
-      choice.value = i;
+      choice = document.createElement('option');
+      choice.textContent = object_holdy[i];
+      choice.value = object_holdy[i];
      menu.appendChild(choice);
    }
  } catch (error) {
@@ -111,6 +150,25 @@ function loadAiOptions(options){
  }
 }

+//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 = Object.keys(options);
+    for(i = 0; i < options.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 function loadTranscriptionOptions");
+    console.log(error);
+  }
+}
+
 //function to load language options to the drop down list
 function loadLanguageOptions(){
  try {
@@ -130,3 +188,31 @@ function loadLanguageOptions(){
    console.log(error);
  }
 }
+
+function activateSubmitBtn(hasFile){
+  try {
+    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;
+}
@@ -5,7 +5,7 @@ body {
  justify-content: center;
  align-items: center;
  height: 100vh;
-  background-color: #555;
+  background-color: #f2f3f4;
  gap: 15px;
  margin: 0;
 }
@@ -17,9 +17,10 @@ body {
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  text-align: center;
-  width: 400px;
+  width: 350px;
+  height: 200px;
  transition: border 0.3s, background-color 0.3s;
-  border: 2px dashed #ccc;
+  border: 2px dashed #7378c9;
 }
 
 
@@ -40,11 +41,35 @@ body {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
+  overflow: hidden;
+  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);
+  object-fit: cover;
+}
+
+#previewThumbnail {
+  width: 150px;
+  height: 100px;
+  /*border: 1px dashed black;*/
+}
 
 .custom-btn {
  padding: 10px 20px;
+  margin-top: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
@@ -84,6 +109,8 @@ gap: 5px;
 
 .submit-btn {
  padding: 10px 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
@@ -92,17 +119,26 @@ gap: 5px;
  font-size: 14px;
 }
 
+.submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+ 
 .mitte {
-  background-color: #f2f3f4;
+  background-color: #FDFCFA;
  display: flex;
+  width: 700px;
  flex-direction: column;
  align-items: center;
  padding: 5% 50px;
  margin-top: 20px;
  gap: 10px;
-  border: 1px;
+  border: 0px;
  border-color: black;
  border-style: solid;
+  border-radius: 6px;
+  box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
 }
 
 h1 {
@@ -116,6 +152,7 @@ h1 {
  background: rgb(42, 46, 78);
  border-radius: 5px;
  overflow: hidden;
+  visibility: hidden;
 }
 
 .progress_fill{
@@ -133,15 +170,19 @@ h1 {
  color: white;
 }

-.flagsBtns {
+
+.dropdownMenus {
  display: flex;
  justify-content: flex-end;
+  margin-top: 1px;
+  gap: 150px;
+  padding: 2px 10px 2px 10px;
 }

-.de_Btn, .eng_Btn, .in_Btn {
-  padding: 8px 16px;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
+#ai_type, #transkript_type, #language_option {
+  padding: 3px;
+}
+
+.labelDiv {
+  gap: 200px;
 }