I recently found out about Streamlit and decided to do some research. I felt discouraged because I read some forums that said Streamlit is limited in its customizability. You single-handedly debunked those atteststions 🙌🏾 Thank you for the informational video, Fanilo!
Thank you for the kind words :) it means a lot! I hope my videos will keep inspiring you to push through the limits of Python webapp libraries and go past what everyone is writing on the Internet :D
Wooow, I'm very impressed by the amount of work you put into this tutorial. While watching I didn't stop thinking how much time and effort you put into it. I have my own channel myself (different topic) so I know how much it takes to edit a video. And I really liked the sense of humour, I think it's something very few people dare to do and don't even talk about taking out the bongos, LOL. Great work, oh yes, and great useful information, as wel!!! 👏👏
🙂 yeah I realize now that some people want a very long version...I'll try a very slow 2h version one day (that's what I should sell as a digital product ahah), but in the meantime most of the info is in streamlit-components-tutorial.netlify.app/ !
🤯 Nice one!! .. It would be fun to create a GLTF loader for streamlit, and use sliders to experiment with lights and colors. I am sure this will help create a lot of new and fun little components, hope you can keep the community tracker up to date
That would be so cool! You should definitely try this one when you have time TBH I think I've missed some component announcements on the forum so I'm not sure if the tracker has all of the contributions :( ... I'm currently building a new uni course + building UA-cam videos, so I'm not really present right now anywhere else, I hope to be back soon!
Thanks for the video. So is it possible to make a process animation (graph with dots moving between nodes) with javascript and then integrate it to streamlit api?
Like this silly demo I did a long time ago: github.com/andfanilo/streamlit-d3-demo ? Yes you could! As long as you find the adequate JS component to embed into a Streamlit component, it should be doable :)
Hey, your video seems really good but you have not showed the component rendering with the build file, I am trying but it is showing me component error even though the same component is working when I try to do the embedding with port (I am trying to embed react app into streamlit), if possible could you please give explanation for this would be helpful, thanks :)
Hello! Regarding the problem with requirements.txt, have you seen the Python Dependencies Manager options? There are good options. My favorite is Poetry because it's similar to the way node.js manages dependencies in JavaScript.
I've yet to try Poetry but I've always heard good things about it :) Hatch is another one I'm looking to try. Well I'm putting this as a video idea for when I'm bored of doing Streamlit videos! Thanks for sharing
Eheh thanks for pointing this out! Yep you could (I actually am a fan of pip-tools github.com/jazzband/pip-tools to manage requirements from a draft file), but I'm sad there's no easy Python way to add/remove a package from the requirements.txt file and the virtual environment with a single command, I don't think poetry does it :/
Hi Fanilo Andrianasolo, I'm really struggling to containerize this node js and streamlit together in docker container, do you have any docker template for this?
@@andfanilo hi Fanilo, yes I did, this docs is only for the docker build with streamlit only, but my application contains the streamlit +streamlit component API i.e. react which need npm install and npm run start. Do you have any docker build template/docs for this, I'm really really struggling here for last couple of weeks?
Hey! What do you mean? You want to send back an event to Python from a JS mouseevent down event? You can attach the event `object.addEventListener("mousedown", callback);` on any div. But you'll be sending way too much events back to Python this way, you'll need to make sure you debounce the event so it is not sent too many times www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/ Yeah JS can be a bit of a new world..
Ah but that looks like an OpenCV event, not a javascript one, so it’s a different story 🤔 sorry I’ve never tried OpenCV in Streamlit, your code looks fine though, what kind of error is it throwing?
@@andfanilo actually I am trying to get that opencv code to work with streamlit. So far I havent being able to and I wonder if its because of the mouse down...thank you so much for replying fanilo..
if you dont mind im going to email the code. All I need from you is to tell me if I can accomplish it or not in streamlit. It would greatly help me !!!
I haven't tried but replacing `type: 'bar'` with `type: 'pie'` in the input specification should do the trick You should be able to use github.com/null-jones/streamlit-plotly-events for this btw
From your understanding, would it be possible to get React to return attributes from a column that is clicked on a Pydeck chart loaded in Streamlit through components.html? Currently the Pydeck component of Streamlit has performance issues so using it through components.html is a must.
components.html doesn't return results back to Streamlit 😞 so you'd need to either build your own component like in this tutorial or implement using discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064 for the vanilla version I think streamlit pydeck widget does some conversions under the hood that could slow it down, so if you need only a very specific subset of pydeck capabilities, sure you can rebuild it yourself so it's lighter than the native widget like in this tutorial 👌 didn't try it myself though so don't know how optimized you can get it to be
@@darkcss1054 ouch! even with the import line `import {Deck} from '@deck.gl/core` at the start of the script and the `npm install @deck.gl/core @deck.gl/layers` ? Sorry I can't try right now but I do hope you manage to make it :o
Hey Jacky! I'm in holidays so I'm not 100% into Streamlit right now :) Though...what is happening? Did you put your secrets.toml file in .streamlit folder at the root of your project, then using st.secrets? Is your toml file correctly formatted? While I'm in holidays, you may have better luck on discuss.streamlit.io/ Also I think @Avra_b has a video about it on ua-cam.com/video/BHwVRI9N8B0/v-deo.html, if you follow what it does it may help you Have a nice day!
This is meant to be an overview of the implementation process, for a slow tutorial you'd be reading a blog tutorial like streamlit-components-tutorial.netlify.app/ Have a nice day!
I recently found out about Streamlit and decided to do some research. I felt discouraged because I read some forums that said Streamlit is limited in its customizability. You single-handedly debunked those atteststions 🙌🏾
Thank you for the informational video, Fanilo!
Thank you for the kind words :) it means a lot!
I hope my videos will keep inspiring you to push through the limits of Python webapp libraries and go past what everyone is writing on the Internet :D
*Awesome video!* 💪 Thanks for sharing. Guess I need to learn some JS/TS now.
npm star this video
I'll never thank you enough for your support 😀eagerly waiting for your first JS component!
Wooow, I'm very impressed by the amount of work you put into this tutorial. While watching I didn't stop thinking how much time and effort you put into it. I have my own channel myself (different topic) so I know how much it takes to edit a video. And I really liked the sense of humour, I think it's something very few people dare to do and don't even talk about taking out the bongos, LOL. Great work, oh yes, and great useful information, as wel!!! 👏👏
Thank you very much for the feedback, I'm very grateful :) wishing you all the best for doing Javascript in Streamlit and in your YT channel!
Awsome video @andfanilo
you explained the hardest concept very easily this is very very very useful
please post more videos like this on regular basis
Thanks for the support, see you on the next video !
Ouch, my head hurts... this is dense, and fast packed. Got to write it down, but thanks, that's super valuable information 👍👍
🙂 yeah I realize now that some people want a very long version...I'll try a very slow 2h version one day (that's what I should sell as a digital product ahah), but in the meantime most of the info is in streamlit-components-tutorial.netlify.app/ !
@@andfanilo Nice ! Thanks 😊
@@andfanilo the sidebar on that app looks awesome! I would love a tutorial teaching us how to make it 🙂
Great video! Packed a lot of info in under 20 minutes.
Thanks for the support! Yeah I realized after watching the video again that it may be too much for a single 20mn video 😆
Just knew your channel
I loved your work 👍👍👍
You provide great content
Thanks for the support 😃 Hope to see you around! Any Streamlit thing you want to see?
Have a nice day!
nice content and nice editing bro, loving your videos , greetings from Brazil!!
Thank you for the feedback 😊 it means a lot!
Have you tried building a component? How was the experience?
wow, Python and React coming together. I love it 💜
😃 Come build Streamlit Components in React with us, it's fun!
Awesome video. Thank you so much for doing this!
My pleasure :) thanks for the coffee, it will keep me awake to build the next one!
Wonderful. Again.
Thank you
Thanks for the support, looking forward to your next component 😁
🤯 Nice one!! .. It would be fun to create a GLTF loader for streamlit, and use sliders to experiment with lights and colors. I am sure this will help create a lot of new and fun little components, hope you can keep the community tracker up to date
That would be so cool! You should definitely try this one when you have time
TBH I think I've missed some component announcements on the forum so I'm not sure if the tracker has all of the contributions :( ... I'm currently building a new uni course + building UA-cam videos, so I'm not really present right now anywhere else, I hope to be back soon!
Amazing work bro! If anyone wants to extend streamlit functionality this is 100% the video to go to🎉
Excellent !
Merci pour le soutien :) I'll be waiting for your Streamlit component now!
Thanks for the video. So is it possible to make a process animation (graph with dots moving between nodes) with javascript and then integrate it to streamlit api?
Like this silly demo I did a long time ago: github.com/andfanilo/streamlit-d3-demo ?
Yes you could! As long as you find the adequate JS component to embed into a Streamlit component, it should be doable :)
Hey, your video seems really good but you have not showed the component rendering with the build file, I am trying but it is showing me component error even though the same component is working when I try to do the embedding with port (I am trying to embed react app into streamlit), if possible could you please give explanation for this would be helpful, thanks :)
Hello! Regarding the problem with requirements.txt, have you seen the Python Dependencies Manager options? There are good options. My favorite is Poetry because it's similar to the way node.js manages dependencies in JavaScript.
I've yet to try Poetry but I've always heard good things about it :)
Hatch is another one I'm looking to try. Well I'm putting this as a video idea for when I'm bored of doing Streamlit videos!
Thanks for sharing
AMAZING
Thanks for the support 😁 looking forward to seeing your Streamlit component, which one would you build?
Great one Fanilo!
Thanks for the support Afiz :) will be waiting for your Streamlit component
08:27 actually you can store automatically the python requirements using `pip freeze > requirements.txt` ^^
Eheh thanks for pointing this out! Yep you could (I actually am a fan of pip-tools github.com/jazzband/pip-tools to manage requirements from a draft file), but I'm sad there's no easy Python way to add/remove a package from the requirements.txt file and the virtual environment with a single command, I don't think poetry does it :/
Hi Fanilo Andrianasolo, I'm really struggling to containerize this node js and streamlit together in docker container, do you have any docker template for this?
Hey! Have you read this one: docs.streamlit.io/deploy/tutorials/docker ? Can provide a good starting block
@@andfanilo hi Fanilo, yes I did, this docs is only for the docker build with streamlit only, but my application contains the streamlit +streamlit component API i.e. react which need npm install and npm run start.
Do you have any docker build template/docs for this, I'm really really struggling here for last couple of weeks?
How to deploy this app in snowflake? Is it possible to?
It is possible but I've personally never tried as I'm not using Snowflake. You should ask this question on the forum discuss.streamlit.io/ :)
Question: hi Fanilo...what would you do to accomplish "mousedown event" with streamlit?
Hey!
What do you mean? You want to send back an event to Python from a JS mouseevent down event? You can attach the event `object.addEventListener("mousedown", callback);` on any div.
But you'll be sending way too much events back to Python this way, you'll need to make sure you debounce the event so it is not sent too many times www.freecodecamp.org/news/debounce-and-throttle-in-react-with-hooks/
Yeah JS can be a bit of a new world..
something like that..
def mousePoints(event, x, y, flags, params):
if event == cv2.EVENT_LBUTTONDOWN:
size = len(pointsList)
if size != 0 and size % 3 != 0:
cv2.line(img, tuple(pointsList[round((size - 1) / 3) * 3]), (x, y)@@andfanilo
Ah but that looks like an OpenCV event, not a javascript one, so it’s a different story 🤔 sorry I’ve never tried OpenCV in Streamlit, your code looks fine though, what kind of error is it throwing?
@@andfanilo actually I am trying to get that opencv code to work with streamlit. So far I havent being able to and I wonder if its because of the mouse down...thank you so much for replying fanilo..
if you dont mind im going to email the code. All I need from you is to tell me if I can accomplish it or not in streamlit. It would greatly help me !!!
Excellent solution, but I would like to perform the same in pie chart
Hey Victor! A Pie Chart from which JS library would you like to integrate?
@@andfanilo Plotly
I haven't tried but replacing `type: 'bar'` with `type: 'pie'` in the input specification should do the trick
You should be able to use github.com/null-jones/streamlit-plotly-events for this btw
@@andfanilo Yes, I decide to use the second alternative. Thank you.
From your understanding, would it be possible to get React to return attributes from a column that is clicked on a Pydeck chart loaded in Streamlit through components.html? Currently the Pydeck component of Streamlit has performance issues so using it through components.html is a must.
components.html doesn't return results back to Streamlit 😞 so you'd need to either build your own component like in this tutorial or implement using discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064 for the vanilla version
I think streamlit pydeck widget does some conversions under the hood that could slow it down, so if you need only a very specific subset of pydeck capabilities, sure you can rebuild it yourself so it's lighter than the native widget like in this tutorial 👌 didn't try it myself though so don't know how optimized you can get it to be
@@andfanilo I'm stuck at 5:22. What would be the deck gl (the javascript the pydeck package is wrapped around) equivalent of Plotly newPlot?
deck.gl/docs/get-started/using-standalone
new Deck? (Not tested 😇 currently enjoying a little holiday 🕶️)
@@andfanilo I'm getting "Uncaught ReferenceError: Deck is not defined". Feels bad to be a total newb on javascript 😓
@@darkcss1054 ouch! even with the import line `import {Deck} from '@deck.gl/core` at the start of the script and the `npm install @deck.gl/core @deck.gl/layers` ?
Sorry I can't try right now but I do hope you manage to make it :o
Hey. I am doing the openai with streamlit. I have problem with the secrets.toml file. Hope you can help
Hey Jacky! I'm in holidays so I'm not 100% into Streamlit right now :)
Though...what is happening? Did you put your secrets.toml file in .streamlit folder at the root of your project, then using st.secrets? Is your toml file correctly formatted?
While I'm in holidays, you may have better luck on discuss.streamlit.io/
Also I think @Avra_b has a video about it on ua-cam.com/video/BHwVRI9N8B0/v-deo.html, if you follow what it does it may help you
Have a nice day!
@@andfanilo thanks a lot. Sorry for the interrupt your holiday. Wishing you happy holidays and Happy New Year 2023
the speed so fast, I can't understand it!
This is meant to be an overview of the implementation process, for a slow tutorial you'd be reading a blog tutorial like streamlit-components-tutorial.netlify.app/
Have a nice day!
"The truth is Python is only a front end for javascript"
Lol I forgot I said that 😂 too many reading source code from Streamlit, Dash and Ipywidgets !