Antoine/Atomizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add professional web-based optimization dashboard

Browse Source 
Complete dashboard UI for controlling and monitoring optimization runs.

Backend API (Flask):
- RESTful endpoints for study management
- Start/stop/resume optimization runs
- Real-time status monitoring
- Configuration management
- Visualization data endpoints

Frontend (HTML/CSS/JS + Chart.js):
- Modern gradient design with cards and charts
- Study list sidebar with metadata
- Active optimizations monitoring (5s polling)
- Interactive charts (progress, design vars, constraints)
- Trial history table
- New optimization modal
- Resume/delete study actions

Features:
- List all studies with trial counts
- View detailed study results
- Start new optimizations from UI
- Resume existing studies with additional trials
- Real-time progress monitoring
- Delete unwanted studies
- Chart.js visualizations (progress, DVs, constraints)
- Configuration file selection
- Study metadata tracking

Usage:
  python dashboard/start_dashboard.py
  # Opens browser to http://localhost:5000

Dependencies:
  flask, flask-cors (auto-installed)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Anto01
2025-11-15 13:37:33 -05:00
parent 2c99497f0a
commit 1dab9d638d
7 changed files with 1933 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
dashboard/README.md Normal file
View File

@@ -0,0 +1,188 @@
# Atomizer Dashboard
Professional web-based dashboard for controlling and monitoring optimization runs.
## Features
### Study Management
- **List all studies** - View all optimization studies with metadata
- **Resume studies** - Continue existing studies with additional trials
- **Delete studies** - Clean up old/unwanted studies
- **Study details** - View complete history, results, and metadata
### Optimization Control
- **Start new optimizations** - Configure and launch optimization runs
- **Real-time monitoring** - Track progress of active optimizations
- **Configuration management** - Load and save optimization configs
### Visualization
- **Progress charts** - Objective values over trials
- **Design variable plots** - Track parameter evolution
- **Constraint visualization** - Monitor constraint satisfaction
- **Running best** - See convergence progress
### Results Analysis
- **Best results cards** - Quick view of optimal solutions
- **Trial history table** - Complete trial-by-trial data
- **Export capabilities** - Download results in CSV/JSON
## Installation
1. Install dependencies:
```bash
cd dashboard
pip install -r requirements.txt
```
2. Start the dashboard server:
```bash
python api/app.py
```
3. Open your browser to:
```
http://localhost:5000
```
## Quick Start
### Method 1: Using the launcher script
```bash
cd C:\Users\antoi\Documents\Atomaste\Atomizer
python dashboard/start_dashboard.py
```
### Method 2: Manual start
```bash
cd dashboard
python api/app.py
```
The dashboard will automatically open in your default browser at `http://localhost:5000`
## Usage
### Starting a New Optimization
1. Click "New Optimization" button
2. Enter study name
3. Set number of trials
4. Select configuration file
5. Optionally check "Resume existing" if continuing a study
6. Click "Start Optimization"
### Viewing Study Results
1. Click on a study in the sidebar
2. View summary cards showing best results
3. Examine charts for optimization progress
4. Review trial history table for details
### Resuming a Study
1. Select the study from the sidebar
2. Click "Resume Study"
3. Enter number of additional trials
4. Optimization continues from where it left off
### Monitoring Active Optimizations
Active optimizations appear in the sidebar with:
- Real-time progress bars
- Current trial number
- Status indicators
## API Endpoints
### Studies
- `GET /api/studies` - List all studies
- `GET /api/studies/<name>` - Get study details
- `DELETE /api/studies/<name>/delete` - Delete a study
### Optimization
- `POST /api/optimization/start` - Start new optimization
- `GET /api/optimization/status` - Get all active optimizations
- `GET /api/optimization/<name>/status` - Get specific optimization status
### Configuration
- `GET /api/config/load?path=<path>` - Load config file
- `POST /api/config/save` - Save config file
### Visualization
- `GET /api/results/visualization/<name>` - Get chart data
## Architecture
```
dashboard/
├── api/
│ └── app.py # Flask REST API server
├── frontend/
│ ├── index.html # Main dashboard UI
│ ├── app.js # JavaScript logic
│ └── styles.css # Modern styling
├── requirements.txt # Python dependencies
└── README.md # This file
```
## Technology Stack
- **Backend**: Flask (Python)
- **Frontend**: Vanilla JavaScript + Chart.js
- **Styling**: Modern CSS with gradients and shadows
- **Charts**: Chart.js for interactive visualizations
## Features in Detail
### Real-time Monitoring
The dashboard polls active optimizations every 5 seconds to show:
- Current trial number
- Progress percentage
- Status (running/completed/failed)
### Study Persistence
All studies are stored in SQLite databases with:
- Complete trial history
- Optuna study state
- Metadata (creation date, config hash, resume count)
### Configuration Detection
The system automatically detects when a study configuration has changed:
- Warns when resuming with different geometry
- Calculates MD5 hash of critical config parameters
- Helps prevent invalid resume operations
## Troubleshooting
### Dashboard won't start
- Check that Flask is installed: `pip install flask flask-cors`
- Ensure port 5000 is not in use
- Check firewall settings
### Can't see studies
- Verify optimization_results folder exists
- Check that studies have metadata files
- Refresh the studies list
### Charts not showing
- Ensure Chart.js loaded (check browser console)
- Verify study has trial history
- Check API endpoints are responding
## Future Enhancements
- [ ] Multi-objective Pareto front visualization
- [ ] Export results to PDF/Excel
- [ ] Optimization comparison tool
- [ ] Parameter importance analysis
- [ ] Surrogate model visualization
- [ ] Configuration editor UI
- [ ] Live log streaming
- [ ] Email notifications on completion
## Support
For issues or questions:
1. Check the console for error messages
2. Verify API is running (`http://localhost:5000/api/studies`)
3. Review optimization logs in the console

