This repository has been archived by the owner on Nov 16, 2023. It is now read-only.
/
celebrities.html
147 lines (130 loc) · 5.8 KB
/
celebrities.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<title>Celebrity</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="page">
<div class="title"><h2>Celebrity</h2></div>
<div class="container">
<div class="navigation">
Select a feature:
<ul>
<li><a href="analyze.html" id="analyzeLink">Analyze</a></li>
<li><a href="landmark.html" id="landmarkLink">Landmark</a></li>
<li><a href="celebrities.html" id="celebritiesLink">Celebrity</a></li>
<li><a href="thumbnail.html" id="thumbnailLink">Thumbnail</a></li>
<li><a href="ocr.html" id="ocrLink">OCR</a></li>
<li><a href="handwriting.html" id="handwritingLink">Read Handwritten Text</a></li>
</ul>
</div>
<div class="userInterface">
Enter the URL to an image of a celebrity, then click the <strong>Analyze image</strong> button.
<br><br>
Celebrity image to analyze: <input type="text" name="inputImage" id="inputImage" value="Enter image URL here." />
<button onclick="celebritiesButtonClick()">Analyze Image</button>
<br><br>
<div class="wrapper">
<div class="jsonOutput">
Response:
<br><br>
<textarea id="responseTextArea" class="UIInput"></textarea>
</div>
<div class="pad"></div>
<div class="imageDiv">
Source image:<br>
<span id="captionSpan"></span><br>
<img id="sourceImage" onerror="common.imageLoadError()"/>
</div>
</div>
<div class="subKeyDiv">
Subscription Key:
<input
type="text"
class="subKeyInput"
name="subscriptionKeyInput"
id="subscriptionKeyInput"
onchange="common.subscriptionChange()"
value="Copy/paste your subscription key here." />
Subscription Region:
<select name="subscriptionRegionSelect" id="subscriptionRegionSelect" onchange="common.subscriptionChange()">
<option value="westcentralus">westcentralus</option>
<option value="westus">westus</option>
<option value="eastus2">eastus2</option>
<option value="westeurope">westeurope</option>
<option value="southeastasia">southeastasia</option>
</select>
</div>
</div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
function celebritiesButtonClick() {
// Clear the display fields.
$("#sourceImage").attr("src", "#");
$("#responseTextArea").val("");
$("#captionSpan").text("");
// Display the image.
var sourceImageUrl = $("#inputImage").val();
$("#sourceImage").attr("src", sourceImageUrl);
IdentifyCelebrities(sourceImageUrl, $("#responseTextArea"), $("#captionSpan"));
}
/* Identify celebrities in the image at the specified URL by using Microsoft Cognitive Services
* Celebrities API.
* @param {string} sourceImageUrl - The URL to the image to analyze for celebrities.
* @param {<textarea> element} responseTextArea - The text area to display the JSON string returned
* from the REST API call, or to display the error message if there was
* an error.
* @param {<span> element} captionSpan - The span to display the image caption.
*/
function IdentifyCelebrities(sourceImageUrl, responseTextArea, captionSpan) {
// Request parameters.
var params = {
"model": "celebrities"
};
// Perform the REST API call.
$.ajax({
url: common.uriBasePreRegion +
$("#subscriptionRegionSelect").val() +
common.uriBasePostRegion +
common.uriBaseCelebrities +
"?" +
$.param(params),
// Request headers.
beforeSend: function(jqXHR){
jqXHR.setRequestHeader("Content-Type","application/json");
jqXHR.setRequestHeader("Ocp-Apim-Subscription-Key",
encodeURIComponent($("#subscriptionKeyInput").val()));
},
type: "POST",
// Request body.
data: '{"url": ' + '"' + sourceImageUrl + '"}',
})
.done(function(data) {
// Show formatted JSON on webpage.
responseTextArea.val(JSON.stringify(data, null, 2));
// Extract and display the caption and confidence from the first caption in the description object.
if (data.result && data.result.celebrities) {
var celebrity = data.result.celebrities[0];
if (celebrity.name && celebrity.confidence) {
captionSpan.text("Celebrity name: " + celebrity.name +
" (confidence: " + celebrity.confidence + ").");
}
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
// Prepare the error string.
var errorString = (errorThrown === "") ? "Error. " : errorThrown + " (" + jqXHR.status + "): ";
errorString += (jqXHR.responseText === "") ? "" : (jQuery.parseJSON(jqXHR.responseText).message) ?
jQuery.parseJSON(jqXHR.responseText).message : jQuery.parseJSON(jqXHR.responseText).error.message;
// Put the error JSON in the response textarea.
responseTextArea.val(JSON.stringify(jqXHR, null, 2));
// Show the error message.
alert(errorString);
});
}
</script>