diff --git a/html/drone/AI-CHAT-README.md b/html/drone/AI-CHAT-README.md new file mode 100644 index 0000000..a248557 --- /dev/null +++ b/html/drone/AI-CHAT-README.md @@ -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 `` Ihrer HTML-Seiten ein: +```html + +``` + +Fügen Sie vor dem schließenden `` Tag ein: +```html + +``` + +### 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+ diff --git a/html/drone/ai-chat-api.php b/html/drone/ai-chat-api.php new file mode 100644 index 0000000..43931d9 --- /dev/null +++ b/html/drone/ai-chat-api.php @@ -0,0 +1,255 @@ + '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 +]); +?> diff --git a/html/drone/ai-chat-demo.html b/html/drone/ai-chat-demo.html new file mode 100644 index 0000000..cc6a264 --- /dev/null +++ b/html/drone/ai-chat-demo.html @@ -0,0 +1,177 @@ + + + + + + AI Chat Test - Luftglanz + + + + + +
+

🤖 Luftglanz KI-Assistent Demo

+ +
+

Willkommen zum KI-Assistenten Test!

+

Dieser intelligente Chatbot wurde speziell für Luftglanz entwickelt und verfügt über umfassendes Wissen über:

+ +
+ +
+

Testen Sie den Assistenten mit diesen Beispielfragen:

+ + + + + + +
+ +
+
+

🎯 Präzise Antworten

+

Basiert auf echten Produktdaten und technischen Spezifikationen

+
+
+

🇩🇪 Auf Deutsch

+

Kommuniziert natürlich in deutscher Sprache

+
+
+

💡 Intelligent

+

Versteht Kontext und gibt passende Empfehlungen

+
+
+

📱 Responsiv

+

Funktioniert perfekt auf allen Geräten

+
+
+ +
+

Der Chat-Button erscheint unten rechts auf der Seite!

+

Klicken Sie darauf, um mit dem KI-Assistenten zu sprechen.

+
+
+ + + + + diff --git a/html/drone/css/components/ai-chat.css b/html/drone/css/components/ai-chat.css new file mode 100644 index 0000000..f9cc97a --- /dev/null +++ b/html/drone/css/components/ai-chat.css @@ -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; + } +} diff --git a/html/drone/index.html b/html/drone/index.html index 747e02b..1babe40 100644 --- a/html/drone/index.html +++ b/html/drone/index.html @@ -11,6 +11,7 @@ +