Kickstart your Custom Streamlit Chatbot (ft. CSS & Langchain)
Вставка
- Опубліковано 9 лип 2024
- 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
Awesome video! Excellent explanation and clarity. I have just finished the install and will be testing it, Thanks again.
Thanks for watching, good luck on the app!
Ok this tutorial is awesome and comes in the perfect timing! THanks Fanilo for this and for Streamlit!
Thanks for the feedback, much appreciated :) looking forward to your app!
Love your content style. Thanks for this tutorial!
Thanks for the support, I'm very grateful :D good luck on your journey, see you around!
Man the quality of the content! I would think you have over 100k subs... Thank you so much for all the great tutorials!
Thank you for the support ☺️ you’ll be able to say you were in the top 5000 when this happens 🙂
This was freaking awesome
Exactly what I was looking for
You are the best, dude!
That’s how teaching should be done!
Thanks for the support, I'm very grateful :) hope to see you around!
awesomely useful AND hilarious!
Glad to hear it! Thanks for your support, it means a lot, I'll continue to refine this format!
Awesome video man! Already noticed your name in the streamlit forum once! You should really have more subs!
Thanks for the support ^^
Eh, UA-cam is hard, fingers crossed it keeps growing at least 😎
thank you very much! very high valuable content!!!
Thanks for the support, very appreciated :) hope to keep seeing you around!
great job dude!!
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 :)
Very nice, well done
Thank you, hope to see you around on the next video :)
Very helpful. BTW, you are funny, that made me to concentrate more ..thanks bunch.
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!
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
Glad it helped, thanks for watching! Hoping to see you around for my future videos :)
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 😂
Thanks for watching :D I'm grateful to get such positive comments on my currently worst performing video ahah ^^
@@andfanilo that's because of the curse word, CSS lol
Thanks!
Oh thank you 🙏 very grateful for this! Happy Streamlitin’ :)
Awesome tutorial with lots of interesting best practices, thank you! 🙏😀
The voiceless part 9:02 definitely misses your great energy.
Thanks for the support 😁 next time I'll try those "voice cloning" apps to do the voiceover for me ahah!
I love it
Thanks for the support, very appreciated 🙂
💞😍😍🥰💕💕🥰😍😍😍😍😍😍 well done
Thanks for the support 🤗
Great video! The PNgs are not reflecting when I try customising your code CSS against my functions
OMG you are a genius!
I know, right
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!
How can get updated with info like that? Where do they post the upcoming updates? Thx
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 :)
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...
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!
Great video! Do you know how hard it would be to make this so that it streams the output to the interface?
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
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
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 ua-cam.com/video/pyWqw5yCNdo/v-deo.html which is a pain and the previous way of doing.
@@andfanilo Nice! Cant wait to see the new tutorial with the just launched chat bot!!
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?
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?
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?
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!
hello fanilo , any way to use image in streamlit selectbox ?
Hello, no I don't think I have seen anyone do that 🤔 only emojis would be possible
@@andfanilo yes , i used emojis but i want to use custom images in my form selectbox , form wizard can handle this ?
It would be amazing to add response streaming
I think Avra made a video around it ua-cam.com/video/CqqELxWGUy8/v-deo.html that could help
Great demo. Can you get it to work with the latest openai & langchain packages?
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
@@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.
How to add the firebase google sign in with streamlit?
I might do one soon but in the meantime, I think Avra made a video about it: ua-cam.com/video/KLmSfHcOXlc/v-deo.html
Have a nice day
Thanks for this amazing code; is there anyway to add a prompt template to this? and if so can you show me how?
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
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! 😁😚
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!
@@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!!
I'm using the version 1.25 of Streamlit and I'm having the error:
AttributeError: module 'streamlit' has no attribute 'sesssion_state'
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) ?
@@andfanilo Hi, the problem that's exactly what you were describing. Thank you
Fanilo, I really appreciate the video. In particular the CSS walkthrough. I have a UA-cam 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.
Thank you for your kind words! Glad to see another fellow Data UA-camr 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!
@@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.