Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
ageitgey committed Dec 31, 2016
0 parents commit 47afef1
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 0 deletions.
7 changes: 7 additions & 0 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
Copyright 2016 Adam Geitgey

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
68 changes: 68 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
# Show Facebook Computer Vision Tags Chrome Extension

![](https://cloud.githubusercontent.com/assets/896692/21574672/fa4cecb4-ceab-11e6-896c-101025c68dc3.png)

Since April 2016, Facebook has been [automatically adding `alt` tags](https://code.facebook.com/posts/457605107772545/under-the-hood-building-accessibility-tools-for-the-visually-impaired-on-facebook/) to images
you upload that are populated with keywords representing the content of your images:

```html
<img csrc="https://facebook.com/some-url.jpg"
alt="Image may contain: golf, grass, outdoor and nature"
width="316" height="237">
```

They are labeling your images using a [Deep ConvNet](https://medium.com/@ageitgey/machine-learning-is-fun-part-3-deep-learning-and-convolutional-neural-networks-f40359318721#.luqjma59e)
built by Facebook's
[FAIR team](https://research.fb.com/category/facebook-ai-research-fair/).

On one hand, this is really great. It improves accessibility for blind users
who depend on screen readers which are only capable of processing text.

But I think a lot of internet users don't realize the amount of information that is now routinely extracted from photographs. Facebook (and Google, Apple, Amazon, etc) can easily tell from your photographs if you have a pet dog, if you collect cameras, if you play golf, if you have children, or if you are just really into sunglasses. There's nothing stopping them from using this information to show you relevant ads just based on photos of you - even if another user uploaded the photo and didn't even directly tag you!

This is a very simple Chrome Extension that I hacked together in a few minutes to make it easy to see the tags that Facebook is automatically applying to you and your friends' photos. Once you install it, all the photos you see on your Facebook timeline will automatically be overlaid with their tags, like this:

<img width="524" src="https://cloud.githubusercontent.com/assets/896692/21574687/3443b268-ceac-11e6-85ee-45f59408f9bb.png">

The goal is simply to make everyone aware of the kind of information that is routinely extracted from your own images today. This isn't some technology that is 'coming soon', but this is something in *wide-spread production use now by every major internet company*. You can even [learn how to implement this kind of system yourself](https://medium.com/@ageitgey/machine-learning-is-fun-part-3-deep-learning-and-convolutional-neural-networks-f40359318721) using widely available open-source software.

Here's some examples of the kinds of things that Facebook detects in your photos:

### Objects in your photos

It's possible to tell what kinds of objects are in your photos and identify your interests based on that.

![](https://cloud.githubusercontent.com/assets/896692/21574712/aa1fd34a-ceac-11e6-98b0-b0b7a6a5d9fb.png)

### Activities you are doing

Whether you are eating, running, or playing golf, it's possible for an algorithm to tell what you are doing in your photographs.

<img width="523" alt="" src="https://cloud.githubusercontent.com/assets/896692/21574724/f5055da8-ceac-11e6-9ec0-14629f42deca.png">

### When and where a photo was taken

You can tell if a photo was taken inside or outside, what the time of day was, what physical landmarks (mountains, trees, water, etc) were around, and so on.

<img width="623" alt="screen shot 2016-12-30 at 4 30 36 pm" src="https://cloud.githubusercontent.com/assets/896692/21574743/5de83548-cead-11e6-9211-3e75a588523d.png">

### Events you are attending

It's even possible to tell which kind of sporting event you are attending.

<img width="949" alt="screen shot 2016-12-30 at 4 35 31 pm" src="https://cloud.githubusercontent.com/assets/896692/21574780/24767440-ceae-11e6-9ee1-b5e065f89c93.png">

These are just a few examples. See what kinds of things Facebook has found in your own photos!

# Installing this Chrome Extension

1. Clone this repo so you have a copy in a folder locally.
1. Open `chrome://extensions` in the location or go to `Tools` > `Extensions`
1. Enable `Developer mode` by checking the checkbox in the upper-right corner.
1. Click on the button labelled `Load unpacked extension...`.
1. Select the directory where you cloned this repo to.
1. Visit Facebook!

Caveats:

1. This only works for English-speaking Facebook users. I made no attempt to make this work for any other language. Sorry! But you could easily fork this and make it work for a different language. There's not a lot to this.
109 changes: 109 additions & 0 deletions facebook.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
const emoji_map = {
"1 person": "👤",
"2 people": "👥",
"3 people": "👥",
"4 people": "👥",
"5 people": "👥",
"6 people": "👥",
"7 people": "👥",
"baby": "🍼",
"beach": "🏖",
"beard": "👴",
"bicycle": "🚲",
"camera": "📷",
"car": "🚗",
"child": "👦",
"christmas tree": "🎄",
"closeup": "👀",
"cloud": "☁️",
"crowd": "👥",
"dog": "🐶",
"drink": "🍹",
"eating": "🍽",
"eyeglasses": "👓",
"flower": "🌻",
"food": "🍎",
"golf": "🏌️‍",
"grass": "🍃",
"hat": "👒",
"indoor": "🏠",
"living room": "🏠",
"meme": "👍",
"mountain": "🌋",
"nature": "🏞",
"night": "🌃",
"ocean": "🌊",
"office": "💼",
"one or more people": "👥",
"outdoor": "🚵",
"people eating": "🍽",
"people sitting": "⑁",
"people smiling": "😂",
"people standing": "🕴",
"phone": "📱",
"plant": "🌿",
"selfie": "🤳",
"shoes": "👡",
"sitting": "⑁",
"sky": "☀️",
"skyscraper": "🏙",
"sleeping": "😴",
"smiling": "😋",
"snow": "❄️",
"standing": "🕴",
"stripes": "📶",
"suit": "🕴",
"sunglasses": "🕶",
"swimming": "🏊",
"table": "🍽",
"text": "🔠",
"tree": "🌴",
"twilight": "🌃",
"water": "💧"
}

const show_facebook_cv_tags = function() {
const TAG_PREFIX = "Image may contain: ";
const images = [...document.getElementsByTagName('img')];

images.forEach(function(el) {
if (el.hasAttribute("data-prev-alt") && el.getAttribute("data-prev-alt") === el.getAttribute("alt"))
return;

el.setAttribute("data-prev-alt", el.alt);

const altText = el.alt;
const isCVTag = altText.startsWith(TAG_PREFIX);

if (isCVTag) {
const tags = altText.slice(TAG_PREFIX.length).split(/, | and /);
let html = "<ul style='position:absolute;top:10px;right:10px;padding:5px;font-size:12px;line-height:1.8;background-color:rgba(0,0,0,0.7);color:#fff;border-radius:5px'>";

tags.forEach(function(tag){
let prefix = "∙";

if (tag in emoji_map)
prefix = emoji_map[tag];

html += `<li>${prefix} ${tag}</li>`;
});

html += "</ul>";

el.style.position = 'relative';
el.insertAdjacentHTML('afterend', html);
}
});
};

const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
show_facebook_cv_tags();
});
});

const config = { attributes: true, childList: true, characterData: false }

observer.observe(document.body, config);

show_facebook_cv_tags();
Binary file added logo128.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added logo16.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added logo48.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "Show Facebook Computer Vision Tags",
"version": "0.0.1",
"manifest_version": 2,
"description": "Shows what Facebook thinks your pictures contain",
"permissions": [
"http://www.facebook.com/*", "https://www.facebook.com/*"
],
"icons": {
"128": "logo128.png",
"16": "logo16.png",
"48": "logo48.png"
},
"content_scripts": [
{
"matches": ["http://www.facebook.com/*", "https://www.facebook.com/*"],
"js" : ["facebook.js"],
"run_at" : "document_idle",
"all_frames" : false
}
]
}

0 comments on commit 47afef1

Please sign in to comment.