Skip to content
/ 22.-Deployed-Streamlit-Web-Application-for-Telegram-Chatbot-with-Chatbase-custom-GPT-LLM-model-API Public

UROP: Telegram chatbot for novice programmers to learn coding. The deployed Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase, using Figma for prototyping of the web application.

uzkgcu6dkiqhyappnhnx5c9.streamlit.app/

License

MIT license
3 stars 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

WindJammer6/22.-Deployed-Streamlit-Web-Application-for-Telegram-Chatbot-with-Chatbase-custom-GPT-LLM-model-API

BranchesTags

Repository files navigation

22.-Deployed-Streamlit-Web-Application-for-Telegram-Chatbot-with-Chatbase-custom-GPT-LLM-model-API-and-Firebase-with-Figma-for-prototyping My Skills My Skills My Skills

maybe for the secrets add 1 version with the json file (witht he info erased) and 1 with the deployed one without the json file but the secrets variables)

CHATBASE SUBSCRIPTION IS CANCELLED. (ALTERNATIVELY CAN USE ANOTHER LLM (MAYBE THE MISTRAL LLM SINCE ITS FREE???) On 24/1/2025

ALSO MIGHT NEED TO SEPERATE ONLY THE NECESSARY FILES FOR DEPLOYMENT IN A SEPARATE GITHUB REPO IN ORDER TO PREVENT ERROR. CUZ ADDING EXTRA MISCELLANEUOUS FILES MAY CAUSE DEPLOYMENT ERROR!! (SAME FOR THE '18. KARAOKE EVENT STREAMLIT APP', WHICH NOW HAS ERRORS CUZ I ADDED EXTRA MISCELLANEUOUS FILES TO ITS GITHUB REPO... OOPS...)

maybe can put pic of the streanlit website, firebase, chatbase and figma too and the

plan to change it from transferable between courses to only works for one course... cuz to make it transferable between courses is too hard alr

This is a project done as part of my University's Undergraduate Research Opportunities Programme (UROP), titled 'UROP: Telegram chatbot for novice programmers to learn coding', supervised and initiated by Professor Oka Kurniawan (here is his Github account), spanding 8 months of (on-off) work.

Here is the description of the UROP project:
'''
Learning coding can be improved significantly when learners have an immediate and personalized feedback. The number of learners for coding make it impossible for human instructors to give an immediate and personalized feedback to learners. The rise of AI gives us the possibility to create a chatbot Tutor that can support learners anywhere and at any time. The purpose of this project is to create a Telegram chatbot where learners can get feedback related to their coding courses. The feedback should be accurate as reflected in the notes or instructor problem set.

The chatbot can be used for any institution that teaches programming.
'''

This project is made up of 2 Github repositories:

This Github repository is hosting the code for the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database.


My Approach to developing this UROP project:

The approach to developing this UROP project is split into 2 components:

  1. Telegram Chatbot integrated with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database
  • Create a regular Telegram Bot -> integrating a Chatbase custom GPT LLM model to generate the Telegram Bot's responses to incoming texts/prompts from students (which basically gives the Telegram Bot the 'chatbot' functionality) -> incoming texts/prompts from students and the Chatbase custom GPT LLM model's responses will be saved into a database
  1. Streamlit website
  • There will be a separate website application containing 2 pages
    1. the first 'Details' page where it can take inputs from human instructors to manipulate the setting/behaviour of the Chatbase custom GPT LLM model via Prompt Engineering, and train the Chatbase custom GPT LLM model with their own course materials and notes without having to worry about their own course materials and notes leaking to the public
    2. the second 'Database' page where it displays the incoming texts/prompts from students and the Chatbase custom GPT LLM model's responses for the human instructors to evaluate the students' incoming texts/prompts (which the data is retrieved from the database)

This project's deployed Telegram Bot, Chatbase custom GPT LLM model, Streamlit (Python Framework)'s Website Application and Firebase (API) links:


Table of Contents

Here is a directory to explain the purpose of each file in this repository:

  1. Files that are required in the creation of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database

    1. '.streamlit' folder
      1. 'config.toml' file
    2. 'README.md' file
    3. 'firebase_key.json' file
    4. 'requirements.txt' file
    5. 'streamlit_web_application.py' file

  2. Additional files that are not part of the creation of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database, but includes the past iterations/versions/prototypes of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database

    1. Figma (maybe put a pic of the Figma prototyping of the website, while attaching an image as a jpg file uploaded in this repo)

  3. Additional files that are not part of the creation of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database, but includes my learning journey of some of the required technology being used in this project that I was not familiar with

    1. Prompt Engineering learn (from Prompt Engineering course by DeepLearning.AI in collaboration with OpenAI (using ChatGPT as the LLM))
    2. Figma learn

  4. Deployment Process of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database on Streamlit Cloud


1. Files that are required in the creation of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database

1. '.streamlit' folder
i. 'config.toml' file

The main Python file for the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database itself.


2. 'README.md' file
The 'README.md' file.


3. 'firebase_key.json' file

{
  "type": "service_account",
  "project_id": "urop-telegram-chatbot",
  "private_key_id": "d370c3cff86ea75089c60973d19105f90d84fdc7",
  "private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC2Yqgt09bJB335\nbN61dlqWY0yFcLv8DPqvHKtpUqzSAvQGdK00zaPlezkd4SKGfohd8z4o0srpUPt9\n0fLhIPJJJhTjRN7rZpvJOPWiECQfHFXc2OJhOdabDnJoIeth+29RfD5D4t2HUdWO\n/OiSKJfNYNAf2sKELJLlPOnXwpa/wfzNhHap50WLjed8OzF+Y57ucFHut/USlsWp\n3uiRdjHod3Sfs0eL+jKfeOdkni7o/E1ytN1Ascvc1OLpbi9h6GyoLLZf8g2O1Nyn\nfe26tfRnkYvT1viErxnhQBGUh3hz3SVIsZ4FYyVrlWVwH+U8CJg2foBtbtOZjmEK\nPNAC0fi3AgMBAAECggEATMs0iftA3CtJ6Rxkl55qXRkZbrQ9is7CPLpDGFlFyDWT\nHybAiVOu12Cvd3vEiEG91GUnfpPm+R9ujRc5/33aVl9w+xKUFCUDolHX5zGJrAnH\nw3IUu6BZUrdeB6eEjyCJyhMYuofLA/+6fnbRzDzIUiMZ7tezAGkuPtSLl5vo0ns5\n1Mw13sSlssc3bjd+bCa23xDamzKWpMFlHJztnbsRVjKXfzMx2f45+snT1Lqo4kk/\ncCpM8QFlMHxLgei7JOKSkEj6LYM9Xn1dRmPJGGSAtlx/2W0/DFrVD4GCLXReKNsz\n4afFN42cZB88pKT/8YB3KoH3o/wA79k4AdsagccGbQKBgQDz3p5Yi1YgvmxWPKxd\npO1cYek2itrpH9YUZirehU01rrdHJvyufFVEoUHoeoXcDHVt++1iHZvZPwt/ZgZq\nP2tM5XWY1hlgdDgOb5J2td8jdMJuKBkzGLpnSg0qSEVlsBEsJhajvGIzBIz2Ervk\nhz1F3pIwXDZNEFS5ywMrW55WgwKBgQC/dRym9V3g0Y6g2mjAqIANRZ605R3MZpst\nN5r9GFSBB/JXo22shLCA0/RL0A3Q8aGblVv9VwHVOi1qaeU8DIcQqJvdKfspIi0J\nL8mp3ZraGzknCEHkj0oKGqNCE2Nsfx+dQ6du+u7UOecb22pjqV2UeL6gMerAMf16\nX1ZTL7hevQKBgFyIVObd/9Euz+as4O4rXVEXaakjaMraJJ3a4ltKkzBSWgKqfWgr\njyMaWOrASrhjFc+krr7y4ya8cD1n1flMlQc5bbSPUFOz5W080oMuoTtP21J27pDf\nyiLVC0fG4mYiN3HcBe0c1tnq2R2poBenZQ101V16L7RwBOX2bP5vphXHAoGBALX1\nCncOqNr6rm/nQzkeqxxx9yR6v7g8J+xwdWdm0SEUOVjbJGeab9jwF7RZllfm3S1t\nZNC/+Sj6MqF45PkN+ut1IzStKltsdJrPhPxgdUQmLUoQSfd7yuURbellXc+GfbhL\nzPvnlkWyhhduj40KMLrjil/bMPzaRcogg31p0/KNAoGBAKNTzPgZSif0PGXPEvhK\nzEi5ojwvC9iOIKvmjgXLu+e0zAI27PiiryrfrpQW6CK7RpK9KO2lQ2NUdyOi0MVI\nkqMGPLzjVwBKtWMhIwvaZxFJBvCNIg6nE5RSKoXFSYKWqmLPp+2ydPLXGPgAzNL/\n/7+TBiy9OmEkqIbNmwzgiYgR\n-----END PRIVATE KEY-----\n",
  "client_email": "firebase-adminsdk-rvtdl@urop-telegram-chatbot.iam.gserviceaccount.com",
  "client_id": "108928779375842545414",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-rvtdl%40urop-telegram-chatbot.iam.gserviceaccount.com",
  "universe_domain": "googleapis.com"
}

This file represents the authetication key. Apparently, when accessing to APIs (such as the Firebase API), you will need to have a sort of, authentication key, which is what this file is to ensure that only authorized users can access the API. Refer to this video to understand how the Firebase API authentication key is used with your Python code: https://www.youtube.com/watch?v=s-Ga8c3toVY&t=336s (Code First with Hala)


4. 'requirements.txt' file

streamlit==1.27.2
streamlit_autorefresh==1.0.1
firebase_admin==6.2.0

This is a compulsory file, in accordance to the deployment of Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database in Streamlit Cloud as described in the documentation on how to deploy a Streamlit (Python Framework) Web Application on Streamlit Cloud (refer to the section below '4. Deployment Process of the Streamlit Web Application for the Telegram Chatbot integrated with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database on Streamlit Cloud' for more information on the deployment process of this Streamlit Web Application for the Telegram Chatbot integrated with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database on Streamlit Cloud): https://docs.streamlit.io/streamlit-community-cloud/deploy-your-app (Streamlit Cloud), which allows you to tell Streamlit (Python Framework) to download the necessary external libraries/framework/packages specified in this 'requirements.txt' file in the deployment environment that is required for the deployment of this Streamlit Web Application for the Telegram Chatbot integrated with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database.

Apparently, the 'requirements.txt' file is a common practice across various deployment platforms in Python, not just for Streamlit Cloud. Whether you are deploying your applications on platforms like Heroku, AWS, Vercel, or others, specifying dependencies in a 'requirements.txt' file allows the platform to understand and install the necessary packages.


5. 'streamlit_web_application.py' file
The main Python file for the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database itself.


Source(s):


2. Past iterations/versions/prototypes of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database

I have labelled the version of each of the file along with a brief description of the differences between the versions in the file names. Here is a slightly more elaborate description of the differences in versions:

  1. Figma website application prototype design: https://www.figma.com/community/file/1406323732296662518/telegram-chatbot-website-with-prompt-engineering-prototyping - the Figma prototype of the Streamlit website's design
  2. 'database_page_streamlit_website_v1.py' file and 'details_page_streamlit_website_v1.py' file - the zero-th version of the creating the two pages of the Streamlit website in seperate files
  3. 'combined_streamlit_website_v1_(using_MySQL_server)(local).py' file - the first version integrated with MySQL database
  4. 'combined_streamlit_website_v2_(using_Firebase)(cloud).py' file - the second version integrated with Firebase's Realtime Database
  5. 'combined_streamlit_website_v3_(using_Firebase)(cloud)(adding_feature_of_allowing_adding_of_assignments_in_database_page_and_fixing_bug_of_database_page_constantly_refreshing_and_some_minor_changes).py' file - the third version which added some minor features and fixing some bugs

Why did I choose Firebase's Realtime Database instead of MySQL databases?
With my recently learnt knowledge of MySQL, I wanted to try using MySQL databases in this project. However, I realised that many of the database hosting platforms such as Azure Database and Amazon Web Services require your billing information in order to start hosting MySQL databases on them. I did not want to take the risk of being overcharged as I will most likely not maintain my built application since I only created them for education purposes and not for production. Hence, I decided to use Firebase's Relational/NoSQL realtime database instead since it is the only database hosting platform that did not require billing information.


3. My learning journey of some of the required technology being used in this project that I was not familiar with

Due to my lack of knowledge in some of the required technology being used in the Streamlit Web Application for the Telegram Chatbot integrated with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database, I had to first learn them, which includes:

  • Prompt Engineering learn (from Prompt Engineering course by DeepLearning.AI in collaboration with OpenAI (using ChatGPT as the LLM))
  • Figma learn

  1. Prompt Engineering learn (from Prompt Engineering course by DeepLearning.AI in collaboration with OpenAI (using ChatGPT as the LLM))

    Consists of my learning journey of the Prompt Engineering paradigm (online course where I learnt the Prompt Engineering paradigm from: https://www.deeplearning.ai/short-courses/chatgpt-prompt-engineering-for-developers/ by DeepLearning.AI, in collaboration with OpenAI titled 'ChatGPT Prompt Engineering for Developers' (only up till the 7th video in the playlist)

    What is Prompt Engineering?
    Prompt Engineering is the process of writing/refining a generative AI prompt to improve its accuracy and effectiveness and obtain desired outputs from AI models.

    What are prompts?
    An AI (including Large Language Models (LLM)) prompt is a question, command, or statement that you input into an AI (including Large Language Models (LLM)) model to initiate a response or action, harnessing the power of Natural Language Processing (NLP).

    (Note: OpenAI GPT model API (Python Framework) requires monthly payment subscription: The codes in this tutorial require the OpenAI GPT model API (Python Framework) in order to obtain responses from ChatGPT. However, the OpenAI GPT model API (Python Framework) access requires monthly payment subscription. Hence, the codes in this folder will not be able to run, without the OpenAI GPT model API (Python Framework) access, which requires payment. You can do the monthly payment subscription to get the OpenAI GPT model API (Python Framework) access here: https://platform.openai.com/docs/overview (OpenAI Platform)

    Hence, most of the 'output' from the code in this tutorial will be the simulated output shown in the videos in this tutorial, written in Jupyter Notebook files)

    Source(s):


  1. Figma learn

    Consists of my learning journey of Figma (main Youtube playlist where I learnt the Prompt Engineering paradigm from: https://www.youtube.com/playlist?list=PLKId0A0XCIbUYx3c_NYn13W9Z_kkIiA2m by Aliena Cai, titled 'Figma UX Tutorial by Aliena' (only up till the 4th video in the playlist)

    What is Figma?
    Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. The feature set of Figma focuses on user interface (UI) and user experience (UX) design, with an emphasis on real-time collaboration, utilising a variety of vector graphics editor and prototyping tools.

    An important rule on Figma is that you should never start anything from scratch! Always remember to take from references, and copy from existing website templates to boost the quality and the creation time of the website prototype! (as advised from AJ&Smart's Youtube video)

    Source(s):


4. Deployment Process of the Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database on Streamlit Cloud My Skills

What is Streamlit Cloud?
From the official Streamlit Cloud website: 'Streamlit Cloud is a new product that lets you build, deploy, and share data from Streamlit Web Applications in minutes.'

Honestly, the documentation on how to deploy a Streamlit (Python Framework) Web Application on Streamlit Cloud (link: https://docs.streamlit.io/streamlit-community-cloud/deploy-your-app) explains very clearly step by step on how to deploy a Streamlit Web Application on Streamlit Cloud. Once deployed correctly, I got a direct 'streamlit.io' link to the Streamlit Web Application, which I can then share with others to try out this Streamlit Web Application.


Handling sensitive information as 'secrets'/environment variables on Streamlit Cloud:
When I tried to push the Firebase Realtime Database's private keys or the Chatbase custom GPT LLM model API private key onto this Github repository directly, I kept getting a security warning that my 'secrets' is exposed from Github. I did not care about it at first, but it became an issue when Firebase Realtime Database's private keys keeps resetting and gets cancelled whenever the private key is detected to be exposed publicly, causing the deployed Streamlit website application to stop working, and I had to re-generate new unique private keys from the Firebase website again which is very troublesome and the same issue will occur if I try to push the Firebase Realtime Database's private keys onto this Github repository again.

Hence, I found out that various deployment platforms, not just for Streamlit Cloud, whether you are deploying your applications on platforms like Heroku, AWS, Vercel, or others, you can add 'secrets'/environment variables directly on the deployed applications on the deployment platforms themselves privately, thus eliminating this security risk of the 'secrets' information being exposed on Github.

Specifically for the Streamlit Cloud, you can add 'secrets'/environment variables directly on the deployed applications on Streamlit Cloud and learn how to use these added 'secrets'/environment variables on the deployed applications on Streamlit Cloud in code by following this documentation (link: https://blog.streamlit.io/secrets-in-sharing-apps/).

Here is an example of how I did it in this Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase (API)'s Realtime Database on Streamlit Cloud:

fb_credentials = json.loads(st.secrets['FIREBASE_DB_CONVERSATIONS'])


if "conversations" not in firebase_admin._apps:
    # Initialize Firebase
    credentials_object_conversations = firebase_admin.credentials.Certificate(fb_credentials)
    firebase_admin.initialize_app(credentials_object_conversations, {
        'databaseURL': 'https://urop-telegram-chatbot-default-rtdb.asia-southeast1.firebasedatabase.app/'
    }, name='conversations')

# Get a reference to the database
reference_to_database_conversations = db.reference('/', app=firebase_admin.get_app('conversations'))

Source(s):

About

UROP: Telegram chatbot for novice programmers to learn coding. The deployed Streamlit Web Application for the Telegram Chatbot with Chatbase custom GPT LLM model API and Firebase, using Figma for prototyping of the web application.

uzkgcu6dkiqhyappnhnx5c9.streamlit.app/

Topics

python firebase deployed figma streamlit prompt-engineering streamlit-cloud

Resources

Readme

License

MIT license
Activity

Stars

3 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages