Upload 18 files

Upload Calm.i Chatbot Update

.gitattributes

@@ -0,0 +1,4 @@
+assets/background_image/hintergrund.jpg filter=lfs diff=lfs merge=lfs -text
+assets/home_screen/home_screen.png filter=lfs diff=lfs merge=lfs -text
+assets/home_screen/home_screen2.png filter=lfs diff=lfs merge=lfs -text
+assets/home_screen/home_screen3.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,13 @@
+---
+title: Calm.i
+emoji: 🏢
+colorFrom: purple
+colorTo: blue
+sdk: gradio
+sdk_version: 6.1.0
+app_file: app.py
+pinned: false
+short_description: chatbot for stress - sleep and panicmanagement
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,1743 @@
+import os
+import time
+import gradio as gr
+from openai import OpenAI
+import PyPDF2
+import chromadb
+from chromadb.utils import embedding_functions
+import json
+from concurrent.futures import ThreadPoolExecutor
+
+from theme import CustomTheme
+
+# Konfiguration
+CONTEXT_SIZE = 30
+CHUNK_SIZE = 100
+CHUNK_OVERLAP = 10
+
+# OpenAI Client initialisieren
+client = OpenAI(api_key=os.environ.get("OPENAI_API_KEY"))
+
+# ChromaDB initialisieren
+chroma_client = chromadb.PersistentClient(path="./chroma_db")
+openai_ef = embedding_functions.OpenAIEmbeddingFunction(
+    api_key=os.environ.get("OPENAI_API_KEY"),
+    model_name="text-embedding-3-small"
+)
+
+# Globale Variablen für personalisierte Inhalte
+user_profile = {}
+personalized_content = {
+    "schlafplan": "",
+    "mediensammlung": "",
+    "timemanagement": ""
+}
+
+
+def chunk_text(text, chunk_size=CHUNK_SIZE, overlap=CHUNK_OVERLAP):
+    """Teilt Text in überlappende Chunks"""
+    chunks = []
+    start = 0
+    while start < len(text):
+        end = start + chunk_size
+        chunk = text[start:end]
+        if chunk.strip():
+            chunks.append(chunk)
+        start = end - overlap
+    return chunks
+
+
+def load_documents_to_vectordb(path="./stress/"):
+    """Lädt Dokumente und speichert sie in ChromaDB"""
+    try:
+        chroma_client.delete_collection(name="documents")
+    except:
+        pass
+    
+    collection = chroma_client.create_collection(
+        name="documents",
+        embedding_function=openai_ef
+    )
+    
+    doc_id = 0
+    
+    for filename in os.listdir(path):
+        filepath = os.path.join(path, filename)
+        
+        if os.path.isdir(filepath):
+            continue
+        
+        print(f"Verarbeite: {filename}")
+        
+        try:
+            text = ""
+            
+            if filename.endswith('.pdf'):
+                with open(filepath, 'rb') as f:
+                    pdf_reader = PyPDF2.PdfReader(f)
+                    for page_num, page in enumerate(pdf_reader.pages, 1):
+                        page_text = page.extract_text()
+                        if page_text.strip():
+                            page_chunks = chunk_text(page_text)
+                            
+                            for i, chunk in enumerate(page_chunks):
+                                collection.add(
+                                    documents=[chunk],
+                                    metadatas=[{
+                                        "filename": filename,
+                                        "page": page_num,
+                                        "chunk_id": i,
+                                        "total_chunks": len(page_chunks),
+                                        "source_type": "pdf"
+                                    }],
+                                    ids=[f"doc_{doc_id}"]
+                                )
+                                doc_id += 1
+                            
+                    print(f"  → PDF mit {len(pdf_reader.pages)} Seiten verarbeitet")
+            
+            elif filename.endswith(('.txt', '.md')):
+                with open(filepath, 'r', encoding='utf-8') as f:
+                    text = f.read()
+                
+                if text.strip():
+                    chunks = chunk_text(text)
+                    
+                    for i, chunk in enumerate(chunks):
+                        collection.add(
+                            documents=[chunk],
+                            metadatas=[{
+                                "filename": filename,
+                                "page": "N/A",
+                                "chunk_id": i,
+                                "total_chunks": len(chunks),
+                                "source_type": "text"
+                            }],
+                            ids=[f"doc_{doc_id}"]
+                        )
+                        doc_id += 1
+                    
+                    print(f"  → {len(chunks)} Chunks erstellt")
+                    
+        except Exception as e:
+            print(f"Fehler beim Laden von {filename}: {e}")
+    
+    print(f"\nGesamt: {doc_id} Chunks in VectorDB gespeichert")
+    return collection
+
+
+def get_relevant_context(query, collection, n_results=CONTEXT_SIZE):
+    """Sucht die relevantesten Dokument-Chunks für eine Anfrage"""
+    results = collection.query(
+        query_texts=[query],
+        n_results=n_results
+    )
+    
+    context = ""
+    if results['documents']:
+        for i, (doc, metadata) in enumerate(zip(results['documents'][0], results['metadatas'][0])):
+            if metadata.get('page'):
+                source_info = f"{metadata['filename']}, Seite {metadata['page']}"
+            else:
+                source_info = f"{metadata['filename']}"
+            
+            context += f"\n--- Quelle {i+1}: {source_info} (Chunk {metadata['chunk_id']+1}/{metadata['total_chunks']}) ---\n"
+            context += doc + "\n"
+    
+    return context
+
+
+def generate_personalized_content(user_info, content_type, schlafplan_context="", user_wunsch=""):
+    """Generiert personalisierten Content basierend auf Nutzerprofil"""
+
+    # Basis-Kontext für konsistente Zeiten
+    schlafplan_referenz = ""
+    if schlafplan_context:
+        schlafplan_referenz = f"""
+
+WICHTIG - Verwende exakt diese Schlafenszeiten aus dem bereits erstellten Schlafplan:
+{schlafplan_context}
+
+Alle Zeitangaben müssen mit diesen Schlafenszeiten übereinstimmen!
+"""
+
+    # Wunsch-Kontext wenn User Änderungen möchte
+    wunsch_kontext = ""
+    if user_wunsch:
+        wunsch_kontext = f"""
+
+WICHTIG - ÄNDERUNGSWUNSCH:
+Der Nutzer möchte folgende Änderung: {user_wunsch}
+Berücksichtige diesen Wunsch bei der Erstellung und passe den Plan entsprechend an!
+"""
+
+    prompts = {
+        "schlafplan": f"""Erstelle einen personalisierten Schlafplan basierend auf folgenden Informationen:
+
+Nutzerprofil:
+{json.dumps(user_info, indent=2, ensure_ascii=False)}
+{wunsch_kontext}
+
+Erstelle einen konkreten, umsetzbaren Schlafplan mit:
+1. Individuellen Schlafenszeiten basierend auf dem Chronotyp (z.B. "Schlafenszeit: 22:30 Uhr, Aufstehzeit: 6:30 Uhr")
+2. Spezifischen Abendroutinen
+3. Angepassten Tipps für die genannten Schlafprobleme
+4. Konkreten Empfehlungen für die persönliche Situation
+
+WICHTIG: Nenne die exakten Uhrzeiten für Schlafenszeit und Aufstehzeit klar und deutlich am Anfang!
+
+Formatiere die Antwort in Markdown mit klarer Struktur und praktischen Beispielen.""",
+
+        "mediensammlung": f"""Erstelle eine personalisierte Medien und Tools basierend auf:
+
+Nutzerprofil:
+{json.dumps(user_info, indent=2, ensure_ascii=False)}
+{schlafplan_referenz}
+{wunsch_kontext}
+
+Empfehle:
+1. Spezifische Atemübungen für die genannten Probleme
+2. Passende Musik-Playlists und Genres
+3. Geeignete Meditations-Apps und -Techniken
+4. Konkrete Videos/Podcasts mit Links (falls möglich)
+5. Individuell angepasste Entspannungstechniken
+6. Buchempfehlungen zu Stressbewältigung, Achtsamkeit, Schlaf oder den genannten Themen (mit Autor und kurzer Beschreibung warum das Buch passt)
+
+Formatiere in Markdown mit praktischen Links und Zeitangaben.""",
+
+        "timemanagement": f"""Erstelle einen personalisierten Time-Management-Plan:
+
+Nutzerprofil:
+{json.dumps(user_info, indent=2, ensure_ascii=False)}
+{schlafplan_referenz}
+{wunsch_kontext}
+
+Entwickle:
+1. **Tagesplan als Markdown-Tabelle** mit folgender Struktur:
+   | Uhrzeit | Tätigkeit | Hinweise |
+   |---------|-----------|----------|
+   (Fülle mit konkreten Zeiten vom Aufstehen bis Schlafenszeit basierend auf dem Schlafplan)
+
+2. Priorisierungssystem für die persönliche Situation
+3. Konkrete Techniken gegen Prokrastination
+4. Pausen- und Energiemanagement-Plan
+5. Realistische Ziele und Tracking-Methoden
+
+WICHTIG:
+- Der Tagesplan muss mit den Schlafenszeiten aus dem Schlafplan übereinstimmen!
+- Die Tabelle MUSS in Markdown-Format sein mit | als Trennzeichen
+
+Formatiere in Markdown mit der Tabelle am Anfang und den weiteren Tipps darunter."""
+    }
+
+    try:
+        response = client.chat.completions.create(
+            model="gpt-4o-mini",
+            messages=[
+                {"role": "system", "content": "Du bist ein Experte für personalisierte Selbsthilfe-Pläne. Erstelle praktische, umsetzbare und wissenschaftlich fundierte Empfehlungen."},
+                {"role": "user", "content": prompts[content_type]}
+            ],
+            temperature=0.7,
+            max_tokens=2000
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        print(f"Fehler bei Personalisierung: {e}")
+        return "Personalisierung konnte nicht erstellt werden. Bitte versuche es später erneut."
+
+
+def collect_user_info(message, history):
+    """Sammelt Nutzerinformationen für Personalisierung"""
+    global user_profile, personalized_content, logo_inline_html
+
+    # Fragen-Flow
+    questions = [
+        "Hallo! Ich bin calm.i\n\nUm dir die bestmögliche Unterstützung zu bieten, würde ich dich gerne besser kennenlernen. Das dauert nur 2-3 Minuten.\n\n**Frage 1/7:** Wie heißt du? (Oder wie möchtest du genannt werden?)",
+        
+        "**Frage 2/7:** Bist du eher ein Morgenmensch oder Nachtmensch?\n\n(Wann fühlst du dich am produktivsten?)",
+        
+        "**Frage 3/7:** Wie sieht dein aktueller Schlaf aus?\n\n- Wie viele Stunden schläfst du durchschnittlich?\n- Hast du Einschlaf- oder Durchschlafprobleme?",
+        
+        "**Frage 4/7:** Was sind deine größten Stressquellen im Alltag?\n\n(z.B. Arbeit, Studium, Familie, Gesundheit...)",
+        
+        "**Frage 5/7:** Hast du bereits Erfahrungen mit Entspannungstechniken?\n\n(z.B. Meditation, Atemübungen, Progressive Muskelentspannung...)",
+        
+        "**Frage 6/7:** Wie viel Zeit hast du täglich für Selbstfürsorge?\n\n(Realistisch betrachtet - 10 Min, 30 Min, 1 Stunde?)",
+        
+        "**Frage 7/7:** Gibt es spezielle Themen, bei denen du Unterstützung brauchst?\n\n(z.B. Zeitmanagement, Schlafprobleme, Panikattacken, Prüfungsangst...)"
+    ]
+    
+    # Initialisierung beim ersten Aufruf (User sagt "ja" oder ähnliches)
+    if 'question_count' not in user_profile:
+        message_lower = message.lower().strip()
+        # Prüfe ob Nutzer den Test machen möchte
+        if any(word in message_lower for word in ['ja', 'los', 'geht', 'gerne', 'okay', 'ok', 'klar', 'start']):
+            user_profile['question_count'] = 0
+            user_profile['answers'] = []
+            return questions[0]  # Starte mit Frage 1/7 (Name)
+        # Prüfe ob Nutzer den Test überspringen möchte
+        elif any(word in message_lower for word in ['nicht', 'später', 'nein', 'skip', 'überspringen']):
+            user_profile['personalization_done'] = True
+            user_profile['test_skipped'] = True
+            user_profile['question_count'] = -1  # Markiere als übersprungen
+            user_profile['answers'] = []
+            return f"Kein Problem! Du kannst den Test jederzeit später machen, indem du mich einfach darum bittest.\n\nWie kann ich dir heute helfen?"
+        else:
+            # Unklare Antwort - frage nochmal
+            user_profile['question_count'] = -1  # Setze auf -1 damit wir wissen dass gefragt wurde
+            user_profile['answers'] = []
+            return f"Möchtest du den kurzen Fragebogen jetzt ausfüllen?\n\nAntworte einfach mit **\"Ja\"** um zu starten oder **\"Jetzt nicht\"** um direkt zu chatten."
+
+    # Warte auf Entscheidung für Test (wenn unklare Antwort beim ersten Mal)
+    if user_profile['question_count'] == -1:
+        message_lower = message.lower().strip()
+        # Prüfe ob Nutzer den Test machen möchte
+        if any(word in message_lower for word in ['ja', 'los', 'geht', 'gerne', 'okay', 'ok', 'klar', 'start', 'test']):
+            user_profile['question_count'] = 0
+            return questions[0]  # Starte mit Frage 1/7 (Name)
+        # Prüfe ob Nutzer den Test überspringen möchte
+        elif any(word in message_lower for word in ['nicht', 'später', 'nein', 'skip', 'überspringen']):
+            user_profile['personalization_done'] = True
+            user_profile['test_skipped'] = True
+            return f"Kein Problem! Du kannst den Test jederzeit später machen, indem du mich einfach darum bittest.\n\nWie kann ich dir heute helfen?"
+        else:
+            # Unklare Antwort - frage nochmal
+            return f"Möchtest du den kurzen Fragebogen jetzt ausfüllen?\n\nAntworte einfach mit **\"Ja\"** um zu starten oder **\"Jetzt nicht\"** um direkt zu chatten."
+
+    # Speichere Antwort (nur wenn Test läuft)
+    if user_profile['question_count'] >= 0 and user_profile['question_count'] < len(questions):
+        user_profile['answers'].append(message)
+    
+    # Nächste Frage oder Abschluss
+    user_profile['question_count'] += 1
+    
+    if user_profile['question_count'] < len(questions):
+        return questions[user_profile['question_count']]
+    elif user_profile['question_count'] == len(questions):
+        # Alle Fragen beantwortet - generiere personalisierten Content DIREKT
+        user_info = {
+            "name": user_profile['answers'][0],
+            "chronotyp": user_profile['answers'][1],
+            "schlaf": user_profile['answers'][2],
+            "stressquellen": user_profile['answers'][3],
+            "erfahrungen": user_profile['answers'][4],
+            "zeit": user_profile['answers'][5],
+            "themen": user_profile['answers'][6]
+        }
+
+        # Generiere Schlafplan ZUERST (als Basis für konsistente Zeiten)
+        print("Generiere personalisierten Schlafplan...")
+        personalized_content["schlafplan"] = generate_personalized_content(user_info, "schlafplan")
+
+        # Dann Medien und Tools und Time Management PARALLEL mit Schlafplan-Kontext
+        print("Generiere Medien und Tools und Time Management parallel...")
+        with ThreadPoolExecutor(max_workers=2) as executor:
+            future_medien = executor.submit(generate_personalized_content, user_info, "mediensammlung", personalized_content["schlafplan"])
+            future_time = executor.submit(generate_personalized_content, user_info, "timemanagement", personalized_content["schlafplan"])
+
+            personalized_content["mediensammlung"] = future_medien.result()
+            personalized_content["timemanagement"] = future_time.result()
+
+        user_profile['personalization_done'] = True
+
+        return f"""**Fertig, {user_info['name']}!**
+
+Deine personalisierten Inhalte sind jetzt verfügbar:
+
+**Schlafplan** - Speziell für dich erstellt
+**Medien und Tools** - Angepasst an deine Bedürfnisse
+**Time Management** - Passend zu deinem Tagesrhythmus
+
+**Schau sie dir in den entsprechenden Tabs an!**
+
+Wie kann ich dir jetzt helfen?"""
+    else:
+        # Normaler Chat nach Personalisierung
+        return None  # Signal für normalen Chat
+
+
+def response(message, history):
+    """Generiert eine Antwort mit OpenAI Streaming und RAG"""
+    global user_profile
+
+    print(f"\n=== RESPONSE CALLED ===")
+    print(f"Message: {message}")
+    print(f"Question count: {user_profile.get('question_count', 'not set')}")
+    print(f"Personalization done: {user_profile.get('personalization_done', 'not set')}")
+
+    # Standard Tab-Werte (keine Änderung)
+    tab_unchanged = gr.update()
+
+    # Flag um AI-Aufruf zu verhindern
+    skip_ai = False
+
+    # Prüfe ob Personalisierung läuft
+    if 'personalization_done' not in user_profile or not user_profile['personalization_done']:
+        personalization_response = collect_user_info(message, history)
+        print(f"Personalization response: {personalization_response[:100] if personalization_response else 'None'}...")
+        if personalization_response:
+            skip_ai = True
+            # Nach der 7. Frage: Aktualisiere Tabs automatisch
+            if personalized_content.get("schlafplan"):
+                schlafplan_text = f'<div class="resource-content">\n\n{personalized_content["schlafplan"]}\n\n</div>'
+                medien_text = f'<div class="resource-content">\n\n{personalized_content["mediensammlung"]}\n\n</div>'
+                time_text = f'<div class="resource-content">\n\n{personalized_content["timemanagement"]}\n\n</div>'
+                yield personalization_response, schlafplan_text, medien_text, time_text
+                return
+            else:
+                yield personalization_response, tab_unchanged, tab_unchanged, tab_unchanged
+                return
+
+    # Normaler Chat-Modus
+    message_lower = message.lower()
+
+    # Prüfe ob User den Test später machen möchte (nur wenn noch nicht gemacht)
+    if user_profile.get('test_skipped') and any(word in message_lower for word in ['test', 'fragebogen', 'personalisier', 'fragen', 'profil']):
+        # Reset für Test - setze question_count zurück aber nicht auf 0 (sonst wird message als Antwort gespeichert)
+        user_profile.clear()  # Lösche alles
+        user_profile['question_count'] = 0
+        user_profile['answers'] = []
+        user_profile['personalization_done'] = False
+
+        # Zeige die erste Frage (gleicher Test wie beim Start!)
+        first_q = "Hallo! Ich bin calm.i\n\nUm dir die bestmögliche Unterstützung zu bieten, würde ich dich gerne besser kennenlernen. Das dauert nur 2-3 Minuten.\n\n**Frage 1/7:** Wie heißt du? (Oder wie möchtest du genannt werden?)"
+        yield first_q, tab_unchanged, tab_unchanged, tab_unchanged
+        return
+
+    # Prüfe ob User Test wiederholen möchte (nachdem Test schon gemacht wurde)
+    if user_profile.get('personalization_done') and not user_profile.get('test_skipped'):
+        if any(word in message_lower for word in ['test wiederholen', 'fragebogen wiederholen', 'neu starten', 'test nochmal', 'von vorne']):
+            # Reset für Test-Wiederholung
+            user_profile.clear()  # Lösche alles
+            user_profile['question_count'] = 0
+            user_profile['answers'] = []
+            user_profile['personalization_done'] = False
+
+            # Zeige die erste Frage (gleicher Test wie beim Start!)
+            first_q = "Hallo! Ich bin calm.i\n\nUm dir die bestmögliche Unterstützung zu bieten, würde ich dich gerne besser kennenlernen. Das dauert nur 2-3 Minuten.\n\n**Frage 1/7:** Wie heißt du? (Oder wie möchtest du genannt werden?)"
+            yield first_q, tab_unchanged, tab_unchanged, tab_unchanged
+            return
+
+    # Prüfe ob User Anpassungen an personalisierten Inhalten möchte
+    if user_profile.get('personalization_done') and user_profile.get('answers'):
+        # Erkenne welche Art von Änderung (auch ohne explizite Plan-Nennung)
+        mentions_name = any(word in message_lower for word in ['name', 'heiße', 'heisse', 'genannt', 'nenne'])
+        mentions_chronotyp = any(word in message_lower for word in ['morgenmensch', 'nachtmensch', 'eule', 'lerche', 'chronotyp'])
+        mentions_sleep = any(word in message_lower for word in ['schlaf', 'stunden', 'schlafenszeit', 'aufstehzeit', 'einschlafen', 'durchschlafen'])
+        mentions_stress = any(word in message_lower for word in ['stress', 'stressquell', 'arbeit', 'familie', 'studium'])
+        mentions_time_available = any(word in message_lower for word in ['verfügbar', 'minuten täglich', 'zeit für'])
+        mentions_topics = any(word in message_lower for word in ['thema', 'themen', 'fokus', 'unterstützung', 'hilfe bei'])
+
+        # Erkenne explizite Plan-Nennung
+        mentions_schlafplan = any(word in message_lower for word in ['schlafplan'])
+        mentions_medien = any(word in message_lower for word in ['mediensammlung', 'medien', 'musik', 'meditation', 'buch', 'bücher'])
+        mentions_timeplan = any(word in message_lower for word in ['time management', 'zeitmanagement', 'tagesplan'])
+
+        # Erkenne ob es eine Änderungsanfrage ist (erweitert!)
+        is_update_request = any(word in message_lower for word in ['änder', 'anpass', 'aktualisier', 'modifizier', 'neu', 'anders', 'update', 'jetzt', 'meinte', 'eigentlich', 'korrektur', 'falsch'])
+
+        # ODER: Wenn User direkt etwas über sich aussagt (z.B. "mein name ist", "ich bin")
+        is_direct_statement = any(phrase in message_lower for phrase in ['mein name ist', 'ich heiße', 'ich heisse', 'nenne mich', 'ich bin jetzt', 'ich schlafe jetzt'])
+
+        # Wenn eine Änderung erkannt wird
+        if (is_update_request or is_direct_statement) and (mentions_name or mentions_chronotyp or mentions_sleep or mentions_stress or mentions_time_available or mentions_topics or mentions_schlafplan or mentions_medien or mentions_timeplan):
+            # Baue user_info mit aktuellen Daten
+            user_info = {
+                "name": user_profile['answers'][0],
+                "chronotyp": user_profile['answers'][1],
+                "schlaf": user_profile['answers'][2],
+                "stressquellen": user_profile['answers'][3],
+                "erfahrungen": user_profile['answers'][4],
+                "zeit": user_profile['answers'][5],
+                "themen": user_profile['answers'][6]
+            }
+
+            # Entscheide welche Pläne aktualisiert werden müssen
+            update_schlafplan = False
+            update_medien = False
+            update_time = False
+
+            # Wenn spezifischer Plan genannt wird
+            if mentions_schlafplan:
+                update_schlafplan = True
+            elif mentions_medien:
+                update_medien = True
+            elif mentions_timeplan:
+                update_time = True
+            else:
+                # Automatische Zuordnung basierend auf Änderungstyp
+                if mentions_name:
+                    # Name betrifft alle Pläne
+                    update_schlafplan = update_medien = update_time = True
+                elif mentions_chronotyp or mentions_sleep:
+                    # Chronotyp/Schlaf betrifft Schlafplan und Time Management
+                    update_schlafplan = True
+                    update_time = True
+                elif mentions_stress or mentions_topics:
+                    # Stress/Themen betreffen Medien und Tools
+                    update_medien = True
+                elif mentions_time_available:
+                    # Verfügbare Zeit betrifft Time Management
+                    update_time = True
+
+            # Aktualisiere die betroffenen Pläne
+            updated_plans = []
+
+            print(f"\n=== UPDATING PLANS ===")
+            print(f"Update Schlafplan: {update_schlafplan}")
+            print(f"Update Medien: {update_medien}")
+            print(f"Update Time: {update_time}")
+            print(f"User message: {message}")
+
+            # Zeige welche Pläne aktualisiert werden
+            plans_to_update = []
+            if update_schlafplan:
+                plans_to_update.append("Schlafplan")
+            if update_medien:
+                plans_to_update.append("Medien und Tools")
+            if update_time:
+                plans_to_update.append("Time Management")
+
+            if len(plans_to_update) > 1:
+                plans_list = ", ".join(plans_to_update)
+                yield f"Ich aktualisiere: **{plans_list}**. Das kann einen Moment dauern...", tab_unchanged, tab_unchanged, tab_unchanged
+            elif len(plans_to_update) == 1:
+                yield f"Ich aktualisiere deinen **{plans_to_update[0]}**...", tab_unchanged, tab_unchanged, tab_unchanged
+
+            if update_schlafplan:
+                print("Generiere Schlafplan...")
+                new_schlafplan = generate_personalized_content(user_info, "schlafplan", "", message)
+                print(f"Schlafplan generiert! Länge: {len(new_schlafplan)} Zeichen")
+                personalized_content["schlafplan"] = new_schlafplan
+                schlafplan_text = f'<div class="resource-content">\n\n{new_schlafplan}\n\n</div>'
+                updated_plans.append("Schlafplan")
+                # Zeige Fortschritt
+                if update_medien or update_time:
+                    yield f"✓ Schlafplan fertig! Arbeite weiter...", schlafplan_text, tab_unchanged, tab_unchanged
+            else:
+                schlafplan_text = tab_unchanged
+
+            if update_medien:
+                print("Generiere Medien und Tools...")
+                new_medien = generate_personalized_content(user_info, "mediensammlung", personalized_content.get("schlafplan", ""), message)
+                print(f"Medien und Tools generiert! Länge: {len(new_medien)} Zeichen")
+                personalized_content["mediensammlung"] = new_medien
+                medien_text = f'<div class="resource-content">\n\n{new_medien}\n\n</div>'
+                updated_plans.append("Medien und Tools")
+                # Zeige Fortschritt
+                if update_time:
+                    yield f"✓ Medien und Tools fertig! Arbeite weiter...", schlafplan_text, medien_text, tab_unchanged
+            else:
+                medien_text = tab_unchanged
+
+            if update_time:
+                print("Generiere Time Management...")
+                new_time = generate_personalized_content(user_info, "timemanagement", personalized_content.get("schlafplan", ""), message)
+                print(f"Time Management generiert! Länge: {len(new_time)} Zeichen")
+                personalized_content["timemanagement"] = new_time
+                time_text = f'<div class="resource-content">\n\n{new_time}\n\n</div>'
+                updated_plans.append("Time Management")
+            else:
+                time_text = tab_unchanged
+
+            # Ausgabe
+            if len(updated_plans) == 1:
+                response_msg = f"Dein **{updated_plans[0]}** wurde aktualisiert! Schau ihn dir im entsprechenden Tab an."
+            elif len(updated_plans) > 1:
+                plans_str = ", ".join(updated_plans[:-1]) + f" und {updated_plans[-1]}"
+                response_msg = f"Deine Pläne (**{plans_str}**) wurden aktualisiert! Schau sie dir in den entsprechenden Tabs an."
+            else:
+                response_msg = "Ich habe deine Anfrage verstanden, aber konnte keinen Plan zuordnen. Kannst du präziser sagen, welchen Plan ich anpassen soll?"
+
+            yield response_msg, schlafplan_text, medien_text, time_text
+            return
+
+    context = get_relevant_context(message, collection, n_results=CONTEXT_SIZE)
+    
+    # Füge Nutzerprofil zum Kontext hinzu
+    user_context = ""
+    if user_profile.get('answers'):
+        user_context = f"""
+
+NUTZERPROFIL:
+- Name: {user_profile['answers'][0]}
+- Chronotyp: {user_profile['answers'][1]}
+- Schlaf: {user_profile['answers'][2]}
+- Stressquellen: {user_profile['answers'][3]}
+- Erfahrungen: {user_profile['answers'][4]}
+- Verfügbare Zeit: {user_profile['answers'][5]}
+- Fokusthemen: {user_profile['answers'][6]}
+"""
+    
+    system_prompt = f"""Du bist calm.i, ein einfühlsamer Chatbot für Stress- und Selbstfürsorge.
+
+KONTEXT:
+---------------------
+{context}
+---------------------
+{user_context}
+
+KRITISCH - HÖCHSTE PRIORITÄT:
+Falls es sich um einen AKUTEN NOTFALL wie eine Panikattacke handelt:
+- Antworte SOFORT mit konkreten Lösungsvorschlägen und begrüße den Nutzer NICHT
+- KEINE einleitende Empathie
+- verweise auf die Notfallnummern, 
+- MAXIMAL 3 kurze, direkte Handlungsanweisungen
+- Erst danach kannst du einfühlsam nachfragen
+- Falls es sich um ein Thema handelt, welches sich nicht direkt
+um Stress, Schlaf, Panik oder andere mentale Probleme handelt:
+erzähle, dass du für dieses Thema nicht zuständig bist
+
+DEINE ROLLE
+- Du kennst den Nutzer bereits durch das Profil
+- Beziehe dich auf seine spezifische Situation
+- Nutze seinen Namen und seine Präferenzen
+- Du bist eine ruhige, verständnisvolle Begleitung
+
+KLARE GRENZEN
+- Du bist KEIN Ersatz für Therapie oder ärztliche Behandlung
+- Bei Lebensgefahr: Telefonseelsorge 0800 1110111, Notruf 112
+
+SPRACHE & STIL
+- Deutsch, Du-Form
+- verwende empathische Ausdrücke, welche variieren
+- Warm, ruhig, wertschätzend
+- Kurze, klare Sätze
+- Validiere Gefühle
+"""
+    
+    # WICHTIG: Wenn Personalisierung läuft, AI NICHT aufrufen!
+    if 'personalization_done' not in user_profile or not user_profile['personalization_done']:
+        print("ERROR: AI sollte nicht aufgerufen werden während Personalisierung läuft!")
+        return
+
+    messages = [{"role": "system", "content": system_prompt}]
+
+    for msg in history:
+        if msg["role"] == "user":
+            messages.append({"role": "user", "content": msg["content"]})
+        elif msg["role"] == "assistant":
+            messages.append({"role": "assistant", "content": msg["content"]})
+
+    messages.append({"role": "user", "content": message})
+
+    stream = client.chat.completions.create(
+        model="gpt-4o-mini",
+        messages=messages,
+        temperature=0.1,
+        stream=True,
+        stream_options={"include_usage": True}
+    )
+    
+    answer = ""
+    
+    for chunk in stream:
+        if hasattr(chunk, 'usage') and chunk.usage:
+            print(f"\nToken-Usage: {chunk.usage.total_tokens}")
+
+        if chunk.choices and len(chunk.choices) > 0 and chunk.choices[0].delta.content:
+            text = chunk.choices[0].delta.content
+            time.sleep(0.05)
+            answer += text
+            yield answer, tab_unchanged, tab_unchanged, tab_unchanged
+
+
+# VectorDB beim Start initialisieren
+print("Initialisiere VectorDB...")
+try:
+    collection = chroma_client.get_collection(
+        name="documents",
+        embedding_function=openai_ef
+    )
+    print(f"VectorDB geladen mit {collection.count()} Chunks")
+except:
+    print("Erstelle neue VectorDB und lade Dokumente...")
+    collection = load_documents_to_vectordb()
+
+
+theme = CustomTheme()
+
+def main():
+    import base64
+    
+    background_image_base64 = ""
+    try:
+        with open("./assets/background_image/hintergrund.jpg", "rb") as img_file:
+            background_image_base64 = base64.b64encode(img_file.read()).decode('utf-8')
+        print("Hintergrundbild geladen")
+    except FileNotFoundError:
+        print("Warnung: hintergrund.jpg nicht gefunden")
+
+    home_screen_base64 = ""
+    try:
+        with open("./assets/home_screen/home_screen.png", "rb") as img_file:
+            home_screen_base64 = base64.b64encode(img_file.read()).decode('utf-8')
+        print("Home-Screen Bild geladen")
+    except FileNotFoundError:
+        print("Warnung: home_screen.png nicht gefunden")
+
+    logo_base64 = ""
+    try:
+        with open("./assets/logo/logo.png", "rb") as logo_file:
+            logo_base64 = base64.b64encode(logo_file.read()).decode('utf-8')
+        print("Logo geladen")
+    except FileNotFoundError:
+        print("Warnung: logo.png nicht gefunden")
+
+    # Erstelle Logo-HTML für Inline-Verwendung
+    global logo_inline_html
+    logo_inline_html = f'<img src="data:image/png;base64,{logo_base64}" class="logo-inline" alt="">' if logo_base64 else ""
+
+    # Lade Tab-Icons
+    tab_icons = {}
+    icon_names = ["home", "chat", "schlafplan", "mediensammlung", "timemanagement", "notfallplan"]
+    for icon_name in icon_names:
+        try:
+            with open(f"./assets/tab_icons/{icon_name}.png", "rb") as icon_file:
+                tab_icons[icon_name] = base64.b64encode(icon_file.read()).decode('utf-8')
+            print(f"Icon '{icon_name}' geladen")
+        except FileNotFoundError:
+            print(f"Warnung: {icon_name}.png nicht gefunden")
+            tab_icons[icon_name] = ""
+    
+    custom_css = f"""
+    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');
+    
+    [class*="gradio-container"] {{
+        background: url("data:image/jpeg;base64,{background_image_base64}") no-repeat center center fixed !important;
+        background-size: cover !important;
+    }}
+
+    /* Home-Tab: Vollbild-Bild */
+    .home-screen-container {{
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        z-index: 50 !important;
+        overflow: visible !important;
+        pointer-events: none !important;
+    }}
+
+    .home-screen-image {{
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover !important;
+        pointer-events: none !important;
+    }}
+
+    .home-chat-button {{
+        pointer-events: auto !important;
+    }}
+
+    #home {{
+        position: relative !important;
+        z-index: 1 !important;
+    }}
+
+    /* Tab-Menü über dem Bild und klickbar */
+    .tabs, [role="tablist"] {{
+        position: relative !important;
+        z-index: 100 !important;
+        pointer-events: auto !important;
+    }}
+
+    /* Home-Tab Chat-Button */
+    .home-chat-button {{
+        position: fixed !important;
+        bottom: -670px !important;
+        left: 63.5% !important;
+        transform: translateX(-50%) !important;
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        font-size: 18px !important;
+        color: #805EA4 !important;
+        background-color: #FBF8FC !important;
+        border: none !important;
+        border-radius: 15px !important;
+        padding: 15px 30px !important;
+        cursor: pointer !important;
+        z-index: 200 !important;
+        pointer-events: auto !important;
+        display: block !important;
+        visibility: visible !important;
+        transition: background-color 0.3s ease !important;
+    }}
+
+    .home-chat-button:hover {{
+        background-color: #7E5A9B !important;
+        color: #FFFFFF !important;
+    }}
+
+    footer {{
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+    }}
+    
+    .footer {{
+        display: none !important;
+    }}
+    
+    div.gradio-container footer,
+    div.gradio-container .footer,
+    [class*="footer"] {{
+        display: none !important;
+        visibility: hidden !important;
+        height: 0 !important;
+        overflow: hidden !important;
+    }}
+    
+    .gradio-container a[href*="gradio"] {{
+        display: none !important;
+    }}
+    
+    .contain a {{
+        display: none !important;
+    }}
+    
+    footer svg {{
+        display: none !important;
+    }}
+    
+    .gradio-container > div > div:last-child {{
+        display: none !important;
+    }}
+    
+    [class*="Footer"] {{
+        display: none !important;
+    }}
+    
+    .wrap.svelte-* footer {{
+        display: none !important;
+    }}
+    
+    .footer-wrapper,
+    .gradio-footer,
+    #footer,
+    [data-testid="footer"] {{
+        display: none !important;
+    }}
+
+    #logo-container {{
+        position: fixed !important;
+        top: 50px !important;
+        left: 20px !important;
+        z-index: 2000 !important;
+        background: white !important;
+        border-radius: 50% !important;
+        padding: 1px !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    }}
+    
+    #logo-container img {{
+        width: 80px !important;
+        height: 80px !important;
+        border-radius: 50% !important;
+        object-fit: cover !important;
+        display: block !important;
+    }}
+    
+    #CHATBOT {{
+        background: transparent !important;
+        backdrop-filter: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        border-radius: 25px !important;
+        margin-top: 20px !important;
+    }}
+
+    #CHATBOT .message-buttons,
+    #CHATBOT .action-buttons,
+    #CHATBOT button[title="Copy message"],
+    #CHATBOT button[title="Retry"],
+    #CHATBOT button[title="Undo"],
+    .message-row button,
+    .message .copy-button,
+    .message-buttons-row,
+    #CHATBOT .chatbot-header button,
+    .chatbot-header button,
+    [class*="chatbot"] button[aria-label],
+    button[title="Clear"],
+    button[title*="Copy"],
+    .chatbot-controls,
+    #component-* button[aria-label="Clear"],
+    #component-* button[aria-label*="Copy"],
+    .chatbot button,
+    #CHATBOT ~ * button,
+    [id^="component-"] button[aria-label] {{
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+        pointer-events: none !important;
+    }}
+    
+    .message.bot {{
+        background: #7E5A9B !important;
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        color: #F4F1F7 !important;
+        font-size: 16px !important;
+        border-radius: 25px !important;
+        padding: 15px 20px !important;
+    }}
+    .message.bot p, .message.bot span, .message.bot div, .message.bot strong, .message.bot b {{
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        color: #F4F1F7 !important;
+        font-size: 16px !important;
+    }}
+    .message.bot * {{
+        color: #F4F1F7 !important;
+    }}
+    .message.user {{
+        background: #7E5A9B !important;
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        color: #F4F1F7 !important;
+        font-size: 16px !important;
+        border-radius: 25px !important;
+        padding: 15px 20px !important;
+    }}
+    .message.user p, .message.user span, .message.user div {{
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        color: #F4F1F7 !important;
+        font-size: 16px !important;
+    }}
+    
+    textarea, input[type="text"], .input-text {{
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        color: #2F2F2F !important;
+        font-size: 16px !important;
+        border-radius: 25px !important;
+    }}
+
+    .textbox textarea {{
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        color: #2F2F2F !important;
+        font-size: 16px !important;
+        border-radius: 25px !important;
+    }}
+    
+    .avatar-container img {{
+        object-fit: cover !important;
+        width: 100% !important;
+        height: 100% !important;
+        transform: scale(1.5) !important;
+    }}
+    img.avatar-image {{
+        object-fit: cover !important;
+        width: 100% !important;
+        height: 100% !important;
+        transform: scale(1.5) !important;
+    }}
+    .message img {{
+        object-fit: cover !important;
+        width: 100% !important;
+        height: 100% !important;
+        transform: scale(1.5) !important;
+    }}
+    
+    .resource-content {{
+        background: rgba(255, 255, 255, 0.95) !important;
+        padding: 30px !important;
+        border-radius: 25px !important;
+        margin: 20px auto !important;
+        max-width: 800px !important;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+    }}
+    
+    .resource-content h1, .resource-content h2, .resource-content h3 {{
+        font-family: 'Nunito', sans-serif !important;
+        color: #411F61 !important;
+    }}
+    
+    .resource-content p, .resource-content li {{
+        font-family: 'Nunito', sans-serif !important;
+        font-size: 16px !important;
+        line-height: 1.6 !important;
+        color: #2F2F2F !important;
+    }}
+
+    /* Accordion/Dropdown Styling */
+    .crisis-dropdown {{
+        margin: 15px 0 !important;
+        border: 2px solid #7E5A9B !important;
+        border-radius: 15px !important;
+        overflow: hidden !important;
+        background: #FBF8FC !important;
+    }}
+
+    .crisis-dropdown summary {{
+        padding: 15px 20px !important;
+        font-family: 'Nunito', sans-serif !important;
+        font-weight: 700 !important;
+        font-size: 18px !important;
+        color: #411F61 !important;
+        cursor: pointer !important;
+        list-style: none !important;
+        background: #FBF8FC !important;
+        transition: background-color 0.3s ease !important;
+    }}
+
+    .crisis-dropdown summary::-webkit-details-marker {{
+        display: none !important;
+    }}
+
+    .crisis-dropdown summary::before {{
+        content: '▸' !important;
+        display: inline-block !important;
+        margin-right: 12px !important;
+        color: #7E5A9B !important;
+        font-size: 22px !important;
+        line-height: 1 !important;
+        transition: transform 0.3s ease, color 0.3s ease !important;
+        transform-origin: center !important;
+    }}
+
+    .crisis-dropdown[open] summary::before {{
+        content: '▾' !important;
+    }}
+
+    .crisis-dropdown summary:hover::before {{
+        color: #FFFFFF !important;
+    }}
+
+    .crisis-dropdown summary:hover {{
+        background: #7E5A9B !important;
+        color: #FFFFFF !important;
+    }}
+
+    .crisis-dropdown .dropdown-content {{
+        padding: 20px !important;
+        background: #FFFFFF !important;
+        border-top: 2px solid #7E5A9B !important;
+    }}
+
+    .crisis-dropdown .dropdown-content p,
+    .crisis-dropdown .dropdown-content li {{
+        margin: 8px 0 !important;
+    }}
+
+    html {{
+        overflow-y: scroll !important;
+    }}
+
+    body {{
+        overflow-y: scroll !important;
+    }}
+
+    button.primary {{
+        background: #7E5A9B !important;
+        border-color: #7E5A9B !important;
+    }}
+
+    button.primary:hover {{
+        background: #6B3FA0 !important;
+        border-color: #6B3FA0 !important;
+    }}
+
+    /* Tab-Container: Entfernt Gradio-Standard-Borders und erstellt Stacking Context */
+    .tabs {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        position: relative !important;
+    }}
+
+    [class*="tabs"] {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }}
+
+    div[role="tablist"] {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+        position: relative !important;
+    }}
+
+    .tab-nav {{
+        border-bottom: none !important;
+        box-shadow: none !important;
+    }}
+
+    [class*="tab"][class*="nav"] {{
+        border-bottom: none !important;
+        box-shadow: none !important;
+    }}
+
+    .gradio-tabs {{
+        border-bottom: none !important;
+        box-shadow: none !important;
+    }}
+
+    .tab-container {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }}
+
+    [class*="tab-container"] {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }}
+
+    /* Svelte-generierte Tab-Klassen */
+    [class*="svelte"][role="tablist"],
+    div[role="tablist"][class*="svelte"] {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }}
+
+    /* Alle Elemente im Tab-Bereich */
+    .tabs > div,
+    .tabs > div > div,
+    .gradio-tabs > div {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }}
+
+    /* Gradio Tab-Nav Wrapper */
+    .tab-nav > div,
+    [class*="tab-nav"] {{
+        border-bottom: none !important;
+        border: none !important;
+        box-shadow: none !important;
+    }}
+
+    .tabs button {{
+        border-bottom: none !important;
+        position: relative !important;
+    }}
+
+    .tabs button[aria-selected="true"] {{
+        border-bottom: none !important;
+    }}
+
+    .tabs button[aria-selected="true"]::after {{
+        content: '' !important;
+        position: absolute !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        height: 3px !important;
+        background: #7b5ea0 !important;
+        border-radius: 3px !important;
+        z-index: 2 !important;
+    }}
+    
+    * {{
+        --color-accent: #7b5ea0 !important;
+        --color-accent-soft: #6B3FA0 !important;
+    }}
+
+    #load-status {{
+        text-align: center !important;
+        padding: 10px !important;
+        font-family: 'Nunito', sans-serif !important;
+        font-size: 18px !important;
+        font-weight: 700 !important;
+        color: #7E5A9B !important;
+        margin-top: 10px !important;
+    }}
+
+    /* Tab Icons */
+    .tabs button {{
+        display: flex !important;
+        align-items: center !important;
+        gap: 8px !important;
+        font-family: 'Nunito', sans-serif !important;
+        color: #7E5A9B !important;
+    }}
+
+    .tab-icon {{
+        width: 20px !important;
+        height: 20px !important;
+        display: inline-block !important;
+        margin-right: 4px !important;
+        background: transparent !important;
+        background-color: transparent !important;
+    }}
+
+    .logo-inline {{
+        width: 32px !important;
+        height: 32px !important;
+        display: inline-block !important;
+        vertical-align: text-top !important;
+        margin: 0 2px !important;
+        border-radius: 50% !important;
+    }}
+
+    #CHATBOT .logo-inline,
+    .message .logo-inline,
+    .chatbot .logo-inline {{
+        width: 16px !important;
+        height: 16px !important;
+        vertical-align: middle !important;
+        margin: 0 6px !important;
+        border: 0.5px solid white !important;
+    }}
+
+    /* Chat-Tab: Chatfenster Layout */
+    #chat {{
+        display: flex !important;
+        flex-direction: column !important;
+        height: calc(100vh - 120px) !important;
+        position: relative !important;
+    }}
+
+    /* Chatbot-Nachrichten Bereich scrollbar */
+    #CHATBOT {{
+        flex: 1 !important;
+        overflow-y: auto !important;
+        margin-bottom: 100px !important;
+        max-height: calc(100vh - 180px) !important;
+        padding-bottom: 80px !important;
+    }}
+
+    /* Chat-Nachrichten Container - mehr Platz für Nachrichten */
+    .bubble-wrap {{
+        max-height: none !important;
+        height: auto !important;
+        overflow-y: auto !important;
+        padding-bottom: 100px !important;
+    }}
+
+    [role="log"] {{
+        max-height: none !important;
+        height: auto !important;
+        overflow-y: auto !important;
+        padding-bottom: 100px !important;
+    }}
+
+    /* Eingabefeld: Entferne weißen Strich */
+    .gr-group,
+    .gr-group *,
+    .gr-group::before,
+    .gr-group::after,
+    .gr-group .styler,
+    .gr-group .styler::before,
+    .gr-group .styler::after {{
+        border-top: none !important;
+        border-color: transparent !important;
+        box-shadow: none !important;
+    }}
+
+    /* Tab-Menü: Entferne weißen Strich unter den Tabs */
+    .tabs,
+    .tabs *,
+    .tabs::before,
+    .tabs::after,
+    .tabitem,
+    .tabitem::before,
+    .tabitem::after,
+    .tab-nav,
+    .tab-nav::before,
+    .tab-nav::after,
+    .tab-nav *,
+    [role="tablist"],
+    [role="tablist"]::before,
+    [role="tablist"]::after,
+    .svelte-1p9262q,
+    .svelte-1p9262q::before,
+    .svelte-1p9262q::after,
+    .svelte-7xavid,
+    .svelte-7xavid::before,
+    .svelte-7xavid::after,
+    div[class*="svelte"]::before,
+    div[class*="svelte"]::after {{
+        border: none !important;
+        border-top: none !important;
+        border-bottom: none !important;
+        border-color: transparent !important;
+        box-shadow: none !important;
+    }}
+
+    /* Entferne alle horizontalen Linien/Striche */
+    hr, .divider, [class*="divider"], [class*="separator"] {{
+        display: none !important;
+        border: none !important;
+        background: transparent !important;
+    }}
+
+    /* Gradio Tab Container - alle Borders entfernen */
+    .gradio-container *::before,
+    .gradio-container *::after {{
+        border: none !important;
+        border-color: transparent !important;
+    }}
+
+    /* Spezifisch für Tab-Buttons */
+    button[role="tab"],
+    button[role="tab"]::before,
+    button[role="tab"]::after {{
+        border: none !important;
+        border-bottom: none !important;
+        box-shadow: none !important;
+    }}
+    """
+    
+    custom_js = f"""
+    function removeFooter() {{
+        const footers = document.querySelectorAll('footer, .footer, [class*="footer"], [class*="Footer"]');
+        footers.forEach(footer => {{
+            footer.style.display = 'none';
+            footer.style.visibility = 'hidden';
+            footer.remove();
+        }});
+
+        const gradioLinks = document.querySelectorAll('a[href*="gradio"]');
+        gradioLinks.forEach(link => {{
+            link.style.display = 'none';
+            link.remove();
+        }});
+    }}
+
+    function removeChatButtons() {{
+        const chatButtons = document.querySelectorAll(`
+            #CHATBOT button,
+            .chatbot button,
+            button[aria-label="Clear"],
+            button[aria-label*="Copy"],
+            button[title="Clear"],
+            button[title*="Copy"],
+            [id*="chatbot"] button[aria-label],
+            [id*="component-"] button[aria-label]
+        `);
+        chatButtons.forEach(btn => {{
+            if (!btn.closest('form')) {{
+                btn.style.display = 'none';
+                btn.style.visibility = 'hidden';
+                btn.style.opacity = '0';
+                btn.remove();
+            }}
+        }});
+    }}
+
+    // Home-Tab Hintergrundbild setzen
+    const homeScreenBase64 = '{home_screen_base64}';
+
+    function setHomeBackground() {{
+        // Versuche verschiedene Selektoren
+        let homeTab = document.querySelector('#home');
+
+        if (!homeTab) {{
+            // Fallback: Finde Tab-Panel mit id="home"
+            homeTab = document.querySelector('[id="home"]');
+        }}
+
+        if (homeTab && homeScreenBase64) {{
+            homeTab.style.background = 'url("data:image/png;base64,' + homeScreenBase64 + '") no-repeat center center';
+            homeTab.style.backgroundSize = 'cover';
+            homeTab.style.minHeight = 'calc(100vh - 100px)';
+            homeTab.style.position = 'relative';
+
+            // Auch den gradio-container Hintergrund für Home überschreiben
+            const container = document.querySelector('[class*="gradio-container"]');
+            const homeButton = document.querySelector('button[id*="home"]');
+
+            // Prüfe ob Home-Tab aktiv ist
+            if (homeButton && homeButton.classList.contains('selected')) {{
+                if (container) {{
+                    container.style.background = 'url("data:image/png;base64,' + homeScreenBase64 + '") no-repeat center center fixed';
+                    container.style.backgroundSize = 'cover';
+                }}
+            }}
+        }}
+
+        console.log('Home Tab gefunden:', homeTab);
+    }}
+
+    // Tab-Wechsel beobachten und Hintergrund wechseln
+    const defaultBackground = 'url("data:image/jpeg;base64,{background_image_base64}") no-repeat center center fixed';
+
+    function observeTabChanges() {{
+        const tabs = document.querySelectorAll('[role="tab"]');
+        const container = document.querySelector('[class*="gradio-container"]');
+
+        tabs.forEach(tab => {{
+            tab.addEventListener('click', () => {{
+                setTimeout(() => {{
+                    const isHomeTab = tab.textContent.includes('Home') || tab.id.includes('home');
+                    if (container) {{
+                        if (isHomeTab) {{
+                            container.style.background = 'url("data:image/png;base64,' + homeScreenBase64 + '") no-repeat center center fixed';
+                        }} else {{
+                            container.style.background = defaultBackground;
+                        }}
+                        container.style.backgroundSize = 'cover';
+                    }}
+                }}, 50);
+            }});
+        }});
+    }}
+
+    function fixChatInputPosition() {{
+        // Finde das Textarea im Chat
+        const textarea = document.querySelector('textarea[placeholder="Type a message..."]');
+        if (!textarea) return;
+
+        // Finde den nächsten Container mit class "gr-group" (das ist nur die Eingabezeile)
+        let container = textarea.closest('.gr-group');
+        if (!container) {{
+            // Fallback: gehe nur 4 Ebenen hoch (nur bis zur Eingabezeile)
+            container = textarea;
+            for (let i = 0; i < 4; i++) {{
+                if (container.parentElement) {{
+                    container = container.parentElement;
+                }}
+            }}
+        }}
+
+        // Style nur den Eingabe-Container
+        container.style.position = 'fixed';
+        container.style.bottom = '15px';
+        container.style.left = '240px';
+        container.style.right = 'auto';
+        container.style.width = 'calc(100% - 460px)';
+        container.style.background = 'transparent';
+        container.style.padding = '15px 20px';
+        container.style.zIndex = '1000';
+
+        // Mache das Textarea größer
+        textarea.style.fontSize = '16px';
+        textarea.style.padding = '12px 15px';
+        textarea.style.minHeight = '50px';
+
+        // Mache Container-Elemente transparent (aber nicht das Eingabefeld selbst)
+        const styler = container.querySelector('.styler');
+        if (styler) {{
+            styler.style.background = 'transparent';
+            styler.style.border = 'none';
+            styler.style.boxShadow = 'none';
+            styler.style.setProperty('--layout-gap', '0px');
+            styler.style.setProperty('--form-gap-width', '0px');
+        }}
+
+        const row = container.querySelector('.row');
+        if (row) {{
+            row.style.background = 'transparent';
+            row.style.border = 'none';
+            row.style.boxShadow = 'none';
+        }}
+
+        const form = container.querySelector('.form');
+        if (form) {{
+            form.style.background = 'transparent';
+            form.style.border = 'none';
+            form.style.boxShadow = 'none';
+        }}
+
+        const block = container.querySelector('.block');
+        if (block) {{
+            block.style.background = 'transparent';
+            block.style.border = 'none';
+            block.style.boxShadow = 'none';
+        }}
+
+        const label = container.querySelector('label');
+        if (label) {{
+            label.style.background = 'transparent';
+            label.style.border = 'none';
+            label.style.boxShadow = 'none';
+        }}
+
+        // Passe Chatbot-Höhe an
+        const chatbot = document.querySelector('#CHATBOT');
+        if (chatbot) {{
+            chatbot.style.maxHeight = 'calc(100vh - 80px)';
+            chatbot.style.height = 'calc(100vh - 80px)';
+            chatbot.style.marginBottom = '0px';
+            chatbot.style.paddingBottom = '120px';
+            chatbot.style.overflowY = 'auto';
+        }}
+
+        // Passe die bubble-wrap (Nachrichten-Container) Höhe an
+        const bubbleWrap = document.querySelector('.bubble-wrap');
+        if (bubbleWrap) {{
+            bubbleWrap.style.maxHeight = 'calc(100vh - 80px)';
+            bubbleWrap.style.height = 'auto';
+            bubbleWrap.style.overflowY = 'auto';
+            bubbleWrap.style.paddingBottom = '140px';
+        }}
+
+        // Passe role="log" Container an
+        const logContainer = document.querySelector('[role="log"]');
+        if (logContainer) {{
+            logContainer.style.maxHeight = 'calc(100vh - 80px)';
+            logContainer.style.paddingBottom = '140px';
+            logContainer.style.overflowY = 'auto';
+        }}
+    }}
+
+    function addTabIcons() {{
+        const tabIcons = {{
+            'Home': '{tab_icons.get("home", "")}',
+            'Chat': '{tab_icons.get("chat", "")}',
+            'Schlafplan': '{tab_icons.get("schlafplan", "")}',
+            'Medien und Tools': '{tab_icons.get("mediensammlung", "")}',
+            'Time Management': '{tab_icons.get("timemanagement", "")}',
+            'Notfallplan': '{tab_icons.get("notfallplan", "")}'
+        }};
+
+        const tabs = document.querySelectorAll('.tabs button');
+        tabs.forEach(tab => {{
+            const tabText = tab.textContent.trim();
+
+            if (tabIcons[tabText] && tabIcons[tabText] !== '' && !tab.querySelector('.tab-icon')) {{
+                const icon = document.createElement('img');
+                icon.className = 'tab-icon';
+                icon.src = 'data:image/png;base64,' + tabIcons[tabText];
+                tab.insertBefore(icon, tab.firstChild);
+            }}
+        }});
+    }}
+
+    function changeTabColors() {{
+        const tabs = document.querySelectorAll('.tabs button');
+        tabs.forEach(tab => {{
+            if (tab.hasAttribute('style')) {{
+                const style = tab.getAttribute('style');
+                const newStyle = style.replace(/border-bottom-color:\\s*rgb\\(255,\\s*165,\\s*0\\)/g, 'border-bottom-color: #411F61')
+                                      .replace(/border-bottom-color:\\s*orange/g, 'border-bottom-color: #411F61');
+                tab.setAttribute('style', newStyle);
+            }}
+
+            const observer = new MutationObserver(mutations => {{
+                mutations.forEach(mutation => {{
+                    if (mutation.attributeName === 'style') {{
+                        const style = tab.getAttribute('style');
+                        if (style && (style.includes('rgb(255, 165, 0)') || style.includes('orange'))) {{
+                            const newStyle = style.replace(/border-bottom-color:\\s*rgb\\(255,\\s*165,\\s*0\\)/g, 'border-bottom-color: #411F61')
+                                                  .replace(/border-bottom-color:\\s*orange/g, 'border-bottom-color: #411F61');
+                            tab.setAttribute('style', newStyle);
+                        }}
+                    }}
+                }});
+            }});
+
+            observer.observe(tab, {{ attributes: true, attributeFilter: ['style'] }});
+        }});
+    }}
+
+    function initCustomizations() {{
+        removeFooter();
+        removeChatButtons();
+        changeTabColors();
+        addTabIcons();
+        fixChatInputPosition();
+        setHomeBackground();
+        observeTabChanges();
+    }}
+
+    if (document.readyState === 'loading') {{
+        document.addEventListener('DOMContentLoaded', initCustomizations);
+    }} else {{
+        initCustomizations();
+    }}
+
+    setTimeout(initCustomizations, 100);
+    setTimeout(initCustomizations, 500);
+    setTimeout(initCustomizations, 1000);
+    setTimeout(initCustomizations, 2000);
+
+    const observer = new MutationObserver(() => {{
+        removeFooter();
+        removeChatButtons();
+        fixChatInputPosition();
+    }});
+
+    observer.observe(document.body, {{
+        childList: true,
+        subtree: true
+    }});
+    """
+    
+    with gr.Blocks(title="calm.i") as demo:
+        if logo_base64:
+            gr.HTML(f'<div id="logo-container"><img src="data:image/png;base64,{logo_base64}" alt="calm.i Logo"></div>')
+        
+        # Vordefinierte Markdown-Komponenten für personalisierte Inhalte (werden später gerendert)
+        schlafplan_display = gr.Markdown(value="""
+                <div class="resource-content">
+                Dein persönlicher Schlafplan
+
+                Dieser Bereich wird personalisiert, sobald du die Fragen im Chat beantwortet hast.
+
+                Gehe zum **Chat-Tab** und starte das Gespräch mit mir!
+                </div>
+                """, render=False)
+        medien_display = gr.Markdown(value="""
+                <div class="resource-content">
+                Deine persönliche Medien und Tools
+
+                Dieser Bereich wird personalisiert, sobald du die Fragen im Chat beantwortet hast.
+
+                Gehe zum **Chat-Tab** und starte das Gespräch mit mir!
+                </div>
+                """, render=False)
+        time_display = gr.Markdown(value="""
+                <div class="resource-content">
+                Dein persönlicher Time-Management-Plan
+
+                Dieser Bereich wird personalisiert, sobald du die Fragen im Chat beantwortet hast.
+
+                Gehe zum **Chat-Tab** und starte das Gespräch mit mir!
+                </div>
+                """, render=False)
+        
+        with gr.Tabs() as tabs:
+            with gr.Tab("Home", id="home"):
+                gr.HTML(f'''
+                <div class="home-screen-container">
+                    <img src="data:image/png;base64,{home_screen_base64}" class="home-screen-image" alt="Home Screen">
+                </div>
+                <button class="home-chat-button" onclick="document.querySelectorAll('[role=tab]')[1].click()">Jetzt mit Calm.i chatten</button>
+                ''')
+            
+            with gr.Tab("Chat", id="chat"):
+                chatbot_chat = gr.Chatbot(
+                    value=[{"role": "assistant", "content": f"Hallo! Ich bin calm.i {logo_inline_html}\n\nSchön, dass du hier bist! Ich kann dir mit Stress, Schlaf und Selbstfürsorge helfen.\n\n**Möchtest du einen kurzen Fragebogen (2-3 Minuten) ausfüllen?** Damit kann ich personalisierte Pläne für dich erstellen (Schlafplan, Medien und Tools, Time Management).\n\n**Antworte mit:**\n- \"Ja\" oder \"Los geht's\" → um den Test jetzt zu machen\n- \"Jetzt nicht\" oder \"Später\" → um direkt zu chatten\n\n---\n\n**!!! Wichtiger Hinweis !!!**\n*Calm.i ist kein Ersatz für therapeutische Behandlung! Es handelt sich um einen Chatbot, der mit Tipps und individuellen Planungstools eine Unterstützung darstellen kann. Bitte wenden Sie sich im Zweifel umgehend an professionelle Hilfe!*"}],
+                    show_label=False,
+                    avatar_images=("./assets/chat_icons/human.png", "./assets/chat_icons/robot.png"),
+                    elem_id="CHATBOT"
+                )
+                
+                chatinterface = gr.ChatInterface(
+                    fn=response,
+                    chatbot=chatbot_chat,
+                    additional_outputs=[schlafplan_display, medien_display, time_display]
+                )
+            
+            with gr.Tab("Schlafplan"):
+                schlafplan_display.render()
+
+            with gr.Tab("Medien und Tools"):
+                medien_display.render()
+
+            with gr.Tab("Time Management"):
+                time_display.render()
+            
+            with gr.Tab("Notfallplan"):
+                gr.Markdown("""
+                <div class="resource-content">
+                
+                # Notfallplan
+                
+                ## Bei akuten Krisen stehen dir diese Hilfen zur Verfügung
+                
+                ### Wichtigste Kontakte
+                
+                **Bei akuter Lebensgefahr:**
+                - **Notruf: 112** (Feuerwehr & Rettungsdienst)
+                - **Polizei: 110**
+                
+                **Telefonseelsorge** (24/7, anonym, kostenlos)
+                - **0800 111 0 111** (Evangelisch)
+                - **0800 111 0 222** (Katholisch)
+                
+                **Ärztlicher Bereitschaftsdienst**
+                - **116 117** (Bei nicht lebensbedrohlichen Problemen außerhalb der Praxiszeiten)
+
+                <details class="crisis-dropdown">
+                <summary>Nummer gegen Kummer</summary>
+                <div class="dropdown-content">
+
+                - **Kinder- & Jugendtelefon: 116 111** (Mo-Sa 14-20 Uhr)
+                - **Elterntelefon: 0800 111 0 550** (Mo-Fr 9-17 Uhr, Di+Do auch bis 19 Uhr)
+
+                </div>
+                </details>
+
+                <details class="crisis-dropdown">
+                <summary>Muslimisches Seelsorge-Telefon</summary>
+                <div class="dropdown-content">
+
+                - **030 443 509 821** (24/7, mehrsprachig)
+
+                </div>
+                </details>
+
+                <details class="crisis-dropdown">
+                <summary>Info-Telefon Depression</summary>
+                <div class="dropdown-content">
+
+                - **0800 334 4533** (Mo, Di, Do 13-17 Uhr, Mi+Fr 8:30-12:30 Uhr)
+
+                </div>
+                </details>
+                
+                <details class="crisis-dropdown">
+                <summary>Psychiatrische Notdienste</summary>
+                <div class="dropdown-content">
+
+                Google: "Psychiatrischer Notdienst [deine Stadt]"
+
+                </div>
+                </details>
+
+                <details class="crisis-dropdown">
+                <summary>Bei Suizidgedanken</summary>
+                <div class="dropdown-content">
+
+                **Du bist nicht allein. Es gibt Hilfe.**
+
+                1. **Rufe sofort** eine der oben genannten Nummern an
+                2. **Wende dich** an eine Vertrauensperson (Familie, Freund*in)
+                3. **Gehe** zur nächsten psychiatrischen Notaufnahme oder rufe 112
+
+                </div>
+                </details>
+
+                <details class="crisis-dropdown">
+                <summary>Online-Beratung</summary>
+                <div class="dropdown-content">
+
+                - **[U25] Deutschland:** [www.u25-deutschland.de](https://www.u25-deutschland.de) (E-Mail-Beratung für unter 25-Jährige)
+                - **Deutsche Gesellschaft für Suizidprävention:** [www.suizidprophylaxe.de](https://www.suizidprophylaxe.de)
+
+                </div>
+                </details>
+
+                <details class="crisis-dropdown">
+                <summary>Wichtig zu wissen</summary>
+                <div class="dropdown-content">
+
+                - **Anonymität:** Telefonseelsorge und viele Beratungen sind anonym
+                - **Kostenlos:** Alle Notfallnummern sind kostenlos
+                - **Keine Scheu:** Lieber einmal zu viel anrufen als zu wenig
+                - **Du bist wichtig:** Dein Leben hat Wert, auch wenn es sich gerade nicht so anfühlt
+
+                </div>
+                </details>
+
+                ---
+
+                **Dieser Chatbot ersetzt keine professionelle Hilfe!**
+                
+                Bei akuten Krisen wende dich bitte an die oben genannten Stellen.
+                
+                </div>
+                """)
+        
+    
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        inbrowser=True,
+        css=custom_css,
+        js=custom_js
+    )
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,4 @@
+openai
+gradio==6.1.0
+PyPDF2
+chromadb

