// 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 a witty and sarcastic AI that creates clever comeback roasts to tweets. Analyze the given tweet and generate a funny, witty response that would work as a quote tweet or reply. Keep it under 280 characters, include relevant emojis, and maintain a playful tone while avoiding harmful content. `; /** * 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 App = () => { const mountRef = useRef(null); const [tweet, setTweet] = React.useState(''); const [roast, setRoast] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(''); const chatAI = React.useRef(new ChatAIClass()); const generateRoast = async () => { if (!tweet.trim()) { setError('Please paste a tweet first!'); return; } setError(''); setIsLoading(true); try { const prompt = `Generate a witty comeback roast for this tweet: "${tweet}"`; const response = await chatAI.current.getResponse(prompt); setRoast(response); } catch (err) { setError('Failed to generate roast. Please try again!'); } finally { setIsLoading(false); } }; 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.TorusKnotGeometry(2, 0.6, 100, 16); const material = new THREE.MeshBasicMaterial({ color: 0x1DA1F2, wireframe: true, transparent: true, opacity: 0.6 }); const torusKnot = new THREE.Mesh(geometry, material); scene.add(torusKnot); camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); torusKnot.rotation.x += 0.005; torusKnot.rotation.y += 0.005; torusKnot.rotation.z += 0.002; renderer.render(scene, camera); }; animate(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); return (

Twitter Roast Generator 🔥

{
              setTweet(e.target.value);
              setError('');
            }}
            placeholder="Paste the tweet you want to roast here..."
            style={{
              width: '100%',
              padding: '15px',
              marginBottom: '15px',
              borderRadius: '10px',
              border: '1px solid #384b5e',
              backgroundColor: '#253341',
              color: '#ffffff',
              fontSize: '1rem',
              minHeight: '100px',
              resize: 'vertical',
              fontFamily: 'Arial, sans-serif',
              transition: 'border-color 0.3s ease',
            }}
            onFocus={(e) => {
              e.target.style.borderColor = '#1DA1F2';
            }}
            onBlur={(e) => {
              e.target.style.borderColor = '#384b5e';
            }}
          />
          {error && (
            <div style={{
              color: '#ff4444',
              marginBottom: '10px',
              fontSize: '0.9rem',
              textAlign: 'center'
            }}>
              {error}
            </div>
          )}
          <button
            onClick={generateRoast}
            disabled={isLoading}
            style={{
              width: '100%',
              padding: '15px',
              backgroundColor: isLoading ? '#164B6E' : '#1DA1F2',
              border: 'none',
              borderRadius: '10px',
              color: '#ffffff',
              fontWeight: 'bold',
              cursor: isLoading ? 'wait' : 'pointer',
              fontSize: '1.1rem',
              transition: 'all 0.3s ease',
              transform: 'scale(1)',
              boxShadow: '0 4px 12px rgba(29, 161, 242, 0.2)',
            }}
            onMouseOver={(e) => {
              if (!isLoading) {
                e.target.style.transform = 'scale(1.02)';
                e.target.style.backgroundColor = '#1991db';
              }
            }}
            onMouseOut={(e) => {
              if (!isLoading) {
                e.target.style.transform = 'scale(1)';
                e.target.style.backgroundColor = '#1DA1F2';
              }
            }}
          >
            {isLoading ? 'Generating... 🤔' : 'Generate Roast 🔥'}
          </button>
          {roast && (
            <div style={{
              marginTop: '20px',
              padding: '20px',
              backgroundColor: '#253341',
              borderRadius: '15px',
              border: '1px solid #384b5e',
              animation: 'fadeIn 0.5s ease-out',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute',
                top: '-12px',
                left: '20px',
                backgroundColor: '#1DA1F2',
                padding: '4px 12px',
                borderRadius: '12px',
                fontSize: '0.8rem',
                fontWeight: 'bold',
              }}>
                Roast Generated 🎯
              </div>
              <p style={{
                margin: '10px 0 0 0',
                lineHeight: '1.5',
                fontSize: '1.1rem',
              }}>
                {roast}
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};
const container = document.getElementById('renderDiv');
const root = ReactDOM.createRoot(container);
root.render(<App />);</article></body></html>