// App.jsx import React, { useState, useRef, useEffect, useCallback } from 'react'; import ReactDOM from 'react-dom/client'; // LOCAL_DATA: Global variable to store application data // This array serves as the initial data structure for the application // and can be used as a fallback when localStorage is not available const LOCAL_DATA = []; // App Settings const APP_SETTINGS = { controlVariables: { useLocalStorage: false, clearLocalStorage: false, }, storage: { key: 'myRosebudApp' } }; // Local Storage Utilities const clearLocalStorageData = () => { if (APP_SETTINGS.controlVariables.clearLocalStorage) { try { localStorage.clear(); console.log('Local storage cleared successfully'); APP_SETTINGS.controlVariables.clearLocalStorage = false; return true; } catch (error) { console.error('Error clearing localStorage:', error); return false; } } return false; }; const useLocalStorage = (key, initialValue = LOCAL_DATA) => { const [storedValue, setStoredValue] = useState(() => { if (!APP_SETTINGS.controlVariables.useLocalStorage || APP_SETTINGS.controlVariables.clearLocalStorage) { return LOCAL_DATA.length > 0 ? LOCAL_DATA : (typeof initialValue === 'function' ? initialValue() : initialValue); } try { const item = localStorage.getItem(key); if (!item || clearLocalStorageData()) { return LOCAL_DATA.length > 0 ? LOCAL_DATA : (typeof initialValue === 'function' ? initialValue() : initialValue); } return JSON.parse(item); } catch (error) { console.error('Error reading from localStorage:', error); return typeof initialValue === 'function' ? initialValue() : initialValue; } }); const setValue = useCallback((value) => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); if (APP_SETTINGS.controlVariables.useLocalStorage) { localStorage.setItem(key, JSON.stringify(valueToStore)); } } catch (error) { console.error('Error saving to localStorage:', error); } }, [key, storedValue]); return [storedValue, setValue]; }; // Styles const styles = ` /* Existing styles */ .tts-container { padding: 20px; display: flex; flex-direction: column; gap: 15px; } .tts-controls { display: flex; gap: 10px; align-items: center; } .tts-button { padding: 10px 20px; background-color: #4a90e2; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; } .tts-button:disabled { background-color: #cccccc; cursor: not-allowed; } .tts-button:hover:not(:disabled) { background-color: #357abd; } .tts-status { color: #666; font-size: 14px; } .error-message { color: #ff4444; font-size: 14px; margin-top: 10px; } .root-container { width: 100vw; height: 100vh; background-color: #ffffff; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; color: #000000; position: relative; overflow: hidden; } .background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: url(https://play.rosebud.ai/assets/bg-main.png?Xrrp); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.95; } .content-container { width: 420px; position: relative; z-index: 2; min-height: 85vh; max-height: 85vh; padding: 1rem; overflow-y: auto; overflow-x: hidden; background-color: #ffffff; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); box-sizing: border-box; } `; // Insert styles into document const styleSheet = document.createElement("style"); styleSheet.innerText = styles; document.head.appendChild(styleSheet); // ================================================== // 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. // ////////////////////////////////////////////////////////////// // 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'); // 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 Background = () => (

); class TextToSpeechService { constructor() { this.apiEndpoint = 'https://ai-about-me-api-2dfca005596e.herokuapp.com/create-speech'; this.defaultVoiceId = "1SM7GgM6IMuvQlz2BwM3"; this.defaultModelId = "eleven_multilingual_v2"; } /** * Generates speech from text using the API * @param {string} text - The text to convert to speech * @param {string} voiceId - Optional voice ID * @param {string} modelId - Optional model ID * @returns {Promise} - Audio blob */ async generateSpeech(text, voiceId = this.defaultVoiceId, modelId = this.defaultModelId) { if (!text || typeof text !== 'string') { throw new Error('Invalid text input'); } const requestData = { text, voiceId, modelId }; try { const response = await fetch(this.apiEndpoint, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestData) }); if (!response.ok) { const errorData = await response.text(); throw new Error(`API Error (${response.status}): ${errorData}`); } const blob = await response.blob(); if (!blob || blob.size === 0) { throw new Error('Received empty audio data'); } return blob; } catch (error) { throw new Error(`Speech generation failed: ${error.message}`); } } /** * Creates a URL for an audio blob * @param {Blob} audioBlob - The audio blob to create a URL for * @returns {string} - The created URL */ createAudioUrl(audioBlob) { return URL.createObjectURL(audioBlob); } /** * Revokes a previously created audio URL * @param {string} url - The URL to revoke */ revokeAudioUrl(url) { if (url) { URL.revokeObjectURL(url); } } } const AudioPlayer = ({ audioUrl, autoPlay = false, onEnded = () => {} }) => { const audioRef = useRef(null); const playAudio = useCallback(() => { if (audioRef.current) { audioRef.current.play().catch(error => { console.error('Error playing audio:', error); }); } }, []); useEffect(() => { if (audioRef.current) { audioRef.current.src = audioUrl; if (autoPlay) { playAudio(); } } }, [audioUrl, autoPlay, playAudio]); useEffect(() => { const audio = audioRef.current; if (audio) { audio.addEventListener('ended', onEnded); return () => audio.removeEventListener('ended', onEnded); } }, [onEnded]); return