commit

app.py

@@ -1,3 +1,5 @@
+# app.py – Prüfungsrechts-Chatbot (RAG + Sprache) – UI kiểu ChatGPT
+
 import os
 import gradio as gr
 from gradio_pdf import PDF
@@ -13,10 +15,10 @@ from speech_io import transcribe_audio, synthesize_speech
 
 ASR_LANGUAGE_HINT = os.getenv("ASR_LANGUAGE", "de")
 
+
 # =====================================================
-# BACKEND INITIALIZATION
+# INITIALISIERUNG
 # =====================================================
-
 print("📚 Lade Dokumente…")
 docs = load_all_documents()
 
@@ -43,17 +45,18 @@ hg_url = hg_meta.get("viewer_url")
 def format_sources(src):
     if not src:
         return ""
-    out = ["", "## 📚 Quellen"]
+    lines = ["", "## 📚 Quellen"]
     for s in src:
-        line = f"- [{s['source']}]({s['url']})"
+        url = s["url"]
+        line = f"- [{s['source']}]({url})"
         if s.get("page") is not None:
             line += f" (Seite {s['page']})"
-        out.append(line)
-    return "\n".join(out)
+        lines.append(line)
+    return "\n".join(lines)
 
 
 # =====================================================
-# Core Chat-Funktion
+# Chat-Funktion
 # =====================================================
 def chat_fn(text_input, audio_path, history):
     text = (text_input or "").strip()
@@ -73,17 +76,21 @@ def chat_fn(text_input, audio_path, history):
     ans, sources = answer(text, retriever, llm)
     bot_msg = ans + format_sources(sources)
 
-    # Chat format wie ChatGPT
+    # Neues Chat-Element
     history = history + [
         {"role": "user", "content": text},
         {"role": "assistant", "content": bot_msg},
     ]
 
-    tts_audio = synthesize_speech(bot_msg)
+    # TTS
+    tts = synthesize_speech(bot_msg)
 
-    return history, tts_audio, "", None
+    return history, tts, "", None
 
 
+# =====================================================
+# Button: Antwort erneut vorlesen
+# =====================================================
 def read_last_answer(history):
     if not history:
         return None
@@ -94,85 +101,95 @@ def read_last_answer(history):
 
 
 # =====================================================
-# UI – ChatGPT-STYLE
+# CSS – UI giống ChatGPT
 # =====================================================
 CUSTOM_CSS = """
-/* === GLOBAL BACKGROUND === */
+<style>
+
+/* === Hintergrund wie ChatGPT === */
 body {
     background-color: #f0f0f0 !important;
 }
 
-/* === CENTER CHAT AREA LIKE CHATGPT === */
+/* === Zentralisiertes Chat-Fenster === */
 .gradio-container {
     max-width: 820px !important;
     margin: 0 auto !important;
-    padding-bottom: 120px !important; /* Platz für Input-Bar */
+    padding-bottom: 120px !important; 
 }
 
-/* === CHAT BUBBLES === */
+/* === ChatGPT Bubble-Style === */
 .chatbot .message.user {
-    background-color: #ffffff !important;
-    color: #000 !important;
-    border-radius: 12px !important;
-    padding: 12px 14px !important;
+    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: #000 !important;
-    border-radius: 12px !important;
-    padding: 12px 14px !important;
+    color: black !important;
+    border-radius: 14px !important;
+    padding: 12px 16px !important;
+    margin-bottom: 10px !important;
     max-width: 85% !important;
 }
 
-/* === INPUT BAR FIXED AT BOTTOM LIKE CHATGPT === */
+/* === Input Bar giống ChatGPT === */
 #input-bar {
     position: fixed !important;
     bottom: 0;
     left: 0;
     right: 0;
-    background: #ffffff;
+    background: white;
     padding: 14px 20px;
-    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
     display: flex;
-    gap: 10px;
+    gap: 12px;
     align-items: center;
     z-index: 999;
 }
 
 #input-text textarea {
-    min-height: 50px !important;
-    resize: none;
+    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: 50px !important;
+    height: 52px !important;
 }
 
-/* Microphone button round */
+/* Microphone Button Rund */
 .mic-btn button {
     border-radius: 50% !important;
-    width: 50px !important;
-    height: 50px !important;
+    width: 52px !important;
+    height: 52px !important;
 }
+
+</style>
 """
 
 
-with gr.Blocks(css=CUSTOM_CSS, title="Prüfungsrechts-Chatbot") as demo:
+# =====================================================
+# UI – Gradio Blocks
+# =====================================================
+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(
-        "<h1 style='text-align:center;'>🧑‍⚖️ Prüfungsrechts-Chatbot</h1>",
-    )
-    gr.Markdown(
-        "<p style='text-align:center;'>Fragen zur Prüfungsordnung & zum Hochschulgesetz NRW – wie ChatGPT, aber spezialisiert.</p>"
+        "<p style='text-align:center;'>Ein Chatbot speziell für Prüfungsordnung & Hochschulgesetz NRW – mit Spracheingabe wie ChatGPT.</p>"
     )
 
-    # CHAT WINDOW (groß, wie ChatGPT)
     chatbot = gr.Chatbot(
         label="Chat",
         elem_classes=["chatbot"],
@@ -180,22 +197,18 @@ with gr.Blocks(css=CUSTOM_CSS, title="Prüfungsrechts-Chatbot") as demo:
         show_label=False,
     )
 
-    voice_out = gr.Audio(
-        label="Vorgelesene Antwort",
-        type="numpy",
-        interactive=False,
-        visible=False,
-    )
+    voice_out = gr.Audio(type="numpy", visible=False)
 
-    # FIXED INPUT BAR = CHATGPT
+    # === ChatGPT Input Bar ===
     with gr.Row(elem_id="input-bar"):
         chat_text = gr.Textbox(
-            placeholder="Frag etwas oder nutze das Mikrofon…",
+            placeholder="Frage eingeben oder Mikrofon benutzen…",
             label=None,
-            lines=1,
             elem_id="input-text",
+            lines=1,
             scale=10,
         )
+
         chat_audio = gr.Audio(
             sources=["microphone"],
             type="filepath",
@@ -203,9 +216,10 @@ with gr.Blocks(css=CUSTOM_CSS, title="Prüfungsrechts-Chatbot") as demo:
             elem_classes=["mic-btn"],
             scale=1,
         )
+
         send_btn = gr.Button("Senden", elem_classes=["send-btn"], scale=2)
 
-    # Input logic
+    # Events – Text + Audio
     chat_text.submit(
         chat_fn,
         [chat_text, chat_audio, chatbot],
@@ -222,19 +236,25 @@ with gr.Blocks(css=CUSTOM_CSS, title="Prüfungsrechts-Chatbot") as demo:
         [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])
+    # Antwort wiederholen
+    gr.Button("🔁 Antwort erneut vorlesen").click(
+        read_last_answer, [chatbot], [voice_out]
+    )
 
-    # Quellen & Dokumente unten
+    # Quellen-Accordion
     with gr.Accordion("📄 Quellen & Dokumente", open=False):
-        gr.Markdown("### Prüfungsordnung")
+        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"[Viewer öffnen]({hg_url})")
+            gr.Markdown(f"[Im Viewer öffnen]({hg_url})")
         else:
-            gr.Markdown("Viewer nicht verfügbar.")
+            gr.Markdown("Kein Viewer verfügbar.")
+
 
+# =====================================================
+# Start
+# =====================================================
 if __name__ == "__main__":
     demo.queue().launch(ssr_mode=False, show_error=True)