Munich-news/docs/ADMIN_DASHBOARD.md

Admin Dashboard

Overview

The Admin Dashboard provides a web interface to monitor and manage the Munich News system, including AI status, GPU usage, performance metrics, and clustering statistics.

Features

📊 System Statistics

• Total articles count
• Crawled articles
• AI summarized articles
• Clustered articles
• Neutral summaries generated
• Active subscribers

🤖 AI Status (Ollama)

• Connection status
• Current model
• Base URL
• Enabled/disabled state
• Live response test

⚡ GPU Status

• GPU availability detection
• GPU usage status (CPU vs GPU mode)
• Models loaded count
• GPU details (layers, model info)
• Performance recommendations

🚀 Performance Test

• Real-time performance testing
• Response time measurement
• Performance rating (Excellent/Good/Fair/Slow)
• Recommendations for optimization

📦 Available Models

• List of downloaded models
• Current model indicator
• Model management info

⚙️ Configuration

• Ollama configuration details
• Environment file status
• API key status
• Base URL and model settings

🔗 AI Clustering & Aggregation

• Clustering statistics
• Multi-source story detection
• Neutral summary generation metrics
• Clustering rate percentage

Access

Using Docker Compose (Recommended)

The frontend is automatically started with docker-compose:

# Start all services including frontend
docker-compose up -d

# Check frontend status
docker-compose ps frontend

# View frontend logs
docker-compose logs -f frontend

The frontend will be available at: http://localhost:3000

Access Admin Dashboard

Open your browser and navigate to:

http://localhost:3000/admin.html

Manual Start (Development)

If you want to run the frontend outside Docker:

# Navigate to frontend directory
cd frontend

# Install dependencies (first time only)
npm install

# Start the server
npm start

# Or with nodemon for auto-reload
npm run dev

Screenshots

Dashboard Overview

The dashboard displays:

• Real-time system statistics
• AI/Ollama status with live connection test
• GPU detection and usage
• Performance metrics
• Model management
• Configuration details

Performance Test

Click "Run Test" to:

• Test AI response time
• Get performance rating
• Receive optimization recommendations

GPU Status

Shows:

• ✅ GPU Active - Using GPU acceleration (fast)
• ⚠️ CPU Mode - Using CPU only (slower)
• Recommendations for enabling GPU

API Endpoints Used

The dashboard connects to these backend APIs:

• GET /api/stats - System statistics
• GET /api/ollama/ping - Ollama connection test
• GET /api/ollama/gpu-status - GPU detection
• GET /api/ollama/test - Performance test
• GET /api/ollama/models - List models
• GET /api/ollama/config - Configuration

Refresh Data

Click the 🔄 Refresh All button to reload all dashboard data.

Navigation

• ← Back to Home - Return to main newsletter page
• Admin Dashboard link in footer of main page

Troubleshooting

Frontend Won't Start

# Check if port 3000 is in use
lsof -i :3000

# Install dependencies
cd frontend
npm install

# Start server
npm start

Can't Connect to Backend

1. Check backend is running:

   docker-compose ps backend
   

2. Check backend URL in frontend/server.js:

   const API_URL = process.env.API_URL || 'http://localhost:5001';
   

3. Test backend directly:

   curl http://localhost:5001/api/stats
   

Dashboard Shows Errors

1. Check browser console (F12) for errors
2. Verify backend APIs are accessible
3. Check CORS settings if running on different domains

Development

File Structure

frontend/
├── public/
│   ├── index.html       # Main newsletter page
│   ├── admin.html       # Admin dashboard ⭐
│   ├── admin.js         # Dashboard JavaScript ⭐
│   ├── app.js           # Main page JavaScript
│   └── styles.css       # Shared styles
├── server.js            # Express server
└── package.json         # Dependencies

Adding New Features

1. Add API endpoint in backend/routes/
2. Add function in frontend/public/admin.js
3. Add UI section in frontend/public/admin.html
4. Call function in refreshAll() or on button click

Styling

The dashboard uses inline styles for simplicity. Key classes:

• .card - Dashboard cards
• .stat-row - Statistic rows
• .status-indicator - Status dots (green/red/yellow)
• .performance-badge - Performance ratings
• .btn - Buttons

Production Deployment

Option 1: Serve with Backend

Add frontend to docker-compose:

frontend:
  build: ./frontend
  ports:
    - "3000:3000"
  environment:
    - API_URL=http://backend:5001
  depends_on:
    - backend

Option 2: Static Hosting

Build and serve static files:

# Serve with nginx, Apache, or CDN
cp -r frontend/public/* /var/www/html/

Update API URLs to point to production backend.

Option 3: Reverse Proxy

Use nginx to serve both:

location / {
    proxy_pass http://frontend:3000;
}

location /api/ {
    proxy_pass http://backend:5001;
}

Security

Production Recommendations

1. Add authentication - Protect admin dashboard
2. Use HTTPS - Encrypt traffic
3. Rate limiting - Prevent abuse
4. CORS configuration - Restrict origins
5. API keys - Secure backend access

Basic Auth Example

// In server.js
const basicAuth = require('express-basic-auth');

app.use('/admin.html', basicAuth({
    users: { 'admin': 'your-secure-password' },
    challenge: true
}));

Related Documentation

• API.md - Backend API reference
• CHECK_GPU_STATUS.md - GPU status checking
• CHANGING_AI_MODEL.md - Model management
• AI_NEWS_AGGREGATION.md - AI features

Support

For issues or questions:

1. Check browser console for errors
2. Check backend logs: docker-compose logs backend
3. Verify API endpoints with curl
4. Check TROUBLESHOOTING.md