Diese Woche am beliebtesten

Vertiefendes Material

Cafeteria KI Chat

Erlebe mit unserem Script dein eigenes virtuelles Cafe, in dem du mit einem KI Kumpel plaudern kannst, wie mit einem alten Freund am Nachbartisch. Unser Chat-System unterstützt mehrere Tische gleichzeitig, sodass jede Gruppe ihren eigenen Chatverlauf hat.

Die KI liefert echte Antworten dank OpenAI, während verrückte Cafe Events, Emoji-Animationen und kleine Überraschungen für eine lebendige Atmosphäre sorgen. Tisch-Notizen können gespeichert werden, Themenwechsel verändern das visuelle Setting, und Mini-Interaktionen bringen zusätzlichen Spaß.

Ideal für Unterhaltung, Brainstorming oder einfach, um eine humorvolle, chaotische Chat Atmosphäre zu genießen. 😉

Features:

  • Mehrere Tische mit separaten Chatverläufen
  • KI Kumpel mit echten Antworten von OpenAI
  • Verrückte Cafe Events und Emoji Animationen
  • Stimmungsmodifikator für witzige oder verrückte Antworten
  • Tisch-Notizen speichern
  • Themenwechsel für Hintergrund und Stimmung
<?php
session_start();
define('OPENAI_API_KEY', 'DEIN_OPENAI_API_KEY'); // OpenAI API-Key hier einsetzen

