Unser Dreamcodes Cafeteria Chat System Script bietet eine innovative, interaktive Art, mit einer KI wie mit einem alten Kumpel zu plaudern, direkt im Browser und in echter Cafeteria-Atmosphäre. Jeder Nutzer erhält einen eigenen „Tisch“ mit separatem Chat-Verlauf, der automatisch gespeichert wird, sodass Gespräche beim Neuladen erhalten bleiben.
Highlights:
- Mehrbenutzer-fähig: Jeder Nutzer hat einen eigenen Chat, gespeichert über Session-ID.
- Dynamische KI-Antworten: Die KI via OpenAI GPT API antwortet locker, umgangssprachlich und mit gelegentlichen Witzen.
- Cafeteria-Design: Attraktives Hintergrundbild, abgerundete Chatblasen, responsive Oberfläche.
- AJAX-basiert: Nachrichten erscheinen sofort, ohne die Seite neu zu laden.
- Einfache Erweiterung: Emojis, längere Gespräche oder Admin-Panel können integriert werden.
Unser Script eignet sich ideal für Websites, Blogs oder Lernplattformen, um eine interaktive, persönliche Chat-Erfahrung zu schaffen. Nutzer können direkt und unkompliziert in den Dialog treten, während ihre Konversationen automatisch protokolliert werden.
<?php
session_start();
// API-Key und Speicher-Datei
$openai_api_key = 'DEIN_OPENAI_API_KEY';
$chatDir = 'chat_sessions';
if(!is_dir($chatDir)) mkdir($chatDir, 0777, true);
// eindeutiger Benutzer-Tisch
$sessionId = session_id();
$chatFile = "$chatDir/chat_$sessionId.json";
// Chat-Nachricht empfangen
if(isset($_POST['message'])){
$userMessage = $_POST['message'];
// GPT API Anfrage vorbereiten
$data = [
"model" => "gpt-3.5-turbo",
"messages" => [
["role" => "system", "content" => "Du bist ein alter Kumpel im Café. Locker, umgangssprachlich, kurze Sätze, zwischendurch Witze, freundlich, lustig."],
["role" => "user", "content" => $userMessage]
],
"temperature" => 0.8
];
$ch = curl_init('https://api.openai.com/v1/chat/completions');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Authorization: Bearer '.$openai_api_key
]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
$result = curl_exec($ch);
curl_close($ch);
$res = json_decode($result, true);
$reply = $res['choices'][0]['message']['content'] ?? "Hmm, da bin ich mir gerade nicht sicher...";
// Chat lokal speichern
$chatHistory = [];
if(file_exists($chatFile)){
$chatHistory = json_decode(file_get_contents($chatFile), true);
}
$chatHistory[] = ["role"=>"user","text"=>$userMessage];
$chatHistory[] = ["role"=>"ai","text"=>$reply];
file_put_contents($chatFile, json_encode($chatHistory, JSON_PRETTY_PRINT));
echo json_encode(['reply'=>$reply]);
exit;
}
// Verlauf abfragen
if(isset($_GET['load'])){
$chatHistory = [];
if(file_exists($chatFile)){
$chatHistory = json_decode(file_get_contents($chatFile), true);
}
echo json_encode($chatHistory);
exit;
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dreamcodes - Cafeteria Chat – Dein Tisch</title>
<style>
body {
font-family: Arial, sans-serif;
background: url('cafeteria-bg.jpg') no-repeat center center fixed;
background-size: cover;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#chat-container {
background: rgba(255, 255, 255, 0.95);
width: 400px;
max-width: 90%;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
overflow: hidden;
display: flex;
flex-direction: column;
}
#chat-box {
flex: 1;
padding: 10px;
overflow-y: auto;
max-height: 500px;
}
.message { margin-bottom: 10px; line-height: 1.4; }
.user { text-align: right; }
.user .text { background: #007bff; color: white; display: inline-block; padding: 8px 12px; border-radius: 15px; }
.ai { text-align: left; }
.ai .text { background: #e0e0e0; color: black; display: inline-block; padding: 8px 12px; border-radius: 15px; }
#chat-form { display: flex; border-top: 1px solid #ccc; }
#chat-input { flex: 1; padding: 10px; border: none; outline: none; font-size: 14px; }
#chat-submit { padding: 10px 15px; border: none; background: #007bff; color: white; cursor: pointer; font-size: 14px; }
#chat-submit:hover { background: #0056b3; }
</style>
</head>
<body>
<div id="chat-container">
<div id="chat-box"></div>
<form id="chat-form">
<input type="text" id="chat-input" placeholder="Schreib etwas..." autocomplete="off" required>
<button type="submit" id="chat-submit">Senden</button>
</form>
</div>
<div style="text-align:center; padding:10px; font-size:12px; color:#555; background:#f1f1f1; border-top:1px solid #ccc;">
<p class="footer-note">Hinweis: Die Chatverläufe bleiben lokal gespeichert. Powered by <a href="https://www.dreamcodes.net" target="_blank" style="color:#007bff; text-decoration:none;">Dreamcodes</a>.</p>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
const chatBox = $('#chat-box');
function addMessage(sender, text){
const msgDiv = $('<div class="message '+sender+'"><div class="text"></div></div>');
msgDiv.find('.text').text(text);
chatBox.append(msgDiv);
chatBox.scrollTop(chatBox[0].scrollHeight);
}
// Chatverlauf laden
$.getJSON('?load=1', function(data){
if(data.length === 0){
addMessage('ai', 'Hey! Dein Tisch ist bereit. Stell dir vor, wir sitzen gemütlich im Café.');
} else {
data.forEach(msg => addMessage(msg.role === 'user' ? 'user':'ai', msg.text));
}
});
$('#chat-form').on('submit', function(e){
e.preventDefault();
const userInput = $('#chat-input').val().trim();
if(!userInput) return;
addMessage('user', userInput);
$('#chat-input').val('');
$.post('', { message: userInput }, function(data){
addMessage('ai', data.reply);
}, 'json');
});
});
</script>
</body>
</html>
