WordPress

2026-07-15 20:47:58 +02:00
parent d6153521ca
commit daf48f3f91
29 changed files with 1203 additions and 128 deletions
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <title>HOEMMA – Interview aufnehmen</title>
+    <style>
+        body { font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; }
+        button { font-size: 1.1rem; padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; }
+        #recordBtn { background: #c0392b; color: white; }
+        #recordBtn.recording { background: #27ae60; }
+        #status { margin: 16px 0; color: #555; }
+        #transcript { width: 100%; min-height: 200px; font-size: 1rem; padding: 12px; margin-top: 8px; box-sizing: border-box; }
+        .meta input { width: 100%; font-size: 1rem; padding: 10px; margin-top: 4px; box-sizing: border-box; }
+        .meta label { display: block; margin-top: 12px; color: #333; }
+        #saveBtn { background: #2980b9; color: white; margin-top: 12px; display: none; }
+    </style>
+</head>
+<body>
+
+    <h1>🎙 Interview aufnehmen</h1>
+
+    <button id="recordBtn">🔴 Aufnahme starten</button>
+    <div id="status">Bereit.</div>
+
+    <div class="meta">
+        <label for="interviewer">Name der interviewten Person</label>
+        <input id="interviewer" type="text" placeholder="z. B. Frau Meier">
+
+        <label for="city">Stadt</label>
+        <input id="city" type="text" value="Dortmund">
+    </div>
+
+    <textarea id="transcript" placeholder="Hier erscheint der Text nach der Aufnahme…"></textarea>
+    <button id="saveBtn">💾 Speichern</button>
+
+    <script>
+        let mediaRecorder = null;
+        let chunks = [];
+
+        const recordBtn = document.getElementById("recordBtn");
+        const status = document.getElementById("status");
+        const transcript = document.getElementById("transcript");
+        const saveBtn = document.getElementById("saveBtn");
+
+        recordBtn.addEventListener("click", async () => {
+
+            // ---- Fall 1: Aufnahme läuft -> stoppen ----
+            if (mediaRecorder && mediaRecorder.state === "recording") {
+                mediaRecorder.stop();
+                return;
+            }
+
+            // ---- Fall 2: neue Aufnahme starten ----
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
+            chunks = [];
+
+            mediaRecorder.ondataavailable = e => chunks.push(e.data);
+
+            mediaRecorder.onstop = async () => {
+                recordBtn.textContent = "🔴 Aufnahme starten";
+                recordBtn.classList.remove("recording");
+                status.textContent = "⏳ Transkription läuft…";
+
+                const audioBlob = new Blob(chunks, { type: "audio/webm" });
+                const formData = new FormData();
+                formData.append("file", audioBlob, "aufnahme.webm");
+
+                try {
+                    const response = await fetch("/interview/transcription", { method: "POST", body: formData });
+                    if (!response.ok) throw new Error("Server: " + response.status);
+
+                    transcript.value = await response.text();
+                    status.textContent = "✅ Fertig – Text bitte prüfen und ggf. korrigieren.";
+                    saveBtn.style.display = "inline-block";
+                } catch (err) {
+                    status.textContent = "❌ Fehler: " + err.message;
+                }
+
+                stream.getTracks().forEach(t => t.stop());   // Mikrofon freigeben
+            };
+
+            mediaRecorder.start();
+            recordBtn.textContent = "⏹ Aufnahme beenden";
+            recordBtn.classList.add("recording");
+            status.textContent = "🎙 Aufnahme läuft – sprechen Sie…";
+        });
+
+        saveBtn.addEventListener("click", async () => {
+
+            status.textContent = "⏳ Speichern läuft…";
+
+            try {
+                const response = await fetch("/interview/save", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                        interviewr: document.getElementById("interviewer").value,
+                        interviewTranscript: transcript.value,
+                        city: document.getElementById("city").value
+                    })
+                });
+
+                const antwort = await response.json();   // ApiResponse: {success, errorMessage, data}
+
+                status.textContent = antwort.success
+                    ? "✅ In der Wissensdatenbank gespeichert! (" + antwort.data.link + ")"
+                    : "❌ " + antwort.errorMessage;
+
+            } catch (err) {
+                status.textContent = "❌ Fehler: " + err.message;
+            }
+        });
+    </script>
+
+</body>
+</html>