Implemented a dropdown field for the languages as well as functions and a file to easily implement other languages.

This commit is contained in:
2025-11-14 18:32:41 +01:00
parent 1a681eb2b8
commit 4a91f03289
5 changed files with 108 additions and 66 deletions
+7 -5
View File
@@ -10,9 +10,10 @@
<div class="mitte" id="mitte">
<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>
<select name="ai_type" id="ai_type">
</select>
<select name="language_option" id="language_option">
</select>
</div>
<h1 id="h1">Video to document</h1>
@@ -46,7 +47,8 @@
</div>
</div>
<script src="script.js"></script>
<script src="./renderer.js"></script>
<script src="languages.js"></script>
<script src="script.js"></script>
<script src="./renderer.js"></script>
</body>
</html>
+36
View File
@@ -0,0 +1,36 @@
var languageOptions = {
"eng":{
"title": "Video to document",
"h1": "Video to document",
"p1": "Drag and drop video file",
"fileName": "No video chosen",
"manualUploadBtn": "Search video",
"checkbox_group": "Choose prefered document style:",
"label_format": "Meeting report",
"label_summary": "Summary with timestamps",
"submitButton": "Submit"
},
"de":{
"title": "Video zu Dokument",
"h1": "Video zu Dokument",
"p1": "Video per Drag & Drop ablegen",
"fileName": "Kein Video ausgewaehlt",
"manualUploadBtn": "Video suchen",
"checkbox_group": "Bevorzugte Dokumentvarianten:",
"label_format": "Meeting Bericht",
"label_summary": "Zusammenfassung mit Zeitstempeln",
"submitButton": "Absenden"
},
"in":{
"title": "दस्तावेज़ के लिए वीडियो",
"h1": "दस्तावेज़ के लिए वीडियो",
"p1": "वीडियो फ़ाइल खींचें और छोड़ें",
"fileName": "कोई वीडियो नहीं चुना गया",
"manualUploadBtn": "वीडियो खोजें",
"checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
"label_format": "बैठक रिपोर्ट",
"label_summary": "टाइमस्टैम्प के साथ सारांश",
"submitButton": "जमा करना"
}
};
+4
View File
@@ -7,6 +7,10 @@ try {
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");
}
+13 -6
View File
@@ -4,8 +4,7 @@ uploadContainer.addEventListener("dragover", (e) =>{
e.stopPropagation();
e.preventDefault();
} catch (error) {
console.log("Error in renderer.js dragover listener function");
console.log(error);
console.log("Error in renderer.js dragover listener function")
}
});
@@ -22,13 +21,21 @@ uploadContainer.addEventListener("drop", (e) => {
console.log(filePath)
const files1 = e.dataTransfer.files;
setCurrentPathVariable(filePath);
handleFiles(files1);
}
} catch (error) {
console.log("Error in renderer.js with the listerner for the drop function");
console.log(error);
}
})
window.addEventListener('load', (e) => {
console.log("test");
loadLanguageOptions();
});
language_option.addEventListener('change', (e)=>{
const select = document.getElementById('language_option');
console.log(select.value);
changeLanguage(select.value);
});
+45 -52
View File
@@ -1,11 +1,9 @@
var curSelecPath = "";
//listener for the file explorer search
manualUploadBtn.addEventListener('click', () => {
try {
videoUpload.click();
} catch (error) {
console.log("Error in manualBtn EventListener click");
console.log(error);
}
});
@@ -24,16 +22,16 @@ function checkBoxes() {
if(isChecked){
//Code to submit the video
if(curSelecPath.endsWith(".mp4") || holdy.endsWith(".mov") || holdy.endsWith(".avi") || holdy.endsWith( ".mkv")){
window.extractor.extract({inputVideoPath: curSelecPath, outputType:"wav"})
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 in script.js checkBoxes function");
console.log(error);
console.log(error)
}
// mapFunctions.get("extraction-video-to-audio").function({inputVideoPath:"./a.mp4", outputType:"wav"})
@@ -42,58 +40,31 @@ function checkBoxes() {
//language changing feature
function changeLanguage(language) {
try {
if (language === 'en') {
document.getElementById('title').textContent = 'Video to document';
document.getElementById('h1').textContent = 'Video to document';
document.getElementById('p1').textContent = 'Drag and drop video file';
document.getElementById('fileName').textContent = 'No video chosen';
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 = 'जमा करना';
}
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) {
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");
console.log(error);
}
});
//function to display the file path in the drop down box
function handleFiles(files) {
try {
@@ -102,16 +73,10 @@ function handleFiles(files) {
if (file.type.startsWith('video/')) {
videoUpload.files = files;
fileName.textContent = `Chosen video: ${file.name}`;
setCurrentPathVariable(files[0])
}else{
setCurrentPathVariable("");
}
}else{
setCurrentPathVariable("");
}
} catch (error) {
console.log("Error in script.js handleFiles function");
console.log(error);
}
}
@@ -124,16 +89,44 @@ function updateProgressBar(bar, value){
bar.querySelector(".progress_text").textContent = `${value}%`;
} catch (error) {
console.log("Error in scripts.js updateProgressBar function");
console.log(error);
}
}
function setCurrentPathVariable(value){
//function to load ai options to the drop down list
function loadAiOptions(options){
try {
curSelecPath = value + "";
var menu = document.getElementById('ai_type');
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;
menu.appendChild(choice);
}
} catch (error) {
console.log("Error in script.js setCurrentPathVariable");
console.log("Error in script.js loadAiOptions function");
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);
}
}