Merge branch 'develop' into 'main'

Develop

See merge request proj-wise2526-video2document/video2document!112

documentation.md

@@ -7,6 +7,7 @@
 4. [IPC](#ipc)
 5. [Authentication](#authentication)
 6. [UI](#ui)
+7. [Storage](#storage)
 
 ## How to run the Software
 If you read the readme file, you will see the basic setup command in order to run the program.  
@@ -37,7 +38,7 @@ The program iterates through all of the folders within `./services/modules`, and
 This map is available ANYWHERE in the backend code, even within a module, which means, you can call a module, from within a module, from within a module, from within yet another module.  
 
 ## Modules
-Building a new module is super easy, any idiot can get it done.  
+Building a new module is super easy, anyone can get it done.  
 All you need to do is follow the previously mentioned structure.  
 When you have created your module file, the `.js` file, you simply copy paste this code snippet into it.  
 ```js
@@ -52,7 +53,7 @@ module.exports = {
     }
 }
 ```
-If by this point, you cared enough to actually look at the code and the modules and so on, you might have spotted a file in `./services/modules/utility` called `example.js`.  
+If you had a look at the code and the modules and so on, you might have spotted a file in `./services/modules/utility` called `example.js`.  
 This is a template file that you can just copy paste and use as a base for your new module.  
 It has the same exact code as mentioned right above.  
 Now as for how the code works.  
@@ -157,7 +158,6 @@ with more defined explanations regarding the steps of the GUI. All parts used in
 
 Files used for the UI:
 - index.html
-- help_page.html
 - style.css
 - script.js
 - renderer.js
@@ -175,10 +175,6 @@ Folders used for the UI:
 This file is the basic framework of our software. Comments in the code define the different UI sections.
 The comments are the headlines of the code below them.
 
-**help_page.html:**
-This is the html to the help page that is accessible though the burger menu in the software.
-Currently only available in german. It describes the different parts of the program in more depth.
-
 **style.css:**
 Contains all the css code of the software used in the UI.
 
@@ -223,3 +219,18 @@ Pictures for the document preview are stored here.
 
 **/node_modules:**
 Contains nodes used by electron.
+
+## Storage
+
+In the root directory of the project you will find the `storage` folder.  
+This directory is used to persist **all artifacts generated throughout the processing pipeline**, allowing each step to operate independently while still sharing results.
+
+Each module is expected to **read from and write to this directory**, depending on its responsibility in the pipeline.
+
+The storage folder contains the following sub folders:
+- **audio** stores the extracted audio from the video  
+  - **audio-snippets** store the individual speaker snippets for speaker identification
+- **documents** store the HTML files generated by the AI / LLM modules
+- **documentType** stores the premade prompt templates used for the AI calls
+- **transcriptionSummaries** store the transcripts after they have been transformed from word-level to sentence-level
+- **transcripts** store the raw transcripts returned by the transcription services

electron/main/help_page.html

@@ -17,302 +17,18 @@
             align-items: center;
         }
 
-        /* ===== CONTAINER ===== */
-        .container {
-            background: white;
-            width: 90%;
-            max-width: 800px;
-            height: 85vh;
-            /* feste Höhe */
-            border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-            display: flex;
-            flex-direction: column;
-        }
         
-        /* ===== FIXER TOP-BEREICH ===== */
-        .top-bar {
-            padding: 15px 20px;
-            border-bottom: 1px solid #eee;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-shrink: 0;
-        }
-
-        /* Buttons */
-        .back-btn,
-        .toc-toggle {
-            background: #007BFF;
-            color: white;
-            border: none;
-            padding: 8px 14px;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .back-btn:hover,
-        .toc-toggle:hover {
-            background: #0056b3;
-        }
-
-        /* ===== TOC ===== */
-        .toc-wrapper {
-            position: relative;
-        }
-
-        .toc {
-            position: absolute;
-            right: 0;
-            top: 45px;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-            padding: 10px;
-            min-width: 220px;
-            display: none;
-            z-index: 5;
-        }
-
-        .toc a {
-            display: block;
-            padding: 8px 10px;
-            color: #007BFF;
-            text-decoration: none;
-            border-radius: 6px;
-        }
-
-        .toc a:hover {
-            background: #f0f2f5;
-        }
-
-        .toc.show {
-            display: block;
-        }
-
-        /* ===== SCROLLBEREICH ===== */
-        .content {
-            padding: 30px;
-            overflow-y: auto;
-            flex: 1;
-        }
-
-        /* Inhalt */
-        h1 {
-            text-align: center;
-            color: #333;
-        }
-
-        .step {
-            margin-bottom: 20px;
-            margin-top: 20px;
-        }
-
-        .step h2 {
-            color: #0056b3;
-        }
-
-        .step h3 {
-            color: #555;
-            margin-bottom: 5px;
-        }
-
-        .step p {
-            color: #555;
-            line-height: 1.6;
-        }
-
-        .step img {
-            width: 100%;
-            max-height: 350px;
-            object-fit: contain;
-            border-radius: 8px;
-            margin-top: 15px;
-            border: 1px solid #ddd;
-        }
     </style>
 </head>
 
 <body>
 
-    <div class="container">
     
-        <!-- FIXER OBERER TEIL -->
-        <div class="top-bar">
-            <a href="index.html">
-                <button class="back-btn">Zurück</button>
-            </a>
-
-            <h1>Programm Anleitung</h1>
-
-
-            <div class="toc-wrapper">
-                <button class="toc-toggle" onclick="toggleTOC()">Inhaltsverzeichnis</button>
-                <div class="toc" id="toc">
-                    <a href="#convertVid" id='hp_convertVid' onclick="closeTOC()">Video zu Dokument umwandeln</a>
-                    <a href="#firstStep" id='hp_firstStep' onclick="closeTOC()">Schritt 1 - Video auswählen</a>
-                    <a href="#secondStep" id='hp_secondStep' onclick="closeTOC()">Schritt 2 - Konfiguration</a>
-                    <a href="#thirdStep" id='hp_thirdStep' onclick="closeTOC()">Schritt 3 - Dokumententyp auswählen</a>
-                    <a href="#fourthStep" id='hp_fourthStep' onclick="closeTOC()">Schritt 4 - Bestätigen</a>
-                    <a href="#fifthStep" id='hp_fifthStep' onclick="closeTOC()">Schritt 5 - Sprecher identifizieren</a>
-                    <a href="#sixthStep" id='hp_sixthStep' onclick="closeTOC()">Schritt 6 - Dokument speichern</a>
-                    <a href="#createDoc" id='hp_createDoc' onclick="closeTOC()">Dokumententyp erstellen</a>
-                    <a href="#editDoc" id='hp_editDoc' onclick="closeTOC()">Dokumententyp bearbeiten</a>
-                    <a href="#deleteDoc" id='hp_deleteDoc' onclick="closeTOC()">Dokumententyp löschen</a>
-                </div>
-            </div>
-        </div>
-
-        <!-- NUR DIESER TEIL SCROLLT -->
-        <div class="content">
-
-            <div class="step" id="convertVid">
-                <h2 id="hp_convertVid_h2">Video zu Dokument umwandeln.</h2>
-
-                <div class="step" id="firstStep">
-                    <h3 id="hp_firstStep_h3">Schritt 1 - Video auswählen</h3>
-                    <p id="hp_firstStep_p">
-                        - Ziehe eine Videodatei in das Drag-and-Drop-Feld oder klicke auf <strong>„Video
-                            suchen“</strong>,<br>
-                        um eine Datei über deinen Dateibrowser auszuwählen.<br>
-                        - Klicke anschließend auf <strong>Schritt 2</strong> oder auf den blauen Pfeil rechts, um
-                        fortzufahren.
-                    </p>
-                </div>
-                <div class="step" id="secondStep">
-                    <h3 id="hp_secondStep_h3">Schritt 2 - Konfiguration</h3>
-                    <p id="hp_secondStep_p">
-                        - Wähle im ersten Auswahlmenü die zu verwendende <strong>KI</strong>.<br>
-                        - Wähle im zweiten Auswahlmenü das zu verwendende <strong>Transkriptions-Tool</strong>.<br>
-                        - Wähle im dritten Auswahlmenü das <strong>Dateiformat</strong> des zu erstellenden
-                        Dokuments.<br>
-                        - Wähle im vierten Auswahlmenü die <strong>Sprache</strong> des zu erstellenden Dokuments.<br>
-                        - Klicke anschließend auf <strong>Schritt 3</strong> oder auf den blauen Pfeil rechts, um
-                        fortzufahren.
-                    </p>
-                </div>
-                <div class="step" id="thirdStep">
-                    <h3 id="hp_thirdStep_h3">Schritt 3 - Dokumententyp auswählen</h3>
-                    <p id="hp_thirdStep_p">
-                        - Wähle einen Dokumententyp über die Checkbox oder einen zuvor erstellten Dokumententyp aus dem
-                        Dropdown-Menü aus.<br>
-                        - Klicke anschließend auf <strong>Schritt 4</strong> oder auf den blauen Pfeil rechts, um
-                        fortzufahren.
-                    </p>
-                </div>
-                <div class="step" id="fourthStep">
-                    <h3 id="hp_fourthStep_h3">Schritt 4 - Bestätigen</h3>
-                    <p id="hp_fourthStep_p">
-                        Klicke auf <strong>„Submit“</strong>, um die Dokumentengenerierung zu starten.<br>
-                        Während der Verarbeitung werden vier Statuspunkte angezeigt, die sich schrittweise von rot zu
-                        grün färben und den aktuellen Fortschritt darstellen:
-                        <br><br>
-                        Punkt 1: Upload und Vorbereitung der Videodatei.<br>
-                        Punkt 2: Transkription des Videoinhalts.<br>
-                        Punkt 3: KI-gestützte Verarbeitung und Dokumentenerstellung.<br>
-                        Punkt 4: Abschluss der Generierung und Bereitstellung des Dokuments.
-                        <br><br>
-                        Nach erfolgreichem Abschluss klicke auf <strong>Schritt 5</strong> oder auf den blauen Pfeil
-                        rechts, um fortzufahren.
-                    </p>
-                </div>
-                <div class="step" id="fifthStep">
-                    <h3 id="hp_fifthStep_h3">Schritt 5 - Sprecher identifizieren</h3>
-                    <p id="hp_fifthStep_p">
-                        Im Auswahlmenü kannst du einen erkannten Sprecher auswählen.<br>
-                        Über den Play-Button lässt sich ein gesprochener Satz anhören, um den Sprecher eindeutig zu
-                        identifizieren.<br>
-                        Mit dem Lautsprecher-Symbol kannst du die Lautstärke anpassen.<br>
-                        Über das Drei-Punkte-Menü lässt sich die Wiedergabegeschwindigkeit einstellen.<br><br>
-
-                        Im Textfeld <strong>„Write name“</strong> gibst du den tatsächlichen Namen des Sprechers ein,
-                        damit dieser im Dokument
-                        anstelle von Platzhaltern wie z. B. „Sprecher A“ angezeigt wird.<br>
-                        Bestätige die Eingabe mit <strong>„Rename Speaker“</strong>.<br><br>
-
-                        Mit dem Button <strong>„Rewrite Document“</strong> werden anschließend alle
-                        Sprecherbezeichnungen im Dokument ersetzt.<br><br>
-
-                        Klicke danach auf <strong>Schritt 6</strong> oder auf den blauen Pfeil rechts, um fortzufahren.
-                    </p>
-                </div>
-                <div class="step" id="sixthStep">
-                    <h3 id="hp_sixthStep_h3">Schritt 6 - Dokument speichern</h3>
-                    <p id="hp_sixthStep_p">
-                        Klicke auf <strong>„Download“</strong>, um das Dokument zu speichern.<br>
-                        Es öffnet sich anschließend ein Dateiexplorer, in dem du den gewünschten Speicherort auswählen
-                        kannst.
-                    </p>
-                </div>
-            </div>
-
-
-            <div class="step" id="createDoc">
-                <h2 id="hp_createDoc_h2">Dokumententyp erstellen</h2>
-                <p id="hp_createDoc_p">
-                    - Öffne oben links das Burgermenü und wähle den Punkt <strong>„Dokumententypen
-                        verwalten“</strong>.<br>
-                    - Wähle anschließend im Auswahlmenü die Option <strong>„-- Neuen Dokumententyp erstellen
-                        --“</strong>.<br>
-                    - Vergib einen aussagekräftigen Namen für den neuen Dokumententyp.<br>
-                    - Formuliere den Prompt für die KI-gestützte Verarbeitung sorgfältig.<br>
-                    - Klicke auf <strong>Dokumententyp speichern</strong>.<br><br>
-                    <strong>Hinweis:</strong> <br>Der eingegebene Prompt wird unverändert an einen KI-Dienst
-                    übermittelt.
-                    Achte daher unbedingt auf die Einhaltung der geltenden Datenschutzrichtlinien und gib keine
-                    sensiblen oder personenbezogenen Daten ein.
-                </p>
-            </div>
-
-            <div class="step" id="editDoc">
-                <h2 id="hp_editDoc_h2">Dokumententyp bearbeiten</h2>
-                <p id="hp_editDoc_p">
-                    - Öffne oben links das Burgermenü und wähle den Punkt <strong>„Dokumententypen
-                        verwalten“</strong>.<br>
-                    - Wähle anschließend im Auswahlmenü den zu bearbeitenden Dokumententyp aus.<br>
-                    - Überarbeite den bestehenden KI-Prompt oder formuliere einen neuen Prompt.<br>
-                    - Klicke abschließend auf <strong>„Dokumententyp speichern“</strong>.<br><br>
-
-                    <strong>Hinweis:</strong><br>
-                    Der eingegebene Prompt wird unverändert an einen KI-Dienst übermittelt.
-                    Achte daher unbedingt auf die Einhaltung der geltenden Datenschutzrichtlinien und gib keine
-                    sensiblen oder personenbezogenen Daten ein.
-                </p>
-            </div>
-
-            <div class="step" id="deleteDoc">
-                <h2 id="hp_deleteDoc_h2">Dokumententyp löschen</h2>
-                <p id="hp_deleteDoc_p"> - Öffne oben links das Burgermenü und wähle den Punkt <strong>„Dokumententypen
-                        verwalten“</strong>.<br>
-                    - Wähle anschließend im Auswahlmenü den zu löschenden Dokumententyp aus.<br>
-                    - Klicke abschließend auf <strong>„Dokumententyp löschen“</strong>.<br><br>
-
-                    <strong>Hinweis:</strong><br>
-                    Nach Bestätigung des Löschvorgangs kann der Dokumententyp nicht wiederhergestellt werden.
-                </p>
-            </div>
-        </div>
-
-    </div>
 
     <script>
-        function toggleTOC() {
-            document.getElementById("toc").classList.toggle("show");
-        }
         
-        function closeTOC() {
-            document.getElementById("toc").classList.remove("show");
-        }
 
-        document.addEventListener("click", function (e) {
-            const toc = document.getElementById("toc");
-            const toggle = document.querySelector(".toc-toggle");
         
-            if (!toc.contains(e.target) && !toggle.contains(e.target)) {
-                toc.classList.remove("show");
-            }
-        });
     </script>
 
 </body>

electron/main/index.html

@@ -1,340 +1,397 @@
 <!doctype html>
 <html lang="de">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title id="title">Video to document</title>
-    <link rel="stylesheet" href="style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css"
-    />
-  </head>
 
-  <body>
+<head>
-    <div id="h1-wrapper">
+  <meta charset="UTF-8" />
-      <section class="p-menu1">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <nav id="navbar" class="navigation" role="navigation">
+  <title id="title">Video to document</title>
-          <input id="toggle1" type="checkbox" />
+  <link rel="stylesheet" href="style.css" />
-          <label class="hamburger1" for="toggle1">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/themes/light.css" />
-            <div class="top"></div>
+</head>
-            <div class="meat"></div>
-            <div class="bottom"></div>
-          </label>
 
-          <nav class="menu1">
+<body>
-            <button id="customDocBtn" onclick="showCD()">
+  <div id="h1-wrapper">
-              Manage document types
+    <section class="p-menu1">
-            </button>
+      <nav id="navbar" class="navigation" role="navigation">
-            <a href="help_page.html" class="li1">Help</a>
+        <input id="toggle1" type="checkbox" />
-          </nav>
+        <label class="hamburger1" for="toggle1">
+          <div class="top"></div>
+          <div class="meat"></div>
+          <div class="bottom"></div>
+        </label>
+
+        <nav class="menu1">
+          <button id="customDocBtn" onclick="showCD()">
+            Manage document types
+          </button>
+          <button id="helpBtn" onclick="showHelp()">
+            Help
+          </button>
         </nav>
-      </section>
+      </nav>
-
+    </section>
+    <div class="main_h1">
       <h1 id="h1">Video to document</h1>
-
-      <div class="gui-language">
-        <select name="language_option" id="language_option"></select>
-      </div>
     </div>
 
-    <div class="step-nav">
+    <div class="gui-language">
-      <div class="step-item active" data-step="1" id="step_nav1">1. Step</div>
+      <select name="language_option" id="language_option"></select>
-      <div class="step-item" data-step="2" id="step_nav2">2. Step</div>
-      <div class="step-item" data-step="3" id="step_nav3">3. Step</div>
-      <div class="step-item" data-step="4" id="step_nav4">4. Step</div>
-      <div class="step-item" data-step="5" id="step_nav5">5. 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 class="step-nav">
-      <button id="prevBtn" class="navBtn" disabled>&larr;</button>
+    <div class="step-item active" data-step="1" id="step_nav1">1. Step</div>
+    <div class="step-item" data-step="2" id="step_nav2">2. Step</div>
+    <div class="step-item" data-step="3" id="step_nav3">3. Step</div>
+    <div class="step-item" data-step="4" id="step_nav4">4. Step</div>
+    <div class="step-item" data-step="5" id="step_nav5">5. Step</div>
+    <div class="step-item" data-step="6" id="step_nav6">6. Step</div>
+  </div>
 
-      <!-- Visible middle part-->
+  <div id="middleContainerWrapper" class="middle-container-wrapper">
-      <div class="mitte" id="mitte">
+    <button id="prevBtn" class="navBtn" disabled>&larr;</button>
-        <!--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"
+    <!-- Visible middle part-->
-            >Select existing documents (optional):</label
+    <div class="mitte" id="mitte">
-          >
+      <!--Costum document section-->
-          <!--Drop Down-->
+      <div class="container" id="cdContainer" style="display: none">
-          <select name="existingDocs" id="existingDocs">
+        <h1 id="cd_h1">Manage document types</h1>
-            <option value="newDoc" id="newDoc">
-              -- Create new document --
-            </option>
-          </select>
 
-          <div id="docNameWrapper">
+        <label for="existingDocs" id="cd_existingDocs">Select existing documents (optional):</label>
-            <label for="docName" id="cd_docName">Document name:</label>
+        <!--Drop Down-->
-            <input
+        <select name="existingDocs" id="existingDocs">
-              type="text"
+          <option value="newDoc" id="newDoc">
-              id="docName"
+            -- Create new document --
-              placeholder="Enter the document name here"
+          </option>
-            />
+        </select>
-          </div>
 
-          <label for="prompt" id="cd_promt">Your prompt:</label>
+        <div id="docNameWrapper">
-          <textarea
+          <label for="docName" id="cd_docName">Document name:</label>
-            id="prompt"
+          <input type="text" id="docName" placeholder="Enter the document name here" />
-            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-->
+        <label for="prompt" id="cd_promt">Your prompt:</label>
-        <div class="step" id="step1">
+        <textarea id="prompt" placeholder="Type the prompt for your document here..."></textarea>
-          <h2 class="h2" id="step1_h2">Upload your video here:</h2>
+
-          <div class="upload-container" id="uploadContainer">
+        <div class="buttons">
-            <p id="p1">Drag and drop video file</p>
+          <button id="goBackBtn">Return</button>
-            <video id="previewThumbnail" autoplay="false"></video>
+          <button id="deleteBtn">Delete document</button>
-            <div class="file-name" id="fileName">No video chosen</div>
+          <button id="generateBtn">Save document</button>
-            <div id="thumbnailContainer">
+        </div>
-              <img id="thumbnailImage" style="display: none" />
+
+        <div id="result"></div>
+      </div>
+
+      <!-- Here starts code from the helppage -->
+
+      <div class="containerHelp" id="helpContainer" style="display: none">
+        <!-- FIXER OBERER TEIL -->
+        <div class="top-bar" id="top_bar_help">
+          <button class="back-btn" id="back_btn" onclick="showHelp()">Return</button>
+
+          <h1 id="help_page_h1">Programm tutorial</h1>
+
+
+          <div class="toc-wrapper">
+            <button class="toc-toggle" id="help_page_tableofcontents" onclick="toggleTOC()">Table of contents</button>
+            <div class="toc" id="toc">
+              <a href="#convertVid" id='hp_convertVid' onclick="closeTOC()">Convert video to document</a>
+              <a href="#firstStep" id='hp_firstStep' onclick="closeTOC()">Step 1 - Select video</a>
+              <a href="#secondStep" id='hp_secondStep' onclick="closeTOC()">Step 2 - Configuration</a>
+              <a href="#thirdStep" id='hp_thirdStep' onclick="closeTOC()">Step 3 - Select document type</a>
+              <a href="#fourthStep" id='hp_fourthStep' onclick="closeTOC()">Step 4 - Confirm</a>
+              <a href="#fifthStep" id='hp_fifthStep' onclick="closeTOC()">Step 5 - Identify speakers</a>
+              <a href="#sixthStep" id='hp_sixthStep' onclick="closeTOC()">Step 6 - Save document</a>
+              <a href="#createDoc" id='hp_createDoc' onclick="closeTOC()">Create document type</a>
+              <a href="#editDoc" id='hp_editDoc' onclick="closeTOC()">Edit document type</a>
+              <a href="#deleteDoc" id='hp_deleteDoc' onclick="closeTOC()">Delete document type</a>
             </div>
-            <button class="custom-btn" id="manualUploadBtn">
+          </div>
-              Search video
+        </div>
+
+        <!-- NUR DIESER TEIL SCROLLT -->
+        <div class="content" id="content">
+
+          <div class="step_hp" id="convertVid">
+            <h2 id="hp_convertVid_h2">Convert video to document.</h2>
+
+            <div class="step_hp" id="firstStep">
+              <h3 id="hp_firstStep_h3">Step 1 - Select video</h3>
+              <p id="hp_firstStep_p">
+                - Drag a video file into the drag-and-drop field or click <strong>“Search video”</strong>,<br>to select
+                a file using your file browser.<br>- Then click <strong>Step 2</strong> or the blue arrow on the right
+                to continue.
+              </p>
+            </div>
+            <div class="step_hp" id="secondStep">
+              <h3 id="hp_secondStep_h3">Step 2 - Configuration</h3>
+              <p id="hp_secondStep_p">
+                - Select the <strong>AI</strong> to be used in the first dropdown menu.<br>- Select the
+                <strong>transcription tool</strong> to be used in the second dropdown menu.<br>- Select the <strong>file
+                  format</strong> of the document to be created in the third dropdown menu.<br>- Select the
+                <strong>language</strong> of the document to be created in the fourth dropdown menu.<br>- Then click
+                <strong>Step 3</strong> or the blue arrow on the right to continue.
+
+              </p>
+            </div>
+            <div class="step_hp" id="thirdStep">
+              <h3 id="hp_thirdStep_h3">Step 3 - Select document type</h3>
+              <p id="hp_thirdStep_p">
+                Select a document type using the checkbox or choose a previously created document type from the dropdown
+                menu.<br>- Then click <strong>Step 4</strong> or the blue arrow on the right to continue.
+
+              </p>
+            </div>
+            <div class="step_hp" id="fourthStep">
+              <h3 id="hp_fourthStep_h3">Step 4 - Confirm</h3>
+              <p id="hp_fourthStep_p">
+                Click <strong>“Submit”</strong> to start the document generation.<br>During processing, four status
+                indicators are displayed that gradually change from red to green and show the current
+                progress:<br><br>Indicator 1: Upload and preparation of the video file.<br>Indicator 2: Transcription of
+                the video content.<br>Indicator 3: AI-based processing and document creation.<br>Indicator 4: Completion
+                of generation and provision of the document.<br><br>After successful completion, click <strong>Step
+                  5</strong> or the blue arrow on the right to continue.
+
+              </p>
+            </div>
+            <div class="step_hp" id="fifthStep">
+              <h3 id="hp_fifthStep_h3">Step 5 - Identify speakers</h3>
+              <p id="hp_fifthStep_p">
+                In the dropdown menu, you can select a recognized speaker.<br>Using the play button, you can listen to a
+                spoken sentence to clearly identify the speaker.<br>With the speaker icon, you can adjust the
+                volume.<br>Using the three-dot menu, you can set the playback speed.<br><br>In the text field
+                <strong>“Write name”</strong>, enter the actual name of the speaker so that it is displayed in the
+                document instead of placeholders such as “Speaker A”.<br>Confirm the entry with <strong>“Rename
+                  Speaker”</strong>.<br><br>With the <strong>“Rewrite Document”</strong> button, all speaker labels in
+                the document are then replaced.<br><br>After that, click <strong>Step 6</strong> or the blue arrow on
+                the right to continue.
+
+              </p>
+            </div>
+            <div class="step_hp" id="sixthStep">
+              <h3 id="hp_sixthStep_h3">Step 6 - Save document</h3>
+              <p id="hp_sixthStep_p">
+                Click <strong>“Download”</strong> to save the document.<br>A file explorer will then open, where you can
+                select the desired storage location.
+
+              </p>
+            </div>
+          </div>
+
+
+          <div class="step_hp" id="createDoc">
+            <h2 id="hp_createDoc_h2">Create document type</h2>
+            <p id="hp_createDoc_p">
+              - Open the burger menu at the top left and select <strong>“Manage document types”</strong>.<br>- Then
+              select the option <strong>“-- Create new document type --”</strong> from the dropdown menu.<br>- Enter a
+              descriptive name for the new document type.<br>- Carefully formulate the prompt for the AI-based
+              processing.<br>- Click <strong>Save document type</strong>.<br><br><strong>Note:</strong><br>The entered
+              prompt is transmitted unchanged to an AI service. Therefore, make sure to comply with applicable data
+              protection regulations and do not enter any sensitive or personal data.
+
+            </p>
+          </div>
+
+          <div class="step_hp" id="editDoc">
+            <h2 id="hp_editDoc_h2">Edit document type</h2>
+            <p id="hp_editDoc_p">
+              - Open the burger menu at the top left and select <strong>“Manage document types”</strong>.<br>- Then
+              select the document type to be edited from the dropdown menu.<br>- Revise the existing AI prompt or
+              formulate a new prompt.<br>- Finally, click <strong>“Save document
+                type”</strong>.<br><br><strong>Note:</strong><br>The entered prompt is transmitted unchanged to an AI
+              service. Therefore, make sure to comply with applicable data protection regulations and do not enter any
+              sensitive or personal data.
+
+            </p>
+          </div>
+
+          <div class="step_hp" id="deleteDoc">
+            <h2 id="hp_deleteDoc_h2">Delete document type</h2>
+            <p id="hp_deleteDoc_p">
+              - Open the burger menu at the top left and select <strong>“Manage document types”</strong>.<br>- Then
+              select the document type to be deleted from the dropdown menu.<br>- Finally, click <strong>“Delete
+                document type”</strong>.<br><br><strong>Note:</strong><br>After confirming the deletion process, the
+              document type cannot be restored.
+
+            </p>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Here starts code from step 1-->
+      <div class="step" id="step1">
+        <h2 class="h2" id="step1_h2">Upload your video here:</h2>
+        <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 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>
+
+      <!-- Here starts code from step 2-->
+      <div class="step" id="step2" style="display: none">
+        <h2 class="h2" id="step2_h2">Choose your preferences:</h2>
+        <div class="step2-form">
+          <div class="KI-wrapper">
+            <label id="labelKI">Select ki:</label>
+            <select name="ai_type" id="ai_type"></select>
+          </div>
+
+          <div class="transcript-wrap">
+            <label id="labelTranscription">Select transcription:</label>
+            <select name="transkript_type" id="transkript_type"></select>
+          </div>
+
+          <div class="type-wrapper">
+            <label id="labelType">Select type:</label>
+            <select name="output_type" id="output_type">
+              <option value="pdf">.pdf</option>
+              <option value="docx">.docx</option>
+              <option value="txt">.txt</option>
+            </select>
+          </div>
+
+          <div class="language-wrapper">
+            <label id="labelLanguage">Select language:</label>
+
+            <select name="document_language_option" id="document_language_option"></select>
+          </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="checkbox-group">
+          <h2 class="h2" id="step3_h2">Choose prefered document style:</h2>
+          <div class="checkbox-container">
+            <input type="checkbox" name="docFormat" id="docFormat" value="followup-report" />
+            <label id="label_format" for="docFormat">Follow-up Report</label>
+            <div class="figure1">
+              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png" />
+              <img class="img-hover1" src="icons/follow_up_report_example.png" />
+            </div>
+          </div>
+          <div class="checkbox-container">
+            <input type="checkbox" name="docFormat" id="docFormatSummary1" value="agenda" />
+            <label id="label_summary" for="docFormatSummary">Agenda</label>
+            <div class="figure2">
+              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png" />
+              <img class="img-hover2" src="icons/agenda_example.png" />
+            </div>
+          </div>
+          <div class="checkbox-container">
+            <input type="checkbox" name="docFormat" id="docFormatSummary2" value="result-protocol" />
+            <label id="label_summary_result" for="docFormatSummary">Resultprotocol</label>
+            <div class="figure3">
+              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png" />
+              <img class="img-hover3" src="icons/result_protocol_example.png" />
+            </div>
+          </div>
+          <div class="checkbox-container">
+            <input type="checkbox" name="docFormat" id="docFormatSummary3" value="sprint-planning" />
+            <label id="label_summary_note" for="docFormatSummary">Sprint Planning Note</label>
+            <div class="figure4">
+              <img class="img-icon" src="icons/question-mark-button-icon--free-clip-art-30.png" />
+              <img class="img-hover4" src="icons/sprint_planning_note_example.png" />
+            </div>
+          </div>
+          <div class="checkbox-container">
+            <input type="checkbox" name="docFormat" id="docFormatCustom" value="custom" />
+            <select name="customDocumentTypes" id="customDocumentTypes"></select>
+          </div>
+        </div>
+      </div>
+
+      <!-- Here starts code from step 4-->
+      <div class="step" id="step4" style="display: none">
+        <h2 class="h2" id="step4_h2">Click to submit:</h2>
+        <button class="submit-btn" id="submitButton" onclick="checkBoxes()" disabled>
+          Submit
+        </button>
+
+        <div class="testy" id="testy">
+          <div class="box2" id="box1"></div>
+          <p id="box1_p1">---Starting---</p>
+          <div class="box2" id="box2"></div>
+          <p id="box2_p2">---Transkribing---</p>
+          <div class="box2" id="box3"></div>
+          <p id="box3_p3">---Document creation---</p>
+          <div class="box2" id="box4"></div>
+        </div>
+      </div>
+
+      <!-- Here starts code from step 5-->
+      <div class="step" id="step5" style="display: none">
+        <h2 class="h2" id="step5_h2">Change names of the speakers:</h2>
+
+        <div class="speaker-container">
+          <table class="speaker-table">
+            <tbody>
+              <tr>
+                <td class="label-cell">
+                  <label id="labelSpeaker" for="cur_speaker">Select Speaker:</label>
+                </td>
+                <td class="input-cell">
+                  <select name="cur_speaker" id="cur_speaker"></select>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <label id="labelSpeakerAudio">Speaker Audio:</label>
+                </td>
+                <td class="input-cell">
+                  <audio controls id="speakerAudioViewer">
+                    Currently there is no audio file here.
+                  </audio>
+                </td>
+              </tr>
+              <tr>
+                <td class="label-cell">
+                  <label id="labelSpeakerWriter" for="newSpeaker">New Name:</label>
+                </td>
+                <td class="input-cell">
+                  <input type="text" id="newSpeaker" placeholder="Enter new speaker name" />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div class="speaker-button-group">
+            <button id="speakerLocker" onclick="rewriteSpeakerName()">
+              Rename Speaker
+            </button>
+            <button id="speakerResender" onclick="sendSpeakerPackages()">
+              Rewrite Document
             </button>
-            <input type="file" id="videoUpload" accept="video/*" />
           </div>
         </div>
-
-        <!-- Here starts code from step 2-->
-        <div class="step" id="step2" style="display: none">
-          <h2 class="h2" id="step2_h2">Choose your preferences:</h2>
-          <div class="step2-form">
-            <div class="KI-wrapper">
-              <label id="labelKI">Select ki:</label>
-              <select name="ai_type" id="ai_type"></select>
-            </div>
-
-            <div class="transcript-wrap">
-              <label id="labelTranscription">Select transcription:</label>
-              <select name="transkript_type" id="transkript_type"></select>
-            </div>
-
-            <div class="type-wrapper">
-              <label id="labelType">Select type:</label>
-              <select name="output_type" id="output_type">
-                <option value="pdf">.pdf</option>
-                <option value="docx">.docx</option>
-                <option value="txt">.txt</option>
-              </select>
-            </div>
-
-            <div class="language-wrapper">
-              <label id="labelLanguage">Select language:</label>
-
-              <select
-                name="document_language_option"
-                id="document_language_option"
-              ></select>
-            </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="checkbox-group">
-            <h2 class="h2" id="step3_h2">Choose prefered document style:</h2>
-            <div class="checkbox-container">
-              <input
-                type="checkbox"
-                name="docFormat"
-                id="docFormat"
-                value="followup-report"
-              />
-              <label id="label_format" for="docFormat">Follow-up Report</label>
-              <div class="figure1">
-                <img
-                  class="img-icon"
-                  src="icons/question-mark-button-icon--free-clip-art-30.png"
-                />
-                <img
-                  class="img-hover1"
-                  src="icons/follow_up_report_example.png"
-                />
-              </div>
-            </div>
-            <div class="checkbox-container">
-              <input
-                type="checkbox"
-                name="docFormat"
-                id="docFormatSummary1"
-                value="agenda"
-              />
-              <label id="label_summary" for="docFormatSummary">Agenda</label>
-              <div class="figure2">
-                <img
-                  class="img-icon"
-                  src="icons/question-mark-button-icon--free-clip-art-30.png"
-                />
-                <img class="img-hover2" src="icons/agenda_example.png" />
-              </div>
-            </div>
-            <div class="checkbox-container">
-              <input
-                type="checkbox"
-                name="docFormat"
-                id="docFormatSummary2"
-                value="result-protocol"
-              />
-              <label id="label_summary" for="docFormatSummary"
-                >Resultprotocol</label
-              >
-              <div class="figure3">
-                <img
-                  class="img-icon"
-                  src="icons/question-mark-button-icon--free-clip-art-30.png"
-                />
-                <img
-                  class="img-hover3"
-                  src="icons/result_protocol_example.png"
-                />
-              </div>
-            </div>
-            <div class="checkbox-container">
-              <input
-                type="checkbox"
-                name="docFormat"
-                id="docFormatSummary3"
-                value="sprint-planning"
-              />
-              <label id="label_summary" for="docFormatSummary"
-                >Sprint Planning Note</label
-              >
-              <div class="figure4">
-                <img
-                  class="img-icon"
-                  src="icons/question-mark-button-icon--free-clip-art-30.png"
-                />
-                <img
-                  class="img-hover4"
-                  src="icons/sprint_planning_note_example.png"
-                />
-              </div>
-            </div>
-            <div class="checkbox-container">
-              <input
-                type="checkbox"
-                name="docFormat"
-                id="docFormatCustom"
-                value="custom"
-              />
-              <select
-                name="customDocumentTypes"
-                id="customDocumentTypes"
-              ></select>
-            </div>
-          </div>
-        </div>
-
-        <!-- Here starts code from step 4-->
-        <div class="step" id="step4" style="display: none">
-          <h2 class="h2" id="step4_h2">Click to submit:</h2>
-          <button
-            class="submit-btn"
-            id="submitButton"
-            onclick="checkBoxes()"
-            disabled
-          >
-            Submit
-          </button>
-
-          <div class="testy" id="testy">
-            <div class="box2" id="box1"></div>
-            <p id="box1_p1">---Starting---</p>
-            <div class="box2" id="box2"></div>
-            <p id="box2_p2">---Transkribing---</p>
-            <div class="box2" id="box3"></div>
-            <p id="box3_p3">---Document creation---</p>
-            <div class="box2" id="box4"></div>
-          </div>
-        </div>
-
-        <!-- Here starts code from step 5-->
-        <div class="step" id="step5" style="display: none">
-          <h2 class="h2" id="step5_h2">Change names of the speakers:</h2>
-
-          <div class="speaker-container">
-            <table class="speaker-table">
-              <tbody>
-                <tr>
-                  <td class="label-cell">
-                    <label id="labelSpeaker" for="cur_speaker"
-                      >Select Speaker:</label
-                    >
-                  </td>
-                  <td class="input-cell">
-                    <select name="cur_speaker" id="cur_speaker"></select>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="label-cell">
-                    <label id="labelSpeakerAudio">Speaker Audio:</label>
-                  </td>
-                  <td class="input-cell">
-                    <audio controls id="speakerAudioViewer">
-                      Currently there is no audio file here.
-                    </audio>
-                  </td>
-                </tr>
-                <tr>
-                  <td class="label-cell">
-                    <label id="labelSpeakerWriter" for="newSpeaker"
-                      >New Name:</label
-                    >
-                  </td>
-                  <td class="input-cell">
-                    <input
-                      type="text"
-                      id="newSpeaker"
-                      placeholder="Enter new speaker name"
-                    />
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-
-            <div class="speaker-button-group">
-              <button id="speakerLocker" onclick="rewriteSpeakerName()">
-                Rename Speaker
-              </button>
-              <button id="speakerResender" onclick="sendSpeakerPackages()">
-                Rewrite Document
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Here starts code from step 6-->
-        <div class="step" id="step6" style="display: none">
-          <h2 class="h2" id="step6_h2">Click to download your document:</h2>
-          <button
-            class="download-btn"
-            id="downloadButton"
-            onclick="fileDownload()"
-          >
-            Download
-          </button>
-        </div>
       </div>
 
-      <button id="nextBtn" class="navBtn">&rarr;</button>
+      <!-- Here starts code from step 6-->
+      <div class="step" id="step6" style="display: none">
+        <h2 class="h2" id="step6_h2">Click to download your document:</h2>
+        <button class="download-btn" id="downloadButton" onclick="fileDownload()">
+          Download
+        </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>
+    <button id="nextBtn" class="navBtn">&rarr;</button>
-    <script src="script.js"></script>
+  </div>
-    <script src="./renderer.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
-  </body>
+  <script src="languages.js"></script>
+  <script src="script.js"></script>
+  <script src="./renderer.js"></script>
+</body>
+
 </html>

electron/main/languages.js

@@ -10,8 +10,10 @@ var languageOptions = {
         "fileName": "No video chosen",
         "manualUploadBtn": "Search video",
         "checkbox_group": "Choose preferred document style:",
-        "label_format": "Meeting report",
+        "label_format": "Follow-up Report",
-        "label_summary": "Summary with timestamps",
+        "label_summary": "Agenda",
+        "label_summary_result": "Resultprotocol",
+        "label_summary_note" : "Sprint Planning Note",
         "submitButton": "Submit",
         "step_nav1": "Step 1",
         "step_nav2": "Step 2",
@@ -51,6 +53,9 @@ var languageOptions = {
         "step6_h2" : "Click to download your document:",
         
         //help page
+        "back_btn" : "Back",
+        "help_page_h1" : "Programm tutorial",
+        "help_page_tableofcontents" : "Table of contents",
         //Inhaltsverzeichnis
         "hp_convertVid" : "Convert video to document",
         "hp_firstStep" : "Step 1 - Select video",
@@ -97,8 +102,10 @@ var languageOptions = {
         "fileName": "Kein Video ausgewählt",
         "manualUploadBtn": "Video suchen",
         "checkbox_group": "Bevorzugte Dokumentvarianten:",
-        "label_format": "Meeting Bericht",
+        "label_format": "Folgebericht",
-        "label_summary": "Zusammenfassung mit Zeitstempeln",
+        "label_summary": "Agenda",
+        "label_summary_result": "Ergebnisprotokoll",
+        "label_summary_note" : "Sprint-Planungshinweis",
         "submitButton": "Absenden",
         "step_nav1": "Schritt 1",
         "step_nav2": "Schritt 2",
@@ -138,6 +145,9 @@ var languageOptions = {
         "step6_h2" : "Klicken Sie hier, um Ihr Dokument herunterzuladen:",
 
         //help page
+        "back_btn" : "Zurück",
+        "help_page_h1" : "Programm Anleitung",
+        "help_page_tableofcontents" : "Inhaltsverzeichnis",
         //Inhaltsverzeichnis
         "hp_convertVid" : "Video zu Dokument umwandeln",
         "hp_firstStep" : "Schritt 1 - Video auswählen",
@@ -183,8 +193,10 @@ var languageOptions = {
         "fileName": "कोई वीडियो नहीं चुना गया",
         "manualUploadBtn": "वीडियो खोजें",
         "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
-        "label_format": "बैठक रिपोर्ट",
+        "label_format": "अनुवर्ती रिपोर्ट",
-        "label_summary": "टाइमस्टैम्प के साथ सारांश",
+        "label_summary": "कार्यसूची",
+        "label_summary_result": "परिणाम प्रोटोकॉल",
+        "label_summary_note" : "स्प्रिंट योजना नोट",
         "submitButton": "जमा करें",
         "step_nav1": "स्टेप 1",
         "step_nav2": "स्टेप 2",
@@ -224,6 +236,9 @@ var languageOptions = {
         "step6_h2" : "अपना दस्तावेज़ डाउनलोड करने के लिए यहां क्लिक करें:",
 
         //help page
+        "back_btn" : "पीछे",
+        "help_page_h1" : "प्रोग्राम ट्यूटोरियल",
+        "help_page_tableofcontents" : "विषयसूची",
         //Inhaltsverzeichnis
         "hp_convertVid" : "वीडियो को दस्तावेज़ में बदलें",
         "hp_firstStep" : "चरण 1 - वीडियो चुनें",
@@ -258,7 +273,7 @@ var languageOptions = {
         "hp_deleteDoc_p" : "- ऊपर बाएँ कोने में बर्गर मेनू खोलें और <strong>“दस्तावेज़ प्रकार प्रबंधित करें”</strong> चुनें।<br>- फिर ड्रॉपडाउन मेनू से हटाए जाने वाले दस्तावेज़ प्रकार को चुनें।<br>- अंत में <strong>“दस्तावेज़ प्रकार हटाएँ”</strong> पर क्लिक करें।<br><br><strong>नोट:</strong><br>हटाने की प्रक्रिया की पुष्टि करने के बाद, दस्तावेज़ प्रकार को पुनर्स्थापित नहीं किया जा सकता।"
 
         
-    },
+    }/*,
     "cz":{
         "flagPath": "flags/czechia-flag-png-large.png",
         "labelKI": "Vyberte AI:",
@@ -432,5 +447,5 @@ var languageOptions = {
         "hp_editDoc_p" : "- Откройте меню-бургер в левом верхнем углу и выберите пункт <strong>«Управление типами документов»</strong>.<br>- Затем в выпадающем меню выберите тип документа для редактирования.<br>- Измените существующий запрос ИИ или сформулируйте новый запрос.<br>- В конце нажмите <strong>«Сохранить тип документа»</strong>.<br><br><strong>Примечание:</strong><br>Введенный запрос без изменений передается службе ИИ. Поэтому обязательно соблюдайте действующие правила защиты данных и не вводите никакие чувствительные или персональные данные.",
         "hp_deleteDoc_p" : "- Откройте меню-бургер в левом верхнем углу и выберите пункт <strong>«Управление типами документов»</strong>.<br>- Затем в выпадающем меню выберите тип документа для удаления.<br>- В конце нажмите <strong>«Удалить тип документа»</strong>.<br><br><strong>Примечание:</strong><br>После подтверждения процесса удаления тип документа не может быть восстановлен."
         }
-    
+    */
 };

electron/main/preload.js

@@ -1,31 +1,39 @@
+/*
+This file contains the ipc communication methos between the ui and the gui
+*/
+
 const { contextBridge, ipcRenderer, webUtils } = require('electron')
 
 try {
+    //For file lookup on drop
     contextBridge.exposeInMainWorld("explorer", {
         onFileDrop: (file) => webUtils.getPathForFile(file)
     })
+    //For sending the specifications to the main
     contextBridge.exposeInMainWorld("submit", {
         submit: (meeting_specifications) => { ipcRenderer.send("file_submit", meeting_specifications) }
     })
+    //For file lookup on search
     contextBridge.exposeInMainWorld("electronAPI", {
         getFilePath: (file) => { return webUtils.getPathForFile(file) }
     })
-
+    //Gets all information from the main process
     contextBridge.exposeInMainWorld("onStartup", {
         getModuleNames: () => ipcRenderer.invoke('get-module-names')
     })
-
+    //Calls from the main process regarding the progress
     contextBridge.exposeInMainWorld('electron', {
         progress: (callback) => ipcRenderer.on('progress', callback)
     })
-
+    //For getting the speaker audios and names from the main
     contextBridge.exposeInMainWorld('audios', {
         speakerAudios: (callback) => ipcRenderer.on('speakerAudios', callback)
     })
+    //For sending the new speaker names to the main process
     contextBridge.exposeInMainWorld("submitSpeaker", {
         speaker_submit: (speaker_names) => { ipcRenderer.send("speaker_submit", speaker_names) }
     })
-
+    //For downloading the finished document
     contextBridge.exposeInMainWorld("download", {
         file_download: () => { ipcRenderer.send("file_download") }
     })

electron/main/renderer.js

@@ -27,7 +27,6 @@ language_option.addEventListener('change', (e) => {
     console.log("Error in the language_option change listener in the renderer.js");
     console.log(error);
   }
-
 });
 
 stepButtons.forEach(btn => {
@@ -36,7 +35,7 @@ stepButtons.forEach(btn => {
       const step = parseInt(btn.dataset.step);
       showStep(step);
     } catch (error) {
-
+      console.log(error);
     }
   });
 });
@@ -46,7 +45,7 @@ prevBtn.addEventListener("click", () => {
   try {
     if (currentStep > 1) showStep(currentStep - 1);
   } catch (error) {
-
+    console.log(error);
   }
 });
 
@@ -55,7 +54,7 @@ nextBtn.addEventListener("click", () => {
   try {
     if (currentStep < totalSteps) showStep(currentStep + 1);
   } catch (error) {
-
+    console.log(error);
   }
 });
 
@@ -73,7 +72,6 @@ uploadContainer.addEventListener("dragover", (e) => {
   } catch (error) {
     console.log("Error in renderer.js dragover listener function")
   }
-
 });
 
 //listener for when a file get dropped on the drag&drop field
@@ -91,12 +89,11 @@ uploadContainer.addEventListener("drop", (e) => {
     } 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);
   }
-})
+});
 
 //listener for the file explorer search when something got selected
 videoUpload.addEventListener("change", () => {
@@ -133,9 +130,7 @@ Listeners for Step 3
 
 */
 
-
+//Checkboxlistener so that only one checkbox can be selected at a time
-
-//Checkboxlistener so that only one can be selected at a time
 docFormat.addEventListener("change", (e) => {
   try {
     if (docFormat.checked) {
@@ -145,9 +140,10 @@ docFormat.addEventListener("change", (e) => {
       docFormatCustom.checked = false;
     }
   } catch (error) {
-
+    console.log(error)
   }
 });
+//Checkboxlistener so that only one checkbox can be selected at a time
 docFormatSummary1.addEventListener("change", (e) => {
   try {
     if (docFormatSummary1.checked) {
@@ -157,9 +153,10 @@ docFormatSummary1.addEventListener("change", (e) => {
       docFormatCustom.checked = false;
     }
   } catch (error) {
-
+    console.log(error)
   }
 });
+//Checkboxlistener so that only one checkbox can be selected at a time
 docFormatSummary2.addEventListener("change", (e) => {
   try {
     if (docFormatSummary2.checked) {
@@ -169,9 +166,10 @@ docFormatSummary2.addEventListener("change", (e) => {
       docFormatCustom.checked = false;
     }
   } catch (error) {
-
+    console.log(error)
   }
 });
+//Checkboxlistener so that only one checkbox can be selected at a time
 docFormatSummary3.addEventListener("change", (e) => {
   try {
     if (docFormatSummary3.checked) {
@@ -181,9 +179,10 @@ docFormatSummary3.addEventListener("change", (e) => {
       docFormatCustom.checked = false;
     }
   } catch (error) {
-
+    console.log(error)
   }
 });
+//Checkboxlistener so that only one checkbox can be selected at a time
 docFormatCustom.addEventListener("change", (e) => {
   try {
     if (docFormatCustom.checked) {
@@ -193,7 +192,7 @@ docFormatCustom.addEventListener("change", (e) => {
       docFormat.checked = false;
     }
   } catch (error) {
-
+    console.log(error)
   }
 });
 
@@ -202,19 +201,25 @@ docFormatCustom.addEventListener("change", (e) => {
 Listeners for Step 4
 
 */
-//Functions the the displayed progress in the progressbar can be changed out of the main process
+
+//Functions for the displayed progress in the progressbar so it can be changed out of the main process
 window.electron.progress((event, arg) => {
-  if (arg.curstep == 1) {
+  try {
-    setCircleOne();
+    if (arg.curstep == 1) {
-  } else if (arg.curstep == 2) {
+      setCircleOne();
-    setCircleZwo();
+    } else if (arg.curstep == 2) {
-  } else if (arg.curstep == 3) {
+      setCircleZwo();
-    setCircleThree();
+    } else if (arg.curstep == 3) {
-  } else if (arg.curstep == 4) {
+      setCircleThree();
-    setCircleFour();
+    } else if (arg.curstep == 4) {
+      setCircleFour();
+    }
+  } catch (error) {
+    console.log(error)
   }
 });
 
+//All for are for setting the corresponding progress section to green (or red)
 function setCircleOne() {
   try {
     if (document.getElementById("box1").style.backgroundColor == "green") {
@@ -223,8 +228,8 @@ function setCircleOne() {
       document.getElementById("box1").style.backgroundColor = "green";
     }
   } catch (error) {
+    console.log(error)
   }
-
 };
 function setCircleZwo() {
   try {
@@ -234,9 +239,8 @@ function setCircleZwo() {
       document.getElementById("box2").style.backgroundColor = "green";
     }
   } catch (error) {
-
+    console.log(error)
   }
-
 };
 function setCircleThree() {
   try {
@@ -246,9 +250,8 @@ function setCircleThree() {
       document.getElementById("box3").style.backgroundColor = "green";
     }
   } catch (error) {
-
+    console.log(error)
   }
-
 };
 function setCircleFour() {
   try {
@@ -258,7 +261,7 @@ function setCircleFour() {
       document.getElementById("box4").style.backgroundColor = "green";
     }
   } catch (error) {
-
+    console.log(error)
   }
 };
 
@@ -268,53 +271,64 @@ Listeners for Step 5
 
 */
 
-//Speaker change listener
+//Speaker change listener, changes the previewed audio snippet
 cur_speaker.addEventListener("change", (e) => {
   try {
     document.getElementById("speakerAudioViewer").src = speakerAudios[document.getElementById("cur_speaker").value].src;
   } catch (error) {
-
+    console.log(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);
+  try {
-  setSpeakerAudiosValue(arg);
+    loadSpeakerOptions(arg);
+    setSpeakerAudiosValue(arg);
+  } catch (error) {
+    console.log(error)
+  }
 });
 
-
-
 /*
 
 Listeners for the costum documents section
 
 */
 
+//Listener for closing the custom document section again
 goBackBtn.addEventListener("click", () => {
-  showCD();
+  try {
+    showCD();
+  } catch (error) {
+    console.log(error)
+  } 
 });
 
-// dokumente speichern
+//Listener for the save button in the custom document section
 generateBtn.addEventListener("click", () => {
-  const name = docName.value.trim();
+  try {
-  const content = document.getElementById("prompt").value.trim();
+    const name = docName.value.trim();
-  if (!name || !content) {
+    const content = document.getElementById("prompt").value.trim();
-    result.textContent = "Bitte Dokumentname und Prompt ausfüllen.";
+    if (!name || !content) {
+      result.textContent = "Bitte Dokumentname und Prompt ausfüllen.";
+      setTimeout(() => {
+        result.textContent = "";
+      }, 3000);
+      return;
+    }
+    window.api.saveTxtFile(name, content).then();
+    result.textContent = "Dokument erfolgreich gespeichert!";
     setTimeout(() => {
       result.textContent = "";
     }, 3000);
-    return;
+    reloadDocuments(); 
+  } catch (error) {
+    console.log(error)
   }
-  window.api.saveTxtFile(name, content).then();
-  result.textContent = "Dokument erfolgreich gespeichert!";
-  setTimeout(() => {
-    result.textContent = "";
-  }, 3000);
-  reloadDocuments();
-
 });
 
-// dokumente löschen
+//Used for deleting documents in the costum document section
 deleteBtn.addEventListener("click", () => {
   try {
     const name = docName.value.trim();
@@ -351,7 +365,7 @@ window.api.getTxtFiles().then(files => {
   }
 });
 
-//content anzeigen
+//Shows the content inside the big textarea inside the costume dokument section
 existingDocs.addEventListener("change", async () => {
   try {
     const existingDocsed = existingDocs.value;
@@ -377,3 +391,22 @@ existingDocs.addEventListener("change", async () => {
   
 });
 
+/*
+
+Listeners for the help page
+
+*/
+
+//For the help page dropdown list
+document.addEventListener("click", function (e) {
+  try {
+    const toc = document.getElementById("toc");
+    const toggle = document.querySelector(".toc-toggle");
+
+    if (!toc.contains(e.target) && !toggle.contains(e.target)) {
+        toc.classList.remove("show");
+    }
+  } catch (error) {
+    console.log(error);
+  }
+});

electron/main/script.js

@@ -5,23 +5,57 @@ let currentVideoPath = null;
 Functions used in the setup or affect most of the gui
 
 */
+//For managing the displaying of the costum document section
 var showCDValue = 0;
 function showCD() {
-  if(showCDValue == 0){
+  try {
-    document.getElementById('cdContainer').style.display = "block";
+    if(showCDValue == 0){
-    document.getElementById('step1').style.display ="none";
+      document.getElementById('cdContainer').style.display = "block";
-    document.getElementById('step2').style.display ="none";
+      document.getElementById('helpContainer').style.display = "none";
-    document.getElementById('step3').style.display ="none";
+      document.getElementById('step1').style.display ="none";
-    document.getElementById('step4').style.display ="none";
+      document.getElementById('step2').style.display ="none";
-    document.getElementById('step5').style.display ="none";
+      document.getElementById('step3').style.display ="none";
-    document.getElementById('step6').style.display ="none";
+      document.getElementById('step4').style.display ="none";
-    showCDValue = 1;
+      document.getElementById('step5').style.display ="none";
-  } else {
+      document.getElementById('step6').style.display ="none";
-    currentStep = 1;
+      showCDValue = 1;
-    showCDValue = 0;
+      showHelpValue = 0;
-    document.getElementById('cdContainer').style.display = "none";
+    } else {
-    showStep(1);
+      currentStep = 1;
+      showCDValue = 0;
+      document.getElementById('cdContainer').style.display = "none";
+      showStep(1);
+    }
+  } catch (error) {
+    console.log(error)
   }
+  
+}
+
+var showHelpValue = 0;
+function showHelp() {
+  try {
+    if(showHelpValue == 0){
+      document.getElementById('helpContainer').style.display = "flex";
+      document.getElementById('cdContainer').style.display = "none";
+      document.getElementById('step1').style.display ="none";
+      document.getElementById('step2').style.display ="none";
+      document.getElementById('step3').style.display ="none";
+      document.getElementById('step4').style.display ="none";
+      document.getElementById('step5').style.display ="none";
+      document.getElementById('step6').style.display ="none";
+      showHelpValue = 1;
+    } else {
+      currentStep = 1;
+      showHelpValue = 0;
+      showCDValue = 0;
+      document.getElementById('helpContainer').style.display = "none";
+      showStep(1);
+    }
+  } catch (error) {
+    console.log(error)
+  }
+  
 }
 
 //language changing feature => changes the language of every displayed text
@@ -37,6 +71,8 @@ function changeLanguage(language) {
     document.getElementById('manualUploadBtn').textContent = languageOptions[language].manualUploadBtn;
     document.getElementById('label_format').textContent = languageOptions[language].label_format;
     document.getElementById('label_summary').textContent = languageOptions[language].label_summary;
+    document.getElementById('label_summary_result').textContent = languageOptions[language].label_summary_result;
+    document.getElementById('label_summary_note').textContent = languageOptions[language].label_summary_note;
     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;
@@ -74,6 +110,40 @@ function changeLanguage(language) {
     document.getElementById("step5_h2").textContent = languageOptions[language].step5_h2;
     document.getElementById("step6_h2").textContent = languageOptions[language].step6_h2;
 
+    document.getElementById("back_btn").textContent = languageOptions[language].back_btn;
+    document.getElementById("help_page_h1").textContent = languageOptions[language].help_page_h1;
+    document.getElementById("help_page_tableofcontents").textContent = languageOptions[language].help_page_tableofcontents;
+    document.getElementById("hp_convertVid").textContent = languageOptions[language].hp_convertVid;
+    document.getElementById("hp_firstStep").textContent = languageOptions[language].hp_firstStep;
+    document.getElementById("hp_secondStep").textContent = languageOptions[language].hp_secondStep;
+    document.getElementById("hp_thirdStep").textContent = languageOptions[language].hp_thirdStep;
+    document.getElementById("hp_fourthStep").textContent = languageOptions[language].hp_fourthStep;
+    document.getElementById("hp_fifthStep").textContent = languageOptions[language].hp_fifthStep;
+    document.getElementById("hp_sixthStep").textContent = languageOptions[language].hp_sixthStep;
+    document.getElementById("hp_createDoc").textContent = languageOptions[language].hp_createDoc;
+    document.getElementById("hp_editDoc").textContent = languageOptions[language].hp_editDoc;
+    document.getElementById("hp_deleteDoc").textContent = languageOptions[language].hp_deleteDoc;
+    document.getElementById("hp_convertVid_h2").textContent = languageOptions[language].hp_convertVid_h2;
+    document.getElementById("hp_firstStep_h3").textContent = languageOptions[language].hp_firstStep_h3;
+    document.getElementById("hp_secondStep_h3").textContent = languageOptions[language].hp_secondStep_h3;
+    document.getElementById("hp_thirdStep_h3").textContent = languageOptions[language].hp_thirdStep_h3;
+    document.getElementById("hp_fourthStep_h3").textContent = languageOptions[language].hp_fourthStep_h3;
+    document.getElementById("hp_fifthStep_h3").textContent = languageOptions[language].hp_fifthStep_h3;
+    document.getElementById("hp_sixthStep_h3").textContent = languageOptions[language].hp_sixthStep_h3;
+    document.getElementById("hp_createDoc_h2").textContent = languageOptions[language].hp_createDoc_h2;
+    document.getElementById("hp_editDoc_h2").textContent = languageOptions[language].hp_editDoc_h2;
+    document.getElementById("hp_deleteDoc_h2").textContent = languageOptions[language].hp_deleteDoc_h2;
+    document.getElementById("hp_firstStep_p").textContent = languageOptions[language].hp_firstStep_p;
+    document.getElementById("hp_secondStep_p").textContent = languageOptions[language].hp_secondStep_p;
+    document.getElementById("hp_thirdStep_p").textContent = languageOptions[language].hp_thirdStep_p;
+    document.getElementById("hp_fourthStep_p").textContent = languageOptions[language].hp_fourthStep_p;
+    document.getElementById("hp_fifthStep_p").textContent = languageOptions[language].hp_fifthStep_p;
+    document.getElementById("hp_sixthStep_p").textContent = languageOptions[language].hp_sixthStep_p;
+    document.getElementById("hp_createDoc_p").textContent = languageOptions[language].hp_createDoc_p;
+    document.getElementById("hp_editDoc_p").textContent = languageOptions[language].hp_editDoc_p;
+    document.getElementById("hp_deleteDoc_p").textContent = languageOptions[language].hp_deleteDoc_p;
+    
+
   } catch (error) {
     console.log("Error in script.js changeLanguage function");
     console.log(error);
@@ -98,6 +168,10 @@ function showStep(stepNumber) {
     showCDValue = 0;
     document.getElementById('cdContainer').style.display = "none";
   }
+  if(showHelpValue == 1){
+    showHelpValue = 0;
+    document.getElementById('helpContainer').style.display = "none";
+  }
   if (stepNumber < 1 || stepNumber > totalSteps) {
     console.error("StepNumber out of Bounds", stepNumber);
     return;
@@ -531,3 +605,27 @@ function sendSpeakerPackages() {
 }
 
 window.sendSpeakerPackages = sendSpeakerPackages;
+
+/*
+
+Functions for the help page
+
+*/
+
+//Function to show the dropdown list in the help page
+function toggleTOC() {
+  try {
+    document.getElementById("toc").classList.toggle("show");
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+//Function to hide the dropdown list in the help page
+function closeTOC() {
+  try {
+    document.getElementById("toc").classList.remove("show");
+  } catch (error) {
+    console.log(error)
+  }
+}

electron/main/style.css

@@ -10,7 +10,7 @@ body {
   margin: 0;
 }
 
-#h1 {
+.main_h1 {
   position: static;
   transform: none;
   margin: 0;
@@ -36,10 +36,7 @@ body {
 }
 
 .gui-language {
-  position: absolute;
   right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
   z-index: 100;
   pointer-events: auto;
 }
@@ -214,8 +211,8 @@ input[type="file"] {
 
 .img-hover1 {
   position: absolute;
-  width: 200px;
+  width: auto;
-  height: 200px;
+  height: 700px;
   top: 0;
   right: 40%;
   left: 0;
@@ -236,8 +233,8 @@ input[type="file"] {
 
 .img-hover2 {
   position: absolute;
-  width: 200px;
+  width: auto;
-  height: 200px;
+  height: 700px;
   top: 0;
   right: 40%;
   left: 0;
@@ -258,8 +255,8 @@ input[type="file"] {
 
 .img-hover3 {
   position: absolute;
-  width: 200px;
+  width: auto;
-  height: 200px;
+  height: 700px;
   top: 0;
   right: 40%;
   left: 0;
@@ -280,8 +277,8 @@ input[type="file"] {
 
 .img-hover4 {
   position: absolute;
-  width: 200px;
+  width: auto;
-  height: 200px;
+  height: 700px;
   top: 0;
   right: 40%;
   left: 0;
@@ -334,7 +331,7 @@ input[type="file"] {
   border-style: solid;
   border-radius: 6px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  padding-top: 50px;
+  padding-top: 70px;
 }
 
 .progressbar {
@@ -496,6 +493,7 @@ li {
 
 .p-menu1 {
   z-index: 10;
+  padding-right: 50px;
 }
 
 .hamburger1 {
@@ -540,7 +538,7 @@ li {
 }
 
 #toggle1:checked~.menu1 {
-  height: 150px;
+  height: 170px;
   width: 300px;
 }
 
@@ -550,6 +548,7 @@ li {
   top: 55px;
   left: 20px;
   width: 240px;
+  height: 0px;
   border-radius: 5px;
   background-color: #1C3B69;
   margin: 0;
@@ -561,14 +560,13 @@ li {
   clear: both;
   width: auto;
   text-align: center;
-  height: 0px;
   overflow: hidden;
   transition: height 0.3s ease, width 0.3s ease;
   z-index: 9999;
   -webkit-transition: all 0.3s ease;
 }
 
-#customDocBtn {
+#customDocBtn, #helpBtn {
   border: none;
   background-color:#1C3B69;
   font: 700 20px 'Oswald', sans-serif;
@@ -579,20 +577,11 @@ li {
   margin-top: 30px;
 }
 
-.menu1 a:last-child {
+.menu1 button:last-child {
   margin-bottom: 30px;
 }
 
-.li1 {
+#customDocBtn:hover, #helpBtn:hover{
-  color: #fff;
-  width: 100%;
-  margin: 0;
-  padding: 10px 0px;
-  font: 700 20px 'Oswald', sans-serif;
-  text-decoration: none;
-}
-
-.li1:hover, #customDocBtn:hover{
   background-color: #FFF;
   color: rgb(61, 61, 61);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -600,8 +589,6 @@ li {
   transition: all 0.3s ease;
 }
 
-
-
 #step2 {
   font-size: larger;
   align-items: center;
@@ -663,7 +650,6 @@ li {
 .speaker-container {
   width: 100%;
   max-width: 700px;
-  margin-top: 30px;
 }
 
 .speaker-table {
@@ -675,7 +661,7 @@ li {
 .speaker-table tbody tr {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 15px;
   margin-bottom: 25px;
   padding: 10px 0;
 }
@@ -714,7 +700,6 @@ li {
   display: flex;
   gap: 15px;
   justify-content: center;
-  margin-top: 30px;
 }
 
 #speakerLocker,
@@ -807,3 +792,120 @@ button:hover {
 .container select {
   width: 100%;
 }
+
+
+/* help page */
+
+/* ===== CONTAINER ===== */
+.containerHelp {
+    background: white;
+    width: 90%;
+    max-width: 800px;
+    height: 85vh;
+    /* feste Höhe */
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    flex-direction: column;
+}
+
+/* ===== FIXER TOP-BEREICH ===== */
+.top-bar {
+    padding: 15px 20px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+/* Buttons */
+.back-btn,
+.toc-toggle {
+    background: #007BFF;
+    color: white;
+    border: none;
+    padding: 8px 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.back-btn:hover,
+.toc-toggle:hover {
+    background: #0056b3;
+}
+
+/* ===== TOC ===== */
+.toc-wrapper {
+    position: relative;
+}
+
+.toc {
+    position: absolute;
+    right: 0;
+    top: 45px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    padding: 10px;
+    min-width: 220px;
+    display: none;
+    z-index: 5;
+}
+
+.toc a {
+    display: block;
+    padding: 8px 10px;
+    color: #007BFF;
+    text-decoration: none;
+    border-radius: 6px;
+}
+
+.toc a:hover {
+    background: #f0f2f5;
+}
+
+.toc.show {
+    display: block;
+}
+
+/* ===== SCROLLBEREICH ===== */
+.content {
+    padding: 30px;
+    overflow-y: auto;
+    flex: 1;
+}
+
+/* Inhalt */
+#help_page_h1 {
+    text-align: center;
+    color: #333;
+}
+
+.step_hp {
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+
+.step_hp h2 {
+    color: #0056b3;
+}
+
+.step_hp h3 {
+    color: #555;
+    margin-bottom: 5px;
+}
+
+.step_hp p {
+    color: #555;
+    line-height: 1.6;
+}
+
+.step_hp img {
+    width: 100%;
+    max-height: 350px;
+    object-fit: contain;
+    border-radius: 8px;
+    margin-top: 15px;
+    border: 1px solid #ddd;
+}