/
vision.html
126 lines (114 loc) · 4.16 KB
/
vision.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cloud Vision Demo</title>
<style type="text/css">
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<h1>Cloud Vision Demo</h1>
<form id="fileform" action="">
<select name="type" id="type">
<option value="LANDMARK_DETECTION">LANDMARK_DETECTION</option>
<option value="FACE_DETECTION">FACE_DETECTION</option>
</select>
<br /><br />
<input id="fileInput" type="file" name="fileField"><br /><br />
<input type="submit" name="submit" value="Submit">
</form>
<div id="results"></div>
</body>
<script type="text/javascript">
window.apiKey = 'AIzaSyA1HEkQ8nh8CoHIVbDdYFnwAa8VphhGphQ';
var CV_URL = 'https://vision.googleapis.com/v1/images:annotate?key=' + window.apiKey;
$(function () {
$('#fileform').on('submit', uploadFiles);
});
/**
* 'submit' event handler - reads the image bytes and sends it to the Cloud
* Vision API.
*/
function uploadFiles (event) {
event.preventDefault(); // Prevent the default form post
// Grab the file and asynchronously convert to base64.
var file = $('#fileform [name=fileField]')[0].files[0];
var reader = new FileReader();
reader.onloadend = processFile;
reader.readAsDataURL(file);
}
/**
* Event handler for a file's data url - extract the image data and pass it off.
*/
function processFile (event) {
var content = event.target.result;
sendFileToCloudVision(content.replace('data:image/jpeg;base64,', ''));
}
/**
* Sends the given file contents to the Cloud Vision API and outputs the
* results.
*/
function sendFileToCloudVision (content) {
var type = $('#fileform [name=type]').val();
// Strip out the file prefix when you convert to json.
var request = {
requests: [{
image: {
content: content
},
features: [{
type: type,
maxResults: 200
}]
}]
};
$('#results').text('Loading...');
$.post({
url: CV_URL,
data: JSON.stringify(request),
contentType: 'application/json'
}).fail(function (jqXHR, textStatus, errorThrown) {
$('#results').text('ERRORS: ' + textStatus + ' ' + errorThrown);
}).done(displayJSON);
}
/**
* Displays the results.
*/
function displayJSON (data) {
var contents = JSON.stringify(data, null, 4);
$('#results').text("Detection response");
output(syntaxHighlight(contents));
var evt = new Event('results-displayed');
evt.results = contents;
document.dispatchEvent(evt);
}
function output(inp) {
document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}
function syntaxHighlight(json) {
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</html>