style.css

@@ -0,0 +1,43 @@
+[class*="gradio-container"] {
+    background: url("/file/hintergrund.jpg") no-repeat center center fixed !important;
+    background-size: cover !important;
+}
+/* Chatbot Box */
+#CHATBOT {
+    background: rgba(65, 31, 97, 0.7) !important;
+    backdrop-filter: blur(6px);
+    border-radius: 12px;
+}
+
+/* Nachrichten */
+.message.bot {
+    background: #6B1DAF !important;
+    font-family: "Lucida Handwriting" !important;
+}
+
+.message.user {
+    background: #AC73DE !important;
+}
+
+/* Tabellen kompakter machen */
+.resource-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 10px 0;
+}
+
+.resource-content table th,
+.resource-content table td {
+    padding: 4px 8px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    line-height: 1.2;
+}
+
+.resource-content table th {
+    background: rgba(107, 29, 175, 0.5);
+}
+
+.resource-content table tr {
+    margin: 0;
+    padding: 0;
+}

theme.py

@@ -0,0 +1,14 @@
+from gradio.themes.base import Base
+
+
+class CustomTheme(Base):
+    def __init__(self):
+        super().__init__()
+
+
+        super().set(
+            body_background_fill="#231332",
+            body_background_fill_dark="blue",
+            input_background_fill="#fff5dd",
+           input_background_fill_dark="#231332"
+  )