Refactor speaker management and replace functionality; add IPC for saving speaker mappings and update HTML structure

env example is in UTF 16 which, when copied and used as the .env, is...

See merge request proj-wise2526-video2document/video2document!79

electron/main/index.html

@@ -19,7 +19,7 @@
       </label>
 
       <nav class="menu1">
-        <a href="custom_document.html" class="li1">Custom document</a>
+        <a href="custom_document.html" class="li1">Manage document types</a>
         <a href="" class="li1">Help</a>
       </nav>
     </nav>

electron/main/preload.js

@@ -3,35 +3,39 @@ const { contextBridge, ipcRenderer, webUtils } = require('electron')
 try {
     contextBridge.exposeInMainWorld("explorer", {
         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)
-    })
+    });
+
+    // ALLE electronAPI Funktionen in EINEM Objekt
     contextBridge.exposeInMainWorld("electronAPI", {
-        getFilePath: (file) => {return webUtils.getPathForFile(file)}
+        getFilePath: (file) => webUtils.getPathForFile(file),
-    })
+        saveSpeakerMapping: (data) => ipcRenderer.send("save-speaker-mapping", data)
+    });
 
     contextBridge.exposeInMainWorld("onStartup", {
         getModuleNames: () => ipcRenderer.invoke('get-module-names')
-    })
+    });
 
     contextBridge.exposeInMainWorld('electron', {
         progress: (callback) => ipcRenderer.on('progress', callback)
-    })
+    });
 
     contextBridge.exposeInMainWorld('audios', {
         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")
-    })
+    });
 
-    
+    ipcRenderer.on("error", (event, err) => { alert(err) });
-    ipcRenderer.on("error", (event, err) => {alert(err)})
 } catch (error) {
-    console.log("Error in preload.js");
+    console.log("Error in preload.js", error);
-}
+}

electron/main/script.js

@@ -5,8 +5,8 @@ function checkBoxes() {
     const checkboxes = document.querySelectorAll('input[name="docFormat"]');
     let isChecked = false;
     var checkedCounter = 0;
-    checkboxes.forEach(function(checkbox){
+    checkboxes.forEach(function (checkbox) {
-      if(checkbox.checked){
+      if (checkbox.checked) {
         isChecked = true;
         checkedCounter++;
       }
@@ -15,24 +15,24 @@ function checkBoxes() {
     if (isChecked) {
       //Code to submit the video
       var selectedCheckboxes = {};
-      checkboxes.forEach(function(checkbox){
+      checkboxes.forEach(function (checkbox) {
-        if(checkbox.checked){
+        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))){
+      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("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value;
-        if(document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value;
+        if (document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value;
-        if(document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value;
+        if (document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value;
-        if(document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value;
+        if (document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value;
-        if(document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value;
+        if (document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value;
 
         document.getElementById("testy").style.visibility = "visible"
         document.getElementById("box1").style.backgroundColor = "red";
@@ -45,20 +45,20 @@ function checkBoxes() {
         const aiType = document.getElementById("ai_type");
         const sendingPackage = {
           "video": {
-            "module":"extraction-video-to-audio",
+            "module": "extraction-video-to-audio",
             "inputVideoPath": pathTest
           },
           "transcription": {
             "module": transcriptionType.value
           },
           "document": {
-            "module":aiType.value,
+            "module": aiType.value,
             "type": typeCheckbox,
             "outputType": outputType.value
           }
         };
         window.submit.submit(sendingPackage)
-      }else{
+      } else {
         alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].');
       }
 
@@ -71,7 +71,7 @@ function checkBoxes() {
     console.log("Error in script.js checkBoxes function");
     console.log(error);
   }
-  
+
 }
 
 //language changing feature
@@ -95,7 +95,7 @@ function changeLanguage(language) {
     console.log("Error in script.js changeLanguage function");
     console.log(error);
   }
-        
+
 }
 
 //function to display the file path in the drop down box
@@ -129,17 +129,17 @@ function updateProgressBar(bar, value) {
     console.log("Error in scripts.js updateProgressBar function");
     console.log(error);
   }
-  
+
 }
 
 //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 +152,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 +171,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,13 +190,13 @@ 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 object_holdy;
-    var choice ;
+    var choice;
     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];
@@ -209,17 +209,17 @@ function loadLanguageOptions(){
 }
 
 //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;
+    var l = document.getElementById('cur_speaker').options.length - 1;
-    for(i = l; i >= 0; i--){
+    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 +233,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");
@@ -246,7 +246,7 @@ function loadSpeakerAudio(option){
 }
 
 
-function activateSubmitBtn(hasFile){
+function activateSubmitBtn(hasFile) {
   try {
     document.getElementById("submitButton").disabled = !hasFile;
   } catch (error) {
@@ -254,7 +254,7 @@ function activateSubmitBtn(hasFile){
   }
 }
 
-function deaktivateProgressbar(){
+function deaktivateProgressbar() {
   try {
     document.getElementById("progressbar").style.visibility = "hidden";
   } catch (error) {
@@ -263,7 +263,7 @@ function deaktivateProgressbar(){
 }
 
 //Video thumbnail generation
-function generateThumbnail(path){
+function generateThumbnail(path) {
   const videoElement = document.getElementById("previewThumbnail");
   while (videoElement.firstChild) videoElement.removeChild(videoElement.firstChild);
   videoElement.src = path;
@@ -281,7 +281,7 @@ let currentStep = 1;
 const totalSteps = steps.length;
 
 function showStep(stepNumber) {
-  if (stepNumber < 1 || stepNumber > totalSteps){
+  if (stepNumber < 1 || stepNumber > totalSteps) {
     console.error("StepNumber out of Bounds", stepNumber);
     return;
   }
@@ -292,7 +292,7 @@ function showStep(stepNumber) {
   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");
+  if (activeBtn) activeBtn.classList.add("active");
 
   prevBtn.disabled = stepNumber == 1;
   nextBtn.disabled = stepNumber === totalSteps;
@@ -303,31 +303,40 @@ function showStep(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 rewriteSpeakerName() {
   try {
-    var tempy = document.getElementById("cur_speaker").value;
+    const oldKey = document.getElementById("cur_speaker").value;
-    speakerAudios[tempy].name = document.getElementById("newSpeaker").value;
+    const newName = document.getElementById("newSpeaker").value;
+
+    speakerAudios[oldKey].name = newName;
     loadSpeakerOptions(speakerAudios);
+
+    // IPC-Aufruf an Electron main process
+    window.electronAPI.saveSpeakerMapping({
+      speakerId: oldKey,
+      speakerName: newName
+    });
+
   } catch (error) {
-    console.log("\n\n\n" + error + "\n\n\n")
+    console.log(error);
   }
 }
 
-function sendSpeakerPackages(){
+function sendSpeakerPackages() {
   try {
     window.submitSpeaker.speaker_submit(speakerAudios);
   } catch (error) {
-    
+
   }
 }
 

main.js

@@ -103,7 +103,23 @@ electron.ipcMain.handle('get-module-names', async () => {
     return module_array
 });
 
+electron.ipcMain.on("save-speaker-mapping", (event, data) => {
 
+  const filePath = "/Users/mikehughes/PROJ/video2document/storage/speakerMapping/speakerMapping.json";
+
+  const payload = {
+    speakerId: data.speakerId,
+    speakerName: data.speakerName,
+    updated: new Date().toISOString()
+  };
+
+  try {
+    fs.writeFileSync(filePath, JSON.stringify(payload, null, 2), "utf8");
+    console.log("Speaker mapping saved!");
+  } catch (error) {
+    console.error("Failed to save speaker mapping", error);
+  }
+});
 // electron.ipcMain.on("get_modules", async (event, args) => {
 //     let module_array = {
 //         "ai_modules":[],

package-lock.json

@@ -450,6 +450,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.2.tgz",
       "integrity": "sha512-uWN8YqxXxqFMX2RqGOrumsKeti4LlmIMIyV0lgut4jx7KQBcBiW6vkDtIBvHnHIquwNfJhk8v2OtmO8zXWHfPA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1305,7 +1306,8 @@
       "version": "0.0.1534754",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1534754.tgz",
       "integrity": "sha512-26T91cV5dbOYnXdJi5qQHoTtUoNEqwkHcAyu/IKtjIAxiEqPMrDiRkDOPWVsGfNZGmlQVHQbZRSjD8sxagWVsQ==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/diff": {
       "version": "4.0.2",
@@ -3488,9 +3490,10 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.14.0",
+      "version": "6.14.1",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "side-channel": "^1.1.0"
       },
@@ -4204,6 +4207,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

services/modules/replace_speaker/replaceSpeaker.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const path = require('path');
+
+const module_exports = {
+    name: "replace_speaker",
+    type: "processor",
+    displayname: "Speaker Name Replacer",
+    description: "Replaces speaker placeholder names with actual names based on a mapping in HTML files",
+
+    async function({ inputHtmlPath, speakerMappingPath }) {
+        return await this.replaceNames(inputHtmlPath, speakerMappingPath);
+    },
+
+    replaceNames: async function(inputHtmlPath, speakerMappingPath) {
+        try {
+            const htmlContent = await fs.promises.readFile(inputHtmlPath, "utf-8");
+            const mappingData = await fs.promises.readFile(speakerMappingPath, "utf-8");
+
+            let speakerMap = {};
+            try {
+                const parsed = JSON.parse(mappingData);
+                if (parsed.speakerId && parsed.speakerName) {
+                    speakerMap[parsed.speakerId] = parsed.speakerName;
+                } else {
+                    Object.assign(speakerMap, parsed);
+                }
+            } catch (e) {
+                const lines = mappingData.trim().split('\n');
+                lines.forEach(line => {
+                    const [placeholder, realName] = line.split(',').map(s => s.trim());
+                    if (placeholder && realName) speakerMap[placeholder] = realName;
+                });
+            }
+
+            let outputContent = htmlContent;
+            Object.entries(speakerMap).forEach(([placeholder, realName]) => {
+                const regex = new RegExp(`[\$begin:math:text$\\\\\[\]\?\$\{placeholder\}\[\\$end:math:text$\\]]?`, 'g');
+                outputContent = outputContent.replace(regex, realName);
+            });
+
+            await fs.promises.writeFile(inputHtmlPath, outputContent, "utf-8");
+
+            return inputHtmlPath;
+
+        } catch (error) {
+            console.error("Error replacing speaker names:", error);
+            throw error;
+        }
+    }
+};
+
+module.exports = module_exports;
+
+if (require.main === module) {
+    (async () => {
+        const args = process.argv.slice(2);
+        if (args.length < 2) process.exit(1);
+
+        const [inputHtmlPath, speakerMappingPath] = args;
+
+        if (!fs.existsSync(inputHtmlPath)) process.exit(1);
+        if (!fs.existsSync(speakerMappingPath)) process.exit(1);
+
+        try {
+            await module_exports.replaceNames(inputHtmlPath, speakerMappingPath);
+        } catch (err) {
+            process.exit(1);
+        }
+    })();
+}

storage/speakerMapping/speakerMapping.json

@@ -0,0 +1,5 @@
+{
+  "speakerId": "speakerB",
+  "speakerName": "Peter",
+  "updated": "2026-01-10T13:54:55.608Z"
+}