emily/video2document
1
0
Fork 0
mirror of https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git synced 2026-06-15 18:01:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Emily
2025-11-24 12:20:06 +01:00
parent c2f22b3525 b4f2ed561d
commit 8046fe53d1
5 changed files with 279 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/index.html
+25 -8
View File
@@ -9,8 +9,21 @@
<body> <body>
<div class="mitte" id="mitte"> <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"> <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>
<select name="language_option" id="language_option"> <select name="language_option" id="language_option">
</select> </select>
@@ -20,28 +33,32 @@
<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>
<div class="file-name" id="fileName">No video chosen</div> <div class="file-name" id="fileName">No video chosen</div>
</div> <div id="thumbnailContainer">
<img id="thumbnailImage" style="display:none;">
<button class="custom-btn" id="manualUploadBtn">Search video</button> </div>
<button class="custom-btn" id="manualUploadBtn">Search video</button>
<input type="file" id="videoUpload" accept="video/*"> <input type="file" id="videoUpload" accept="video/*">
</div>
<div class="checkbox-group"> <div class="checkbox-group">
<label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label> <label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
<div class="checkbox-container"> <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> <label id="label_format" for="docFormat">Meeting report</label>
</div> </div>
<div class="checkbox-container"> <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> <label id="label_summary" for="docFormatSummary">Summary with timestamps</label>
</div> </div>
</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> <div class="progress_fill"></div>
<span class="progress_text">0%</span> <span class="progress_text">0%</span>
</div> </div>
electron/main/languages.js
+12
View File
@@ -1,5 +1,9 @@
var languageOptions = { var languageOptions = {
"eng":{ "eng":{
"flagPath": "flags/united-kingdom-flag-png-large.jpg",
"labelKI": "Select ki:",
"labelTranscription": "Select transcription:",
"labelLanguage": "Select language:",
"title": "Video to document", "title": "Video to document",
"h1": "Video to document", "h1": "Video to document",
"p1": "Drag and drop video file", "p1": "Drag and drop video file",
@@ -11,6 +15,10 @@ var languageOptions = {
"submitButton": "Submit" "submitButton": "Submit"
}, },
"de":{ "de":{
"flagPath": "flags/germany-flag-png-large.jpg",
"labelKI": "Waehle KI:",
"labelTranscription": "Waehle Transkription:",
"labelLanguage": "Waehle Sprache:",
"title": "Video zu Dokument", "title": "Video zu Dokument",
"h1": "Video zu Dokument", "h1": "Video zu Dokument",
"p1": "Video per Drag & Drop ablegen", "p1": "Video per Drag & Drop ablegen",
@@ -22,6 +30,10 @@ var languageOptions = {
"submitButton": "Absenden" "submitButton": "Absenden"
}, },
"in":{ "in":{
"flagPath": "flags/india-flag-png-large.png",
"labelKI": "की का चयन करें:",
"labelTranscription": "प्रतिलेखन चुनें:",
"labelLanguage": "भाषा चुने:",
"title": "दस्तावेज़ के लिए वीडियो", "title": "दस्तावेज़ के लिए वीडियो",
"h1": "दस्तावेज़ के लिए वीडियो", "h1": "दस्तावेज़ के लिए वीडियो",
"p1": "वीडियो फ़ाइल खींचें और छोड़ें", "p1": "वीडियो फ़ाइल खींचें और छोड़ें",
electron/main/renderer.js
+52 -9
View File
@@ -16,13 +16,16 @@ uploadContainer.addEventListener("drop", (e) => {
e.preventDefault() e.preventDefault()
const files = e.dataTransfer.files const files = e.dataTransfer.files
const filePath = window.explorer.onFileDrop(files[0]) const filePath = window.explorer.onFileDrop(files[0])
var holdy = filePath + ""; const testEndings = [".mp4", ".mov", ".avi", ".mkv"];
if(holdy.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){ var pathToLower = filePath.toLowerCase();
console.log(filePath) if(testEndings.some(e => pathToLower.endsWith(e))){
document.getElementById("progressbar").style.visibility = "visible";
const files1 = e.dataTransfer.files; const files1 = e.dataTransfer.files;
handleFiles(files1); handleFiles(files1);
}else{
alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].');
} }
} catch (error) { } catch (error) {
console.log("Error in renderer.js with the listerner for the drop function"); 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) => { window.addEventListener('load', (e) => {
console.log("test"); try {
loadLanguageOptions(); console.log("test");
loadLanguageOptions();
} catch (error) {
}
}); });
language_option.addEventListener('change', (e)=>{ language_option.addEventListener('change', (e)=>{
const select = document.getElementById('language_option'); try {
console.log(select.value); const select = document.getElementById('language_option');
changeLanguage(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);
}
}); });
electron/main/script.js
+115 -29
View File
@@ -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 to check if one checkbox is at least klicked
function checkBoxes() { function checkBoxes() {
try { try {
const checkboxes = document.querySelectorAll('input[name="docFormat"]'); const checkboxes = document.querySelectorAll('input[name="docFormat"]');
let isChecked = false; let isChecked = false;
var checkedCounter = 0;
checkboxes.forEach(function(checkbox){ checkboxes.forEach(function(checkbox){
if(checkbox.checked){ if(checkbox.checked){
isChecked = true; isChecked = true;
checkedCounter++;
} }
}); });
if(isChecked){ if(isChecked){
//Code to submit the video //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 pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
if(pathTest.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){ var pathToLower = pathTest.toLowerCase();
window.extractor.extract({inputVideoPath: pathTest, outputType:"wav"}) 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 { } else {
//language only english at the moment //language only english at the moment
alert('Please select at least one document type.'); alert('Please select at least one document type.');
} }
} catch (error) { } 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 //language changing feature
function changeLanguage(language) { function changeLanguage(language) {
try { 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('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('p1').textContent = languageOptions[language].p1;
@@ -49,34 +90,30 @@ function changeLanguage(language) {
document.getElementById('label_format').textContent = languageOptions[language].label_format; document.getElementById('label_format').textContent = languageOptions[language].label_format;
document.getElementById('label_summary').textContent = languageOptions[language].label_summary; document.getElementById('label_summary').textContent = languageOptions[language].label_summary;
document.getElementById('submitButton').textContent = languageOptions[language].submitButton; 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);
} }
} }
//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 to display the file path in the drop down box
function handleFiles(files) { function handleFiles(files) {
try { try {
if (files.length > 0) { if (files.length > 0) {
const file = files[0]; const file = files[0];
if (file.type.startsWith('video/')) { if (file.type.startsWith('video/')) {
const filePath = window.explorer.onFileDrop(files[0])
videoUpload.files = files; videoUpload.files = files;
fileName.textContent = `Chosen video: ${file.name}`; fileName.textContent = `Chosen video: ${file.name}`;
generateThumbnail(filePath);
activateSubmitBtn(true);
} }
} }
} catch (error) { } catch (error) {
console.log("Error in script.js handleFiles function"); 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}%`; bar.querySelector(".progress_text").textContent = `${value}%`;
} catch (error) { } catch (error) {
console.log("Error in scripts.js updateProgressBar function"); console.log("Error in scripts.js updateProgressBar function");
console.log(error);
} }
} }
@@ -97,12 +135,13 @@ function updateProgressBar(bar, value){
function loadAiOptions(options){ function loadAiOptions(options){
try { try {
var menu = document.getElementById('ai_type'); var menu = document.getElementById('ai_type');
var object_holdy;
var choice ;
object_holdy = Object.keys(options);
for(i = 0; i < options.length; i++){ for(i = 0; i < options.length; i++){
var opty = options[i]; choice = document.createElement('option');
var namey = "option" + i; choice.textContent = object_holdy[i];
var choice = document.createElement(namey); choice.value = object_holdy[i];
choice.textContent = "t";
choice.value = i;
menu.appendChild(choice); menu.appendChild(choice);
} }
} catch (error) { } 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 to load language options to the drop down list
function loadLanguageOptions(){ function loadLanguageOptions(){
try { try {
@@ -130,3 +188,31 @@ function loadLanguageOptions(){
console.log(error); 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;
}
electron/main/style.css
+53 -12
View File
@@ -5,7 +5,7 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; height: 100vh;
background-color: #555; background-color: #f2f3f4;
gap: 15px; gap: 15px;
margin: 0; margin: 0;
} }
@@ -17,9 +17,10 @@ body {
border-radius: 12px; 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; text-align: center;
width: 400px; width: 350px;
height: 200px;
transition: border 0.3s, background-color 0.3s; transition: border 0.3s, background-color 0.3s;
border: 2px dashed #ccc; border: 2px dashed #7378c9;
} }
@@ -40,11 +41,35 @@ body {
margin-top: 10px; margin-top: 10px;
font-size: 14px; font-size: 14px;
color: #333; 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 { .custom-btn {
padding: 10px 20px; padding: 10px 20px;
margin-top: 10px;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
border: none; border: none;
@@ -84,6 +109,8 @@ gap: 5px;
.submit-btn { .submit-btn {
padding: 10px 20px; padding: 10px 20px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
border: none; border: none;
@@ -92,17 +119,26 @@ gap: 5px;
font-size: 14px; font-size: 14px;
} }
.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.mitte { .mitte {
background-color: #f2f3f4; background-color: #FDFCFA;
display: flex; display: flex;
width: 700px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 5% 50px; padding: 5% 50px;
margin-top: 20px; margin-top: 20px;
gap: 10px; gap: 10px;
border: 1px; border: 0px;
border-color: black; border-color: black;
border-style: solid; border-style: solid;
border-radius: 6px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
} }
h1 { h1 {
@@ -116,6 +152,7 @@ h1 {
background: rgb(42, 46, 78); background: rgb(42, 46, 78);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
visibility: hidden;
} }
.progress_fill{ .progress_fill{
@@ -133,15 +170,19 @@ h1 {
color: white; color: white;
} }
.flagsBtns {
.dropdownMenus {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-top: 1px;
gap: 150px;
padding: 2px 10px 2px 10px;
} }
.de_Btn, .eng_Btn, .in_Btn { #ai_type, #transkript_type, #language_option {
padding: 8px 16px; padding: 3px;
color: white; }
border: none;
border-radius: 8px; .labelDiv {
cursor: pointer; gap: 200px;
} }