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 branch 'feature/ui-test' into 'develop'

Browse Source 
Implemented the script part from the custom_document.html file into the base...

See merge request proj-wise2526-video2document/video2document!85
This commit is contained in:
Minning, Eric
2026-01-12 18:42:43 +01:00
parent 7647398974 bef9c44a2f
commit 947e981ac0
8 changed files with 969 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files
electron/main/custom_document.html
+3 -196
View File
@@ -1,210 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Document</title> <title>Custom Document</title>
<style> <style>
body {
font-family: Arial, sans-serif;
background: #f0f2f5;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: white;
padding: 30px;
margin-top: 50px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
width: 90%;
max-width: 600px;
}
h1 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 15px;
display: block;
color: #555;
}
input[type="text"], textarea, select {
width: 100%;
padding: 10px;
margin-top: 5px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 14px;
}
textarea {
height: 120px;
resize: vertical;
}
.buttons {
display: flex;
justify-content: space-between;
margin-top: 25px;
}
.hidden {
visibility: hidden;
}
button {
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: 0.2s;
background-color: #007BFF;
color: white;
}
button:hover {
background-color: #0056b3;
}
@media (max-width: 500px) {
.buttons {
flex-direction: column;
}
.buttons button {
width: 100%;
margin-top: 10px;
}
}
#result {
margin-top: 20px;
color: #333;
word-break: break-word;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container">
<h1>Manage document types</h1>
<label for="existingDocs">Vorhandene Dokumente auswählen (optional):</label>
<!--Drop Down-->
<select name="existingDocs" id="existingDocs">
<option value="newDoc">-- Neues Dokument erstellen --</option>
</select>
<div id="docNameWrapper">
<label for="docName">Dokumentname:</label>
<input type="text" id="docName" placeholder="Gib hier den Dokumentnamen ein">
</div>
<label for="prompt">Dein Prompt:</label>
<textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokument..."></textarea>
<div class="buttons">
<a href="index.html">
<button id="goBackBtn">Abbrechen</button>
</a>
<button id="generateBtn">Dokument speichern</button>
</div>
<div id="result"></div>
</div>
<script src="languages.js"></script> <script src="languages.js"></script>
<script>
const goBackBtn = document.getElementById("goBackBtn");
const generateBtn = document.getElementById("generateBtn");
const existingDocs = document.getElementById("existingDocs");
const docNameInput = document.getElementById("docName");
const promptInput = document.getElementById("prompt");
const resultDiv = document.getElementById("result");
const exampleText = "";
// Zurück zur Haupt-GUI
goBackBtn.addEventListener("click", () => {
window.electronAPI.goBackToMain();
});
// dokumente speichern
generateBtn.addEventListener("click", () => {
const name = docNameInput.value.trim();
const content = promptInput.value.trim();
if (!name || !content) {
resultDiv.textContent = "Bitte Dokumentname und Prompt ausfüllen.";
setTimeout(() => {
resultDiv.textContent = "";
}, 3000);
return;
}
window.api.saveTxtFile(name, content).then();
resultDiv.textContent = "Dokument erfolgreich gespeichert!";
setTimeout(() => {
resultDiv.textContent = "";
}, 3000);
reloadDocuments();
});
//function to load existingDoc options to the drop down list
const select = document.getElementById('existingDocs');
window.api.getTxtFiles().then(files => {
reloadDocuments();
});
//content anzeigen
const docNameWrapper = document.getElementById("docNameWrapper");
existingDocs.addEventListener("change", async () => {
const selected = existingDocs.value;
if (selected === "newDoc") {
docNameWrapper.classList.remove("hidden");
docNameInput.value = "";
promptInput.value = exampleText;
return;
}
docNameWrapper.classList.add("hidden");
const content = await window.api.readTxtFile(selected);
promptInput.value = content;
docNameInput.value = selected.replace(".txt", "");
});
//reload drop down
function reloadDocuments() {
[...existingDocs.querySelectorAll('option:not([value="newDoc"])')]
.forEach(o => o.remove());
window.api.getTxtFiles().then(files => {
files.forEach(file => {
const option = document.createElement('option');
option.value = file;
option.textContent = file
.replace('.txt', '') // Endung entfernen
.replace(/_/g, ' ') // Leerzeichen ersetzen
.replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß
existingDocs.appendChild(option);
});
});
}
</script>
<script src="./renderer.js"></script>
</body> </body>
</html> </html>
electron/main/index.html
+66 -18
View File
@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title id="title">Video to document</title> <title id="title">Video to document</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css">
</head> </head>
<body> <body>
@@ -19,30 +20,66 @@
</label> </label>
<nav class="menu1"> <nav class="menu1">
<a href="custom_document.html" class="li1">Manage document types</a> <button id="customDocBtn" onclick="showCD()">Manage document types</button>
<a href="" class="li1">Help</a> <a href="help_page.html" class="li1">Help</a>
</nav> </nav>
</nav> </nav>
</section> </section>
<h1 id="h1">Video to document</h1> <h1 id="h1">Video to document</h1>
<div class="gui-language">
<!-- to do: Ausprobieren mit li, a oder button, im Notfall ohne Flaggen Icons, kein hover-->
<select name="language_option" id="language_option"></select>
</div>
</div> </div>
<div class="step-nav"> <div class="step-nav">
<div class="step-item active" data-step="1">1. Step</div> <div class="step-item active" data-step="1" id="step_nav1">1. Step</div>
<div class="step-item" data-step="2">2. Step</div> <div class="step-item" data-step="2" id="step_nav2">2. Step</div>
<div class="step-item" data-step="3">3. Step</div> <div class="step-item" data-step="3" id="step_nav3">3. Step</div>
<div class="step-item" data-step="4">4. Step</div> <div class="step-item" data-step="4" id="step_nav4">4. Step</div>
<div class="step-item" data-step="5">5. Step</div> <div class="step-item" data-step="5" id="step_nav5">5. Step</div>
<div class="step-item" data-step="6">6. Step</div> <div class="step-item" data-step="6" id="step_nav6">6. Step</div>
</div> </div>
<div id="middleContainerWrapper" class="middle-container-wrapper"> <div id="middleContainerWrapper" class="middle-container-wrapper">
<button id="prevBtn" class="navBtn" disabled>&larr;</button> <button id="prevBtn" class="navBtn" disabled>&larr;</button>
<!-- Visible middle part-->
<div class="mitte" id="mitte"> <div class="mitte" id="mitte">
<!--Costum document section-->
<div class="container" id="cdContainer" style="display:none;">
<h1 id="cd_h1">Manage document types</h1>
<label for="existingDocs" id="cd_existingDocs">Select existing documents (optional):</label>
<!--Drop Down-->
<select name="existingDocs" id="existingDocs">
<option value="newDoc" id="newDoc">-- Create new document --</option>
</select>
<div id="docNameWrapper">
<label for="docName" id="cd_docName">Document name:</label>
<input type="text" id="docName" placeholder="Enter the document name here">
</div>
<label for="prompt" id="cd_promt">Your prompt:</label>
<textarea id="prompt" placeholder="Type the prompt for your document here..."></textarea>
<div class="buttons">
<button id="goBackBtn">Return</button>
<button id="deleteBtn">Delete document</button>
<button id="generateBtn">Save document</button>
</div>
<div id="result"></div>
</div>
<!-- Here starts code from step 1-->
<div class="step" id="step1"> <div class="step" id="step1">
<h2 class="h2">Upload your video here:</h2>
<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 id="previewThumbnail" autoplay="false">
@@ -56,7 +93,9 @@
</div> </div>
</div> </div>
<!-- Here starts code from step 2-->
<div class="step" id="step2" style="display:none;"> <div class="step" id="step2" style="display:none;">
<h2 class="h2">Choose your preferences:</h2>
<div class="KI-wrapper"> <div class="KI-wrapper">
<label id="labelKI">Select ki:</label> <label id="labelKI">Select ki:</label>
<select name="ai_type" id="ai_type"></select> <select name="ai_type" id="ai_type"></select>
@@ -78,15 +117,19 @@
<div class="language-wrapper"> <div class="language-wrapper">
<label id="labelLanguage">Select language:</label> <label id="labelLanguage">Select language:</label>
<img id="labelLanguageFlag" src="flags/united-kingdom-flag-png-large.jpg" width="20" height="10" >
<select name="language_option" id="language_option"> <select name="document_language_option" id="document_language_option">
</select> </select>
</div> </div>
</div> </div>
<!-- Here starts code from step 3-->
<!-- Hover Effekt für Dokumentenvorschau, Fragezeichen hinter Text, drüber hoven zeigt Beispieldokument -->
<div class="step" id="step3" style="display:none;"> <div class="step" id="step3" style="display:none;">
<div class="checkbox-group"> <div class="checkbox-group">
<label id="checkbox-label" for="checkbox-group">Choose prefered document style:</label> <h2 class="h2">Choose prefered document style:</h2>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" name ="docFormat" id="docFormat" value="followup-report"> <input type="checkbox" name ="docFormat" id="docFormat" value="followup-report">
<label id="label_format" for="docFormat">Follow-up Report</label> <label id="label_format" for="docFormat">Follow-up Report</label>
@@ -105,39 +148,42 @@
</div> </div>
<div class="checkbox-container"> <div class="checkbox-container">
<input type="checkbox" name="docFormat" id="docFormatCustom" value="custom"> <input type="checkbox" name="docFormat" id="docFormatCustom" value="custom">
<select name="ai_type" id="ai_type"> <select name="customDocumentTypes" id="customDocumentTypes">
<option>nichts</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<!-- Here starts code from step 4-->
<div class="step" id="step4" style="display:none;"> <div class="step" id="step4" style="display:none;">
<h2 class="h2">Klick to submit:</h2>
<button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button> <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>Submit</button>
<div class="testy" id="testy"> <div class="testy" id="testy">
<div class="box2" id="box1"> <div class="box2" id="box1">
</div> </div>
<p>---Starting---</p> <p id="box1_p1">---Starting---</p>
<div class="box2" id="box2"> <div class="box2" id="box2">
</div> </div>
<p>---Transkribing---</p> <p id="box2_p2">---Transkribing---</p>
<div class="box2" id="box3"> <div class="box2" id="box3">
</div> </div>
<p>---Document creation---</p> <p id="box3_p3">---Document creation---</p>
<div class="box2" id="box4"> <div class="box2" id="box4">
</div> </div>
</div> </div>
</div> </div>
<!-- Here starts code from step 5-->
<div class="step" id="step5" style="display:none;"> <div class="step" id="step5" style="display:none;">
<h2 class="h2">Change names of the speakers:</h2>
<div class="speakerView" id="speakerView"> <div class="speakerView" id="speakerView">
<label id="labelSpeaker">Select Speaker:</label> <label id="labelSpeaker">Select Speaker:</label>
<select name="cur_speaker" id="cur_speaker"> <select name="cur_speaker" id="cur_speaker">
</select> </select>
</div> </div>
<div class="speakerAudio" id="speakerAutio"> <div class="speakerAudio" id="speakerAutio">
<label id="labelSpeakerAudio">Selected Speaker</label> <label id="labelSpeakerAudio">Selected Speaker:</label>
<audio controls id="speakerAudioViewer"> <audio controls id="speakerAudioViewer">
Currently there is no audio file here. Currently there is no audio file here.
</audio> </audio>
@@ -152,7 +198,9 @@
</div> </div>
</div> </div>
<!-- Here starts code from step 6-->
<div class="step" id="step6" style="display:none;"> <div class="step" id="step6" style="display:none;">
<h2 class="h2">Klick to download your document:</h2>
<button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button> <button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button>
</div> </div>
</div> </div>
@@ -160,7 +208,7 @@
<button id ="nextBtn" class="navBtn">&rarr;</button> <button id ="nextBtn" class="navBtn">&rarr;</button>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
<script src="languages.js"></script> <script src="languages.js"></script>
<script src="script.js"></script> <script src="script.js"></script>
<script src="./renderer.js"></script> <script src="./renderer.js"></script>
electron/main/languages.js
+92 -3
View File
@@ -12,7 +12,37 @@ var languageOptions = {
"checkbox_group": "Choose prefered document style:", "checkbox_group": "Choose prefered document style:",
"label_format": "Meeting report", "label_format": "Meeting report",
"label_summary": "Summary with timestamps", "label_summary": "Summary with timestamps",
"submitButton": "Submit" "submitButton": "Submit",
"step_nav1": "Step 1",
"step_nav2": "Step 2",
"step_nav3": "Step 3",
"step_nav4": "Step 4",
"step_nav5": "Step 5",
"step_nav6": "Step 6",
"h2": "Upload your video here:",
"labelSpeaker": "Select Speaker:",
"labelSpeakerAudio": "Selected Speaker:",
"labelSpeakerWriter": "Write name:",
"speakerLocker": "Rename speaker",
"speakerResender": "Rewrite document",
"downloadButton": "Download",
"box1_p1": "---Starting---",
"box2_p2": "---Transkribing---",
"box3_p3": "---Document creation---",
"labelType": "Select document type:",
"customDocBtn": "Manage document types",
"cd_h1": "Manage document types",
"cd_existingDocs": "Select existing documents (optional):",
"cd_docName": "Document name",
"docName": "Enter the document name here",
"cd_promt": "Your prompt:",
"prompt": "Type the prompt for your document here...",
"goBackBtn": "Return",
"deleteBtn": "Delete document",
"generateBtn": "Save document",
"newDoc": "-- Create new document --"
}, },
"de":{ "de":{
"flagPath": "flags/germany-flag-png-large.jpg", "flagPath": "flags/germany-flag-png-large.jpg",
@@ -27,7 +57,36 @@ var languageOptions = {
"checkbox_group": "Bevorzugte Dokumentvarianten:", "checkbox_group": "Bevorzugte Dokumentvarianten:",
"label_format": "Meeting Bericht", "label_format": "Meeting Bericht",
"label_summary": "Zusammenfassung mit Zeitstempeln", "label_summary": "Zusammenfassung mit Zeitstempeln",
"submitButton": "Absenden" "submitButton": "Absenden",
"step_nav1": "Schritt 1",
"step_nav2": "Schritt 2",
"step_nav3": "Schritt 3",
"step_nav4": "Schritt 4",
"step_nav5": "Schritt 5",
"step_nav6": "Schritt 6",
"h2": "Uploade dein Video hier:",
"labelSpeaker": "Wähle Sprecher:",
"labelSpeakerAudio": "Ausgewählter Sprecher:",
"labelSpeakerWriter": "Schreib Namen:",
"speakerLocker": "Ersetze Namen",
"speakerResender": "Überschreibe Dokument",
"downloadButton": "Download",
"box1_p1": "---Startet---",
"box2_p2": "---Transkribing---",
"box3_p3": "---Dokument kreieren---",
"labelType": "Wähle Dokumenttype:",
"customDocBtn": "Dokumenttypen verwalten",
"cd_h1": "Dokumenttypen verwalten",
"cd_existingDocs": "Vorhandene Dokumente auswählen (optional):",
"cd_docName": "Dokument Name",
"docName": "Geben Sie hier den Dokumentnamen ein",
"cd_promt": "Ihr Prompt:",
"prompt": "Geben Sie hier die Eingabeaufforderung für Ihr Dokument ein...",
"goBackBtn": "Zurück",
"deleteBtn": "Lösche Dokument",
"generateBtn": "Speicher Dokument",
"newDoc": "-- Neues Dokument erstellen --"
}, },
"in":{ "in":{
"flagPath": "flags/india-flag-png-large.png", "flagPath": "flags/india-flag-png-large.png",
@@ -42,7 +101,37 @@ var languageOptions = {
"checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:", "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
"label_format": "बैठक रिपोर्ट", "label_format": "बैठक रिपोर्ट",
"label_summary": "टाइमस्टैम्प के साथ सारांश", "label_summary": "टाइमस्टैम्प के साथ सारांश",
"submitButton": "जमा करना" "submitButton": "जमा करना",
"step_nav1": "स्टेप 1",
"step_nav2": "स्टेप 2",
"step_nav3": "स्टेप 3",
"step_nav4": "स्टेप 4",
"step_nav5": "स्टेप 5",
"step_nav6": "स्टेप 6",
"h2": "अपना वीडियो यहां अपलोड करें:",
"labelSpeaker": "स्पीकर चुनें:",
"labelSpeakerAudio": "चयनित वक्ता:",
"labelSpeakerWriter": "नाम लिखें:",
"speakerLocker": "स्पीकर का नाम बदलें",
"speakerResender": "दस्तावेज़ पुनः लिखें",
"downloadButton": "डाउनलोड करना",
"box1_p1": "---प्रारंभ---",
"box2_p2": "---प्रतिलेखन---",
"box3_p3": "---दस्तावेज़ निर्माण---",
"labelType": "दस्तावेज़ प्रकार चुनें:",
"customDocBtn": "दस्तावेज़ प्रकार प्रबंधित करें",
"cd_h1": "दस्तावेज़ प्रकार प्रबंधित करें",
"cd_existingDocs": "मौजूदा दस्तावेज़ों का चयन करें (वैकल्पिक):",
"cd_docName": "दस्तावेज़ का नाम",
"docName": "यहां दस्तावेज़ का नाम दर्ज करें",
"cd_promt": "आपका संकेत:",
"prompt": "अपने दस्तावेज़ के लिए प्रॉम्प्ट यहां टाइप करें...",
"goBackBtn": "वापस करना",
"deleteBtn": "दस्तावेज़ हटाएँ",
"generateBtn": "दस्तावेज़ सहेजें",
"newDoc": "-- नया दस्तावेज़ बनाएँ --"
} }
}; };
electron/main/preload.js
+12 -13
View File
@@ -5,10 +5,10 @@ try {
onFileDrop: (file) => webUtils.getPathForFile(file) onFileDrop: (file) => webUtils.getPathForFile(file)
}) })
contextBridge.exposeInMainWorld("submit", { contextBridge.exposeInMainWorld("submit", {
submit: (meeting_specifications) => {ipcRenderer.send("file_submit", meeting_specifications)} submit: (meeting_specifications) => { ipcRenderer.send("file_submit", meeting_specifications) }
}) })
contextBridge.exposeInMainWorld("electronAPI", { contextBridge.exposeInMainWorld("electronAPI", {
getFilePath: (file) => {return webUtils.getPathForFile(file)} getFilePath: (file) => { return webUtils.getPathForFile(file) }
}) })
contextBridge.exposeInMainWorld("onStartup", { contextBridge.exposeInMainWorld("onStartup", {
@@ -23,27 +23,26 @@ try {
speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback) speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback)
}) })
contextBridge.exposeInMainWorld("submitSpeaker", { contextBridge.exposeInMainWorld("submitSpeaker", {
speaker_submit: (speaker_names) => {ipcRenderer.send("speaker_submit", speaker_names)} speaker_submit: (speaker_names) => { ipcRenderer.send("speaker_submit", speaker_names) }
}) })
contextBridge.exposeInMainWorld("download", { contextBridge.exposeInMainWorld("download", {
file_download: () => {ipcRenderer.send("file_download")} file_download: () => { ipcRenderer.send("file_download") }
}) })
//documenttypes //documenttypes
contextBridge.exposeInMainWorld('api', { contextBridge.exposeInMainWorld('api', {
getTxtFiles: () => ipcRenderer.invoke('get-txt-files'), getTxtFiles: () => ipcRenderer.invoke('get-txt-files'),
saveTxtFile: (name, content) => saveTxtFile: (name, content) =>
ipcRenderer.invoke('save-txt-file', name, content), ipcRenderer.invoke('save-txt-file', name, content),
readTxtFile: (fileName) => readTxtFile: (fileName) =>
ipcRenderer.invoke('read-txt-file', fileName) ipcRenderer.invoke('read-txt-file', fileName),
deleteTxtFile: (fileName) =>
ipcRenderer.invoke('delete-txt-file', fileName)
}); });
ipcRenderer.on("error", (event, err) => {alert(err)}) ipcRenderer.on("error", (event, err) => { alert(err) })
} catch (error) { } catch (error) {
console.log("Error in preload.js"); console.log("Error in preload.js");
} }
electron/main/renderer.js
+256 -108
View File
@@ -1,58 +1,102 @@
/*
uploadContainer.addEventListener("dragover", (e) =>{ Listeners for the program setup and changes
*/
//Listener for when the gui has been loaded so it can fill the dop down menus in step 2 and the language options
window.addEventListener('load', async (e) => {
try {
loadLanguageOptions();
const value = await window.onStartup.getModuleNames();
loadAiOptions(value.ai_modules);
loadTranscriptionOptions(value.transcription_modules);
} catch (error) {
console.log("Error in the window listener load in the renderer.js \n");
console.log(error);
}
});
//Listener if the language of the displayed text's in the gui should be changed
language_option.addEventListener('change', (e) => {
try {
const select = document.getElementById('language_option');
changeLanguage(select.value);
} catch (error) {
console.log("Error in the language_option change listener in the renderer.js");
console.log(error);
}
});
stepButtons.forEach(btn => {
btn.addEventListener("click", () => {
try { try {
e.stopPropagation(); const step = parseInt(btn.dataset.step);
e.preventDefault(); showStep(step);
} catch (error) { } catch (error) {
console.log("Error in renderer.js dragover listener function")
} }
});
});
//Listener if the button to change the current step to the previus one is pressed
prevBtn.addEventListener("click", () => {
try {
if (currentStep > 1) showStep(currentStep - 1);
} catch (error) {
}
});
//Listener if the button to change the current step to the next one is pressed
nextBtn.addEventListener("click", () => {
try {
if (currentStep < totalSteps) showStep(currentStep + 1);
} catch (error) {
}
});
/*
Listeners for Step 1
*/
//Listener if a file has been draged over the drop down field
uploadContainer.addEventListener("dragover", (e) => {
try {
e.stopPropagation();
e.preventDefault();
} catch (error) {
console.log("Error in renderer.js dragover listener function")
}
}); });
//listener for when a file get dropped on the drag&drop field //listener for when a file get dropped on the drag&drop field
uploadContainer.addEventListener("drop", (e) => { uploadContainer.addEventListener("drop", (e) => {
try {
e.stopPropagation()
e.preventDefault()
const files = e.dataTransfer.files
const filePath = window.explorer.onFileDrop(files[0])
const testEndings = [".mp4", ".mov", ".avi", ".mkv"];
var pathToLower = filePath.toLowerCase();
if(testEndings.some(e => pathToLower.endsWith(e))){
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");
console.log(error);
}
})
window.addEventListener('load', async (e) => {
try { try {
loadLanguageOptions(); e.stopPropagation()
const value = await window.onStartup.getModuleNames(); e.preventDefault()
loadAiOptions(value.ai_modules); const files = e.dataTransfer.files
loadTranscriptionOptions(value.transcription_modules); const filePath = window.explorer.onFileDrop(files[0])
const testEndings = [".mp4", ".mov", ".avi", ".mkv"];
var pathToLower = filePath.toLowerCase();
if (testEndings.some(e => pathToLower.endsWith(e))) {
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) { } catch (error) {
console.log("Error in renderer.js with the listerner for the drop function");
console.log(error);
} }
})
});
language_option.addEventListener('change', (e)=>{
try {
const select = document.getElementById('language_option');
changeLanguage(select.value);
} catch (error) {
}
});
//listener for the file explorer search when something got selected //listener for the file explorer search when something got selected
videoUpload.addEventListener("change", () => { videoUpload.addEventListener("change", () => {
@@ -77,37 +121,39 @@ manualUploadBtn.addEventListener('click', () => {
}); });
stepButtons.forEach(btn => { /*
btn.addEventListener("click", () => {
try {
const step = parseInt(btn.dataset.step);
showStep(step);
} catch (error) {
} Listeners for Step 2
*/
/*
Listeners for Step 3
*/
window.api.getTxtFiles().then(files => {
var menu = document.getElementById('customDocumentTypes');
var l = document.getElementById('customDocumentTypes').options.length - 1;
for (i = l; i >= 0; i--) {
menu.remove(i);
}
files.forEach(file => {
const option = document.createElement('option');
option.value = file;
option.textContent = file
.replace('.txt', '') // Endung entfernen
.replace(/_/g, ' ') // Leerzeichen ersetzen
.replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß
menu.appendChild(option);
}); });
}); });
prevBtn.addEventListener("click", () => {
try {
if (currentStep > 1) showStep(currentStep - 1);
} catch (error) {
}
});
nextBtn.addEventListener("click", () => {
try {
if(currentStep < totalSteps) showStep(currentStep + 1);
} catch (error) {
}
});
//Checkboxlistener so that only one can be selected at a time //Checkboxlistener so that only one can be selected at a time
docFormat.addEventListener("change", (e) =>{ docFormat.addEventListener("change", (e) => {
try { try {
if(docFormat.checked){ if (docFormat.checked) {
docFormatSummary1.checked = false; docFormatSummary1.checked = false;
docFormatSummary2.checked = false; docFormatSummary2.checked = false;
docFormatSummary3.checked = false; docFormatSummary3.checked = false;
@@ -117,9 +163,9 @@ docFormat.addEventListener("change", (e) =>{
} }
}); });
docFormatSummary1.addEventListener("change", (e) =>{ docFormatSummary1.addEventListener("change", (e) => {
try { try {
if(docFormatSummary1.checked){ if (docFormatSummary1.checked) {
docFormat.checked = false; docFormat.checked = false;
docFormatSummary2.checked = false; docFormatSummary2.checked = false;
docFormatSummary3.checked = false; docFormatSummary3.checked = false;
@@ -129,9 +175,9 @@ docFormatSummary1.addEventListener("change", (e) =>{
} }
}); });
docFormatSummary2.addEventListener("change", (e) =>{ docFormatSummary2.addEventListener("change", (e) => {
try { try {
if(docFormatSummary2.checked){ if (docFormatSummary2.checked) {
docFormatSummary1.checked = false; docFormatSummary1.checked = false;
docFormat.checked = false; docFormat.checked = false;
docFormatSummary3.checked = false; docFormatSummary3.checked = false;
@@ -141,9 +187,9 @@ docFormatSummary2.addEventListener("change", (e) =>{
} }
}); });
docFormatSummary3.addEventListener("change", (e) =>{ docFormatSummary3.addEventListener("change", (e) => {
try { try {
if(docFormatSummary3.checked){ if (docFormatSummary3.checked) {
docFormatSummary1.checked = false; docFormatSummary1.checked = false;
docFormatSummary2.checked = false; docFormatSummary2.checked = false;
docFormat.checked = false; docFormat.checked = false;
@@ -153,9 +199,9 @@ docFormatSummary3.addEventListener("change", (e) =>{
} }
}); });
docFormatCustom.addEventListener("change", (e) =>{ docFormatCustom.addEventListener("change", (e) => {
try { try {
if(docFormatCustom.checked){ if (docFormatCustom.checked) {
docFormatSummary1.checked = false; docFormatSummary1.checked = false;
docFormatSummary2.checked = false; docFormatSummary2.checked = false;
docFormatSummary3.checked = false; docFormatSummary3.checked = false;
@@ -166,48 +212,40 @@ docFormatCustom.addEventListener("change", (e) =>{
} }
}); });
//Speaker change listener /*
cur_speaker.addEventListener("change", (e) =>{
try {
document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src;
} catch (error) {
} Listeners for Step 4
});
window.audios.speakerAudios((event, arg) => {
loadSpeakerOptions(arg);
setSpeakerAudiosValue(arg);
});
*/
//Functions the the displayed progress in the progressbar can be changed out of the main process
window.electron.progress((event, arg) => { window.electron.progress((event, arg) => {
if(arg.curstep == 1){ if (arg.curstep == 1) {
setCircleOne(); setCircleOne();
}else if(arg.curstep == 2){ } else if (arg.curstep == 2) {
setCircleZwo(); setCircleZwo();
} else if(arg.curstep == 3){ } else if (arg.curstep == 3) {
setCircleThree(); setCircleThree();
}else if(arg.curstep == 4){ } else if (arg.curstep == 4) {
setCircleFour(); setCircleFour();
} }
}); });
function setCircleOne(){ function setCircleOne() {
try { try {
if(document.getElementById("box1").style.backgroundColor == "green"){ if (document.getElementById("box1").style.backgroundColor == "green") {
document.getElementById("box1").style.backgroundColor = "red"; document.getElementById("box1").style.backgroundColor = "red";
}else{ } else {
document.getElementById("box1").style.backgroundColor = "green"; document.getElementById("box1").style.backgroundColor = "green";
} }
} catch (error) { } catch (error) {
} }
}; };
function setCircleZwo(){ function setCircleZwo() {
try { try {
if(document.getElementById("box2").style.backgroundColor == "green"){ if (document.getElementById("box2").style.backgroundColor == "green") {
document.getElementById("box2").style.backgroundColor = "red"; document.getElementById("box2").style.backgroundColor = "red";
}else{ } else {
document.getElementById("box2").style.backgroundColor = "green"; document.getElementById("box2").style.backgroundColor = "green";
} }
} catch (error) { } catch (error) {
@@ -215,11 +253,11 @@ function setCircleZwo(){
} }
}; };
function setCircleThree(){ function setCircleThree() {
try { try {
if(document.getElementById("box3").style.backgroundColor == "green"){ if (document.getElementById("box3").style.backgroundColor == "green") {
document.getElementById("box3").style.backgroundColor = "red"; document.getElementById("box3").style.backgroundColor = "red";
}else{ } else {
document.getElementById("box3").style.backgroundColor = "green"; document.getElementById("box3").style.backgroundColor = "green";
} }
} catch (error) { } catch (error) {
@@ -227,11 +265,11 @@ function setCircleThree(){
} }
}; };
function setCircleFour(){ function setCircleFour() {
try { try {
if(document.getElementById("box4").style.backgroundColor == "green"){ if (document.getElementById("box4").style.backgroundColor == "green") {
document.getElementById("box4").style.backgroundColor = "red"; document.getElementById("box4").style.backgroundColor = "red";
}else{ } else {
document.getElementById("box4").style.backgroundColor = "green"; document.getElementById("box4").style.backgroundColor = "green";
} }
} catch (error) { } catch (error) {
@@ -239,5 +277,115 @@ function setCircleFour(){
} }
}; };
/*
Listeners for Step 5
*/
//Speaker change listener
cur_speaker.addEventListener("change", (e) => {
try {
document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src;
} catch (error) {
}
});
//Function so the main process can give the gui a json with the speakers and their audio
window.audios.speakerAudios((event, arg) => {
loadSpeakerOptions(arg);
setSpeakerAudiosValue(arg);
});
/*
Listeners for the costum documents section
*/
goBackBtn.addEventListener("click", () => {
showCD();
});
// dokumente speichern
generateBtn.addEventListener("click", () => {
const name = docName.value.trim();
const content = document.getElementById("prompt").value.trim();
if (!name || !content) {
result.textContent = "Bitte Dokumentname und Prompt ausfüllen.";
console.log(name + " " + content);
setTimeout(() => {
result.textContent = "";
}, 3000);
return;
}
window.api.saveTxtFile(name, content).then();
result.textContent = "Dokument erfolgreich gespeichert!";
setTimeout(() => {
result.textContent = "";
}, 3000);
reloadDocuments();
});
// dokumente löschen
deleteBtn.addEventListener("click", () => {
const name = docName.value.trim();
if (!name) {
result.textContent = "Bitte Dokumentname angeben.";
setTimeout(() => {
result.textContent = "";
}, 3000);
return;
}
const confirmDelete = confirm(
`Möchtest du das Dokument "${name}" wirklich löschen?`
);
if (!confirmDelete) return;
window.api.deleteTxtFile(name).then((success) => {
if (success) {
result.textContent = "Dokument erfolgreich gelöscht!";
reloadDocuments();
existingDocs.value = "newDoc";
existingDocs.dispatchEvent(new Event("change"));
} else {
result.textContent = "Dokument konnte nicht gelöscht werden.";
}
setTimeout(() => {
result.textContent = "";
}, 3000);
});
});
//function to load existingDoc options to the drop down list
window.api.getTxtFiles().then(files => {
reloadDocuments();
});
//content anzeigen
existingDocs.addEventListener("change", async () => {
const existingDocsed = existingDocs.value;
const exampleText = "";
if (existingDocsed === "newDoc") {
docNameWrapper.classList.remove("hidden");
docName.value = "";
prompt.value = exampleText;
return;
}
docNameWrapper.classList.add("hidden");
const content = await window.api.readTxtFile(existingDocsed);
prompt.value = content;
docName.value = existingDocsed.replace(".txt", "");
});
electron/main/script.js
+354 -206
View File
@@ -1,95 +1,73 @@
let currentVideoPath = null; let currentVideoPath = null;
//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"]; Functions used in the setup or affect most of the gui
var pathTest = window.electronAPI.getFilePath(videoUpload.files[0]);
var pathToLower = pathTest.toLowerCase();
if(testEndings.some(e => pathToLower.endsWith(e))){
//assembly of the json for the main
var typeCheckbox; */
if(document.getElementById("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value; var showCDValue = 0;
if(document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value; function showCD() {
if(document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value; if(showCDValue == 0){
if(document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value; document.getElementById('cdContainer').style.display = "block";
if(document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value; document.getElementById('step1').style.display ="none";
document.getElementById('step2').style.display ="none";
document.getElementById("testy").style.visibility = "visible" document.getElementById('step3').style.display ="none";
document.getElementById("box1").style.backgroundColor = "red"; document.getElementById('step4').style.display ="none";
document.getElementById("box2").style.backgroundColor = "red"; document.getElementById('step5').style.display ="none";
document.getElementById("box3").style.backgroundColor = "red"; document.getElementById('step6').style.display ="none";
document.getElementById("box4").style.backgroundColor = "red"; showCDValue = 1;
console.log(selectedCheckboxes); } else {
const outputType = document.getElementById("output_type"); currentStep = 1;
const transcriptionType = document.getElementById("transkript_type"); showCDValue = 0;
const aiType = document.getElementById("ai_type"); document.getElementById('cdContainer').style.display = "none";
const sendingPackage = { showStep(1);
"video": {
"module":"extraction-video-to-audio",
"inputVideoPath": pathTest
},
"transcription": {
"module": transcriptionType.value
},
"document": {
"module":aiType.value,
"type": typeCheckbox,
"outputType": outputType.value
}
};
window.submit.submit(sendingPackage)
}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 in script.js checkBoxes function");
console.log(error);
} }
} }
//language changing feature //language changing feature => changes the language of every displayed text
function changeLanguage(language) { function changeLanguage(language) {
try { try {
document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath; //document.getElementById('labelLanguageFlag').src = languageOptions[language].flagPath;
document.getElementById('labelKI').textContent = languageOptions[language].labelKI; document.getElementById('labelKI').textContent = languageOptions[language].labelKI;
document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription; document.getElementById('labelTranscription').textContent = languageOptions[language].labelTranscription;
document.getElementById('labelLanguage').textContent = languageOptions[language].labelLanguage; 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;
document.getElementById('fileName').textContent = languageOptions[language].fileName; document.getElementById('fileName').textContent = languageOptions[language].fileName;
document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn; 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_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;
document.getElementById('step_nav1').textContent = languageOptions[language].step_nav1;
document.getElementById('step_nav2').textContent = languageOptions[language].step_nav2;
document.getElementById('step_nav3').textContent = languageOptions[language].step_nav3;
document.getElementById('step_nav4').textContent = languageOptions[language].step_nav4;
document.getElementById('step_nav5').textContent = languageOptions[language].step_nav5;
document.getElementById('step_nav6').textContent = languageOptions[language].step_nav6;
//document.getElementById('h2').textContent = languageOptions[language].h2;
document.getElementById('labelSpeaker').textContent = languageOptions[language].labelSpeaker;
document.getElementById('labelSpeakerAudio').textContent = languageOptions[language].labelSpeakerAudio;
document.getElementById('labelSpeakerWriter').textContent = languageOptions[language].labelSpeakerWriter;
document.getElementById('speakerLocker').textContent = languageOptions[language].speakerLocker;
document.getElementById('speakerResender').textContent = languageOptions[language].speakerResender;
document.getElementById('downloadButton').textContent = languageOptions[language].downloadButton;
document.getElementById('box1_p1').textContent = languageOptions[language].box1_p1;
document.getElementById('box2_p2').textContent = languageOptions[language].box2_p2;
document.getElementById('box3_p3').textContent = languageOptions[language].box3_p3;
document.getElementById('labelType').textContent = languageOptions[language].labelType;
document.getElementById('customDocBtn').textContent = languageOptions[language].customDocBtn;
document.getElementById('cd_h1').textContent = languageOptions[language].cd_h1;
document.getElementById('cd_existingDocs').textContent = languageOptions[language].cd_existingDocs;
document.getElementById('cd_docName').textContent = languageOptions[language].cd_docName;
document.getElementById('docName').placeholder = languageOptions[language].docName;
document.getElementById('cd_promt').textContent = languageOptions[language].cd_promt;
document.getElementById('prompt').placeholder = languageOptions[language].prompt;
document.getElementById('goBackBtn').textContent = languageOptions[language].goBackBtn;
document.getElementById('deleteBtn').textContent = languageOptions[language].deleteBtn;
document.getElementById('generateBtn').textContent = languageOptions[language].generateBtn;
document.getElementById('newDoc').textContent = languageOptions[language].newDoc;
} catch (error) { } catch (error) {
console.log("Error in script.js changeLanguage function"); console.log("Error in script.js changeLanguage function");
@@ -98,6 +76,43 @@ function changeLanguage(language) {
} }
/*
Functions used for the step navigation
*/
//Step-navigation
const steps = document.querySelectorAll(".step");
const stepButtons = document.querySelectorAll(".step-item");
let currentStep = 1;
const totalSteps = steps.length;
function showStep(stepNumber) {
if (stepNumber < 1 || stepNumber > totalSteps) {
console.error("StepNumber out of Bounds", stepNumber);
return;
}
steps.forEach(step => step.style.display = "none");
document.getElementById("step" + stepNumber).style.display = "flex";
stepButtons.forEach(btn => btn.classList.remove("active"));
document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`);
if (activeBtn) activeBtn.classList.add("active");
prevBtn.disabled = stepNumber == 1;
nextBtn.disabled = stepNumber === totalSteps;
currentStep = stepNumber;
}
/*
Functions used in Step 1
*/
//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 {
@@ -119,6 +134,220 @@ function handleFiles(files) {
} }
//Video thumbnail generation. Shows a scene from the selected video file as a preview
function generateThumbnail(path) {
try {
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;
} catch (error) {
console.log("Error in the generateThumbnail function in the script.js file \n");
console.log(error);
}
}
/*
Functions used in Step 2
*/
//function to load ai options to the drop down list
function loadAiOptions(options) {
try {
var menu = document.getElementById('ai_type');
var object_holdy;
var choice;
object_holdy = options
for (i = 0; i < options.length; i++) {
choice = document.createElement('option');
choice.textContent = object_holdy[i].displayname;
choice.value = object_holdy[i].name;
menu.appendChild(choice);
}
} catch (error) {
console.log("Error in script.js loadAiOptions function");
console.log(error);
}
}
//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 = options
for (i = 0; i < options.length; i++) {
choice = document.createElement('option');
choice.textContent = object_holdy[i].displayname;
choice.value = object_holdy[i].name;
menu.appendChild(choice);
}
} catch (error) {
console.log("Error in script.js function loadTranscriptionOptions");
console.log(error);
}
}
//function to load data type options to the drop down list
function loadDataTypeOptions(options) {
try {
var menu = document.getElementById('output_type');
var object_holdy;
var choice;
object_holdy = options
for (i = 0; i < options.length; i++) {
choice = document.createElement('option');
choice.textContent = object_holdy[i].displayname;
choice.value = object_holdy[i].name;
menu.appendChild(choice);
}
} catch (error) {
console.log("Error in script.js function loadDataTypeOptions");
console.log(error);
}
}
//function to load language options to the drop down list
function loadLanguageOptions() {
try {
var menu = document.getElementById('language_option');
var menu_doc = document.getElementById('document_language_option');
var object_holdy;
var choice;
var choice2;
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];
choice.setAttribute('data-image', languageOptions[object_holdy[i]].flagPath);
choice2 = document.createElement('option');
choice2.textContent = object_holdy[i];
choice2.value = object_holdy[i];
choice2.setAttribute('data-image', languageOptions[object_holdy[i]].flagPath);
menu_doc.appendChild(choice2);
menu.appendChild(choice);
}
new lc_select(document.getElementById('language_option')); //loads the flag images so they get displayed in the gui
new lc_select(document.getElementById('document_language_option'));
} catch (error) {
console.log("Error in script.js loadLanguageOptions function");
console.log(error);
}
}
/*
Functions used in Step 3
*/
/*
Functions used in Step 4
*/
//function to check if one checkbox is at least klicked. Final controll function before sending the input to the generation
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]);
var pathToLower = pathTest.toLowerCase();
if (testEndings.some(e => pathToLower.endsWith(e))) {
//assembly of the json for the main
var typeCheckbox;
if (document.getElementById("docFormat").checked) typeCheckbox = document.getElementById("docFormat").value;
if (document.getElementById("docFormatSummary1").checked) typeCheckbox = document.getElementById("docFormatSummary1").value;
if (document.getElementById("docFormatSummary2").checked) typeCheckbox = document.getElementById("docFormatSummary2").value;
if (document.getElementById("docFormatSummary3").checked) typeCheckbox = document.getElementById("docFormatSummary3").value;
if (document.getElementById("docFormatCustom").checked) typeCheckbox = document.getElementById("docFormatCustom").value;
document.getElementById("testy").style.visibility = "visible"
document.getElementById("box1").style.backgroundColor = "red";
document.getElementById("box2").style.backgroundColor = "red";
document.getElementById("box3").style.backgroundColor = "red";
document.getElementById("box4").style.backgroundColor = "red";
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-to-audio",
"inputVideoPath": pathTest
},
"transcription": {
"module": transcriptionType.value
},
"document": {
"module": aiType.value,
"type": typeCheckbox,
"outputType": outputType.value
}
};
window.submit.submit(sendingPackage)
} 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 in script.js checkBoxes function");
console.log(error);
}
}
//function the the submit button on step 4 can be pressed
function activateSubmitBtn(hasFile) {
try {
document.getElementById("submitButton").disabled = !hasFile;
} catch (error) {
console.log(error);
}
}
//function to regulate the progress on the progressbar //function to regulate the progress on the progressbar
function updateProgressBar(bar, value) { function updateProgressBar(bar, value) {
try { try {
@@ -132,94 +361,34 @@ function updateProgressBar(bar, value) {
} }
//function to load ai options to the drop down list //function to hide the progressbar
function loadAiOptions(options){ function deaktivateProgressbar() {
try { try {
var menu = document.getElementById('ai_type'); document.getElementById("progressbar").style.visibility = "hidden";
var object_holdy;
var choice ;
object_holdy = options
for(i = 0; i < options.length; i++){
choice = document.createElement('option');
choice.textContent = object_holdy[i].displayname;
choice.value = object_holdy[i].name;
menu.appendChild(choice);
}
} catch (error) { } catch (error) {
console.log("Error in script.js loadAiOptions function");
console.log(error); console.log(error);
} }
} }
//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 = options
for(i = 0; i < options.length; i++){
choice = document.createElement('option');
choice.textContent = object_holdy[i].displayname;
choice.value = object_holdy[i].name;
menu.appendChild(choice);
}
} catch (error) {
console.log("Error in script.js function loadTranscriptionOptions");
console.log(error);
}
}
//function to load data type options to the drop down list Functions used in Step 5
function loadDataTypeOptions(options){
try { */
var menu = document.getElementById('output_type');
var object_holdy;
var choice ;
object_holdy = options
for(i = 0; i < options.length; i++){
choice = document.createElement('option');
choice.textContent = object_holdy[i].displayname;
choice.value = object_holdy[i].name;
menu.appendChild(choice);
}
} catch (error) {
console.log("Error in script.js function loadDataTypeOptions");
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);
}
}
//function to load speaker options to the drop down list //function to load speaker options to the drop down list
function loadSpeakerOptions(options){ function loadSpeakerOptions(options) {
try { try {
var menu = document.getElementById('cur_speaker'); var menu = document.getElementById('cur_speaker');
var l = document.getElementById('cur_speaker').options.length -1; var l = document.getElementById('cur_speaker').options.length - 1;
for(i = l; i >= 0; i--){ for (i = l; i >= 0; i--) {
menu.remove(i); menu.remove(i);
} }
var object_holdy; var object_holdy;
var choice; var choice;
object_holdy = Object.keys(options); object_holdy = Object.keys(options);
for(i = 0; i < object_holdy.length; i++){ for (i = 0; i < object_holdy.length; i++) {
choice = document.createElement('option'); choice = document.createElement('option');
choice.textContent = options[object_holdy[i]].name; choice.textContent = options[object_holdy[i]].name;
choice.value = object_holdy[i]; choice.value = object_holdy[i];
@@ -233,7 +402,7 @@ function loadSpeakerOptions(options){
} }
//function to load speaker audio file options to the drop down list //function to load speaker audio file options to the drop down list
function loadSpeakerAudio(option){ function loadSpeakerAudio(option) {
try { try {
var menu = document.getElementById('speakerAudioViewer'); var menu = document.getElementById('speakerAudioViewer');
var aud = document.createElement("source"); var aud = document.createElement("source");
@@ -245,65 +414,10 @@ function loadSpeakerAudio(option){
} }
} }
function activateSubmitBtn(hasFile){
try {
document.getElementById("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;
}
//Step-navigation
const steps = document.querySelectorAll(".step");
const stepButtons = document.querySelectorAll(".step-item");
let currentStep = 1;
const totalSteps = steps.length;
function showStep(stepNumber) {
if (stepNumber < 1 || stepNumber > totalSteps){
console.error("StepNumber out of Bounds", stepNumber);
return;
}
steps.forEach(step => step.style.display = "none");
document.getElementById("step" + stepNumber).style.display = "flex";
stepButtons.forEach(btn => btn.classList.remove("active"));
document.querySelector(`.step-item[data-step="${stepNumber}"]`).classList.add("active");
const activeBtn = document.querySelector(`.step-item[data-step="${stepNumber}"]`);
if(activeBtn) activeBtn.classList.add("active");
prevBtn.disabled = stepNumber == 1;
nextBtn.disabled = stepNumber === totalSteps;
currentStep = stepNumber;
}
//Audio value setter //Audio value setter
var speakerAudios = {}; var speakerAudios = {};
var speakerEndValues = {}; var speakerEndValues = {};
function setSpeakerAudiosValue(valy){ function setSpeakerAudiosValue(valy) {
try { try {
speakerAudios = valy; speakerAudios = valy;
speakerRewriten = valy; speakerRewriten = valy;
@@ -312,8 +426,8 @@ function setSpeakerAudiosValue(valy){
} }
} }
//Function to rewrite the speaker name in the json
function rewriteSpeakerName(){ function rewriteSpeakerName() {
try { try {
var tempy = document.getElementById("cur_speaker").value; var tempy = document.getElementById("cur_speaker").value;
speakerAudios[tempy].name = document.getElementById("newSpeaker").value; speakerAudios[tempy].name = document.getElementById("newSpeaker").value;
@@ -322,15 +436,21 @@ function rewriteSpeakerName(){
console.log("\n\n\n" + error + "\n\n\n") console.log("\n\n\n" + error + "\n\n\n")
} }
} }
//Function to send the json with the given names back to the program to rewrite the document file
function sendSpeakerPackages(){ function sendSpeakerPackages() {
try { try {
window.submitSpeaker.speaker_submit(speakerAudios); window.submitSpeaker.speaker_submit(speakerAudios);
} catch (error) { } catch (error) {
console.log(error);
} }
} }
/*
Functions for Step 6
*/
function fileDownload() { function fileDownload() {
try { try {
window.download.file_download(); window.download.file_download();
@@ -338,3 +458,31 @@ function fileDownload() {
console.error("Download failed:", error); console.error("Download failed:", error);
} }
} }
/*
Functions for the custom document section
*/
//reload drop down
function reloadDocuments() {
[...existingDocs.querySelectorAll('option:not([value="newDoc"])')]
.forEach(o => o.remove());
window.api.getTxtFiles().then(files => {
files.forEach(file => {
const option = document.createElement('option');
option.value = file;
option.textContent = file
.replace('.txt', '') // Endung entfernen
.replace(/_/g, ' ') // Leerzeichen ersetzen
.replace(/\b\w/g, c => c.toUpperCase()) // ersten Buchstaben groß
existingDocs.appendChild(option);
});
});
}
electron/main/style.css
+179 -89
View File
@@ -22,10 +22,10 @@ body {
#h1-wrapper { #h1-wrapper {
position: relative; position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 770px; width: 780px;
height: 60px; height: 60px;
background-color: #FFF; background-color: #FFF;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
@@ -36,7 +36,7 @@ body {
background: white; background: white;
padding: 40px; padding: 40px;
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: 350px; width: 350px;
height: 200px; height: 200px;
@@ -78,7 +78,7 @@ body {
width: 200px; width: 200px;
height: auto; height: auto;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
object-fit: cover; object-fit: cover;
} }
@@ -109,11 +109,11 @@ body {
} }
#step2 { #step2 {
gap: 30px; gap: 25px;
} }
.KI-wrapper { .KI-wrapper {
margin-top: 40px; margin-top: 10px;
} }
input[type="file"] { input[type="file"] {
@@ -121,58 +121,64 @@ input[type="file"] {
} }
.checkbox-group { .checkbox-group {
--borderColor: #007bfff5; --borderColor: #007bfff5;
--borderWidth: .125em; --borderWidth: .125em;
} }
.checkbox-group input[type=checkbox] { .checkbox-group input[type=checkbox] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
vertical-align: middle; vertical-align: middle;
background: #fff; background: #fff;
font-size: 1.8em; font-size: 1.8em;
border-radius: 0.125em; border-radius: 0.125em;
display: inline-block; display: inline-block;
border: var(--borderWidth) solid var(--borderColor); border: var(--borderWidth) solid var(--borderColor);
width: 1em; width: 1em;
height: 1em; height: 1em;
position: relative; position: relative;
} }
.checkbox-group input[type=checkbox]:before,
.checkbox-group input[type=checkbox]:after {
content: "";
position: absolute;
background: var(--borderColor);
width: calc(var(--borderWidth) * 3);
height: var(--borderWidth);
top: 50%;
left: 10%;
transform-origin: left center;
}
.checkbox-group input[type=checkbox]:before {
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
transition: transform 200ms ease-in 200ms;
}
.checkbox-group input[type=checkbox]:after {
width: calc(var(--borderWidth) * 5);
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
transform-origin: left center;
transition: transform 200ms ease-in;
}
.checkbox-group input[type=checkbox]:checked:before {
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
transition: transform 200ms ease-in;
}
.checkbox-group input[type=checkbox]:checked:after {
width: calc(var(--borderWidth) * 5);
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
transition: transform 200ms ease-out 200ms;
}
.checkbox-group input[type=checkbox]:focus {
outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
}
.checkbox-container{ .checkbox-group input[type=checkbox]:before,
.checkbox-group input[type=checkbox]:after {
content: "";
position: absolute;
background: var(--borderColor);
width: calc(var(--borderWidth) * 3);
height: var(--borderWidth);
top: 50%;
left: 10%;
transform-origin: left center;
}
.checkbox-group input[type=checkbox]:before {
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(0);
transition: transform 200ms ease-in 200ms;
}
.checkbox-group input[type=checkbox]:after {
width: calc(var(--borderWidth) * 5);
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(0);
transform-origin: left center;
transition: transform 200ms ease-in;
}
.checkbox-group input[type=checkbox]:checked:before {
transform: rotate(45deg) translate(calc(var(--borderWidth) / -2), calc(var(--borderWidth) / -2)) scaleX(1);
transition: transform 200ms ease-in;
}
.checkbox-group input[type=checkbox]:checked:after {
width: calc(var(--borderWidth) * 5);
transform: rotate(-45deg) translateY(calc(var(--borderWidth) * 2)) scaleX(1);
transition: transform 200ms ease-out 200ms;
}
.checkbox-group input[type=checkbox]:focus {
outline: calc(var(--borderWidth) / 2) dotted rgba(0, 0, 0, 0.25);
}
.checkbox-container {
margin-top: 8px; margin-top: 8px;
display: flex; display: flex;
justify-items: left; justify-items: left;
@@ -186,7 +192,7 @@ input[type="file"] {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 10px 20px;
margin: 130px auto 10px auto; margin: 110px auto 10px auto;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
border: none; border: none;
@@ -204,19 +210,19 @@ input[type="file"] {
.mitte { .mitte {
background-color: #FFF; background-color: #FFF;
display: flex; display: flex;
width: 700px; width: 780px;
height: 500px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 40px;
gap: 10px; gap: 10px;
border: 0px; border: 0px;
border-color: black; border-color: black;
border-style: solid; border-style: solid;
border-radius: 6px; border-radius: 6px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.1); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
} }
.progressbar{ .progressbar {
position: relative; position: relative;
width: 210px; width: 210px;
height: 30px; height: 30px;
@@ -227,14 +233,14 @@ input[type="file"] {
visibility: hidden; visibility: hidden;
} }
.progress_fill{ .progress_fill {
width: 0%; width: 0%;
height: 100%; height: 100%;
background: green; background: green;
transition: all 0.2s; transition: all 0.2s;
} }
.progress_text{ .progress_text {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 5px; right: 5px;
@@ -252,7 +258,9 @@ input[type="file"] {
padding: 2px 10px 2px 10px; padding: 2px 10px 2px 10px;
} }
#ai_type, #transkript_type, #language_option { #ai_type,
#transkript_type,
#language_option {
padding: 3px; padding: 3px;
} }
@@ -260,7 +268,7 @@ input[type="file"] {
gap: 60px; gap: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
overflow-wrap:inherit; overflow-wrap: inherit;
padding-bottom: 20px; padding-bottom: 20px;
margin-top: 40px; margin-top: 40px;
margin-bottom: 10px; margin-bottom: 10px;
@@ -274,7 +282,9 @@ input[type="file"] {
background: #fff; background: #fff;
padding: 10px 30px; padding: 10px 30px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 720px;
min-width: 720px;
} }
.step-item { .step-item {
@@ -297,10 +307,11 @@ input[type="file"] {
/*panels*/ /*panels*/
.step { .step {
margin-top: 70px; margin-top: 40px;
margin-bottom: 40px;;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 400px; min-height: 425px;
} }
/*Navigation arrows*/ /*Navigation arrows*/
@@ -336,7 +347,7 @@ input[type="file"] {
cursor: not-allowed; cursor: not-allowed;
} }
.testy{ .testy {
background-color: #FFF; background-color: #FFF;
display: flex; display: flex;
width: auto; width: auto;
@@ -352,13 +363,13 @@ input[type="file"] {
} }
.box2 { .box2 {
background-color: red; background-color: red;
width: 40px; width: 40px;
height: 40px; height: 40px;
padding: 5px; padding: 5px;
border: 1px solid black; border: 1px solid black;
margin: 5px; margin: 5px;
border-radius: 100px; border-radius: 100px;
} }
li { li {
@@ -394,24 +405,24 @@ li {
display: none; display: none;
} }
#toggle1:checked + .hamburger1 .top { #toggle1:checked+.hamburger1 .top {
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
margin-top: 22.5px; margin-top: 22.5px;
} }
#toggle1:checked + .hamburger1 .meat { #toggle1:checked+.hamburger1 .meat {
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
margin-top: -5px; margin-top: -5px;
} }
#toggle1:checked + .hamburger1 .bottom { #toggle1:checked+.hamburger1 .bottom {
-webkit-transform: scale(0); -webkit-transform: scale(0);
transform: scale(0); transform: scale(0);
} }
#toggle1:checked ~ .menu1 { #toggle1:checked~.menu1 {
height: 150px; height: 150px;
width: 300px; width: 300px;
} }
@@ -465,7 +476,9 @@ li {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
#step2, #step3, #step5 { #step2,
#step3,
#step5 {
font-size: larger; font-size: larger;
} }
@@ -489,10 +502,7 @@ li {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 20px; padding: 10px 20px;
margin-left: auto; margin: 110px auto 10px auto;
margin-right: 0px;
margin-top: 130px;
margin-bottom: 10px;
background-color: #007BFF; background-color: #007BFF;
color: white; color: white;
border: none; border: none;
@@ -501,7 +511,8 @@ li {
font-size: 14px; font-size: 14px;
} }
#speakerLocker, #speakerResender{ #speakerLocker,
#speakerResender {
padding: 10px 20px; padding: 10px 20px;
margin: 20px auto; margin: 20px auto;
background-color: #007BFF; background-color: #007BFF;
@@ -511,3 +522,82 @@ li {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
} }
.h2 {
font-size: 25px;
}
.speakerView,
.speakerAudio,
.speakerWrite {
margin-top: auto;
margin-bottom: auto;
}
.container {
background: white;
padding: 30px;
margin-top: 50px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 650px;
}
input[type="text"],
textarea,
select {
width: 80%;
padding: 10px;
margin-top: 5px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 14px;
}
textarea {
height: 120px;
resize: vertical;
}
.buttons {
display: flex;
justify-content: space-between;
margin-top: 25px;
}
.hidden {
visibility: hidden;
}
button {
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: 0.2s;
background-color: #007BFF;
color: white;
}
button:hover {
background-color: #0056b3;
}
@media (max-width: 500px) {
.buttons {
flex-direction: column;
}
.buttons button {
width: 100%;
margin-top: 10px;
}
}
#result {
margin-top: 20px;
color: #333;
word-break: break-word;
}
main.js
+14 -1
View File
@@ -281,8 +281,21 @@ electron.ipcMain.handle('save-txt-file', (event, fileName, content) => {
return true; return true;
}); });
// //read file content
electron.ipcMain.handle('read-txt-file', (event, fileName) => { electron.ipcMain.handle('read-txt-file', (event, fileName) => {
const filePath = `${mainDir}/storage/documentType/${fileName}`; const filePath = `${mainDir}/storage/documentType/${fileName}`;
return fs.readFileSync(filePath, 'utf8'); return fs.readFileSync(filePath, 'utf8');
}); });
//delete documentfiles
electron.ipcMain.handle('delete-txt-file', (event, fileName) => {
const filePath = `${mainDir}/storage/documentType/${fileName}.txt`;
if (fs.existsSync(filePath)) {
fs.unlinkSync(filePath);
return true;
} else {
return false;
}
});