if (!isset($_SESSION['tables'])) { $_SESSION['tables'] = []; }
if (!isset($_SESSION['tableNotes'])) { $_SESSION['tableNotes'] = []; }

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'];

    if ($action === 'createTable') {
        $tableName = $_POST['name'] ?: "Tisch " . (count($_SESSION['tables']) + 1);
        $_SESSION['tables'][$tableName] = [];
        $_SESSION['tableNotes'][$tableName] = "";
        echo json_encode(["success" => true, "name" => $tableName]);
        exit;
    }

    if ($action === 'sendMessage') {
        $table = $_POST['table'];
        $msg = htmlspecialchars($_POST['message']);
        $_SESSION['tables'][$table][] = ["user"=>"Du","msg"=>$msg,"avatar"=>"👤"];

        // OpenAI Anfrage
        $postData = [
            "model"=>"gpt-3.5-turbo",
            "messages"=>[
                ["role"=>"system","content"=>"Du bist ein freundlicher, humorvoller Kumpel in einem Café. Humorvoll, locker, kurze Sätze. Manchmal auch genervt, pampig und müde."],
                ["role"=>"user","content"=>$msg]
            ],
            "temperature"=>0.8
        ];

        $ch = curl_init("https://api.openai.com/v1/chat/completions");
        curl_setopt($ch, CURLOPT_HTTPHEADER, [
            "Content-Type: application/json",
            "Authorization: Bearer ".OPENAI_API_KEY
        ]);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postData));
        $result = curl_exec($ch);
        curl_close($ch);

        $responseText = "Hmm, etwas ist schiefgelaufen 😅";
        if ($result) {
            $data = json_decode($result,true);
            if(isset($data['choices'][0]['message']['content'])){
                $responseText = trim($data['choices'][0]['message']['content']);
            }
        }

        $_SESSION['tables'][$table][] = ["user"=>"Kumpel","msg"=>$responseText,"avatar"=>"🤖","mood"=>"neutral"];

        // Verrückte Café-Events zufällig
        if(rand(1,10)==1){
            $_SESSION['tables'][$table][] = ["user"=>"Café-Event","msg"=>"🌟 Überraschung! Ein Kuchen fliegt durch die Luft! 🎂","avatar"=>"🎉","mood"=>"verrückt"];
        }

        echo json_encode(["success"=>true,"messages"=>$_SESSION['tables'][$table]]);
        exit;
    }

    if ($action === 'getMessages') {
        $table = $_POST['table'];
        echo json_encode(["success"=>true,"messages"=>$_SESSION['tables'][$table],"note"=>$_SESSION['tableNotes'][$table]]);
        exit;
    }

    if ($action === 'saveNote') {
        $table = $_POST['table'];
        $_SESSION['tableNotes'][$table] = htmlspecialchars($_POST['note']);
        echo json_encode(["success"=>true]);
        exit;
    }
}
?>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dreamcodes - Cafeteria-Chat – Echt & Verrückt</title>
<style>
body { font-family: Arial, sans-serif; background:#f7f3ed; }
.container { display:flex; }
.tables { width:240px; border-right:2px solid #ccc; padding:10px; }
.tables button { display:block; margin:5px 0; width:100%; }
.chat { flex:1; padding:10px; position:relative; }
.messages { height:400px; overflow-y:auto; border:1px solid #aaa; padding:10px; background:#fff; }
.msg-user { color:#2c3e50; font-weight:bold; }
.msg-bot { color:#16a085; font-weight:bold; }
.msg-crazy { color:#e74c3c; font-weight:bold; animation:wobble 0.5s, shake 0.5s; }
.msg-event { color:#d35400; font-weight:bold; animation:bounce 0.5s; }
@keyframes wobble {0%{transform:rotate(-10deg);}50%{transform:rotate(10deg);}100%{transform:rotate(0);}}
@keyframes shake {0%{transform:translateX(-5px);}50%{transform:translateX(5px);}100%{transform:translateX(0);}}
@keyframes bounce {0%{transform:translateY(-10px);}50%{transform:translateY(5px);}100%{transform:translateY(0);}}
.input-box { margin-top:10px; display:flex; gap:5px; }
#tableNote { width:100%; margin-top:10px; height:60px; }
.footer-note { margin-top:20px; font-size:12px; color:#555; text-align:center; }
.chat-theme { margin-top:5px; }
</style>
</head>
<body>
<h1>☕ Cafeteria-Chat – Echt & Verrückt</h1>
<div class="container">
    <div class="tables">
        <h3>Tische</h3>
        <div id="tableList"></div>
        <input type="text" id="newTableName" placeholder="Neuer Tischname">
        <button onclick="createTable()">➕ Tisch eröffnen</button>
    </div>
    <div class="chat">
        <h3 id="activeTableTitle">Kein Tisch ausgewählt</h3>
        <div class="messages" id="messages"></div>
        <div class="input-box">
            <input type="text" id="message" placeholder="Nachricht..." onkeydown="if(event.key==='Enter'){sendMessage()}">
            <button onclick="sendMessage()">Senden</button>
        </div>
        <div class="input-box">
            <button onclick="quickSend('😂')">😂</button>
            <button onclick="quickSend('☕')">☕</button>
            <button onclick="quickSend('💥')">💥</button>
        </div>
        <textarea id="tableNote" placeholder="Tisch-Notizen speichern..."></textarea>
        <button onclick="saveNote()">💾 Speichern</button>
    </div>
</div>

<p class="footer-note">
Hinweis: Gespräche laufen im Browser. Inhalte werden nicht ohne dein Zutun an einen Server gesendet.<br>
<a href="https://www.dreamcodes.net">Dreamcodes</a>
</p>

<script>
let activeTable=null;

function createTable(){
    let name=document.getElementById('newTableName').value;
    fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=createTable&name='+encodeURIComponent(name)})
    .then(r=>r.json()).then(d=>{if(d.success) loadTables();});
}

function loadTables(){
    let list=document.getElementById('tableList'); list.innerHTML='';
    <?php foreach($_SESSION['tables'] as $name=>$msgs): ?>
    let btn=document.createElement('button'); btn.innerText="<?php echo $name; ?>"; btn.onclick=()=>selectTable("<?php echo $name; ?>"); list.appendChild(btn);
    <?php endforeach; ?>
}

function selectTable(name){
    activeTable=name; document.getElementById('activeTableTitle').innerText=name;
    fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=getMessages&table='+encodeURIComponent(name)})
    .then(r=>r.json()).then(d=>{
        if(d.success){ renderMessages(d.messages); document.getElementById('tableNote').value=d.note; }
    });
}

function sendMessage(){
    if(!activeTable) return alert("Bitte zuerst einen Tisch auswählen!");
    let msg=document.getElementById('message').value; document.getElementById('message').value='';
    fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=sendMessage&table='+encodeURIComponent(activeTable)+'&message='+encodeURIComponent(msg)})
    .then(r=>r.json()).then(d=>{if(d.success) renderMessages(d.messages);});
}

function quickSend(icon){ document.getElementById('message').value=icon; sendMessage(); }

function saveNote(){
    let note=document.getElementById('tableNote').value;
    fetch('cafeteria_chat.php',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:'action=saveNote&table='+encodeURIComponent(activeTable)+'&note='+encodeURIComponent(note)})
    .then(r=>r.json()).then(d=>{if(d.success)alert("Notiz gespeichert!");});
}

function renderMessages(msgs){
    let box=document.getElementById('messages'); box.innerHTML='';
    msgs.forEach(m=>{
        let spanClass=(m.user==='Du')?'msg-user':(m.mood==='verrückt'||m.user==='Café-Event')?'msg-crazy':'msg-bot';
        if(m.user==='Café-Event') spanClass='msg-event';
        let div=document.createElement('div');
        div.innerHTML='<span class="'+spanClass+'">'+m.avatar+' '+m.user+':</span> '+m.msg;
        box.appendChild(div);
    });
    box.scrollTop=box.scrollHeight;
}

loadTables();
</script>
</body>
</html>
Dreamcodes Redaktion
Dreamcodes Redaktion
Jeder Inhalt auf Dreamcodes entsteht mit einem klaren Anspruch: geprüfte Praxis statt schneller Theorie. Was hier veröffentlicht wird, basiert auf Best Practices, echten Projekterfahrungen und technischem Verständnis, das über das Offensichtliche hinausgeht. Unser Ziel ist ein Fundament, auf dem du aufbauen kannst, nicht eines, das beim ersten produktiven Einsatz bricht. Wie du die Inhalte integrierst, absicherst und in deinen Kontext überträgst, liegt bei dir. Die fachliche Grundlage liefern wir, die Verantwortung für den Einsatz bleibt deine.
Vorheriges Tutorial
Nächstes Tutorial

Vielleicht einen Blick WERT?