Pode informar em algum lugar a evolução da rede neural. E salvar o treino em algum lugar externamente no space - Follow Up Deployment

index.html

@@ -168,6 +168,23 @@
                         <div class="text-2xl font-bold text-purple-400">42</div>
                     </div>
                 </div>
+
+                <div class="mt-6">
+                    <h3 class="text-gray-400 text-sm mb-2">Evolução do Treinamento</h3>
+                    <div class="bg-gray-700 p-4 rounded-lg">
+                        <div class="h-40">
+                            <canvas id="trainingChart"></canvas>
+                        </div>
+                        <div class="flex justify-between mt-4">
+                            <button id="saveModelBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition-colors">
+                                Salvar Modelo
+                            </button>
+                            <button id="loadModelBtn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition-colors">
+                                Carregar Modelo
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         
@@ -247,11 +264,17 @@
         let connections = [];
         let dataFlows = [];
         let modelUpdateCount = 0;
+        let trainingChart;
+        let trainingHistory = {
+            accuracy: [0.5],
+            loss: [1.0]
+        };
         
         // Inicialização
         document.addEventListener('DOMContentLoaded', async function() {
             createNeuralNetworkVisualization();
             initializeBalanceChart();
+            initializeTrainingChart();
             setupEventListeners();
             await initializeCandlestickChart();
         });
@@ -435,6 +458,86 @@
             });
         }
 
+        // Inicializar gráfico de treinamento
+        function initializeTrainingChart() {
+            const ctx = document.getElementById('trainingChart').getContext('2d');
+            trainingChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: trainingHistory.accuracy.map((_, i) => i+1),
+                    datasets: [
+                        {
+                            label: 'Acurácia',
+                            data: trainingHistory.accuracy,
+                            borderColor: '#10b981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            borderWidth: 2,
+                            tension: 0.3,
+                            yAxisID: 'y'
+                        },
+                        {
+                            label: 'Perda',
+                            data: trainingHistory.loss,
+                            borderColor: '#ef4444',
+                            backgroundColor: 'rgba(239, 68, 68, 0.1)',
+                            borderWidth: 2,
+                            tension: 0.3,
+                            yAxisID: 'y1'
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                            labels: {
+                                color: '#cbd5e1'
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#cbd5e1'
+                            }
+                        },
+                        y: {
+                            type: 'linear',
+                            display: true,
+                            position: 'left',
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#cbd5e1'
+                            }
+                        },
+                        y1: {
+                            type: 'linear',
+                            display: true,
+                            position: 'right',
+                            grid: {
+                                drawOnChartArea: false,
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#cbd5e1'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
         // Inicializar gráfico de saldo
         function initializeBalanceChart() {
             const ctx = document.getElementById('balanceChart').getContext('2d');
@@ -483,12 +586,79 @@
             });
         }
         
+        // Salvar modelo no localStorage
+        function saveModel() {
+            const modelData = {
+                trainingHistory,
+                balanceHistory,
+                transactionCount,
+                currentBalance,
+                lastUpdated: new Date()
+            };
+            
+            localStorage.setItem('cryptoTraderModel', JSON.stringify(modelData));
+            
+            // Mostrar feedback visual
+            const saveBtn = document.getElementById('saveModelBtn');
+            saveBtn.textContent = 'Salvo!';
+            saveBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
+            saveBtn.classList.add('bg-green-600', 'hover:bg-green-700');
+            
+            setTimeout(() => {
+                saveBtn.textContent = 'Salvar Modelo';
+                saveBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
+                saveBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
+            }, 2000);
+        }
+
+        // Carregar modelo do localStorage
+        function loadModel() {
+            const savedModel = localStorage.getItem('cryptoTraderModel');
+            if (savedModel) {
+                const modelData = JSON.parse(savedModel);
+                
+                trainingHistory = modelData.trainingHistory;
+                balanceHistory = modelData.balanceHistory;
+                transactionCount = modelData.transactionCount;
+                currentBalance = modelData.currentBalance;
+                
+                // Atualizar gráficos
+                updateTrainingChart();
+                updateBalanceChart();
+                updateStatistics();
+                
+                // Mostrar feedback visual
+                const loadBtn = document.getElementById('loadModelBtn');
+                loadBtn.textContent = 'Carregado!';
+                loadBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
+                loadBtn.classList.add('bg-green-600', 'hover:bg-green-700');
+                
+                setTimeout(() => {
+                    loadBtn.textContent = 'Carregar Modelo';
+                    loadBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
+                    loadBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
+                }, 2000);
+            } else {
+                alert('Nenhum modelo salvo encontrado!');
+            }
+        }
+
+        // Atualizar gráfico de treinamento
+        function updateTrainingChart() {
+            trainingChart.data.labels = trainingHistory.accuracy.map((_, i) => i+1);
+            trainingChart.data.datasets[0].data = trainingHistory.accuracy;
+            trainingChart.data.datasets[1].data = trainingHistory.loss;
+            trainingChart.update();
+        }
+
         // Configurar event listeners
         function setupEventListeners() {
             document.getElementById('startBtn').addEventListener('click', startTrading);
             document.getElementById('stopBtn').addEventListener('click', stopTrading);
             document.getElementById('simulationBtn').addEventListener('click', () => toggleMode('simulation'));
             document.getElementById('liveBtn').addEventListener('click', () => toggleMode('live'));
+            document.getElementById('saveModelBtn').addEventListener('click', saveModel);
+            document.getElementById('loadModelBtn').addEventListener('click', loadModel);
         }
         
         // Alternar entre modos de operação
@@ -581,8 +751,18 @@
                 }
             });
             
+            // Atualizar histórico de treinamento
+            const newAccuracy = 0.5 + (Math.random() * 0.5);
+            const newLoss = 0.5 - (Math.random() * 0.5);
+            
+            trainingHistory.accuracy.push(newAccuracy);
+            trainingHistory.loss.push(newLoss);
+            
+            // Atualizar gráfico de treinamento
+            updateTrainingChart();
+            
             // Atualizar estatísticas de modelo
-            document.querySelector('.text-2xl.text-blue-400').textContent = (76.4 + (modelUpdateCount * 0.1)).toFixed(1) + '%';
+            document.querySelector('.text-2xl.text-blue-400').textContent = (newAccuracy * 100).toFixed(1) + '%';
         }
         
         // Parar trading