Skip to content

Commit

Permalink
backend working well and frontend done
Browse files Browse the repository at this point in the history
  • Loading branch information
@margaritageleta
margaritageleta committed Jun 15, 2020
1 parent d3a5f40 commit c9ccfa0
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 74 deletions.
48 changes: 17 additions & 31 deletions app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
from flask import Flask, request, jsonify, render_template
import numpy as np
import pandas as pd
import numba
import tensorflow as tf
from tensorflow.keras.models import Model
from tokenizers import BertWordPieceTokenizer
Expand All @@ -25,55 +24,42 @@ def fast_encode(texts, tokenizer, chunk_size = 256, maxlen = 512):
all_ids.extend([enc.ids for enc in encs])
return np.array(all_ids)


#tokenizer = BertWordPieceTokenizer('tokenizers/distilbert/vocab.txt', lowercase = False)
#print(tokenizer)
# load the pre-trained Keras model
#model = tf.keras.models.load_model('models/distilbert_batch16_epochs3_maxlen192')
#print(model)
# Load tokenizer
tokenizer = BertWordPieceTokenizer('tokenizers/distilbert/vocab.txt', lowercase = False)
print('Tokenizer initialized.')
# Load the pre-trained Keras model
model = tf.keras.models.load_model('models/distilbert_batch16_epochs3_maxlen192')
print('Model loaded.')

def toxic(text):
word = pd.DataFrame(data = {'content': [text]})
print(word)
word_test = fast_encode(word.content.astype(str), tokenizer, maxlen = 192)
print(word_test)
word_test_dataset = (
tf.data.Dataset
.from_tensor_slices(word_test)
.batch(16)
)
print(word_test_dataset)
pred = model.predict(word_test_dataset, verbose = 1)
print(pred)
return f'Toxic {np.round(pred[0][0] * 100, 3)}%'
return np.round(pred[0][0] * 100, 0)

# initialize our Flask application and the Keras model
# Initialize our Flask application and the Keras model
app = Flask(__name__, static_url_path = '', static_folder = 'static')

@app.route('/')
def home():
return render_template('index.html')

@app.route('/process', methods=['POST'])
def process():

text = request.form['text']
print(f'request: {text}')

@app.route('/predict', methods=['GET'])
def predict():
# Request the input
text = request.args.get('input')
if text:
return jsonify({'text' : text})
return jsonify({'error' : 'No data provided'})
#print(f'request values: {request.form.values()}')
#input = [x for x in request.form.values()][0]
#print(input)

#output = toxic(input)
#output = input
#print(output)

#return render_template('index.html', prediction_text = f'Toxicity: {output}')
# Predict using toxicity model
output = toxic(text)
print(output)
else: output = '0.0'
return app.response_class(response = f'{output}', status = 200, mimetype = 'application/text')

if __name__ == '__main__':


app.run()
67 changes: 67 additions & 0 deletions static/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
:root {
--hue: 100;
}

html, body {
margin: 0;
background-color: hsl(var(--hue), 100%, 85%);

-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: 0.5s ease-out;

width: 100%;
height: 100%;

display: flex;
justify-content: center;
align-items: center;
font-family: 'Bellota', cursive;

}

.wrapper {
background-color: transparent;
width: max-content;
height: 250px;

display: flex;
justify-content: center;
align-items: center;
padding: 20px;

border-radius: 10px;
box-shadow: 0 0 25px rgba(5,5,38,0.1);
}

.content-grid {
height: 100%;
display: grid;
grid-template-columns: 1fr;
}

textarea {
width: 500px;
height: 120px;
resize: none;
background-color: transparent;
font-size: 18px;

padding: 20px;
border-style: none;
border-width: 0;
}

.result-wrapper {
height: 50px;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.result-wrapper p {
font-size: 80px;
}
73 changes: 30 additions & 43 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,57 +4,44 @@
<meta charset="UTF-8">
<title>Toxicity detector</title>

<link href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css">

<script type=text/javascript>
/*
$(function() {
$('input[name="model"]').on('input',function(e) {
$.getJSON('/predict', {
input: $('input[name="model"]').val(),
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});*/

$(document).ready(function() {
// e stands for event
$('input[name="model"]').on('input', function(e) {
$.ajax({
// data
data : {
text: this.val()
},
type : 'POST',
url : '/process'
})
// What to do next
.done(function(data) {
if (data.error) {
$('#result').text(data.error).show();
// .hide()
} else {
$('#result').text(data.text).show();
}
})
// Prevent submitting data twice (by default)
e.preventDefault();
$('#result').text('0.0%');
// On input change
$('#input').on('input',function(e) {
// Take the value in the input field
var text = $('#input').val();
// Get the predicted val from backend
$.get('/predict?input=' + text, function(data) {
// Show the result in the field
var color = 100 - parseFloat(data)
document.documentElement.style.setProperty('--hue', color.toString());
$('#result').text(data + '%');
});
});
});

</script>
</script>
</head>

<body>
<form action="{{ url_for('process')}}" method="post">
<input type="text" name="text" placeholder="Write down ..." required="required"/>
<!--<button type="submit" class="btn btn-primary btn-block btn-large">Toxicity</button>-->
</form>
<p><a href="javascript:void();" id="calculate">calculate server side</a>

<p id="result">{{ prediction_text }}</p>
<body id="color">
<div class="wrapper">
<div class="content-grid">
<textarea
id="input"
name="text"
placeholder="Type here to see the potential effect of what you are writing."
maxlength="192"
rows="4"
>
</textarea>
<div class="result-wrapper">
<p id="result">{{ prediction_text }}</p>
</div>
</div>
</div>
</body>
</html>

0 comments on commit c9ccfa0

Please sign in to comment.