Remove duplicated file_download event handler from ipcMain

Merge branch 'feature/ui-test' into 'develop'
Feature/ui test See merge request proj-wise2526-video2document/video2document!96
2026-06-15 18:01:52 +02:00 · 2026-01-18 18:18:36 +01:00 · 2026-01-18 18:02:35 +01:00 · 2026-01-18 18:00:53 +01:00 · 2026-01-18 17:57:18 +01:00 · 2026-01-18 17:38:36 +01:00
9 changed files with 1173 additions and 396 deletions
@@ -10,7 +10,144 @@
 </head>

 <body>
+    <div class="container">
+        <h1>Manage document types</h1>
+
+        <label for="existingDocs">Vorhandene Dokumententypen auswählen (optional):</label>
+        <!--Drop Down-->
+        <select name="existingDocs" id="existingDocs">
+            <option value="newDoc">-- Neuen Dokumententyp erstellen --</option>
+        </select>
+
+        <div id="docNameWrapper">
+            <label for="docName">Name des Dokumententyps:</label>
+            <input type="text" id="docName" placeholder="Gib hier den Namen für den Dokumententyp ein">
+        </div>
+
+        <label for="prompt">Dein Prompt:</label>
+        <textarea id="prompt" placeholder="Schreibe hier den Prompt für dein Dokumententyp..."></textarea>
+
+        <div class="buttons">
+            <a href="index.html">
+                <button id="goBackBtn">Abbrechen</button>
+            </a>
+            <button id="deleteBtn">Dokumententyp löschen</button>
+            <button id="generateBtn">Dokumententyp speichern</button>
+        </div>
+
+        <div id="result"></div>
+    </div>
+
    <script src="languages.js"></script>
+    <script>
+        const goBackBtn = document.getElementById("goBackBtn");
+        const generateBtn = document.getElementById("generateBtn");
+        const deleteBtn = document.getElementById("deleteBtn");
+        const existingDocs = document.getElementById("existingDocs");
+        const docNameInput = document.getElementById("docName");
+        const promptInput = document.getElementById("prompt");
+        const resultDiv = document.getElementById("result");
+        const exampleText = "";
+
+        // dokumente speichern
+        generateBtn.addEventListener("click", () => {
+            const name = docNameInput.value.trim();
+            const content = promptInput.value.trim();
+            if (!name || !content) {
+                resultDiv.textContent = "Bitte Name des Dokumententyps und Prompt ausfüllen.";
+                setTimeout(() => {
+                    resultDiv.textContent = "";
+                }, 3000);
+                return;
+            }
+            window.api.saveTxtFile(name, content).then();
+            resultDiv.textContent = "Dokumententyp erfolgreich gespeichert!";
+            setTimeout(() => {
+                resultDiv.textContent = "";
+            }, 3000);
+            reloadDocuments();
+
+        });
+
+        // dokumente löschen
+        deleteBtn.addEventListener("click", () => {
+            const name = docNameInput.value.trim();
+
+            if (!name) {
+                resultDiv.textContent = "Bitte Name des Dokumententyps angeben.";
+                setTimeout(() => {
+                    resultDiv.textContent = "";
+                }, 3000);
+                return;
+            }
+
+            const confirmDelete = confirm(
+                `Möchtest du den Dokumententyp "${name}" wirklich löschen?`
+            );
+
+            if (!confirmDelete) return;
+
+            window.api.deleteTxtFile(name).then((success) => {
+                if (success) {
+                    resultDiv.textContent = "Dokumententyp erfolgreich gelöscht!";
+                    reloadDocuments();
+                    existingDocs.value = "newDoc";
+                    existingDocs.dispatchEvent(new Event("change"));
+                } else {
+                    resultDiv.textContent = "Dokumententyp konnte nicht gelöscht werden.";
+                }
+
+                setTimeout(() => {
+                    resultDiv.textContent = "";
+                }, 3000);
+            });
+        });
+
+
+        //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>

 </body>

@@ -0,0 +1,320 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anleitung</title>
+
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: #f0f2f5;
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            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" onclick="closeTOC()">Video zu Dokument umwandeln</a>
+                    <a href="#firstStep" onclick="closeTOC()">Schritt 1 - Video auswählen</a>
+                    <a href="#secondStep" onclick="closeTOC()">Schritt 2 - Konfiguration</a>
+                    <a href="#thirdStep" onclick="closeTOC()">Schritt 3 - Dokumententyp auswählen</a>
+                    <a href="#fourthStep" onclick="closeTOC()">Schritt 4 - Bestätigen</a>
+                    <a href="#fifthStep" onclick="closeTOC()">Schritt 5 - Sprecher identifizieren</a>
+                    <a href="#sixthStep" onclick="closeTOC()">Schritt 6 - Dokument speichern</a>
+                    <a href="#createDoc" onclick="closeTOC()">Dokumententyp erstellen</a>
+                    <a href="#editDoc" onclick="closeTOC()">Dokumententyp bearbeiten</a>
+                    <a href="#deleteDoc" onclick="closeTOC()">Dokumententyp löschen</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- NUR DIESER TEIL SCROLLT -->
+        <div class="content">
+
+            <div class="step" id="convertVid">
+                <h2>Video in ein Dokument umwandeln.</h2>
+
+                <div class="step" id="firstStep">
+                    <h3>Schritt 1 - Video auswählen</h3>
+                    <p id="firstStep">
+                        - 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>Schritt 2 - Konfiguration</h3>
+                    <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>Schritt 3 - Dokumententyp auswählen</h3>
+                    <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>Schritt 4 - Bestätigen</h3>
+                    <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>Schritt 5 - Sprecher identifizieren</h3>
+                    <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>Schritt 6 - Dokument speichern</h3>
+                    <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>Dokumententyp erstellen</h2>
+                <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>Dokumententyp bearbeiten</h2>
+                <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>Dokumententyp löschen</h2>
+                <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>
+
+</html>
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="de">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -7,210 +8,248 @@
  <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>

