Kickstart your Custom Streamlit Chatbot (ft. CSS & Langchain)

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

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

50% 1

Want to build and design your own chat UI inside Streamlit, without using the st-chat component?
In this video, we will look at building a chatbot app, using Langchain to connect to GPT 3.5 and CSS to customize our chat interface.
📧 Want a free, slower paced live coding of this tutorial? Sign up to my email list to be alerted first, and keep up to date with the latest news, tutorials and resources about Streamlit & friends ➡ andfanilo-newsletter.streamli...
💰 Buy me a coffee to stay awake while editing ➡ www.buymeacoffee.com/andfanilo
🗣️ Find my socials ➡ andfanilo.com
👉 Links
- Source code: github.com/andfanilo/social-m...
- References: blog.streamlit.io/chat-with-t... and github.com/kaarthik108/snowCh...
- Based on: www.pinecone.io/learn/langcha...
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
00:00 Intro
00:18 It always starts with a Form
02:33 Langchain & GPT
04:22 Pimp my Markdown
08:03 Breaking Bad
______
🪶 Well, this is an unplanned video I did in about 4 days, it kind of went well. I should do more unplanned videos
⚠️ Disclaimer: This video is not sponsored, I receive no compensation by any brand quoted in this video. Views are my own and do not represent my employer's.
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 providing you with free content!
#streamlit #python #datascience #dataapps

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

28 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@gkennedy_aiforsocialbenefit Год назад

Awesome video! Excellent explanation and clarity. I have just finished the install and will be testing it, Thanks again.

@andfanilo Год назад

Thanks for watching, good luck on the app!

@adumont Год назад

Ok this tutorial is awesome and comes in the perfect timing! THanks Fanilo for this and for Streamlit!

@andfanilo Год назад

Thanks for the feedback, much appreciated :) looking forward to your app!

@meredithhurston 9 месяцев назад

Love your content style. Thanks for this tutorial!

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

Thanks for the support, I'm very grateful :D good luck on your journey, see you around!

@Azariven Год назад

Man the quality of the content! I would think you have over 100k subs... Thank you so much for all the great tutorials!

@andfanilo Год назад

Thank you for the support ☺️ you’ll be able to say you were in the top 5000 when this happens 🙂

@HighTechGeeks 4 месяца назад

This was freaking awesome

@smartwakeAI 4 месяца назад

Awesome video man! Already noticed your name in the streamlit forum once! You should really have more subs!

@andfanilo 4 месяца назад

Thanks for the support ^^ Eh, RU-vid is hard, fingers crossed it keeps growing at least 😎

@sup5356 Год назад

awesomely useful AND hilarious!

@andfanilo Год назад

Glad to hear it! Thanks for your support, it means a lot, I'll continue to refine this format!

@fenixchow1 9 месяцев назад

thank you very much! very high valuable content!!!

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

Thanks for the support, very appreciated :) hope to keep seeing you around!

@rockNbrain Год назад

great job dude!!

@andfanilo Год назад

Thank you! And now the official chatbot widget is out in 1.24 ahah XD is this video going to slowly die, we shall see in the next episode :)

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

Exactly what I was looking for You are the best, dude! That’s how teaching should be done!

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

Thanks for the support, I'm very grateful :) hope to see you around!

@nadoiz 8 месяцев назад

Very nice, well done

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

Thank you, hope to see you around on the next video :)

@sribethams 2 месяца назад

Very helpful. BTW, you are funny, that made me to concentrate more ..thanks bunch.

@andfanilo 2 месяца назад

It's important to take fun breaks between difficult focus phases 😁 (though I'm still trying to improve my serious/fun pacing) Thanks for watching, see you on the next one!

@dazze_art 3 месяца назад

thank you so much it really help a lot. I have surffed many websites but cant solution to problem. Luckly I found your video and My problem got solved

@andfanilo 3 месяца назад

Glad it helped, thanks for watching! Hoping to see you around for my future videos :)

@theh1ve Год назад

Once again amazing informative content presented in your awesome comedic style making it fun, and as it's CSS I shall have to watch this video like a million times 😂

@andfanilo Год назад

Thanks for watching :D I'm grateful to get such positive comments on my currently worst performing video ahah ^^

@theh1ve Год назад

@@andfanilo that's because of the curse word, CSS lol

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

Thanks!

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

Oh thank you 🙏 very grateful for this! Happy Streamlitin’ :)

@silkogelman Год назад

Awesome tutorial with lots of interesting best practices, thank you! 🙏😀 The voiceless part 9:02 definitely misses your great energy.

@andfanilo Год назад

Thanks for the support 😁 next time I'll try those "voice cloning" apps to do the voiceover for me ahah!

@SamKhan-kb3kg 11 месяцев назад

I love it

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

Thanks for the support, very appreciated 🙂

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

Thanks for the great video! Do you think that it could be possible to integrate speech to text and text to speech to get an audio chat instead of a text one? Also, it would be amazing if streamlit could enable to display a video avatar mimicking someone speaking...

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