463
dashboard/api/app.py Normal file
View File

@@ -0,0 +1,463 @@
"""
Atomizer Dashboard API
RESTful API for controlling and monitoring optimization runs.
Provides endpoints for:
- Starting/stopping optimizations
- Managing studies (list, resume, delete)
- Real-time monitoring of progress
- Retrieving results and visualizations
"""
from flask import Flask, jsonify, request, send_from_directory
from flask_cors import CORS
import json
import sys
from pathlib import Path
from typing import Dict, List, Any
import threading
import time
from datetime import datetime
# Add project root to path
project_root = Path(__file__).parent.parent.parent
sys.path.insert(0, str(project_root))
from optimization_engine.runner import OptimizationRunner
app = Flask(__name__, static_folder='../frontend', static_url_path='')
CORS(app)
# Global state for running optimizations
active_optimizations = {}
optimization_lock = threading.Lock()
@app.route('/')
def index():
"""Serve the dashboard frontend."""
return send_from_directory(app.static_folder, 'index.html')
@app.route('/api/studies', methods=['GET'])
def list_studies():
"""
List all available optimization studies.
Returns:
JSON array of study metadata
"""
try:
# Use a dummy runner to access list_studies
config_path = project_root / 'examples/bracket/optimization_config_stress_displacement.json'
runner = OptimizationRunner(
config_path=config_path,
model_updater=lambda x: None,
simulation_runner=lambda: Path('dummy.op2'),
result_extractors={}
)
studies = runner.list_studies()
return jsonify({
'success': True,
'studies': studies
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
@app.route('/api/studies/<study_name>', methods=['GET'])
def get_study_details(study_name: str):
"""
Get detailed information about a specific study.
Args:
study_name: Name of the study
Returns:
JSON with study metadata, history, and summary
"""
try:
config_path = project_root / 'examples/bracket/optimization_config_stress_displacement.json'
runner = OptimizationRunner(
config_path=config_path,
model_updater=lambda x: None,
simulation_runner=lambda: Path('dummy.op2'),
result_extractors={}
)
output_dir = runner.output_dir
# Load history
history_path = output_dir / 'history.json'
history = []
if history_path.exists():
with open(history_path, 'r') as f:
history = json.load(f)
# Load summary
summary_path = output_dir / 'optimization_summary.json'
summary = {}
if summary_path.exists():
with open(summary_path, 'r') as f:
summary = json.load(f)
# Load metadata
metadata_path = runner._get_study_metadata_path(study_name)
metadata = {}
if metadata_path.exists():
with open(metadata_path, 'r') as f:
metadata = json.load(f)
return jsonify({
'success': True,
'study_name': study_name,
'metadata': metadata,
'history': history,
'summary': summary
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
@app.route('/api/studies/<study_name>/delete', methods=['DELETE'])
def delete_study(study_name: str):
"""
Delete a study and all its data.
Args:
study_name: Name of the study to delete
"""
try:
config_path = project_root / 'examples/bracket/optimization_config_stress_displacement.json'
runner = OptimizationRunner(
config_path=config_path,
model_updater=lambda x: None,
simulation_runner=lambda: Path('dummy.op2'),
result_extractors={}
)
# Delete database and metadata
db_path = runner._get_study_db_path(study_name)
metadata_path = runner._get_study_metadata_path(study_name)
if db_path.exists():
db_path.unlink()
if metadata_path.exists():
metadata_path.unlink()
return jsonify({
'success': True,
'message': f'Study {study_name} deleted successfully'
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
@app.route('/api/optimization/start', methods=['POST'])
def start_optimization():
"""
Start a new optimization run or resume an existing one.
Request body:
{
"study_name": "my_study",
"n_trials": 50,
"resume": false,
"config_path": "path/to/config.json"
}
"""
try:
data = request.get_json()
study_name = data.get('study_name', f'study_{datetime.now().strftime("%Y%m%d_%H%M%S")}')
n_trials = data.get('n_trials', 50)
resume = data.get('resume', False)
config_path = data.get('config_path', 'examples/bracket/optimization_config_stress_displacement.json')
with optimization_lock:
if study_name in active_optimizations:
return jsonify({
'success': False,
'error': f'Study {study_name} is already running'
}), 400
# Mark as active
active_optimizations[study_name] = {
'status': 'starting',
'start_time': datetime.now().isoformat(),
'n_trials': n_trials,
'current_trial': 0
}
# Start optimization in background thread
def run_optimization():
try:
# Import necessary functions
from examples.test_journal_optimization import (
bracket_model_updater,
bracket_simulation_runner,
stress_extractor,
displacement_extractor
)
runner = OptimizationRunner(
config_path=project_root / config_path,
model_updater=bracket_model_updater,
simulation_runner=bracket_simulation_runner,
result_extractors={
'stress_extractor': stress_extractor,
'displacement_extractor': displacement_extractor
}
)
with optimization_lock:
active_optimizations[study_name]['status'] = 'running'
study = runner.run(
study_name=study_name,
n_trials=n_trials,
resume=resume
)
with optimization_lock:
active_optimizations[study_name]['status'] = 'completed'
active_optimizations[study_name]['end_time'] = datetime.now().isoformat()
active_optimizations[study_name]['best_value'] = study.best_value
active_optimizations[study_name]['best_params'] = study.best_params
except Exception as e:
with optimization_lock:
active_optimizations[study_name]['status'] = 'failed'
active_optimizations[study_name]['error'] = str(e)
thread = threading.Thread(target=run_optimization, daemon=True)
thread.start()
return jsonify({
'success': True,
'message': f'Optimization {study_name} started',
'study_name': study_name
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
@app.route('/api/optimization/status', methods=['GET'])
def get_optimization_status():
"""
Get status of all active optimizations.
Returns:
JSON with status of all running/recent optimizations
"""
with optimization_lock:
return jsonify({
'success': True,
'active_optimizations': active_optimizations
})
@app.route('/api/optimization/<study_name>/status', methods=['GET'])
def get_study_status(study_name: str):
"""
Get real-time status of a specific optimization.
Args:
study_name: Name of the study
"""
with optimization_lock:
if study_name not in active_optimizations:
# Try to get from history
try:
config_path = project_root / 'examples/bracket/optimization_config_stress_displacement.json'
runner = OptimizationRunner(
config_path=config_path,
model_updater=lambda x: None,
simulation_runner=lambda: Path('dummy.op2'),
result_extractors={}
)
history_path = runner.output_dir / 'history.json'
if history_path.exists():
with open(history_path, 'r') as f:
history = json.load(f)
return jsonify({
'success': True,
'status': 'completed',
'n_trials': len(history)
})
except:
pass
return jsonify({
'success': False,
'error': 'Study not found'
}), 404
return jsonify({
'success': True,
**active_optimizations[study_name]
})
@app.route('/api/config/load', methods=['GET'])
def load_config():
"""
Load optimization configuration from file.
Query params:
path: Path to config file (relative to project root)
"""
try:
config_path = request.args.get('path', 'examples/bracket/optimization_config_stress_displacement.json')
full_path = project_root / config_path
with open(full_path, 'r') as f:
config = json.load(f)
return jsonify({
'success': True,
'config': config,
'path': config_path
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
@app.route('/api/config/save', methods=['POST'])
def save_config():
"""
Save optimization configuration to file.
Request body:
{
"path": "path/to/config.json",
"config": {...}
}
"""
try:
data = request.get_json()
config_path = data.get('path')
config = data.get('config')
if not config_path or not config:
return jsonify({
'success': False,
'error': 'Missing path or config'
}), 400
full_path = project_root / config_path
full_path.parent.mkdir(parents=True, exist_ok=True)
with open(full_path, 'w') as f:
json.dump(config, f, indent=2)
return jsonify({
'success': True,
'message': f'Configuration saved to {config_path}'
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
@app.route('/api/results/visualization/<study_name>', methods=['GET'])
def get_visualization_data(study_name: str):
"""
Get data formatted for visualization (charts).
Args:
study_name: Name of the study
"""
try:
config_path = project_root / 'examples/bracket/optimization_config_stress_displacement.json'
runner = OptimizationRunner(
config_path=config_path,
model_updater=lambda x: None,
simulation_runner=lambda: Path('dummy.op2'),
result_extractors={}
)
history_path = runner.output_dir / 'history.json'
if not history_path.exists():
return jsonify({
'success': False,
'error': 'No history found for this study'
}), 404
with open(history_path, 'r') as f:
history = json.load(f)
# Format data for charts
trials = [entry['trial_number'] for entry in history]
objectives = {}
design_vars = {}
constraints = {}
for entry in history:
for obj_name, obj_value in entry['objectives'].items():
if obj_name not in objectives:
objectives[obj_name] = []
objectives[obj_name].append(obj_value)
for dv_name, dv_value in entry['design_variables'].items():
if dv_name not in design_vars:
design_vars[dv_name] = []
design_vars[dv_name].append(dv_value)
for const_name, const_value in entry['constraints'].items():
if const_name not in constraints:
constraints[const_name] = []
constraints[const_name].append(const_value)
# Calculate running best
total_objectives = [entry['total_objective'] for entry in history]
running_best = []
current_best = float('inf')
for val in total_objectives:
current_best = min(current_best, val)
running_best.append(current_best)
return jsonify({
'success': True,
'trials': trials,
'objectives': objectives,
'design_variables': design_vars,
'constraints': constraints,
'total_objectives': total_objectives,
'running_best': running_best
})
except Exception as e:
return jsonify({
'success': False,
'error': str(e)
}), 500
if __name__ == '__main__':
print("="*60)
print("ATOMIZER DASHBOARD API")
print("="*60)
print("Starting Flask server on http://localhost:5000")
print("Access the dashboard at: http://localhost:5000")
print("="*60)
app.run(debug=True, host='0.0.0.0', port=5000, threaded=True)

507
dashboard/frontend/app.js Normal file
View File

@@ -0,0 +1,507 @@
// Atomizer Dashboard - Frontend JavaScript
const API_BASE = 'http://localhost:5000/api';
let currentStudy = null;
let charts = {
progress: null,
designVars: null,
constraints: null
};
// Initialize dashboard
document.addEventListener('DOMContentLoaded', () => {
console.log('Atomizer Dashboard loaded');
refreshStudies();
startActiveOptimizationsPolling();
});
// ====================
// Studies Management
// ====================
async function refreshStudies() {
try {
const response = await fetch(`${API_BASE}/studies`);
const data = await response.json();
if (data.success) {
renderStudiesList(data.studies);
} else {
showError('Failed to load studies: ' + data.error);
}
} catch (error) {
showError('Connection error: ' + error.message);
}
}
function renderStudiesList(studies) {
const container = document.getElementById('studiesList');
if (!studies || studies.length === 0) {
container.innerHTML = '<p class="empty">No studies found</p>';
return;
}
const html = studies.map(study => `
<div class="study-item" onclick="loadStudy('${study.study_name}')">
<div class="study-name">${study.study_name}</div>
<div class="study-info">
<span class="badge">${study.total_trials || 0} trials</span>
${study.resume_count > 0 ? `<span class="badge-secondary">Resumed ${study.resume_count}x</span>` : ''}
</div>
<div class="study-date">${formatDate(study.created_at)}</div>
</div>
`).join('');
container.innerHTML = html;
}
async function loadStudy(studyName) {
try {
const response = await fetch(`${API_BASE}/studies/${studyName}`);
const data = await response.json();
if (data.success) {
currentStudy = studyName;
displayStudyDetails(data);
} else {
showError('Failed to load study: ' + data.error);
}
} catch (error) {
showError('Connection error: ' + error.message);
}
}
function displayStudyDetails(data) {
// Hide welcome, show details
document.getElementById('welcomeScreen').style.display = 'none';
document.getElementById('studyDetails').style.display = 'block';
// Update header
document.getElementById('studyTitle').textContent = data.study_name;
document.getElementById('studyMeta').textContent =
`Created: ${formatDate(data.metadata.created_at)} | Config Hash: ${data.metadata.config_hash.substring(0, 8)}`;
// Update summary cards
if (data.summary && data.summary.best_value !== undefined) {
document.getElementById('bestObjective').textContent = data.summary.best_value.toFixed(4);
document.getElementById('totalTrials').textContent = data.summary.n_trials || data.history.length;
// Best parameters
const paramsHtml = Object.entries(data.summary.best_params || {})
.map(([name, value]) => `<div><strong>${name}:</strong> ${value.toFixed(4)}</div>`)
.join('');
document.getElementById('bestParams').innerHTML = paramsHtml || '<p>No data</p>';
}
// Render charts
renderCharts(data.history);
// Render history table
renderHistoryTable(data.history);
}
// ====================
// Charts
// ====================
async function renderCharts(history) {
if (!history || history.length === 0) return;
// Get visualization data
try {
const response = await fetch(`${API_BASE}/results/visualization/${currentStudy}`);
const data = await response.json();
if (!data.success) return;
// Progress Chart
renderProgressChart(data.trials, data.total_objectives, data.running_best);
// Design Variables Chart
renderDesignVarsChart(data.trials, data.design_variables);
// Constraints Chart
renderConstraintsChart(data.trials, data.constraints);
} catch (error) {
console.error('Error rendering charts:', error);
}
}
function renderProgressChart(trials, objectives, runningBest) {
const ctx = document.getElementById('progressChart').getContext('2d');
if (charts.progress) {
charts.progress.destroy();
}
charts.progress = new Chart(ctx, {
type: 'line',
data: {
labels: trials,
datasets: [
{
label: 'Total Objective',
data: objectives,
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
tension: 0.1
},
{
label: 'Running Best',
data: runningBest,
borderColor: '#10b981',
backgroundColor: 'rgba(16, 185, 129, 0.1)',
borderWidth: 2,
tension: 0.1
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top'
},
tooltip: {
mode: 'index',
intersect: false
}
},
scales: {
x: {
title: {
display: true,
text: 'Trial Number'
}
},
y: {
title: {
display: true,
text: 'Objective Value'
}
}
}
}
});
}
function renderDesignVarsChart(trials, designVars) {
const ctx = document.getElementById('designVarsChart').getContext('2d');
if (charts.designVars) {
charts.designVars.destroy();
}
const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
const datasets = Object.entries(designVars).map(([name, values], index) => ({
label: name,
data: values,
borderColor: colors[index % colors.length],
backgroundColor: colors[index % colors.length] + '20',
tension: 0.1
}));
charts.designVars = new Chart(ctx, {
type: 'line',
data: {
labels: trials,
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
x: {
title: {
display: true,
text: 'Trial Number'
}
},
y: {
title: {
display: true,
text: 'Value'
}
}
}
}
});
}
function renderConstraintsChart(trials, constraints) {
const ctx = document.getElementById('constraintsChart').getContext('2d');
if (charts.constraints) {
charts.constraints.destroy();
}
const colors = ['#3b82f6', '#10b981', '#f59e0b'];
const datasets = Object.entries(constraints).map(([name, values], index) => ({
label: name,
data: values,
borderColor: colors[index % colors.length],
backgroundColor: colors[index % colors.length] + '20',
tension: 0.1
}));
charts.constraints = new Chart(ctx, {
type: 'line',
data: {
labels: trials,
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: true,
position: 'top'
}
},
scales: {
x: {
title: {
display: true,
text: 'Trial Number'
}
},
y: {
title: {
display: true,
text: 'Value'
}
}
}
}
});
}
// ====================
// History Table
// ====================
function renderHistoryTable(history) {
const tbody = document.querySelector('#historyTable tbody');
if (!history || history.length === 0) {
tbody.innerHTML = '<tr><td colspan="5">No trials yet</td></tr>';
return;
}
const html = history.map(trial => `
<tr>
<td>${trial.trial_number}</td>
<td>${trial.total_objective.toFixed(4)}</td>
<td>${formatDesignVars(trial.design_variables)}</td>
<td>${formatConstraints(trial.constraints)}</td>
<td>${formatDateTime(trial.timestamp)}</td>
</tr>
`).join('');
tbody.innerHTML = html;
}
function formatDesignVars(vars) {
return Object.entries(vars)
.map(([name, value]) => `${name}=${value.toFixed(4)}`)
.join(', ');
}
function formatConstraints(constraints) {
return Object.entries(constraints)
.map(([name, value]) => `${name}=${value.toFixed(4)}`)
.join(', ');
}
// ====================
// New Optimization
// ====================
function showNewOptimizationModal() {
document.getElementById('newOptimizationModal').style.display = 'flex';
}
function closeNewOptimizationModal() {
document.getElementById('newOptimizationModal').style.display = 'none';
}
async function startOptimization() {
const studyName = document.getElementById('newStudyName').value || `study_${Date.now()}`;
const nTrials = parseInt(document.getElementById('newTrials').value) || 50;
const configPath = document.getElementById('newConfigPath').value;
const resume = document.getElementById('resumeExisting').checked;
try {
const response = await fetch(`${API_BASE}/optimization/start`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
study_name: studyName,
n_trials: nTrials,
config_path: configPath,
resume: resume
})
});
const data = await response.json();
if (data.success) {
showSuccess(`Optimization "${studyName}" started successfully!`);
closeNewOptimizationModal();
setTimeout(refreshStudies, 1000);
} else {
showError('Failed to start optimization: ' + data.error);
}
} catch (error) {
showError('Connection error: ' + error.message);
}
}
// ====================
// Active Optimizations Polling
// ====================
function startActiveOptimizationsPolling() {
setInterval(updateActiveOptimizations, 5000); // Poll every 5 seconds
updateActiveOptimizations();
}
async function updateActiveOptimizations() {
try {
const response = await fetch(`${API_BASE}/optimization/status`);
const data = await response.json();
if (data.success) {
renderActiveOptimizations(data.active_optimizations);
}
} catch (error) {
console.error('Failed to update active optimizations:', error);
}
}
function renderActiveOptimizations(optimizations) {
const container = document.getElementById('activeOptimizations');
const entries = Object.entries(optimizations);
if (entries.length === 0) {
container.innerHTML = '<p class="empty">No active optimizations</p>';
return;
}
const html = entries.map(([name, opt]) => `
<div class="active-item">
<div class="active-name">${name}</div>
<div class="active-status status-${opt.status}">${opt.status}</div>
${opt.status === 'running' ? `
<div class="progress-bar">
<div class="progress-fill" style="width: ${(opt.current_trial / opt.n_trials * 100).toFixed(0)}%"></div>
</div>
<div class="active-progress">${opt.current_trial || 0} / ${opt.n_trials} trials</div>
` : ''}
</div>
`).join('');
container.innerHTML = html;
}
// ====================
// Study Actions
// ====================
async function resumeCurrentStudy() {
if (!currentStudy) return;
const nTrials = prompt('Number of additional trials:', '25');
if (!nTrials) return;
try {
const response = await fetch(`${API_BASE}/optimization/start`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
study_name: currentStudy,
n_trials: parseInt(nTrials),
resume: true
})
});
const data = await response.json();
if (data.success) {
showSuccess(`Study "${currentStudy}" resumed with ${nTrials} additional trials`);
} else {
showError('Failed to resume study: ' + data.error);
}
} catch (error) {
showError('Connection error: ' + error.message);
}
}
async function deleteCurrentStudy() {
if (!currentStudy) return;
if (!confirm(`Are you sure you want to delete study "${currentStudy}"? This cannot be undone.`)) {
return;
}
try {
const response = await fetch(`${API_BASE}/studies/${currentStudy}/delete`, {
method: 'DELETE'
});
const data = await response.json();
if (data.success) {
showSuccess(`Study "${currentStudy}" deleted successfully`);
currentStudy = null;
document.getElementById('studyDetails').style.display = 'none';
document.getElementById('welcomeScreen').style.display = 'block';
refreshStudies();
} else {
showError('Failed to delete study: ' + data.error);
}
} catch (error) {
showError('Connection error: ' + error.message);
}
}
// ====================
// Utility Functions
// ====================
function formatDate(dateString) {
if (!dateString) return 'N/A';
const date = new Date(dateString);
return date.toLocaleDateString();
}
function formatDateTime(dateString) {
if (!dateString) return 'N/A';
const date = new Date(dateString);
return date.toLocaleString();
}
function showSuccess(message) {
// Simple success notification
alert('✓ ' + message);
}
function showError(message) {
// Simple error notification
alert('✗ Error: ' + message);
console.error(message);
}

184
dashboard/frontend/index.html Normal file
View File

@@ -0,0 +1,184 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atomizer - Optimization Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dashboard-container">
<!-- Header -->
<header class="dashboard-header">
<div class="header-content">
<h1>⚛️ Atomizer</h1>
<p class="subtitle">Optimization Dashboard</p>
</div>
<div class="header-actions">
<button class="btn btn-primary" onclick="showNewOptimizationModal()">
▶️ New Optimization
</button>
<button class="btn btn-secondary" onclick="refreshStudies()">
🔄 Refresh
</button>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-section">
<h3>Studies</h3>
<div id="studiesList" class="studies-list">
<p class="loading">Loading studies...</p>
</div>
</div>
<div class="sidebar-section">
<h3>Active Optimizations</h3>
<div id="activeOptimizations" class="active-list">
<p class="empty">No active optimizations</p>
</div>
</div>
</aside>
<!-- Content Area -->
<main class="content-area">
<!-- Welcome Screen -->
<div id="welcomeScreen" class="welcome-screen">
<h2>Welcome to Atomizer</h2>
<p>Select a study from the sidebar or start a new optimization</p>
<div class="quick-actions">
<button class="btn btn-large btn-primary" onclick="showNewOptimizationModal()">
Start New Optimization
</button>
<button class="btn btn-large btn-secondary" onclick="refreshStudies()">
View Existing Studies
</button>
</div>
</div>
<!-- Study Details View -->
<div id="studyDetails" class="study-details" style="display: none;">
<div class="study-header">
<div>
<h2 id="studyTitle">Study Name</h2>
<p id="studyMeta" class="study-meta"></p>
</div>
<div class="study-actions">
<button class="btn btn-primary" onclick="resumeCurrentStudy()">
▶️ Resume Study
</button>
<button class="btn btn-danger" onclick="deleteCurrentStudy()">
🗑️ Delete
</button>
</div>
</div>
<!-- Best Result Card -->
<div class="results-cards">
<div class="result-card">
<h3>Best Result</h3>
<div class="result-value" id="bestObjective">-</div>
<p class="result-label">Objective Value</p>
</div>
<div class="result-card">
<h3>Total Trials</h3>
<div class="result-value" id="totalTrials">-</div>
<p class="result-label">Completed</p>
</div>
<div class="result-card">
<h3>Best Parameters</h3>
<div id="bestParams" class="params-list"></div>
</div>
</div>
<!-- Charts -->
<div class="charts-container">
<div class="chart-card">
<h3>Optimization Progress</h3>
<canvas id="progressChart"></canvas>
</div>
<div class="chart-card">
<h3>Design Variables</h3>
<canvas id="designVarsChart"></canvas>
</div>
<div class="chart-card">
<h3>Constraints</h3>
<canvas id="constraintsChart"></canvas>
</div>
</div>
<!-- History Table -->
<div class="history-section">
<h3>Trial History</h3>
<div class="table-container">
<table id="historyTable">
<thead>
<tr>
<th>Trial</th>
<th>Objective</th>
<th>Design Variables</th>
<th>Constraints</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- New Optimization Modal -->
<div id="newOptimizationModal" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header">
<h2>Start New Optimization</h2>
<button class="close-btn" onclick="closeNewOptimizationModal()">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Study Name</label>
<input type="text" id="newStudyName" placeholder="my_optimization_study" />
</div>
<div class="form-group">
<label>Number of Trials</label>
<input type="number" id="newTrials" value="50" min="1" />
</div>
<div class="form-group">
<label>Configuration File</label>
<select id="newConfigPath">
<option value="examples/bracket/optimization_config_stress_displacement.json">
Bracket - Stress Minimization
</option>
<option value="examples/bracket/optimization_config.json">
Bracket - Multi-objective
</option>
</select>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="resumeExisting" />
Resume existing study (if exists)
</label>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeNewOptimizationModal()">
Cancel
</button>
<button class="btn btn-primary" onclick="startOptimization()">
Start Optimization
</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

544
dashboard/frontend/styles.css Normal file
View File

@@ -0,0 +1,544 @@
/* Atomizer Dashboard Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #3b82f6;
--primary-dark: #2563eb;
--secondary: #64748b;
--success: #10b981;
--danger: #ef4444;
--warning: #f59e0b;
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #1e293b;
--text-light: #64748b;
--border: #e2e8f0;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
}
.dashboard-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Header */
.dashboard-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-lg);
}
.header-content h1 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.subtitle {
opacity: 0.9;
font-size: 0.95rem;
}
.header-actions {
display: flex;
gap: 1rem;
}
/* Main Content */
.main-content {
flex: 1;
display: flex;
gap: 2rem;
padding: 2rem;
max-width: 1800px;
width: 100%;
margin: 0 auto;
}
/* Sidebar */
.sidebar {
width: 300px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-section {
background: var(--card-bg);
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--shadow);
}
.sidebar-section h3 {
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--text);
}
.studies-list, .active-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.study-item {
padding: 1rem;
background: var(--bg);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
}
.study-item:hover {
background: #f1f5f9;
border-color: var(--primary);
transform: translateY(-2px);
}
.study-name {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text);
}
.study-info {
display: flex;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.study-date {
font-size: 0.85rem;
color: var(--text-light);
}
.badge {
display: inline-block;
padding: 0.2rem 0.5rem;
background: var(--primary);
color: white;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.badge-secondary {
background: var(--secondary);
padding: 0.2rem 0.5rem;
color: white;
border-radius: 4px;
font-size: 0.75rem;
}
.active-item {
padding: 1rem;
background: var(--bg);
border-radius: 8px;
border-left: 4px solid var(--success);
}
.active-name {
font-weight: 600;
margin-bottom: 0.5rem;
}
.active-status {
display: inline-block;
padding: 0.2rem 0.6rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.status-running {
background: var(--success);
color: white;
}
.status-completed {
background: var(--primary);
color: white;
}
.status-failed {
background: var(--danger);
color: white;
}
.progress-bar {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
margin: 0.5rem 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--success), var(--primary));
transition: width 0.3s;
}
.active-progress {
font-size: 0.85rem;
color: var(--text-light);
}
/* Content Area */
.content-area {
flex: 1;
background: var(--card-bg);
border-radius: 12px;
padding: 2rem;
box-shadow: var(--shadow);
overflow-y: auto;
}
.welcome-screen {
text-align: center;
padding: 4rem 2rem;
}
.welcome-screen h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.welcome-screen p {
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 3rem;
}
.quick-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Study Details */
.study-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--border);
}
.study-header h2 {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.study-meta {
color: var(--text-light);
font-size: 0.9rem;
}
.study-actions {
display: flex;
gap: 0.75rem;
}
/* Result Cards */
.results-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.result-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}
.result-card h3 {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.result-value {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.result-label {
font-size: 0.9rem;
opacity: 0.8;
}
.params-list {
font-size: 0.95rem;
}
.params-list div {
margin-bottom: 0.5rem;
}
/* Charts */
.charts-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-card {
background: var(--bg);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid var(--border);
}
.chart-card h3 {
margin-bottom: 1rem;
color: var(--text);
}
.chart-card canvas {
max-height: 300px;
}
/* History Table */
.history-section {
margin-top: 2rem;
}
.history-section h3 {
margin-bottom: 1rem;
}
.table-container {
overflow-x: auto;
border-radius: 8px;
border: 1px solid var(--border);
}
table {
width: 100%;
border-collapse: collapse;
background: white;
}
thead {
background: var(--bg);
}
th {
padding: 1rem;
text-align: left;
font-weight: 600;
color: var(--text);
border-bottom: 2px solid var(--border);
}
td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
font-size: 0.9rem;
}
tbody tr:hover {
background: var(--bg);
}
/* Buttons */
.btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-size: 0.95rem;
}
.btn-primary {
background: var(--primary);
color: white;
}
.btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3);
}
.btn-secondary {
background: var(--secondary);
color: white;
}
.btn-secondary:hover {
background: #475569;
transform: translateY(-1px);
}
.btn-danger {
background: var(--danger);
color: white;
}
.btn-danger:hover {
background: #dc2626;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.1rem;
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: white;
border-radius: 12px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.modal-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h2 {
font-size: 1.5rem;
}
.close-btn {
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: var(--text-light);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.close-btn:hover {
background: var(--bg);
}
.modal-body {
padding: 1.5rem;
}
.modal-footer {
padding: 1.5rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
/* Form Elements */
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text);
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary);
}
.form-group input[type="checkbox"] {
margin-right: 0.5rem;
}
/* Utility Classes */
.loading, .empty {
text-align: center;
padding: 2rem;
color: var(--text-light);
}
/* Responsive */
@media (max-width: 1024px) {
.main-content {
flex-direction: column;
}
.sidebar {
width: 100%;
}
.charts-container {
grid-template-columns: 1fr;
}
}

