项目作者: dylankershaw

项目描述 :
Auto-indexing photo site that assigns relevant labels to images on upload
高级语言: JavaScript
项目地址: git://github.com/dylankershaw/tagless-frontend.git
创建时间: 2017-12-13T21:09:27Z
项目社区:https://github.com/dylankershaw/tagless-frontend

开源协议:MIT License

下载


click here for tagless-backend

Tagless

An auto-indexing photo site that assign relevant labels to images on upload. User-submitted images are automatically tagged and indexed by Google Cloud’s Vision API.

Key Technologies, Packages, and Gems

  • Front End
    • React
    • Redux
    • react-router
    • semantic-ui-react
    • redux-thunk
    • redux-form
    • Chart.js
  • Back End
    • Rails
    • Google Cloud Storage
    • Google Cloud Vision
    • Mini Magick
    • JWT

Core Features

  • Base64 image encoding (front-end) and decoding (back-end)
  • Automatic AI-based label assignment of images
  • User authentication and cookie storage through JSON Web Tokens (JWT)
    • Logs users in on page load if their localStorage has a valid token
  • Automatic backup of every image via Google Cloud Storage
  • Users can upload images from their computer or by entering a third-party URL
  • Dynamic handling of image downloads allows for multiple file types

Demo

placeholder animation

Auto-animating placeholder prompts users to enter a search term and background loops through an array of images every five seconds. See here and here for code.


search from root

Placeholder animation disables when search bar is clicked. Search returns all images than have been tagged with a specified keyword (e.g. clouds) and sorts them by their relevancy score.


url upload

Images can be uploaded by entering a third-party URL.


file upload

Or from a user’s computer. Images are auto-tagged on upload in a matter of seconds. See here for back-end image controller (upload code is in the “create” action).


results show

Search results are sorted by relevancy score. (e.g. searching for “clouds” displays images very likely to contain clouds at the top and those less likely to contain clouds toward the bottom)


image show

Clicking an image displays all of its labels, sorted by relevancy score. In this example, “dog” appears toward the top with a score of 97% whereas “grass” appears toward the bottom with a score of 53%.


radar chart

Labels can be view as bar charts or in a radar chart.


tag click

Clicking a label displays all other images that have been tagged with that keyword.


user show

Clicking a username displays all images uploaded by that user.