Message From Mars
Message From Mars is a web application that utilizes NASA's MARS rover images and passes them through the Microsoft Computer Visions API, which generates an array of tags describing the image. These tags are then passed through a third API, Bing image search, which renders an image based on the tags. The two images are displayed side by side creating a computer generated diptych of an image from Mars and corresponding image from Earth. The process of generating the results is a conversation between three machines, leaving the viewer with a triptych representation of their findings. The app features two models, one for users, who are able to sign in and save images. Another model for guest users, who are able to search but not save their searches.
The app features two models, one for users, who are able to sign in and save images. Another model for guest users, who are able to search but not save their searches.
Technologies used: API's: NASA: api.nasa.gov/mars-photos/api/v1/rovers Microsoft Computer Visions: https://www.microsoft.com/cognitive-services/en-us/computer-vision-api BING image search: https://www.microsoft.com/cognitive-services/en-us/bing-image-search-api
Express Node React Html CSS WebPack Javascript
Wireframe
Explanations of the technologies used Three API's: NASA API: (api.nasa.gov/mars-photos/api/v1/rovers) - We used this API to grab random NASA Mars Rover images to pass it through the Microsoft Computer Visions API: (https://www.microsoft.com/cognitive-services/en-us/computer-vision-api). This API provide words associated with an image passed through the site, based on the API's own analysis. The words provided will be searched on the Bing image search API: https://www.microsoft.com/cognitive-services/en-us/bing-image-search-api and return an image based on the words
Expressjs and Nodejs - required middleware. Reactjs - to build out the front-end through passing props with components. Html - for Reactjs to interact and pass its props. CSS - to style our page. WebPack - required to link all the files together. Javascript - language we used to build our web application.
A couple of paragraphs about the general approach you took Once we brainstormed our concept, we decided on the three APIs to use. We split up the group where someone would work on database and the models, and another person would work on the middleware and components. We pushed onto Github every night and pulled from it the next morning to continue working.
Installation instructions for any dependencies We npm installed many node dependencies and required webpack to connect the files.
Link to ERDs - Diagrams of your models and their relationships
Link to user stories – A user creates an account and logs into Message From Mars. Interaction is prompted by spinning crosshairs that appear sequentially as this is a step by step application. Once the user clicks the first crosshair, they are presented with an image collected from one of NASA's Mars rovers. User is then prompted to click a second crosshair. This triggers microsoft's image scanner to analyze the image and return a description. The user then clicks on a 3rh crosshair, which triggers a Bing image search using the description from step 2. The user now has a triptych, or 3 piece artwork, generated by 3 different machines. The user can choose to save the piece to a personal collection or try again!!
Link to your wireframes – sketches of views and interfaces in your application
Descriptions of any unsolved problems or hurdles your team had to overcome
Getting all 3 api's created a couple of hurdles, the biggest was that 2 api's relied on the first loading. Because of the large data set being retrieved, the other api's would fail because the first took too long to load. The work around was a series of timeout functions, allowing images to be fetched and loaded before moving on.
Icons were taked from thenounproject.com: -Crosshair by Quinn Keaveney -User by Viktor Vorobyev -Refresh by Dmitrij -Download by Curve, FR -Delete X by Tomas Otubcak