ersilia-os / ersilia-app

Streamlit-based app as a GUI for the Ersilia Model Hub
GNU General Public License v3.0
1 stars 1 forks source link

App Template #1

Closed GemmaTuron closed 1 year ago

GemmaTuron commented 1 year ago

Hi @carcablop and @miquelduranfrigola ,

I have created this template for the streamlit app as a temporary GUI while we work on the full one. I have used the open source malaria as an example, and the model checkpoints are in the directory. We now need to work on this so that the streamlit app takes the model from the deployed DO service, and also automatically reads the metadata to update relevant fields. I am open to suggestions to making this easier. Meanwhile, I will deploy the OSM models as models in the Ersilia Model Hub and upload them to DO so we can start trying it out.

GemmaTuron commented 1 year ago

@carcablop if you have never worked with streamlit, you can try the local deployment by simply running, from the /app folder: streamlit app.py

carcablop commented 1 year ago

Hi @GemmaTuron

Thank you so much. I was trying streamlit with an example (molecular weight), to explore the application. I made a small example that the molecular weight is calculated given an input. But I was stuck on how to do it for all the models, and it was to make the queries to the airtable to bring the models that were already deployed and thus also bring me the metadata.

From what I understand from what you propose, therefore we would make the POST request to the URL of the API of the model that is already deployed (Example: https://eos80ch-m365k.ondigitalocean.app/run) and then we would process the response depending on each model. Therefore we would not need to add the checkpoints of each model to the directory. For the model metadata, too, we would make a POST request to the example URL: https://eos80ch-m365k.ondigitalocean.app/info and process the output data to display it in the app.

I'll work on this for the two example models that are already deployed in DO. Additionally, I would like to add a button that runs the model and obtains the results.

GemmaTuron commented 1 year ago

@carcablop

We are working today with @miquelduranfrigola to make an easier api to call the models from DO - will keep you posted. Meanwhile, I do think that a button to RUN instead of just hitting enter would be helpful for me as well, if you want to figure out that feature that would be fantastic!

GemmaTuron commented 1 year ago

Hi @carcablop and @miquelduranfrigola

app.py now displays a simple app with the model description, some other parameters from the metadata and a field to input data, as well as a RUN button to submit. The app requires the model id in the url, which we can then link on our https://ersilia.io/model-hub Results are printed as a table that can be downloaded as a .csv file. Next steps would be: [ ] - Finalize design (open to suggestions, please have a look and let me know) [ ] - Deploy streamlit app on DO - @miquelduranfrigola do you think having different urls will be a problem? [ ] - Deploy all desired models on DO (~20)

carcablop commented 1 year ago

Hello @GemmaTuron. I have run the application in my local, with the example of OSM, I suggested making some changes in the design of the application such as:

  1. Do not show the dataframe as a result, it looked better before, when the image of the molecule was printed and the results were in a column next to it, from my point of view it is more visual. Or if you prefer to print the table, we could change the font size and improve the style of the table, including even an image, and not print the key column.
  2. The description of the model is better on one side. That the main session to run the model is only the text area and the results.
  3. We can add an icon, it can be an ersilia icon or icons that help to illustrate the information sessions.
  4. Improve the text that will follow Input Molecules, such as: 'Enter a list of molecules using smile notation and each molecule on a separate line
carcablop commented 1 year ago

@GemmaTuron , I have made the above changes, but I did it from a branch that I create, but I don't have permissions on this repository to make changes.

So here from the fork of my repository you can see the changes. https://github.com/carcablop/ersilia-app/commit/62c172e0d368c0935b82a6693f909da500f6eb2d

carcablop commented 1 year ago

@GemmaTuron I also add the option to upload a csv file: https://github.com/carcablop/ersilia-app/commit/89c69545a63cc64a91cf7ced479eee372dc091f3

GemmaTuron commented 1 year ago

Hi @carcablop

Excellent suggestions, thanks for acting so fast. Could you open a PR? Im currently wrangling with the deployment to Digital Ocean to make it work online, I'll follow up with you when I succeed!

GemmaTuron commented 1 year ago

Hi @carcablop and @miquelduranfrigola

I've merged Carolina's suggestions and worked from there. The main changes are:

It now looks simple but straightforward, I hope you like it! The app is also live online

carcablop commented 1 year ago

Hi @GemmaTuron It looks great, now It look very Ersilia!. I suggest something else, a visual indicator that the model is running, and the user doesn't have the feeling that nothing is happening. I have had many problems with my internet connection, and when I tried to run it I thought there was a problem with the application and the problem is that it was taking a long time to run.

With st.spinner . I can do it.

I opened a pull request in case you consider adding it. https://github.com/ersilia-os/ersilia-app/pull/3 Thanks

GemmaTuron commented 1 year ago

yes, I like that! Thanks for the suggestion!!

GemmaTuron commented 1 year ago

I've changed the input of .csv files since in the text we ask for SMILES as a column but then we look for 'smiles' Also added an error so that user knows

GemmaTuron commented 1 year ago

The app is working, we have a few models in it already: https://ersilia-app-t5zpw.ondigitalocean.app/?model_id=eos4rta