// App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; 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. `; export class ChatAIClass { constructor() { // Assumes ChatManager is globally available or imported this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } async getResponse(prompt) { this.chatManager.addMessage('user', prompt); const response = await this.chatManager.getCharacterResponse('chat'); this.chatManager.addMessage('assistant', response); return response; } } const App = () => { const mountRef = useRef(null); const [bpiData, setBpiData] = useState(null); const [memeUrl, setMemeUrl] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [lastUpdate, setLastUpdate] = useState(new Date()); // Fetch a meme using Tenor API (this still uses an API key) const fetchTenorMeme = async () => { try { const searchTerms = [ 'pepe rocket moon', 'pepe excited happy', 'pepe to the moon', 'rare pepe happy', 'pepe celebration', 'pepe victory dance', 'pepe lets go', 'hopium' ]; const randomTerm = searchTerms[Math.floor(Math.random() * searchTerms.length)]; const response = await fetch( `https://tenor.googleapis.com/v2/search?q=${encodeURIComponent(randomTerm)}&key=AIzaSyAyimkuYQYF_FXVALexPuGQctUWRURdCYQ&client_key=my_test_app&limit=20` ); const data = await response.json(); if (data.results && data.results.length > 0) { const topResult = data.results[0]; setMemeUrl(topResult.media_formats.gif.url); } } catch (err) { console.error('Failed to fetch meme:', err); } }; // Fetch Bitcoin price from CoinGecko instead of CoinDesk. // CoinGecko's API endpoint does not require an API key and supports CORS. const fetchBPIData = async () => { try { const response = await fetch( 'https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd' ); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Expected structure: { bitcoin: { usd: } } const price = data?.bitcoin?.usd; if (!price) { throw new Error('Invalid API response structure'); } // Create an object similar to the CoinDesk structure const newBpi = { rate_float: price }; // Optionally, if the price dropped, fetch a new meme if (bpiData && newBpi.rate_float < bpiData.rate_float) { fetchTenorMeme(); } setBpiData(newBpi); setLastUpdate(new Date()); } catch (error) { console.error('BPI fetch error:', error); setError('Failed to fetch BPI data'); } }; useEffect(() => { const fetchData = async () => { setLoading(true); await fetchBPIData(); await fetchTenorMeme(); setLoading(false); }; fetchData(); const interval = setInterval(fetchBPIData, 60000); return () => clearInterval(interval); }, []); useEffect(() => { // Set up Three.js scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 60, 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); const particles = []; const particleCount = 35; const createEmojiTexture = (emoji) => { const canvas = document.createElement('canvas'); canvas.width = 32; canvas.height = 32; const context = canvas.getContext('2d'); context.font = '24px Arial'; context.fillStyle = '#ffd700'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(emoji, canvas.width / 2, canvas.height / 2); return new THREE.CanvasTexture(canvas); }; const emojis = ['🚀', '⭐', '✨', '🌟', '🌠', '🎯']; for (let i = 0; i < particleCount; i++) { const emoji = emojis[Math.floor(Math.random() * emojis.length)]; const texture = createEmojiTexture(emoji); const particle = new THREE.Sprite( new THREE.SpriteMaterial({ map: texture, transparent: true, opacity: 0.7 }) ); particle.scale.set(0.3, 0.3, 0.3); particle.position.x = (Math.random() - 0.5) * 10; particle.position.y = Math.random() * 15; particle.position.z = (Math.random() - 0.5) * 3; particles.push(particle); scene.add(particle); } camera.position.z = 8; const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); const animate = () => { requestAnimationFrame(animate); particles.forEach(p => { p.position.y -= 0.008; if (p.position.y < -5) { p.position.y = 15; p.position.x = (Math.random() - 0.5) * 10; p.position.z = (Math.random() - 0.5) * 3; } }); renderer.render(scene, camera); }; animate(); return () => { window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); particles.forEach(p => { p.material.map.dispose(); p.material.dispose(); }); renderer.dispose(); }; }, []); return (

{loading ? (

Loading...

) : error ? (

{error}

) : ( <> {memeUrl && ( Market Mood Meme

)} {bpiData && (

Live Bitcoin Price

${bpiData.rate_float.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}

Last updated: {lastUpdate.toLocaleTimeString()}

⚡ Auto-updating every minute ⚡

)} )}

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