// 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('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 empathetic AI that interprets emotional expression through drawing. When given drawing data as arrays of {x, y, timestamp} points, analyze: 1. Drawing pressure/speed (from timestamp intervals) 2. Movement patterns (flowing, sharp, scattered, concentrated) 3. Space usage (expansive, confined, centered, scattered) 4. Line characteristics (smooth, jagged, continuous, broken) 5. Overall energy (calm, agitated, balanced, chaotic) Interpret these elements to understand the drawer's emotional state. Format your responses as JSON: { "movement": { "style": "flowing/sharp/scattered/etc", "interpretation": "The gentle flowing movements suggest..." }, "expression": { "energy": "calm/dynamic/intense/etc", "space": "centered/scattered/expansive/etc" }, "emotional_insight": "Based on the [specific elements], it appears you might be feeling..." } `; /** * 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(input) { let prompt; // Check if input is drawing data or text if (Array.isArray(input) && input.length > 0 && 'x' in input[0]) { // Convert drawing data to a formatted string for the AI prompt = JSON.stringify({ type: 'drawing_data', points: input, metadata: { pointCount: input.length, drawingDuration: input[input.length - 1].timestamp - input[0].timestamp, boundingBox: this.calculateBoundingBox(input) } }); } else { // Handle regular text input prompt = input; } // Add the user's message to the conversation this.chatManager.addMessage('user', prompt); // Get AI's response const response = await this.chatManager.getCharacterResponse('classify'); // Add the AI's message to the conversation this.chatManager.addMessage('assistant', response); return response; } /** * Calculates the bounding box of the drawing * @param {Array} points - Array of {x, y} coordinates * @returns {Object} - Bounding box dimensions */ calculateBoundingBox(points) { const xs = points.map(p => p.x); const ys = points.map(p => p.y); return { minX: Math.min(...xs), maxX: Math.max(...xs), minY: Math.min(...ys), maxY: Math.max(...ys), width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) }; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const App = () => { const mountRef = useRef(null); const canvasRef = useRef(null); const contextRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [currentPath, setCurrentPath] = useState([]); const [allPaths, setAllPaths] = useState([]); const chatAI = useRef(new ChatAIClass()); const [aiResponse, setAiResponse] = useState(null); const [showResults, setShowResults] = useState(false); const [introStep, setIntroStep] = useState(0); const [showIntro, setShowIntro] = useState(true); 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); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); renderer.dispose(); }; }, []); // Drawing handlers const redrawPaths = useCallback(() => { const context = contextRef.current; if (!context) return; context.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height); allPaths.forEach(path => { if (path.length > 0) { context.beginPath(); context.moveTo(path[0].x, path[0].y); path.forEach((point, index) => { if (index > 0) { context.lineTo(point.x, point.y); } }); context.stroke(); } }); }, [allPaths]); useEffect(() => { const handleResize = () => { const canvas = canvasRef.current; // Get the current drawing data before resize const currentDrawing = allPaths; // Set canvas size to match window size canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Set up new context const context = canvas.getContext('2d'); context.strokeStyle = '#ffffff'; context.lineWidth = 3; context.lineCap = 'round'; contextRef.current = context; // Redraw all paths redrawPaths(); }; handleResize(); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, [redrawPaths]); const getCoordinates = useCallback((e) => { const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left); const y = (e.clientY - rect.top); return { x, y }; }, []); const startDrawing = useCallback((e) => { const coords = getCoordinates(e); contextRef.current.beginPath(); contextRef.current.moveTo(coords.x, coords.y); setIsDrawing(true); setCurrentPath([{ x: coords.x, y: coords.y, timestamp: Date.now() }]); }, [getCoordinates]); const draw = useCallback((e) => { if (!isDrawing) return; const coords = getCoordinates(e); contextRef.current.lineTo(coords.x, coords.y); contextRef.current.stroke(); setCurrentPath(prev => [...prev, { x: coords.x, y: coords.y, timestamp: Date.now() }]); }, [isDrawing, getCoordinates]); const stopDrawing = useCallback(() => { contextRef.current.closePath(); setIsDrawing(false); // Add current path to allPaths when drawing stops if (currentPath.length > 0) { setAllPaths(prev => [...prev, currentPath]); } }, [currentPath]); const clearCanvas = useCallback(() => { const canvas = canvasRef.current; const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); setCurrentPath([]); setAllPaths([]); setAiResponse(null); }, []); const analyzeDrawing = useCallback(async () => { if (allPaths.length === 0) return; // Combine all paths for analysis const allPoints = allPaths.flat(); try { const response = await chatAI.current.getResponse(allPoints); // Clean the response string to ensure it's valid JSON const cleanResponse = response.replace(/```json|```/g, '').trim(); const parsedResponse = JSON.parse(cleanResponse); setAiResponse(parsedResponse); setShowResults(true); } catch (e) { console.error('Failed to parse AI response:', e); setAiResponse({ movement: { style: "error", interpretation: "Unable to analyze the drawing at this time." }, expression: { energy: "unknown", space: "unknown" }, emotional_insight: "Sorry, there was an error analyzing your drawing. Please try again." }); setShowResults(true); } }, [allPaths]); const introSteps = [ { text: "Welcome to MindCanvas", style: { fontSize: '3.5em', fontWeight: 'bold' } }, { text: "Express your emotions freely through drawing, and let AI reflect on your state of mind.", style: { fontSize: '2em', lineHeight: '1.4' } }, { text: "Draw as much or as little as you feel - there are no rules.", style: { fontSize: '2em', lineHeight: '1.4' } }, { text: "When you're ready, click 'Reflect' to see your emotional reflection.", style: { fontSize: '2em', lineHeight: '1.4' } } ]; useEffect(() => { if (introStep < introSteps.length) { const timer = setTimeout(() => { setIntroStep(prev => prev + 1); }, 4000); return () => clearTimeout(timer); } else if (introStep === introSteps.length) { const timer = setTimeout(() => { setShowIntro(false); }, 3000); return () => clearTimeout(timer); } }, [introStep]); return (

{showResults && ( <>

setShowResults(false)} />

Emotional Expression Analysis

{aiResponse.movement && (

Movement:

{aiResponse.movement.style && (

Style: {aiResponse.movement.style}

)} {aiResponse.movement.interpretation && (

{aiResponse.movement.interpretation}

)}

)} {aiResponse.expression && (

Expression:

{aiResponse.expression.energy && (

Energy: {aiResponse.expression.energy}

)} {aiResponse.expression.space && (

Space: {aiResponse.expression.space}

)}

)} {aiResponse.emotional_insight && (

{aiResponse.emotional_insight}

)}

)} {showIntro && (

{introSteps.slice(0, introStep + 1).map((step, index) => (

{step.text}

))}

)}

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