File size: 4,752 Bytes
e9e498c
 
 
95a0122
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9e498c
 
95a0122
 
 
9d4c633
95a0122
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f417e2b
95a0122
 
e9e498c
95a0122
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e9e498c
95a0122
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
    <title>Abbreviation Classifier</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f8fa;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #1da1f2;
            text-align: center;
        }
        .search-form {
            text-align: center;
            margin: 20px 0;
        }
        input[type="text"], select {
            width: 80%;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #1da1f2;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        input[type="submit"] {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #1da1f2;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .results {
            margin-top: 20px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .prediction {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
        }
        .positive {
            background-color: #d4edda;
            color: #155724;
        }
        .negative {
            background-color: #f8d7da;
            color: #721c24;
        }
        .input-section {
            margin: 20px 0;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
        }
        .input-toggle {
            margin-bottom: 15px;
            text-align: center;
        }
        #manual-input {
            display: none;
        }
        .table-container {
        width: 100%;
        overflow-x: auto; /* Allows horizontal scrolling */
        margin-bottom: 20px;
        }

        table {
            width: 100%;
            table-layout: auto; /* Adjust table layout dynamically based on content */
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
            white-space: nowrap; /* Prevent text from wrapping inside individual cells */
        }

        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Medical Abbreviation Classifier</h1>
        <p style="text-align: center;">The baseline model uses 1990 rows of data, embeds using Word2Vec and trains on LSTM. The other models change one factor.</p>
        <p style="text-align: center;">The BioWordVec model was the best one during testing.</p>
        <div class="search-form">
            <form method="POST">

                <div id="pipeline-select">
                    <select name="pipeline_select">
                        {% for pipeline in pipelines %}
                        <option value="{{ pipeline.id }}">{{ pipeline.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div id="input">
                    <input type="text" name="search" placeholder="Enter text to analyze...">
                </div>

                <input type="submit" value="Analyse">
            </form>
        </div>

        {% if results %}
        <div class="results">
            <h3>Classification using: {{name}}</h3>
            <ul style="list-style-type: none; padding: 0; margin: 0; font-size: x-small;">
                <p>The labels mean the following:</p>
                <li>B-AC an Abbreviation</li>
                <li>B-LF the beggining of the long form of an Abbreviation</li>
                <li>I-IL other parts of the long form of an Abbreviation</li>
                <li>O other</li>
            </ul>
            <br>
            <div class="table-container">
                <table>
                    <tr>
                        {% for token, label in results.items() %}
                            <th>{{ token }}</th>
                        {% endfor %}
                    </tr>
                    <tr>
                        {% for token, label in results.items() %}
                            <td>{{ label }}</td>
                        {% endfor %}
                    </tr>
                </table>
                
            </div>
        </div>
        {% endif %}
    </div>
</body>
</html>