Freitag, 26 September 2025

Top 5 diese Woche

Ähnliche Tutorials

Cafeteria KI Chat

Komplette Webseiten
Dreamcodes
| Dreamcodes
5 min.Lesezeit

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="http://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>
Vorheriges Tutorial
Mehrbenutzer KI Chat
Nächstes Tutorial
Image Hoster
Dreamcodes
Dreamcodeshttp://www.dreamcodes.net

Hier etwas für dich dabei?