// 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 viral TikTok content strategist with expertise in creating trending hooks. Your responses should be: - Unique and never repetitive - Tailored to current trends - Varied in style and tone - Matched to different content niches - Optimized for different audience demographics You should adapt your style based on the context provided in each prompt. `; /** * 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); useEffect(() => { // Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( window.innerWidth < 768 ? 90 : 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer({ alpha: true }); const updateSize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.fov = window.innerWidth < 768 ? 90 : 75; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; updateSize(); mountRef.current.appendChild(renderer.domElement); // Create cube // Create multiple geometric shapes for background const shapes = []; const colors = [0xFE2C55, 0x25F4EE]; const scaleFactor = window.innerWidth < 768 ? 0.6 : 1; for (let i = 0; i < 8; i++) { const geometry = new THREE.TorusGeometry( (Math.random() * 3 + 2) * scaleFactor, 0.02 * scaleFactor, 16, 100 ); const material = new THREE.MeshBasicMaterial({ color: colors[i % colors.length], transparent: true, opacity: 0.15, }); const shape = new THREE.Mesh(geometry, material); shape.position.set( (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10, (Math.random() - 0.5) * 10 ); shapes.push(shape); scene.add(shape); } camera.position.z = window.innerWidth < 768 ? 7 : 5; // Add resize listener window.addEventListener('resize', updateSize); // Animation const animate = () => { requestAnimationFrame(animate); shapes.forEach((shape, index) => { const time = Date.now() * 0.001; shape.rotation.x = Math.sin(time * 0.3 + index) * 0.2; shape.rotation.y = Math.cos(time * 0.2 + index) * 0.3; shape.position.y = Math.sin(time * 0.4 + index) * 0.5; }); renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', updateSize); mountRef.current?.removeChild(renderer.domElement); shapes.forEach(shape => { shape.geometry.dispose(); shape.material.dispose(); }); renderer.dispose(); }; }, []); const [hook, setHook] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const chatAI = React.useRef(new ChatAIClass()); useEffect(() => { const gradient = document.querySelector('.animated-gradient'); if (!gradient) return; gradient.style.setProperty('--gradient-position', '0%'); const style = document.createElement('style'); document.head.appendChild(style); style.sheet.insertRule(` @keyframes gradientMove { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } } `); return () => { document.head.removeChild(style); }; }, []); const generateHook = async () => { try { setIsLoading(true); // Generate random context for variety const niches = ['lifestyle', 'tech', 'cooking', 'fitness', 'fashion', 'education', 'gaming']; const styles = ['mysterious', 'shocking', 'educational', 'storytelling', 'controversial', 'life hack']; const demographics = ['Gen Z', 'Millennials', 'professionals', 'students', 'parents']; const randomNiche = niches[Math.floor(Math.random() * niches.length)]; const randomStyle = styles[Math.floor(Math.random() * styles.length)]; const randomDemo = demographics[Math.floor(Math.random() * demographics.length)]; const timestamp = new Date().getTime(); const prompt = `Generate a unique viral TikTok hook for a ${randomNiche} video using a ${randomStyle} style that would appeal to ${randomDemo}. The hook should create curiosity and suspense. Make it short, dramatic, and engaging. Don't use hashtags or emojis. Important context: - This is being generated at timestamp: ${timestamp} - This should be completely different from previous hooks - Focus on current ${randomNiche} trends - Use language that resonates with ${randomDemo} - Incorporate ${randomStyle} elements naturally`; const response = await chatAI.current.getResponse(prompt); setHook(response.trim()); } catch (error) { console.error('Failed to generate hook:', error); setHook('Unable to generate hook. Please try again.'); } finally { setIsLoading(false); } }; return (

TikTok Viral Hook Generator

{hook || "Click generate to create your viral hook!"}

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