root/luftglanz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ac7088c5caac3ee891e4585c0bbd82e1a9c197e1
luftglanz/AI-CHAT-README.md
Luftglanz ac7088c5ca Initial commit: Luftglanz drone website with integrated AI chat assistant 
Features:
- Complete Luftglanz drone cleaning website
- AI chat assistant integrated with OpenAI API
- Expert product advice for AGO Quart and Mellerud cleaning products
- Formal German language support (Sie form)
- Secure PHP backend for API calls
- Responsive design with mobile support
- Product-specific knowledge base
- Safety statements from manufacturers
- Multi-page integration (index, products, services, contact)

Technical components:
- AI chat widget (js/ai-chat.js)
- Chat styling (css/components/ai-chat.css)
- Backend API (ai-chat-api.php)
- Product knowledge base with detailed specifications
- Demo and documentation files
2025-07-08 11:54:37 +02:00

5.0 KiB
Raw Blame History

Luftglanz AI Chat System

Ein intelligenter KI-Assistent für die Luftglanz Website, der Kunden bei Fragen zu Drohnen-Reinigungsservices und AGO Quart Produkten unterstützt.

🚀 Features

  • Intelligente Antworten: Basiert auf OpenAI GPT-3.5-turbo mit spezifischem Produktwissen
  • Deutsche Sprache: Kommuniziert natürlich auf Deutsch
  • Produktwissen: Umfassendes Wissen über AGO Quart Grünbelagentferner
  • Responsive Design: Funktioniert perfekt auf Desktop und Mobile
  • Sicher: Unterstützt sowohl PHP-Backend als auch direkte API-Aufrufe
  • Persistent: Speichert Konversationshistorie lokal

📁 Dateien

JavaScript

  • js/ai-chat.js - Haupt-Chat-System mit Frontend-Logik
  • css/components/ai-chat.css - Styling für den Chat-Widget

PHP Backend

  • ai-chat-api.php - Sicherer PHP-Endpoint für OpenAI API-Aufrufe

Demo & Test

  • ai-chat-demo.html - Demo-Seite zum Testen des Chat-Systems

🛠️ Installation

1. Dateien einbinden

Fügen Sie diese Zeilen in den <head> Ihrer HTML-Seiten ein:

<link rel="stylesheet" href="css/components/ai-chat.css">

Fügen Sie vor dem schließenden </body> Tag ein:

<script src="js/ai-chat.js"></script>

2. API-Konfiguration

Option A: PHP Backend (Empfohlen)

  • Der API-Key ist sicher im PHP-Backend gespeichert
  • Keine weitere Konfiguration nötig

Option B: Direkte API-Aufrufe

  • API-Key ist im JavaScript sichtbar (weniger sicher)
  • Für Entwicklung und Tests geeignet

3. Server-Anforderungen

Für PHP Backend:

  • PHP 7.0+
  • cURL-Erweiterung aktiviert
  • Internetverbindung für OpenAI API

💡 Verwendung

Automatische Initialisierung

Der Chat wird automatisch geladen, wenn die Seite vollständig geladen ist:

document.addEventListener('DOMContentLoaded', () => {
    window.aiChat = new AIChat();
});

Manueller Test

Öffnen Sie ai-chat-demo.html in Ihrem Browser, um das System zu testen.

🎯 Produktwissen

Der KI-Assistent verfügt über umfassendes Wissen zu:

AGO Quart Grünbelagentferner

  • Funktion: Hochwirksam gegen Algen, Grünbeläge und Flechten
  • Wirkdauer: Bis zu 18 Monate aktive Schutzwirkung
  • Anwendung: Nur auf trockene Flächen, 8h kein Regen
  • Reichweite: 0,5L Flasche für ca. 100m² (19,90 €)
  • Mischungsverhältnisse:
    • Leichte Beläge: 1:20 mit Wasser
    • Starke Beläge: 1:10 mit Wasser

Drohnen-Services

  • Professionelle Anwendung mit Drohnen
  • Präzise, gleichmäßige Verteilung
  • Sichere Anwendung auf steilen Dächern
  • Kosteneffektiv vs. Gerüstaufbau

Sicherheitsinformationen

  • Korrekte Anwendungshinweise
  • Sicherheitsdatenblätter
  • Umweltschutz-Aspekte

🔧 Anpassungen

Produktwissen erweitern

Bearbeiten Sie die productKnowledge Variable in:

  • js/ai-chat.js (Zeile ~XX)
  • ai-chat-api.php (Zeile ~XX)

Styling anpassen

Ändern Sie Farben und Design in css/components/ai-chat.css:

:root {
    --primary-color: #2980b9;
    --accent-color: #00adb8;
    /* Weitere Farb-Variablen... */
}

API-Einstellungen

In js/ai-chat.js können Sie anpassen:

  • model: OpenAI Modell (z.B. 'gpt-4')
  • max_tokens: Maximale Antwortlänge
  • temperature: Kreativität der Antworten (0.0 - 1.0)

📱 Mobile Optimierung

Der Chat ist vollständig responsive:

  • Tablet: Kompakte Darstellung
  • Smartphone: Vollbild-Chat
  • Touch-optimierte Bedienung

🔒 Sicherheit

PHP Backend Vorteile:

  • API-Key nicht im Frontend sichtbar
  • Server-seitige Validierung
  • Rate-Limiting möglich
  • Logging und Monitoring

Best Practices:

  • Verwenden Sie immer das PHP Backend in Production
  • Überwachen Sie API-Kosten regelmäßig
  • Implementieren Sie Rate-Limiting bei Bedarf

🐛 Troubleshooting

Chat erscheint nicht

  • Prüfen Sie Browser-Konsole auf JavaScript-Fehler
  • Stellen Sie sicher, dass alle CSS/JS-Dateien geladen werden
  • Testen Sie mit ai-chat-demo.html

API-Fehler

  • Prüfen Sie API-Key Gültigkeit
  • Kontrollieren Sie Internetverbindung
  • Schauen Sie in Browser-Netzwerk-Tab für Details

PHP Backend Probleme

  • Prüfen Sie PHP-Fehlerlog
  • Stellen Sie sicher, dass cURL aktiviert ist
  • Testen Sie API-Key mit direktem curl-Aufruf

📊 Monitoring

API-Kosten überwachen

  • Besuchen Sie das OpenAI Dashboard
  • Setzen Sie Ausgabenlimits
  • Überwachen Sie monatliche Nutzung

Performance

  • Chat-Antwortzeiten überwachen
  • Conversation History begrenzen (aktuell: 10 Nachrichten)
  • Cache häufige Fragen falls nötig

🔄 Updates

Produktwissen aktualisieren

  1. Bearbeiten Sie die Knowledge-Base in beiden Dateien
  2. Testen Sie mit Demo-Seite
  3. Deployen Sie auf Live-System

OpenAI API Updates

  • Überwachen Sie OpenAI Changelogs
  • Testen Sie neue Modelle in Development
  • Aktualisieren Sie Prompts bei Bedarf

💬 Support

Bei Fragen oder Problemen:

  1. Prüfen Sie die Browser-Konsole
  2. Testen Sie mit der Demo-Seite
  3. Kontaktieren Sie das Entwicklungsteam

Version: 1.0
Letztes Update: Juli 2025
Kompatibilität: Alle modernen Browser, PHP 7.0+

Reference in New Issue View Git Blame Copy Permalink