-<div id="h1-wrapper">
-    <section  class="p-menu1">
-    <nav id="navbar" class="navigation" role="navigation">
-      <input id="toggle1" type="checkbox" />
-      <label class="hamburger1" for="toggle1">
-        <div class="top"></div>
-        <div class="meat"></div>
-        <div class="bottom"></div>
-      </label>
+  <div id="h1-wrapper">
+    <section class="p-menu1">
+      <nav id="navbar" class="navigation" role="navigation">
+        <input id="toggle1" type="checkbox" />
+        <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>
-        <a href="help_page.html" class="li1">Help</a>
+        <nav class="menu1">
+          <button id="customDocBtn" onclick="showCD()">Manage document types</button>
+          <a href="help_page.html" class="li1">Help</a>
+        </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 class="gui-language">
+      <select name="language_option" id="language_option"></select>
+    </div>

-</div>
+  </div>

-<div class="step-nav">
-  <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>
- 
-<div id="middleContainerWrapper" class="middle-container-wrapper">
-  <button id="prevBtn" class="navBtn" disabled>&larr;</button>
+  <div class="step-nav">
+    <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 class="mitte" id="mitte">
+  <div id="middleContainerWrapper" class="middle-container-wrapper">
+    <button id="prevBtn" class="navBtn" disabled>&larr;</button>

-    <!--Costum document section-->
-  <div class="container" id="cdContainer" style="display:none;">
+    <!-- Visible middle part-->
+    <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>
+          <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">
+          <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>
+          <button id="goBackBtn">Return</button>
+          <button id="deleteBtn">Delete document</button>
+          <button id="generateBtn">Save document</button>
        </div>

        <div id="result"></div>
-    </div>
+      </div>

-   <!-- Here starts code from step 1--> 
-    <div class="step" id="step1">
-      <h2 class="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;">
+      <!-- Here starts code from step 1-->
+      <div class="step" id="step1">
+        <h2 class="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>
-        <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">Choose your preferences:</h2>
-      <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>
+      <!-- Here starts code from step 2-->
+      <div class="step" id="step2" style="display:none;">
+        <h2 class="h2">Choose your preferences:</h2>
+
+        <div class="step2-form">
+
+          <div class="step2-row">
+            <label>Select ki:</label>
+            <select id="ai_type"></select>
+          </div>
+
+          <div class="step2-row">
+            <label>Select transcription:</label>
+            <select id="transkript_type"></select>
+          </div>
+
+          <div class="step2-row">
+            <label>Select type:</label>
+            <select id="output_type">
+              <option>.pdf</option>
+              <option>.docx</option>
+              <option>.txt</option>
+            </select>
+          </div>
+
+          <div class="step2-row">
+            <label>Select language:</label>
+            <select id="document_language_option"></select>
+          </div>
+
+        </div>
      </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="word">.word</option>
-          <option value="txt">.txt</option>
-        </select>
+      <!-- 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">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="flags/germany-flag-png-large.jpg">
+            </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="flags/india-flag-png-large.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="flags/united-kingdom-flag-png-large.jpg">
+            </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="flags/germany-flag-png-large.jpg">
+            </div>
+          </div>
+          <div class="checkbox-container">
+            <input type="checkbox" name="docFormat" id="docFormatCustom" value="custom">
+            <select name="customDocumentTypes" id="customDocumentTypes">
+            </select>
+          </div>
+        </div>
      </div>

-      <div class="language-wrapper">
-        <label id="labelLanguage">Select language:</label>
+      <!-- Here starts code from step 4-->
+      <div class="step" id="step4" style="display:none;">
+        <h2 class="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">Change names of the speakers:</h2>
        
-        <select name="document_language_option" id="document_language_option">
-          
-        </select>
-      </div> 
-    </div>
+        <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>

-   <!-- 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">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>
-        <div class="checkbox-container">
-          <input type="checkbox" name="docFormat" id="docFormatSummary1" value="agenda">
-          <label id="label_summary" for="docFormatSummary">Agenda</label>
-        </div>
-        <div class="checkbox-container">
-          <input type="checkbox" name="docFormat" id="docFormatSummary2" value="result-protocol">
-          <label id="label_summary" for="docFormatSummary">Resultprotocol</label>
-        </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>
-        <div class="checkbox-container">
-          <input type="checkbox" name="docFormat" id="docFormatCustom" value="custom">
-          <select name="customDocumentTypes" id="customDocumentTypes">
-          </select>
+          <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">Click to download your document:</h2>
+        <button class="download-btn" id="downloadButton" onclick="fileDownload()">Download</button>
+      </div>
    </div>

-   <!-- Here starts code from step 4--> 
-    <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 id="nextBtn" class="navBtn">&rarr;</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">Change names of the speakers:</h2>
-      <div class="speakerView" id="speakerView">
-       <label id="labelSpeaker">Select Speaker:</label>
-       <select name="cur_speaker" id="cur_speaker">
-       </select>
-      </div>
-      <div class="speakerAudio" id="speakerAutio">
-        <label id="labelSpeakerAudio">Selected Speaker:</label>
-        <audio controls id="speakerAudioViewer">
-        Currently there is no audio file here.
-        </audio> 
-      </div>
-      <div class="speakerWrite" id="speakerWrite">
-        <label id="labelSpeakerWriter">Write name:</label>
-        <input type="text" id="newSpeaker">
-      </div>
-        <div class="speakerButton-group">
-          <button id="speakerLocker" onclick="rewriteSpeakerName()">Rename Speaker</button>
-          <button id="speakerResender" onclick="sendSpeakerPackages()">Rewrite document</button>
-        </div>
-    </div>
-
-   <!-- Here starts code from step 6--> 
-    <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>
-    </div>
  </div>
