// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState, useMemo } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // General Notes for Rosie AI // ================================================== // Note: In sandboxed environments, avoid using

elements and traditional // form submissions as they may be blocked by security policies. Instead, use // controlled components with direct event handlers (onClick, onChange, etc.). // ================================================== // 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('classify'). // - 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('classify'); // 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 SECTIONS = [ { id: 'about', title: 'About', content: 'Cyberpunk Developer // Code Artist // Digital Pioneer' }, { id: 'projects', title: 'Projects', content: 'Exploring the digital frontier through code' }, { id: 'contact', title: 'Contact', content: 'Connect in cyberspace' } ]; const App = () => { const mountRef = useRef(null); const [activeSection, setActiveSection] = useState(0); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event) => { setMousePosition({ x: (event.clientX / window.innerWidth) * 2 - 1, y: -(event.clientY / window.innerHeight) * 2 + 1 }); }; useEffect(() => { // Scene setup const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000066, 0.05); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: "high-performance" }); // Lighting const ambientLight = new THREE.AmbientLight(0x000066, 0.5); scene.add(ambientLight); const pointLight = new THREE.PointLight(0x00ffff, 2); pointLight.position.set(5, 5, 5); scene.add(pointLight); // Create cyber grid const gridHelper = new THREE.GridHelper(100, 50, 0x00ffff, 0x00ffff); gridHelper.position.y = -10; scene.add(gridHelper); // Handle window resizing const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = window.devicePixelRatio; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(pixelRatio); // Update camera position to maintain cube visibility camera.position.z = 5; }; // Initial setup renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); handleResize(); // Call once to set initial dimensions window.addEventListener('resize', handleResize); // Create cube // Create particles const particlesGeometry = new THREE.BufferGeometry(); const particlesCount = 2000; const posArray = new Float32Array(particlesCount * 3); for(let i = 0; i < particlesCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 50; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const particlesMaterial = new THREE.PointsMaterial({ size: 0.02, color: 0x00ffff, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending }); const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); scene.add(particlesMesh); // Create geometries for different sections const cubeGeometry = new THREE.BoxGeometry(3, 3, 3); const torusGeometry = new THREE.TorusGeometry(2, 0.5, 16, 100); const dodecahedronGeometry = new THREE.DodecahedronGeometry(2); const sharedMaterial = new THREE.MeshPhongMaterial({ color: 0x00ffff, wireframe: true, transparent: true, opacity: 0.8, emissive: 0x00ffff, emissiveIntensity: 0.5 }); const shapes = { about: new THREE.Mesh(cubeGeometry, sharedMaterial), projects: new THREE.Mesh(torusGeometry, sharedMaterial), contact: new THREE.Mesh(dodecahedronGeometry, sharedMaterial) }; // Add all shapes to scene but hide them initially Object.values(shapes).forEach(shape => { shape.visible = false; scene.add(shape); }); // Show initial shape shapes[SECTIONS[0].id].visible = true; camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); // Hide all shapes except active one Object.entries(shapes).forEach(([id, shape]) => { shape.visible = SECTIONS[activeSection].id === id; if (shape.visible) { // Animate active shape shape.rotation.x += 0.005; shape.rotation.y += 0.005; shape.position.y = Math.sin(Date.now() * 0.001) * 0.5; // Update shape based on mouse position shape.rotation.x += (mousePosition.y * 0.01 - shape.rotation.x) * 0.1; shape.rotation.y += (mousePosition.x * 0.01 - shape.rotation.y) * 0.1; } }); // Animate particles particlesMesh.rotation.y += 0.0002; particlesMesh.rotation.x += 0.0001; // Pulse grid gridHelper.material.opacity = (Math.sin(Date.now() * 0.001) + 1) * 0.5 * 0.3 + 0.2; renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); cubeGeometry.dispose(); torusGeometry.dispose(); dodecahedronGeometry.dispose(); sharedMaterial.dispose(); renderer.dispose(); }; }, [activeSection]); return (

{SECTIONS.map((section, index) => ( ))}

{SECTIONS[activeSection].title}

{SECTIONS[activeSection].content}

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

Other games like this

About Cyberpunk portfolio