commit

app.py

@@ -3,7 +3,6 @@
 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
@@ -78,43 +77,23 @@ def chat_fn(text_input, audio_path, history):
 
     if not text:
         # 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)
-    
+        return history, None, "", None
+
     # 2) RAG-Antwort berechnen
     ans, sources = answer(text, retriever, llm)
     bot_msg = ans + format_sources(sources)
-    
-    # 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
-    
+
+    # 3) History aktualisieren (ChatGPT-Style)
+    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
-    yield history, tts_audio, "", None, gr.update(interactive=True), gr.update(interactive=True)
+    return history, tts_audio, "", None
 
 
 # =====================================================
@@ -132,319 +111,101 @@ def read_last_answer(history):
 
 
 # =====================================================
-# UI – GRADIO (ChatGPT Style)
+# UI – GRADIO
 # =====================================================
-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="",
-        elem_classes=["chatbot"],
-        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
+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>
+        """
+    )
+    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."
     )
-    
-    # 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
+
+    # Einspaltiges Layout, alles untereinander (verhindert abgeschnittene Bereiche)
+    with gr.Column():
+        chatbot = gr.Chatbot(
+            label="Chat",
+            height=280,
         )
-    
-    # ChatGPT-ähnliche Eingabezeile
-    with gr.Row(elem_classes=["input-container"]):
-        with gr.Column(scale=1, min_width=50):
+
+        # 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="",
+                label="🎤",
                 sources=["microphone"],
                 type="filepath",
                 interactive=True,
+                scale=1,
                 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=["compact-btn"], scale=1)
+
+        # Senden bei Enter
+        chat_text.submit(
+            chat_fn,
+            [chat_text, chat_audio, chatbot],
+            [chatbot, voice_out, chat_text, chat_audio],
         )
-        clear_btn = gr.Button(
-            "🗑️ Chat löschen",
-            elem_classes=["secondary-button"],
-            size="sm"
+        # 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],
         )
-    
-    # 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, 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, chat_text, send_btn],
-    )
-    
-    # Senden-Button
-    send_btn.click(
-        chat_fn,
-        [chat_text, chat_audio, chatbot],
-        [chatbot, voice_out, chat_text, chat_audio, chat_text, send_btn],
-    )
-    
-    # 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],
-    )
+        send_btn.click(
+            chat_fn,
+            [chat_text, chat_audio, chatbot],
+            [chatbot, voice_out, chat_text, chat_audio],
+        )
+
+        # Button: Antwort erneut vorlesen
+        read_btn = gr.Button("🔁 Antwort erneut vorlesen")
+        read_btn.click(
+            read_last_answer,
+            [chatbot],
+            [voice_out],
+        )
+
+        # Chat löschen
+        clear_btn = gr.Button("Chat zurücksetzen")
+        clear_btn.click(
+            lambda: ([], None, "", None),
+            None,
+            [chatbot, voice_out, chat_text, chat_audio],
+        )
+
+        # 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.")
 
 if __name__ == "__main__":
     demo.queue().launch(ssr_mode=False, show_error=True)