| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>BIOELECTRA Token Classification</title> |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
| <style> |
| body { font-family: Arial, sans-serif; padding: 20px; background-color: #f8f9fa; } |
| form, .results { margin-top: 30px; } |
| textarea { width: 100%; height: 100px; } |
| table { border-collapse: collapse; width: 100%; margin-top: 20px; } |
| th, td { border: 1px solid #ccc; padding: 8px; text-align: left; } |
| .chart-container { width: 60%; margin: 30px auto; } |
| button { padding: 10px 20px; margin-top: 10px; background-color: #007bff; color: white; border: none; } |
| button:hover { background-color: #0056b3; } |
| </style> |
| </head> |
| <body> |
|
|
| <h1>BIOELECTRA Token Classification Demo</h1> |
|
|
| <form method="post" action="/" enctype="application/x-www-form-urlencoded"> |
| <label for="input_text">Enter a sentence:</label><br> |
| <textarea name="input_text" id="input_text" placeholder="Type a sentence with a medical abbreviation and it is long form(e.g ECG is an Electrocardiogram used in cardiac tests)" required>{{ input_text if input_text else "" }}</textarea><br> |
| <button type="submit">Classify Tokens</button> |
| </form> |
|
|
| {% if predictions %} |
| <div class="results"> |
| <h2>Predictions</h2> |
| <table> |
| <tr> |
| <th>Token</th> |
| <th>Label</th> |
| </tr> |
| {% for item in predictions %} |
| <tr> |
| <td>{{ item.word }}</td> |
| <td>{{ item.entity_group }}</td> |
| </tr> |
| {% endfor %} |
| </table> |
| </div> |
|
|
| <div class="chart-container"> |
| <h3>Label Distribution</h3> |
| <canvas id="tagChart"></canvas> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const ctx = document.getElementById('tagChart').getContext('2d'); |
| const tagLabels = JSON.parse('{{ tag_labels | tojson | safe }}'); |
| const tagCounts = JSON.parse('{{ tag_counts | tojson | safe }}'); |
| |
| new Chart(ctx, { |
| type: 'bar', |
| data: { |
| labels: tagLabels, |
| datasets: [{ |
| label: 'Tag Count', |
| data: tagCounts, |
| backgroundColor: 'rgba(54, 162, 235, 0.6)', |
| borderColor: 'rgba(54, 162, 235, 1)', |
| borderWidth: 1 |
| }] |
| }, |
| options: { |
| scales: { |
| y: { beginAtZero: true } |
| } |
| } |
| }); |
| }); |
| </script> |
| {% endif %} |
|
|
| </body> |
| </html> |
|
|
