How I build Streamlit Components (a small Javascript / React tutorial)

Подписаться 11 тыс.

Просмотров 15 тыс.

50% 1

Do you want to take your Streamlit apps to the next stage by integrating your own web components?
In this tutorial, I will show you how I add interactive Javascript libraries into Streamlit as a Streamlit Component. I will then use a library called Parcel, with node.js to manage and bundle multiple Javascript libraries into a single JS file that can be manipulated as a Streamlit Component. After this introduction, I clone the React Component template and give some tips I learned from building 3 popular Components (streamlit-echarts, streamlit-drawable-canvas and streamlit-lottie) to build a React version of our Clickable Plotly Chart.
This is a tutorial for beginners and advanced developers alike. No HTML/CSS/JS prerequisites are required, though it will be much easier if you have a general idea of how to employ them. I suggest you watch the full tutorial once before actually attempting to implement it by yourself. After this tutorial, you should be able to embed almost any NPM package as a bidirectional Streamlit Component - especially if it takes JSON as input!
☕ Want to support me? www.buymeacoffee.com/andfanilo
🐦Follow my daily updates on Twitter: / andfanilo
🗣️ My other links: linktr.ee/andfanilo
👉 Links
- Code: github.com/andfanilo/streamli...
- Blackary’s original tutorial with the streamlit-component-lib.js file: blog.streamlit.io/how-to-buil...
- The official React template: github.com/streamlit/componen...
- My Twitter thread for more Streamlit Components Resources: / 1552233660207828993
- My long blog post about creating Streamlit Components: streamlit-components-tutorial...
- Installing Node.js/NPM: docs.npmjs.com/downloading-an...
My tools (Affiliate links to support me!)
- 📷 Main Camera - amzn.to/3QvTosB
- 📷 Main Lens - amzn.to/3svYCwq
- 🎙️ Microphone - amzn.to/47l5ewA
- 🎵 Music & Sound Effects - www.epidemicsound.com/referra...
- 📕 Streamlit Official Book - amzn.to/3QuRPwl
📑 Chapters
00:00 Integrate any NPM package into Streamlit?
00:26 Vanilla Javascript
06:18 Managing and Bundling Javascript libraries
12:03 Using the React Component Template
15:45 Build Components to help Data Scientists!
16:29 Outro
🪶 29th video, out of the 35 videos for 2022 goal. Longest video tutorial of the year (not counting the Epic Tutorial that I split in 2). I crunched 3 years of developing Streamlit Components in 17 minutes. Honestly the video is jam-packed with information, I hope you’ll have to rewatch it multiple times 😄 I need to do shorter videos now to catch up on the lost time..
👍 On this channel, we love building a lot of small yet smart Streamlit apps to improve our Python chops, and recall our stories around Data Science and Content Creation. Like & Subscribe if you would like to see more videos!
⚠️ Disclaimer: This video is not sponsored. Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. Thank you for supporting my channel so I can continue to provide you with free content!
#streamlit #python #datascience #dataapps

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@cyberhard Год назад

Great video! Packed a lot of info in under 20 minutes.

@andfanilo Год назад

Thanks for the support! Yeah I realized after watching the video again that it may be too much for a single 20mn video 😆

@TheOGDesigner 10 месяцев назад

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!!! 👏👏

@andfanilo 10 месяцев назад

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!

@plouf1969 Год назад

Awesome video. Thank you so much for doing this!

@andfanilo Год назад

My pleasure :) thanks for the coffee, it will keep me awake to build the next one!

@mohammedalbatati5529 Год назад

Just knew your channel I loved your work 👍👍👍 You provide great content

@andfanilo Год назад

Thanks for the support 😃 Hope to see you around! Any Streamlit thing you want to see? Have a nice day!

@ratchetrod Год назад

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!

@andfanilo Год назад

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

Год назад

Wonderful. Again. Thank you

@andfanilo Год назад

Thanks for the support, looking forward to your next component 😁

@CodingIsFun Год назад

*Awesome video!* 💪 Thanks for sharing. Guess I need to learn some JS/TS now. npm star this video

@andfanilo Год назад

