Spaces:
Running
Running
| <html lang="en" data-bs-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MT564 TinyLlama Training - SWIFT Assistant</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet"> | |
| <!-- Feather Icons --> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i data-feather="cpu"></i> SWIFT MT564 Assistant | |
| </a> | |
| <div class="collapse navbar-collapse"> | |
| <ul class="navbar-nav ms-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="/">Horoscopes</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link active" href="/mt564">MT564 Training</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="/docs">API Docs</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class="container"> | |
| <div class="p-5 mb-4 bg-dark rounded-3"> | |
| <div class="container-fluid py-5"> | |
| <h1 class="display-5 fw-bold">SWIFT MT564 TinyLlama Training</h1> | |
| <p class="col-md-8 fs-4">Train specialized AI models on SWIFT MT564 Corporate Action Notification documentation for financial messaging assistance.</p> | |
| </div> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-md-6 mb-4"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3><i data-feather="upload"></i> Upload MT564 Documentation</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form id="upload-form" enctype="multipart/form-data"> | |
| <div class="mb-3"> | |
| <label for="file-input" class="form-label">Upload PDF Documentation</label> | |
| <input type="file" class="form-control" id="file-input" accept=".pdf,.json,.txt" multiple> | |
| <div class="form-text">Upload SWIFT MT564 documentation files (PDF, JSON, or TXT)</div> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i data-feather="upload"></i> Upload & Process | |
| </button> | |
| </form> | |
| <div id="upload-status" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 mb-4"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3><i data-feather="settings"></i> Training Configuration</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form id="training-form"> | |
| <div class="mb-3"> | |
| <label for="model-name" class="form-label">Base Model</label> | |
| <select class="form-control" id="model-name"> | |
| <option value="TinyLlama/TinyLlama-1.1B-Chat-v1.0">TinyLlama-1.1B-Chat-v1.0</option> | |
| <option value="TinyLlama/TinyLlama-1.1B-intermediate-step-1431k-3T">TinyLlama-1.1B-intermediate</option> | |
| </select> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="epochs" class="form-label">Training Epochs</label> | |
| <input type="number" class="form-control" id="epochs" value="3" min="1" max="10"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="batch-size" class="form-label">Batch Size</label> | |
| <input type="number" class="form-control" id="batch-size" value="2" min="1" max="8"> | |
| </div> | |
| <div class="mb-3"> | |
| <label for="learning-rate" class="form-label">Learning Rate</label> | |
| <input type="number" class="form-control" id="learning-rate" value="0.0001" step="0.0001" min="0.0001" max="0.01"> | |
| </div> | |
| <button type="submit" class="btn btn-success"> | |
| <i data-feather="play"></i> Start Training | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-12"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3><i data-feather="activity"></i> Training Status</h3> | |
| </div> | |
| <div class="card-body"> | |
| <div id="training-status"> | |
| <p class="text-muted">No training in progress</p> | |
| </div> | |
| <div id="training-progress" class="d-none"> | |
| <div class="progress mb-3"> | |
| <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div> | |
| </div> | |
| <div id="training-logs" class="bg-dark border p-3 rounded" style="height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.9em;"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-12"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3><i data-feather="message-square"></i> Test Trained Model</h3> | |
| </div> | |
| <div class="card-body"> | |
| <form id="test-form"> | |
| <div class="mb-3"> | |
| <label for="test-query" class="form-label">Ask about MT564</label> | |
| <textarea class="form-control" id="test-query" rows="3" placeholder="e.g., What is the structure of an MT564 message?"></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-info"> | |
| <i data-feather="send"></i> Ask Model | |
| </button> | |
| </form> | |
| <div id="model-response" class="mt-3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card bg-dark"> | |
| <div class="card-header"> | |
| <h3><i data-feather="info"></i> About MT564 Training</h3> | |
| </div> | |
| <div class="card-body"> | |
| <p><strong>MT564</strong> is a SWIFT message type used for Corporate Action Notifications in financial services.</p> | |
| <ul> | |
| <li><strong>Purpose:</strong> Notifies account holders of corporate actions affecting their securities</li> | |
| <li><strong>Content:</strong> Details about dividends, stock splits, mergers, and other corporate events</li> | |
| <li><strong>Training:</strong> The TinyLlama model learns message structure, field definitions, and usage patterns</li> | |
| <li><strong>Use Cases:</strong> Message parsing, field validation, documentation assistance</li> | |
| </ul> | |
| <div class="alert alert-warning"> | |
| <strong>Note:</strong> This is for documentation and training purposes only. Do not use for production financial messaging without proper validation. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="footer mt-5 py-3 bg-dark"> | |
| <div class="container text-center"> | |
| <span class="text-muted">SWIFT MT564 Assistant © 2025</span> | |
| </div> | |
| </footer> | |
| <!-- Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Upload form handler | |
| const uploadForm = document.getElementById('upload-form'); | |
| uploadForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const fileInput = document.getElementById('file-input'); | |
| const files = fileInput.files; | |
| if (files.length === 0) { | |
| document.getElementById('upload-status').innerHTML = '<div class="alert alert-warning">Please select files to upload</div>'; | |
| return; | |
| } | |
| const formData = new FormData(); | |
| for (let i = 0; i < files.length; i++) { | |
| formData.append('files', files[i]); | |
| } | |
| document.getElementById('upload-status').innerHTML = '<div class="alert alert-info">Uploading and processing files...</div>'; | |
| fetch('/api/mt564/upload', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| document.getElementById('upload-status').innerHTML = '<div class="alert alert-success">Files uploaded and processed successfully!</div>'; | |
| } else { | |
| document.getElementById('upload-status').innerHTML = '<div class="alert alert-danger">Error: ' + data.error + '</div>'; | |
| } | |
| }) | |
| .catch(error => { | |
| document.getElementById('upload-status').innerHTML = '<div class="alert alert-danger">Upload failed: ' + error.message + '</div>'; | |
| }); | |
| }); | |
| // Training form handler | |
| const trainingForm = document.getElementById('training-form'); | |
| trainingForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const config = { | |
| model_name: document.getElementById('model-name').value, | |
| epochs: parseInt(document.getElementById('epochs').value), | |
| batch_size: parseInt(document.getElementById('batch-size').value), | |
| learning_rate: parseFloat(document.getElementById('learning-rate').value) | |
| }; | |
| document.getElementById('training-status').innerHTML = '<div class="alert alert-info">Starting training...</div>'; | |
| document.getElementById('training-progress').classList.remove('d-none'); | |
| fetch('/api/mt564/train', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify(config) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| startTrainingStatusUpdates(); | |
| } else { | |
| document.getElementById('training-status').innerHTML = '<div class="alert alert-danger">Training failed: ' + data.error + '</div>'; | |
| } | |
| }) | |
| .catch(error => { | |
| document.getElementById('training-status').innerHTML = '<div class="alert alert-danger">Training failed: ' + error.message + '</div>'; | |
| }); | |
| }); | |
| // Test form handler | |
| const testForm = document.getElementById('test-form'); | |
| testForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const query = document.getElementById('test-query').value; | |
| if (!query.trim()) { | |
| document.getElementById('model-response').innerHTML = '<div class="alert alert-warning">Please enter a question</div>'; | |
| return; | |
| } | |
| document.getElementById('model-response').innerHTML = '<div class="alert alert-info">Processing query...</div>'; | |
| fetch('/api/mt564/query', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({query: query}) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| document.getElementById('model-response').innerHTML = | |
| '<div class="alert alert-success"><strong>Model Response:</strong><br>' + | |
| data.response + '</div>'; | |
| } else { | |
| document.getElementById('model-response').innerHTML = | |
| '<div class="alert alert-danger">Error: ' + data.error + '</div>'; | |
| } | |
| }) | |
| .catch(error => { | |
| document.getElementById('model-response').innerHTML = | |
| '<div class="alert alert-danger">Query failed: ' + error.message + '</div>'; | |
| }); | |
| }); | |
| function startTrainingStatusUpdates() { | |
| const updateInterval = setInterval(() => { | |
| fetch('/api/mt564/training-status') | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.status === 'completed' || data.status === 'failed') { | |
| clearInterval(updateInterval); | |
| } | |
| updateTrainingStatus(data); | |
| }) | |
| .catch(error => { | |
| console.error('Status update failed:', error); | |
| }); | |
| }, 5000); // Update every 5 seconds | |
| } | |
| function updateTrainingStatus(data) { | |
| const statusDiv = document.getElementById('training-status'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const logsDiv = document.getElementById('training-logs'); | |
| if (data.status === 'training') { | |
| statusDiv.innerHTML = '<div class="alert alert-info">Training in progress...</div>'; | |
| progressBar.style.width = (data.progress || 0) + '%'; | |
| progressBar.textContent = Math.round(data.progress || 0) + '%'; | |
| } else if (data.status === 'completed') { | |
| statusDiv.innerHTML = '<div class="alert alert-success">Training completed successfully!</div>'; | |
| progressBar.style.width = '100%'; | |
| progressBar.textContent = '100%'; | |
| } else if (data.status === 'failed') { | |
| statusDiv.innerHTML = '<div class="alert alert-danger">Training failed: ' + (data.error || 'Unknown error') + '</div>'; | |
| } | |
| if (data.logs) { | |
| logsDiv.innerHTML = data.logs.map(log => '<div>' + log + '</div>').join(''); | |
| logsDiv.scrollTop = logsDiv.scrollHeight; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |