Initial commit: Markov Economics Simulation App
This commit is contained in:
295
app/templates/simulation.html
Normal file
295
app/templates/simulation.html
Normal file
@@ -0,0 +1,295 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block extra_head %}
|
||||
<style>
|
||||
.parameter-card {
|
||||
border-left: 4px solid #007bff;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.metrics-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.inequality-warning {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.progress-custom {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.simulation-status {
|
||||
font-size: 0.9rem;
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.btn-simulation {
|
||||
min-width: 120px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<!-- Parameter Controls Panel -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<div class="card parameter-card shadow-sm">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0">📊 Simulation Parameters</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Capital Return Rate (r) -->
|
||||
<div class="mb-4">
|
||||
<label for="capitalRate" class="form-label">
|
||||
<strong>Capital Rate (r)</strong>
|
||||
<span class="badge bg-info ms-1" data-bs-toggle="tooltip"
|
||||
title="Rate of return on capital investment">?</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="capitalRate"
|
||||
min="0" max="25" step="0.1" value="{{ default_params.r_rate * 100 }}">
|
||||
<span class="input-group-text" id="capitalRateValue">{{ "%.1f"|format(default_params.r_rate * 100) }}%</span>
|
||||
</div>
|
||||
<small class="text-muted">Higher values increase wealth accumulation</small>
|
||||
</div>
|
||||
|
||||
<!-- Economic Growth Rate (g) -->
|
||||
<div class="mb-4">
|
||||
<label for="growthRate" class="form-label">
|
||||
<strong>Growth Rate (g)</strong>
|
||||
<span class="badge bg-info ms-1" data-bs-toggle="tooltip"
|
||||
title="Overall economic growth rate">?</span>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="growthRate"
|
||||
min="0" max="20" step="0.1" value="{{ default_params.g_rate * 100 }}">
|
||||
<span class="input-group-text" id="growthRateValue">{{ "%.1f"|format(default_params.g_rate * 100) }}%</span>
|
||||
</div>
|
||||
<small class="text-muted">Affects consumption growth</small>
|
||||
</div>
|
||||
|
||||
<!-- Number of Agents -->
|
||||
<div class="mb-4">
|
||||
<label for="numAgents" class="form-label">
|
||||
<strong>Population Size</strong>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="numAgents"
|
||||
min="10" max="1000" step="10" value="{{ default_params.num_agents }}">
|
||||
<span class="input-group-text" id="numAgentsValue">{{ default_params.num_agents }}</span>
|
||||
</div>
|
||||
<small class="text-muted">Number of economic agents</small>
|
||||
</div>
|
||||
|
||||
<!-- Simulation Length -->
|
||||
<div class="mb-4">
|
||||
<label for="iterations" class="form-label">
|
||||
<strong>Time Steps</strong>
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<input type="range" class="form-range" id="iterations"
|
||||
min="100" max="5000" step="100" value="{{ default_params.iterations }}">
|
||||
<span class="input-group-text" id="iterationsValue">{{ default_params.iterations }}</span>
|
||||
</div>
|
||||
<small class="text-muted">Simulation duration</small>
|
||||
</div>
|
||||
|
||||
<!-- Inequality Indicator -->
|
||||
<div class="alert alert-warning" id="inequalityAlert" style="display: none;">
|
||||
<strong>⚠️ r > g Detected!</strong><br>
|
||||
<small>Wealth inequality will increase over time</small>
|
||||
</div>
|
||||
|
||||
<!-- Control Buttons -->
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-success btn-simulation" id="startBtn">
|
||||
▶️ Start Simulation
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning btn-simulation" id="stopBtn" disabled>
|
||||
⏸️ Stop
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-simulation" id="resetBtn">
|
||||
🔄 Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Simulation Status -->
|
||||
<div class="mt-3">
|
||||
<div class="simulation-status bg-secondary text-white text-center" id="simulationStatus">
|
||||
Ready to start
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="mt-3" id="progressContainer" style="display: none;">
|
||||
<div class="progress progress-custom">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
||||
id="progressBar" role="progressbar" style="width: 0%">
|
||||
<span id="progressText">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Info Card -->
|
||||
<div class="card mt-3 shadow-sm">
|
||||
<div class="card-header bg-dark text-white">
|
||||
<h6 class="mb-0">💡 Theory</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<small>
|
||||
<strong>M-C-M':</strong> Capitalist cycle where money (M) is invested in commodities (C) to generate more money (M').<br><br>
|
||||
|
||||
<strong>C-M-C:</strong> Consumer cycle where commodities (C) are exchanged for money (M) to buy other commodities (C).<br><br>
|
||||
|
||||
<strong>When r > g:</strong> Capital returns exceed economic growth, leading to increasing wealth inequality.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Visualization Area -->
|
||||
<div class="col-lg-9 col-md-8">
|
||||
<!-- Key Metrics Cards -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card metrics-card text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Total Wealth</h6>
|
||||
<h4 id="totalWealthMetric">$0</h4>
|
||||
<small>System-wide</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card metrics-card text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Gini Coefficient</h6>
|
||||
<h4 id="giniMetric">0.00</h4>
|
||||
<small>Inequality measure</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card inequality-warning text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Top 10% Share</h6>
|
||||
<h4 id="top10Metric">0%</h4>
|
||||
<small>Wealth concentration</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card inequality-warning text-white shadow">
|
||||
<div class="card-body text-center">
|
||||
<h6 class="card-title">Capital Share</h6>
|
||||
<h4 id="capitalShareMetric">0%</h4>
|
||||
<small>vs Consumption</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts Row -->
|
||||
<div class="row">
|
||||
<!-- Wealth Evolution Chart -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">📈 Wealth Evolution Over Time</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="wealthEvolutionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inequality Metrics Chart -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">📊 Inequality Metrics</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="inequalityChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wealth Distribution Chart -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card shadow">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">🏛️ Wealth Distribution Histogram</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="chart-container">
|
||||
<canvas id="distributionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export and Actions -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card shadow">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6>📥 Export Simulation Data</h6>
|
||||
<small class="text-muted">Download results for further analysis</small>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="btn btn-outline-primary me-2" id="exportJsonBtn" disabled>
|
||||
📄 JSON
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success" id="exportCsvBtn" disabled>
|
||||
📊 CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden fields for data storage -->
|
||||
<input type="hidden" id="currentSimulationId">
|
||||
<input type="hidden" id="defaultParams" value="{{ default_params | tojson }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<script src="{{ url_for('static', filename='js/simulation.js') }}"></script>
|
||||
<script>
|
||||
// Initialize tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||
});
|
||||
|
||||
// Initialize simulation interface
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeSimulation();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user