Are you building the next JARVIS :D ? Anyway, I think replacing the text input with a component like github.com/stefanrmmr/streamlit_audio_recorder , record in a temporary folder, a STT and TTS Huggingface model, and output all audio input/output into docs.streamlit.io/library/api-reference/media/st.audio per row could do the trick yeah The video avatar I don't know about it ahah, if you manage to find a Javascript package that lip-syncs using audio data, that could be integrated in Streamlit through a Streamlit component. I couldn't find one by Googling for 5 seconds, but maybe you can spend more time looking for it. Maybe just lip-sync on a small SVG file exists...but yeah, that part I think I don't have a lot of solutions for ^^' Good luck!

@TheOrionMusicNetwork 9 месяцев назад

Great video! Do you know how hard it would be to make this so that it streams the output to the interface?

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

I think I saw something that could help...wait lemme...ah maybe check the source code for extras.streamlit.app/Streaming%20Write ? I didn't really look into it, at first glance it sounds...cumbersome to fuse this technique with the HTML chat_message injection. but maybe it does inspire you Also, if you don't have a big Streamlit app, maybe switching to Gradio's Streaming chat ( www.gradio.app/guides/creating-a-chatbot-fast#streaming-chatbots ) and CSS Styling it ( www.gradio.app/guides/custom-CSS-and-JS ) would do the trick. I haven't tried but looks like an easier possibility. LMK if it's an interesting avenue, that actually sounds like a good future recommendation & video Hope it helps a little

@aishwaryadharani4947 3 месяца назад

Great video! The PNgs are not reflecting when I try customising your code CSS against my functions

@S-Lomar 9 месяцев назад

💞😍😍🥰💕💕🥰😍😍😍😍😍😍 well done

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

Thanks for the support 🤗

@fabianbayona8778 Год назад

OMG you are a genius!

@notmanas Год назад

I know, right

@andfanilo Год назад

Thank both of you 🤩 apparently Streamlit is coming up with a native chat widget soon so let's hope this video will still be useful in the coming weeks :) Have a nice day!

@fabianbayona8778 Год назад

How can get updated with info like that? Where do they post the upcoming updates? Thx

@andfanilo Год назад

roadmap.streamlit.app/ this is where you get the most up to date version of the roadmap. Also, I spend a lot of time in the Issues/Pull Requests of the Github project and I read a lot of the Streamlit dev team commits :)

@alessandroceccarelli6889 Год назад

It would be amazing to add response streaming

@andfanilo Год назад

I think Avra made a video around it ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CqqELxWGUy8.html that could help

@StevenManning-eq8mk 11 месяцев назад

Thanks for this amazing code; is there anyway to add a prompt template to this? and if so can you show me how?

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

Hey! If I understood correctly... When you're running st.session_state.conversation.run(human_prompt), that human prompt can also be constructed from a prompt template, for example `human_prompt = PromptTemplate(input_variables=[], template="Tell me a joke.").format()` returns the "Tell me a joke" prompt in the variable, which you can run in your Langchain chain. (this is the example from python.langchain.com/docs/modules/model_io/prompts/prompt_templates/#create-a-prompt-template ) So then you'd have multiple prompt templates in your code, and depending on when you're at in the conversation, you can build a prompt from a specific PromptTemplate and variables specified by the end user. Hope it helps you quick start

@sajanimayadunne Год назад

Super tutorial Fanilo! Thank you for this! quick question: is there a way to stop the page from being white/disabled when clicked on submit?

@andfanilo Год назад

Hello, thanks for your support, it means a lot For now, I don't have an easy solution. That may change with Streamlit Langchain callbacks coming soon, I think (but not totally sure, I've only just read about it) that enables you to plug Langchain completion into a Streamlit container, bypassing the white/disabling effect of the submit button while the app reruns. When I got more info I'll come back to you ok? Have a nice day!

@fabianbayona8778 Год назад

Hi Fanilo. To create the static server do you need to download something separate in order to use .toml? Im not really into CSS so its hard to get that part

@andfanilo Год назад

You only need to add the configuration value to .streamlit/config.toml at the same level as your Streamlit app (see docs.streamlit.io/library/advanced-features/configuration) and Streamlit being actually a Tornado server will take care of the static serving. This makes it easier to load any file, especially CSS files, into HTML from the static folder. Otherwise you'd have to load it as a base64 encoded file like in ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pyWqw5yCNdo.html which is a pain and the previous way of doing.

@fabianbayona8778 Год назад

@@andfanilo Nice! Cant wait to see the new tutorial with the just launched chat bot!!

@EricB1 3 месяца назад

Great demo. Can you get it to work with the latest openai & langchain packages?

@andfanilo 3 месяца назад

I haven't tried, but I don't expect too many issues as long as you store the correct Langchain object in st.session_state.conversation 🤔 Have you tried? Also st.write_stream now exists and takes as input an OpenAI-Langchain Stream object docs.streamlit.io/library/api-reference/write-magic/st.write_stream for a less custom experience

