Implemented audio extractor into IPC call, sooooooo, frontend and backend are now officially linked successfully

fixed the code so that it now returns the actual path of the file
fixed code
2026-06-15 18:01:52 +02:00 · 2025-11-12 20:28:55 +01:00 · 2025-11-12 20:24:45 +01:00 · 2025-11-12 20:04:48 +01:00 · 2025-11-12 20:03:09 +01:00 · 2025-11-12 20:00:25 +01:00
16 changed files with 1699 additions and 157 deletions
@@ -964,4 +964,8 @@ app.*.symbols
 !/dev/ci/**/Gemfile.lock
 #Storage files
-storage/
+storage/
 *.mp4
 *.wav
 *.flac
@@ -3,15 +3,22 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Video Upload Drag and Drop + Button</title>
+  <title id="title">Video to document</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <div class="mitte" id="mitte"> 
-  <h1>Video to document</h1> 
+  <div class="flagsBtns" id="flagsBtns">
    <button class="de_Btn" id="de_Btn" onclick="changeLanguage('de')"><img src="flags/germany-flag-png-large.jpg" width="25px" height="20px"/></button>
    <button class="eng_Btn" id="eng_Btn" onclick="changeLanguage('en')"><img src="flags/united-kingdom-flag-png-large.jpg" width="25px" height="20px"/></button>
    <button class="in_Btn" id="in_Btn" onclick="changeLanguage('in')"><img src="flags/india-flag-png-large.png" width="25px" height="20px"/></button>
  </div>
  <h1 id="h1">Video to document</h1> 
  <div class="upload-container" id="uploadContainer">
-    <p>Drag and drop video file</p>
+    <p id="p1">Drag and drop video file</p>
    <div class="file-name" id="fileName">No video chosen</div>
  </div>
@@ -19,19 +26,24 @@
  <input type="file" id="videoUpload" accept="video/*">
 <div class="checkbox-group">
-  <label for="checkbox-group">Choose prefered document style:</label>
+  <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
  <div class="checkbox-container">
-    <input type="checkbox" id="docFormat">
+    <input type="checkbox" name ="docFormat" id="docFormat">
-    <label for "docFormat">Meeting report</label>
+    <label id="label_format" for="docFormat">Meeting report</label>
  </div>
  <div class="checkbox-container">
-    <input type="checkbox" id="docFormatCustom">
+    <input type="checkbox" name="docFormat" id="docFormatSummary">
-    <label for "docFormatCustom">Summary with timestamps</label>
+    <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
  </div>
 </div>
-<button class="submit-btn" id="submitButton">Submit Video</button>
+<button class="submit-btn" id="submitButton" onclick="checkBoxes()">Submit</button>
 <div class="progressbar">
  <div class="progress_fill"></div>
  <span class="progress_text">0%</span>
 </div>
 </div>
  <script src="script.js"></script>
@@ -2,6 +2,17 @@
 const { contextBridge, ipcRenderer, webUtils } = require('electron')
-contextBridge.exposeInMainWorld("explorer", {
+try {
-    onFileDrop: (file) => webUtils.getPathForFile(file)
+    contextBridge.exposeInMainWorld("explorer", {
-})
+        onFileDrop: (file) => webUtils.getPathForFile(file)
    })
    contextBridge.exposeInMainWorld("extractor", {
        extract: (file) => ipcRenderer.send("extract", file)
    })
    contextBridge.exposeInMainWorld("electronAPI", {
        getFilePath: (file) => {return webUtils.getPathForFile(file)}
    })
 } catch (error) {
    console.log("Error in preload.js");
 }
