CodeDelphiFMXProjectsPythonPython GUI

How To Create a K-Means Clustering Visualization App Using DelphiFMX

How To Create a K Means Clustering Visualization App Using DelphiFMX

In this tutorial, we will explore the powerful capabilities of DelphiFMX and delve into the fascinating realm of K-means clustering visualization. Imagine easily analyzing and visualizing data patterns, empowering users to gain valuable insights and make data-driven decisions. Join us on this exciting journey as we build a K-means clustering visualization app using DelphiFMX, leveraging its robust features and seamless integration with the K-means algorithm.

What is Unsupervised Learning and When is it Useful?

How To Create a K Means Clustering Visualization App Using DelphiFMX a close up of a screen showing some code

Unsupervised learning is a type of machine learning where the model learns patterns and structures from unlabeled data without any predefined target variable. In unsupervised learning, the goal is to discover the underlying structure or relationships within the data. Unlike supervised learning, where the model is trained on labeled data with known outputs, unsupervised learning algorithms work on unannotated data. These algorithms aim to find hidden patterns, clusters, or associations within the data.

For instance, unsupervised learning algorithms can help understand the data by identifying patterns, outliers, and relationships between variables. This exploratory analysis can provide insights into the dataset before further analysis or modeling.

Clustering algorithms, such as K-means, DBSCAN, or hierarchical clustering, group similar data points together based on their features or distances. It is valuable for customer segmentation, market research, image segmentation, and anomaly detection. More applications include dimensionality reduction, feature extraction, and anomaly detection.

Which Tools Can Be Used For Creating GUIs for AI-Related Apps?

How To Create a K Means Clustering Visualization App Using DelphiFMX the download pages

We will leverage DelphiFMX’s powerful components and functionality to create our K-means clustering visualization app. We will design an intuitive user interface that allows users to interact with the app and input their data. The app will then perform the K-means clustering algorithm on the provided data and visualize the resulting clusters using dynamic charts and visual elements.

Creating visualization apps can be thrilling and rewarding, especially with the right tools. Delphi FMX offers a rich ecosystem that simplifies and accelerates the development process, making it an excellent choice for creating a K-means clustering visualization app. By combining the power of Delphi FMX’s GUI development tools (such as Delphi IDE and Delphi4PythonExporter) and its seamless integration capabilities, we can unlock the full potential of the K-means algorithm and provide users with an intuitive and interactive visualization experience.

How to Create a K-Means Clustering Desktop App With a Stunning GUI?

How To Create a K Means Clustering Visualization App Using DelphiFMX a person looking at the IDE welcome page

What Libraries and Software Do You Need for this Tutorial?

To implement the code that utilizes the Python libraries Pillow, NumPy, OpenCV (cv2), and scikit-learn (sklearn), you need to set up some prerequisites. Firstly, ensure that you have installed Delphi Software. These tools will enable you to create the K-means app with a visually appealing user interface. Additionally, make sure to have the Delphi4PythonExporter tool installed, as it facilitates seamless integration between Delphi and Python. 

You will need a text editor or integrated development environment (IDE) that supports Python programming. We recommend using PyScripter, which provides a convenient environment for editing and executing Python code within Delphi. If you don’t have these tools installed, we recommend checking out the article “Powerful Python GUI Project Setup” to help you get started.

Lastly, to run the code successfully, install the necessary Python libraries. Execute the following commands in the command prompt or terminal:

You can access the complete code for this tutorial from our GitHub repository. Simply visit the following link to obtain the code and related resources:

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

How to Create the Back-End by Implementing K-Means With SKlearn?

Once you’ve installed the necessary libraries, we are now ready to create our own K-Means class. Start by creating a new file called KMeans.py in your project directory, import the cv2 library, and import KMeans from sklearn.

Now create a class called KMeansClustering with three functions, init, load_image, and apply:

First, let’s start by defining the init function. Head over to the function and initialize the function with an additional parameter called K. This will define the number of clusters to make in an image. Next, we will define some new variables. The self.K variable will be used to define the number of clusters, whereas self.image will be used to store our image. Here is what our init function looks like:

Next, for the load_image function, all we need to do is load an image file from the system. To do this, we will define an additional parameter called filename and then use the .imread() method to load the image file. Here is what our load_image function looks like:

Finally, let’s define our apply function. We will start by converting the image in the self.image variable from the BGR color space to the RGB color space. Next, we will reshape our image to produce a 2D array of pixels:

Once we’ve finished reformatting our image, we will apply the KMeans clustering algorithm and assign cluster labels to each pixel to create a segmented image. Finally, we will return the newly generated image. Here is what our apply function looks like:

Here is what our KMeans.py file looks like:

How to Create a Stunning GUI For the App?

