bikas
commited on
Commit
•
4c5156b
1
Parent(s):
0261472
Multi Labels
Browse files- Dockerfile +27 -0
- app.py +79 -0
- main.py +63 -0
- model/MLTC_model_state.bin +3 -0
- requirements.txt +6 -0
- static/static_logo.png +0 -0
- templates/index.html +157 -0
- templates/result.html +120 -0
Dockerfile
ADDED
@@ -0,0 +1,27 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Use the official Python image as a base image
|
2 |
+
FROM python:3.10.0-slim-buster
|
3 |
+
|
4 |
+
# Set environment variables
|
5 |
+
ENV PYTHONDONTWRITEBYTECODE 1
|
6 |
+
ENV PYTHONUNBUFFERED 1
|
7 |
+
|
8 |
+
# Set the working directory in the container
|
9 |
+
WORKDIR /app
|
10 |
+
|
11 |
+
# Copy the dependencies file to the working directory
|
12 |
+
COPY requirements.txt .
|
13 |
+
|
14 |
+
# Install any dependencies
|
15 |
+
RUN pip install --no-cache-dir -r requirements.txt
|
16 |
+
|
17 |
+
# Copy the content of the local src directory to the working directory
|
18 |
+
COPY . .
|
19 |
+
|
20 |
+
# Make port 7860 available to the world outside this container
|
21 |
+
EXPOSE 7860
|
22 |
+
|
23 |
+
# Define environment variable (corrected the syntax for environment variable name and value)
|
24 |
+
# ENV FLASK_APP=app.py
|
25 |
+
|
26 |
+
# Command to run the application
|
27 |
+
CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]
|
app.py
ADDED
@@ -0,0 +1,79 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
from flask import Flask, request, render_template, jsonify
|
2 |
+
from transformers import BertTokenizer, BertModel
|
3 |
+
import torch
|
4 |
+
import numpy as np
|
5 |
+
|
6 |
+
app = Flask(__name__)
|
7 |
+
|
8 |
+
# Initialize BERT model and tokenizer
|
9 |
+
device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
|
10 |
+
|
11 |
+
class BERTClass(torch.nn.Module):
|
12 |
+
def __init__(self):
|
13 |
+
super(BERTClass, self).__init__()
|
14 |
+
self.bert_model = BertModel.from_pretrained('bert-base-uncased', return_dict=True)
|
15 |
+
self.dropout = torch.nn.Dropout(0.3)
|
16 |
+
self.linear = torch.nn.Linear(768, 8)
|
17 |
+
|
18 |
+
def forward(self, input_ids, attn_mask, token_type_ids):
|
19 |
+
output = self.bert_model(
|
20 |
+
input_ids,
|
21 |
+
attention_mask=attn_mask,
|
22 |
+
token_type_ids=token_type_ids
|
23 |
+
)
|
24 |
+
output_dropout = self.dropout(output.pooler_output)
|
25 |
+
output = self.linear(output_dropout)
|
26 |
+
return output
|
27 |
+
|
28 |
+
# Load tokenizer and model
|
29 |
+
tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')
|
30 |
+
model = BERTClass()
|
31 |
+
model.load_state_dict(torch.load("model/MLTC_model_state.bin", map_location=device))
|
32 |
+
model = model.to(device)
|
33 |
+
model.eval()
|
34 |
+
|
35 |
+
# Hyperparameters
|
36 |
+
MAX_LEN = 256
|
37 |
+
THRESHOLD = 0.5
|
38 |
+
|
39 |
+
target_list = ['price', 'packaging', 'product', 'rider', 'delivery', 'shelf', 'service', 'seller']
|
40 |
+
|
41 |
+
@app.route('/', methods=['GET', 'POST'])
|
42 |
+
def index():
|
43 |
+
if request.method == 'POST':
|
44 |
+
raw_text = request.form['text']
|
45 |
+
|
46 |
+
if not raw_text:
|
47 |
+
return jsonify({'error': 'Please enter some text'}), 400
|
48 |
+
|
49 |
+
# Tokenize and encode text
|
50 |
+
encoded_text = tokenizer.encode_plus(
|
51 |
+
raw_text,
|
52 |
+
max_length=MAX_LEN,
|
53 |
+
add_special_tokens=True,
|
54 |
+
return_token_type_ids=True,
|
55 |
+
pad_to_max_length=True,
|
56 |
+
return_attention_mask=True,
|
57 |
+
return_tensors='pt',
|
58 |
+
)
|
59 |
+
|
60 |
+
input_ids = encoded_text['input_ids'].to(device)
|
61 |
+
attention_mask = encoded_text['attention_mask'].to(device)
|
62 |
+
token_type_ids = encoded_text['token_type_ids'].to(device)
|
63 |
+
|
64 |
+
# Make predictions
|
65 |
+
with torch.no_grad():
|
66 |
+
output = model(input_ids, attention_mask, token_type_ids)
|
67 |
+
output = torch.sigmoid(output).detach().cpu()
|
68 |
+
output = output.flatten().round().numpy()
|
69 |
+
|
70 |
+
# Determine predicted labels based on threshold
|
71 |
+
predictions = [target_list[idx] for idx, p in enumerate(output) if p == 1]
|
72 |
+
|
73 |
+
return render_template('index.html', text=raw_text, predictions=predictions)
|
74 |
+
|
75 |
+
# For GET request or initial page load
|
76 |
+
return render_template('index.html')
|
77 |
+
|
78 |
+
if __name__ == '__main__':
|
79 |
+
app.run(debug=True)
|
main.py
ADDED
@@ -0,0 +1,63 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
from transformers import BertTokenizer, BertModel
|
2 |
+
import torch
|
3 |
+
import numpy as np
|
4 |
+
|
5 |
+
device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
|
6 |
+
|
7 |
+
class BERTClass(torch.nn.Module):
|
8 |
+
def __init__(self):
|
9 |
+
super(BERTClass, self).__init__()
|
10 |
+
self.bert_model = BertModel.from_pretrained('bert-base-uncased', return_dict=True)
|
11 |
+
self.dropout = torch.nn.Dropout(0.3)
|
12 |
+
self.linear = torch.nn.Linear(768, 8)
|
13 |
+
|
14 |
+
def forward(self, input_ids, attn_mask, token_type_ids):
|
15 |
+
output = self.bert_model(
|
16 |
+
input_ids,
|
17 |
+
attention_mask=attn_mask,
|
18 |
+
token_type_ids=token_type_ids
|
19 |
+
)
|
20 |
+
output_dropout = self.dropout(output.pooler_output)
|
21 |
+
output = self.linear(output_dropout)
|
22 |
+
return output
|
23 |
+
|
24 |
+
tokenizer = BertTokenizer.from_pretrained('bert-base-uncased')
|
25 |
+
|
26 |
+
# Hyperparameters
|
27 |
+
MAX_LEN = 256
|
28 |
+
THRESHOLD = 0.5
|
29 |
+
|
30 |
+
# Loading pretrained model (best model)
|
31 |
+
model = BERTClass()
|
32 |
+
model.load_state_dict(torch.load(r"model\MLTC_model_state.bin", map_location=device))
|
33 |
+
model = model.to(device)
|
34 |
+
|
35 |
+
# raw text
|
36 |
+
raw_text = """
|
37 |
+
১০০% আসল প্রোডাক্ট। সিলেটের মধ্যে ৮ দিনের মধ্যে ডেলিভারি হয়েছে। বিক্রেতা খুবই সহানুভূতিশীল এবং ভালো ছিলেন। এই প্রোডাক্টটি এই বিক্রেতার কাছ থেকে কেনার জন্য অত্যন্ত সুপারিশ করছি।
|
38 |
+
"""
|
39 |
+
|
40 |
+
encoded_text = tokenizer.encode_plus(
|
41 |
+
raw_text,
|
42 |
+
max_length=MAX_LEN,
|
43 |
+
add_special_tokens=True,
|
44 |
+
return_token_type_ids=True,
|
45 |
+
pad_to_max_length=True,
|
46 |
+
return_attention_mask=True,
|
47 |
+
return_tensors='pt',
|
48 |
+
)
|
49 |
+
|
50 |
+
input_ids = encoded_text['input_ids'].to(device)
|
51 |
+
attention_mask = encoded_text['attention_mask'].to(device)
|
52 |
+
token_type_ids = encoded_text['token_type_ids'].to(device)
|
53 |
+
|
54 |
+
output = model(input_ids, attention_mask, token_type_ids)
|
55 |
+
output = torch.sigmoid(output).detach().cpu()
|
56 |
+
output = output.flatten().round().numpy()
|
57 |
+
|
58 |
+
target_list = ['price', 'packaging', 'product', 'rider', 'delivery', 'shelf', 'service', 'seller']
|
59 |
+
|
60 |
+
print(f"Title: {raw_text}")
|
61 |
+
for idx, p in enumerate(output):
|
62 |
+
if p == 1:
|
63 |
+
print(f"Label: {target_list[idx]}")
|
model/MLTC_model_state.bin
ADDED
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
1 |
+
version https://git-lfs.github.com/spec/v1
|
2 |
+
oid sha256:77b15f2713f2c8962d0a90d893c0eff711d9b18009ec90a68469f36951b9b228
|
3 |
+
size 438039573
|
requirements.txt
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
flask
|
2 |
+
gunicorn
|
3 |
+
torch
|
4 |
+
transformers
|
5 |
+
mymodule
|
6 |
+
numpy==1.26.4
|
static/static_logo.png
ADDED
templates/index.html
ADDED
@@ -0,0 +1,157 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<title>BERT Predictions</title>
|
5 |
+
<style>
|
6 |
+
body {
|
7 |
+
background-color: #f0f0f0; /* Light grey background */
|
8 |
+
font-family: Arial, sans-serif;
|
9 |
+
margin: 0; /* Remove default margin */
|
10 |
+
display: flex;
|
11 |
+
flex-direction: column;
|
12 |
+
min-height: 100vh; /* Ensure the body takes up at least the full viewport height */
|
13 |
+
position: relative; /* Ensure relative positioning for absolute elements */
|
14 |
+
}
|
15 |
+
h2 {
|
16 |
+
color: #333;
|
17 |
+
}
|
18 |
+
.content-wrapper {
|
19 |
+
flex: 1; /* Allow content to expand within the flex container */
|
20 |
+
display: flex;
|
21 |
+
flex-direction: column;
|
22 |
+
align-items: center;
|
23 |
+
justify-content: center; /* Center content vertically and horizontally */
|
24 |
+
}
|
25 |
+
.input-container {
|
26 |
+
max-width: 600px;
|
27 |
+
width: 100%; /* Take up full width within the flex container */
|
28 |
+
background-color: #fff;
|
29 |
+
padding: 20px;
|
30 |
+
border-radius: 8px;
|
31 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
32 |
+
text-align: left; /* Adjust text alignment as needed */
|
33 |
+
}
|
34 |
+
textarea {
|
35 |
+
width: 100%;
|
36 |
+
padding: 10px;
|
37 |
+
font-size: 16px;
|
38 |
+
margin-bottom: 10px;
|
39 |
+
}
|
40 |
+
input[type="submit"] {
|
41 |
+
padding: 10px 20px;
|
42 |
+
font-size: 16px;
|
43 |
+
background-color: #4CAF50; /* Green submit button */
|
44 |
+
color: white;
|
45 |
+
border: none;
|
46 |
+
cursor: pointer;
|
47 |
+
display: block; /* Ensure block display for centering */
|
48 |
+
margin: 0 auto; /* Center align button */
|
49 |
+
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
|
50 |
+
}
|
51 |
+
input[type="submit"]:hover {
|
52 |
+
background-color: #d62728; /* Red on hover */
|
53 |
+
}
|
54 |
+
.predictions {
|
55 |
+
text-align: center; /* Center align predictions */
|
56 |
+
margin-top: 20px;
|
57 |
+
}
|
58 |
+
.prediction-item {
|
59 |
+
margin-bottom: 10px;
|
60 |
+
padding-left: 20px;
|
61 |
+
font-size: 18px;
|
62 |
+
display: inline-block; /* Ensure items stay inline */
|
63 |
+
text-align: left; /* Align text left within each item */
|
64 |
+
}
|
65 |
+
.icon {
|
66 |
+
font-size: 20px;
|
67 |
+
margin-right: 10px;
|
68 |
+
vertical-align: middle;
|
69 |
+
}
|
70 |
+
.category-price {
|
71 |
+
color: #1f77b4; /* Blue */
|
72 |
+
}
|
73 |
+
.category-packaging {
|
74 |
+
color: #ff7f0e; /* Orange */
|
75 |
+
}
|
76 |
+
.category-product {
|
77 |
+
color: #2ca02c; /* Green */
|
78 |
+
}
|
79 |
+
.category-rider {
|
80 |
+
color: #d62728; /* Red */
|
81 |
+
}
|
82 |
+
.category-delivery {
|
83 |
+
color: #9467bd; /* Purple */
|
84 |
+
}
|
85 |
+
.category-shelf {
|
86 |
+
color: #8c564b; /* Brown */
|
87 |
+
}
|
88 |
+
.category-service {
|
89 |
+
color: #e377c2; /* Pink */
|
90 |
+
}
|
91 |
+
.category-seller {
|
92 |
+
color: #7f7f7f; /* Grey */
|
93 |
+
}
|
94 |
+
/* Logo style */
|
95 |
+
.logo {
|
96 |
+
position: absolute;
|
97 |
+
top: 20px;
|
98 |
+
right: 20px;
|
99 |
+
width: 150px; /* Increased width of the logo */
|
100 |
+
height: 80px; /* Increased height of the logo */
|
101 |
+
}
|
102 |
+
/* Footer style */
|
103 |
+
footer {
|
104 |
+
width: 100%;
|
105 |
+
background-color: #ccc; /* Light grey background */
|
106 |
+
padding: 10px 0; /* Padding for content within footer */
|
107 |
+
text-align: center;
|
108 |
+
color: #666;
|
109 |
+
position: relative;
|
110 |
+
}
|
111 |
+
</style>
|
112 |
+
<script>
|
113 |
+
function validateForm() {
|
114 |
+
var text = document.forms["predictForm"]["text"].value.trim();
|
115 |
+
if (text == "") {
|
116 |
+
alert("Please enter some text");
|
117 |
+
return false;
|
118 |
+
}
|
119 |
+
return true;
|
120 |
+
}
|
121 |
+
|
122 |
+
function clearPredictions() {
|
123 |
+
var predictionsDiv = document.querySelector('.predictions');
|
124 |
+
if (predictionsDiv) {
|
125 |
+
predictionsDiv.innerHTML = ''; // Clear previous predictions
|
126 |
+
}
|
127 |
+
}
|
128 |
+
</script>
|
129 |
+
</head>
|
130 |
+
<body>
|
131 |
+
<div class="content-wrapper">
|
132 |
+
<img src="static/static_logo.png" alt="Company Logo" class="logo">
|
133 |
+
<div class="input-container">
|
134 |
+
<h2>Enter Text to Predict Multi-Label Classification</h2>
|
135 |
+
<form name="predictForm" method="post" onsubmit="clearPredictions(); return validateForm()">
|
136 |
+
<textarea name="text" rows="4" cols="50"></textarea><br><br>
|
137 |
+
<input type="submit" value="Predict">
|
138 |
+
</form>
|
139 |
+
</div>
|
140 |
+
|
141 |
+
{% if predictions %}
|
142 |
+
<div class="predictions">
|
143 |
+
<h3>Predicted Labels:</h3>
|
144 |
+
{% for prediction in predictions %}
|
145 |
+
<div class="prediction-item category-{{ prediction }}">
|
146 |
+
<span class="icon">✓</span>{{ prediction }}
|
147 |
+
</div>
|
148 |
+
{% endfor %}
|
149 |
+
</div>
|
150 |
+
{% endif %}
|
151 |
+
</div>
|
152 |
+
|
153 |
+
<footer>
|
154 |
+
<p>© 2024 Bikasuzzaman. Machine Learning Engineer.</p>
|
155 |
+
</footer>
|
156 |
+
</body>
|
157 |
+
</html>
|
templates/result.html
ADDED
@@ -0,0 +1,120 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!DOCTYPE html>
|
2 |
+
<html>
|
3 |
+
<head>
|
4 |
+
<title>BERT Predictions</title>
|
5 |
+
<style>
|
6 |
+
body {
|
7 |
+
background-color: #f0f0f0; /* Light grey background */
|
8 |
+
font-family: Arial, sans-serif;
|
9 |
+
padding: 20px;
|
10 |
+
text-align: center; /* Center align content */
|
11 |
+
}
|
12 |
+
h2 {
|
13 |
+
color: #333;
|
14 |
+
}
|
15 |
+
.input-container {
|
16 |
+
max-width: 600px;
|
17 |
+
margin: 0 auto; /* Center align container */
|
18 |
+
background-color: #fff;
|
19 |
+
padding: 20px;
|
20 |
+
border-radius: 8px;
|
21 |
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
22 |
+
margin-bottom: 20px;
|
23 |
+
}
|
24 |
+
textarea {
|
25 |
+
width: 100%;
|
26 |
+
padding: 10px;
|
27 |
+
font-size: 16px;
|
28 |
+
margin-bottom: 10px;
|
29 |
+
}
|
30 |
+
input[type="submit"] {
|
31 |
+
padding: 10px 20px;
|
32 |
+
font-size: 16px;
|
33 |
+
background-color: #4CAF50; /* Green submit button */
|
34 |
+
color: white;
|
35 |
+
border: none;
|
36 |
+
cursor: pointer;
|
37 |
+
}
|
38 |
+
input[type="submit"]:hover {
|
39 |
+
background-color: #45a049; /* Darker green on hover */
|
40 |
+
}
|
41 |
+
.predictions {
|
42 |
+
text-align: center; /* Center align predictions */
|
43 |
+
margin-top: 20px;
|
44 |
+
}
|
45 |
+
.prediction-item {
|
46 |
+
margin-bottom: 10px;
|
47 |
+
padding-left: 20px;
|
48 |
+
font-size: 18px;
|
49 |
+
display: inline-block; /* Ensure items stay inline */
|
50 |
+
text-align: left; /* Align text left within each item */
|
51 |
+
}
|
52 |
+
.icon {
|
53 |
+
font-size: 20px;
|
54 |
+
margin-right: 10px;
|
55 |
+
vertical-align: middle;
|
56 |
+
}
|
57 |
+
.category-price {
|
58 |
+
color: #1f77b4; /* Blue */
|
59 |
+
}
|
60 |
+
.category-packaging {
|
61 |
+
color: #ff7f0e; /* Orange */
|
62 |
+
}
|
63 |
+
.category-product {
|
64 |
+
color: #2ca02c; /* Green */
|
65 |
+
}
|
66 |
+
.category-rider {
|
67 |
+
color: #d62728; /* Red */
|
68 |
+
}
|
69 |
+
.category-delivery {
|
70 |
+
color: #9467bd; /* Purple */
|
71 |
+
}
|
72 |
+
.category-shelf {
|
73 |
+
color: #8c564b; /* Brown */
|
74 |
+
}
|
75 |
+
.category-service {
|
76 |
+
color: #e377c2; /* Pink */
|
77 |
+
}
|
78 |
+
.category-seller {
|
79 |
+
color: #7f7f7f; /* Grey */
|
80 |
+
}
|
81 |
+
</style>
|
82 |
+
<script>
|
83 |
+
function validateForm() {
|
84 |
+
var text = document.forms["predictForm"]["text"].value.trim();
|
85 |
+
if (text == "") {
|
86 |
+
alert("Please enter some text");
|
87 |
+
return false;
|
88 |
+
}
|
89 |
+
return true;
|
90 |
+
}
|
91 |
+
|
92 |
+
function clearPredictions() {
|
93 |
+
var predictionsDiv = document.querySelector('.predictions');
|
94 |
+
if (predictionsDiv) {
|
95 |
+
predictionsDiv.innerHTML = ''; // Clear previous predictions
|
96 |
+
}
|
97 |
+
}
|
98 |
+
</script>
|
99 |
+
</head>
|
100 |
+
<body>
|
101 |
+
<div class="input-container">
|
102 |
+
<h2>Enter Text to Predict Multi-Label Classification</h2>
|
103 |
+
<form name="predictForm" method="post" onsubmit="clearPredictions(); return validateForm()">
|
104 |
+
<textarea name="text" rows="4" cols="50"></textarea><br><br>
|
105 |
+
<input type="submit" value="Predict">
|
106 |
+
</form>
|
107 |
+
</div>
|
108 |
+
|
109 |
+
{% if predictions %}
|
110 |
+
<div class="predictions">
|
111 |
+
<h3>Predicted Categories:</h3>
|
112 |
+
{% for prediction in predictions %}
|
113 |
+
<div class="prediction-item category-{{ prediction }}">
|
114 |
+
<span class="icon">✓</span>{{ prediction }}
|
115 |
+
</div>
|
116 |
+
{% endfor %}
|
117 |
+
</div>
|
118 |
+
{% endif %}
|
119 |
+
</body>
|
120 |
+
</html>
|