You had my curiosity, but now you have my attention
Hey @LeChuck
Would you be able to add it to our Components Tracker so when the feature is out we donāt forget to come back to you ?
Cheers,
Fanilo
Done!
Thanks, Fanilo, for the suggestion.
Best,
Nils
Hi @LeChuck,
With Streamlit 0.73 the CORS block measure was lifted, could you try again on your component to see if other problems pop up ?
Cheers,
Fanilo
Hi @LeChuck a couple of weeks ago @iwatobipen managed to get JSME working in Streamlit:
https://iwatobipen.wordpress.com/2020/12/30/embed-molecular-editor-into-streamlit-app-streamlit-chemoinformatics-rdkit/
Hopefully it solves your problem too
@napoles3d Nice! Iād like to add it to the Component Tracker but not sure under what title: JSME ? RDKit ?
Best,
Fanilo
Let me ask to pen, he is who can give it a name
Hi @andfanilo and @napoles3d,
Many thanks for the info of the new version and the link to @iwatobipenās blog. And sorry for the late reply - I was on vacation.
This is really awesome!
I downloaded the example from the link and it works fine. However, it only works in development mode (when I run ānpm startā). When I build with ānpm run buildā or āyarn buildā the build process terminates fine, but the built component doesnāt work in the app.
Any ideas what could be the reason? Building other components worked for me so farā¦
Also, when start the component with an empty SMILES (smiles="") the component doesnāt show up at all. But this might also be an issue from JSME.
Thanks again,
LeChuck
Dear @LeChuck ,
Iām @iwatobipen who is author of the blog. Nice to meet you.
Thanks for reading my blog.
And could you please share error message when you run my code? I would like to try to fix the issue.
Thanks.
Hi @iwatobipen,
Thanks for your reply. Nice to meet you too. Iām a fan of your blog.
When I try the built version, having changed ā_RELEASE = Trueā in app.py, I get the following message in my browser:
Your app is having trouble loading the app.my_component component.
(The app is attempting to load the component from * , and hasnāt received its āstreamlit:componentReadyā* message.)
- If this is a development build, have you started the dev server?
- If this is a release build, have you compiled the frontend?
For more troubleshooting help, please see the Streamlit Component docs or visit our forums.
The frontend was compiled properly and the path is also correct.
Does it work for you?
I managed to fix the second issue: you have to completely remove the smiles="ā¦" part from the App.js in order to start with an empty editor. My mistakeā¦
Cheers,
LeChuck
I followed @iwatobipen 's worked example too. I keep getting this error. Anybody has any suggestions?
Thank you!This looks like RDKit throws an error since it doesnāt receive a proper SMILES.
Can you print out what āresā actually is and what type?
Best,
LeChuck
Thank you for replying @LeChuck ! res is āNoneā
This is that part of the code from @iwatobipen I used:
from rdkit import Chem
from rdkit.Chem import AllChem
from rdkit.Chem import Draw
from rdkit.Chem.Draw import SimilarityMaps
from io import BytesIO
from functools import partial
from PIL import Image
from rdkit.Chem.Draw import rdDepictor
rdDepictor.SetPreferCoordGen(True)
import streamlit.components.v1 as components
_RELEASE = False
if not _RELEASE:
_component_func = components.declare_component(
āchemstreamlitā,
url=āhttp://localhost:3001ā
)
else:
parent_dir = os.path.dirname(os.path.abspath(file))
build_dir = os.path.join(parent_dir, āfrontend/buildā)
_component_func = components.declare_component(āmy_componentā, path=build_dir)
def my_component():
component_value = _component_func()
return component_value
res = my_component()
print(res)
Line 1:17: āComponentā is defined but never used no-unused-vars"
All I want at this point is to see the Molecular editor in Streamlit. I have not been able to do that.
Any suggestion is greatly appreciated! Thank you.
Hi, sulee:
I tried it yestoday, sucess now!
I think you should install node&npm first.
DO THINGS AS this: GitHub - streamlit/component-template: Templates and example code for creating Streamlit Components.
If you installed npm right,
-
- Initialize and run the component template frontend [ Run npm start
in FOLDER \chem_streamlit-main\chemstreamlit_js\frontend, if you use win, you have to run npm start in SHELL(AS an administrator)].
- Initialize and run the component template frontend [ Run npm start
-
- From a separate terminal, run the templateās Streamlit app [ Run "streamlit run app.py in FOLDER \chem_streamlit-main\chemstreamlit_js, in CMD or other terminal, win10 ]
-
- IF in the localhost:8501 show bug (3001 things), i think verify the url=āhttp://localhost:3001ā to url=[http://localhost:3000/]ā can fix it. or just open two windows in step 1.
I also am not able to get it to work when ā_RELEASE=Trueā. The frontend compiled correctly so I am not able to figure out what went wrong. I get the same error as @LeChuck.
Thanks
I am not able to make it work with __RELEASE=True either; I can make it work for __RELEASE=False:
if not _RELEASE:
_component_func = components.declare_component( āchemstreamlitā, url=āhttp://localhost:3000ā)
else:
parent_dir = os.path.dirname(os.path.abspath(file))
build_dir = os.path.join(parent_dir, āfrontend/buildā)
_component_func = components.declare_component(āchemstreamlitā, path=build_dir)
build/ folder is created after I run ānpm run buildā:
12/23/2021 10:41 PM .
12/23/2021 10:41 PM ā¦
12/23/2021 10:41 PM 1,035 asset-manifest.json
12/23/2021 10:41 PM 2,075 index.html
12/18/2021 05:54 PM 164 manifest.json
12/23/2021 10:41 PM 657 precache-manifest.60863b4728c4fd72a382d32ec0db1060.js
12/23/2021 10:41 PM 1,181 service-worker.js
12/23/2021 10:41 PM static
What is the first parameter (currently I used āchemstreamlitā) supposed to be ?
Thanks for help!
Hi all,
I have also got trapped in this deployment. Essentially, it is a two-step process: Start react-JSME then run Streamlit which in turn embeds the first process.
I have created a Dockerised version of the code by @iwatobipen and I am getting no errors by either Node or Streamlit. Unfortunately, JSME seems not to be running correctly though - as when I open localhost:3000 I can see that my browser has loaded all components but the page is blank - and I have no idea where to start debugging it. Note that I am not a JS developer so I might easily be missing something important.
My next attempt will be running the original react-JSME code to see whether or not the code by Douglas runs fine. The Streamlit part runs fine instead but of course, the component is just embedding a blank pageā¦
I am happy to share with you my Dockerfile:
FROM node:12.22.8-buster-slim
COPY --from=python:3.8.12-slim-buster / /
# Install required packages
COPY env/ /env
RUN python -m pip install -r /env/requirements.txt \
&& pip cache purge
# Install NPM daemon manager
RUN npm install pm2 -g
# Install JSME
COPY jsme/ /jsme
RUN cd /jsme && npm install
COPY src/ /app
EXPOSE 8501
EXPOSE 3000
WORKDIR /app
CMD [ "run" ]
Hi all again,
A little update on this. I have repeated the Dockerisation on @iwatobipen code without changing anything in the structure of the folders, just in case, but the result is the same: I can run Node and Streamlit but localhost:3000 is just a blank page for which the explorer says that all elements have been loaded correctly. Clearly, if the code works for some of us there is just a reproducibility problem. My guess is that depends on the Node version. @iwatobipen what Node version did you use to deploy your app?
Thanks,
Giammy