How to Use the Hand Gestures Detection API

## Linux or MacOS Retrieving JSON predictions for a local file called YOUR_IMAGE.jpg: ``` base64 YOUR_IMAGE.jpg | curl -d @- \ "https://detect.roboflow.com/MODEL_ENDPOINT/VERSION?api_key=API_KEY" ``` Inferring on an image hosted elsewhere on the web via its URL (don't forget to [URL encode it](https://www.urlencoder.org/): ``` curl -X POST "https://detect.roboflow.com/MODEL_ENDPOINT/VERSION?\ api_key=API_KEY&\ image=ENCODED_IMAGE_URL" ``` ## Windows You will need to install [curl for Windows](https://curl.se/windows/) and [GNU's base64 tool for Windows](http://gnuwin32.sourceforge.net/packages/coreutils.htm). The easiest way to do this is to use the [git for Windows installer](https://git-scm.com/downloads) which also includes the curl and base64 command line tools when you select "Use Git and optional Unix tools from the Command Prompt" during installation. Then you can use the same commands as above.

## Node.js We're using [axios](https://github.com/axios/axios) to perform the POST request in this example so first run npm install axios to install the dependency. ### Inferring on a Local Image ``` const axios = require("axios"); const fs = require("fs"); const image = fs.readFileSync("YOUR_IMAGE.jpg", { encoding: "base64" }); axios({ method: "POST", url: "https://detect.roboflow.com/MODEL_ENDPOINT/VERSION", params: { api_key: "API_KEY" }, data: image, headers: { "Content-Type": "application/x-www-form-urlencoded" } }) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error.message); }); ``` ### Inferring on an Image Hosted Elsewhere via URL ``` const axios = require("axios"); axios({ method: "POST", url: "https://detect.roboflow.com/MODEL_ENDPOINT/VERSION", params: { api_key: "API_KEY", image: "IMAGE_URL" } }) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error.message); }); ``` ## Front-End Web ### Inferring on a Local Image in Browser We have realtime on-device inference available via inferencejs; [see the documentation here.](https://docs.roboflow.com/inference/web-browser). This will load your model to run realtime inference directly in your users' web-browser using WebGL instead of passing images to the server-side. ### Inferring on a Local Image via API Note: you shouldn't expose your Roboflow API key in the front-end to users outside of your organization. This snippet should either use your users' API key (for example, if you're building model assisted labeling into your own labeling tool) or be put behind authentication so it's only usable by users who already have access to your Roboflow workspace. ``` import axios from 'axios'; const loadImageBase64 = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = (error) => reject(error); }); } const image = await loadImageBase64(fileData); axios({ method: "POST", url: "https://detect.roboflow.com/MODEL_ENDPOINT/VERSION", params: { api_key: "API_KEY" }, data: image, headers: { "Content-Type": "application/x-www-form-urlencoded" } }) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error.message); }); ```

## Uploading a Local Image Using base64 ``` import UIKit // Load Image and Convert to Base64 let image = UIImage(named: "your-image-path") // path to image to upload ex: image.jpg let imageData = image?.jpegData(compressionQuality: 1) let fileContent = imageData?.base64EncodedString() let postData = fileContent!.data(using: .utf8) // Initialize Inference Server Request with API KEY, Model, and Model Version var request = URLRequest(url: URL(string: "https://detect.roboflow.com/MODEL_ENDPOINT/VERSION?api_key=API_KEY&name=YOUR_IMAGE.jpg")!,timeoutInterval: Double.infinity) request.addValue("application/x-www-form-urlencoded", forHTTPHeaderField: "Content-Type") request.httpMethod = "POST" request.httpBody = postData // Execute Post Request URLSession.shared.dataTask(with: request, completionHandler: { data, response, error in // Parse Response to String guard let data = data else { print(String(describing: error)) return } // Convert Response String to Dictionary do { let dict = try JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] } catch { print(error.localizedDescription) } // Print String Response print(String(data: data, encoding: .utf8)!) }).resume() ```

