Get started with FacePing's face recognition API using jQuery
Include jQuery and create your HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>FacePing with jQuery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="face-recognition-app">
<!-- Components will go here -->
</div>
</body>
</html>Add HTML for the group creation:
<div id="face-group">
<input type="text" id="group-name" placeholder="Enter group name">
<button id="create-group">Create Group</button>
<p id="group-status"></p>
</div>Add the jQuery code:
$(document).ready(function() {
$('#create-group').on('click', function() {
const groupName = $('#group-name').val();
if (!groupName) {
$('#group-status').text('Please enter a group name');
return;
}
$.ajax({
url: `https://api.faceping.ai/groups/${groupName}`,
method: 'POST',
success: function(response) {
$('#group-status').text('Group created successfully');
console.log('Group created:', response);
},
error: function(xhr, status, error) {
$('#group-status').text('Error creating group');
console.error('Error:', error);
}
});
});
});Add HTML for file upload:
<div id="face-upload">
<input type="text" id="upload-group-name" placeholder="Enter group name">
<input type="file" id="face-file" accept="image/*">
<button id="upload-face">Upload Face</button>
<p id="upload-status"></p>
</div>Add the jQuery code:
$(document).ready(function() {
$('#upload-face').on('click', function() {
const groupName = $('#upload-group-name').val();
const fileInput = $('#face-file')[0];
if (!groupName || !fileInput.files[0]) {
$('#upload-status').text('Please enter a group name and select a file');
return;
}
const formData = new FormData();
formData.append('image', fileInput.files[0]);
$.ajax({
url: `https://api.faceping.ai/groups/${groupName}/faces`,
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#upload-status').text('Face uploaded successfully');
console.log('Upload result:', response);
},
error: function(xhr, status, error) {
$('#upload-status').text('Error uploading face');
console.error('Error:', error);
}
});
});
});Add HTML for face search:
<div id="face-search">
<input type="text" id="search-group-name" placeholder="Enter group name">
<input type="file" id="search-file" accept="image/*">
<button id="search-faces">Search Faces</button>
<p id="search-status"></p>
<div id="search-results"></div>
</div>Add the jQuery code:
$(document).ready(function() {
$('#search-faces').on('click', function() {
const groupName = $('#search-group-name').val();
const fileInput = $('#search-file')[0];
if (!groupName || !fileInput.files[0]) {
$('#search-status').text('Please enter a group name and select a file');
return;
}
const formData = new FormData();
formData.append('image', fileInput.files[0]);
$.ajax({
url: `https://api.faceping.ai/groups/${groupName}/search`,
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
$('#search-status').text('Search completed');
const resultsHtml = (response.matches || [])
.map(match => `Match Score: ${match.score}`)
.join('');
$('#search-results').html(resultsHtml);
console.log('Search results:', response);
},
error: function(xhr, status, error) {
$('#search-status').text('Error searching faces');
console.error('Error:', error);
}
});
});
});Add CSS to style your components:
<style>
.face-recognition-app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
input[type="text"],
input[type="file"] {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 8px;
}
button {
background-color: #0769AD;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-bottom: 10px;
}
button:hover {
background-color: #0658A0;
}
#search-results {
margin-top: 20px;
}
#search-results > div {
padding: 10px;
border-bottom: 1px solid #eee;
}
</style>
