Meine KI
by PhantomTiger31521 lines8.6 KB
```
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Meine KI</title>
<style>
*{box-sizing:border-box}
body{
margin:0;
height:100vh;
background:#08080d;
color:white;
font-family:Arial,sans-serif;
overflow:hidden;
}
#loading{
position:fixed;
inset:0;
z-index:99;
background:#08080d;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}
#loading h1{
font-size:45px;
margin-bottom:30px;
}
.loader{
width:400px;
max-width:80%;
height:18px;
background:#22222d;
border-radius:20px;
overflow:hidden;
}
#bar{
width:0%;
height:100%;
background:linear-gradient(90deg,#7c3aed,#06b6d4);
}
#percent{
margin-top:12px;
color:#aaa;
}
#app{
display:none;
height:100vh;
flex-direction:column;
}
header{
height:70px;
padding:0 22px;
display:flex;
align-items:center;
background:#13131c;
border-bottom:1px solid #292936;
}
header h1{
margin:0;
font-size:23px;
}
.online{
margin-left:15px;
color:#4ade80;
font-size:14px;
}
#chat{
flex:1;
overflow-y:auto;
padding:25px;
}
.message{
max-width:800px;
margin:12px 0;
padding:15px 18px;
border-radius:16px;
line-height:1.5;
white-space:pre-wrap;
}
.user{
margin-left:auto;
background:#6d28d9;
}
.ai{
margin-right:auto;
background:#1b1b26;
}
.ai img{
display:block;
width:100%;
max-width:700px;
margin-top:15px;
border-radius:14px;
}
#bottom{
padding:15px;
background:#13131c;
border-top:1px solid #292936;
}
#inputBox{
max-width:950px;
margin:auto;
display:flex;
gap:8px;
}
#input{
flex:1;
min-width:0;
padding:16px;
border:0;
outline:0;
border-radius:12px;
background:#242430;
color:white;
font-size:16px;
}
button{
border:0;
border-radius:12px;
padding:0 18px;
background:#7c3aed;
color:white;
cursor:pointer;
font-size:15px;
}
button:hover{
background:#8b5cf6;
}
#imageButton{
background:#0891b2;
}
#imageButton:hover{
background:#06b6d4;
}
</style>
</head>
<body>
<div id="loading">
<h1>🤖 Meine KI</h1>
<div class="loader">
<div id="bar"></div>
</div>
<div id="percent">0%</div>
</div>
<div id="app">
<header>
<h1>🤖 Meine KI</h1>
<span class="online">● Online</span>
</header>
<main id="chat">
<div class="message ai">
Hallo! 👋
Ich bin deine KI.
Du kannst mir Fragen stellen oder echte Bilder erstellen.
Schreibe zum Beispiel:
„Erstelle ein Bild von einem Roboter auf dem Mars.“
</div>
</main>
<div id="bottom">
<div id="inputBox">
<input
id="input"
type="text"
placeholder="Schreibe deiner KI..."
autocomplete="off"
>
<button onclick="sendMessage()">
Senden
</button>
<button
id="imageButton"
onclick="createImage()"
>
🖼️ Bild
</button>
</div>
</div>
</div>
<script>
/* =========================================
LADEBALKEN
0% → 99% in 2 Sekunden
99% → 100% nach weiteren 3 Sekunden
========================================= */
const loading =
document.getElementById("loading");
const app =
document.getElementById("app");
const bar =
document.getElementById("bar");
const percent =
document.getElementById("percent");
let progress = 0;
const startTime = Date.now();
const loadingInterval = setInterval(() => {
const elapsed = Date.now() - startTime;
/*
Die ersten 2 Sekunden:
0% bis 99%
*/
if (elapsed < 2000) {
progress =
Math.floor(
(elapsed / 2000) * 99
);
bar.style.width =
progress + "%";
percent.textContent =
progress + "%";
}
/*
Nach 2 Sekunden:
exakt 99%
*/
else if (elapsed < 5000) {
progress = 99;
bar.style.width = "99%";
percent.textContent = "99%";
}
/*
Nach insgesamt 5 Sekunden:
100%
*/
else {
clearInterval(loadingInterval);
bar.style.width = "100%";
percent.textContent = "100%";
setTimeout(() => {
loading.style.display = "none";
app.style.display = "flex";
document.getElementById(
"input"
).focus();
},300);
}
},20);
/* =========================================
CHAT
========================================= */
const input =
document.getElementById("input");
const chat =
document.getElementById("chat");
let conversation = [];
input.addEventListener("keydown",function(e){
if(e.key === "Enter"){
sendMessage();
}
});
function addMessage(text,type){
const div =
document.createElement("div");
div.className =
"message " + type;
div.textContent =
text;
chat.appendChild(div);
chat.scrollTop =
chat.scrollHeight;
return div;
}
/* =========================================
TEXT-KI
========================================= */
async function sendMessage(){
const text =
input.value.trim();
if(!text)return;
addMessage(text,"user");
input.value = "";
const answerBox =
addMessage(
"🤔 KI denkt nach...",
"ai"
);
conversation.push({
role:"user",
content:text
});
try{
const response =
await fetch("/api/chat",{
method:"POST",
headers:{
"Content-Type":
"application/json"
},
body:JSON.stringify({
messages:conversation
})
});
const data =
await response.json();
if(!response.ok){
throw new Error(
data.error ||
"KI-Fehler"
);
}
answerBox.textContent =
data.answer;
conversation.push({
role:"assistant",
content:data.answer
});
chat.scrollTop =
chat.scrollHeight;
}catch(error){
answerBox.textContent =
"❌ Fehler:\n\n" +
error.message;
}
}
/* =========================================
BILD-KI
========================================= */
async function createImage(){
let prompt =
input.value.trim();
if(!prompt){
prompt =
window.prompt(
"Was soll die KI zeichnen?"
);
}
if(!prompt)return;
addMessage(
"🖼️ " + prompt,
"user"
);
input.value = "";
const imageBox =
addMessage(
"🎨 Bild wird erstellt...",
"ai"
);
try{
const response =
await fetch("/api/image",{
method:"POST",
headers:{
"Content-Type":
"application/json"
},
body:JSON.stringify({
prompt:prompt
})
});
const data =
await response.json();
if(!response.ok){
throw new Error(
data.error ||
"Bild konnte nicht erstellt werden."
);
}
imageBox.textContent =
"🎨 Fertig!";
const img =
document.createElement("img");
img.src =
data.image;
img.alt =
prompt;
imageBox.appendChild(img);
chat.scrollTop =
chat.scrollHeight;
}catch(error){
imageBox.textContent =
"❌ Fehler beim Erstellen des Bildes:\n\n" +
error.message;
}
}
</script>
</body>
</html>
```Game Source: Meine KI
Creator: PhantomTiger31
Libraries: none
Complexity: complex (521 lines, 8.6 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: meine-ki-phantomtiger31" to link back to the original. Then publish at arcadelab.ai/publish.