// App.jsx import React, { useEffect, useRef, useState, useCallback } 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 [isLoaded, setIsLoaded] = useState(false); const [breeds, setBreeds] = useState([]); const [loading, setLoading] = useState(true); const [isModalOpen, setIsModalOpen] = useState(false); const fetchBreeds = useCallback(async () => { setLoading(true); try { const response = await fetch('https://dog.ceo/api/breeds/list/all'); const data = await response.json(); const breedsList = Object.keys(data.message); // Fetch one random image for each breed const breedsWithImages = await Promise.all( breedsList.slice(0, 20).map(async (breed) => { const imageResponse = await fetch(`https://dog.ceo/api/breed/${breed}/images/random`); const imageData = await imageResponse.json(); return { name: breed, image: imageData.message }; }) ); setBreeds(breedsWithImages); setLoading(false); } catch (error) { console.error('Error fetching breeds:', error); setLoading(false); } }, []); useEffect(() => { // Google Tag Manager (gtag.js) const script1 = document.createElement('script'); script1.src = 'https://www.googletagmanager.com/gtag/js?id=G-J2DT393Z5P'; script1.async = true; document.head.appendChild(script1); const script2 = document.createElement('script'); script2.innerHTML = ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-J2DT393Z5P'); `; document.head.appendChild(script2); // 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, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x121212, 1); mountRef.current.appendChild(renderer.domElement); // Create emoji group const emojiGroup = new THREE.Group(); // Array of dog-related emojis const emojis = ['🐕', '🐶', '🦮', '🐾']; function createEmojiSprite(emoji, x, y, z) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 64; canvas.height = 64; context.font = '48px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(emoji, 32, 32); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.SpriteMaterial({ map: texture, transparent: true, opacity: 0.4 }); const sprite = new THREE.Sprite(material); sprite.position.set(x, y, z); sprite.scale.set(0.7, 0.7, 0.7); return sprite; } // Create multiple emoji sprites for (let i = 0; i < 35; i++) { const x = (Math.random() - 0.5) * 15; const y = (Math.random() - 0.5) * 15; const z = (Math.random() - 0.5) * 15; const emoji = emojis[Math.floor(Math.random() * emojis.length)]; const sprite = createEmojiSprite(emoji, x, y, z); sprite.userData = { speedY: (Math.random() - 0.5) * 0.005, speedRotation: (Math.random() - 0.5) * 0.005 }; emojiGroup.add(sprite); } scene.add(emojiGroup); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); // Animate each emoji emojiGroup.children.forEach((sprite) => { // Move up and down sprite.position.y += sprite.userData.speedY; // Rotate slightly sprite.material.rotation += sprite.userData.speedRotation; // Reset position if emoji goes too far up or down if (Math.abs(sprite.position.y) > 8) { sprite.userData.speedY *= -1; } }); renderer.render(scene, camera); }; // Handle window resize const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); setIsLoaded(true); animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); scene.traverse(object => { if (object.geometry) object.geometry.dispose(); if (object.material) object.material.dispose(); }); renderer.dispose(); }; }, []); useEffect(() => { if (isModalOpen) { fetchBreeds(); } }, [isModalOpen, fetchBreeds]); return (

Dogsl.com

Your guide to the wonderful world of woofs! 🐾

{isModalOpen && (

Dog Breed Gallery

{loading ? (

Loading breeds...

) : ( breeds.map((breed) => (

{breed.name}

)) )}

)}

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