commit

app.py

@@ -1,8 +1,9 @@
-# app.py – Prüfungsrechts-Chatbot (RAG + Sprache) – UI kiểu ChatGPT
-
+# app.py – Prüfungsrechts-Chatbot (RAG + Sprache, UI kiểu ChatGPT)
+#
 import os
 import gradio as gr
 from gradio_pdf import PDF
+import time
 
 from load_documents import load_all_documents
 from split_documents import split_documents
@@ -12,13 +13,12 @@ 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")
-
+ASR_LANGUAGE_HINT = os.getenv("ASR_LANGUAGE", "de")  # set to "auto" for detection, or e.g. "en"
 
 # =====================================================
-# INITIALISIERUNG
+# INITIALISIERUNG (global)
 # =====================================================
+
 print("📚 Lade Dokumente…")
 docs = load_all_documents()
 
@@ -34,227 +34,417 @@ 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
+# Quellen formatieren – Markdown für Chat
 # =====================================================
 def format_sources(src):
     if not src:
         return ""
-    lines = ["", "## 📚 Quellen"]
+
+    out = ["", "## 📚 Quellen"]
+
     for s in src:
-        url = s["url"]
-        line = f"- [{s['source']}]({url})"
+        line = f"- [{s['source']}]({s['url']})"
         if s.get("page") is not None:
             line += f" (Seite {s['page']})"
-        lines.append(line)
-    return "\n".join(lines)
+        out.append(line)
+
+    return "\n".join(out)
 
 
 # =====================================================
-# Chat-Funktion
+# CORE CHAT-FUNKTION (Text + separates Mikro-Audio)
 # =====================================================
 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()
 
-    # Audio → Text
+    # Wenn Audio vorhanden: transkribieren
     if audio_path:
-        spoken = transcribe_audio(audio_path)
+        spoken = transcribe_audio(audio_path, language=ASR_LANGUAGE_HINT)
         if text:
             text = (text + " " + spoken).strip()
         else:
             text = spoken
 
     if not text:
-        return history, None, "", None
-
-    # RAG Antwort
+        # Nichts zu tun
+        yield history, None, "", None
+        return
+
+    # User-Nachricht zur History hinzufügen
+    user_message = {"role": "user", "content": text}
+    
+    # Sofortige Anzeige der User-Nachricht
+    history.append(user_message)
+    yield history, None, "", None, gr.update(interactive=False), gr.update(interactive=False)
+    
+    # Kurze Verzögerung für Realismus
+    time.sleep(0.1)
+    
+    # 2) RAG-Antwort berechnen
     ans, sources = answer(text, retriever, llm)
     bot_msg = ans + format_sources(sources)
-
-    # Neues Chat-Element
-    history = history + [
-        {"role": "user", "content": text},
-        {"role": "assistant", "content": bot_msg},
-    ]
-
-    # TTS
-    tts = synthesize_speech(bot_msg)
-
-    return history, tts, "", None
+    
+    # Antwort stückweise zeigen (Streaming-Effekt)
+    assistant_message = {"role": "assistant", "content": ""}
+    history.append(assistant_message)
+    
+    # Simuliere Streaming-Effekt
+    words = bot_msg.split()
+    for i in range(0, len(words), 3):
+        chunk = " ".join(words[i:i+3])
+        assistant_message["content"] += chunk + " "
+        yield history, None, "", None, gr.update(interactive=False), gr.update(interactive=False)
+        time.sleep(0.05)
+    
+    # Vollständige Antwort setzen
+    assistant_message["content"] = bot_msg
+    
+    # 4) TTS für Antwort
+    tts_audio = synthesize_speech(bot_msg)
+    
+    # 5) Input-Felder leeren
+    yield history, tts_audio, "", None, gr.update(interactive=True), gr.update(interactive=True)
 
 
 # =====================================================
