During the development of the property-labeled materials fragments (plmf) model for predicting materials properties we decided to make the model accessible via a web application. This application provides users a means to upload materials structures in POSCAR 5 or Quantum Espresso format and retrieve the prediction.
Live site, white paper and GitHub repo
On the back end the application is powered by the machine learning API described in detail in a previous post. For the front end I decided to use React and Redux along with axios for HTTP requests. The app has 2 main components: The input card and the Predictions. As the name suggest the input card handles the input structure. Depending on the selected type it will convert the input between POSCAR and Quantum Espresso format. In addition when the run prediction button is pressed it will fire off an action that will submit the structure to the API. Due to the API expecting only POSCAR 5 it makes sure the input is converted before posting to the endpoint.
When the content is sent to the API a card will appear in the predictions section. During this time the results API endpoint is periodically polled. If the prediction task is still running the card will show a loading animation (see above). Once the prediction finishes the card returns the results. Users can also input more structures and a series of cards will append to the prediction section. This allows users to compare the results from a number of structures. Finally, users can always remove cards form this section by clicking the remove option in the bottom right corner of each card.
Finally, the sidebar allows users the option to search the AFLOW database for structures. When users click on one of the files in the list, the contents of it's POSCAR will populate the input component. This makes it easy for users to retrieve structures and fetch predictions using this app.
