mirror of
https://gitlab.rlp.net/proj-wise2526-video2document/video2document.git
synced 2026-06-15 18:01:52 +02:00
Merge commit 'b4f2ed561dbf2ae87d7816e8aa5b708ed70fb596' into feature/modular-ipc-system-implementation
This commit is contained in:
@@ -9,8 +9,21 @@
|
||||
<body>
|
||||
|
||||
<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">
|
||||
<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 name="language_option" id="language_option">
|
||||
</select>
|
||||
@@ -20,28 +33,32 @@
|
||||
|
||||
<div class="upload-container" id="uploadContainer">
|
||||
<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>
|
||||
|
||||
<button class="custom-btn" id="manualUploadBtn">Search video</button>
|
||||
<div id="thumbnailContainer">
|
||||
<img id="thumbnailImage" style="display:none;">
|
||||
</div>
|
||||
<button class="custom-btn" id="manualUploadBtn">Search video</button>
|
||||
<input type="file" id="videoUpload" accept="video/*">
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<label id="checkbox_group" for="checkbox-group">Choose prefered document style:</label>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<span class="progress_text">0%</span>
|
||||
</div>
|
||||
|
||||
@@ -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": "वीडियो फ़ाइल खींचें और छोड़ें",
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
});
|
||||
+116
-30
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
+74
-33
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user