-# Button: Antwort erneut vorlesen
+# 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["role"] == "assistant":
-            return synthesize_speech(msg["content"])
-    return None
-
-
-# =====================================================
-# CSS – UI giống ChatGPT
-# =====================================================
-CUSTOM_CSS = """
-<style>
-
-/* === Hintergrund wie ChatGPT === */
-body {
-    background-color: #f0f0f0 !important;
-}
-
-/* === Zentralisiertes Chat-Fenster === */
-.gradio-container {
-    max-width: 820px !important;
-    margin: 0 auto !important;
-    padding-bottom: 120px !important; 
-}
-
-/* === ChatGPT Bubble-Style === */
-.chatbot .message.user {
-    background-color: white !important;
-    color: black !important;
-    border-radius: 14px !important;
-    padding: 12px 16px !important;
-    margin-bottom: 10px !important;
-    max-width: 85% !important;
-}
-
-.chatbot .message.assistant {
-    background-color: #e6e6e6 !important;
-    color: black !important;
-    border-radius: 14px !important;
-    padding: 12px 16px !important;
-    margin-bottom: 10px !important;
-    max-width: 85% !important;
-}
-
-/* === Input Bar giống ChatGPT === */
-#input-bar {
-    position: fixed !important;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: white;
-    padding: 14px 20px;
-    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    z-index: 999;
-}
-
-#input-text textarea {
-    min-height: 52px !important;
-    resize: none !important;
-}
-
-/* Send Button giống ChatGPT */
-.send-btn {
-    background-color: #0b57d0 !important;
-    color: white !important;
-    border-radius: 8px !important;
-    height: 52px !important;
-}
 
-/* Microphone Button Rund */
-.mic-btn button {
-    border-radius: 50% !important;
-    width: 52px !important;
-    height: 52px !important;
-}
+    for msg in reversed(history):
+        if msg.get("role") == "assistant":
+            return synthesize_speech(msg.get("content", ""))
 
-</style>
-"""
+    return None
 
 
 # =====================================================
-# UI – Gradio Blocks
+# UI – GRADIO (ChatGPT Style)
 # =====================================================
-with gr.Blocks(title="Prüfungsrechts-Chatbot") as demo:
-
-    # CSS injizieren
-    gr.HTML(CUSTOM_CSS)
-
-    # Titel
-    gr.Markdown("<h1 style='text-align:center;'>🧑‍⚖️ Prüfungsrechts-Chatbot</h1>")
-    gr.Markdown(
-        "<p style='text-align:center;'>Ein Chatbot speziell für Prüfungsordnung & Hochschulgesetz NRW – mit Spracheingabe wie ChatGPT.</p>"
-    )
-
+with gr.Blocks(
+    title="Prüfungsrechts-Chatbot",
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="gray",
+        neutral_hue="gray",
+        radius_size=gr.themes.sizes.radius_md,
+        font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
+    ),
+    css="""
+    :root {
+        --primary: #10a37f;
+        --primary-dark: #0d8c6d;
+    }
+    
+    .gradio-container {
+        max-width: 900px !important;
+        margin: 0 auto !important;
+        padding: 20px !important;
+        height: 100vh !important;
+    }
+    
+    .chatbot {
+        min-height: 500px;
+        border: 1px solid #e5e7eb !important;
+        border-radius: 12px !important;
+        background: white !important;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
+    }
+    
+    .chatbot .user, .chatbot .assistant {
+        padding: 20px 24px !important;
+        border-bottom: 1px solid #f3f4f6 !important;
+    }
+    
+    .chatbot .user {
+        background: #f9fafb !important;
+    }
+    
+    .chatbot .assistant {
+        background: white !important;
+    }
+    
+    .input-container {
+        position: sticky !important;
+        bottom: 20px !important;
+        background: white !important;
+        border: 1px solid #e5e7eb !important;
+        border-radius: 12px !important;
+        padding: 4px !important;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
+        margin-top: 20px !important;
+    }
+    
+    .textbox-container {
+        border: none !important;
+        box-shadow: none !important;
+        background: transparent !important;
+    }
+    
+    .textbox-container textarea {
+        font-size: 16px !important;
+        line-height: 1.5 !important;
+        padding: 12px 16px !important;
+        border: none !important;
+        background: transparent !important;
+        resize: none !important;
+        min-height: 56px !important;
+        max-height: 200px !important;
+    }
+    
+    .send-button {
+        background: var(--primary) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 8px !important;
+        padding: 8px 16px !important;
+        height: 40px !important;
+        font-weight: 500 !important;
+    }
+    
+    .send-button:hover {
+        background: var(--primary-dark) !important;
+        transform: translateY(-1px) !important;
+    }
+    
+    .audio-button {
+        background: white !important;
+        border: 1px solid #d1d5db !important;
+        border-radius: 8px !important;
+        padding: 8px !important;
+        height: 40px !important;
+        width: 40px !important;
+    }
+    
+    .audio-button:hover {
+        background: #f9fafb !important;
+    }
+    
+    .secondary-button {
+        background: white !important;
+        border: 1px solid #d1d5db !important;
+        color: #374151 !important;
+        border-radius: 8px !important;
+        padding: 8px 16px !important;
+        font-weight: 500 !important;
+    }
+    
+    .secondary-button:hover {
+        background: #f9fafb !important;
+    }
+    
+    .header {
+        text-align: center !important;
+        margin-bottom: 24px !important;
+    }
+    
+    .logo {
+        font-size: 32px !important;
+        margin-bottom: 8px !important;
+    }
+    
+    .subtitle {
+        color: #6b7280 !important;
+        font-size: 14px !important;
+        margin-bottom: 8px !important;
+    }
+    
+    .warning-box {
+        background: #fef3c7 !important;
+        border: 1px solid #fbbf24 !important;
+        border-radius: 8px !important;
+        padding: 12px 16px !important;
+        margin: 16px 0 !important;
+        color: #92400e !important;
+        font-size: 14px !important;
+    }
+    
+    .footer {
+        margin-top: 24px !important;
+        padding-top: 16px !important;
+        border-top: 1px solid #e5e7eb !important;
+        color: #6b7280 !important;
+        font-size: 12px !important;
+        text-align: center !important;
+    }
+    
+    .tts-container {
+        margin-top: 12px !important;
+    }
+    
+    .document-section {
+        margin-top: 24px !important;
+    }
+    """
+) as demo:
+    
+    # Header mit Logo und Beschreibung
+    with gr.Column(elem_classes=["header"]):
+        gr.HTML("""
+        <div class="logo">🧑‍⚖️</div>
+        <h1 style="margin: 0; font-size: 28px; font-weight: 600;">Prüfungsrechts-Chatbot</h1>
+        <div class="subtitle">Intelligenter Assistent für Prüfungsordnung und Hochschulgesetz NRW</div>
+        """)
+    
+    # Warning Box
+    gr.HTML("""
+    <div class="warning-box">
+        ⚠️ Dieser Chatbot beantwortet Fragen <strong>ausschließlich</strong> aus der 
+        Prüfungsordnung (PDF) und dem Hochschulgesetz NRW.
+    </div>
+    """)
+    
+    # Haupt-Chat-Bereich
     chatbot = gr.Chatbot(
-        label="Chat",
+        label="",
         elem_classes=["chatbot"],
-        height=600,
+        height=500,
         show_label=False,
+        avatar_images=(None, "🧑‍⚖️"),
+        bubble_full_width=False,
+        latex_delimiters=[
+            {"left": "$$", "right": "$$", "display": True},
+            {"left": "$", "right": "$", "display": False}
+        ],
+        render_markdown=True,
+        show_copy_button=True
     )
