website/README.md

MindMapProjekt - Roadmap

Projektübersicht

Das MindMapProjekt ist eine interaktive Plattform zum Visualisieren, Erforschen und Teilen von Wissen. Das Projekt wird umfassend überarbeitet, um ein modernes, benutzerfreundliches Design und erweiterte Funktionalitäten zu bieten.

Technischer Stack

• Backend: Python/Flask
• Frontend:
  • Tailwind CSS (via CDN) für moderne UI
  • SVG-Bibliotheken für Visualisierungen (D3.js)
  • JavaScript/Alpine.js für interaktive Komponenten
  • WebGL für animierte Hintergrundeffekte
• Datenbank: SQLite mit SQLAlchemy
• KI-Integration: OpenAI API für intelligente Assistenz

Installation und Verwendung

Installation

1. Repository klonen
2. Virtuelle Umgebung erstellen: python -m venv venv
3. Virtuelle Umgebung aktivieren:
   • Windows: venv\Scripts\activate
   • Unix/MacOS: source venv/bin/activate
4. Abhängigkeiten installieren: pip install -r requirements.txt
5. Datenbank initialisieren: python TOOLS.py db:rebuild
6. Admin-Benutzer erstellen: python TOOLS.py user:admin
7. Server starten: python TOOLS.py server:run

Standardbenutzer

• Admin-Benutzer: Username: admin / Passwort: admin
• Testbenutzer: Username: user / Passwort: user

Verwaltungswerkzeuge mit TOOLS.py

Das Projekt enthält ein zentrales Verwaltungsskript TOOLS.py, das verschiedene Hilfsfunktionen bietet:

Datenbankverwaltung

• python TOOLS.py db:fix - Reparieren der Datenbankstruktur
• python TOOLS.py db:rebuild - Datenbank neu aufbauen (löscht alle Daten!)
• python TOOLS.py db:test - Datenbankverbindung und Modelle testen
• python TOOLS.py db:stats - Datenbankstatistiken anzeigen

Benutzerverwaltung

• python TOOLS.py user:list - Alle Benutzer anzeigen
• python TOOLS.py user:create -u USERNAME -e EMAIL -p PASSWORD [-a] - Neuen Benutzer erstellen
• python TOOLS.py user:admin - Admin-Benutzer erstellen (admin/admin)
• python TOOLS.py user:reset-pw -u USERNAME -p NEWPASSWORD - Benutzerpasswort zurücksetzen
• python TOOLS.py user:delete -u USERNAME - Benutzer löschen

Serververwaltung

• python TOOLS.py server:run [--host HOST] [--port PORT] [--no-debug] - Entwicklungsserver starten

Für detaillierte Hilfe: python TOOLS.py -h

Roadmap der Überarbeitung

Phase 1: Grundlegende Infrastruktur ✅

• Bestandsaufnahme des aktuellen Projekts
• Erstellung der Roadmap
• Aktualisierung der Abhängigkeiten
• Integration von Tailwind CSS
• Einrichtung der SVG-Bibliotheken (D3.js)
• Favicon erstellen
• Setup-Skript für einfache Installation

Phase 2: Design-Überarbeitung ✅

• Implementierung des Dark Mode
• Erstellung eines modernen, minimalistischen UI mit Tech-Ästhetik
• Responsive Design für alle Geräte
• Gestaltung der Landing Page mit großer Typografie
• Animierter Neurales Netzwerk-Hintergrund mit WebGL

Phase 3: Mindmap-Funktionalitäten 🔄

• Verbesserte Visualisierung mit SVG und D3.js
• Implementierung der Mouseover-Funktion
• Entwicklung der Suchfunktion für Knoten
• Clustertopologie für neuronale Netzwerkdarstellung
• Fehlerbehandlung für robuste Datenverarbeitung und Knotenverweise
• Verbesserte Verbindungserkennung zwischen Knoten
• Tagging-System für Inhalte
• Quellenmanagement und -verlinkung
• Upload-Funktionalität an Knotenpunkten

Phase 4: Kernseitenentwicklung

• Überarbeitung der Startseite mit neuen Features
• Entwicklung der "Wer sind wir?"-Seite
• Implementierung von Impressum und Datenschutzerklärung
• Erstellung der Kontaktseite mit FAQs
• Überarbeitung des Benutzerprofilbereichs

Phase 5: Community-Features

• Entwicklung des Autorenbereichs
• Implementierung von Community-Bereichen für Themenbereiche
• Verbesserter Kommentarbereich
• Benutzerrechtemanagement

Phase 6: KI-Integration

• Implementierung des Frage-Antwort-Systems
• KI-generierte Themeneinleitungen
• Intelligente Suchunterstützung
• Geführte Pfade durch Themenbereiche
• Vorgeschlagene Chat-Möglichkeiten

Phase 7: Benutzerprofilfunktionen

• Speichern von Thematiken
• Persönliche Mindmap/Pinboard
• Beitragsmanagement
• Benutzerstatistiken und -aktivitäten

Phase 8: Testing und Optimierung

• Umfassende Tests aller Funktionen
• Performance-Optimierung
• SEO-Implementierung
• Barrierefreiheit prüfen und verbessern

Phase 9: Dokumentation und Einführung

• Erstellung von Benutzeranleitungen
• Entwicklerdokumentation
• Administratorenhandbuch
• Guided Tour für neue Benutzer

Aktueller Status

• Phase 1: ✅ Abgeschlossen
• Phase 2: ✅ Abgeschlossen
• Phase 3: 🔄 In Bearbeitung (75% abgeschlossen)

Aktuelle Fortschritte

• Grundlegende UI modernisiert mit Tailwind CSS und Dark Mode
• Neues Favicon für bessere visuelle Identität erstellt
• Setup-Prozess vereinfacht mit einem Shell-Skript
• Mindmap-Visualisierung komplett überarbeitet mit D3.js für eine interaktivere Erfahrung
• Responsive Design für optimale Darstellung auf allen Geräten
• Animierter neuronaler Netzwerk-Hintergrund mit WebGL implementiert
• Verbesserte neuronale Cluster-Darstellung in der MindMap-Ansicht
• Behebung von kritischen Fehlern in der Knotenvisualisierung und Verbindungserkennung
• Robustere Datenverarbeitung für Mindmap-Knoten implementiert
• Fehlerbehandlung für verschiedene API-Datenformate verbessert

Neuronaler Netzwerk-Hintergrund

Ein wesentliches neues Feature ist der animierte Hintergrund, der ein neuronales Netzwerk simuliert:

• WebGL-basierte Rendering-Engine für hohe Performance
• Dynamische Knoten und Verbindungen mit realistischem Bewegungsverhalten
• Neuronenfeuer-Simulation mit Signalweiterleitung zwischen Knoten
• Clustertopologie für realistisches Erscheinungsbild
• Anpassbare Farbgebung und Animationsparameter
• Flüssige Animationen mit über 100 Knotenpunkten

Die Animation ist vollständig responsiv und passt sich automatisch an verschiedene Bildschirmgrößen an, ohne die Browser-Performance zu beeinträchtigen.

Mindmap-Verbesserungen

Die Mindmap-Darstellung wurde grundlegend überarbeitet:

• D3.js Force-Directed Graph für intuitive Knotenpositionierung
• Verbesserte Fehlerbehandlung für robustere Datenverarbeitung
• Neuronale Cluster-Gruppierung von thematisch zusammengehörigen Inhalten
• Glasmorphismus-Effekte für moderne visuelle Darstellung
• Verbesserte Hover- und Selektionseffekte
• Flüssige Animationen bei Knotenauswahl und -fokussierung

Nächste Schritte

• Fertigstellung des Tagging-Systems für Gedanken
• Verbesserung der Gedankenansicht im Mindmap-Bereich
• Implementierung von Quellenmanagement
• Überarbeitung der Startseite mit neuen Features

Content Security Policy (CSP)

Die Anwendung implementiert eine Content Security Policy, um die Sicherheit zu erhöhen und unerwünschte externe Ressourcen zu blockieren. CSP wird in app.py konfiguriert und schränkt ein, welche Ressourcen geladen werden dürfen.

Aktualisierung (06.06.2024)

Die Anwendung verwendet nun die Tailwind CSS CDN für vereinfachte Entwicklung. Die CSP wurde entsprechend angepasst, um die Domain cdn.tailwindcss.com zu erlauben.

Lokale und CDN-Ressourcen

Die Anwendung nutzt eine Mischung aus lokalen Ressourcen und CDNs:

• CDN-Ressourcen:
  • Tailwind CSS (cdn.tailwindcss.com)
• Lokale Ressourcen:
  • Alpine.js
  • Font Awesome
  • Google Fonts (Inter und JetBrains Mono)
  • WebGL-Animation (neural-network-background.js)

CSP-Nonces

Die Anwendung verwendet Nonces für Inline-Skripte. In den Templates wird {{ csp_nonce }} verwendet, um den Nonce-Wert einzufügen:

<script nonce="{{ csp_nonce }}">
  // JavaScript Code
</script>

Zuletzt aktualisiert: 15.06.2024