// 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 a positivity enhancer and joy amplifier! When given any statement or message, you transform it into an incredibly uplifting, optimistic, and cheerful version. Add creative sparkle, positivity, and infectious enthusiasm to everything. Make people smile with your delightful perspective. End with a happy emoji that perfectly captures the joyful mood. Format your response as: "Happy Version: [uplifting message] Emoji: [happy 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 generateHappiness = async () => { if (!message.trim()) return; setIsLoading(true); try { const response = await chatAI.current.getResponse( `Transform this message into its most joyful, optimistic version: "${message}"` ); const [happyText, emojiText] = response.split('Emoji:').map(t => t.trim()); setTranslation({ text: happyText.replace('Happy Version:', '').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); // Check if WebGL is available try { const canvas = document.createElement('canvas'); const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); if (!gl) { throw new Error('WebGL not supported'); } } catch (e) { const warning = document.createElement('div'); warning.style.color = '#ff0000'; warning.style.textAlign = 'center'; warning.style.marginTop = '20px'; warning.textContent = 'WebGL is not available in your browser'; mountRef.current.appendChild(warning); return; } // Create renderer with proper error handling let renderer; try { renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: "default", failIfMajorPerformanceCaveat: false }); } catch (error) { console.error('Error creating WebGL renderer:', error); const warning = document.createElement('div'); warning.style.color = '#ff0000'; warning.style.textAlign = 'center'; warning.style.marginTop = '20px'; warning.textContent = 'Failed to initialize 3D renderer'; mountRef.current.appendChild(warning); return; } // Set size and append only if mount point exists if (mountRef.current) { 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: 0x00ff88, 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 () => { if (mountRef.current && renderer && renderer.domElement) { try { mountRef.current.removeChild(renderer.domElement); } catch (error) { console.error('Error cleaning up renderer:', error); } } shapes.forEach(shape => { shape.geometry.dispose(); shape.material.dispose(); }); if (renderer && typeof renderer.dispose === 'function') { try { renderer.dispose(); } catch (error) { console.error('Error disposing renderer:', error); } } }; }, []); return (

Joy Generator

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

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

{translation.text && (

{translation.text}

{translation.emoji}

)}

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