ac7088c5ca
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
192 lines
5.0 KiB
Markdown
192 lines
5.0 KiB
Markdown
# 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:
|
|
```html
|
|
<link rel="stylesheet" href="css/components/ai-chat.css">
|
|
```
|
|
|
|
Fügen Sie vor dem schließenden `</body>` Tag ein:
|
|
```html
|
|
<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:
|
|
|
|
```javascript
|
|
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`:
|
|
|
|
```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+
|