commit

app.py

@@ -1,5 +1,3 @@
-# app.py – Prüfungsrechts-Chatbot (RAG + Sprache, UI kiểu ChatGPT)
-#
 import os
 import gradio as gr
 from gradio_pdf import PDF
@@ -12,10 +10,11 @@ from llm import load_llm
 from rag_pipeline import answer
 from speech_io import transcribe_audio, synthesize_speech
 
-ASR_LANGUAGE_HINT = os.getenv("ASR_LANGUAGE", "de")  # set to "auto" for detection, or e.g. "en"
+
+ASR_LANGUAGE_HINT = os.getenv("ASR_LANGUAGE", "de")
 
 # =====================================================
-# INITIALISIERUNG (global)
+# BACKEND INITIALIZATION
 # =====================================================
 
 print("📚 Lade Dokumente…")
@@ -33,179 +32,209 @@ retriever = get_retriever(vs)
 print("🤖 Lade LLM…")
 llm = load_llm()
 
-# Dokument-Metadaten für UI
 pdf_meta = next(d.metadata for d in docs if d.metadata.get("type") == "pdf")
 hg_meta = next(d.metadata for d in docs if d.metadata.get("type") == "hg")
 hg_url = hg_meta.get("viewer_url")
 
+
 # =====================================================
-# Quellen formatieren – Markdown für Chat
+# Quellen formatieren
 # =====================================================
 def format_sources(src):
     if not src:
         return ""
-
     out = ["", "## 📚 Quellen"]
-
     for s in src:
         line = f"- [{s['source']}]({s['url']})"
         if s.get("page") is not None:
             line += f" (Seite {s['page']})"
         out.append(line)
-
     return "\n".join(out)
 
 
 # =====================================================
-# CORE CHAT-FUNKTION (Text + separates Mikro-Audio)
+# Core Chat-Funktion
 # =====================================================
 def chat_fn(text_input, audio_path, history):
-    """
-    text_input: Textbox-Inhalt (str)
-    audio_path: Pfad zu WAV/FLAC vom Mikro (gr.Audio, type="filepath")
-    history: Liste von OpenAI-ähnlichen Messages (role, content)
-    """
     text = (text_input or "").strip()
 
-    # Wenn Audio vorhanden: transkribieren
+    # Audio → Text
     if audio_path:
-        spoken = transcribe_audio(audio_path, language=ASR_LANGUAGE_HINT)
+        spoken = transcribe_audio(audio_path)
         if text:
             text = (text + " " + spoken).strip()
         else:
             text = spoken
 
     if not text:
-        # Nichts zu tun
         return history, None, "", None
 
-    # 2) RAG-Antwort berechnen
+    # RAG Antwort
     ans, sources = answer(text, retriever, llm)
     bot_msg = ans + format_sources(sources)
 
-    # 3) History aktualisieren (ChatGPT-Style)
+    # Chat format wie ChatGPT
     history = history + [
         {"role": "user", "content": text},
         {"role": "assistant", "content": bot_msg},
     ]
 
-    # 4) TTS für Antwort
     tts_audio = synthesize_speech(bot_msg)
 
-    # 5) Input-Felder leeren
     return history, tts_audio, "", None
 
 
-# =====================================================
-# LAST ANSWER → TTS (für Button "Antwort erneut vorlesen")
-# =====================================================
 def read_last_answer(history):
     if not history:
         return None
-
     for msg in reversed(history):
-        if msg.get("role") == "assistant":
-            return synthesize_speech(msg.get("content", ""))
-
+        if msg["role"] == "assistant":
+            return synthesize_speech(msg["content"])
     return None
 
 
 # =====================================================
-# UI – GRADIO
+# UI – ChatGPT-STYLE
 # =====================================================
