// App.jsx import React, { useEffect, useRef } 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 advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * 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 audioContextRef = useRef(null); const analyserRef = useRef(null); const audioElementRef = useRef(null); const initialScale = useRef(1); const colorOffset = useRef(0); const currentParticleColor = useRef(new THREE.Color(0xFF69B4)); const glowEdgesRef = useRef(null); const shapeRef = useRef(null); const currentDetail = useRef(1); const initialParticleSpeed = useRef({ x: 0.0005, y: 0.0001 }); // Audio setup function const setupAudio = async () => { try { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); analyserRef.current = audioContextRef.current.createAnalyser(); analyserRef.current.fftSize = 256; // Create audio element audioElementRef.current = new Audio(); audioElementRef.current.crossOrigin = "anonymous"; // Set default audio source to Rosebud theme audioElementRef.current.src = "https://play.rosebud.ai/assets/rosebud_official_theme_01.mp3?hYi9"; // Create audio source from element const source = audioContextRef.current.createMediaElementSource(audioElementRef.current); source.connect(analyserRef.current); analyserRef.current.connect(audioContextRef.current.destination); // Audio is now ready to play when user clicks play button } catch (error) { console.error("Error setting up audio:", error); } }; useEffect(() => { setupAudio(); // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create icosahedron with both solid and wireframe const geometry = new THREE.IcosahedronGeometry(1, 1); // Solid material const material = new THREE.MeshStandardMaterial({ color: 0xFFD700, metalness: 0.8, roughness: 0.2, }); // Wireframe materials const wireMaterial = new THREE.MeshBasicMaterial({ color: 0xFFD700, wireframe: true, transparent: true, opacity: 0.3, }); // Glowing edge material const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xFF69B4, // Hot pink wireframe: true, transparent: true, opacity: 0.5, }); // Create both meshes const shape = new THREE.Mesh(geometry, material); const wireframe = new THREE.Mesh(geometry, wireMaterial); shapeRef.current = shape; // Function to update geometry const updateGeometry = () => { // Cycle through different detail levels (0 to 4) currentDetail.current = (currentDetail.current + 1) % 5; // Create new geometry const newGeometry = new THREE.IcosahedronGeometry(1, currentDetail.current); // Update all meshes with new geometry shape.geometry.dispose(); wireframe.geometry.dispose(); glowingEdges.geometry.dispose(); shape.geometry = newGeometry; wireframe.geometry = newGeometry; glowingEdges.geometry = newGeometry; }; // Set interval for geometry updates const geometryInterval = setInterval(updateGeometry, 30000); const glowingEdges = new THREE.Mesh(geometry, glowMaterial); glowEdgesRef.current = glowingEdges; // Scale up the glowing edges slightly glowingEdges.scale.multiplyScalar(1.05); // Add all meshes shape.add(wireframe); shape.add(glowingEdges); scene.add(shape); // Add lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); const pointLight = new THREE.PointLight(0xffffff, 1, 100); pointLight.position.set(5, 5, 5); const pointLight2 = new THREE.PointLight(0xffffff, 1, 100); pointLight2.position.set(-5, -5, -5); scene.add(ambientLight); scene.add(pointLight); scene.add(pointLight2); // Create particles const particlesGeometry = new THREE.BufferGeometry(); const particlesCnt = 8000; // Reduced to create a better balance const posArray = new Float32Array(particlesCnt * 3); for(let i = 0; i < particlesCnt * 3; i++) { posArray[i] = (Math.random() - 0.5) * 5; // Reduced spread from 10 to 5 } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.008, // Slightly larger for better visibility color: 0xFFD700, transparent: true, opacity: 0.8, // Much more visible base opacity sizeAttenuation: true, blending: THREE.AdditiveBlending // Add glow effect }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); // Position camera camera.position.z = 4; // Handle window resize const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); }; window.addEventListener('resize', handleResize); // Audio analysis and animation const animate = () => { requestAnimationFrame(animate); if (analyserRef.current) { const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount); analyserRef.current.getByteFrequencyData(dataArray); // Get average frequency const average = dataArray.reduce((a, b) => a + b) / dataArray.length; const normalizedAverage = average / 256; // Normalize to 0-1 // Update color based on audio colorOffset.current += normalizedAverage * 0.05; const hue = (Math.sin(colorOffset.current) + 1) * 0.5; const color = new THREE.Color().setHSL(hue, 1, 0.5); // Update icosahedron glow color if (glowEdgesRef.current) { glowEdgesRef.current.material.color = color; glowEdgesRef.current.material.opacity = 0.5 + normalizedAverage * 0.5; } // Update particle colors with a slight offset for variety const particleHue = ((Math.sin(colorOffset.current + Math.PI / 4) + 1) * 0.5); const particleColor = new THREE.Color().setHSL(particleHue, 1, 0.6); particlesMaterial.color = particleColor; currentParticleColor.current = particleColor; // Force button style update const playButton = mountRef.current?.parentElement?.querySelector('button'); if (playButton) { playButton.style.backgroundColor = `#${particleColor.getHexString()}`; playButton.style.boxShadow = `0 4px 15px #${particleColor.getHexString()}40`; } particlesMaterial.opacity = 0.6 + normalizedAverage * 0.4; // Higher base opacity // Scale icosahedron based on audio const scaleFactor = 1 + (normalizedAverage * 0.8); // Max 1.8x size shape.scale.set(scaleFactor, scaleFactor, scaleFactor); // Adjust particle speed based on audio const speedMultiplier = 1 + (normalizedAverage * 2); // Max 3x speed particlesMesh.rotation.y += initialParticleSpeed.current.x * speedMultiplier; particlesMesh.rotation.x += initialParticleSpeed.current.y * speedMultiplier; // Base rotation continues shape.rotation.x += 0.001; shape.rotation.y += 0.002; } else { // Fallback animation if no audio shape.rotation.x += 0.001; shape.rotation.y += 0.002; particlesMesh.rotation.y += initialParticleSpeed.current.x; particlesMesh.rotation.x += initialParticleSpeed.current.y; } renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); clearInterval(geometryInterval); if (audioElementRef.current) { audioElementRef.current.pause(); audioElementRef.current.src = ''; URL.revokeObjectURL(audioElementRef.current.src); } if (audioContextRef.current) { audioContextRef.current.close(); } mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); wireMaterial.dispose(); glowMaterial.dispose(); particlesGeometry.dispose(); particlesMaterial.dispose(); renderer.dispose(); }; }, []); return (

{ const file = e.target.files?.[0]; if (file) { const url = URL.createObjectURL(file); if (audioElementRef.current) { audioElementRef.current.src = url; audioElementRef.current.play(); } } }} style={{ color: '#ffffff', background: 'rgba(255, 255, 255, 0.1)', padding: '10px 20px', borderRadius: '8px', border: '2px solid rgba(255, 255, 255, 0.2)', cursor: 'pointer', }} />

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

Other games like this

About Music Visualizer App