// App.jsx import React, { useEffect, useRef, useState } 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('classify'). // - 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 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('classify'); // 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); const rendererRef = useRef(null); const sceneRef = useRef(null); const cameraRef = useRef(null); const [barcodeData, setBarcodeData] = useState('012345678905'); const [barcodeWidth, setBarcodeWidth] = useState(5); const [barcodeHeight, setBarcodeHeight] = useState(1.8); useEffect(() => { if (!mountRef.current) return; // Scene setup - only once const scene = new THREE.Scene(); sceneRef.current = scene; // Set up camera with fixed dimensions const containerWidth = Math.min(window.innerWidth * 0.8, 800); // Responsive width with max limit const containerHeight = Math.min(containerWidth * 0.45, 250); // Proportional height const aspectRatio = containerWidth / containerHeight; const viewSize = 2.5; // Reduced view size for smaller viewport const camera = new THREE.OrthographicCamera( -viewSize * aspectRatio, // left viewSize * aspectRatio, // right viewSize, // top -viewSize, // bottom 0.1, 1000 ); cameraRef.current = camera; const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true, alpha: false }); rendererRef.current = renderer; // Set consistent size for both display and download renderer.setSize(containerWidth, containerHeight); // Handle resize const handleResize = () => { const newWidth = Math.min(window.innerWidth * 0.8, 800); const newHeight = Math.min(newWidth * 0.45, 250); const aspect = newWidth / newHeight; camera.left = -viewSize * aspect; camera.right = viewSize * aspect; camera.updateProjectionMatrix(); renderer.setSize(newWidth, newHeight); }; window.addEventListener('resize', handleResize); renderer.setClearColor(0xffffff, 1); renderer.setPixelRatio(window.devicePixelRatio); mountRef.current.appendChild(renderer.domElement); camera.position.z = 2; // Generate barcode const generateUPCBarcode = (data) => { // UPC-A encoding patterns for digits 0-9 const encodingPatterns = { L: [ // Left-side patterns '0001101', '0011001', '0010011', '0111101', '0100011', '0110001', '0101111', '0111011', '0110111', '0001011' ], R: [ // Right-side patterns (inverse of left) '1110010', '1100110', '1101100', '1000010', '1011100', '1001110', '1010000', '1000100', '1001000', '1110100' ] }; // Guard patterns const startPattern = '101'; // Start guard bars const middlePattern = '01010'; // Middle guard bars const endPattern = '101'; // End guard bars // Ensure data is exactly 12 digits const cleanData = data.replace(/[^\d]/g, '').slice(0, 12).padEnd(12, '0'); let barcodePattern = startPattern; // First 6 digits (left side) for (let i = 0; i < 6; i++) { barcodePattern += encodingPatterns.L[parseInt(cleanData[i])]; } barcodePattern += middlePattern; // Last 6 digits (right side) for (let i = 6; i < 12; i++) { barcodePattern += encodingPatterns.R[parseInt(cleanData[i])]; } barcodePattern += endPattern; // Convert pattern string to array of 1s and 0s return barcodePattern.split('').map(x => parseInt(x)); }; const bars = generateUPCBarcode(barcodeData); const barGroup = new THREE.Group(); // Add text under barcode // Create text plane const textCanvas = document.createElement('canvas'); const textGeometry = new THREE.PlaneGeometry(3, 0.5); const context = textCanvas.getContext('2d'); textCanvas.width = 1024; // Increased resolution textCanvas.height = 128; // Increased resolution context.fillStyle = 'white'; context.fillRect(0, 0, textCanvas.width, textCanvas.height); context.fillStyle = 'black'; const letterSpacing = 12; // Slightly reduced spacing to accommodate larger font context.font = 'bold 110px Arial'; // Moderately increased font size context.textAlign = 'center'; context.textBaseline = 'middle'; // Add spacing between letters - reduced repeats for better balance const text = barcodeData.split('').join(String.fromCharCode(8202).repeat(2)); context.textRendering = 'geometricPrecision'; context.imageSmoothingEnabled = true; context.imageSmoothingQuality = 'high'; // Anti-aliased text rendering with spacing context.fillText(text, textCanvas.width/2, textCanvas.height/2); context.strokeStyle = 'black'; context.lineWidth = 2; context.strokeText(text, textCanvas.width/2, textCanvas.height/2); const textTexture = new THREE.CanvasTexture(textCanvas); textTexture.minFilter = THREE.LinearFilter; textTexture.magFilter = THREE.LinearFilter; textTexture.needsUpdate = true; const textMaterial = new THREE.MeshBasicMaterial({ map: textTexture, transparent: true, side: THREE.DoubleSide }); const textMesh = new THREE.Mesh(textGeometry, textMaterial); textMesh.position.y = -0.8; // Moved text slightly lower barGroup.add(textMesh); // Create bars bars.forEach((isBar, index) => { if (isBar) { const baseWidth = 0.08; // Thinner bars for UPC const baseSpacing = 0.08; // Tighter spacing for UPC const barHeight = 1.0; // Standard height const barGeometry = new THREE.PlaneGeometry(baseWidth, barHeight); const barMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); const bar = new THREE.Mesh(barGeometry, barMaterial); bar.position.x = (index * baseSpacing) - (bars.length * baseSpacing / 2); bar.position.y = 0; // Ensure all bars are aligned at the same y position barGroup.add(bar); } }); // Clear existing barcode while(scene.children.length > 0) { const child = scene.children[0]; if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); scene.remove(child); } // Apply scaling to the entire barGroup barGroup.scale.set(barcodeWidth * 0.35, barcodeHeight, 1); // Reduced scaling factors scene.add(barGroup); // Animation let animationFrameId; const animate = () => { animationFrameId = requestAnimationFrame(animate); renderer.render(scene, camera); }; animate(); // Cleanup return () => { window.removeEventListener('resize', handleResize); cancelAnimationFrame(animationFrameId); if (mountRef.current) { mountRef.current.removeChild(renderer.domElement); } barGroup.children.forEach(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); }); renderer.dispose(); }; }, [barcodeData, barcodeWidth, barcodeHeight]); return (

ℹ️ Right-click on the barcode and select "Save Image As..." to download

{ const value = e.target.value.replace(/[^\d]/g, '').slice(0, 12); setBarcodeData(value); }} placeholder="Enter 12-digit UPC code" maxLength="12" pattern="\d*" style={{ width: '100%', padding: '12px 16px', marginBottom: '24px', borderRadius: '8px', border: '1px solid #e2e8f0', fontSize: '24px', fontWeight: '500', letterSpacing: '1px', outline: 'none', transition: 'border-color 0.2s ease', }} />

Width setBarcodeWidth(Number(e.target.value))} style={{ width: '100%', accentColor: '#0ea5e9', }} />

Height setBarcodeHeight(Number(e.target.value))} style={{ width: '100%', accentColor: '#0ea5e9', }} />

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