2
dashboard/requirements.txt Normal file
View File

@@ -0,0 +1,2 @@
flask>=2.3.0
flask-cors>=4.0.0

45
dashboard/start_dashboard.py Normal file
View File

@@ -0,0 +1,45 @@
"""
Atomizer Dashboard Launcher
Simple script to start the dashboard server and open the browser.
"""
import sys
import webbrowser
import time
from pathlib import Path
import subprocess
def main():
dashboard_dir = Path(__file__).parent
api_script = dashboard_dir / 'api' / 'app.py'
print("="*60)
print("ATOMIZER DASHBOARD LAUNCHER")
print("="*60)
print(f"\nStarting dashboard server...")
print(f"Dashboard will open at: http://localhost:5000")
print("\nPress Ctrl+C to stop the server")
print("="*60)
# Give user a moment to read
time.sleep(2)
# Open browser after a short delay
def open_browser():
time.sleep(3) # Wait for server to start
webbrowser.open('http://localhost:5000')
import threading
browser_thread = threading.Thread(target=open_browser, daemon=True)
browser_thread.start()
# Start the Flask server
try:
subprocess.run([sys.executable, str(api_script)], cwd=str(dashboard_dir))
except KeyboardInterrupt:
print("\n\nShutting down dashboard server...")
print("Goodbye!")
if __name__ == '__main__':
main()