@@ -1,22 +1,31 @@
-const dropzone = document.getElementById("uploadContainer");
+uploadContainer.addEventListener("dragover", (e) =>{
-
+    try {
-dropzone.addEventListener("dragover", (e) =>{
+        e.stopPropagation();
-    e.stopPropagation();
+        e.preventDefault();
-    e.preventDefault();
+    } catch (error) {
-});
+        console.log("Error in renderer.js dragover listener function")
 dropzone.addEventListener("drop", (e) => {
    e.stopPropagation()
    e.preventDefault()
    const files = e.dataTransfer.files
    const filePath = window.explorer.onFileDrop(files[0])
    var holdy = filePath + "";
    if(holdy.endsWith(".mp4")){
        console.log(filePath)
        const files1 = e.dataTransfer.files;
        handleFiles(files1);
    }
 });
 //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])
        var holdy = filePath + "";
        if(holdy.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
            console.log(filePath)
            const files1 = e.dataTransfer.files;
            handleFiles(files1);
        }
    } catch (error) {
        console.log("Error in renderer.js with the listerner for the drop function");
    }
 })
@@ -1,31 +1,115 @@
 const uploadContainer = document.getElementById('uploadContainer');
 const fileInput = document.getElementById('videoUpload');
 const fileName = document.getElementById('fileName');
 const manualBtn = document.getElementById('manualUploadBtn');
 const videoPreview = document.getElementById('videoPreview');
-
+//listener for the file explorer search
-
+manualUploadBtn.addEventListener('click', () => {
-
+  try {
-
+    videoUpload.click();
-manualBtn.addEventListener('click', () => {
+  } catch (error) {
-  fileInput.click();
+    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;
-fileInput.addEventListener('change', () => {
+    checkboxes.forEach(function(checkbox){
-  handleFiles(fileInput.files);
+      if(checkbox.checked){
-});
+        isChecked = true;
      }
    });
    if(isChecked){
      //Code to submit the video
      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"})
      }
    } else {
      //language only english at the moment
      alert('Please select at least one document type.');
    }
  } catch (error) {
    console.log(error)
  }
 // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
 }
-
+//language changing feature
-
+function changeLanguage(language) {
-function handleFiles(files) {
+    if (language === 'en') {
-  if (files.length > 0) {
+        document.getElementById('title').textContent = 'Video to document';
-    const file = files[0];
+        document.getElementById('h1').textContent = 'Video to document';
-    if (file.type.startsWith('video/')) {
+        document.getElementById('p1').textContent = 'Drag and drop video file';
-      fileInput.files = files;
+        document.getElementById('fileName').textContent = 'No video chosen';
-      fileName.textContent = `Chosen video: ${file.name}`;
+        document.getElementById('manualUploadBtn').textContent = 'Search video';
        document.getElementById('checkbox_group').textContent = 'Choose prefered document style:';
        document.getElementById('label_format').textContent = 'Meeting report';
        document.getElementById('label_summary').textContent = 'Summary with timestamps';
        document.getElementById('submitButton').textContent = 'Submit';
    } else if (language === 'de') {
        document.getElementById('title').textContent = 'Video zu Dokument';
        document.getElementById('h1').textContent = 'Video zu Dokument';
        document.getElementById('p1').textContent = 'Video per Drag & Drop ablegen';
        document.getElementById('fileName').textContent = 'Kein Video ausgewaehlt';
        document.getElementById('manualUploadBtn').textContent = 'Video suchen';
        document.getElementById('checkbox_group').textContent = 'Bevorzugte Dokumentvarianten:';
        document.getElementById('label_format').textContent = 'Meeting Bericht';
        document.getElementById('label_summary').textContent = 'Zusammenfassung mit Zeitstempeln';
        document.getElementById('submitButton').textContent = 'Absenden';
    } else if(language == "in") {
        document.getElementById('title').textContent = 'दस्तावेज़ के लिए वीडियो';
        document.getElementById('h1').textContent = 'दस्तावेज़ के लिए वीडियो';
        document.getElementById('p1').textContent = 'वीडियो फ़ाइल खींचें और छोड़ें';
        document.getElementById('fileName').textContent = 'कोई वीडियो नहीं चुना गया';
        document.getElementById('manualUploadBtn').textContent = 'वीडियो खोजें';
        document.getElementById('checkbox_group').textContent = 'पसंदीदा दस्तावेज़ शैली चुनें:';
        document.getElementById('label_format').textContent = 'बैठक रिपोर्ट';
        document.getElementById('label_summary').textContent = 'टाइमस्टैम्प के साथ सारांश';
        document.getElementById('submitButton').textContent = 'जमा करना';
    }
 }
 //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/')) {
        videoUpload.files = files;
        fileName.textContent = `Chosen video: ${file.name}`;
      }
    }
  } catch (error) {
    console.log("Error in script.js handleFiles function");
  }
 }
 //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");
  }
 }
