{"id":19840128,"url":"https://github.com/emadehsan/marsjs","last_synced_at":"2025-05-01T19:30:41.637Z","repository":{"id":48020630,"uuid":"137351978","full_name":"emadehsan/marsjs","owner":"emadehsan","description":"MobileNet on TensorFlow.js - label images from Unsplash in browser","archived":false,"fork":false,"pushed_at":"2023-01-06T01:45:20.000Z","size":9625,"stargazers_count":52,"open_issues_count":8,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-06T17:06:06.576Z","etag":null,"topics":["chrome-extension","deep-learning","distributed-computing","image-labeling","tensorflow-js","volunteer-computing"],"latest_commit_sha":null,"homepage":"https://marsathome.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/emadehsan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-14T11:55:26.000Z","updated_at":"2024-08-28T15:22:21.000Z","dependencies_parsed_at":"2023-02-05T02:01:16.371Z","dependency_job_id":null,"html_url":"https://github.com/emadehsan/marsjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emadehsan%2Fmarsjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emadehsan%2Fmarsjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emadehsan%2Fmarsjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emadehsan%2Fmarsjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emadehsan","download_url":"https://codeload.github.com/emadehsan/marsjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251932562,"owners_count":21667167,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","deep-learning","distributed-computing","image-labeling","tensorflow-js","volunteer-computing"],"created_at":"2024-11-12T12:25:41.830Z","updated_at":"2025-05-01T19:30:38.398Z","avatar_url":"https://github.com/emadehsan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://chrome.google.com/webstore/detail/marshome/dikaddifgkonkicimbgikbcbaagajjhj\"\u003e\u003cimg src=\"./images/banner.PNG?raw=true\"\u003e\u003c/a\u003e\n\n  **Share on:** \u003ca href=\"https://news.ycombinator.com/submitlink?u=https://github.com/MarsAtHome/marsjs\u0026t=Labeling Unsplash.com photos using Tensorflow.js in your browser\"\u003e\u003cimg src=\"./images/hacker-news.png\" width=\"30px;\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/home?status=Using%20Deep%20Learning,%20Label%20Unsplash.com%20photos%20with%20Tensorflow.js%20in%20your%20browser%3A%20https%3A//github.com/MarsAtHome/marsjs\"\u003e\u003cimg src=\"./images/twitter.png\" width=\"30px;\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Marsjs - Using Tensorflow.js \u0026 Crowd Computing to label Unsplash photos in browser\n\nMarsjs is the browser client for Mars@Home. Currently this extension labels image from [Unsplash](https://unsplash.com) in browser - using MobileNet on Tensorflow.Js. It is available on [Firefox addons site](https://addons.mozilla.org/en-GB/firefox/addon/marsathome/) and [Chrome web store](https://chrome.google.com/webstore/detail/marshome/dikaddifgkonkicimbgikbcbaagajjhj).\n\n## Non-Developer quickstart\nInstall [Mars@Home for Firefox](https://addons.mozilla.org/en-GB/firefox/addon/marsathome/)\nInstall [Mars@Home for Google Chrome](https://chrome.google.com/webstore/detail/marshome/dikaddifgkonkicimbgikbcbaagajjhj)\n\n## Developer quickstart\n\nClone this project\n\n```\n$ git clone https://github.com/MarsAtHome/marsjs\n```\n\n### Project Structure\n\n* [`captioner`](./captioner): Contains MobileNet \u0026 TensorflowJs code for Image Labeling\n* [`extension`](./extension): Contains code of Chrome Extension\n* [`images`](./images): Screenshots \u0026 media files for the README\n* [`logo-files`](./logo-files): Logo files for [Mars@Home](https://github.com/MarsAtHome/)\n\n\n#### In Firefox\n1. Go to `about:debugging` in Firefox\n\n2. Click `Load Temporary Add-on`, select any file from inside `extension` folder from cloned project\n\n#### In Chrome\n1. Go to `chrome://extensions/` in Chrome\n\n2. Turn ON `Developer mode`\n\n3. Click `LOAD UNPACKED` and select the `extension` folder from cloned project\n\n**Check the Current task by clicking \u003cimg src=\"./logo-files/MarsAtHome.png?raw=true\" width=\"24\" height=\"24\"\u003e in your browser's url bar**\n\n## Model (MobileNet)\nTaken straight from [tfjs-converter](https://github.com/tensorflow/tfjs-converter/tree/master/demo/mobilenet) MobileNet model is served from Google Cloud as 4MB chunks and is cacheable by browser.\n\nThe model takes 224x224 image, so Unsplash images are fetched in 224x224 size with `crop=face` URL parameter.\n\nAfter changing files in `captioner/mobilenet/`, run\n\n```\n$ cd captioner\n$ rmdir dist; # OR rm -rf dist\n$ parcel build mobilenet/index.html\n```\n\n[Parcel](https://parceljs.org/) must be installed globally.\n\nCopy all files except `index.html` from `dist` to `extension` directory. Copy the content of `dist/index.html` and paste it in `extension/popup.html` title \u0026 subtitle. Remove old code pointing to old build after pasting.\n\n## Design\n\nOn clicking \u003cimg src=\"./logo-files/MarsAtHome.png?raw=true\" width=\"24\" height=\"24\"\u003e the extension appears as a box of 300x600. Shows the link to current photo being processed. Once the labels assigned, shows top 3 labels with their Confidence score on the left.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/ss5.png?raw=true\"\u003e\n\u003c/p\u003e\n\n## Few Examples of Image Labeling\n\n\u003cimg src=\"./images/ss39-shop.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss26-girl-mask.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss15-cat-flag.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss38-seashore-girl.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss35-minibus.png\" align=\"center\" width=\"283px\"\u003e \u003cimg src=\"./images/ss41-llama.png\" align=\"right\" width=\"282px\"\u003e\n\n## Why image labeling?\n[Mars@Home](https://marsathome.org/) says it's a public volunteer computing project committed to solving real life problems. Then why the first client labels images instead of [\"computing climate simulations\"](https://marsathome.org/faqs.html)? \n\nWith this first version, we want to find out that *would people participate in a modern volunteer computing project for real life problems*? Keeping that in mind, we designed it so that, with other things, it has a small fun element to it. We wanted maximum people and developers to join the movement. Because the real development is yet to happen!\n\n\u003chr\u003e\n\n### BTW I have to confess that building this project was such a joy! But watching the MobileNet model assign labels to beautiful Unsplash photos was equally entertaining. So here's more\n\n\u003chr\u003e\n\n\u003cimg src=\"./images/ss12-fireman.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss13-assassin-creed.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss24-iguana.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss30-palace.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss31-couple.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss27-tower-eiffel.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss18-glasses-desert.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss10-tricycle.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss11-forest-road.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss16-wardrobe.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss17-goose.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss9-desert.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss19-girl-street.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss20-crab.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss22-boat.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss23-fog-valley.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss25-water-palace.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss28-girl-farm.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss29-neck-brace.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss32-cab.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss33-concert.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss34-daisy.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss36-laptop.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss37-backpack.png\" align=\"right\" width=\"282px\"\u003e\n\n\u003cimg src=\"./images/ss40-clock.png\" align=\"left\" width=\"282px\"\u003e \u003cimg src=\"./images/ss42-feet.png\" align=\"center\" width=\"282px\"\u003e \u003cimg src=\"./images/ss43-dairy.png\" align=\"right\" width=\"282px\"\u003e\n\n## Libraries \u0026 Model used\n\n* [Tensorflow.js](https://github.com/tensorflow/tfjs)\n* [TFJS Converter](https://github.com/tensorflow/tfjs-converter)\n* [MobileNet Ported to Tensorflow.js](https://github.com/tensorflow/tfjs-converter/tree/master/demo/mobilenet)\n\n## Learn more about Mars@Home project\n* Star this repository :)\n* Do add your email at → https://marsathome.org if you believe in the effort!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femadehsan%2Fmarsjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femadehsan%2Fmarsjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femadehsan%2Fmarsjs/lists"}