CodeDelphiDelphiFMXLearn PythonProjectsPythonPython GUI

How To Use LangChain and DelphiFMX To Create a Custom Chat App

How To Use LangChain and DelphiFMX To Create a Custom Chat App

These days there is a lot of discussion about deep-learning chatbots such as ChatGPT. There are packages like LangChain which make consuming these models easier. This tutorial will guide you through a project combining LangChain and DelphiFMX‘s innovative capabilities to craft a unique and personalized custom chat app. So, let’s get started!

What is Langchain?

How To Use LangChain and DelphiFMX To Create a Custom Chat App

LangChain is a framework for creating language model-driven applications. Language models are artificial intelligence programs that can produce text in natural language in response to inputs like questions, prompts, or documents. With LangChain, you can link a language model to additional data sources like files, databases, or web pages and communicate with them using natural language. Using different components and APIs offered by LangChain, you may also alter how the language model and application behave. With LangChain, you may create various apps, such as chatbots, code generators, document summarization tools, and more.

How to build a custom chat app with  LangChain and DelphiFMX?

How To Use LangChain and DelphiFMX To Create a Custom Chat App

In this article, we intend to go over the basics of LangChain in Python and use Openai’s LLM model to create a chat app that considers the user’s age and gives answers according to this information. So the GUI will involve two screens. Some user data is taken on the first screen, while the second screen is the chat screen with widgets like a memo, button, and textbox.

What are the prerequisites of the custom chat app project?

To create the custom chat application, you should install the Delphi IDE, the Delphi4PythonExporter tool, and the DelphiFMX library on your device. Additionally, you will need a text editor or IDE that supports Python, such as PyScripter. If you don’t have these tools installed, we recommend checking out the article “Powerful Python GUI Project Setup” to help you get started. 

Next, install Langchain and OpenAI by using the following command:

Lastly, you can get the complete code for this project from our GitHub repository:

https://github.com/Embarcadero/PythonBlogExamples/tree/main/Custom_Chat_App

How to use a prompt template in LangChain?

You might be asking yourself, what are Prompt Templates? Why should we use them in Chatbots? In simple words, Prompt Templates are pre-defined recipes that help generate prompts for language models. These templates may include certain instructions, some examples to help the chatbot, or even specific contexts and/or questions to help the chatbot with a certain task.

Take, for example, ChatGPT. If you ask ChatGPT, “What is the definition of a Machine Learning model?” It might give you an in-depth and detailed answer. A prompt will help give ChatGPT instructions on how the user might want the question answered. For example, A prompt may append text to a query to modify the model’s output like the query above may change into “What is the definition of a Machine Learning model? Explain it to me like a 5-year-old.” This will change the answer, and the model may reduce complex words to make it easy for the user to understand.

LangChain, as a framework, provides many tools to create and work with prompt templates. Let’s start by creating a simple prompt template that helps our OpenAI chatbot. Start by creating a new file called LLMChat.py in your project directory and start importing some modules:

Next, create an LLM class with an __init__ and a getReply method:

Start by initializing your name and age variables in the __init__ function and create an LLM model, a template for queries, and a ConversationBufferMemory to help store your previous conversations. You need to create your OpenAI api key and replace your key in the openai_api_key variable’s value:

Finally, we chain all the components using an LLMChain, completing our __init__ function:

Next, navigate to the getReply method and simply use the model to generate a response to a question and then return the response. Here is what our complete LLMChat.py looks like:

How to design the user interface for our custom chat app in Delphi?

Now that our LangChain model is complete, we can start working on the user interface for our Delphi app.

Open up Delphi CE and create a new project using File > New > Multi-Device Application > Blank Application > Ok. Next, set up a name for the project. Here we are naming our project ChatApplication.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

If you are unfamiliar with the various sections of the Delphi IDE, we recommend consulting our complimentary eBook bundle, which covers the Delphi Python Ecosystem and provides insights into all Python GUI offerings.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Next, let’s rename our form by right-clicking on it and selecting QuickEdit. Here we will set our form name as BioScreen with the caption Chat Application.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Next, we’ll rename the project’s source file to help us keep track of it. Head over to the Projects tab on the top-right corner of your screen and locate Unit1.pas file. This is the source file of your form. We will rename it to Bio.pas.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Next, we’ll use the head to the Object Inspector and resize our form using the ClientWidth and ClientHeight properties under the Properties tab.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now, we’ll add a few labels to our form. Head over to the Palette and search for the TLabel component. Drop a few of these into your form.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Rename these components by right-clicking on them and opening up QuickEdit. Next, head over to the Object Inspector and customize the text style for each label using the TextSettings property based on your needs. You could additionally set the HorzAlign and VertAlign properties to Center to align your text. Here is what our form looks like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now, we’ll add a text box next to the Name label and a number box next to the Age label. Open up the Palette and search for the TEdit and TNumberBox components. As the name implies, the TEdit component will be used to input text to our form, whereas the TNumberBox will be used to input the age. Here is what our form looks like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Next, let’s add a button to our form, which will be used to open up the chat screen. For this, we will use the TButton component, so navigate to the Palette and search for the component.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Next, modify the button using its Text Settings property. Finally, rename the button and set its caption. Here we’ve named our button StartButton with the caption Start Chatting.

Here is what our form looks like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Finally, let’s finish our form by adding an image. Head over to the Palette and search for the TImage component. Add this component to your form.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now select the TImage component and open the MultiResBitMap property in the Properties tab of the Object Inspector. Next, click the open button and select the image you want to use.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Here is what our form looks like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now that our BioScreen form is complete, we can move on and create our chat screen. Head over to the projects tab, and after right-clicking on ChatApplication.exe, select Add New > Multi-Device Form.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

This will create a new form which we have named as ChatScreen, and the corresponding source file as Chat.pas. We have also renamed the form caption to Chat.

Next, let’s add a THeader and a TFooter component to our form. We also add a few labels, buttons, and an edit box to our form. Here is what our form looks like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Finally, we need to add a text box to display our chats. For this, we’ll add a TMemo component that will be large enough to display all our messages and have a scroll to move up and down in the chat. Here is what our final form looks like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now that we’ve completed our forms, it’s time to add a few final touches. To do this, download the free ebook bundle, which comes shipped with a multitude of styles that you can choose from. Once downloaded, extract the FMX styles zip. Next, select the style you want to use. Here we will be using AquaGraphite.style available in the bundle.

Now, head to the Palette and add a TStyleBook component to your form. The placement does not matter for this component, as it will be invisible.

How To Use LangChain and DelphiFMX To Create a Custom Chat App
How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now, double-click on the StyleBook1 component to open up your Style Designer. Click on the open button to open up a dialog box.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now navigate to the Dark.style file in your styles directory, select your file and click exit and save.

Select your form and head over to the Object Inspector. Here search for the StyleBook property. Now, select the drop-down menu and select StyleBook1. This will add style to your form.

Here is what our final forms look like:

How To Use LangChain and DelphiFMX To Create a Custom Chat App
How To Use LangChain and DelphiFMX To Create a Custom Chat App

How to combine everything into our finished custom chat app? 

Now that our forms are complete, we need to add some functionality to the button so we don’t lose it when we export it in Python. To do this, double-click on each button on the forms. This will add an OnClick method to that button, creating a procedure in the .pas file of the form. This allows you to add unique functionality to each button when clicked.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Because the Delphi4PythonExporter does not use run-time implementation, we must add at least one comment (//) to each procedure to preserve the function when we export the form.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

With this, we are ready to export our project. Select Tools > Export To Python > Export Current Entire Project to export the project.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Here we will give the project the title Chat Application. Next, select the directory of your choosing and click on Export:

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Once the export is complete, head over to the project directory. Delphi will generate three Python files and two .pyfmx files. The ChatApplication.py file will be used to run the application, whereas the Bio.py and Chat.py files contain the class for the BioScreen and ChatScreen forms. The .pyfmx files contain the visual information for the forms. Here are the contents for each file.

ChatApplication.py:

Bio.py:

Chat.py:

Now, let’s begin adding functionality to our code. Start by copying and pasting the LLMChat.py file that we created earlier to the project folder. Next, open up Bio.py and import the ChatScreen form from Chat.py:

Next, head over to the StartButtonClick function. Here we are simply going to create the ChatScreen, pass in our name and age variables, and then open up the screen. Here is what the StartButtonClick function looks like:

Here is what our final Bio.py file looks like:

Next, open up Chat.py and start by importing the LLM class from the LLMChat.py file. 

Now head over to the __init__ function and start by adding some additional name and age parameters to the function. Next, we’ll re-initialize the HeaderLabel with the name of our user and store the name and age in new variables. Finally, we’ll create an instance of our LLM class in the constructor. Here is what our __init__ function looks like:

Next, in our SendButtonClick function, we’ll simply add a formatted user query to the ChatMemo. Once we get a reply from the LLM model, we will append that to the ChatMemo too. Here is what our final function looks like:

Finally, our BackButtonClick will only be used to close the chat screen, which we can simply do using self.Destroy(). Here is what our final Chat.py file looks like:

Now that our application is ready let’s test it out. Head over to ChatApplication.py and run the file.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Next, add your name and age and click on Start Chatting.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

This should open up your chat screen.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

Now simply start messaging on the chat app.

How To Use LangChain and DelphiFMX To Create a Custom Chat App

What have you learned in this custom chat app tutorial?

How To Use LangChain and DelphiFMX To Create a Custom Chat App

In today’s world of advanced communication, we’re talking about smart chatbots like ChatGPT and tools like LangChain that make them work better together. This tutorial has shown us how LangChain, DelphiFMX, and Python can be paired to make a custom chat app with an amazing GUI.

LangChain is like the main character, letting computers talk like humans using trained language models. With this magic, we’re making a chat app that talks in a smart way, depending on how old you are. We saw how Delphi allows us to add more personalization by adding the user’s name in several places of the GUI. This tutorial shows how exciting things can happen when smart tech and good GUIs come together, inviting us to change how we talk and connect using computers.

Ready to get creative? Dive into the world of DelphiFMX and start crafting your own unique apps today. Download Delphi and unleash your imagination!

What are some FAQs related to this custom chat app tutorial?

How To Use LangChain and DelphiFMX To Create a Custom Chat App

What is LangChain, and how does it relate to chat applications?

LangChain is a framework that uses language models to create text-based applications. In the context of chat apps, LangChain enables the creation of chatbots and other communication tools that understand and generate natural language responses.

Do I need to be an expert in machine learning to use LangChain?

LangChain is designed to simplify the process of using language models for developers. While some familiarity with machine learning concepts could be helpful, the framework aims to make it accessible to a wider range of developers.

What is DelphiFMX, and why is it used in this tutorial?

DelphiFMX is a graphical user interface framework that allows developers to create cross-platform applications with rich UI experiences. It’s used in this tutorial to design the user interface for the chat app.

Do I need prior experience with Delphi to follow this tutorial?

While prior experience with Delphi could be beneficial, the tutorial should provide step-by-step guidance to help you create the chat app, even if you’re new to Delphi programming.

Related posts
CodeIDELearn PythonPythonPython GUITkinter

How To Make More Than 20 ChatGPT Prompts Work With Python GUI Builders And Matplotlib Library?

CodeIDELearn PythonPythonPython GUITkinter

How To Make More Than 20 ChatGPT Prompts Work With Python GUI Builders And Pillow Library?

CodeDelphiDelphiFMXLearn PythonProjectsPythonPython GUI

How To Create A Weather App With The Python Delphi Ecosystem and Weatherstack API

CodeDelphiDelphiFMXLearn PythonProjectsPythonPython GUI

How To Create A Music Player With The Python Delphi Ecosystem

Leave a Reply

Your email address will not be published. Required fields are marked *