@@ -5,7 +5,7 @@ body {
  justify-content: center;
  align-items: center;
  height: 100vh;
-  background-color: #444;
+  background-color: #555;
  gap: 15px;
  margin: 0;
 }
@@ -75,6 +75,7 @@ gap: 5px;
 .checkbox-group {
  margin-top: 15px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
@@ -92,14 +93,14 @@ gap: 5px;
 }
 .mitte {
-  background-color: #eaf0ff;
+  background-color: #f2f3f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5% 50px;
  margin-top: 20px;
  gap: 10px;
-  border: 2px;
+  border: 1px;
  border-color: black;
  border-style: solid;
 }
@@ -108,3 +109,39 @@ h1 {
  align-content: center;
 }
 .progressbar{
  position: relative;
  width: 210px;
  height: 30px;
  background: rgb(42, 46, 78);
  border-radius: 5px;
  overflow: hidden;
 }
 .progress_fill{
  width: 0%;
  height: 100%;
  background: green;
  transition: all 0.2s;
 }
 .progress_text{
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  color: white;
 }
 .flagsBtns {
  display: flex;
  justify-content: flex-end;
 }
 .de_Btn, .eng_Btn, .in_Btn {
  padding: 8px 16px;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
 }
@@ -55,4 +55,25 @@ rl.on("line", data =>{
 // ----------------------------------------------------------- ELECTRON ----------------------------------------------------------- //
-// TODO - Add Electron support to the project
+let mainWindow;
 function createWindow() {
  mainWindow = new electron.BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: `${mainDir}/electron/main/preload.js`
    }
  });
  mainWindow.loadFile('./electron/main/index.html');
 }
 electron.app.whenReady().then(createWindow);
 electron.ipcMain.on("extract", (event, args) => {
    mapFunctions.get("extraction-video-to-audio").function(args)
 })