-
-  <button id ="nextBtn" class="navBtn">&rarr;</button>
-
-</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="script.js"></script>
-<script src="./renderer.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/lc-select@1.3.0/lc_select.min.js"></script>
+  <script src="languages.js"></script>
+  <script src="script.js"></script>
+  <script src="./renderer.js"></script>
 </body>
+
 </html>
@@ -1,7 +1,7 @@
 var languageOptions = {
    "eng":{
        "flagPath": "flags/united-kingdom-flag-png-large.jpg",
-        "labelKI": "Select ki:",
+        "labelKI": "Select AI:",
        "labelTranscription": "Select transcription:",
        "labelLanguage": "Select language:",
        "title": "Video to document",
@@ -9,7 +9,7 @@ var languageOptions = {
        "p1": "Drag and drop video file",
        "fileName": "No video chosen",
        "manualUploadBtn": "Search video",
-        "checkbox_group": "Choose prefered document style:",
+        "checkbox_group": "Choose preferred document style:",
        "label_format": "Meeting report",
        "label_summary": "Summary with timestamps",
        "submitButton": "Submit",
@@ -27,7 +27,7 @@ var languageOptions = {
        "speakerResender": "Rewrite document",
        "downloadButton": "Download",
        "box1_p1": "---Starting---",
-        "box2_p2": "---Transkribing---",
+        "box2_p2": "---Transcribing---",
        "box3_p3": "---Document creation---",
        "labelType": "Select document type:",

@@ -46,13 +46,13 @@ var languageOptions = {
    },
    "de":{
        "flagPath": "flags/germany-flag-png-large.jpg",
-        "labelKI": "Waehle KI:",
-        "labelTranscription": "Waehle Transkription:",
-        "labelLanguage": "Waehle Sprache:",
+        "labelKI": "Wähle KI:",
+        "labelTranscription": "Wähle Transkription:",
+        "labelLanguage": "Wähle Sprache:",
        "title": "Video zu Dokument",
        "h1": "Video zu Dokument",
        "p1": "Video per Drag & Drop ablegen",
-        "fileName": "Kein Video ausgewaehlt",
+        "fileName": "Kein Video ausgewählt",
        "manualUploadBtn": "Video suchen",
        "checkbox_group": "Bevorzugte Dokumentvarianten:",
        "label_format": "Meeting Bericht",
@@ -64,7 +64,7 @@ var languageOptions = {
        "step_nav4": "Schritt 4",
        "step_nav5": "Schritt 5",
        "step_nav6": "Schritt 6",
-        "h2": "Uploade dein Video hier:",
+        "h2": "Lade dein Video hier hoch:",
        "labelSpeaker": "Wähle Sprecher:",
        "labelSpeakerAudio": "Ausgewählter Sprecher:",
        "labelSpeakerWriter": "Schreib Namen:",
@@ -72,27 +72,27 @@ var languageOptions = {
        "speakerResender": "Überschreibe Dokument",
        "downloadButton": "Download",
        "box1_p1": "---Startet---",
-        "box2_p2": "---Transkribing---",
-        "box3_p3": "---Dokument kreieren---",
-        "labelType": "Wähle Dokumenttype:",
+        "box2_p2": "---Transkribierung---",
+        "box3_p3": "---Dokument erstellen---",
+        "labelType": "Wähle Dokumenttyp:",

        "customDocBtn": "Dokumenttypen verwalten",
        "cd_h1": "Dokumenttypen verwalten",
        "cd_existingDocs": "Vorhandene Dokumente auswählen (optional):",
-        "cd_docName": "Dokument Name",
+        "cd_docName": "Dokumentname",
        "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",
+        "generateBtn": "Speichere Dokument",
        "newDoc": "-- Neues Dokument erstellen --"
    },
    "in":{
        "flagPath": "flags/india-flag-png-large.png",
-        "labelKI": "की का चयन करें:",
+        "labelKI": "KI का चयन करें:",
        "labelTranscription": "प्रतिलेखन चुनें:",
-        "labelLanguage": "भाषा चुने:",
+        "labelLanguage": "भाषा चुनें:",
        "title": "दस्तावेज़ के लिए वीडियो",
        "h1": "दस्तावेज़ के लिए वीडियो",
        "p1": "वीडियो फ़ाइल खींचें और छोड़ें",
@@ -101,7 +101,7 @@ var languageOptions = {
        "checkbox_group": "पसंदीदा दस्तावेज़ शैली चुनें:",
        "label_format": "बैठक रिपोर्ट",
        "label_summary": "टाइमस्टैम्प के साथ सारांश",
-        "submitButton": "जमा करना",
+        "submitButton": "जमा करें",
        "step_nav1": "स्टेप 1",
        "step_nav2": "स्टेप 2",
        "step_nav3": "स्टेप 3",
@@ -110,11 +110,11 @@ var languageOptions = {
        "step_nav6": "स्टेप 6",
        "h2": "अपना वीडियो यहां अपलोड करें:",
        "labelSpeaker": "स्पीकर चुनें:",
-        "labelSpeakerAudio": "चयनित वक्ता:",
+        "labelSpeakerAudio": "चयनित स्पीकर:",
        "labelSpeakerWriter": "नाम लिखें:",
        "speakerLocker": "स्पीकर का नाम बदलें",
-        "speakerResender": "दस्तावेज़ पुनः लिखें",
-        "downloadButton": "डाउनलोड करना",
+        "speakerResender": "दस्तावेज़ फिर से लिखें",
+        "downloadButton": "डाउनलोड करें",
        "box1_p1": "---प्रारंभ---",
        "box2_p2": "---प्रतिलेखन---",
        "box3_p3": "---दस्तावेज़ निर्माण---",
@@ -127,10 +127,10 @@ var languageOptions = {
        "docName": "यहां दस्तावेज़ का नाम दर्ज करें",
        "cd_promt": "आपका संकेत:",
        "prompt": "अपने दस्तावेज़ के लिए प्रॉम्प्ट यहां टाइप करें...",
-        "goBackBtn": "वापस करना",
-        "deleteBtn": "दस्तावेज़ हटाएँ",
+        "goBackBtn": "वापस जाएं",
+        "deleteBtn": "दस्तावेज़ हटाएं",
        "generateBtn": "दस्तावेज़ सहेजें",
-        "newDoc": "-- नया दस्तावेज़ बनाएँ --"
+        "newDoc": "-- नया दस्तावेज़ बनाएं --"
        
    }
    
@@ -264,7 +264,7 @@ 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 to check if one checkbox is at least clicked. Final controll function before sending the input to the generation
 function checkBoxes() {
  try {
    const checkboxes = document.querySelectorAll('input[name="docFormat"]');
@@ -308,6 +308,7 @@ function checkBoxes() {
        const outputType = document.getElementById("output_type");
        const transcriptionType = document.getElementById("transkript_type");
        const aiType = document.getElementById("ai_type");
+        const docLanguage = document.getElementById("document_language_option");
        const sendingPackage = {
          "video": {
            "module": "extraction-video-to-audio",
@@ -319,9 +320,11 @@ function checkBoxes() {
          "document": {
            "module": aiType.value,
            "type": typeCheckbox,
-            "outputType": outputType.value
+            "outputType": outputType.value,
+            "outputLanguage": docLanguage.value
          }
        };
+        console.log(docLanguage.value);
        window.submit.submit(sendingPackage)
      } else {
        alert('The given file is not compatible. These are the available types: [".mp4", ".mov", ".avi", ".mkv"].');
@@ -429,19 +432,30 @@ function setSpeakerAudiosValue(valy) {
 //Function to rewrite the speaker name in the json
 function rewriteSpeakerName() {
  try {
-    var tempy = document.getElementById("cur_speaker").value;
-    speakerAudios[tempy].name = document.getElementById("newSpeaker").value;
-    loadSpeakerOptions(speakerAudios);
+    const select = document.getElementById("cur_speaker");
+    const newName = document.getElementById("newSpeaker").value.trim();
+
+    if (!newName) {
+      alert("Please enter a new speaker name");
+      return;
+    }
+
+    const selectedIndex = select.selectedIndex;
+    const selectedValue = select.value;
+
+    // Update speakerAudios data
+    speakerAudios[selectedValue].name = newName;
+
+    // Update the specific option text and keep value
+    select.options[selectedIndex].text = newName;
+    select.options[selectedIndex].value = selectedValue;
+
+    // Keep it selected
+    select.selectedIndex = selectedIndex;
+
+    console.log("Speaker renamed:", newName);
  } catch (error) {
-    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() {
-  try {
-    window.submitSpeaker.speaker_submit(speakerAudios);
-  } catch (error) {
-    console.log(error);
+    console.log("Error renaming speaker:", error);
  }
 }

@@ -11,12 +11,12 @@ body {
 }

 #h1 {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+  position: static;
+  transform: none;
  margin: 0;
  z-index: 20;
+  flex: 1;
+  text-align: center;
 }

 #h1-wrapper {
@@ -30,6 +30,26 @@ body {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.gui-language {
+  position: absolute;
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  pointer-events: auto;
+}
+
+#language_option {
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  cursor: pointer;
 }

 .upload-container {
@@ -85,7 +105,6 @@ body {
 #previewThumbnail {
  width: 150px;
  height: 100px;
-  /*border: 1px dashed black;*/
 }

 .custom-btn {
@@ -108,8 +127,9 @@ body {
  background-color: #0056b3;
 }

-#step2 {
-  gap: 25px;
+.step h2 {
+  width: 100%;
+  text-align: center;
 }

 .KI-wrapper {
@@ -186,6 +206,100 @@ input[type="file"] {
  gap: 5px;
 }

+/* Hover effects for all different document options (with placeholders)*/
+
+.figure1 {
+  position: relative;
+}
+
+.img-hover1 {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 0;
+  right: 40%;
+  left: 0;
+  bottom: 0;
+  object-fit: contain;
+  display: none;
+  transition: opacity .2s;
+  z-index: 999;
+}
+
+.figure1:hover .img-hover1 {
+  display: flex;
+}
+
+.figure2 {
+  position: relative;
+}
+
+.img-hover2 {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 0;
+  right: 40%;
+  left: 0;
+  bottom: 0;
+  object-fit: contain;
+  display: none;
+  transition: opacity .2s;
+  z-index: 999;
+}
+
+.figure2:hover .img-hover2 {
+  display: flex;
+}
+
+.figure3 {
+  position: relative;
+}
+
+.img-hover3 {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 0;
+  right: 40%;
+  left: 0;
+  bottom: 0;
+  object-fit: contain;
+  display: none;
+  transition: opacity .2s;
+  z-index: 999;
+}
+
+.figure3:hover .img-hover3 {
+  display: flex;
+}
+
+.figure4 {
+  position: relative;
+}
+
+.img-hover4 {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 0;
+  right: 40%;
+  left: 0;
+  bottom: 0;
+  object-fit: contain;
+  display: none;
+  transition: opacity .2s;
+  z-index: 999;
+}
+
+.figure4:hover .img-hover4 {
+  display: flex;
+}
+
+.img-icon {
+  width: 15px;
+  height: 15px;
+}

 .submit-btn {
  display: flex;
@@ -211,7 +325,7 @@ input[type="file"] {
  background-color: #FFF;
  display: flex;
  width: 780px;
-  height: 500px;
+  height: 550px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
@@ -220,6 +334,7 @@ input[type="file"] {
  border-style: solid;
  border-radius: 6px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  padding-top: 50px;
 }

 .progressbar {
@@ -261,7 +376,10 @@ input[type="file"] {
 #ai_type,
 #transkript_type,
 #language_option {
-  padding: 3px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  font-size: 14px;
 }

 .labelDiv {
@@ -308,7 +426,7 @@ input[type="file"] {
 /*panels*/
 .step {
  margin-top: 40px;
-  margin-bottom: 40px;;
+  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  min-height: 425px;
@@ -451,7 +569,14 @@ li {
  -webkit-transition: all 0.3s ease;
 }

-.menu1 a:first-child {
+#customDocBtn {
+  border: none;
+  background-color:#1C3B69;
+  font: 700 20px 'Oswald', sans-serif;
+  border-radius: 0%;
+}
+
+.menu1 button:first-child {
  margin-top: 30px;
 }

@@ -468,7 +593,7 @@ li {
  text-decoration: none;
 }

-.li1:hover {
+.li1:hover, #customDocBtn:hover{
  background-color: #FFF;
  color: rgb(61, 61, 61);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
@@ -476,7 +601,27 @@ li {
  transition: all 0.3s ease;
 }

-#step2,
+
+
+#step2 {
+  font-size: larger;
+  align-items: center;
+}
+
+.step2-form {
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px; /* DAS ist dein Spacing */
+}
+
+.step2-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
 #step3,
 #step5 {
  font-size: larger;
@@ -487,7 +632,7 @@ li {
 }

 #step5 {
-  align-items: flex-start;
+  align-items: center;
 }

 .button-group {
@@ -511,35 +656,91 @@ li {
  font-size: 14px;
 }

+.h2 {
+  font-size: 25px;
+}
+
+
+.speaker-container {
+  width: 100%;
+  max-width: 700px;
+  margin-top: 30px;
+}
+
+.speaker-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+}
+
+.speaker-table tbody tr {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 25px;
+  padding: 10px 0;
+}
+
+.label-cell {
+  flex: 0 0 150px;
+  text-align: left;
+}
+
+.label-cell label {
+  font-weight: 400;
+  display: block;
+}
+
+.input-cell {
+  flex: 1;
+}
+
+#cur_speaker,
+#newSpeaker {
+  width: 100%;
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+#speakerAudioViewer {
+  width: 100%;
+  height: 35px;
+  border-radius: 6px;
+}
+
+.speaker-button-group {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  margin-top: 30px;
+}
+
 #speakerLocker,
 #speakerResender {
-  padding: 10px 20px;
-  margin: 20px auto;
+  padding: 12px 25px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
+  font-weight: 500;
+  transition: background-color 0.2s;
 }

-.h2 {
-  font-size: 25px;
-}
-
-.speakerView,
-.speakerAudio,
-.speakerWrite {
-  margin-top: auto;
-  margin-bottom: auto;
+#speakerLocker:hover,
+#speakerResender:hover {
+  background-color: #0056b3;
 }

 .container {
  background: white;
-  padding: 30px;
-  margin-top: 50px;
+  padding: 10px;
+  margin-top: 30px;
  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 650px;
 }
@@ -600,4 +801,10 @@ button:hover {
  margin-top: 20px;
  color: #333;
  word-break: break-word;
+}
+
+.container input,
+.container textarea,
+.container select {
+  width: 100%;
 }
@@ -1,3 +1,4 @@
+// Last modified: 2024-06-11 12:28:00
 // Loading required packages
 require("./requires.js");
 console.log(start);
@@ -167,9 +168,39 @@ electron.ipcMain.on("file_submit", async (event, args) => {
      throw new Error("Unknown document type: " + args.document.type);
    }

-    console.log(args);
-    let audiopath = "";
-    let transcriptpath = "";
+electron.ipcMain.on("file_download", async (event) => {
+  try {
+    if (!globalFinalHtmlPath) {
+      throw new Error("No document generated yet");
+    }
+
+    const format = String(globalArgs?.document?.outputType || "")
+      .replace('.', '')
+      .toLowerCase();
+
+    if (!format) {
+      throw new Error("No output format selected");
+    }
+
+    const outputPath = await mapFunctions
+      .get("htmlDocumentConverter")
+      .convert({
+        inputPath: globalFinalHtmlPath,
+        format,
+        showDialog: true
+      });
+
+    event.sender.send("download_success", {
+      path: outputPath,
+      format
+    });
+
+  } catch (err) {
+    console.error("file_download failed:", err);
+
+    event.sender.send("error", err.message || String(err));
+  }
+});

    console.log("\n\n Running the Video to Audio Extractor");
    // This code handles the Video to Audio extraction module call
@@ -285,16 +316,6 @@ electron.ipcMain.on("file_submit", async (event, args) => {
  }
 });

-electron.ipcMain.on("file_download", async () => {
-  await mapFunctions
-    .get("htmlDocumentConverter")
-    .convert({
-      inputPath: globalFinalHtmlPath,
-      format: globalArgs.document.outputType,
-      showDialog: true,
-    });
-});
-
 electron.ipcMain.on("speaker_submit", async (event, args) => {
  console.log("\n\n\nJa also hier kam was an \n\n\n");
  console.log(args);
@@ -364,4 +385,4 @@ electron.ipcMain.handle('delete-txt-file', (event, fileName) => {
  } else {
    return false; 
  }
-});
+});
@@ -1,35 +1,37 @@
-const fs = require('fs');
-const path = require('path');
-const puppeteer = require('puppeteer');
-const htmlToDocx = require('html-to-docx');
-const { execSync } = require('child_process');
-const os = require('os');
+const fs = require("fs");
+const path = require("path");
+const puppeteer = require("puppeteer");
+const htmlToDocx = require("html-to-docx");
+const { execSync } = require("child_process");
+const os = require("os");

 const outputDir = path.join(__dirname, "../../../storage/documents");

 if (!fs.existsSync(outputDir)) {
-    fs.mkdirSync(outputDir, { recursive: true });
+  fs.mkdirSync(outputDir, { recursive: true });
 }

 async function showSaveDialog(defaultName, format) {
-    const platform = os.platform();
-    
-    if (platform === 'darwin') {
-        // macOS
-        const applescript = `
+  const platform = os.platform();
+
+  if (platform === "darwin") {
+    // macOS
+    const applescript = `
            set defaultName to "${defaultName}.${format}"
            set theFile to choose file name with prompt "Dokument speichern als:" default name defaultName
            POSIX path of theFile
        `;
-        
-        try {
-            const result = execSync(`osascript -e '${applescript}'`, { encoding: 'utf8' });
-            return result.trim();
-        } catch (err) {
-            if (err.status === 1) return null; // User canceled
-            throw err;
-        }
-    } else if (platform === 'win32') {
+
+    try {
+      const result = execSync(`osascript -e '${applescript}'`, {
+        encoding: "utf8",
+      });
+      return result.trim();
+    } catch (err) {
+      if (err.status === 1) return null; // User canceled
+      throw err;
+    }
+  } else if (platform === "win32") {
    const safeName = decodeURIComponent(defaultName);

    const powershell = `
@@ -43,155 +45,192 @@ async function showSaveDialog(defaultName, format) {
    `;

    try {
-        const result = execSync(
-            `powershell -NoProfile -Command "${powershell.replace(/\r?\n/g, ' ')}"`,
-            { encoding: 'utf8' }
-        );
-        return result.trim() || null;
+      const result = execSync(
+        `powershell -NoProfile -Command "${powershell.replace(/\r?\n/g, " ")}"`,
+        { encoding: "utf8" },
+      );
+      return result.trim() || null;
    } catch (err) {
-        if (err.status === 1) return null; // User cancelled
-        throw new Error("Save dialog failed: " + err.message);
+      if (err.status === 1) return null; // User cancelled
+      throw new Error("Save dialog failed: " + err.message);
    }
-    } else {
-        // Linux - zenity oder kdialog
-        try {
-            const result = execSync(
-                `zenity --file-selection --save --confirm-overwrite --filename="${defaultName}.${format}"`, 
-                { encoding: 'utf8' }
-            );
-            return result.trim();
-        } catch (err) {
-            try {
-                const result = execSync(
-                    `kdialog --getsavefilename . "${defaultName}.${format}"`, 
-                    { encoding: 'utf8' }
-                );
-                return result.trim();
-            } catch (err2) {
-                // Fallback
-                return path.join(os.homedir(), 'Downloads', `${defaultName}.${format}`);
-            }
-        }
+  } else {
+    // Linux - zenity oder kdialog
+    try {
+      const result = execSync(
+        `zenity --file-selection --save --confirm-overwrite --filename="${defaultName}.${format}"`,
+        { encoding: "utf8" },
+      );
+      return result.trim();
+    } catch (err) {
+      try {
+        const result = execSync(
+          `kdialog --getsavefilename . "${defaultName}.${format}"`,
+          { encoding: "utf8" },
+        );
+        return result.trim();
+      } catch (err2) {
+        // Fallback
+        return path.join(os.homedir(), "Downloads", `${defaultName}.${format}`);
+      }
    }
+  }
 }

 const module_exports = {
-    name: "htmlDocumentConverter",
-    type: "converter",
-    displayname: "HTML Document Converter",
-    description: "Converts LLM-generated HTML to PDF, DOCX, TXT, or HTML",
+  name: "htmlDocumentConverter",
+  type: "converter",
+  displayname: "HTML Document Converter",
+  description: "Converts LLM-generated HTML to PDF, DOCX, TXT, or HTML",

-    /**
-     * Main conversion function
-     * @param {Object} options
-     * @param {string} options.inputPath - Path to the HTML input
-     * @param {string} options.format - 'pdf' | 'docx' | 'html' | 'txt'
-     * @param {string} [options.outputName] - Optional output filename (without extension)
-     * @param {boolean} [options.showDialog] - Show save dialog (default: false in module mode, true in CLI mode)
-     */
-    async convert({ inputPath, format = 'pdf', outputName, showDialog = false }) {
-        if (!fs.existsSync(inputPath)) {
-            throw new Error(`Input file not found: ${inputPath}`);
-        }
+  /**
+   * Main conversion function
+   * @param {Object} options
+   * @param {string} options.inputPath - Path to the HTML input
+   * @param {string} options.format - 'pdf' | 'docx' | 'html' | 'txt'
+   * @param {string} [options.outputName] - Optional output filename (without extension)
+   * @param {boolean} [options.showDialog] - Show save dialog (default: false in module mode, true in CLI mode)
+   */
+  async convert({ inputPath, format = "pdf", outputName, showDialog = false }) {
+    format = format.toLowerCase().replace(".", ""); // <-- FIX

-        const ext = path.extname(inputPath).toLowerCase();
-        const baseName = outputName || path.basename(inputPath, ext);
-        
-        let outputFile;
-        
-        if (showDialog) {
-            // Zeige nativen Dialog
-            outputFile = await showSaveDialog(baseName, format);
-            if (!outputFile) {
-                console.log('Speichervorgang abgebrochen.');
-                return null;
-            }
-        } else {
-            // Nutze Standard-Ausgabeverzeichnis
-            outputFile = path.join(outputDir, `${baseName}.${format.toLowerCase()}`);
-        }
-
-        let htmlContent = fs.readFileSync(inputPath, 'utf8');
-
-        // Remove <think> tags if present
-        htmlContent = htmlContent.replace(/<think>[\s\S]*?<\/think>/gi, '');
-
-        switch (format.toLowerCase()) {
-            case 'html':
-                fs.writeFileSync(outputFile, htmlContent, 'utf8');
-                break;
-            case 'pdf':
-                await this.htmlToPDF(htmlContent, outputFile);
-                break;
-            case 'docx':
-                await this.htmlToDOCX(htmlContent, outputFile);
-                break;
-            case 'txt':
-                fs.writeFileSync(outputFile, this.htmlToTXT(htmlContent), 'utf8');
-                break;
-            default:
-                throw new Error(`Unsupported format: ${format}`);
-        }
-
-        console.log(`Erfolgreich gespeichert: ${outputFile}`);
-        return outputFile;
-    },
-
-    // HTML → PDF
-    async htmlToPDF(html, outputPath) {
-        const browser = await puppeteer.launch({ 
-            headless: true,
-            args: ['--no-sandbox', '--disable-setuid-sandbox']
-        });
-        const page = await browser.newPage();
-        await page.setContent(html, { waitUntil: 'networkidle0' });
-        await page.pdf({ 
-            path: outputPath, 
-            format: 'A4', 
-            printBackground: true,
-            margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' }
-        });
-        await browser.close();
-    },
-
-    // HTML → DOCX
-    async htmlToDOCX(html, outputPath) {
-        const buffer = await htmlToDocx(html);
-        fs.writeFileSync(outputPath, buffer);
-    },
-
-    // HTML → TXT (rudimentär)
-    htmlToTXT(html) {
-        return html.replace(/<[^>]*>/g, '').replace(/\s+\n/g, '\n').trim();
+    if (!["pdf", "docx", "html", "txt"].includes(format)) {
+      throw new Error(`Unsupported format: ${format}`);
    }
+    if (!fs.existsSync(inputPath)) {
+      throw new Error(`Input file not found: ${inputPath}`);
+    }
+
+    const ext = path.extname(inputPath).toLowerCase();
+    const baseName = outputName || path.basename(inputPath, ext);
+
+    let outputFile;
+
+    if (showDialog) {
+      // Zeige nativen Dialog
+      outputFile = await showSaveDialog(baseName, format);
+      if (!outputFile) {
+        console.log("Speichervorgang abgebrochen.");
+        return null;
+      }
+    } else {
+      // Nutze Standard-Ausgabeverzeichnis
+      outputFile = path.join(outputDir, `${baseName}.${format.toLowerCase()}`);
+    }
+
+    let htmlContent = fs.readFileSync(inputPath, "utf8");
+
+    // Remove <think> tags if present
+    htmlContent = htmlContent.replace(/<think>[\s\S]*?<\/think>/gi, "");
+
+    switch (format.toLowerCase()) {
+      case "html":
+        fs.writeFileSync(outputFile, htmlContent, "utf8");
+        break;
+      case "pdf":
+        await this.htmlToPDF(htmlContent, outputFile);
+        break;
+      case "docx":
+        await this.htmlToDOCX(htmlContent, outputFile);
+        break;
+      case "txt":
+        fs.writeFileSync(outputFile, this.htmlToTXT(htmlContent), "utf8");
+        break;
+      default:
+        throw new Error(`Unsupported format: ${format}`);
+    }
+
+    console.log(`Erfolgreich gespeichert: ${outputFile}`);
+    return outputFile;
+  },
+
+  // HTML → PDF
+  async htmlToPDF(html, outputPath) {
+    let browser;
+    try {
+      browser = await puppeteer.launch({
+        headless: true,
+        args: ["--no-sandbox", "--disable-setuid-sandbox"],
+      });
+
+      const page = await browser.newPage();
+      await page.setContent(html, { waitUntil: "networkidle0" });
+      await page.pdf({
+        path: outputPath,
+        format: "A4",
+        printBackground: true,
+        margin: {
+          top: "20mm",
+          right: "20mm",
+          bottom: "20mm",
+          left: "20mm",
+        },
+      });
+    } finally {
+      if (browser) {
+        await browser.close();
+      }
+    }
+  },
+
+  // HTML → DOCX
+  async htmlToDOCX(html, outputPath) {
+    try {
+      // html‑to‑docx library converts HTML string into a Word .docx buffer
+      // Usage from html‑to‑docx docs:
+      // await HTMLtoDOCX(htmlString, headerHTMLString, documentOptions, footerHTMLString)  [oai_citation:0‡GitHub](https://github.com/privateOmega/html-to-docx?utm_source=chatgpt.com)
+      const buffer = await htmlToDocx(html, null, {
+        table: { row: { cantSplit: true } },
+      });
+      fs.writeFileSync(outputPath, buffer);
+    } catch (err) {
+      throw new Error(`DOCX conversion failed: ${err.message}`);
+    }
+  },
+
+  // HTML → TXT
+  htmlToTXT(html) {
+    // A decent plain text conversion: strip tags and collapse whitespace
+    // If you want more advanced extraction consider using a library like `html-to-text` or `strip-html`  [oai_citation:1‡GitHub](https://github.com/html-to-text/node-html-to-text?utm_source=chatgpt.com)
+    return (
+      html
+        // Remove all tags
+        .replace(/<[^>]+>/g, "")
+        // Convert multiple whitespace into single spaces
+        .replace(/\s+/g, " ")
+        .trim()
+    );
+  },
 };

 module.exports = module_exports;

 // CLI usage mit Dialog
 if (require.main === module) {
-    (async () => {
-        const args = process.argv.slice(2);
-        if (args.length < 1) {
-            console.log('Usage: node htmlDocumentConverter.js <input.html> [format]');
-            console.log('Formats: pdf (default), docx, html, txt');
-            console.log('');
-            console.log('Ein nativer "Speichern unter" Dialog wird automatisch geöffnet.');
-            process.exit(1);
-        }
+  (async () => {
+    const args = process.argv.slice(2);
+    if (args.length < 1) {
+      console.log("Usage: node htmlDocumentConverter.js <input.html> [format]");
+      console.log("Formats: pdf (default), docx, html, txt");
+      console.log("");
+      console.log(
+        'Ein nativer "Speichern unter" Dialog wird automatisch geöffnet.',
+      );
+      process.exit(1);
+    }

-        const inputPath = args[0];
-        const format = args[1] || 'pdf';
+    const inputPath = args[0];
+    const format = args[1] || "pdf";

-        try {
-            await module_exports.convert({ 
-                inputPath, 
-                format, 
-                showDialog: true  
-            });
-        } catch (err) {
-            console.error('Konvertierung fehlgeschlagen:', err.message);
-            process.exit(1);
-        }
-    })();
-}
+    try {
+      await module_exports.convert({
+        inputPath,
+        format,
+        showDialog: true,
+      });
+    } catch (err) {
+      console.error("Konvertierung fehlgeschlagen:", err.message);
+      process.exit(1);
+    }
+  })();
+}
Author	SHA1	Message	Date
MikeHughes-BIN	17479be27a	Remove duplicated file_download event handler from ipcMain	2026-01-18 18:18:36 +01:00
Hughes, Mike	7fbf0c59d1	Merge branch 'feature/ui-test' into 'develop' Feature/ui test See merge request proj-wise2526-video2document/video2document!96	2026-01-18 18:02:35 +01:00
Hughes, Mike	ef20a08d9f	Merge branch 'fix/speaker-selection' into 'develop' Speakers that have been renamed will stay in the selection as requested by Oliver See merge request proj-wise2526-video2document/video2document!97	2026-01-18 18:00:53 +01:00
MikeHughes-BIN	9a3f84efc8	Speakers that have been renamed will stay in the selection as requested by Oliver	2026-01-18 17:57:18 +01:00
Hughes, Mike	6813b45c80	Merge branch 'develop' into 'feature/ui-test' # Conflicts: # main.js	2026-01-18 17:38:36 +01:00
MikeHughes-BIN	773e8b471c	Remove notification for successful file download in ipcMain handler	2026-01-18 17:37:47 +01:00
MikeHughes-BIN	013c9b5f2c	Refactor file download handling to improve error management and user notifications	2026-01-18 17:32:29 +01:00
MikeHughes-BIN	18e791d56e	Refactor code formatting and improve error handling in htmlDocumentConverter	2026-01-18 17:28:41 +01:00
MikeHughes-BIN	1ed386fcf4	Enhance file download handling and format validation in htmlDocumentConverter	2026-01-18 17:02:29 +01:00
MikeHughes-BIN	c98d7761b2	Refactor UI elements for step selection and speaker management; improve styling and accessibility	2026-01-18 16:55:42 +01:00
Hughes, Mike	d09b75a6cd	Merge branch 'feature/ui-test' into 'develop' Feature/ui test See merge request proj-wise2526-video2document/video2document!95	2026-01-17 14:35:38 +01:00
Verena Schulz	0427056f65	Small changes	2026-01-17 00:11:57 +01:00
Verena Schulz	8076fe92f5	Integrated customDocBtn better with css into the menu	2026-01-17 00:11:37 +01:00
Verena Schulz	c2e6c4a186	Style changes for custom document css	2026-01-16 23:59:30 +01:00
Verena Schulz	826381d858	Added hover effects for other document types	2026-01-16 23:54:31 +01:00
Hughes, Mike	4ac59e7597	Merge branch 'feature/ui-test' into 'develop' Feature/ui test See merge request proj-wise2526-video2document/video2document!94	2026-01-15 17:19:58 +01:00
eric.minning	b5d374498f	Merge branch 'feature/ui-test' of https://gitlab.rlp.net/proj-wise2526-video2document/video2document into feature/ui-test	2026-01-15 17:11:42 +01:00
eric.minning	567ec0aa1b	The language key for the document language gets send to the main now	2026-01-15 17:11:32 +01:00
Spanier, Pit	906929169e	Merge branch 'fix/main-file-safe' into 'develop' fixed pipeline See merge request proj-wise2526-video2document/video2document!93	2026-01-15 16:58:44 +01:00
Spanier, Pit	30ef4d4738	Merge branch 'fix/main-file-safe' into 'develop' Enhance module retrieval by categorizing AI and transcription modules See merge request proj-wise2526-video2document/video2document!92	2026-01-15 16:43:13 +01:00
MikeHughes-BIN	d84d4f6dee	Added last modified	2026-01-15 16:31:00 +01:00
Hughes, Mike	862d4b7a96	Merge branch 'feature/ui-test' into 'develop' Feature/ui test See merge request proj-wise2526-video2document/video2document!91	2026-01-15 16:28:51 +01:00
Hughes, Mike	97075e79a6	Merge branch 'feature/customdocument26' into 'feature/ui-test' Feature/customdocument26 See merge request proj-wise2526-video2document/video2document!90	2026-01-15 14:46:27 +01:00
Hughes, Mike	9d5b71e2c7	Merge branch 'feature/ui-test' into 'feature/customdocument26' # Conflicts: # electron/main/custom_document.html	2026-01-15 14:34:52 +01:00
santa	fdfbdec75a	Merge branch 'feature/customdocument26' of https://gitlab.rlp.net/proj-wise2526-video2document/video2document into feature/customdocument26	2026-01-15 14:19:32 +01:00
santa	977f2f8244	help page	2026-01-15 14:14:14 +01:00
MikeHughes-BIN	ecece5009e	minor changes to Text	2026-01-15 13:52:51 +01:00
Verena Schulz	66762b8251	Implemented hover effect	2026-01-14 19:04:27 +01:00
santa	6f722b68e1	help page step1-3 description and documenttypes edit, delete, safe	2026-01-10 19:34:06 +01:00