-with gr.Blocks(title="Prüfungsrechts-Chatbot (RAG + Sprache)") as demo:
-    # Leichtes Styling: zentriert, schmale Breite, kompakte Input-Zeile
-    gr.HTML(
-        """
-        <style>
-        html, body {height: auto !important; overflow-y: auto !important;}
-        .gradio-container {max-width: 960px; margin: 0 auto; padding: 12px;}
-        #chat-input-row {align-items: center; gap: 8px;}
-        #chat-textbox textarea {min-height: 56px;}
-        </style>
-        """
+CUSTOM_CSS = """
+/* === GLOBAL BACKGROUND === */
+body {
+    background-color: #f0f0f0 !important;
+}
+
+/* === CENTER CHAT AREA LIKE CHATGPT === */
+.gradio-container {
+    max-width: 820px !important;
+    margin: 0 auto !important;
+    padding-bottom: 120px !important; /* Platz für Input-Bar */
+}
+
+/* === CHAT BUBBLES === */
+.chatbot .message.user {
+    background-color: #ffffff !important;
+    color: #000 !important;
+    border-radius: 12px !important;
+    padding: 12px 14px !important;
+    max-width: 85% !important;
+}
+
+.chatbot .message.assistant {
+    background-color: #e6e6e6 !important;
+    color: #000 !important;
+    border-radius: 12px !important;
+    padding: 12px 14px !important;
+    max-width: 85% !important;
+}
+
+/* === INPUT BAR FIXED AT BOTTOM LIKE CHATGPT === */
+#input-bar {
+    position: fixed !important;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #ffffff;
+    padding: 14px 20px;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    z-index: 999;
+}
+
+#input-text textarea {
+    min-height: 50px !important;
+    resize: none;
+}
+
+.send-btn {
+    background-color: #0b57d0 !important;
+    color: white !important;
+    border-radius: 8px !important;
+    height: 50px !important;
+}
+
+/* Microphone button round */
+.mic-btn button {
+    border-radius: 50% !important;
+    width: 50px !important;
+    height: 50px !important;
+}
+"""
+
+
+with gr.Blocks(css=CUSTOM_CSS, title="Prüfungsrechts-Chatbot") as demo:
+
+    # Titel
+    gr.Markdown(
+        "<h1 style='text-align:center;'>🧑‍⚖️ Prüfungsrechts-Chatbot</h1>",
     )
-    gr.Markdown("# 🧑‍⚖️ Prüfungsrechts-Chatbot")
     gr.Markdown(
-        "Dieser Chatbot beantwortet Fragen **ausschließlich** aus der "
-        "Prüfungsordnung (PDF) und dem Hochschulgesetz NRW. "
-        "Du kannst Text eingeben oder direkt ins Mikrofon sprechen."
+        "<p style='text-align:center;'>Fragen zur Prüfungsordnung & zum Hochschulgesetz NRW – wie ChatGPT, aber spezialisiert.</p>"
     )
 
-    # Einspaltiges Layout, alles untereinander (verhindert abgeschnittene Bereiche)
-    with gr.Column():
-        chatbot = gr.Chatbot(
-            label="Chat",
-            height=280,
-        )
+    # CHAT WINDOW (groß, wie ChatGPT)
+    chatbot = gr.Chatbot(
+        label="Chat",
+        elem_classes=["chatbot"],
+        height=600,
+        show_label=False,
+    )
 
-        # Audio-Ausgabe (TTS)
-        voice_out = gr.Audio(label="Vorgelesene Antwort", type="numpy", interactive=False)
-
-        # Eingabezeile à la ChatGPT: Text + Mikro + Senden
-        with gr.Row(elem_id="chat-input-row"):
-            chat_text = gr.Textbox(
-                elem_id="chat-textbox",
-                label=None,
-                placeholder="Schreibe deine Frage oder klicke das Mikro und sprich. Enter sendet.",
-                lines=2,
-                max_lines=4,
-                autofocus=True,
-                scale=8,
-            )
-            chat_audio = gr.Audio(
-                label="🎤",
-                sources=["microphone"],
-                type="filepath",
-                interactive=True,
-                scale=1,
-                show_label=False,
-            )
-            send_btn = gr.Button("Senden", elem_classes=["compact-btn"], scale=1)
-
-        # Senden bei Enter
-        chat_text.submit(
-            chat_fn,
-            [chat_text, chat_audio, chatbot],
-            [chatbot, voice_out, chat_text, chat_audio],
-        )
-        # Auto-submit sobald eine Aufnahme fertig ist (Text + Audio werden kombiniert)
-        chat_audio.change(
-            chat_fn,
-            [chat_text, chat_audio, chatbot],
-            [chatbot, voice_out, chat_text, chat_audio],
-        )
-        send_btn.click(
-            chat_fn,
-            [chat_text, chat_audio, chatbot],
-            [chatbot, voice_out, chat_text, chat_audio],
-        )
+    voice_out = gr.Audio(
+        label="Vorgelesene Antwort",
+        type="numpy",
+        interactive=False,
+        visible=False,
+    )
 
-        # Button: Antwort erneut vorlesen
-        read_btn = gr.Button("🔁 Antwort erneut vorlesen")
-        read_btn.click(
-            read_last_answer,
-            [chatbot],
-            [voice_out],
+    # FIXED INPUT BAR = CHATGPT
+    with gr.Row(elem_id="input-bar"):
+        chat_text = gr.Textbox(
+            placeholder="Frag etwas oder nutze das Mikrofon…",
+            label=None,
+            lines=1,
+            elem_id="input-text",
+            scale=10,
         )
-
-        # Chat löschen
-        clear_btn = gr.Button("Chat zurücksetzen")
-        clear_btn.click(
-            lambda: ([], None, "", None),
-            None,
-            [chatbot, voice_out, chat_text, chat_audio],
+        chat_audio = gr.Audio(
+            sources=["microphone"],
+            type="filepath",
+            label=None,
+            elem_classes=["mic-btn"],
+            scale=1,
         )
+        send_btn = gr.Button("Senden", elem_classes=["send-btn"], scale=2)
 
-        # Quellen & Dokumente kompakt unterhalb
-        with gr.Accordion("Quellen & Dokumente", open=False):
-            gr.Markdown("### 📄 Prüfungsordnung (PDF)")
-            PDF(pdf_meta["pdf_url"], height=250)
-            gr.Markdown("### 📘 Hochschulgesetz NRW")
-            if isinstance(hg_url, str) and hg_url.startswith("http"):
-                gr.Markdown(f"[Im Viewer öffnen]({hg_url})")
-            else:
-                gr.Markdown("Viewer-Link nicht verfügbar.")
+    # Input logic
+    chat_text.submit(
+        chat_fn,
+        [chat_text, chat_audio, chatbot],
+        [chatbot, voice_out, chat_text, chat_audio],
+    )
+    chat_audio.change(
+        chat_fn,
+        [chat_text, chat_audio, chatbot],
+        [chatbot, voice_out, chat_text, chat_audio],
+    )
+    send_btn.click(
+        chat_fn,
+        [chat_text, chat_audio, chatbot],
+        [chatbot, voice_out, chat_text, chat_audio],
+    )
+
+    # Read button (optional)
+    read_btn = gr.Button("🔁 Antwort erneut vorlesen")
+    read_btn.click(read_last_answer, [chatbot], [voice_out])
+
+    # Quellen & Dokumente unten
+    with gr.Accordion("📄 Quellen & Dokumente", open=False):
+        gr.Markdown("### Prüfungsordnung")
+        PDF(pdf_meta["pdf_url"], height=250)
+        gr.Markdown("### Hochschulgesetz NRW")
+        if isinstance(hg_url, str) and hg_url.startswith("http"):
+            gr.Markdown(f"[Viewer öffnen]({hg_url})")
+        else:
+            gr.Markdown("Viewer nicht verfügbar.")
 
 if __name__ == "__main__":
     demo.queue().launch(ssr_mode=False, show_error=True)