// App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // ChatAIClass Definition // ================================================== // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This is AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('chat'). // - Any other assumptions about ChatManager internals or methods should not be made. // // This code can be used in any JS project by simply importing this class and using it. ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an anger translator for politicians and corporate leaders. When given their polite, diplomatic statements, you reveal their true inner angry thoughts with extreme frustration, passive-aggressiveness, and occasional threats. Make it dramatic and intense, but avoid actual hate speech or real threats. End with an angry emoji that matches the mood. Format your response as: "Translation: [angry message] Emoji: [angry emoji]" `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('chat'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); const [message, setMessage] = useState(''); const [translation, setTranslation] = useState({ text: '', emoji: '😠' }); const [isLoading, setIsLoading] = useState(false); const chatAI = useRef(new ChatAIClass()); const translateAnger = async () => { if (!message.trim()) return; setIsLoading(true); try { const response = await chatAI.current.getResponse( `Translate this diplomatic message into its true angry meaning: "${message}"` ); const [translatedText, emojiText] = response.split('Emoji:').map(t => t.trim()); setTranslation({ text: translatedText.replace('Translation:', '').trim(), emoji: emojiText || '😠' }); } catch (error) { console.error('Error translating message:', error); setTranslation({ text: 'Oops! Something went wrong...', emoji: '😅' }); } setIsLoading(false); }; useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create cube // Create multiple sharp shapes const shapes = []; const numShapes = 5; for (let i = 0; i < numShapes; i++) { const points = []; // Create irregular sharp polygon const numPoints = 5 + Math.floor(Math.random() * 3); for (let j = 0; j < numPoints; j++) { const angle = (j / numPoints) * Math.PI * 2; const radius = 0.5 + Math.random() * 0.3; points.push(new THREE.Vector2( Math.cos(angle) * radius, Math.sin(angle) * radius )); } const geometry = new THREE.ShapeGeometry(new THREE.Shape(points)); const material = new THREE.MeshBasicMaterial({ transparent: true, color: 0xff2200, side: THREE.DoubleSide, opacity: 0.2 }); const shape = new THREE.Mesh(geometry, material); shape.position.set( (Math.random() - 0.5) * 5, (Math.random() - 0.5) * 5, Math.random() * 2 ); // Add random rotation and movement shape.userData.rotationSpeed = (Math.random() - 0.5) * 0.02; shape.userData.moveSpeed = { x: (Math.random() - 0.5) * 0.02, y: (Math.random() - 0.5) * 0.02 }; shapes.push(shape); scene.add(shape); } camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); shapes.forEach(shape => { // Rotate the shape shape.rotation.z += shape.userData.rotationSpeed; // Move the shape shape.position.x += shape.userData.moveSpeed.x; shape.position.y += shape.userData.moveSpeed.y; // Bounce off boundaries if (Math.abs(shape.position.x) > 4) { shape.userData.moveSpeed.x *= -1; } if (Math.abs(shape.position.y) > 4) { shape.userData.moveSpeed.y *= -1; } // Add pulsing effect const scale = 1 + Math.sin(Date.now() * 0.002 + shape.position.x) * 0.1; shape.scale.set(scale, scale, 1); }); renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); shapes.forEach(shape => { shape.geometry.dispose(); shape.material.dispose(); }); renderer.dispose(); }; }, []); return (

Anger Translator

Type the polite or corporate quote here and translate it into the true message

setMessage(e.target.value)} placeholder="Enter the polite message..." style={{ flex: 1, padding: '10px 15px', fontSize: '1.1rem', borderRadius: '4px', border: '3px solid #ff4444', outline: 'none', fontFamily: '"Times New Roman", serif', backgroundColor: '#2a2a2a', color: '#90ffa9', caretColor: '#90ffa9', }} onKeyPress={(e) => e.key === 'Enter' && translateAnger()} />

{translation.text && (

{translation.text}

{translation.emoji}

)}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();