These days, chatbots are becoming an increasingly popular tool in interacting with customers and improving the user experience on the website. With the development of technology, creating a chatbot web app has become easier than ever. However, if you are inexperienced in programming or are just starting to learn about chatbots, getting started can be difficult.

In this article, we will learn how to create an integrated chatbot web app OpenAI automatically solve coding exercises from simple to complex using the Streamlit module in Python

If you are interested in creating a chatbot that can solve your coding exercises, continue reading this article to learn how to create a chatbot web app easily and effectively. Before entering the article, let’s briefly learn the concept of chatbot, Web App and Streamlit module in Python!

What are Chatbots?

Chatbot is a computer program designed to converse with humans through communication channels such as chat applications, websites or other chat platforms. Chatbots are usually programmed to answer questions from users or perform specific tasks requested by the user. Chatbots can use artificial intelligence and machine learning to automate tasks and improve their responsiveness. Chatbots are widely used in many fields such as marketing, customer service, education, healthcare and many others.

What is WebApp?

A web app is a software application developed to run on a web browser instead of having to be installed directly on a user’s computer or mobile device. It is designed to operate on a web platform, usually a web server, and is accessed through the Internet using a web browser. A web app can be a standalone application or an extension of a traditional desktop application. With a web app, users don’t need to download and install a piece of software on their computer, but simply visit a URL on their web browser.

What is Streamlit?

After installing the 2 libraries above, you create a .py file with any name but must not have the same name as the 2 libraries you just installed and let’s start the main thing! I name this web app Anonyviet Write Code

First line import openai and the second line import streamlit as st uses the import keyword to declare using two Python libraries OpenAI and Streamlit with the syntax as st used to write shorter code when calling functions of the Streamlit . library

2nd line view = """ ... """ declares a view variable containing a multiline string using triple quotes (“””) syntax, which contains introductory information about the Anonyviet Write Code application.

import openai
import streamlit as st

view = """
Chào mừng bạn đến với Anonyviet Write Code! Bạn cảm thấy mệt mỏi khi phải vật lộn để tự viết code
Đừng lo đã có Anonyviet ở đây ! Mình sẽ là người giúp bạn viết code với nhiều nhiều ngôn ngữ lập trình khác. 
Cho dù bạn là nhà phát triển có nhiều kinh nghiệm hay mới bắt đầu, 
Anonyviet Write Code là nơi hoàn hảo để nhận trợ giúp mà bạn cần.
Còn chờ gì nữa ! Bắt đầu sử dụng Anonyviet Write Code ngay và luôn
"""

Line of code st.markdown("<h1 style="text-align: center;">Anonyviet Write Code ✨</h1>", unsafe_allow_html=True) use the markdown function of the Streamlit library to display the title for the application. The HTML string

is inserted between double quotes and placed in the first parameter of the function. Second parameter unsafe_allow_html=True allow Streamlit to understand and display that HTML string

Next line st.markdown("---") use the markdown function to display a horizontal line between sections of the application

st.markdown("<h1 style="text-align: center;">Anonyviet Write Code ✨</h1>", unsafe_allow_html=True)
st.markdown("---")

First line with st.sidebar: use the with syntax to declare the sidebar area of ​​the web page, represented by the object st.sidebar

Next line st.image("logo.jpg") use the image function of the Streamlit library to display an image representing the application such as an image of a chatbot. The image is located in the application’s folder and is named logo.jpg

Third line st.title("Anonyviet") use the title function to display the title for the application, in this case “Anonyviet”

Last line st.caption(f'''{view}''', unsafe_allow_html=False) use the caption function to display a description for the application, which contains the content stored in the view variable. The unsafe_allow_html parameter is set to False to avoid any HTML code being inserted.

Next use the method "selectbox" of the module "st" to create a dropdown that allows the user to select the language in which they want to enter the question. This check box has options for Python, C++, Java and Pascal. Also you can add other languages ​​you want

Then Anonyviet uses the method "text_area" of the module "st" to create a text box that allows the user to enter his/her question. The text will be displayed in this box

Continue using method "button" of the module "st" to create a button "Send". Users can click this button to submit their questions

The values ​​returned from these methods are stored in variables "language", "question" and "button", corresponding. You can then use these variables to perform further processing

