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
This commit is contained in:
Luftglanz
191
AI-CHAT-README.md
Normal file
191
AI-CHAT-README.md
Normal file
@@ -0,0 +1,191 @@
|
||||
# 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+
|
||||
Reference in New Issue
Block a user