https://github.com/mikeal/compretend

Web application building blocks power by ML.
https://github.com/mikeal/compretend

Last synced: about 2 months ago
JSON representation

Web application building blocks power by ML.

• Host: GitHub
• URL: https://github.com/mikeal/compretend
• Owner: mikeal
• Created: 2017-09-21T21:49:46.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-04T01:34:01.000Z (almost 7 years ago)
• Last Synced: 2024-07-23T01:11:39.080Z (about 2 months ago)
• Language: JavaScript
• Size: 3.06 MB
• Stars: 20
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Compretend

Web application building blocks power by ML.

This repo contains:

* An API service.

* WebComponents that rely on the API service.

## Usage

Include compretend on your web page.

```html

```

Now you can add compretend elements to your page.

```html

```

The above example will place an image on the page centered around the faces detected in the image.

## Detection

Currently available detection APIs are:

* **faces**: Front and profile faces detection.

* **people**: Detection of people by full body, upper torso, and lower torso.

## Components

Compretend components have many properties. These properties

can be set as element attributes or with JavaScript.

```javascript

let elem = document.querySelector('compretend-image')

elem.crop = "faces"

elem.width = 320

```

### 

Displays an image. Image data can be set by either specifying the "src" attribute or setting the "data" property to an ArrayBuffer or Blob.

* **src**: URL to remote image. Can be on any publicly available server.

* **data**: ArrayBuffer or Blob representing image data.

* **crop**: String for detection method.

  * Detected attributes in the image will be centered within the

    constraints set of width/height. If width/height are not set

    the image is cropped around the detected elements.

* **width**: Image element width.

* **height**: Image element height.

* **scaled**: Scale image down to the specific dimensions (height and width). Defaults to false.

* **margin**: Ads margin to a cropped and scaled image.

## REST API

All APIs require a `body`. This can be an HTTP PUT/POST body **or** it can be a querystring identifier (hash or remote URL).

### /images/detect/faces

Accepts only the `body` argument.

Return JSON of all facial detections.

### /images/detect/people

Accepts only the `body` argument.

Return JSON of all people detections.

### /images/generate

Returns generated image data as PNG.

Accepts the following querystring parameters:

* **body**: Hash or remote URL. Optionally defined as a PUT/POST body.

* **crop**: Detection method to use for crop boundary detection. `faces` and `people` currently implemented.

* **width**: Image element width.

* **height**: Image element height.

* **scaled**: Scale image down to the specific dimensions (height and width). Defaults to false.

* **margin**: Ads margin to a cropped and scaled image.

### /images/bounds

Returns JSON data describing the crop boundaries for the given query.

Accepts the following querystring parameters:

* **body**: Hash or remote URL. Optionally defined as a PUT/POST body.

* **crop**: Detection method to use for crop boundary detection. `faces` and `people` currently implemented.

* **width**: Image element width.

* **height**: Image element height.

* **scaled**: Scale image down to the specific dimensions (height and width). Defaults to false.

* **margin**: Ads margin to a cropped and scaled image.