Commit e5067a38 authored by Zhongfu Bai's avatar Zhongfu Bai
Browse files

initial version finished

parent 708ab22b
...@@ -8,6 +8,7 @@ app = flask.Flask(__name__, template_folder='public') # pylint: disable=invalid ...@@ -8,6 +8,7 @@ app = flask.Flask(__name__, template_folder='public') # pylint: disable=invalid
# Read settings from config module # Read settings from config module
app.config.from_object('vision.config') app.config.from_object('vision.config')
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
# Overlay settings read from file specified by environment variable. This is # Overlay settings read from file specified by environment variable. This is
# useful for using different on development and production machines. # useful for using different on development and production machines.
......
...@@ -2,16 +2,47 @@ ...@@ -2,16 +2,47 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/style.css">
<title>vision</title> <title>vision</title>
</head> </head>
<body> <body>
<div id="app"> <div id="app" class="jumbotron">
<input type="file" @change="sendImage($event)" > <div class="">
<img :src="[[imageDir]]" alt="" > <h1 class="display-4">Vision</h1>
</div> <p class="lead">A collection of handy softwares designed to assist your daily life, with computer vision.</p>
<hr class="my-4">
<div class="" v-if="imageDir == '' ">
<p>Try adding an image and typing keywords you want to find in your image.</p>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Keywords</span>
</div>
<input v-model="keyword" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
<input type="file" @change="updateImage($event)">
<br>
<br>
<p class="lead">
<button class="btn btn-primary btn-lg" v-bind:disabled="keyword === '' || imageFile === ''" @click="sendImage()">Upload</button>
</p>
</div>
<img v-else :src="[[imageDir]]" alt="" id="uploadImage">
</div>
</div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<script type="text/javascript" src="static/js/main.js"></script> <script type="text/javascript" src="static/js/main.js"></script>
......
#uploadImage {
max-width: 30%;
}
vision/static/images/label_test.png

338 KB | W: | H:

vision/static/images/label_test.png

337 KB | W: | H:

vision/static/images/label_test.png
vision/static/images/label_test.png
vision/static/images/label_test.png
vision/static/images/label_test.png
  • 2-up
  • Swipe
  • Onion skin
...@@ -4,17 +4,19 @@ var resultView = new Vue({ ...@@ -4,17 +4,19 @@ var resultView = new Vue({
el: '#app', el: '#app',
delimiters : ['[[', ']]'], delimiters : ['[[', ']]'],
data: { data: {
imageDir: "static/images/logo.png", imageDir: "",
keyword: "",
imageFile: "",
}, },
mounted: function() { mounted: function() {
}, },
methods: { methods: {
sendImage: function(event) { sendImage: function() {
var that = this; var that = this;
var imageData = event.target.files[0];
var form_data = new FormData(); var form_data = new FormData();
form_data.append('file', imageData); form_data.append('file', that.imageFile);
form_data.append('keyword', that.keyword);
axios({ axios({
method: 'post', method: 'post',
url: '/textDetection', url: '/textDetection',
...@@ -23,6 +25,9 @@ var resultView = new Vue({ ...@@ -23,6 +25,9 @@ var resultView = new Vue({
.then(function(response) { .then(function(response) {
that.imageDir = response.data; that.imageDir = response.data;
}) })
},
updateImage: function(e) {
this.imageFile = e.target.files[0]
} }
} }
}) })
...@@ -24,14 +24,14 @@ def textDetection(): ...@@ -24,14 +24,14 @@ def textDetection():
context = {} context = {}
# read uploaded image file # read uploaded image file
if 'file' not in request.files: if 'file' not in request.files or 'keyword' not in request.form:
return Response(status=400) return Response(status=400)
file = request.files['file'] file = request.files['file']
filePath = os.path.join(UPLOAD_FOLDER, file.filename) filePath = os.path.join(UPLOAD_FOLDER, file.filename)
file.save(filePath) file.save(filePath)
inputText = 'Course' inputText = request.form['keyword']
points = findTextLocation(filePath, inputText) points = findTextLocation(filePath, inputText)
img = markImage(filePath, points) img = markImage(filePath, points)
downloadPath = os.path.join(DOWNLOAD_FOLDER, file.filename) downloadPath = os.path.join(DOWNLOAD_FOLDER, file.filename)
...@@ -57,7 +57,7 @@ def findTextLocation(filePath, inputText): ...@@ -57,7 +57,7 @@ def findTextLocation(filePath, inputText):
points = [] points = []
for text in texts[1:]: for text in texts[1:]:
if inputText in text.description: if (inputText).lower() in (text.description).lower():
for point in text.bounding_poly.vertices: for point in text.bounding_poly.vertices:
points.append((point.x, point.y)) points.append((point.x, point.y))
return points return points
...@@ -67,7 +67,15 @@ def markImage(filePath, points): ...@@ -67,7 +67,15 @@ def markImage(filePath, points):
"""mark a polygon on the image, denoting the target text location.""" """mark a polygon on the image, denoting the target text location."""
img = Image.open(filePath) img = Image.open(filePath)
dr = ImageDraw.Draw(img) dr = ImageDraw.Draw(img)
dr.line(points, fill='red', width=3)
group = []
for point in points:
group.append(point)
if len(group) == 4:
group.append(group[0])
dr.line(group, fill='red', width=3)
group = []
for point in points: for point in points:
dr.ellipse((point[0] - 4, point[1] - 4, point[0] + 4, point[1] + 4), fill="red") dr.ellipse((point[0] - 4, point[1] - 4, point[0] + 4, point[1] + 4), fill="red")
return img return img
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment