Major improvements: AI Chat System, KidsAI fixes, and Enhanced Features
✨ AI Chat System for Luftglanz (NEW): - Complete KI-Assistent implementation with German language support - Comprehensive product knowledge for AGO Quart and Mellerud products - Secure PHP backend + fallback direct API integration - Mobile-responsive chat widget with professional UI - Conversation history and context management - Demo page and complete documentation 🚀 Luftglanz Website Enhancements: - Integrated AI chat on main pages (index, contact, products, services) - Comprehensive product information and pricing - Professional chat interface with Luftglanz branding - Complete AI-powered customer support system 🔧 KidsAI Explorer Major Fixes: - Simplified conversation system (removed complex features) - Fixed step-by-step educational approach - Improved mobile responsiveness and performance - Better error handling and fallback responses - Streamlined server architecture (GPT-3.5-turbo focus) - Enhanced UI/UX with cleaner animations 🛡️ Safety & Testing Improvements: - Comprehensive test suites for content safety - Alcohol content detection and redirection - Critical safety tests for child protection - Final ultimate test suite for all features 📚 Documentation: - Complete AI Chat README with installation guide - API documentation and configuration options - Mobile optimization guidelines - Security best practices This release brings enterprise-grade AI chat to Luftglanz and significantly improves KidsAI Explorer's reliability and performance.
This commit is contained in:
root
191
html/drone/AI-CHAT-README.md
Normal file
191
html/drone/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+
|
||||
255
html/drone/ai-chat-api.php
Normal file
255
html/drone/ai-chat-api.php
Normal file
@@ -0,0 +1,255 @@
|
||||
<?php
|
||||
/**
|
||||
* AI Chat Backend API for Luftglanz Website
|
||||
* This script handles SUITABLE SURFACES: All waterproof surfaces (roofs, terraces, facades, etc.)
|
||||
IMPORTANT: AGO Quart is also SAFE for solar panels! According to the manufacturer: \"Sie können die Solar-Platten bedenkenlos einsprühen. Unser AGO Quart greift dies nicht an. Es wird auch sehr erfolgreich von Firmen eingesetzt, die Solaranlagen reinigen.\"
|
||||
|
||||
BENEFITS:nAI API calls securely from the server side
|
||||
*/
|
||||
|
||||
// CORS headers for frontend access
|
||||
header('Content-Type: application/json');
|
||||
header('Access-Control-Allow-Origin: *');
|
||||
header('Access-Control-Allow-Methods: POST, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type');
|
||||
|
||||
// Handle preflight OPTIONS request
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
|
||||
http_response_code(200);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Only allow POST requests
|
||||
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
http_response_code(405);
|
||||
echo json_encode(['error' => 'Method not allowed']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Get request data
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
|
||||
if (!isset($input['message']) || empty(trim($input['message']))) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'Message is required']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$userMessage = trim($input['message']);
|
||||
$conversationHistory = $input['history'] ?? [];
|
||||
|
||||
// OpenAI API configuration
|
||||
$apiKey = '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';
|
||||
$apiUrl = 'https://api.openai.com/v1/chat/completions';
|
||||
|
||||
// Product knowledge base
|
||||
$productKnowledge = "
|
||||
LUFTGLANZ PRODUCT KNOWLEDGE BASE:
|
||||
|
||||
1. COMPANY: Luftglanz - Professional drone-based roof and surface cleaning services
|
||||
|
||||
2. MAIN PRODUCTS:
|
||||
|
||||
A) AGO QUART GRÜNBELAGENTFERNER (Green algae and lichen remover)
|
||||
|
||||
PRODUCT DETAILS:
|
||||
- Name: AGO Quart Algenentferner, Grünbelag- und Flechtenentferner
|
||||
- Function: Highly effective against algae, green deposits, and lichens
|
||||
- Active period: Up to 18 months continuous protection
|
||||
- Application: Apply only on dry surfaces, no rain for 8 hours after application
|
||||
- Coverage: 0.5L bottle covers approximately 100m² surface area
|
||||
- Price: 19,90 € (39,80 € per liter)
|
||||
|
||||
MIXING RATIOS:
|
||||
- Light deposits: 1:20 with water
|
||||
- Heavy deposits (black algae, lichens): 1:10 with water
|
||||
|
||||
INGREDIENTS: Water, Benzalkonium-Chlorides, Tideceth-8, Cocamidopropyl-Betaine, Isopropyl-Alcohol
|
||||
|
||||
APPLICATION PROCESS:
|
||||
1. Apply only on dry surfaces
|
||||
2. Ensure no rain for minimum 8 hours after application
|
||||
3. Works on surface level, not suitable for moss removal in joints/cracks
|
||||
4. Cleaning duration depends on contamination severity
|
||||
5. Active for up to 18 months, provides thorough cleaning and prevents recontamination
|
||||
6. Never rinse with water after application - product must bind with surface
|
||||
|
||||
EFFECTIVENESS TIMELINE:
|
||||
- Green deposits: Disappear within days
|
||||
- Red/black algae: Several months for significant improvement
|
||||
- Heavy lichen contamination: Up to 2 years for complete removal
|
||||
|
||||
SUITABLE SURFACES: All waterproof surfaces (roofs, terraces, facades, etc.)
|
||||
|
||||
BENEFITS:
|
||||
- No high-pressure cleaning needed
|
||||
- No scrubbing required
|
||||
- Chlorine and acid-free
|
||||
- Gentle cleaning without material damage
|
||||
- Long-term protection against recontamination
|
||||
- Self-cleaning effect through weather interaction
|
||||
|
||||
B) MELLERUD PHOTOVOLTAIK & SOLARANLAGEN REINIGER KONZENTRAT
|
||||
|
||||
PRODUCT DETAILS:
|
||||
- Name: Mellerud Photovoltaik & Solaranlagen Reiniger Konzentrat
|
||||
- Size: 0.5L concentrate
|
||||
- Price: 8,99 € (17,98 € per liter)
|
||||
- Function: Gentle and effective cleaning solution specifically for solar panels and photovoltaic systems
|
||||
- Removes: Dust, general dirt, soot residues, fine dust, and pollen
|
||||
- Special features: Streak-free, residue-free cleaning with water-repellent protection
|
||||
|
||||
MIXING RATIO:
|
||||
- Standard cleaning: 1:20 with water (ideally distilled water)
|
||||
|
||||
INGREDIENTS & SPECS:
|
||||
- Composition: Aqueous mixture of surfactants, complexing agents, and effectiveness enhancers
|
||||
- pH value: 5.70 - 6.50
|
||||
- Density: 1.020 kg/l
|
||||
|
||||
APPLICATION PROCESS:
|
||||
1. Remove coarse dirt, leaves, and debris by lightly sweeping (avoid intensive scrubbing)
|
||||
2. Mix concentrate 1:20 with water (preferably distilled water)
|
||||
3. Apply carefully with specialized solar/PV equipment, soft sponge, cloth, or squeegee
|
||||
4. Allow to work briefly
|
||||
5. Rinse thoroughly with clear water (preferably distilled water)
|
||||
|
||||
SUITABLE EQUIPMENT:
|
||||
- Specialized equipment for solar and PV systems
|
||||
- Particularly soft sponges
|
||||
- Soft cloths or squeegees
|
||||
- Avoid intensive scrubbing to prevent damage
|
||||
|
||||
BENEFITS:
|
||||
- Improves performance and lifespan of solar systems
|
||||
- Creates sustainable protection against re-contamination through water-repellent effect
|
||||
- Gentle cleaning without damage to sensitive modules
|
||||
- Streak-free and residue-free results
|
||||
- Suitable for all types of solar and PV panels
|
||||
|
||||
SAFETY INFORMATION:
|
||||
- Causes severe eye irritation
|
||||
- Keep out of reach of children
|
||||
- Wash hands thoroughly after use
|
||||
- In case of eye contact: rinse gently with water for several minutes
|
||||
- Remove contact lenses if present and continue rinsing
|
||||
- If eye irritation persists: seek medical advice
|
||||
|
||||
WHY DISTILLED WATER?
|
||||
- Minimizes residues and promotes streak-free cleaning
|
||||
- Supports optimal care of PV and solar systems
|
||||
|
||||
DRONE SERVICES:
|
||||
- Professional application using drones for hard-to-reach areas
|
||||
- Precise, even distribution of both AGO Quart and Mellerud products
|
||||
- Safe application on steep roofs and high buildings
|
||||
- Cost-effective compared to traditional scaffolding methods
|
||||
- Specialized equipment for solar panel cleaning via drone
|
||||
|
||||
SAFETY INFORMATION:
|
||||
- Use biocides safely
|
||||
- Always read labeling and product information
|
||||
- AGO Quart: Causes skin irritation (H315), serious eye damage (H318), very toxic to aquatic organisms (H410)
|
||||
- Mellerud: Causes severe eye irritation, keep away from children
|
||||
|
||||
CONTACT INFORMATION:
|
||||
AGO: AGO Sauberkeit für Haus und Garten! GmbH & Co. KG, Brilloner Str. 39, 59909 Bestwig
|
||||
Phone: 02904 / 98 98 98-0, Email: info@agoshop.de
|
||||
|
||||
Mellerud: MELLERUD CHEMIE GMBH, Bernhard-Röttgen-Waldweg 20, 41379 Brüggen
|
||||
Phone: +49 (0) 2163 / 950 90 999, Email: shop@mellerud.de, experten-service@mellerud.de
|
||||
";
|
||||
|
||||
$systemPrompt = "Du bist ein hilfsreicher KI-Assistent für Luftglanz, ein Unternehmen für professionelle Drohnen-basierte Dach- und Oberflächenreinigung.
|
||||
|
||||
WICHTIGE ANWEISUNGEN:
|
||||
- Antworte immer auf Deutsch
|
||||
- Verwende IMMER die höfliche Anrede \"Sie\" (niemals \"du\" oder \"dir\")
|
||||
- Sei freundlich, professionell und hilfsbereit
|
||||
- Nutze AUSSCHLIESSLICH die bereitgestellten Produktinformationen für präzise Antworten
|
||||
- Gib konkrete Produktdetails, Preise und Anwendungshinweise aus der Wissensbasis
|
||||
- Bei Fragen zu Solaranlagen: Erkläre dass SOWOHL AGO Quart ALS AUCH Mellerud geeignet sind
|
||||
- AGO Quart: Laut Hersteller sicher für Solar-Platten, wird von Reinigungsfirmen eingesetzt
|
||||
- Mellerud: Speziell für Solaranlagen entwickelt mit schonender Formel
|
||||
- Bei Fragen zu Algen/Grünbelägen auf Dächern, empfehle AGO Quart
|
||||
- Erwähne die Vorteile der Drohnen-Anwendung wenn relevant
|
||||
- Erkläre Unterschiede zwischen den Produkten detailliert basierend auf der Wissensbasis
|
||||
- Gib konkrete Mischungsverhältnisse und Preise an
|
||||
|
||||
WICHTIG: Du kennst diese BEIDEN spezifischen Produkte sehr genau:
|
||||
1. AGO Quart (19,90€) - für Algen, Grünbeläge, Flechten auf Dächern/Terrassen
|
||||
2. Mellerud Photovoltaik Reiniger (8,99€) - speziell für Solaranlagen
|
||||
|
||||
PRODUKTWISSEN: " . $productKnowledge . "
|
||||
|
||||
Beantworte Fragen zu:
|
||||
- Unterschiede zwischen AGO Quart und Mellerud Produkten
|
||||
- Spezifische Anwendung für Solaranlagen vs. Dächer
|
||||
- Konkrete Preise, Mischungsverhältnisse und Reichweiten
|
||||
- Drohnen-Anwendung beider Produkte
|
||||
- Sicherheitshinweise für beide Produkte
|
||||
- Warum destilliertes Wasser bei Mellerud wichtig ist
|
||||
- Kontaktdaten beider Hersteller";
|
||||
|
||||
// Build messages array
|
||||
$messages = [
|
||||
['role' => 'system', 'content' => $systemPrompt]
|
||||
];
|
||||
|
||||
// Add conversation history (last 10 messages for context)
|
||||
$recentHistory = array_slice($conversationHistory, -10);
|
||||
foreach ($recentHistory as $msg) {
|
||||
$messages[] = $msg;
|
||||
}
|
||||
|
||||
// Add current user message
|
||||
$messages[] = ['role' => 'user', 'content' => $userMessage];
|
||||
|
||||
// Prepare OpenAI request
|
||||
$data = [
|
||||
'model' => 'gpt-3.5-turbo',
|
||||
'messages' => $messages,
|
||||
'max_tokens' => 500,
|
||||
'temperature' => 0.7,
|
||||
'presence_penalty' => 0.1,
|
||||
'frequency_penalty' => 0.1
|
||||
];
|
||||
|
||||
// Make API call to OpenAI
|
||||
$ch = curl_init();
|
||||
curl_setopt($ch, CURLOPT_URL, $apiUrl);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||
curl_setopt($ch, CURLOPT_POST, true);
|
||||
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
|
||||
curl_setopt($ch, CURLOPT_HTTPHEADER, [
|
||||
'Content-Type: application/json',
|
||||
'Authorization: Bearer ' . $apiKey
|
||||
]);
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
curl_close($ch);
|
||||
|
||||
if ($httpCode !== 200) {
|
||||
http_response_code(500);
|
||||
echo json_encode(['error' => 'OpenAI API error: ' . $httpCode]);
|
||||
exit;
|
||||
}
|
||||
|
||||
$responseData = json_decode($response, true);
|
||||
|
||||
if (!isset($responseData['choices'][0]['message']['content'])) {
|
||||
http_response_code(500);
|
||||
echo json_encode(['error' => 'Invalid response from OpenAI']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$assistantMessage = $responseData['choices'][0]['message']['content'];
|
||||
|
||||
// Return successful response
|
||||
echo json_encode([
|
||||
'success' => true,
|
||||
'message' => $assistantMessage,
|
||||
'usage' => $responseData['usage'] ?? null
|
||||
]);
|
||||
?>
|
||||
177
html/drone/ai-chat-demo.html
Normal file
177
html/drone/ai-chat-demo.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI Chat Test - Luftglanz</title>
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/components/ai-chat.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #e8e9ea, #f5f5f5);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #2980b9;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #f8f9fa;
|
||||
border-left: 4px solid #00adb8;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.test-questions {
|
||||
background: #fff;
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.test-questions h3 {
|
||||
color: #2980b9;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.question-button {
|
||||
background: linear-gradient(135deg, #2980b9, #00adb8);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
margin: 5px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.question-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(41, 128, 185, 0.3);
|
||||
}
|
||||
|
||||
.features {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature h4 {
|
||||
color: #2980b9;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-container">
|
||||
<h1>🤖 Luftglanz KI-Assistent Demo</h1>
|
||||
|
||||
<div class="info-box">
|
||||
<h3>Willkommen zum KI-Assistenten Test!</h3>
|
||||
<p>Dieser intelligente Chatbot wurde speziell für Luftglanz entwickelt und verfügt über umfassendes Wissen über:</p>
|
||||
<ul>
|
||||
<li><strong>AGO Quart Grünbelagentferner</strong> - Produktdetails, Anwendung, Dosierung</li>
|
||||
<li><strong>Drohnen-Reinigungsservices</strong> - Vorteile, Anwendungsgebiete, Preise</li>
|
||||
<li><strong>Oberflächenreinigung</strong> - Dächer, Terrassen, Fassaden</li>
|
||||
<li><strong>Sicherheitshinweise</strong> - Korrekte Anwendung und Vorsichtsmaßnahmen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="test-questions">
|
||||
<h3>Testen Sie den Assistenten mit diesen Beispielfragen:</h3>
|
||||
<button class="question-button" onclick="askQuestion('Wie wirkt AGO Quart und wie lange hält die Wirkung an?')">
|
||||
Wie wirkt AGO Quart?
|
||||
</button>
|
||||
<button class="question-button" onclick="askQuestion('Welche Mischungsverhältnisse gibt es für verschiedene Verschmutzungen?')">
|
||||
Mischungsverhältnisse
|
||||
</button>
|
||||
<button class="question-button" onclick="askQuestion('Kann AGO Quart bei Regen angewendet werden?')">
|
||||
Anwendung bei Regen
|
||||
</button>
|
||||
<button class="question-button" onclick="askQuestion('Wie viel kostet eine Flaschenreinigung und welche Fläche kann damit behandelt werden?')">
|
||||
Preis und Reichweite
|
||||
</button>
|
||||
<button class="question-button" onclick="askQuestion('Welche Vorteile bietet die Drohnen-Anwendung?')">
|
||||
Drohnen-Vorteile
|
||||
</button>
|
||||
<button class="question-button" onclick="askQuestion('Ist AGO Quart umweltfreundlich und sicher?')">
|
||||
Sicherheit & Umwelt
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<h4>🎯 Präzise Antworten</h4>
|
||||
<p>Basiert auf echten Produktdaten und technischen Spezifikationen</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h4>🇩🇪 Auf Deutsch</h4>
|
||||
<p>Kommuniziert natürlich in deutscher Sprache</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h4>💡 Intelligent</h4>
|
||||
<p>Versteht Kontext und gibt passende Empfehlungen</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h4>📱 Responsiv</h4>
|
||||
<p>Funktioniert perfekt auf allen Geräten</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<p><strong>Der Chat-Button erscheint unten rechts auf der Seite!</strong></p>
|
||||
<p>Klicken Sie darauf, um mit dem KI-Assistenten zu sprechen.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/ai-chat.js"></script>
|
||||
<script>
|
||||
function askQuestion(question) {
|
||||
// Wait for chat to be initialized
|
||||
setTimeout(() => {
|
||||
if (window.aiChat) {
|
||||
// Open chat if not already open
|
||||
if (!window.aiChat.isOpen) {
|
||||
window.aiChat.toggleChat();
|
||||
}
|
||||
|
||||
// Set the question in the input field
|
||||
setTimeout(() => {
|
||||
const input = document.getElementById('chat-input');
|
||||
if (input) {
|
||||
input.value = question;
|
||||
input.focus();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
300
html/drone/css/components/ai-chat.css
Normal file
300
html/drone/css/components/ai-chat.css
Normal file
@@ -0,0 +1,300 @@
|
||||
/* AI Chat Widget Styles */
|
||||
|
||||
/* Chat Toggle Button */
|
||||
#ai-chat-toggle {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: linear-gradient(135deg, #2980b9, #00adb8);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
padding: 15px 20px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 20px rgba(41, 128, 185, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
border: none;
|
||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||
}
|
||||
|
||||
#ai-chat-toggle:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 25px rgba(41, 128, 185, 0.4);
|
||||
}
|
||||
|
||||
#ai-chat-toggle.active {
|
||||
background: linear-gradient(135deg, #1f6797, #00858e);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
#ai-chat-toggle svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Chat Window */
|
||||
#ai-chat-window {
|
||||
position: fixed;
|
||||
bottom: 90px;
|
||||
right: 20px;
|
||||
width: 350px;
|
||||
height: 500px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(100%) scale(0.8);
|
||||
opacity: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 999;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#ai-chat-window.open {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Chat Header */
|
||||
.chat-header {
|
||||
background: linear-gradient(135deg, #2980b9, #00adb8);
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
|
||||
.chat-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#chat-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
#chat-close:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Chat Messages */
|
||||
.chat-messages {
|
||||
height: 360px;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb {
|
||||
background: #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar-thumb:hover {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
/* Message Styling */
|
||||
.message {
|
||||
display: flex;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: 80%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.user-message {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background: linear-gradient(135deg, #2980b9, #00adb8);
|
||||
color: white;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.bot-message .message-content {
|
||||
background: white;
|
||||
color: #333;
|
||||
border: 1px solid #e1e5e9;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
/* Typing Indicator */
|
||||
.typing .message-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.typing-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.typing-dots span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #666;
|
||||
border-radius: 50%;
|
||||
animation: typing 1.4s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
|
||||
.typing-dots span:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
0%, 80%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Chat Input */
|
||||
.chat-input-container {
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-top: 1px solid #e1e5e9;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#chat-input {
|
||||
flex: 1;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 20px;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
#chat-input:focus {
|
||||
border-color: #2980b9;
|
||||
}
|
||||
|
||||
#chat-send {
|
||||
background: linear-gradient(135deg, #2980b9, #00adb8);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#chat-send:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(41, 128, 185, 0.3);
|
||||
}
|
||||
|
||||
#chat-send:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
#ai-chat-window {
|
||||
width: calc(100vw - 40px);
|
||||
height: 450px;
|
||||
bottom: 80px;
|
||||
right: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#ai-chat-toggle {
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
padding: 12px 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#ai-chat-toggle span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
#ai-chat-window {
|
||||
width: calc(100vw - 20px);
|
||||
height: 400px;
|
||||
bottom: 70px;
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#ai-chat-toggle {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.chat-messages {
|
||||
height: 280px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@
|
||||
<link rel="stylesheet" href="css/components/footer.css">
|
||||
<link rel="stylesheet" href="css/components/hero.css">
|
||||
<link rel="stylesheet" href="css/components/forms.css">
|
||||
<link rel="stylesheet" href="css/components/ai-chat.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #2980b9; /* Darkened from #3498db */
|
||||
@@ -910,11 +911,7 @@
|
||||
|
||||
<script src="js/translations.js"></script>
|
||||
<script src="js/language-manager.js"></script>
|
||||
<!-- Comment out competing animation scripts -->
|
||||
<!-- <script src="js/drone-animation.js"></script> -->
|
||||
<!-- <script src="js/background-patterns.js"></script> -->
|
||||
<!-- <script src="js/roof-cleaning-animation.js"></script> -->
|
||||
<!-- Only use the drone-image-animation.js that has our custom images -->
|
||||
<script src="js/ai-chat.js"></script>
|
||||
<script src="js/drone-image-animation.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
427
html/drone/js/ai-chat.js
Normal file
427
html/drone/js/ai-chat.js
Normal file
@@ -0,0 +1,427 @@
|
||||
// AI Chat System for Luftglanz Website
|
||||
class AIChat {
|
||||
constructor() {
|
||||
this.apiKey = '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';
|
||||
this.isOpen = false;
|
||||
this.conversationHistory = [];
|
||||
this.isTyping = false;
|
||||
|
||||
// Product knowledge base
|
||||
this.productKnowledge = `
|
||||
LUFTGLANZ PRODUCT KNOWLEDGE BASE:
|
||||
|
||||
1. COMPANY: Luftglanz - Professional drone-based roof and surface cleaning services
|
||||
|
||||
2. MAIN PRODUCTS:
|
||||
|
||||
A) AGO QUART GRÜNBELAGENTFERNER (Green algae and lichen remover)
|
||||
|
||||
PRODUCT DETAILS:
|
||||
- Name: AGO Quart Algenentferner, Grünbelag- und Flechtenentferner
|
||||
- Function: Highly effective against algae, green deposits, and lichens
|
||||
- Active period: Up to 18 months continuous protection
|
||||
- Application: Apply only on dry surfaces, no rain for 8 hours after application
|
||||
- Coverage: 0.5L bottle covers approximately 100m² surface area
|
||||
- Price: 19,90 € (39,80 € per liter)
|
||||
|
||||
MIXING RATIOS:
|
||||
- Light deposits: 1:20 with water
|
||||
- Heavy deposits (black algae, lichens): 1:10 with water
|
||||
|
||||
INGREDIENTS: Water, Benzalkonium-Chlorides, Tideceth-8, Cocamidopropyl-Betaine, Isopropyl-Alcohol
|
||||
|
||||
APPLICATION PROCESS:
|
||||
1. Apply only on dry surfaces
|
||||
2. Ensure no rain for minimum 8 hours after application
|
||||
3. Works on surface level, not suitable for moss removal in joints/cracks
|
||||
4. Cleaning duration depends on contamination severity
|
||||
5. Active for up to 18 months, provides thorough cleaning and prevents recontamination
|
||||
6. Never rinse with water after application - product must bind with surface
|
||||
|
||||
EFFECTIVENESS TIMELINE:
|
||||
- Green deposits: Disappear within days
|
||||
- Red/black algae: Several months for significant improvement
|
||||
- Heavy lichen contamination: Up to 2 years for complete removal
|
||||
|
||||
SUITABLE SURFACES: All waterproof surfaces (roofs, terraces, facades, etc.)
|
||||
IMPORTANT: AGO Quart is also SAFE for solar panels! According to the manufacturer: "Sie können die Solar-Platten bedenkenlos einsprühen. Unser AGO Quart greift dies nicht an. Es wird auch sehr erfolgreich von Firmen eingesetzt, die Solaranlagen reinigen."
|
||||
|
||||
BENEFITS:
|
||||
- No high-pressure cleaning needed
|
||||
- No scrubbing required
|
||||
- Chlorine and acid-free
|
||||
- Gentle cleaning without material damage
|
||||
- Long-term protection against recontamination
|
||||
- Self-cleaning effect through weather interaction
|
||||
|
||||
B) MELLERUD PHOTOVOLTAIK & SOLARANLAGEN REINIGER KONZENTRAT
|
||||
|
||||
PRODUCT DETAILS:
|
||||
- Name: Mellerud Photovoltaik & Solaranlagen Reiniger Konzentrat
|
||||
- Size: 0.5L concentrate
|
||||
- Price: 8,99 € (17,98 € per liter)
|
||||
- Function: Gentle and effective cleaning solution specifically for solar panels and photovoltaic systems
|
||||
- Removes: Dust, general dirt, soot residues, fine dust, and pollen
|
||||
- Special features: Streak-free, residue-free cleaning with water-repellent protection
|
||||
|
||||
MIXING RATIO:
|
||||
- Standard cleaning: 1:20 with water (ideally distilled water)
|
||||
|
||||
INGREDIENTS & SPECS:
|
||||
- Composition: Aqueous mixture of surfactants, complexing agents, and effectiveness enhancers
|
||||
- pH value: 5.70 - 6.50
|
||||
- Density: 1.020 kg/l
|
||||
|
||||
APPLICATION PROCESS:
|
||||
1. Remove coarse dirt, leaves, and debris by lightly sweeping (avoid intensive scrubbing)
|
||||
2. Mix concentrate 1:20 with water (preferably distilled water)
|
||||
3. Apply carefully with specialized solar/PV equipment, soft sponge, cloth, or squeegee
|
||||
4. Allow to work briefly
|
||||
5. Rinse thoroughly with clear water (preferably distilled water)
|
||||
|
||||
SUITABLE EQUIPMENT:
|
||||
- Specialized equipment for solar and PV systems
|
||||
- Particularly soft sponges
|
||||
- Soft cloths or squeegees
|
||||
- Avoid intensive scrubbing to prevent damage
|
||||
|
||||
BENEFITS:
|
||||
- Improves performance and lifespan of solar systems
|
||||
- Creates sustainable protection against re-contamination through water-repellent effect
|
||||
- Gentle cleaning without damage to sensitive modules
|
||||
- Streak-free and residue-free results
|
||||
- Suitable for all types of solar and PV panels
|
||||
|
||||
SAFETY INFORMATION:
|
||||
- Causes severe eye irritation
|
||||
- Keep out of reach of children
|
||||
- Wash hands thoroughly after use
|
||||
- In case of eye contact: rinse gently with water for several minutes
|
||||
- Remove contact lenses if present and continue rinsing
|
||||
- If eye irritation persists: seek medical advice
|
||||
|
||||
WHY DISTILLED WATER?
|
||||
- Minimizes residues and promotes streak-free cleaning
|
||||
- Supports optimal care of PV and solar systems
|
||||
|
||||
DRONE SERVICES:
|
||||
- Professional application using drones for hard-to-reach areas
|
||||
- Precise, even distribution of both AGO Quart and Mellerud products
|
||||
- Safe application on steep roofs and high buildings
|
||||
- Cost-effective compared to traditional scaffolding methods
|
||||
- Specialized equipment for solar panel cleaning via drone
|
||||
|
||||
SAFETY INFORMATION:
|
||||
- Use biocides safely
|
||||
- Always read labeling and product information
|
||||
- AGO Quart: Causes skin irritation (H315), serious eye damage (H318), very toxic to aquatic organisms (H410)
|
||||
- Mellerud: Causes severe eye irritation, keep away from children
|
||||
|
||||
CONTACT INFORMATION:
|
||||
AGO: AGO Sauberheit für Haus und Garten! GmbH & Co. KG, Brilloner Str. 39, 59909 Bestwig
|
||||
Phone: 02904 / 98 98 98-0, Email: info@agoshop.de
|
||||
|
||||
Mellerud: MELLERUD CHEMIE GMBH, Bernhard-Röttgen-Waldweg 20, 41379 Brüggen
|
||||
Phone: +49 (0) 2163 / 950 90 999, Email: shop@mellerud.de, experten-service@mellerud.de
|
||||
`;
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createChatWidget();
|
||||
this.attachEventListeners();
|
||||
this.loadConversationHistory();
|
||||
}
|
||||
|
||||
createChatWidget() {
|
||||
// Chat toggle button
|
||||
const chatButton = document.createElement('div');
|
||||
chatButton.id = 'ai-chat-toggle';
|
||||
chatButton.innerHTML = `
|
||||
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v3c0 .6.4 1 1 1 .2 0 .5-.1.7-.3L14.6 18H20c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"/>
|
||||
</svg>
|
||||
<span>KI-Assistent</span>
|
||||
`;
|
||||
|
||||
// Chat window
|
||||
const chatWindow = document.createElement('div');
|
||||
chatWindow.id = 'ai-chat-window';
|
||||
chatWindow.innerHTML = `
|
||||
<div class="chat-header">
|
||||
<h3>🤖 Luftglanz KI-Assistent</h3>
|
||||
<button id="chat-close">×</button>
|
||||
</div>
|
||||
<div class="chat-messages" id="chat-messages">
|
||||
<div class="message bot-message">
|
||||
<div class="message-content">
|
||||
Hallo! Ich bin Ihr KI-Assistent für Fragen zu unseren Drohnen-Reinigungsservices und AGO Quart Produkten. Wie kann ich Ihnen helfen?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input-container">
|
||||
<input type="text" id="chat-input" placeholder="Stellen Sie Ihre Frage..." />
|
||||
<button id="chat-send">
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(chatButton);
|
||||
document.body.appendChild(chatWindow);
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
const toggleButton = document.getElementById('ai-chat-toggle');
|
||||
const closeButton = document.getElementById('chat-close');
|
||||
const sendButton = document.getElementById('chat-send');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
|
||||
toggleButton.addEventListener('click', () => this.toggleChat());
|
||||
closeButton.addEventListener('click', () => this.closeChat());
|
||||
sendButton.addEventListener('click', () => this.sendMessage());
|
||||
|
||||
chatInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
this.sendMessage();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
toggleChat() {
|
||||
this.isOpen = !this.isOpen;
|
||||
const chatWindow = document.getElementById('ai-chat-window');
|
||||
const toggleButton = document.getElementById('ai-chat-toggle');
|
||||
|
||||
if (this.isOpen) {
|
||||
chatWindow.classList.add('open');
|
||||
toggleButton.classList.add('active');
|
||||
} else {
|
||||
chatWindow.classList.remove('open');
|
||||
toggleButton.classList.remove('active');
|
||||
}
|
||||
}
|
||||
|
||||
closeChat() {
|
||||
this.isOpen = false;
|
||||
const chatWindow = document.getElementById('ai-chat-window');
|
||||
const toggleButton = document.getElementById('ai-chat-toggle');
|
||||
|
||||
chatWindow.classList.remove('open');
|
||||
toggleButton.classList.remove('active');
|
||||
}
|
||||
|
||||
async sendMessage() {
|
||||
const input = document.getElementById('chat-input');
|
||||
const message = input.value.trim();
|
||||
|
||||
if (!message || this.isTyping) return;
|
||||
|
||||
// Add user message
|
||||
this.addMessage(message, 'user');
|
||||
input.value = '';
|
||||
|
||||
// Show typing indicator
|
||||
this.showTypingIndicator();
|
||||
|
||||
try {
|
||||
// Send to OpenAI
|
||||
const response = await this.callOpenAI(message);
|
||||
this.hideTypingIndicator();
|
||||
this.addMessage(response, 'bot');
|
||||
} catch (error) {
|
||||
this.hideTypingIndicator();
|
||||
this.addMessage('Entschuldigung, es gab einen Fehler bei der Kommunikation mit dem KI-System. Bitte versuchen Sie es erneut.', 'bot');
|
||||
console.error('OpenAI API Error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async callOpenAI(userMessage) {
|
||||
// Try PHP backend first (more secure), fallback to direct API call
|
||||
try {
|
||||
return await this.callPHPBackend(userMessage);
|
||||
} catch (error) {
|
||||
console.warn('PHP backend failed, trying direct API call:', error);
|
||||
return await this.callDirectAPI(userMessage);
|
||||
}
|
||||
}
|
||||
|
||||
async callPHPBackend(userMessage) {
|
||||
const response = await fetch('ai-chat-api.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
message: userMessage,
|
||||
history: this.conversationHistory.slice(-10) // Keep last 10 for context
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`PHP Backend error: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success) {
|
||||
throw new Error(data.error || 'Backend error');
|
||||
}
|
||||
|
||||
// Update conversation history
|
||||
this.conversationHistory.push(
|
||||
{ role: 'user', content: userMessage },
|
||||
{ role: 'assistant', content: data.message }
|
||||
);
|
||||
|
||||
this.saveConversationHistory();
|
||||
|
||||
return data.message;
|
||||
}
|
||||
|
||||
async callDirectAPI(userMessage) {
|
||||
const systemPrompt = `Du bist ein hilfsreicher KI-Assistent für Luftglanz, ein Unternehmen für professionelle Drohnen-basierte Dach- und Oberflächenreinigung.
|
||||
|
||||
WICHTIGE ANWEISUNGEN:
|
||||
- Antworte immer auf Deutsch
|
||||
- Verwende IMMER die höfliche Anrede "Sie" (niemals "du" oder "dir")
|
||||
- Sei freundlich, professionell und hilfsbereit
|
||||
- Nutze AUSSCHLIESSLICH die bereitgestellten Produktinformationen für präzise Antworten
|
||||
- Gib konkrete Produktdetails, Preise und Anwendungshinweise aus der Wissensbasis
|
||||
- Bei Fragen zu Solaranlagen: Erkläre dass SOWOHL AGO Quart ALS AUCH Mellerud geeignet sind
|
||||
- AGO Quart: Laut Hersteller sicher für Solar-Platten, wird von Reinigungsfirmen eingesetzt
|
||||
- Mellerud: Speziell für Solaranlagen entwickelt mit schonender Formel
|
||||
- Bei Fragen zu Algen/Grünbelägen auf Dächern, empfehle AGO Quart
|
||||
- Erwähne die Vorteile der Drohnen-Anwendung wenn relevant
|
||||
- Erkläre Unterschiede zwischen den Produkten detailliert basierend auf der Wissensbasis
|
||||
- Gib konkrete Mischungsverhältnisse und Preise an
|
||||
|
||||
WICHTIG: Du kennst diese BEIDEN spezifischen Produkte sehr genau:
|
||||
1. AGO Quart (19,90€) - für Algen, Grünbeläge, Flechten auf Dächern/Terrassen
|
||||
2. Mellerud Photovoltaik Reiniger (8,99€) - speziell für Solaranlagen
|
||||
|
||||
PRODUKTWISSEN: ${this.productKnowledge}
|
||||
|
||||
Beantworte Fragen zu:
|
||||
- Unterschiede zwischen AGO Quart und Mellerud Produkten
|
||||
- Spezifische Anwendung für Solaranlagen vs. Dächer
|
||||
- Konkrete Preise, Mischungsverhältnisse und Reichweiten
|
||||
- Drohnen-Anwendung beider Produkte
|
||||
- Sicherheitshinweise für beide Produkte
|
||||
- Warum destilliertes Wasser bei Mellerud wichtig ist
|
||||
- Kontaktdaten beider Hersteller`;
|
||||
|
||||
const messages = [
|
||||
{ role: 'system', content: systemPrompt },
|
||||
...this.conversationHistory.slice(-10), // Keep last 10 messages for context
|
||||
{ role: 'user', content: userMessage }
|
||||
];
|
||||
|
||||
const response = await fetch('https://api.openai.com/v1/chat/completions', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${this.apiKey}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: 'gpt-3.5-turbo',
|
||||
messages: messages,
|
||||
max_tokens: 500,
|
||||
temperature: 0.7,
|
||||
presence_penalty: 0.1,
|
||||
frequency_penalty: 0.1
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`OpenAI API error: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const assistantMessage = data.choices[0].message.content;
|
||||
|
||||
// Update conversation history
|
||||
this.conversationHistory.push(
|
||||
{ role: 'user', content: userMessage },
|
||||
{ role: 'assistant', content: assistantMessage }
|
||||
);
|
||||
|
||||
this.saveConversationHistory();
|
||||
|
||||
return assistantMessage;
|
||||
}
|
||||
|
||||
addMessage(content, sender) {
|
||||
const messagesContainer = document.getElementById('chat-messages');
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.className = `message ${sender}-message`;
|
||||
|
||||
const messageContent = document.createElement('div');
|
||||
messageContent.className = 'message-content';
|
||||
messageContent.textContent = content;
|
||||
|
||||
messageDiv.appendChild(messageContent);
|
||||
messagesContainer.appendChild(messageDiv);
|
||||
|
||||
// Auto-scroll to bottom
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
showTypingIndicator() {
|
||||
this.isTyping = true;
|
||||
const messagesContainer = document.getElementById('chat-messages');
|
||||
|
||||
const typingDiv = document.createElement('div');
|
||||
typingDiv.id = 'typing-indicator';
|
||||
typingDiv.className = 'message bot-message typing';
|
||||
typingDiv.innerHTML = `
|
||||
<div class="message-content">
|
||||
<div class="typing-dots">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
messagesContainer.appendChild(typingDiv);
|
||||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||||
}
|
||||
|
||||
hideTypingIndicator() {
|
||||
this.isTyping = false;
|
||||
const typingIndicator = document.getElementById('typing-indicator');
|
||||
if (typingIndicator) {
|
||||
typingIndicator.remove();
|
||||
}
|
||||
}
|
||||
|
||||
saveConversationHistory() {
|
||||
try {
|
||||
localStorage.setItem('luftglanz_chat_history', JSON.stringify(this.conversationHistory));
|
||||
} catch (error) {
|
||||
console.warn('Could not save conversation history:', error);
|
||||
}
|
||||
}
|
||||
|
||||
loadConversationHistory() {
|
||||
try {
|
||||
const saved = localStorage.getItem('luftglanz_chat_history');
|
||||
if (saved) {
|
||||
this.conversationHistory = JSON.parse(saved);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Could not load conversation history:', error);
|
||||
this.conversationHistory = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize chat when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
window.aiChat = new AIChat();
|
||||
});
|
||||
@@ -11,6 +11,7 @@
|
||||
<link rel="stylesheet" href="../css/components/footer.css">
|
||||
<link rel="stylesheet" href="../css/components/hero.css">
|
||||
<link rel="stylesheet" href="../css/components/forms.css">
|
||||
<link rel="stylesheet" href="../css/components/ai-chat.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #3498db; /* Clean blue primary */
|
||||
@@ -543,6 +544,7 @@
|
||||
|
||||
<script src="../js/translations.js"></script>
|
||||
<script src="../js/language-manager.js"></script>
|
||||
<script src="../js/ai-chat.js"></script>
|
||||
<script>
|
||||
// Add star backgrounds dynamically
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
<link rel="stylesheet" href="../css/components/header.css">
|
||||
<link rel="stylesheet" href="../css/components/footer.css">
|
||||
<link rel="stylesheet" href="../css/components/mobile-menu.css">
|
||||
<link rel="stylesheet" href="../css/components/ai-chat.css">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
@@ -383,6 +384,7 @@
|
||||
|
||||
<script src="../js/translations.js"></script>
|
||||
<script src="../js/language-manager.js"></script>
|
||||
<script src="../js/ai-chat.js"></script>
|
||||
<script>
|
||||
// Direct mobile menu implementation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<link rel="stylesheet" href="../css/components/footer.css">
|
||||
<link rel="stylesheet" href="../css/components/hero.css">
|
||||
<link rel="stylesheet" href="../css/components/forms.css">
|
||||
<link rel="stylesheet" href="../css/components/ai-chat.css">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #3498db; /* Clean blue primary */
|
||||
@@ -394,6 +395,7 @@
|
||||
|
||||
<script src="../js/translations.js"></script>
|
||||
<script src="../js/language-manager.js"></script>
|
||||
<script src="../js/ai-chat.js"></script>
|
||||
<script src="../js/drone-image-animation.js"></script>
|
||||
<script>
|
||||
// Smooth scrolling
|
||||
|
||||
Reference in New Issue
Block a user