I'll never thank you enough for your support 😀eagerly waiting for your first JS component!

@nlight8769 Год назад

Ouch, my head hurts... this is dense, and fast packed. Got to write it down, but thanks, that's super valuable information 👍👍

@andfanilo Год назад

🙂 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/ !

@nlight8769 Год назад

@@andfanilo Nice ! Thanks 😊

@darkcss1054 11 месяцев назад

@@andfanilo the sidebar on that app looks awesome! I would love a tutorial teaching us how to make it 🙂

@louis_korczowski Год назад

Excellent !

@andfanilo Год назад

Merci pour le soutien :) I'll be waiting for your Streamlit component now!

@rockNbrain Год назад

nice content and nice editing bro, loving your videos , greetings from Brazil!!

@andfanilo Год назад

Thank you for the feedback 😊 it means a lot! Have you tried building a component? How was the experience?

@timetocode_with_ali Год назад

wow, Python and React coming together. I love it 💜

@andfanilo Год назад

😃 Come build Streamlit Components in React with us, it's fun!

@afizs Год назад

Great one Fanilo!

@andfanilo Год назад

Thanks for the support Afiz :) will be waiting for your Streamlit component

@flight5056 Год назад

🤯 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

@andfanilo Год назад

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 RU-vid videos, so I'm not really present right now anywhere else, I hope to be back soon!

@jeffaw5546 3 дня назад

Amazing work bro! If anyone wants to extend streamlit functionality this is 100% the video to go to🎉

@ahmedlingo6556 Год назад

AMAZING

@andfanilo Год назад

Thanks for the support 😁 looking forward to seeing your Streamlit component, which one would you build?

@user-on8hy5zq4f 5 месяцев назад

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 :)

@wallacypasqualini7661 6 месяцев назад

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.

@andfanilo 5 месяцев назад

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

@SHEKHARKHADKA-vb1zg 2 месяца назад

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 2 месяца назад

Hey! Have you read this one: docs.streamlit.io/deploy/tutorials/docker ? Can provide a good starting block

@SHEKHARKHADKA-vb1zg 2 месяца назад

@@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?

@wgalloPT Год назад

Question: hi Fanilo...what would you do to accomplish "mousedown event" with streamlit?

@andfanilo Год назад

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..

@wgalloPT Год назад

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

@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?

@wgalloPT Год назад

@@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..

@wgalloPT Год назад

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 !!!

@louis_korczowski Год назад

08:27 actually you can store automatically the python requirements using `pip freeze > requirements.txt` ^^

@andfanilo Год назад

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 :/

@darkcss1054 11 месяцев назад

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.

@andfanilo 11 месяцев назад

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 11 месяцев назад

@@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?

@andfanilo 11 месяцев назад

deck.gl/docs/get-started/using-standalone new Deck? (Not tested 😇 currently enjoying a little holiday 🕶️)

@darkcss1054 11 месяцев назад

@@andfanilo I'm getting "Uncaught ReferenceError: Deck is not defined". Feels bad to be a total newb on javascript 😓

@andfanilo 11 месяцев назад

@@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

@jackychan4640 Год назад

Hey. I am doing the openai with streamlit. I have problem with the secrets.toml file. Hope you can help

@andfanilo Год назад

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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BHwVRI9N8B0.html, if you follow what it does it may help you Have a nice day!

@jackychan4640 Год назад

@@andfanilo thanks a lot. Sorry for the interrupt your holiday. Wishing you happy holidays and Happy New Year 2023

@balachandar6945 6 месяцев назад

How to deploy this app in snowflake? Is it possible to?

@andfanilo 6 месяцев назад

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/ :)

@VictorDlocalhost Год назад

Excellent solution, but I would like to perform the same in pie chart

@andfanilo Год назад

Hey Victor! A Pie Chart from which JS library would you like to integrate?

@VictorDlocalhost Год назад

@@andfanilo Plotly

@andfanilo Год назад

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

@VictorDlocalhost Год назад

@@andfanilo Yes, I decide to use the second alternative. Thank you.

@andrewlu8432 Год назад

the speed so fast, I can't understand it!

@andfanilo Год назад

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!