-
-    voice_out = gr.Audio(type="numpy", visible=False)
-
-    # === ChatGPT Input Bar ===
-    with gr.Row(elem_id="input-bar"):
-        chat_text = gr.Textbox(
-            placeholder="Frage eingeben oder Mikrofon benutzen…",
-            label=None,
-            elem_id="input-text",
-            lines=1,
-            scale=10,
+    
+    # TTS-Audio-Ausgabe
+    with gr.Row(elem_classes=["tts-container"]):
+        voice_out = gr.Audio(
+            label="Vorgelesene Antwort",
+            type="numpy",
+            interactive=False,
+            show_label=True,
+            visible=True
         )
-
-        chat_audio = gr.Audio(
-            sources=["microphone"],
-            type="filepath",
-            label=None,
-            elem_classes=["mic-btn"],
-            scale=1,
+    
+    # ChatGPT-ähnliche Eingabezeile
+    with gr.Row(elem_classes=["input-container"]):
+        with gr.Column(scale=1, min_width=50):
+            chat_audio = gr.Audio(
+                label="",
+                sources=["microphone"],
+                type="filepath",
+                interactive=True,
+                show_label=False,
+                elem_classes=["audio-button"],
+                show_download_button=False
+            )
+        
+        with gr.Column(scale=9, elem_classes=["textbox-container"]):
+            chat_text = gr.Textbox(
+                label="",
+                placeholder="Stelle deine Frage hier... (Drücke Enter zum Senden, Shift+Enter für neue Zeile)",
+                lines=1,
+                max_lines=5,
+                autofocus=True,
+                show_label=False,
+                elem_id="chat-input"
+            )
+        
+        with gr.Column(scale=1, min_width=80):
+            send_btn = gr.Button(
+                "Senden",
+                variant="primary",
+                elem_classes=["send-button"]
+            )
+    
+    # Control Buttons
+    with gr.Row():
+        read_btn = gr.Button(
+            "🔁 Antwort vorlesen",
+            elem_classes=["secondary-button"],
+            size="sm"
         )
-
-        send_btn = gr.Button("Senden", elem_classes=["send-btn"], scale=2)
-
-    # Events – Text + Audio
+        clear_btn = gr.Button(
+            "🗑️ Chat löschen",
+            elem_classes=["secondary-button"],
+            size="sm"
+        )
+    
+    # Dokumente in Accordion
+    with gr.Accordion("📚 Quellen & Dokumente", open=False):
+        with gr.Tabs():
+            with gr.TabItem("📄 Prüfungsordnung"):
+                PDF(pdf_meta["pdf_url"], height=350)
+            
+            with gr.TabItem("📘 Hochschulgesetz NRW"):
+                if isinstance(hg_url, str) and hg_url.startswith("http"):
+                    gr.HTML(f"""
+                    <div style="padding: 20px;">
+                        <p style="margin-bottom: 16px;">Das Hochschulgesetz NRW kann online eingesehen werden:</p>
+                        <a href='{hg_url}' target='_blank' style='
+                            display: inline-block;
+                            padding: 12px 24px;
+                            background: #10a37f;
+                            color: white;
+                            text-decoration: none;
+                            border-radius: 8px;
+                            font-weight: 500;
+                        '>📖 Im Viewer öffnen</a>
+                    </div>
+                    """)
+                else:
+                    gr.Markdown("Viewer-Link nicht verfügbar.")
+    
+    # Footer
+    gr.HTML("""
+    <div class="footer">
+        <p>Prüfungsrechts-Chatbot v1.0 • Powered by RAG & LLM • Nur für informative Zwecke</p>
+        <p style="font-size: 11px; opacity: 0.7;">Hinweis: Rechtsverbindliche Auskünfte erhalten Sie von offiziellen Stellen.</p>
+    </div>
+    """)
+    
+    # Event Handlers
+    # Text senden mit Enter
     chat_text.submit(
         chat_fn,
         [chat_text, chat_audio, chatbot],
-        [chatbot, voice_out, chat_text, chat_audio],
+        [chatbot, voice_out, chat_text, chat_audio, chat_text, send_btn],
     )
+    
+    # Audio ändern (nach Aufnahme)
     chat_audio.change(
         chat_fn,
         [chat_text, chat_audio, chatbot],
-        [chatbot, voice_out, chat_text, chat_audio],
+        [chatbot, voice_out, chat_text, chat_audio, chat_text, send_btn],
     )
+    
+    # Senden-Button
     send_btn.click(
         chat_fn,
         [chat_text, chat_audio, chatbot],
-        [chatbot, voice_out, chat_text, chat_audio],
+        [chatbot, voice_out, chat_text, chat_audio, chat_text, send_btn],
     )
-
-    # Antwort wiederholen
-    gr.Button("🔁 Antwort erneut vorlesen").click(
-        read_last_answer, [chatbot], [voice_out]
+    
+    # Antwort erneut vorlesen
+    read_btn.click(
+        read_last_answer,
+        [chatbot],
+        [voice_out],
+    )
+    
+    # Chat löschen
+    clear_btn.click(
+        lambda: ([], None, "", None),
+        None,
+        [chatbot, voice_out, chat_text, chat_audio],
     )
 
-    # Quellen-Accordion
-    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("Kein Viewer verfügbar.")
-
-
-# =====================================================
-# Start
-# =====================================================
 if __name__ == "__main__":
     demo.queue().launch(ssr_mode=False, show_error=True)