<html><head><base href="https://bonzi.ai/"><title>Bonzi.AI</title></head><body><style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-image: url('https://external-preview.redd.it/uhq5zTcMPM3tOW_fbUz4PayDt_5pkEXdyXXoRWs3XOg.jpg?auto=webp&s=e06461124c1ccfdba7e9ece763b644ff68eeb06b');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#peedyCanvas, #bonziCanvas, #clippyCanvas, #robbyCanvas, #maxCanvas, #kinitoCanvas {
position: absolute;
transform-origin: top left;
}
#modelSelect {
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
font-size: 16px;
padding: 5px;
}
#topicInput {
position: absolute;
top: 50px;
left: 10px;
z-index: 1000;
font-size: 16px;
padding: 5px;
width: 200px;
}
#submitTopic {
position: absolute;
top: 50px;
left: 220px;
z-index: 1000;
font-size: 16px;
padding: 5px;
}
#toggleDrag {
position: absolute;
top: 90px;
left: 10px;
z-index: 1000;
font-size: 16px;
padding: 5px;
}
.speechBubble {
position: absolute;
background-color: #fff;
border: 2px solid #000;
border-radius: 10px;
padding: 10px;
max-width: 200px;
font-family: Arial, sans-serif;
font-size: 14px;
display: none;
z-index: 1001;
}
.speechBubble:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: #fff;
border-bottom: 0;
margin-left: -10px;
}
#watermark {
position: fixed;
bottom: 10px;
right: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: bold;
z-index: 1002;
}
#credits {
position: fixed;
bottom: 30px;
right: 10px;
font-family: Arial, sans-serif;
font-size: 12px;
color: #333;
z-index: 1002;
}
#btcEmoji {
position: fixed;
top: 10px;
right: 10px;
width: 48px;
height: 48px;
cursor: move;
z-index: 1003;
}
</style>
<select id="modelSelect">
<option value="llama-3-70b-chat-turbo" selected>llama-3-70b-chat-turbo</option>
<option value="gpt-3.5-turbo">gpt-3.5-turbo (OpenAI)</option>
<option value="claude-2">claude-2 (Anthropic)</option>
<option value="palm-2-chat-bison">palm-2-chat-bison (Google)</option>
<option value="mistral-7b-instruct">mistral-7b-instruct (Mistral AI)</option>
<option value="llama-2-70b-chat">llama-2-70b-chat (Meta)</option>
<option value="command-nightly">command-nightly (Cohere)</option>
<option value="yi-34b-chat">yi-34b-chat (01.AI)</option>
</select>
<input type="text" id="topicInput" placeholder="Enter a topic">
<button id="submitTopic">Submit</button>
<button id="toggleDrag">Start Dragging</button>
<canvas id="peedyCanvas" width="160" height="128"></canvas>
<canvas id="bonziCanvas" width="200" height="160"></canvas>
<canvas id="clippyCanvas" width="200" height="160"></canvas>
<canvas id="robbyCanvas" width="200" height="160"></canvas>
<canvas id="maxCanvas" width="200" height="160"></canvas>
<canvas id="kinitoCanvas" width="200" height="200"></canvas>
<div id="peedySpeechBubble" class="speechBubble"></div>
<div id="bonziSpeechBubble" class="speechBubble"></div>
<div id="clippySpeechBubble" class="speechBubble"></div>
<div id="robbySpeechBubble" class="speechBubble"></div>
<div id="maxSpeechBubble" class="speechBubble"></div>
<div id="kinitoSpeechBubble" class="speechBubble"></div>
<div id="watermark">
<span style="color: green;">made </span>
<span style="color: yellow;">by the </span>
<span style="color: blue;">FafaelDuarte </span>
🇧🇷
</div>
<div id="credits">
Improved by Austin
</div>
<img id="btcEmoji" src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" alt="Bitcoin logo" draggable="false">
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
function range(start, end) {
return Array.from({length: end - start + 1}, (_, i) => i + start);
}
let stage, peedySprite, bonziStage, bonziSprite, clippyStage, clippySprite, robbyStage, robbySprite, maxStage, maxSprite, kinitoStage, kinitoSprite;
let isDraggingEnabled = false;
const peedySpriteSheet = new createjs.SpriteSheet({
images: ["https://raw.githubusercontent.com/bonziworld29/BonziWORLD-Revived-Server/main/client/www/img/agents/peedy.png"],
frames: {width: 160, height: 128},
animations: {
idle: 0,
surf_away: { frames: range(360, 412), next: "gone", speed: 1},
surf_intro: { frames: range(823, 848), next: "idle", speed: 1},
}
});
const bonziSpriteSheet = new createjs.SpriteSheet({
images: ["https://raw.githubusercontent.com/bonziworld29/BonziWORLD-Revived-Server/main/client/www/img/agents/purple.png"],
frames: {width: 200, height: 160},
animations: {
idle: 0,
enter: [277, 302, "idle", 0.25],
leave: [16, 39, 40, 0.25],
}
});
const clippySpriteSheet = new createjs.SpriteSheet({
images: ["https://raw.githubusercontent.com/bonziworld29/BonziWORLD-Revived-Server/main/client/www/img/agents/clippy.png"],
frames: {width: 200, height: 160},
animations: {
idle: 0,
}
});
const robbySpriteSheet = new createjs.SpriteSheet({
images: ["https://raw.githubusercontent.com/bonziworld29/BonziWORLD-Revived-Server/main/client/www/img/agents/robby.png"],
frames: {width: 200, height: 160},
animations: {
idle: 0,
}
});
const maxSpriteSheet = new createjs.SpriteSheet({
images: ["https://raw.githubusercontent.com/bonziworld29/BonziWORLD-Revived-Server/main/client/www/img/agents/max.png"],
frames: {width: 200, height: 160},
animations: {
idle: 0,
}
});
const kinitoSpriteSheet = new createjs.SpriteSheet({
images: ["https://static.wikia.nocookie.net/kinitopedia/images/b/bc/KinitoOfficialRender.png"],
frames: {width: 200, height: 200},
animations: {
idle: 0,
}
});
function init() {
initPeedy();
initBonzi();
initClippy();
initRobby();
initMax();
initKinito();
// Fetch AI models
fetchAIModels();
// Add event listener for topic submission
document.getElementById('submitTopic').addEventListener('click', handleTopicSubmission);
// Add event listener for toggle dragging
document.getElementById('toggleDrag').addEventListener('click', toggleDragging);
// Set initial size and add resize listener
resizeCanvases();
window.addEventListener("resize", resizeCanvases);
// Make BTC emoji draggable
makeBtcEmojiDraggable();
}
function initPeedy() {
stage = new createjs.Stage("peedyCanvas");
peedySprite = new createjs.Sprite(peedySpriteSheet, "idle");
stage.addChild(peedySprite);
// Random position for Peedy
const peedyCanvas = document.getElementById("peedyCanvas");
peedyCanvas.style.left = Math.random() * (window.innerWidth - 80) + "px"; // Adjusted for half size
peedyCanvas.style.top = Math.random() * (window.innerHeight - 64) + "px"; // Adjusted for half size
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", tick);
}
function initBonzi() {
bonziStage = new createjs.Stage("bonziCanvas");
bonziSprite = new createjs.Sprite(bonziSpriteSheet, "idle");
bonziStage.addChild(bonziSprite);
// Random position for Bonzi
const bonziCanvas = document.getElementById("bonziCanvas");
bonziCanvas.style.left = Math.random() * (window.innerWidth - 100) + "px"; // Adjusted for Bonzi size
bonziCanvas.style.top = Math.random() * (window.innerHeight - 80) + "px"; // Adjusted for Bonzi size
createjs.Ticker.addEventListener("tick", () => bonziStage.update());
}
function initClippy() {
clippyStage = new createjs.Stage("clippyCanvas");
clippySprite = new createjs.Sprite(clippySpriteSheet, "idle");
clippyStage.addChild(clippySprite);
// Random position for Clippy
const clippyCanvas = document.getElementById("clippyCanvas");
clippyCanvas.style.left = Math.random() * (window.innerWidth - 100) + "px";
clippyCanvas.style.top = Math.random() * (window.innerHeight - 80) + "px";
createjs.Ticker.addEventListener("tick", () => clippyStage.update());
}
function initRobby() {
robbyStage = new createjs.Stage("robbyCanvas");
robbySprite = new createjs.Sprite(robbySpriteSheet, "idle");
robbyStage.addChild(robbySprite);
// Random position for Robby
const robbyCanvas = document.getElementById("robbyCanvas");
robbyCanvas.style.left = Math.random() * (window.innerWidth - 100) + "px";
robbyCanvas.style.top = Math.random() * (window.innerHeight - 80) + "px";
createjs.Ticker.addEventListener("tick", () => robbyStage.update());
}
function initMax() {
maxStage = new createjs.Stage("maxCanvas");
maxSprite = new createjs.Sprite(maxSpriteSheet, "idle");
maxStage.addChild(maxSprite);
// Random position for Max
const maxCanvas = document.getElementById("maxCanvas");
maxCanvas.style.left = Math.random() * (window.innerWidth - 100) + "px";
maxCanvas.style.top = Math.random() * (window.innerHeight - 80) + "px";
createjs.Ticker.addEventListener("tick", () => maxStage.update());
}
function initKinito() {
kinitoStage = new createjs.Stage("kinitoCanvas");
kinitoSprite = new createjs.Sprite(kinitoSpriteSheet, "idle");
kinitoStage.addChild(kinitoSprite);
// Random position for Kinito
const kinitoCanvas = document.getElementById("kinitoCanvas");
kinitoCanvas.style.left = Math.random() * (window.innerWidth - 100) + "px";
kinitoCanvas.style.top = Math.random() * (window.innerHeight - 100) + "px";
createjs.Ticker.addEventListener("tick", () => kinitoStage.update());
}
function toggleDragging() {
isDraggingEnabled = !isDraggingEnabled;
const toggleButton = document.getElementById('toggleDrag');
toggleButton.textContent = isDraggingEnabled ? 'Stop Dragging' : 'Start Dragging';
const canvases = ["peedyCanvas", "bonziCanvas", "clippyCanvas", "robbyCanvas", "maxCanvas", "kinitoCanvas"];
canvases.forEach(canvasId => {
const canvas = document.getElementById(canvasId);
if (isDraggingEnabled) {
canvas.style.cursor = 'move';
canvas.addEventListener("mousedown", startDrag);
canvas.addEventListener("touchstart", startDrag);
} else {
canvas.style.cursor = 'default';
canvas.removeEventListener("mousedown", startDrag);
canvas.removeEventListener("touchstart", startDrag);
}
});
}
function startDrag(e) {
if (!isDraggingEnabled) return;
e.preventDefault();
const canvas = e.currentTarget;
const rect = canvas.getBoundingClientRect();
const offsetX = (e.clientX || e.touches[0].clientX) - rect.left;
const offsetY = (e.clientY || e.touches[0].clientY) - rect.top;
function moveAt(x, y) {
canvas.style.left = x - offsetX + "px";
canvas.style.top = y - offsetY + "px";
}
function onMouseMove(e) {
moveAt(e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY);
}
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("touchmove", onMouseMove);
canvas.onmouseup = canvas.ontouchend = function() {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("touchmove", onMouseMove);
canvas.onmouseup = canvas.ontouchend = null;
};
}
function resizeCanvases() {
const canvases = ["peedyCanvas", "bonziCanvas", "clippyCanvas", "robbyCanvas", "maxCanvas", "kinitoCanvas"];
const baseScales = {
peedyCanvas: 0.5,
bonziCanvas: 0.5,
clippyCanvas: 0.5,
robbyCanvas: 0.5,
maxCanvas: 0.5,
kinitoCanvas: 0.25 // Divided by 2 as requested
};
canvases.forEach(canvasId => {
const canvas = document.getElementById(canvasId);
const baseScale = baseScales[canvasId];
const responsiveScale = Math.min(window.innerWidth / 400, window.innerHeight / 320);
const finalScale = baseScale * responsiveScale;
canvas.style.transform = `scale(${finalScale})`;
});
}
function tick(event) {
stage.update(event);
bonziStage.update(event);
clippyStage.update(event);
robbyStage.update(event);
maxStage.update(event);
kinitoStage.update(event);
}
function fetchAIModels() {
fetch('https://api.discord.rocks/v1/models')
.then(response => response.json())
.then(data => {
const select = document.getElementById('modelSelect');
data.data.forEach(model => {
if (model.id !== 'llama-3-70b-chat-turbo') {
const option = document.createElement('option');
option.value = model.id;
option.textContent = `${model.id} (${model.owned_by})`;
select.appendChild(option);
}
});
})
.catch(error => console.error('Error fetching AI models:', error));
}
function handleTopicSubmission() {
const topic = document.getElementById('topicInput').value;
const model = document.getElementById('modelSelect').value;
if (!topic || !model) {
alert('Please select a model and enter a topic');
return;
}
const payload = {
model: model,
prompt: `Generate a short conversation between Peedy (a talking parrot), Bonzi (a purple gorilla assistant), Clippy (a paperclip assistant), Robby (a robot), Max (a dog), and KinitoPET (a malevolent AI entity disguised as a friendly assistant) about ${topic}. Start with a greeting and mention the topic. Keep responses short, fun, and playful. For KinitoPET, subtly hint at its true nature without being overtly malicious.`,
max_tokens: 300,
temperature: 0.7
};
fetch('/api/generate', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload)
})
.then(response => response.json())
.then(data => {
const response = data.choices[0].text;
const messages = response.split('\n');
displayConversation(messages);
})
.catch(error => console.error('Error:', error));
}
function displayConversation(messages) {
let delay = 0;
messages.forEach((message, index) => {
setTimeout(() => {
const [character, text] = message.split(': ');
if (character && text) {
const lowerCharacter = character.toLowerCase();
if (lowerCharacter === 'peedy') {
displaySpeechBubble(text, 'peedy');
speakText(text, 'Sam');
} else if (lowerCharacter === 'bonzi') {
displaySpeechBubble(text, 'bonzi');
speakText(text, 'Adult Male #2, American English (TruVoice)');
} else if (lowerCharacter === 'clippy') {
displaySpeechBubble(text, 'clippy');
speakText(text, 'Mike');
} else if (lowerCharacter === 'robby') {
displaySpeechBubble(text, 'robby');
speakText(text, 'Adult Male #1, American English (TruVoice)');
} else if (lowerCharacter === 'max') {
displaySpeechBubble(text, 'max');
speakText(text, 'Mary');
} else if (lowerCharacter === 'kinitopet' || lowerCharacter === 'kinito') {
displaySpeechBubble(text, 'kinito');
speakText(text, 'Adult Male #3, American English (TruVoice)');
}
}
}, delay);
delay += 5000; // 5 seconds delay between messages
});
}
function displaySpeechBubble(text, character) {
const speechBubble = document.getElementById(`${character}SpeechBubble`);
const canvas = document.getElementById(`${character}Canvas`);
const rect = canvas.getBoundingClientRect();
speechBubble.innerHTML = ''; // Clear existing content
const words = text.split(' ');
let currentIndex = 0;
function displayNextWord() {
if (currentIndex < words.length) {
speechBubble.innerHTML += words[currentIndex] + ' ';
currentIndex++;
setTimeout(displayNextWord, 200); // Display a new word every 200ms
}
}
speechBubble.style.display = 'block';
speechBubble.style.left = `${rect.left + rect.width / 2 - speechBubble.offsetWidth / 2}px`;
speechBubble.style.top = `${rect.top - speechBubble.offsetHeight - 20}px`;
displayNextWord();
setTimeout(() => {
speechBubble.style.display = 'none';
}, 5000);
}
function speakText(text, voice) {
let pitch = 140;
let speed = 157;
if (voice === 'Adult Male #3, American English (TruVoice)') {
pitch = 135;
speed = 125;
}
const url = `https://www.tetyys.com/SAPI4/SAPI4?text=${encodeURIComponent(text)}&voice=${encodeURIComponent(voice)}&pitch=${pitch}&speed=${speed}`;
const audio = new Audio(url);
audio.play();
}
function makeBtcEmojiDraggable() {
const btcEmoji = document.getElementById('btcEmoji');
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
btcEmoji.addEventListener('mousedown', dragStart);
btcEmoji.addEventListener('mouseup', dragEnd);
btcEmoji.addEventListener('mousemove', drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === btcEmoji) {
isDragging = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
isDragging = false;
}
function drag(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, btcEmoji);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
}
}
window.addEventListener("load", init);
</script>
</body></html>