@@ -1,10 +1,10 @@
 {
  "type": "module",
  "dependencies": {
    "cli-progress": "^3.12.0",
    "electron": "^39.1.1",
    "express": "^5.1.0",
    "ffmpeg-static": "^5.2.0",
-    "fluent-ffmpeg": "^2.1.3",
+    "fluent-ffmpeg": "^2.1.3"
    "express": "^5.1.0"
  },
  "devDependencies": {
    "@types/cli-progress": "^3.11.6",
@@ -22,6 +22,7 @@
    "test": "tests"
  },
  "scripts": {
    "start": "electron main.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
@@ -31,5 +32,3 @@
  "author": "",
  "license": "ISC"
 }
@@ -8,3 +8,11 @@ fs              = require("fs")
 readline        = require("readline")
 config          = require("./config/config")
 ffmpegPath = require('ffmpeg-static');
 ffmpeg = require('fluent-ffmpeg');
 path = require('path');
 cliProgress = require('cli-progress');
 // { app, BrowserWindow, ipcMain, dialog } = require('electron');
 electron = require('electron');
@@ -0,0 +1,93 @@
 // Ensure ffmpeg binary is available
 if (!ffmpegPath) {
    throw new Error('FFmpeg binary not found!');
 }
 ffmpeg.setFfmpegPath(ffmpegPath);
 // Prepare output directory (always storage/audio under project root)
 const outputDir = `${__dirname}/../../../storage/audio`;
 if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
 }
 module.exports = {
    name:"extraction-video-to-audio", // Unique name for our function that will later be used to get the function from the map via "mapFunctions.get("example").function()"
    type:"extractor", // value used to differentiate each module to order them in the UI
    displayname:"Default extractor", // The displayname used within the UI
    async function(parameter){
        /*
        parameter structure:
        {
            inputVideoPath: String, // Path to the file
            outputType: String      // Audio file output format
        }
        */
        let progressBar = new cliProgress.SingleBar({
            format: 'Processing |{bar}| {percentage}% | {timemark}',
            barCompleteChar: '\u2588',
            barIncompleteChar: '\u2591',
            hideCursor: true
        });
        try {
            // if (meta.url === `file://${process.argv[1]}`) {
                this.extractAudioFromVideo(parameter.inputVideoPath, progressBar, parameter.outputType)
                    .then(() => console.log('Audio extraction successful.'))
                    .catch((err) => console.error(err));
            // }
        } catch (error) {
            console.log(parameter.outputType);
        }
    },
    // Derive input and output paths
    // const inputVideoPath = process.argv[2];
    // console.log(process.argv);
    /**
     * Extracts audio from a video using ffmpeg.
     * - Converts video to WAV (16 kHz, Mono, PCM optional if needed)
     * - Shows CLI progress bar
     * - Handles errors gracefully (without errors)
     */
    extractAudioFromVideo: async function (videoFilePath, progressBar, outputType){
        let inputVideoName = path.basename(videoFilePath, path.extname(videoFilePath));
        let outputAudioPath = path.join(outputDir, `${inputVideoName}.${outputType}`);
        return new Promise((resolve, reject) => {
            try {
                ffmpeg(videoFilePath)
                .outputFormat(outputType)
                // .audioCodec('pcm_s16le')
                .audioChannels(1)
                .audioFrequency(16000)
                // .setFfmpegPath("./ffmpeg.exe")
                .on('progress', (progress) => {
                    if (!progressBar.isActive) progressBar.start(100, 0, { timemark: '00:00:00' });
                    if (progress.percent) {
                    progressBar.update(progress.percent, { timemark: progress.timemark });
                    }
                })
                .on('end', () => {
                    progressBar.update(100, { timemark: 'done' });
                    progressBar.stop();
                    console.log(`Extraction completed: ${outputAudioPath}`);
                    resolve();
                })
                .on('error', (err) => {
                    progressBar.stop();
                    console.error(`failed_audio_extraction on type ${outputType}: ${err.message}`);
                    reject(err);
                })
                .save(outputAudioPath);
            } catch (error) {
                console.log();
            }
        });
    }
 }
@@ -1,90 +0,0 @@
 import ffmpegPath from 'ffmpeg-static';
 import ffmpeg from 'fluent-ffmpeg';
 import path from 'path';
 import fs from 'fs';
 import cliProgress from 'cli-progress';
 import { fileURLToPath } from 'url';
 // Base code reference: https://docs.yemreak.com/arsiv/programming/extract-audio-from-video-with-typescript-and-ffmpeg
 // Test command: npx ts-node ./extract.ts /path/to/video.mp4
 /**
 * Extracts audio from a video file and saves it as WAV.
 * @param videoFilePath Path to the input video file.
 */
 // Ensure ffmpeg binary is available
 if (!ffmpegPath) {
  throw new Error('FFmpeg binary not found!');
 }
 ffmpeg.setFfmpegPath(ffmpegPath);
 // Ensure an input video path is provided via CLI
 if (process.argv.length < 3) {
  console.error('Usage: ts-node ./extract.ts <input-video-path>');
  process.exit(1);
 }
 // Resolve __dirname equivalent in ESM
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // Prepare output directory (always storage/audio under project root)
 const outputDir = path.join(__dirname, '..', '..', '..', 'storage', 'audio');
 if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
 }
 // Derive input and output paths
 const inputVideoPath = process.argv[2];
 const inputVideoName = path.basename(inputVideoPath, path.extname(inputVideoPath));
 const outputAudioPath = path.join(outputDir, `${inputVideoName}.wav`);
 // Initialize CLI progress bar
 const progressBar = new cliProgress.SingleBar({
  format: 'Processing |{bar}| {percentage}% | {timemark}',
  barCompleteChar: '\u2588',
  barIncompleteChar: '\u2591',
  hideCursor: true
 });
 /**
 * Extracts audio from a video using ffmpeg.
 * - Converts video to WAV (16 kHz, Mono, PCM optional if needed)
 * - Shows CLI progress bar
 * - Handles errors gracefully (without errors)
 */
 export function extractAudioFromVideo(videoFilePath: string): Promise<void> {
  return new Promise((resolve, reject) => {
    ffmpeg(videoFilePath)
      .outputFormat('wav')
      .audioCodec('pcm_s16le')
      .audioChannels(1)
      .audioFrequency(16000)
      .on('progress', (progress) => {
        if (!progressBar.isActive) progressBar.start(100, 0, { timemark: '00:00:00' });
        if (progress.percent) {
          progressBar.update(progress.percent, { timemark: progress.timemark });
        }
      })
      .on('end', () => {
        progressBar.update(100, { timemark: 'done' });
        progressBar.stop();
        console.log(`Extraction completed: ${outputAudioPath}`);
        resolve();
      })
      .on('error', (err) => {
        progressBar.stop();
        console.error(`failed_audio_extraction: ${err.message}`);
        reject(err);
      })
      .save(outputAudioPath);
  });
 }
 // Run extraction if executed directly from CLI
 if (import.meta.url === `file://${process.argv[1]}`) {
  extractAudioFromVideo(inputVideoPath)
    .then(() => console.log('Audio extraction successful.'))
    .catch((err) => console.error(err));
 }
