import React, { useEffect, useRef, useState, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // Chat Manager class class ChatManager { constructor(storyDescription) { this.storyDescription = storyDescription; this.messages = []; } addMessage(role, content) { this.messages.push({ role, content }); } async getCharacterResponse(model) { // Replace with your actual response logic return "Let me help you brainstorm some viral hooks based on that idea..."; } } // Hook Generator function const generateHooks = (idea) => { return [ `🔥 POV: ${idea}`, `Watch till the end... ${idea}`, `What they don't tell you about ${idea}`, `The secret to ${idea} that went viral`, `I tried ${idea} for a week and this happened...` ]; }; // Main App Component const App = () => { const [videoIdea, setVideoIdea] = useState(''); const [hooks, setHooks] = useState([]); const [messages, setMessages] = useState([]); const [isTyping, setIsTyping] = useState(false); const mountRef = useRef(null); const chatManager = useRef(new ChatManager("TikTok Hook Generator Assistant")).current; const chatLogRef = 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, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Create floating orbs const orbs = []; const orbCount = 3; for (let i = 0; i < orbCount; i++) { const geometry = new THREE.SphereGeometry(1.5, 32, 32); const material = new THREE.MeshBasicMaterial({ color: new THREE.Color(0.6, 0.8, 1.0), transparent: true, opacity: 0.08, }); const orb = new THREE.Mesh(geometry, material); orb.position.x = Math.random() * 10 - 5; orb.position.y = Math.random() * 10 - 5; orb.position.z = Math.random() * 10 - 15; orbs.push(orb); scene.add(orb); } camera.position.z = 5; // Animation const animate = () => { requestAnimationFrame(animate); orbs.forEach((orb, index) => { orb.position.x += Math.sin(Date.now() * 0.001 + index) * 0.002; orb.position.y += Math.cos(Date.now() * 0.001 + index) * 0.002; orb.rotation.x += 0.002; orb.rotation.y += 0.002; }); renderer.render(scene, camera); }; animate(); // Initial greeting handleInitialGreeting(); // Cleanup return () => { mountRef.current.removeChild(renderer.domElement); geometry.dispose(); material.dispose(); renderer.dispose(); }; }, []); const handleInitialGreeting = async () => { const greeting = "Hi! I'm your TikTok hook generation assistant. Share your video idea, and I'll help you create viral hooks for it! What's your video about?"; setMessages(prev => [...prev, { role: 'assistant', content: greeting }]); }; const updateScroll = () => { if (chatLogRef.current) { chatLogRef.current.scrollTop = chatLogRef.current.scrollHeight; } }; const handleSendMessage = async (inputValue) => { if (!inputValue.trim() || isTyping) return; // Add user message setMessages(prev => [...prev, { role: 'user', content: inputValue }]); setVideoIdea(''); setIsTyping(true); // Get AI response const response = await chatManager.getCharacterResponse('mistral'); setMessages(prev => [...prev, { role: 'assistant', content: response }]); // Generate hooks const newHooks = generateHooks(inputValue); setHooks(newHooks); setIsTyping(false); setTimeout(updateScroll, 100); }; return (

TikTok Hook Generator

{/* Chat messages display */}

{messages.map((msg, index) => (

{msg.content}

))} {isTyping && (

Assistant is typing...

)}

{/* Input area */}

setVideoIdea(e.target.value)} onKeyPress={(e) => { if (e.key === 'Enter') { handleSendMessage(videoIdea); } }} placeholder="Describe your video idea..." style={{ flex: 1, padding: '18px', borderRadius: '16px', border: '1px solid rgba(76, 110, 245, 0.2)', fontSize: '16px', backgroundColor: 'rgba(255, 255, 255, 0.9)', color: '#1A1A1A', transition: 'all 0.3s ease', '::placeholder': { color: 'rgba(255, 255, 255, 0.5)' }, ':focus': { outline: 'none', border: '1px solid rgba(255, 255, 255, 0.3)', boxShadow: '0 0 15px rgba(255, 59, 92, 0.3)' } }} />

{/* Generated hooks display */} {hooks.length > 0 && (

Your Viral Hooks:

{hooks.map((hook, index) => (

navigator.clipboard.writeText(hook)} > {hook}

))}

)}

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