// 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 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'); return response; } } // ================================================== // Main App Component with Three.js Scene // ================================================== const FlipCard = () => { const [isFlipped, setIsFlipped] = useState(false); const [inputText, setInputText] = useState(''); const [transformedText, setTransformedText] = useState(''); const [isLoading, setIsLoading] = useState(false); const chatAI = useRef(new ChatAIClass()); const handleTransform = async () => { if (!inputText.trim()) return; setIsLoading(true); const prompt = `Transform this corporate text into a more personal and engaging version, while maintaining the core message: "${inputText}"`; try { const response = await chatAI.current.getResponse(prompt); setTransformedText(response); setIsFlipped(true); } catch (error) { console.error('Transform failed:', error); } finally { setIsLoading(false); } }; return (

{/* Front of card (Input) */}

Enter Corporate Text

setInputText(e.target.value)}
          placeholder="Paste your corporate text here..."
          style={{
            flex: 1,
            padding: '10px',
            border: '1px solid #333',
            borderRadius: '5px',
            resize: 'none',
            fontSize: '16px',
            backgroundColor: '#2a2a2a',
            color: '#ffffff',
            transition: 'all 0.3s ease',
          }}
        />
        <button
          onClick={handleTransform}
          disabled={isLoading}
          style={{
            padding: '10px 20px',
            backgroundColor: '#00ffff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            fontSize: '16px',
            transition: 'all 0.3s',
            color: '#000000',
            fontWeight: 'bold',
            '&:hover': {
              backgroundColor: '#00cccc',
              transform: 'scale(1.02)',
            }
          }}
        >
          {isLoading ? (
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
            }}>
              <div style={{
                width: '20px',
                height: '20px',
                border: '3px solid transparent',
                borderTop: '3px solid #000',
                borderRadius: '50%',
                animation: 'spin 1s linear infinite',
                animationName: 'spin',
                animationDuration: '1s',
                animationIterationCount: 'infinite',
                animationTimingFunction: 'linear'
              }} />
              Transforming...
            </div>
          ) : (
            'Transform Text'
          )}
        </button>
      </div>
      {/* Back of card (Output) */}
      <div
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
          backfaceVisibility: 'hidden',
          backgroundColor: 'rgba(40, 40, 40, 0.95)',
          padding: '20px',
          borderRadius: '10px',
          boxShadow: '0 4px 15px rgba(0, 255, 255, 0.2)',
          border: '1px solid #00ffff33',
          transform: 'rotateY(180deg)',
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
        }}
      >
        <h2 style={{ margin: 0, color: '#00ffff' }}>Transformed Text</h2>
        <div
          style={{
            flex: 1,
            overflowY: 'auto',
            padding: '10px',
            backgroundColor: '#2a2a2a',
            borderRadius: '5px',
            fontSize: '16px',
            lineHeight: '1.6',
            color: '#ffffff',
            border: '1px solid #00ffff33',
            position: 'relative',
            '&::before': {
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'linear-gradient(45deg, #00ffff0a 25%, transparent 25%, transparent 75%, #00ffff0a 75%)',
              backgroundSize: '4px 4px',
              pointerEvents: 'none',
            }
          }}
        >
          {isLoading ? (
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
              gap: '20px',
            }}>
              <div style={{
                width: '40px',
                height: '40px',
                border: '4px solid #00ffff22',
                borderTop: '4px solid #00ffff',
                borderRadius: '50%',
                animation: 'spin 1s linear infinite',
                animationName: 'spin',
                animationDuration: '1s',
                animationIterationCount: 'infinite',
                animationTimingFunction: 'linear'
              }} />
              <div style={{ color: '#00ffff' }}>
                Making it human...
              </div>
            </div>
          ) : (
            transformedText
          )}
        </div>
        <button
          onClick={() => setIsFlipped(false)}
          style={{
            padding: '10px 20px',
            backgroundColor: '#00ffff',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            fontSize: '16px',
            transition: 'background-color 0.3s',
          }}
        >
          Back to Input
        </button>
      </div>
    </div>
  );
};
const App = () => {
  const mountRef = useRef(null);
  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);
    
    // Create cube
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    
    camera.position.z = 5;
    
    // Animation
    const animate = () => {
      requestAnimationFrame(animate);
      
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      
      renderer.render(scene, camera);
    };
    
    animate();
    
    // Cleanup
    return () => {
      mountRef.current.removeChild(renderer.domElement);
      geometry.dispose();
      material.dispose();
      renderer.dispose();
    };
  }, []);
  return (
    <div style={{
      position: 'relative',
      width: '100vw',
      height: '100vh',
      backgroundColor: '#1a1a1a',
    }}>
      <div ref={mountRef} style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        zIndex: 1,
      }} />
      <div style={{
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 2,
        fontFamily: 'Arial, sans-serif',
        color: '#000000',
      }}>
        <div style={{
          perspective: '1000px',
          width: '600px',
          height: '400px',
          position: 'relative',
          cursor: 'pointer',
        }}>
          <FlipCard />
        </div>
      </div>
    </div>
  );
};
// Add global styles for the spinner animation
const style = document.createElement('style');
style.textContent = `
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
`;
document.head.appendChild(style);
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>