Now that the backend of our app is ready, we can utilize the Delphi ecosystem to create a very attractive GUI for such an ML task.
Start by opening the Delphi CE application and creating a blank project by navigating to File > New > Multi-Device Application > Blank Application > Ok. In this tutorial, we have named our project KMeansClustering.

How To Create a K Means Clustering Visualization App Using DelphiFMX creating a new multi device applications

If you are not familiar with the various sections of the Delphi IDE, we recommend referring to our free eBook bundle, which covers the Delphi Python EcoSystem and all Python GUI offerings.

How To Create a K Means Clustering Visualization App Using DelphiFMX the ebook

Let’s start by giving the form a name. Right-click on the form and select QuickEdit. Here, we will name our form MainForm with the caption KMeansClustering App.

How To Create a K Means Clustering Visualization App Using DelphiFMX reaming the main form

Next, rename the source file of our MainForm to Main.pas. This will help us keep track of our project files. Now, let’s resize the form. So go to the Object Inspector and search for ClientWidth and ClientHeight in the properties tab. We will set them to 480 and 640, respectively.

Now, let’s add a title to our app. Navigate to the standard palette and locate the TLabel component. Drag and drop this component onto the form.

How To Create a K Means Clustering Visualization App Using DelphiFMX selecting a TLabel

Next, right-click on the label and set the Name as Title with the Text as KMeansClustering App.

How To Create a K Means Clustering Visualization App Using DelphiFMX dropping the label on the form

We will now modify the text style by using the TextSettings property of the label. We will do this by navigating to the Object Inspector and searching for TextSettings. Now, click on the ellipses button (...) next to the Font property to see options for modifying the label based on your preferences. Like our other projects, we will set our font family as SemiBold Segoe UI. In addition, we will set the HorzAlign and VertAlign properties for our labels as Center.

How To Create a K Means Clustering Visualization App Using DelphiFMX changing the alignment on the form

Here is what our form looks like:

How To Create a K Means Clustering Visualization App Using DelphiFMX the app in preview

Next, we will add a text field to allow the user to specify the number of clusters for the algorithm. So, head over to the Palette and search for the TEdit component. Drag and drop this component into our form. Next, right-click on the component and Name it as KValue.

Here is what our form looks like:

How To Create a K Means Clustering Visualization App Using DelphiFMX running the app

Next, let’s add a few buttons to our form. For this, we will use the TButton component, so navigate to the Palette and search for the component.

How To Create a K Means Clustering Visualization App Using DelphiFMX selecting a button from the palette

We will add two buttons, UploadButton, to help us select the file, and an ApplyButton, to help us apply the algorithm to our image.

How To Create a K Means Clustering Visualization App Using DelphiFMX main form preview

Now, we will add a TOpenDialog component, which will help us open a dialog box to select a file from our system. Open up the Palette and search for the component. Next, drag and drop this component anywhere into your form. The placement does not matter, as this component will be invisible.

How To Create a K Means Clustering Visualization App Using DelphiFMX the open dialog

Finally, let’s complete our form by adding image holders for our before and after Images. Head over to the Palette and search for the TImage component. Add this component to your form.

How To Create a K Means Clustering Visualization App Using DelphiFMX TImage

Next, right-click on each component to define its name. Here we will set the left image as BeforeImage and the right image as AfterImage.

How To Create a K Means Clustering Visualization App Using DelphiFMX 1

Now that our form is ready, let’s add a few final touches by adding style. To do this, you will need to download the free ebook bundle, which comes shipped with a multitude of styles that you can choose from. 

Start by downloading your free ebook and extracting the FMX styles zip in the directory of your choosing. Next, select the style you want to use. Here we will be using AquaGraphite.style available in the bundle.

To use this style, head to the Palette and add the TStyleBook component to your form. Again, the placement does not matter for this component.

How To Create a K Means Clustering Visualization App Using DelphiFMX creating a style book
How To Create a K Means Clustering Visualization App Using DelphiFMX the app 2

Double-click on the StyleBook1 component to open up your Style Designer. Next, click on the open button to open up a dialog box.

How To Create a K Means Clustering Visualization App Using DelphiFMX the style designer

Now navigate to the .style file of your choosing in the dialog box, select your file, and finally click on exit. 

Once you’ve finalized your style, select the MainForm and head to the Object Inspector. Here we will search for the StyleBook property. Select the drop-down menu and select StyleBook1.

How To Create a K Means Clustering Visualization App Using DelphiFMX stylebook

Here is what our final form looks like:

How To Create a K Means Clustering Visualization App Using DelphiFMX the styled app

How to Export These Forms to Python Code?

Now that our project is complete, we only need to export it using the Delphi4Python exporter. However, exporting right now will cause the Upload and Apply buttons to lose their function. Therefore, we will need to add some functionality to each button in the form. 

To do this, double-click on each button on the form. This will add an OnClick method to that button. The procedure will be created in the .pas file of the form. This allows you to add unique functionality to each button when clicked.