@@ -5,5 +5,9 @@ module.exports = {
        // We are now calling the example function from the example folder
        mapFunctions.get("example").function("Startup")
        // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
        // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./b.mp4", outputType:"wav"})
        // mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./b.mp4", outputType:"flac"})
    }
 }
Author	SHA1	Message	Date
emily	94f390f28b	Implemented audio extractor into IPC call, sooooooo, frontend and backend are now officially linked successfully	2025-11-12 20:28:55 +01:00
emily	73f6fa7524	fixed the code so that it now returns the actual path of the file	2025-11-12 20:24:45 +01:00
emily	87e3368a9a	fixed code	2025-11-12 20:04:48 +01:00
emily	6d9c94c685	removed some debug console outputs	2025-11-12 20:03:09 +01:00
emily	fbd5368223	Implemented functionality to have the UI be able to communicate with the backend	2025-11-12 20:00:25 +01:00
emily	449255dda1	Merge commit 'c8cbd4e92a034fa108d06337a3e63d24e529432f' into feature/combination-of-all-the-things	2025-11-12 19:55:50 +01:00
eric.minning	c8cbd4e92a	Fixed an error in checkBoxes function and uploadContainer "drop" listener regarding file path testing	2025-11-12 18:52:28 +01:00
eric.minning	0f54edb0aa	Removed the variables at the start of the script.js file	2025-11-12 18:44:27 +01:00
eric.minning	54f1f6c135	Added the check if a path is selected and the call to the transcript functio.	2025-11-12 18:16:27 +01:00
Verena Schulz	a32e7e5744	Checkboxes check (with alert)	2025-11-12 17:39:02 +01:00
Verena Schulz	d9e96316c0	Language selection implemented and UI reworked	2025-11-11 18:31:01 +01:00
eric.minning	da3a8c7d8c	Added try/catch handling and some comments	2025-11-11 16:02:07 +01:00
emily	dfe91bb15a	Merge commit '3a8963b49d96d0746b64244fa17458d4ae68ec45' into feature/combination-of-all-the-things	2025-11-10 17:01:30 +01:00
emily	92043440fe	Combined Frontend with backend, and implemented the extractor function into the module structure	2025-11-10 16:18:57 +01:00
emily	bd8ed1bf81	added mp4, flac and wav files to gitignore	2025-11-10 16:12:59 +01:00
Spanier, Pit	3a8963b49d	Merge branch 'feature/ui-test' into 'develop' Added a progressbar See merge request proj-wise2526-video2document/video2document!13	2025-11-10 15:43:55 +01:00
eric.minning	f4c45f8371	Added a progressbar	2025-11-10 15:38:59 +01:00
Hughes, Mike	73ad7b0687	Merge branch 'feature/modulare-pipeline-s1-04' into 'develop' Implemented the general modular framework. See merge request proj-wise2526-video2document/video2document!12	2025-11-08 14:59:56 +01:00