with st.sidebar:
    st.image("logo.jpg")
    st.title("Anonyviet")
    st.caption(f'''{view}''', unsafe_allow_html=False)
   
language=st.selectbox("Lựa chọn 1 ngôn ngữ mà bạn muốn:", ("Python", "C++", "Java", "Pascal"))
question=st.text_area("Nhập câu hỏi của bạn ở bên dưới")
button=st.button("Send")

Jaw answer(question) receives a question, uses OpenAI’s API key to send a query request to OpenAI’s “text-davinci-003” model and returns the chatbot answer generated by that model.

Here we use the function openai.Completion.create() to make a request to OpenAI’s API with parameters like model (the model used to generate the answer), prompt (question entered by user), temperature (variance of answers), max_tokens (maximum word count of the answer), top_p (probability of the top words in the answer choice list), frequency_penalty (the coefficient applies to the words with high frequency in the answer), and presence_penalty (coefficients apply to words that appear in the question but not in the answer)

def answer(question):
    openai.api_key="sk-..." # Dán API key của OpenAI tại đây
    response = openai.Completion.create(
        model="text-davinci-003",
        prompt=f"""{question} {language}""",
        temperature=0,
        max_tokens=1024,
        top_p=1,
        frequency_penalty=0,
        presence_penalty=0
        )
    return response.choices[0].text

If there is data from the variable question and button then the code to use st.spinner() to display a spinning icon to let the user know that the app is processing their answer. Once the answer has been generated, it is displayed using the function st.code() of Streamlit to display the source code for the answer. If the user wants to delete the answer, they can click the “Clear” button to make the page blank again. So we have completed the web app. Now let’s test the chatbot

if question and button:
    with st.spinner("Đợi chút nhen !"):
        reply=answer(question)
        st.code(reply)
        button2=st.button("Clear")

Here is the full code for Web App Chatbot (Or you can check it out Github ):

import openai
import streamlit as st

view = """
Chào mừng bạn đến với Anonyviet Write Code! Bạn cảm thấy mệt mỏi khi phải vật lộn để tự viết code
Đừng lo đã có Anonyviet ở đây ! Mình sẽ là người giúp bạn viết code với nhiều nhiều ngôn ngữ lập trình khác. 
Cho dù bạn là nhà phát triển có nhiều kinh nghiệm hay mới bắt đầu, 
Anonyviet Write Code là nơi hoàn hảo để nhận trợ giúp mà bạn cần.
Còn chờ gì nữa ! Bắt đầu sử dụng Anonyviet Write Code ngay và luôn
"""

st.markdown("<h1 style="text-align: center;">Anonyviet Write Code ✨</h1>", unsafe_allow_html=True)
st.markdown("---")
with st.sidebar:
    st.image("logo.jpg")
    st.title("Anonyviet")
    st.caption(f'''{view}''', unsafe_allow_html=False)
   
language=st.selectbox("Lựa chọn 1 ngôn ngữ mà bạn muốn:", ("Python", "C++", "Java", "Pascal"))
question=st.text_area("Nhập câu hỏi của bạn ở bên dưới")
button=st.button("Send")

def answer(question):
    openai.api_key="sk-..." # API KEY
    response = openai.Completion.create(
        model="text-davinci-003",
        prompt=f"""{question} {language}""",
        temperature=0,
        max_tokens=1024,
        top_p=1,
        frequency_penalty=0,
        presence_penalty=0
        )
    return response.choices[0].text

if question and button:
    with st.spinner("Đợi chút nhen !"):
        reply=answer(question)
        st.code(reply)
        button2=st.button("Clear")

Now open a terminal and enter the command streamlit run app.py where app.py is my .py file just created to make Web App Chatbot

And here are the results:

So we learned about what a web app is and how to use Python and Streamlit to build a simple web application. I have built a Web App Chatbot called Anonyviet Write Code, which allows users to enter questions related to different programming languages ​​and displays the source code generated by OpenAI.

Web applications are becoming an important part of our daily lives. We can use them to create websites, mobile apps and even chatbots. With the development of technology, we can use Python’s web creation libraries such as Flask, Django, Streamlit, etc. to easily build web applications quickly and easily! Good luck !

You can also read more articles Instructions for using Midjourney to draw AI pictures on Discord on Anonyviet website

Rate this post