/** * Showcase test for ModelGrid CLI outputs * Demonstrates all the beautiful colored output features * * Run with: deno run --allow-all test/showcase.ts */ import { type ITableColumn, logger } from '../ts/logger.ts'; import { theme } from '../ts/colors.ts'; console.log(''); console.log('═'.repeat(80)); logger.highlight('MODELGRID CLI OUTPUT SHOWCASE'); logger.dim('Demonstrating beautiful, colored terminal output'); console.log('═'.repeat(80)); console.log(''); // === 1. Basic Logging Methods === logger.logBoxTitle('Basic Logging Methods', 60, 'info'); logger.logBoxLine(''); logger.log('Normal log message (default color)'); logger.success('Success message with ✓ symbol'); logger.error('Error message with ✗ symbol'); logger.warn('Warning message with ⚠ symbol'); logger.info('Info message with ℹ symbol'); logger.dim('Dim/secondary text for less important info'); logger.highlight('Highlighted/bold text for emphasis'); logger.logBoxLine(''); logger.logBoxEnd(); console.log(''); // === 2. Colored Boxes === logger.logBoxTitle('Colored Box Styles', 60); logger.logBoxLine(''); logger.logBoxLine('Boxes can be styled with different colors:'); logger.logBoxEnd(); console.log(''); logger.logBox( 'Success Box (Green)', [ 'Used for successful operations', 'Container started, model loaded, etc.', ], 60, 'success', ); console.log(''); logger.logBox( 'Error Box (Red)', [ 'Used for critical errors and failures', 'Configuration errors, GPU detection failures, etc.', ], 60, 'error', ); console.log(''); logger.logBox( 'Warning Box (Yellow)', [ 'Used for warnings and deprecations', 'Driver updates needed, low VRAM, etc.', ], 60, 'warning', ); console.log(''); logger.logBox( 'Info Box (Cyan)', [ 'Used for informational messages', 'Version info, model info, etc.', ], 60, 'info', ); console.log(''); // === 3. GPU Status Table === const gpuColumns: ITableColumn[] = [ { header: 'ID', key: 'id' }, { header: 'Model', key: 'model' }, { header: 'VRAM', key: 'vram', align: 'right' }, { header: 'Status', key: 'status', color: (v) => { if (v.includes('Ready')) return theme.success(v); if (v.includes('Busy')) return theme.warning(v); return theme.dim(v); }, }, { header: 'Utilization', key: 'utilization', align: 'right' }, ]; const gpuData = [ { id: 'gpu-0', model: 'NVIDIA RTX 4090', vram: '24 GB', status: 'Ready', utilization: '15%', }, { id: 'gpu-1', model: 'NVIDIA RTX 4090', vram: '24 GB', status: 'Busy', utilization: '92%', }, { id: 'gpu-2', model: 'AMD RX 7900 XTX', vram: '24 GB', status: 'Ready', utilization: '0%', }, ]; logger.logTable(gpuColumns, gpuData, 'GPU Devices'); console.log(''); // === 4. Container Table === const containerColumns: ITableColumn[] = [ { header: 'ID', key: 'id' }, { header: 'Type', key: 'type' }, { header: 'Status', key: 'status' }, { header: 'GPU', key: 'gpu' }, { header: 'Models', key: 'models', align: 'right' }, ]; const containerData = [ { id: 'ollama-1', type: 'ollama', status: 'Running', gpu: 'gpu-0', models: '3' }, { id: 'vllm-1', type: 'vllm', status: 'Running', gpu: 'gpu-1', models: '1' }, ]; logger.logTable(containerColumns, containerData, 'AI Containers'); console.log(''); // === 5. Service Status Example === logger.logBoxTitle('Service Status', 70, 'success'); logger.logBoxLine(''); logger.logBoxLine(`Status: ${theme.statusActive('Active (Running)')}`); logger.logBoxLine(`Enabled: ${theme.success('Yes')}`); logger.logBoxLine(`Uptime: 2 days, 5 hours, 23 minutes`); logger.logBoxLine(`PID: ${theme.dim('12345')}`); logger.logBoxLine(`Memory: ${theme.dim('245.2 MB')}`); logger.logBoxLine(''); logger.logBoxEnd(); console.log(''); // === 6. Configuration Example === logger.logBoxTitle('Configuration', 70); logger.logBoxLine(''); logger.logBoxLine(`GPUs Detected: ${theme.highlight('3')}`); logger.logBoxLine(`Containers: ${theme.highlight('2')}`); logger.logBoxLine(`API Port: ${theme.dim('8080')}`); logger.logBoxLine(`Config File: ${theme.path('/etc/modelgrid/config.json')}`); logger.logBoxLine(''); logger.logBoxEnd(); console.log(''); // === 7. Model List Example === const modelColumns: ITableColumn[] = [ { header: 'Model', key: 'name' }, { header: 'Container', key: 'container' }, { header: 'Size', key: 'size', align: 'right' }, { header: 'Status', key: 'status' }, ]; const modelData = [ { name: 'llama3:8b', container: 'ollama-1', size: '4.7 GB', status: 'Loaded' }, { name: 'mistral:7b', container: 'ollama-1', size: '4.1 GB', status: 'Loaded' }, { name: 'llama3:70b', container: 'vllm-1', size: '40 GB', status: 'Loaded' }, ]; logger.logTable(modelColumns, modelData, 'Loaded Models'); console.log(''); // === 8. Error Example === logger.logBoxTitle('Error Example', 70, 'error'); logger.logBoxLine(''); logger.logBoxLine(`✗ Failed to start container vllm-2`); logger.logBoxLine(''); logger.logBoxLine('Possible causes:'); logger.logBoxLine(` ${theme.dim('• Insufficient VRAM on assigned GPU')}`); logger.logBoxLine(` ${theme.dim('• Docker daemon not running')}`); logger.logBoxLine(` ${theme.dim('• NVIDIA container toolkit not installed')}`); logger.logBoxLine(''); logger.logBoxLine(`Try: ${theme.command('modelgrid gpu status')}`); logger.logBoxLine(''); logger.logBoxEnd(); console.log(''); // === Final Summary === console.log('═'.repeat(80)); logger.success('CLI Output Showcase Complete!'); logger.dim('All color and formatting features demonstrated'); console.log('═'.repeat(80)); console.log('');