+
-
+
-
+
+
+
+ 
+
+
+
+
+
@@ -20,28 +33,32 @@
-
-
+
Drag and drop video file
+No video chosen
-
+ ![]()
+
+
+
-
+
-
+
+
0%
diff --git a/electron/main/languages.js b/electron/main/languages.js
index 6262dc0..271c3aa 100644
--- a/electron/main/languages.js
+++ b/electron/main/languages.js
@@ -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": "वीडियो फ़ाइल खींचें और छोड़ें",
diff --git a/electron/main/renderer.js b/electron/main/renderer.js
index 2291f64..8391a52 100644
--- a/electron/main/renderer.js
+++ b/electron/main/renderer.js
@@ -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) => {
- console.log("test");
- loadLanguageOptions();
+ try {
+ console.log("test");
+ loadLanguageOptions();
+ } catch (error) {
+
+ }
+
});
language_option.addEventListener('change', (e)=>{
- const select = document.getElementById('language_option');
- console.log(select.value);
- changeLanguage(select.value);
+ try {
+ const select = document.getElementById('language_option');
+ 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);
+ }
+
+});
\ No newline at end of file
diff --git a/electron/main/script.js b/electron/main/script.js
index c66c976..b9ee1f0 100644
--- a/electron/main/script.js
+++ b/electron/main/script.js
@@ -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 {
@@ -129,4 +187,32 @@ function loadLanguageOptions(){
console.log("Error in script.js loadLanguageOptions function");
console.log(error);
}
-}
\ No newline at end of file
+}
+
+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;
+}
diff --git a/electron/main/style.css b/electron/main/style.css
index e9abb50..0912516 100644
--- a/electron/main/style.css
+++ b/electron/main/style.css
@@ -5,46 +5,71 @@ body {
justify-content: center;
align-items: center;
height: 100vh;
- background-color: #555;
+ background-color: #f2f3f4;
gap: 15px;
margin: 0;
}
-
-
+
+
.upload-container {
background: white;
padding: 40px;
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;
}
-
-
+
+
.upload-container.dragover {
border-color: #007BFF;
background-color: #eaf0ff;
}
-
-
+
+
.upload-container p {
margin: 0 0 15px 0;
font-size: 16px;
color: #555;
}
-
-
+
+
.file-name {
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;
@@ -52,27 +77,27 @@ body {
cursor: pointer;
font-size: 14px;
}
-
-
+
+
.custom-btn:hover {
background-color: #0056b3;
}
-
+
.submit-btn:hover {
background-color: #0056b3;
}
-
+
input[type="file"] {
display: none;
}
-
+
.checkbox-container{
margin-top: 8px;
display: flex;
align-items: center;
gap: 5px;
}
-
+
.checkbox-group {
margin-top: 15px;
margin-bottom: 15px;
@@ -81,9 +106,11 @@ gap: 5px;
gap: 10px;
align-items: flex-start;
}
-
+
.submit-btn {
padding: 10px 20px;
+ margin-top: 10px;
+ margin-bottom: 10px;
background-color: #007BFF;
color: white;
border: none;
@@ -91,24 +118,33 @@ gap: 5px;
cursor: pointer;
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 {
align-content: center;
}
-
+
.progressbar{
position: relative;
width: 210px;
@@ -116,15 +152,16 @@ h1 {
background: rgb(42, 46, 78);
border-radius: 5px;
overflow: hidden;
+ visibility: hidden;
}
-
+
.progress_fill{
width: 0%;
height: 100%;
background: green;
transition: all 0.2s;
}
-
+
.progress_text{
position: absolute;
top: 50%;
@@ -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;
}
\ No newline at end of file