How To Create a K Means Clustering Visualization App Using DelphiFMX code

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 Create a K Means Clustering Visualization App Using DelphiFMX commenting out the button click code

Now that our form is ready, we are ready to export. Select Tools > Export To Python > Export Current Entire Project to export the project.

How To Create a K Means Clustering Visualization App Using DelphiFMX exporting the app to Python

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

How To Create a K Means Clustering Visualization App Using DelphiFMX exporting the project

Because we had one form, Delphi will generate two Python files and one .pyfmx file. The KMeansClustering.py file will be used to run the application, whereas the Main.py file contains the class for the MainForm. The Main.pyfmx file contains the visual information for the MainForm. Here are the contents for each file.

KMeansClustering.py:

Main.py:

How to Put it All Together Into a Fully Functional App? 

Now that we have exported our project, all we need to do is bring it all together. Let’s start by opening up Main.py in the text editor of your choice and importing some libraries:

Next, let’s complete our UploadButton. Head over to the UploadButtonClick function and start by opening the file picker dialog box and filtering the files to show only the image files. Once the user selects the image, use the .Bitmap.LoadFromFile() method to display it in the BeforeImage placeholder. Our final UploadButtonClick function looks like:

Next, let’s define our ApplyButtonClick function. Start by creating an instance of our KMeansClustering class and initialize it with the K value from the KValue edit box. Next, load the image using the load_image method and apply the Kmeans clustering algorithm:

Now, simply convert the segmented image to a PIL Image and save the image in the same directory as the before image. Finally, show the image in the AfterImage placeholder. Here is what our ApplyButtonClick function looks like:

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

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

How To Create a K Means Clustering Visualization App Using DelphiFMX app 3

Let’s first define the KValue as 3. Next, press the Upload button. This will open up a dialog box for your to select an image. Navigate to the directory of your image and open your image. Here we will be using a free stock image from Unsplash:

How To Create a K Means Clustering Visualization App Using DelphiFMX example image
<em>Source <em><a href=httpsimagesunsplashcomphoto 1600716051809 e997e11a5d52ixlib=rb 403ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA3D3Dauto=formatfit=cropw=850q=80><em>httpsimagesunsplashcomphoto 1600716051809 e997e11a5d52ixlib=rb 403ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA3D3Dauto=formatfit=cropw=850q=80<em><a>

Once you’ve selected your image, it should appear on the BeforeImage placeholder:

How To Create a K Means Clustering Visualization App Using DelphiFMX the running app

Now press the Apply button to evaluate your image. Your result image should appear in the AfterImage placeholder:

How To Create a K Means Clustering Visualization App Using DelphiFMX running app 2

Your file should also be saved in the same directory as your image:

How To Create a K Means Clustering Visualization App Using DelphiFMX running app 3

Are You Ready to Create More Amazing GUIs With Delphi FMX?

How To Create a K Means Clustering Visualization App Using DelphiFMX a man holding a laptop and smiling at the display

In this tutorial, we have embarked on an exciting journey of creating a K-means clustering visualization app using Delphi FMX. We have explored the powerful capabilities of Delphi FMX and its seamless integration with the K-means algorithm, enabling us to develop an intuitive and interactive app. By empowering users with the ability to visualize and analyze their data, we can unlock valuable insights and make data-driven decisions. 

Download Delphi and start your journey into the world of K-means clustering visualization with Delphi FMX and transform how you analyze and understand data.

What Are the Top FAQs Related to this Tutorial?

How To Create a K Means Clustering Visualization App Using DelphiFMX an image of a person with a laptop Their web browser is looking at the FAQ page

What is K-means clustering?

K-means clustering is an unsupervised machine learning algorithm that groups similar data points into clusters based on their feature similarity. It aims to minimize the sum of squared distances between the data points and their cluster centroids.

Why use Delphi for building a K-means clustering app?

Delphi is a powerful development platform that provides a rich ecosystem and GUI framework, such as FireMonkey (FMX), for creating visually appealing and interactive applications. It seamlessly integrates with Python, enabling you to leverage Python’s machine learning libraries and algorithms.

What is Delphi FMX?

Delphi FMX (FireMonkey) is a cross-platform GUI framework provided by Delphi. It allows you to develop visually stunning user interfaces with a single codebase that can run on multiple platforms, including Windows, macOS, iOS, and Android.

How can I integrate the K-means algorithm with Delphi FMX?

Delphi FMX integrates with Python through tools like the Delphi4PythonExporter, allowing you to write and execute Python code within your Delphi application. You can use Python’s scikit-learn library to implement the K-means algorithm and leverage its clustering capabilities.

Are there any specific data requirements for K-means clustering?

K-means clustering works with numerical data and requires a predefined number of clusters (K). Ensure your data is suitable for clustering by preprocessing it and selecting an appropriate value for K based on your specific application and dataset.

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 *