@EricB1 3 месяца назад

@@andfanilo I tried, assisted by GPT4, but I got many errors trying to fix it. Nevertheless, it has some good UI ideas that I want to incorporate into an app that is already working.

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

Just a quick question, hopefully! with the change to css formatting the chat response is now rendered as text rather than Markdown. Is there a simple way to have the css formatting and have the response formatted as Markdown?

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

Hey! Sorry, I'm not totally sure I understood :) are you talking about CSS formatting on the Markdown widget or the new Streamlit chat message widget?

@notmanas Год назад

Hi Fanilo! Absolutely love your content! Need your advice: I'm trying to create a similar chat bot, but in my case the chatbot will return multiple things like Text response, code etc. Using all this, I want the chat response to have tabs or separators which can display all this information (including charts and dataframes). Is that possible? If yes, please let me know how! I always wait for you to upload! 😁😚

@andfanilo Год назад

Hello, thanks for watching and for the support! I'm not a Langchain pro, from what I read, in github.com/kaarthik108/snowChat/blob/main/utils/snowchat_ui.py you can find some methods to extract SQL or code from the chat response to format them in a particular way So really, the goal is to engineer your prompt template enough that the chat response contains markers corresponding to a tab, or separator, or chart info, or dataframe, that you can then parse to output using the corresponding Streamlit widget. Quick example, when asking for a list of 10 SQL code examples, you ask each item to be separated by the following character " --- " and each dataframe/chart to be prefixed by ##chart or ##dataframe, provide it an example for self-consistency and you hope for the best the chat response maintains this specification so that you can parse them. learn.microsoft.com/en-us/azure/cognitive-services/openai/concepts/advanced-prompt-engineering?pivots=programming-language-chat-completions#start-with-clear-instructions shows how separators are used in the input, but you can also structure the prompt to have it include specific separators in the output, and a prefix for anything dataframe or chart related Sidenote, have you been successfully generating charts and dataframes from an LLM? I suppose the Code Interpreter plugin does output this info but I've never tried... I've never tested Langchain/GPT-4 this far so I hope this helps kickstart things!

@notmanas Год назад

@@andfanilo hey, I am able to generate great SQL queries using langchain's SQLDatabaseChain. And the response is a list of tuples, so it's easy to make charts and dataframes. My question was, how do I make it appear in the chat box in tabs, and how do I handle reruns? I can store the dataframes in chat history, but every time there's an interaction, the app would rerun and all the charts would be regenerated from chat history and that would take time. How do I deal with this in streamlit? Thanks!!

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

hello fanilo , any way to use image in streamlit selectbox ?

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

Hello, no I don't think I have seen anyone do that 🤔 only emojis would be possible

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

@@andfanilo yes , i used emojis but i want to use custom images in my form selectbox , form wizard can handle this ?

@bhavaniummadisetty3264 Год назад

How to add the firebase google sign in with streamlit?

@andfanilo Год назад

I might do one soon but in the meantime, I think Avra made a video about it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KLmSfHcOXlc.html Have a nice day

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

I'm using the version 1.25 of Streamlit and I'm having the error: AttributeError: module 'streamlit' has no attribute 'sesssion_state'

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

Hello, That’s odd I’m on 1.25 too and I don’t have the issue. Can you make sure your command is run in an environment with Streamlit 1.25, that there’s not another globally Streamlit installed Streamlit ruining something (you can check by running streamlit version) ?

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

@@andfanilo Hi, the problem that's exactly what you were describing. Thank you

@lucidateAI Год назад

Fanilo, I really appreciate the video. In particular the CSS walkthrough. I have a RU-vid channel of my own focussing on the application of AI and DeFi to Capital Markets. I've built a RoboAdviser for Financial Markets and used your CSS code pretty much as-is, just a couple of minor tweaks in the app I've developed. Do you mind if I give you a shout out in my video with a link to this one? I couldn't have built my app as quickly without your help, and for that I am grateful. If you'd prefer I'd not give you a shout out and a link then I'll of course respect that, but I hope you will say 'yes'. If there is anything particular you want me to say in the shout-out please let me know and I'll do what I can. Great content, you have another subscriber. Lucidate.

@andfanilo Год назад

Thank you for your kind words! Glad to see another fellow Data RU-vidr around :) I watched your BloombergGPT video a while ago and it was a great help :D Sure, feel free to shout me out! No particular things to say in the shout out, you can tell me to subscribe and buy me a coffee too to stay awake while editing ahah. I also need to add the CSS is heavily inspired from blog.streamlit.io/chat-with-the-cat-generative-dialogue-processor-catgdp/ and github.com/kaarthik108/snowChat/blob/main/main.py if you want to add those in the description, they were very helpful for me too. Have a nice day!

@lucidateAI Год назад

@@andfanilo Glad you enjoyed the BloombergGPT video. I’ll include the CSS links you mentioned along with the shout out. Have a great day yourself! Lucidate.