## Uploading a Local Image ```csharp using System; using System.IO; using System.Net; using System.Text; namespace UploadLocal { class UploadLocal { static void Main(string[] args) { byte[] imageArray = System.IO.File.ReadAllBytes(@"YOUR_IMAGE.jpg"); string encoded = Convert.ToBase64String(imageArray); byte[] data = Encoding.ASCII.GetBytes(encoded); string api_key = "API_KEY"; // Your API Key string DATASET_NAME = "MODEL_ENDPOINT"; // Set Dataset Name (Found in Dataset URL) // Construct the URL string uploadURL = "https://api.roboflow.com/dataset/" + DATASET_NAME + "/upload" + "?api_key=" + api_key + "&name=YOUR_IMAGE.jpg" + "&split=train"; // Service Request Config ServicePointManager.Expect100Continue = true; ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12; // Configure Request WebRequest request = WebRequest.Create(uploadURL); request.Method = "POST"; request.ContentType = "application/x-www-form-urlencoded"; request.ContentLength = data.Length; // Write Data using (Stream stream = request.GetRequestStream()) { stream.Write(data, 0, data.Length); } // Get Response string responseContent = null; using (WebResponse response = request.GetResponse()) { using (Stream stream = response.GetResponseStream()) { using (StreamReader sr99 = new StreamReader(stream)) { responseContent = sr99.ReadToEnd(); } } } Console.WriteLine(responseContent); } } } ``` ## Inferring a Local Image ```csharp using System; using System.IO; using System.Net; using System.Text; namespace InferenceLocal { class InferenceLocal { static void Main(string[] args) { byte[] imageArray = System.IO.File.ReadAllBytes(@"YOUR_IMAGE.jpg"); string encoded = Convert.ToBase64String(imageArray); byte[] data = Encoding.ASCII.GetBytes(encoded); string api_key = "API_KEY"; // Your API Key string model_endpoint = "MODEL_ENDPOINT/VERSION"; // Set model endpoint // Construct the URL string uploadURL = "https://detect.roboflow.com/" + model_endpoint + "?api_key=" + API_KEY + "&name=YOUR_IMAGE.jpg"; // Service Request Config ServicePointManager.Expect100Continue = true; ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12; // Configure Request WebRequest request = WebRequest.Create(uploadURL); request.Method = "POST"; request.ContentType = "application/x-www-form-urlencoded"; request.ContentLength = data.Length; // Write Data using (Stream stream = request.GetRequestStream()) { stream.Write(data, 0, data.Length); } // Get Response string responseContent = null; using (WebResponse response = request.GetResponse()) { using (Stream stream = response.GetResponseStream()) { using (StreamReader sr99 = new StreamReader(stream)) { responseContent = sr99.ReadToEnd(); } } } Console.WriteLine(responseContent); } } } ``` ## Uploading an Image Hosted Elsewhere via URL ```csharp using System; using System.IO; using System.Net; using System.Web; namespace InferenceHosted { class InferenceHosted { static void Main(string[] args) { string api_key = ""; // Your API Key string imageURL = "https://i.ibb.co/jzr27x0/YOUR-IMAGE.jpg"; string model_endpoint = "dataset/v"; // Set model endpoint // Construct the URL string uploadURL = "https://detect.roboflow.com/" + model_endpoint + "?api_key=" + api_key + "&image=" + HttpUtility.UrlEncode(imageURL); // Service Point Config ServicePointManager.Expect100Continue = true; ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12; // Configure Http Request WebRequest request = WebRequest.Create(uploadURL); request.Method = "POST"; request.ContentType = "application/x-www-form-urlencoded"; request.ContentLength = 0; // Get Response string responseContent = null; using (WebResponse response = request.GetResponse()) { using (Stream stream = response.GetResponseStream()) { using (StreamReader sr99 = new StreamReader(stream)) { responseContent = sr99.ReadToEnd(); } } } Console.WriteLine(responseContent); } } } ```