Hugging Face's logo

Spaces:
mo01018
/
Deployment-Trial
Sleeping

App Files Community
20
mo01018 hw01558 commited on
Commit
95a0122
·
verified ·
1 Parent(s): a488f1e

Updated the index.html to have some css (#10)

Browse files

- Updated the index.html to have some css (b8beba3dcffed3a825e2329ef16d50c0eb9ce36d)


Co-authored-by: H Wilks <[email protected]>

Files changed (1) hide show
  1. templates/index.html +150 -22
templates/index.html CHANGED
@@ -1,29 +1,157 @@
1
- <!-- templates/index.html -->
2
  <!DOCTYPE html>
3
  <html>
4
  <head>
5
- <title>Token Classification App</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  </head>
7
  <body>
8
- <h1>Biomedical Token Tagger</h1>
9
- <form method="POST">
10
- <textarea name="search" rows="4" cols="50" placeholder="Enter your biomedical sentence here"></textarea><br>
11
- <label for="pipeline_select">Select a model:</label>
12
- <select name="pipeline_select">
13
- {% for p in pipelines %}
14
- <option value="{{ p.id }}">{{ p.name }}</option>
15
- {% endfor %}
16
- </select><br><br>
17
- <button type="submit">Tag</button>
18
- </form>
 
 
 
 
 
 
 
 
 
 
19
 
20
- {% if results %}
21
- <h2>Results (Model: {{ name }})</h2>
22
- <ul>
23
- {% for token, tag in results.items() %}
24
- <li><strong>{{ token }}</strong>: {{ tag }}</li>
25
- {% endfor %}
26
- </ul>
27
- {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </body>
29
- </html>
 
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Abbreviation Classifier</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ max-width: 800px;
9
+ margin: 0 auto;
10
+ padding: 20px;
11
+ background-color: #f5f8fa;
12
+ }
13
+ .container {
14
+ background-color: white;
15
+ padding: 20px;
16
+ border-radius: 10px;
17
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
18
+ }
19
+ h1 {
20
+ color: #1da1f2;
21
+ text-align: center;
22
+ }
23
+ .search-form {
24
+ text-align: center;
25
+ margin: 20px 0;
26
+ }
27
+ input[type="text"], select {
28
+ width: 80%;
29
+ padding: 10px;
30
+ font-size: 16px;
31
+ border: 2px solid #1da1f2;
32
+ border-radius: 5px;
33
+ margin-bottom: 10px;
34
+ }
35
+ input[type="submit"] {
36
+ margin-top: 10px;
37
+ padding: 10px 20px;
38
+ background-color: #1da1f2;
39
+ color: white;
40
+ border: none;
41
+ border-radius: 5px;
42
+ cursor: pointer;
43
+ font-size: 16px;
44
+ }
45
+ .results {
46
+ margin-top: 20px;
47
+ padding: 20px;
48
+ background-color: #f8f9fa;
49
+ border-radius: 5px;
50
+ }
51
+ .prediction {
52
+ font-size: 18px;
53
+ font-weight: bold;
54
+ text-align: center;
55
+ padding: 10px;
56
+ margin-top: 10px;
57
+ border-radius: 5px;
58
+ }
59
+ .positive {
60
+ background-color: #d4edda;
61
+ color: #155724;
62
+ }
63
+ .negative {
64
+ background-color: #f8d7da;
65
+ color: #721c24;
66
+ }
67
+ .input-section {
68
+ margin: 20px 0;
69
+ padding: 15px;
70
+ background-color: #f8f9fa;
71
+ border-radius: 5px;
72
+ }
73
+ .input-toggle {
74
+ margin-bottom: 15px;
75
+ text-align: center;
76
+ }
77
+ #manual-input {
78
+ display: none;
79
+ }
80
+ .table-container {
81
+ width: 100%;
82
+ overflow-x: auto; /* Allows horizontal scrolling */
83
+ margin-bottom: 20px;
84
+ }
85
+
86
+ table {
87
+ width: 100%;
88
+ table-layout: auto; /* Adjust table layout dynamically based on content */
89
+ border-collapse: collapse;
90
+ }
91
+
92
+ th, td {
93
+ padding: 10px;
94
+ text-align: left;
95
+ border: 1px solid #ddd;
96
+ white-space: nowrap; /* Prevent text from wrapping inside individual cells */
97
+ }
98
+
99
+ th {
100
+ background-color: #f4f4f4;
101
+ }
102
+ </style>
103
  </head>
104
  <body>
105
+ <div class="container">
106
+ <h1>Medical Abbreviation Classifier</h1>
107
+ <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>
108
+ <div class="search-form">
109
+ <form method="POST">
110
+
111
+ <div id="pipeline-select">
112
+ <select name="pipeline_select">
113
+ {% for pipeline in pipelines %}
114
+ <option value="{{ pipeline.id }}">{{ pipeline.name }}</option>
115
+ {% endfor %}
116
+ </select>
117
+ </div>
118
+
119
+ <div id="input">
120
+ <input type="text" name="search" placeholder="Enter text to analyze...">
121
+ </div>
122
+
123
+ <input type="submit" value="Analyze">
124
+ </form>
125
+ </div>
126
 
127
+ {% if results %}
128
+ <div class="results">
129
+ <h3>Classification using: {{name}}</h3>
130
+ <ul style="list-style-type: none; padding: 0; margin: 0; font-size: x-small;">
131
+ <p>The labels mean the following:</p>
132
+ <li>B-AC an Abbreviation</li>
133
+ <li>B-LF the beggining of the long form of an Abbreviation</li>
134
+ <li>I-IL other parts of the long form of an Abbreviation</li>
135
+ <li>O other</li>
136
+ </ul>
137
+ <br>
138
+ <div class="table-container">
139
+ <table>
140
+ <tr>
141
+ {% for token, label in results.items() %}
142
+ <th>{{ token }}</th>
143
+ {% endfor %}
144
+ </tr>
145
+ <tr>
146
+ {% for token, label in results.items() %}
147
+ <td>{{ label }}</td>
148
+ {% endfor %}
149
+ </tr>
150
+ </table>
151
+
152
+ </div>
153
+ </div>
154
+ {% endif %}
155
+ </div>
156
  </body>
157
+ </html>