DEV Community: Terrence Aluda

Chatbot personalization: How to build a chatbot that uses memory to create a better user experience

Terrence Aluda — Mon, 02 Mar 2026 09:47:54 +0000

Even in this AI era, user experience (UX) is vital for applications to have. UX is key to ensuring that your users are interacting with your product comfortably. That means whatever you are building must not be irritating to your users.

The benefits of a good UX are quite a number, such that talking about them deeply requires an article of its own. One of those benefits is a lower churn rate. A reduced churn rate implies that there will be fewer uninstalls after installs, fewer users exiting
your site without fully utilizing it, or fewer force-closures of your apps. Such actions from your users are bad for business, and that's why this article was written to talk about one specific way to improve chatbots' user experience.

With the present Large Language Memory (LLM) wrappers, creating chatbots can be as easy as importing a few packages/libraries and writing a few lines of code. One way of differentiating your chatbot from the rest is through personalizing it by making it memorize conversations reliably. This type of chatbot personalization improves UX by enabling tailored, flowing, and more human-like conversations.
Chatbot personalization through memorization will be explored more later on.

Since this is a hands-on article, it's important to check what you need in the prerequisites section below.

Prerequisites

You will need:

Python installed in your working environment.
Basic Python knowledge.
A mem0 account. The hobby plan is sufficient to follow through.
A Gemini API key. We will be using Gemini as our conversational AI provider.
Basics in Artificial Intelligence, specifically conversational AI.

What is personalization?

In software development terms, personalization is the practice of tuning or setting an application's way of working to fit a certain experience instead of having a one-size-fits-all general behavior. For chatbots, personalizing makes them adjust their conversation manner based on how a user converses and what they converse
about. Consider the following user prompt: "Do you have any army paths you'd advise me to pursue?"

Without personalization, the chatbot could respond with something like, "You can follow the Navy, the Air Force, or the Army."
With personalization, the bot's response could be, "Since you’ve previously shown interest in aircraft, I would advise you to join the Air Force."

One way to achieve that is by making the chatbot retain the conversation history and extract the appropriate contexts to be used for the next conversations.

What is AI memory?

AI memory is simply a software layer that captures context information from a running AI system and stores it so it can be used for future operations. This retention enables an AI system to give better output during the next interactions.

In chatbots, AI memory stores conversation history and feeds the history to the chatbot in subsequent replies and new sessions. At this point, you may be wondering, “Doesn’t this add larger and heavier context to the chatbot?” or “How is this different from manually feeding context each time?” To answer that, a well-designed AI memory layer should only pick out the relevant context from the stored memory to feed it to the chatbot instead of blindly reusing all the stored data.

With that said, the AI memory layer should also be intelligent for it to be capable of filtering, ranking, and recalling useful context. That may look complicated, moreso if you are thinking of building it from scratch. This is why you need a robust and optimized solution like mem0.

NOTE: The rest of the article will be using the terms AI memory, memory, memory layer, and AI memory layer interchangeably.

What is mem0?

mem0 is an intelligent AI memory layer that is designed to improve over time as it is fed with more memories. All the heavy-lifting is done for you, so you don't have to worry about creating and maintaining your own memory layer. At a high-level, mem0 works by storing meaningful memory efficiently, retrieving only relevant context from the stored memory, and updating the memory over time.

It comes in three flavours:

1. mem0 Platform

This provides a hosted, fully managed, ready-to-use memory solution for those who want a plug-and-play experience free of the infrastructure management hassle.

2. mem0 Open Source

This is a self-hosted memory layer that gives you full control over implementation, customization, and general management.

3. OpenMemory

OpenMemory is a framework designed to work across multiple AI systems and tools and is fit for those looking to port AI memory between different platforms and build interoperable AI experiences.

Why mem0?

Some of mem0's features that make it worth include:

Memory filters, which allow you to retrieve memories based on the criteria you set.
Entity-Scoped memory that maps memory to the fields (entities) you set. Think of it as a key–value mapping, where entities act as keys and memories as values.
Async memory operations for supporting non‑blocking requests so your chatbot remains responsive.
Media support for extracting key information from images and documents in your chatbot's conversations.
Custom categories for tagging memories using labels specific to your teams or organisations
Graph memory that creates relationships between entities, building interconnected memories for more accurate contexts.
Retrieval quality boosters such as rerankers, custom instructions, and keyword searches to improve the relevance and ordering of memory results.
Memory exports and imports to allow reusing of memories.
A Model Client Protocol (MCP) for any AI tool to consume its memory features, allowing for universal integration and interoperability.
Prebuilt integrations and SDKs for ease of setup.

Having touched on why memory matters and mem0's role in it, the next step is to see it in action in a real chatbot setup.

Building the chatbot

In this section, you will be building a simple demo therapy chatbot named wellness0. It will be terminal-based, so its functioning will be built on a Read-Evaluate-Print-Loop (REPL) pattern. Once running, it will be waiting for the user input, capture it, process it, and display the output from the chatbot in a repeating cycle.

This section is divided into two parts:

Building the chatbot without memorization
Adding memorization to the chatbot

As the naming suggests, in the first section, we will build wellness0 without the memory feature and check its functioning. The second section covers the AI memory layer addition using mem0.

Building the chatbot without memorization

The tree structure of the project is shown below:

.
├── chatbot.py
├── .env
└── main.py

Creating the files

Start by creating the directory and the files by running the command below in your terminal:

mkdir mem0ry_chatbot && cd mem0ry_chatbot && touch chatbot.py main.py .env

main.py will be used to create the REPL functionality, while chatbot.py will house the Gemini calling logic. To store your API keys, you will use the .env file.

Creating a virtual environment

Proceed to create a virtual environment for easy dependency management.

python -m venv venv
source venv/bin/activate

Installing the dependencies

Install the dependencies for Gemini AI (google-genai) and loading environment variables (python-dotenv) using:

pip install google-genai python-dotenv

Setting the Gemini API key

Set your Gemini API key by opening the .env file and pasting the following variable into it:

GEMINI_API_KEY=<your-key>

Copy your API key and replace <your-key> like so:

GEMINI_API_KEY=AIxxxxxxxxxxxxxxxxxxxxxx

Calling the Gemini API

Open the chatbot.py and paste the following contents into it:

from google import genai
from dotenv import load_dotenv
import os

load_dotenv()
GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
client = genai.Client(api_key=GEMINI_API_KEY)

def capture_and_process_input(user_input: str):
    context = "Imagine you are a virtual therapist to this user."
    user_input = f"{user_input}\n\n Context: {context}"
    try:
        response = client.models.generate_content(
            model="gemini-3-flash-preview",
            contents=user_input
        )
        return response.text
    except Exception as e:
        return f"Error: {e}"

The script begins by importing the necessary packages, loading the environment variables, and initializing Gemini.
It then defines a function (capture_and_process_input) that accepts one parameter. The parameter is the user input captured from the terminal.
Inside the function, a context is appended to the user input, instructing Gemini to imagine it's the user's virtual therapist. The Gemini client's
generate_content function is called while passing in the model to be used and the user input to the model and contents parameters, respectively. You can get models available in the Gemini API documentation.
The response is then returned as a string. The text function returns then concatenation of all text parts in the response
The try-except block is helpful in handling exceptions

Capturing the user input (REPL)

The main.py will be used for this. Paste the contents below into the file.

from chatbot import capture_and_process_input

def repl():
    print("--------------------------------\nYour virtual therapist is ready!\n\nType how you're feeling.\nNo rush. No judgement.\n\nType 'exit' or press CTRL + C to close.\n--------------------------------")

    try:
        while True:
            user_input = input("$ wellness0> ")
            if user_input.lower() == "exit":
                print("\nBYE!\n----------------------------------------------")
                break

            try:
                response = capture_and_process_input(user_input)
                print(f"{response}\n")
            except Exception as e:
                print("Error:", e)
    except KeyboardInterrupt:
        print("\nBYE!\n----------------------------------------------")

if __name__ == '__main__':
    repl()

It starts by importing the capture_and_process_input function from the chatbot script discussed.
A function called repl is defined. The print statements with hard-coded string literals are used to display a greeting message to the user and prettify the output.
The while loop runs recursively until the user either types 'exit' or clicks the CTRL + C key combination.
Inside the try-except block, a request is sent to Gemini by calling the capture_and_process_input method while passing in the user's typed input.

Running the chatbot

You can try out your chatbot by running the command below in your terminal:

python main.py

You should see something like:

--------------------------------
Your virtual therapist is ready!
Type how you're feeling.
No rush. No judgement.
Type 'exit' or press CTRL + C to close.
--------------------------------
$ wellness0>

Type in a message describing a past experience, for example, "I am a war veteran, and I was deployed in Afghanistan. Oh my, I still have PTSD from that experience. I keep having flashbacks and nightmares."

It will print out some information about counselling.
Proceed to ask it a question like, "Do you know of any physical therapy centers in the US?"

Finally, test the contextual memory by feeding this: "Thanks. Do you remember my war story? The country?" It will print out something like:

I don’t have a memory of our past conversations once a session is closed, so I don't currently know the name of the country or the details of your story.
However, I would love to hear about it again! If you give me a quick reminder—the name of the country, the setting, or even just a few characters—we can pick up right where you left off.

**What was the country called?*

Such a response can be very frustrating for your users. The chatbot displays that because it doesn't have the context of the conversation. Let's get rid of this by adding a memory layer to it.

Adding AI memory to the chatbot

To set things off, you will need to get a primer on how mem0 adds memories. We will infer from the API reference docs. To add a memory, you will use the add memories endpoint: POST /v1/memories/.

The endpoint's request body needs something like:

{
"user_id": "alice",
"messages": [
    {"role": "user", "content": "<user-message>"},
    {"role": "assistant", "content": "<assistant-response>"}
    {"role": "user", "content": "<user-message>"},
    {"role": "assistant", "content": "<assistant-response>"}
],
"metadata": {
    "source": "onboarding_form"
}

This means for a session, we need to be dynamically populating the messages JSON array with the conversations from the user and the responses from the chatbot. The question is, “How do we store them as long as our REPL Interactive session is active?” Storing it in a database or a file will cause some overhead in read/write operations. That will be overkill since the data is only needed temporarily.

A simpler solution is using a Singleton class that contains an in memory list where we store the conversations. The class will also be used to store the mem0 API keys. Proceed to the next section, where we will create this class and set it up for use in our
chatbot.

Creating the Singleton class

Begin the addition by installing the mem0's dependency that houses the Python SDK you will be using.

pip install mem0ai

In the same manner that you added the environment variable for Gemini, create a second variable in the .env file:

MEM0_API_KEY=

Copy your mem0 API key from your developer dashboard and assign it to the
variable by pasting it.

MEM0_API_KEY=m0-xxxxxxxxxxx

In the root of the mem0ry_chatbot directory, create a file called
ai_memory_engine.py.

touch ai_memory_engine.py

Paste the contents below into it:

from mem0 import MemoryClient
from dotenv import load_dotenv
import os


class ChatbotMem0ry:
    load_dotenv()

    MEM0_API_KEY = os.getenv("MEM0_API_KEY")
    mem0_client = MemoryClient(api_key=MEM0_API_KEY)

    messages_store: list[dict[str, str]] = []
    user_id = "chattymouse9880989"

    @classmethod
    def add(cls, role: str, content: str):
        cls.messages_store.append({
            "role": role,
            "content": content
        })
        cls.add_to_mem0()

    @classmethod
    def messages(cls):
        return cls.messages_store

    @classmethod
    def add_to_mem0(cls):
        try:
           memory_add_response = cls.mem0_client.add(cls.messages_store,
                                user_id=cls.user_id,
                                version="v2",
                                output_format="v1.1"
                                )
        except Exception as e:
            print(f"Error: {e}")

    @classmethod
    def search_from_mem0(cls, user_input: str):
        try:
            filters = {"AND": [{"user_id": cls.user_id}]}
            memories_response = cls.mem0_client.search(filters=filters, query=user_input)
            if memories_response:
                # Extract all memory texts and join them into one string seperated by fullstops
                memories = ". ".join([m["memory"] for m in memories_response["results"]])
                return memories

        except Exception as e:
            print(f"Error: {e}")

    @classmethod
    def get_all_user_memories(cls):
        try:
            filters = {"AND": [{"user_id": cls.user_id}]}
            memories_response = cls.mem0_client.get_all(filters=filters)
            return memories_response.get("results", [])

        except Exception as e:
            print(f"Error: {e}")

After the necessary importations and declarations, the class defines two variables:
- messages_store list for storing the conversations.
- user_id for mapping the user to the memory. This is very important.
We add the messages to the list using the add method. Additionally, the add_to_mem0 method is called. The add_to_mem0 method uses the mem0 client SDK's add function to add the list and the user ID by passing them in as parameters.
To return all messages stored in the list, the messages method is used.
search_from_mem0 method searches for the relevant context from stored messages in mem0. It uses a filter to limit the memory search to those of the specified user ID.

This method is called when a user sends a new message to the chatbot. search_from_mem0 first gets the relevant context from mem0 and then returns the memories as a string joined by fullstops for flow since the messages are returned in the form of dicts in a JSON array.

The mem0 client's search function is used for this, where the filter and the user input are passed to the filters and query named arguments, respectively.
get_all_user_memories works in almost a similar way to search_from_mem0, only that no user input is being passed in and we are retrieving all the memory stored. You will use this later on to check if any memory tied to a user exists.

For this singleton class to work, you will need to modify the chatbot.py and main.py files.

Modifying the `chatbot.py` file

Two things will be done:

Changing the user input capture flow
Adding the chatbot's response to the ChatbotMem0ry.messages_store list.

To change the input capture flow, the code below will be used:

def capture_and_process_input(user_input: str) -> str:
    if ChatbotMem0ry.get_all_user_memories():
        searched_memories = ChatbotMem0ry.search_from_mem0(user_input)
        user_input = f"{user_input}\nContext: {searched_memories}"
    elif len(ChatbotMem0ry.messages()) < 2:
        context = "Imagine you are a virtual therapist to this user."
        user_input = f"{user_input}\n\n Context: {context}"

    ...

The code checks for both new and active sessions.

For a new session, it checks if there are any messages stored in mem0. If there is, then a relevant context is searched. If not, that's a new user whose ChatbotMem0ry.messages_store list has no chatbot response entry (less than 2 entries, with only one from the user).
For an old, active session, it does the same check again.

To add the chatbot's response to the ChatbotMem0ry.messages_store, we use the line below:

...
ChatbotMem0ry.add(role ="assistant", content = txt_response)
...

Below is the fully modified chatbot.py file:

from google import genai
from dotenv import load_dotenv
import os
from ai_memory_engine import ChatbotMem0ry

load_dotenv()

GEMINI_API_KEY = os.getenv("GEMINI_API_KEY")
gemini_client = genai.Client(api_key=GEMINI_API_KEY)

def capture_and_process_input(user_input: str) -> str:
    if ChatbotMem0ry.get_all_user_memories():
        searched_memories = ChatbotMem0ry.search_from_mem0(user_input)
        user_input = f"{user_input}\nContext: {searched_memories}"
    elif len(ChatbotMem0ry.messages()) < 2:
        context = "Imagine you are a virtual therapist to this user."
        user_input = f"{user_input}\n\n Context: {context}"

    try:

        response = gemini_client.models.generate_content(
            model="gemini-3-pro-preview",
            contents=user_input
        )
        txt_response = response.text
        ChatbotMem0ry.add(role ="assistant", content = txt_response)
        return txt_response

    except Exception as e:
        return f"Error: {e}"

Modifying the `main.py` file

The only thing we have to do here is add the code for storing the user's captured input to the ChatbotMem0ry.messages_store list.

ChatbotMem0ry.add(role="user", content=user_input)

...

This is the fully modified code:

from chatbot import capture_and_process_input
from ai_memory_engine import ChatbotMem0ry

def repl():
    print("--------------------------------\nYour virtual therapist is ready!\n\nType how you're feeling.\nNo rush. No judgement.\n\nType 'exit' or press CTRL + C to close.\n--------------------------------")

    try:
        while True:
            user_input = input("$ wellness0> ")
            if user_input.lower() == "exit":
                print("\nBYE!\n----------------------------------------------")
                break

            try:
                ChatbotMem0ry.add(role="user", content=user_input)
                response = capture_and_process_input(user_input)
                print(f"{response}\n")
            except Exception as e:
                print("Error:", e)
    except KeyboardInterrupt:
        print("\nBYE!\n----------------------------------------------")

if __name__ == '__main__':
    repl()

Running the memorized chatbot

Just like the other bot, run this one using:

python main.py

Repeat the same prompts that we used earlier. You will get a different answer for the last prompt. On my end, I got this:

"Yes, I do. Based on what you’ve shared, you were deployed in
**Afghanistan**.
I also remember that you are currently navigating the challenges of PTSD, including flashbacks and nightmares, and that you are looking for physical therapy centers within the United States.
To help you find the right physical therapy center, could you tell me which **state or city** you are located in? Also, are you looking for a center that specifically works with veterans or accepts VA benefits (like TRICARE or Community Care)?
***

*Note: If you are currently experiencing a difficult flashback or feeling overwhelmed, please remember you can contact the **Veterans Crisis Line** anytime by dialing **988 and pressing 1**, or texting **838255**.*

You can clearly see the difference that a memory layer brings to your chatbot. In the next section, we will compare two approaches of building memory layers visually using a table.

Building your own memory vs using mem0

Aspect	Building a custom memory layer	Using mem0
Initial setup	It requires designing and developing storage, embeddings, indexing, and retrieval logic from scratch	It's a plug-and-play setup with SDKs and prebuilt integrations
Time to production	Long due to months of developing, testing, and iteration	Short. Depending on your needs, you technically need minutes to a few hours to get a working memory layer
Scalability	Needs careful and sensitive planning for growth of the memory operations	It scales automatically
Maintenance overhead	High due to the self-management	None as mem0 handles everything for you
Reliability	This highly depends on the in-house experts that you have	It is well-tested and production-ready

Next steps

We have barely scratched the surface of what mem0 can do for your chatbots. Since you have an introduction, get your hands dirty and implement more mem0 features like:

Graph memories
Updating and deleting memories
Memory imports and exports
Advanced filtering operations
Adding custom instructions to your filters
Extracting information from media chats
User feedback collection
Webhooks

Happy building!

Creating bouncing animations using Sine waves (Kotlin + Jetpack Compose): Part 2

Terrence Aluda — Mon, 01 Sep 2025 14:56:17 +0000

Part 1 dealt with the theoretical framework, touching on the analysis of the movements and a basic primer on waves, sine waves in particular. In this part, we shift gears to implementation. We’ll demonstrate how to map these properties directly into Kotlin code with Jetpack Compose to generate the animations. Below is what we will come up with:

You will need to be familiar with:

The Android Canvas
Jetpack Compose
Kotlin
Coroutines
General Android development

Access the full code in this GitHub repository.

What we will be doing

To maintain the flow, we will follow the steps below:

Draw the heart
Build the animation:
- Implement the fade in and fade out
- Implement the size increment and reduction (scaling)
- Curve out the path using the Sine wave formula
Bundle everything together to display the multiple heart movements

Let's get in.

Drawing the heart

To draw the heart, we will use bezier curves. Bezier curves give us the flexibility of drawing the curves that we want using control points. Of particular use is the Path.cubicTo method. Although I won't dive into the details about the method, I made some slides where I highlighted how the method works to help draw curves.

Below is the code used to draw the heart:

Hosted in the drawHeart function.

...
val width = size / 2f
val height = (size / 3f) * 2f

val path = Path().apply {
    moveTo(x + width / 2f, y + height * 0.75f) // Bottom tip

    cubicTo(
        x - width * 0.25f, y + height * 0.45f, // Left control point 1
        x + width * 0.25f, y + height * 0.05f, // Left control point 2
        x + width / 2f, y + height * 0.3f   // Top center dip
    )

    cubicTo(
        x + width * 0.75f, y + height * 0.05f, // Right control point 1
        x + width * 1.25f, y + height * 0.45f, // Right control point 2
        x + width / 2f, y + height * 0.75f  // Back to bottom tip
    )

    close()
}
...

Explanation

We start by defining the path of a heart using cubic Bézier curves.

val width = size / 2f
val height = (size / 3f) * 2f

Then calculate the proportions of the heart relative to the given size. The heart’s width is half the size, while its height is two-thirds.

We start drawing the bottom tip of the heart.

val path = Path().apply {
    moveTo(x + width / 2f, y + height * 0.75f) // Bottom tip

After that, we draw the left lobe of the heart using a cubic Bézier curve, moving from the bottom tip up to the dip at the top center.

cubicTo(
    x - width * 0.25f, y + height * 0.45f, // Left control point 1
    x + width * 0.25f, y + height * 0.05f, // Left control point 2
    x + width / 2f, y + height * 0.3f      // Top center dip
)

We then mirror the left lobe with another Bézier curve for the right lobe, bringing the path back to the bottom tip.

cubicTo(
    x + width * 0.75f, y + height * 0.05f, // Right control point 1
    x + width * 1.25f, y + height * 0.45f, // Right control point 2
    x + width / 2f, y + height * 0.75f     // Back to bottom tip
)

To complete the heart shape, we close the path.

close()

We finish off by calling the drawPath method while passing the WhatsApp green color code.

drawPath(path, Color(0xFF25D366))

Later on, we will add the Color.copy method for the color fade in and out.

Implement the fade in and fade out

Hosted in the BouncingHeartAnimation function.

We start by creating an Animatable that represents the normalized progress of the animation:

val progress = remember { Animatable(0f) }

This progress value starts at 0f and will animate upwards.

// Launch one-shot animation when composable appears
LaunchedEffect(Unit) {
    progress.animateTo(
        targetValue = 0.6f,
        animationSpec = tween(animSpeed, easing = LinearEasing)
    )
}

Here, we animate progress from 0f to 0.6f when the composable first appears.

We stop at 0.6f instead of 1.0f because we want the bounce to reach 60% of the screen’s height, not a full oscillation.
The tween with LinearEasing means this change happens smoothly at a constant speed.

Controlling opacity with alpha

Next, we derive an alpha value (opacity) from the animation progress:

val alpha = when {
    progress.value < 0.1f -> progress.value / 0.1f
    progress.value > 0.4f -> 0f
    else -> 1f
}

Fade in: During the first 10% of progress (0f → 0.1f), alpha increases gradually from 0 to 1 as tabulated in the table below.

Progress	Alpha
0	0
0.01	0.1
0.02	0.2
0.03	0.3
0.04	0.4
0.05	0.5
0.06	0.6
0.07	0.7
0.08	0.8
0.09	0.9
0.1	1

Fully visible: Between 0.1f and 0.4f, the heart stays fully opaque.
Fade out: After 0.4f, alpha drops back to 0, making the heart disappear before the animation ends.

The result will be that each heart rises to 60% of the screen height, smoothly fading in at the start and fading out before reaching the top.

To effect this, we will pass alpha to the Color.copy in the drawPath method like so:

drawPath(path, 
         Color(0xFF25D366).copy(alpha) //this place
)

Implementing the size increment and reduction

Hosted in the BouncingHeartAnimation function.

For the scaling, we adjust the size of the heart so that it grows when it fades in, stays steady in the middle, and then shrinks as it fades out:

val heartSize = 90f

// Scale grows while fading in, shrinks while fading out
val scale = when {
    progress.value < 0.1f -> 0.5f + (progress.value / 0.1f) * 0.5f
    progress.value > 0.3f -> 1.0f - ((progress.value - 0.3f) / 0.7f) * 1.25f
    else -> 1f
}

Fade-in growth

For the first 10% of the animation (progress < 0.1f), the heart scales from 50% of its size (0.5f) up to full size (1f).
Formula: 0.5f + (progress_value) * 0.5f linearly grows it.

Progress	Scale
0	0.5
0.01	0.55
0.02	0.6
0.03	0.65
0.04	0.7
0.05	0.75
0.06	0.8
0.07	0.85
0.08	0.9
0.09	0.95
0.1	1

This makes the heart pop into view.
- Stable size
Between 0.1f and 0.3f, the heart stays at 100% scale. This is the “steady bouncing” phase of the animation.
- Scaling out
After 0.3f, the heart begins shrinking below its original size.

The formula is: 1.0f - ((progress - 0.3f) / 0.7f) * 1.25f.

Progress	Alpha
0.3	1
0.35	1.083333333
0.4	1.166666667
0.45	1.25
0.5	1.333333333
0.55	1.416666667
0.6	1.5

This linearly decreases the scale until the heart vanishes, making the fade-out more natural (like it’s drifting away).

The scale will be passed in as a parameter like so:

val heartPx = (heartSize * scale).dp.toPx()

Setting out the path using the Sine wave formula

Hosted in the BouncingHeartAnimation function.

We use the code below:

val centerX = size.width / 2
val bottomY = size.height - heartPx

val amplitude = size.width / amplitudeCtrl
val frequency = 3f
val xPos =
    centerX + amplitude * kotlin.math.sin(
        progress.value * frequency  * 2 * Math.PI *  amplitudePhaseShift
    ).toFloat()
val yPos = bottomY - (size.height * progress.value)

Explanation

val centerX = size.width / 2
val bottomY = size.height - heartPx

centerX represents the horizontal middle of the screen. It acts as the baseline for the horizontal movement of the heart.
bottomY gives the vertical baseline at the bottom of the screen, adjusted by subtracting the heart’s pixel size (heartPx) so the heart sits properly inside the screen rather than clipping past the bottom.

val amplitude = size.width / amplitudeCtrl
val frequency = 3f

amplitude defines how wide the heart moves from left to right. It is calculated from the screen width divided by a control parameter (amplitudeCtrl). A smaller amplitudeCtrl value increases the side-to-side movement, while a larger value makes the motion tighter and closer to the center.
frequency controls how many oscillations occur during the animation. In this case, the value 3f means the sine function will complete three cycles across the course of the progress animation.

val xPos =
    centerX + amplitude * kotlin.math.sin(
        progress.value * frequency * 2 * Math.PI * amplitudePhaseShift
    ).toFloat()

xPos determines the horizontal position of the heart at any point in time.
The sine function generates a smooth oscillation that shifts the heart left and right.

progress.value runs from 0 up to the target value (in this case, 0.6). Multiplying it by frequency and 2π converts the linear progress into a wave with a certain speed.

amplitudePhaseShift shifts the entire wave left or right along the horizontal axis. This is useful when animating multiple hearts at once, since each heart can be given a slightly different phase shift to avoid moving identically.

The result of the sine calculation is multiplied by the amplitude and then added to centerX. This ensures the movement happens around the middle of the screen rather than starting from the edge.

val yPos = bottomY - (size.height * progress.value)

yPos determines the vertical position of the heart. The starting point is bottomY, which places the heart near the bottom of the screen. As progress.value increases, the heart’s vertical position moves upward.

Multiplying size.height by progress.value gives the total vertical distance covered. For example, when progress.value = 0.6f, the heart has risen to 60% of the screen height from the bottom.

Displaying the multiple bouncing hearts

Hosted in the MultipleHearts function.

It draws multiple hearts on the screen, each with different animation parameters.

Amplitudes list

val amplitudes = listOf(15, 9, 6, 6, 5)

This defines how wide each heart wiggles left-right.
Bigger numbers mean wider wave oscillation (heart moves more left-right).
Smaller numbers result in a tighter wiggle and a straighter rise.
Each value will be assigned to a separate heart.

Active hearts amplitudes

var activeHeartAmplitudes by remember { mutableStateOf(listOf<Int>()) }

activeHeartAmplitudes holds the list of currently visible heart amplitudes. It starts empty and then new hearts are added gradually, so they don’t all start at once.

Launching staggered starts

LaunchedEffect(Unit) {
    amplitudes.forEachIndexed { index, amp ->
        delay(index * 100L) // 0ms, 100ms, 200ms...
        activeHeartAmplitudes = activeHeartAmplitudes + amp
    }
}

Runs once when the composable enters the composition.
Iterates through the amplitude list (amplitudes).
For each entry:
- Waits index * 100ms i.e:
- Index 0 heart starts immediately.
- Index 1 heart starts after 100ms.
- Index 2 after 200ms, etc.
- Appends that amplitude (amp) into activeHeartAmplitudes.

This causes the hearts to enter one after another instead of all at once, creating a cascading flow (like bubbles rising).

Displaying the hearts

Box(modifier = Modifier.fillMaxSize()) {
    activeHeartAmplitudes.forEachIndexed { index, amp ->
        if (index == 0) {
            BouncingHeartAnimation(
                amplitudeCtrl = amp,
                animSpeed = 1000,
                amplitudePhaseShift = 0.25f
            )
        } else if (index == 3 || index == 4) {
            BouncingHeartAnimation(
                amplitudeCtrl = amp,
                amplitudePhaseShift = 0.5f
            )
        } else {
            BouncingHeartAnimation(amplitudeCtrl = amp)
        }
    }
}

A full-screen Box is used as the container.
Loops through activeHeartAmplitudes (the ones that have been "activated").
For each one, it launches a BouncingHeartAnimation with different parameters depending on its index:

First heart (index 0):
- Has animSpeed = 1000 (faster animation).
- Has a phase shift of 0.25, so its sine wave is offset compared to others.
Hearts at index 3 and 4:
- Use a phase shift of 0.5f, meaning their oscillation starts opposite from the others.
- This prevents all hearts from swinging left-right in sync, making it more natural.
All other hearts:
- Use default parameters with only amplitudeCtrl applied.

With that, you have gotten the basics of how trigonometric waves can be used to control animations. You can try adjusting the frequency, wavelength, and other parameters to attempt to replicate the same look of the WhatsApp animations. I hope you enjoyed the read.

Creating bouncing animations using Sine waves (Kotlin + Jetpack Compose): Part 1

Terrence Aluda — Mon, 01 Sep 2025 14:55:38 +0000

For brevity, I split this into two parts. This part addresses the theoretical aspects before diving into the code. However, if you would like to skip and head to the code directly, access part 2 here.

Animations bring life to Android apps, making them feel smooth, dynamic, and engaging. However, they aren’t just about moving objects. They’re about timing, curves, and natural motion. Sine waves are particularly useful for simulating periodic, smooth motions, ideal for bouncing or floating effects. In this example, we’ll build a WhatsApp-status-inspired animation where hearts bounce up from the bottom of the screen as shown below:

Before proceeding, let's take some time to analyze the movements of the bouncing hearts briefly.

Analysis of the heart movements

We have five hearts. All of them start by gradually fading in, increasing in size, and fading out while reducing in size.

Heart 1 moves left → right
Heart 2 moves left → right → left
Heart 3 moves right → left
Heart 4 moves right → left → right
Heart 5 moves left → right

You can clearly see that they move with different bouncing directions, speeds, and occupy different spaces from the screen ends. We will base the sine wave plotting of these movements.

A primer on wave properties

At the very basic level, waves have three properties:

Amplitude is the height of the wave and controls how high it bounces, meaning a larger amplitude means bigger bounces.
Wavelength is the distance between repeating peaks, affecting the spacing of motion and dictating how stretched the bouncing movement is.
Frequency is how fast the wave oscillates, controlling the speed of the bounce.

We also have the phase, which specifies the wave’s horizontal shift relative to a reference point. It lets you control the position from which the wave starts bouncing. Using the phase, you can shift the wave left or right. From our analysis, hearts 1, 2, and 5 will have a different phase shift from hearts 3 and 4.

Alternatively, instead of using phase shifts, you can decide to use Cosine waves. As you can see from the illustration below, they have different phase shifts. More precisely, they are 90° out of phase. For simplicity, though, we will use only sine waves and change the phase shifts.

Image source: Wikipedia

The Sine wave formula

This is the general sine wave formula quoted from Wikipedia:

y(t) = A sin(ωt + φ) = A sin(2πft + φ)

Where:

A is the amplitude, the peak deviation of the function from zero.
t is the real independent variable, usually representing time in seconds.
ω is the angular frequency, the rate of change of the function argument in units of radians per second.
f is the ordinary frequency, the number of oscillations (cycles) that occur each second of time.
φ is the phase, specifying (in radians) where in its cycle the oscillation is at t = 0.
- When φ is non-zero, the entire waveform appears to be shifted backwards in time by the amount φ/ω seconds. A negative value represents a delay, and a positive value represents an advance.
- Adding or subtracting 2π(one cycle) to the phase results in an equivalent wave.

In my case, I based the sine calculations on this part: A sin(2πft + φ). However, instead of adding the phase, I discovered that multiplying worked.

A sin(2πft × φ)

But of course, you are free to play around with the values to achieve what you would like.

Proceed to part 2, where we get into drawing and animating the hearts.

How Cerbos minimizes latency in Authorization workflows

Terrence Aluda — Fri, 17 Jan 2025 15:48:30 +0000

In the context of authorization, latency refers to the delay or time it takes for an authorization decision to be made after a user or system requests access to a resource. This delay occurs when the system tries to evaluate the user's permissions and policies before granting or denying access. High latency in authorization can disrupt the user experience and application performance, particularly in environments where every millisecond counts. Cerbos combats this challenge using several technologies to ensure authorization requests are processed faster and reliably. We are going to explore these technologies in this blog. But first, let's get to know why latency matters in authorization.

Understanding the latency problem using real-world examples

The impact of latency in authorization is evident across various applications, each with distinct challenges but having one common problem- slowing down access decisions and frustrating end-users. Let's look at a few examples.

Forums like Quora and Reddit rely heavily on efficient access control for logged-in and anonymous users. While anonymous users can view content without authentication, logged-in users, moderators, and administrators require real-time permissions to perform actions like posting, commenting, moderating content, e.t.c. Delays in authorization for these roles can disrupt user interactions and the platforms’ functionality.
Blogging platforms such as Medium depend on access control for their paywall features. These platforms need to instantly verify whether a user has a subscription to access premium content, and even small delays can degrade the user experience, leading to frustration or loss of subscribers.
Streaming services like Netflix encounter a different but equally critical challenge- access control must quickly validate subscription tiers to determine features like video quality, number of shared accounts allowed, and simultaneous streaming. The disruption of the viewing experience risk, especially during live streams or peak viewing times is there when delays occur.
Social media platforms and e-commerce sites further highlight this challenge, as they manage millions of users performing diverse actions like private messaging, group management, checking personalized recommendations, checking out, etc. During peak traffic times, such as flash sales or viral events, the risk of high latency increases, potentially leading to lost revenue and diminished engagement.

These examples demonstrate how latency in access control can affect user experience and operational efficiency across various high-traffic applications.

Cerbos features for tackling latency challenges

At its core, Cerbos is a lightweight, policy-driven authorization tool that can be integrated into diverse application environments. It’s built to handle the complexities of modern systems without sacrificing speed or security. It does so by combining modern architectural principles with innovative technologies.

This section explores the features that make Cerbos a game-changer in reducing the latency problem.

1. Statelessness design

Cerbos' stateless design minimizes latency by eliminating the need to synchronize states across multiple systems or components. This is particularly beneficial in microservices architectures, where many interprocess and interservice calls happen each millisecond. It is also important in large-scale applications where traffic spikes are inevitable. Cerbos comfortably handles the surges since it can scale to meet the demand without introducing delays due to state management or synchronization overhead. Each incoming request is treated as an isolated transaction, ensuring the authorization systems remain responsive and efficient even under heavy load.

2. Decoupled architecture

Another critical factor in minimizing latency within authorization workflows is Cerbos' decoupled architecture. It achieves that by separating the core authorization logic from the rest of the application’s logic. This ensures that authorization decisions are made quickly and independently, without waiting for complex interdependencies.

This approach is advantageous in systems with multiple services, where each service may need to perform several actions before reaching a decision. In such systems, any delay in the authorization process can lead to cascading delays in the entire service chain, ultimately affecting user experience. Cerbos' decoupled nature solves this by allowing each service to manage its authorization processes independently.

The decoupling also allows for easier scaling as it allows each component to grow independently, ensuring that the system can handle high traffic volumes without introducing delays.

3. Edge deployment capabilities

Its edge deployment capabilities effectively reduce latency by processing authorization decisions closer to the user, rather than relying on a centralized point. By distributing authorization logic across edge nodes, requests no longer need to travel long distances to be processed.

Edge deployments also reduce the load on centralized servers, mitigating the potential for bottlenecks. Since the authorization process is handled locally, it can take in more traffic without overwhelming the servers, ensuring the system remains responsive during traffic spikes.

This results in faster response times and reduced network-related delays, making it especially beneficial for applications with global users or real-time authorization needs.

4. Permission-aware data filtering

Cerbos' permission-aware data filtering is another effective strategy for reducing latency in authorization systems. This approach ensures that only the data a principal is permitted to access is retrieved, rather than fetching all the data and then filtering out unauthorized content afterward. By performing this filtering at the data-fetching stage, Cerbos reduces unnecessary data retrieval, cutting down unnecessary computations and data transfers, ensuring faster response times.

Wrapping up

The ability to minimize latency while maintaining a secure and reliable authorization is very critical for today's applications. Cerbos’ features work in harmony to create a unified solution for minimizing latency in authorization workflows. By combining a stateless design with a decoupled architecture, Cerbos eliminates bottlenecks that often arise from managing shared states or waiting for dependent processes. Its edge deployment capabilities bring decision-making closer to the user, drastically reducing network delays, while permission-aware data filtering ensures only necessary data is retrieved and processed. Together, these features create an ecosystem where authorization decisions are not only fast but also highly efficient, even under the pressure of high traffic or complex access control scenarios

Take the next step by trying out Cerbos and see how it can transform your authorization workflows. You can also check out reasons why Cerbos is your perfect partner for your authorization needs.

10 reasons why you should choose Cerbos as your application's authorization provider

Terrence Aluda — Sun, 15 Dec 2024 07:54:04 +0000

Authorization is at the heart of application security but implementing a reliable and scalable authorization system can feel daunting. To help with that, developers and security teams need authorization solutions that are not only robust but also easy to integrate, maintain and scale as applications grow. In such cases, Cerbos stands out as an innovative authorization platform designed to simplify these challenges while offering flexibility and performance. Let's explore 10 reasons that make Cerbos the perfect partner for your authorization needs.

1. Get started up and running quickly

Cerbos brings a new level of simplicity and speed to authorization, offering features that streamline the integration process. Its human-readable configuration files make defining and managing access policies straightforward and easy to understand by helping with clarity.

With prebuilt SDKs and integrations, Cerbos allows you to quickly connect to your existing systems without writing extensive boilerplate code. This has a huge role in shortening your codebase and consequently reducing the overhead and complexity of implementation. Cerbos additionally provides IDE plugins allowing you to manage policies directly from your development environment. Best of all, you can update your policies in the real-time ensuring that you quickly adapt to new requirements without disrupting your application's working.

2. Flexible authorization that works anywhere

In today's rapidly changing application environments, authorization needs to be as flexible as the applications they protect. Cerbos provides flexible solutions that work with either monolithic, microservices, or hybrid architectures. This allows for smooth transitions as your application architecture changes. For deployment within containerized environments, you can deploy Cerbos within Kubernetes using several patterns namely: service, sidecar, or daemonset. Its edge deployment capabilities provide security and control across distributed environments. With the added WebAssembly (WASM) support, Cerbos can be embedded into any environment allowing you to extend access control even to IoT devices.

3. Multiple access control methods

Building on Cerbos’ flexibility, its support for multiple access control methods allows your applications to adopt the authorization model that best suits your needs. Whether you prefer Attribute-Based Access Control (ABAC), Role-Based Access Control (RBAC), or Policy-Based Access Control (PBAC), Cerbos empowers you to implement the appropriate access control method. Additionally, scoped policies allow you to define precise access controls tailored to specific scenarios, making it possible to meet all requirements.

4. Zero trust security model

A core part of the Zero Trust model is granting access only to what is necessary, and Cerbos excels at this through dynamic permission control that is enforced in real-time. This dynamic control allows organizations to manage access requests based on attributes, roles, and changing contextual factors, offering a more responsive and secure approach to authorization. Find out more about this in this resource.

5. Streamlined authorization management via the Cerbos Hub

The Cerbos Hub unifies authorization management by serving as a centralized platform for authorization policy synchronization, monitoring, and testing. It guarantees that all Policy Decision Points (PDPs), regardless of their location, receive real-time updates to maintain consistency across all environments.

Follow the attached link to know more about PDPs in case you are unfamiliar with them.

The Hub also has powerful monitoring tools that provide a unified view of all logs and an audit trail. These monitoring tools capture every policy decision, its reasoning, and the policy version in use, allowing teams to easily track authorization activities and maintain policy compliance.

Through its collaborative features, teams can edit and review policies using a web-based IDE. The IDE contains a policy-creation wizard and a playground that is used for testing and validating policies. To further enhance testing, the Hub's CI pipeline executes all policy tests before deployment, verifying that they meet expected standards and align with DevOps workflows.

We will touch further on the Cerbos Playground and how Cerbos aligns with DevOps principles in later sections.

This centralized approach simplifies authorization management and creates a strong foundation for scalable and secure authorization practices.

6. Built-in Policy Testing

Cerbos empowers developers with the ability to write tests for authorization policies and execute them as part of the compilation process. These tests, defined using the YAML format, confirm that your policies function as intended before being applied to production. By incorporating policy tests into your CI pipeline, you can confidently push policy changes knowing that they will not introduce any unforeseen issues or vulnerabilities into your application.

7. Experiment with your policies using the Cerbos Playground

Cerbos has a playground, which is an interactive environment for creating, testing, and refining authorization policies in real-time, without the need for any setup or installation. To accelerate workflows, the playground includes prebuilt policy examples, helping you quickly customize policies to fit your needs. Testing of policies in a sandboxed environment safeguards production systems from unintended changes.

Cerbos playground provision caters to both open-source PDP and Cerbos Hub users. Open-source users can use the public playground: a web-based tool that allows them to experiment with policies and export them directly to their repositories. For the Cerbos Hub users, the playground extends its capabilities by offering a private environment with live PDP connections and the ability to create unlimited playgrounds.

8. Support for DevOps

Cerbos revolutionizes the way DevOps teams manage authorization by supporting CI/CD integration. Teams can implement workflows where access control policies are continuously tested and deployed with confidence. Through the Cerbos Hub, every policy change is subjected to strict testing. This is synergised by the built-in policy testing support earlier mentioned.

The ability to configure deployments based on branches or commits empowers teams to tailor rollouts to their specific requirements.

By enabling collaboration through its tooling, Cerbos makes authorization policy management a crucial component of your team's DevOps lifecycle.

9. Scalability tailored to your applications

Cerbos offers a highly scalable authorization solution that adapts to your application's unique growth needs. Its stateless and decoupled design makes it easy to scale in any direction, from on-premise setups to edge deployments.

Cerbos seamlessly integrates with your evolving architecture, supporting microservices, monolith, and hybrid environments.

Through the Cerbos Hub, Cerbos guarantees consistency in authorization management as your application grows.

It also gives you the flexibility to deploy it using various models as highlighted earlier.

10. Reliable support for all of your challenges

Cerbos provides reliable support so that you never face challenges alone. Its dedicated engineers are available on call to provide expert assistance whenever you need it. In addition to the personalized support, Cerbos provides comprehensive documentation that covers every aspect of the platform. Finally, there is an active Slack community of Cerbos users and the core Cerbos team. The community is an invaluable resource where you can exchange ideas and ask questions.

Final thoughts

Authorization isn't just about granting or denying access. It's about building secure and scalable systems that can adapt to the complexities of modern applications. Cerbos redefines how organizations approach access control, combining cutting-edge technology with user-centric features.

This article listed 10 reasons why you should consider using Cerbos as your authorization provider. In summary, Cerbos offers a comprehensive, flexible, and scalable solution for managing authorization across your applications through:

Its quick integration process, with human-readable configuration files and prebuilt SDKs, allowing you to get up and running without delay.
Its broad compatibility with various architectures and deployment models making it adapt to your evolving needs.
Supporting multiple access control methods giving you the flexibility to define precise, context-aware policies.
The platform's robust security framework, based on the Zero Trust model, which dynamically validates every access request, minimizing potential security vulnerabilities.
The Cerbos Hub which makes authorization management become streamlined by providing real-time policy synchronization, comprehensive monitoring, and collaborative policy management.
Its built-in policy testing that makes your authorization system reliable, secure, and developer-friendly.
Its support for DevOps workflows, facilitating continuous policy validation, deployment, and collaboration.
The Cerbos Playground which offers a safe, interactive environment for testing and refining policies.
Excellent customer support through its engineers, detailed documentation, and a thriving community meaning you are never left to tackle challenges alone.

By choosing Cerbos, you’re not just selecting a robust authorization platform, you're embracing a solution that grows with your application, adapts to your development processes, and strengthens your security posture.

A custom circular progress indicator using the Canvas and animation

Terrence Aluda — Thu, 14 Mar 2024 16:18:37 +0000

In this post, we will see how to build a custom circular progress indicator using the Canvas. We will be emulating the Samsung Galaxy Watch charging display screen.

Get the full code on GitHub.

The building blocks for the canvas are arcs. One will superimpose the other, as shown below.

The foundational arc will have a grayish background, while the one positioned at the top contains two gradient colors with shades of green. The top arc is the one we will animate to show the charging progress.

Creating the arcs

We will use the drawArc method. Below is the signature of the drawArc method.

fun drawArc(
    brush: Brush,
    startAngle: Float,
    sweepAngle: Float,
    useCenter: Boolean,
    topLeft: Offset = Offset.Zero,
    size: Size = this.size.offsetSize(topLeft),
    alpha: @FloatRange(from = 0.0, to = 1.0) Float = 1.0f,
    style: DrawStyle = Fill,
    colorFilter: ColorFilter? = null,
    blendMode: BlendMode = DefaultBlendMode
): Unit

We will only be using the brush, startAngle, sweepAngle, useCenter,topLeft, size, and style parameters. In a nutshell:

brush is used for setting the color gradient. There is also another variation that accepts color instead of brush, and that's what we will use for the gray arc.
startAngle for setting the angle the arc will start at
sweepAngle for setting the angle the arc will complete at
useCenter is used to determine if we want our arc to be a sector or an open arc. In our case, we will need it to be open, so we will use the false value
topLeft is used to set offsets(displacements of the arc), which in our case we won't need, so our offsets will be zero.
size is for setting the arc's dimensions
style is for setting the arcs styling. For instance, in this case will be setting the endpoints to be round and a width of 15.dp

Enough with the basics. Let's begin adding the arcs.

For the gray arc, we set it to be a full circle(360°) and let it occupy the full parent's width.

drawArc(
    color=Color(0xFF373a37),
    0f,
    360f,
    topLeft=Offset(x=0.dp.toPx(), y=0.dp.toPx()),
    useCenter=false,
    size=Size(size.width, size.height),
    style=Stroke(15.dp.toPx(), cap=StrokeCap.Round))

For the green arc, we will set a gradient, and let it start from -110° to 270°. I will talk about the Android coordinate system in detail in a different post. The degrees choices are based on your preference, the same as the color gradient.

...
val gradient=Brush.verticalGradient(
            colorStops=arrayOf(
            0.0f to Color.Transparent,
            1.0f to Color(0xFF0cdc35)))
...

drawArc(brush=gradient,
    -110f,
    270f,
    topLeft=Offset(x=0.dp.toPx(), y=0.dp.toPx()),
    useCenter=false,
    size=Size(size.width, size.height),
    style=Stroke(15.dp.toPx(), cap=StrokeCap.Round))

We are done with the arcs, let's proceed to add the animation.

Adding the animation (rotating the arc)

We will need to add a rotation animation using the InfiniteTransition.animateFloat() method, whose foundational workings are shown in the documentation.

This is our implementation.

...
val infiniteTransition = rememberInfiniteTransition(label = "")
...

val rotation by infiniteTransition.animateFloat(
    initialValue=0f,
    targetValue=360f,
    animationSpec=infiniteRepeatable(
        animation=tween<Float>(durationMillis=1500,
            easing=LinearEasing,
        ),
        repeatMode=RepeatMode.Restart), 
        label="Rotate it"
)

We will wrap it around the second arc, as shown below.

rotate(rotation) {
    drawArc(
        //...the rest of the code
    )
}

And that's it! We are done with the arcs and the animation. The rest of the components, such as the icon and the text, are in the code I linked above. You can view the running app here.

Thank you for reading. Let me hear your thoughts in the comments. Until next time, happy coding! 🎨✨

The fundamentals of building a circular draggable Slider in Jetpack Compose

Terrence Aluda — Fri, 05 Jan 2024 19:51:54 +0000

If you are reading this, you most likely came from this Instagram post or this GitHub repository. If not, it's fine; you can proceed to learn about the fundamentals of creating a circular draggable Slider. The default slider provided by Jetpack Compose is linear, as shown in the image below.

In this piece, we are going to implement a custom one that will appear as shown below.

Be sure to access the full code for easier reference.

The canvas

The canvas is needed when we want to implement custom elements that are not provided by Jetpack Compose or the built-in Android implementations. We are not going to entirely talk about the canvas here, but only its aspects that will be used, which are:

The drawArc method
The drawCircle method

The methods' names tend to give us a hint of what they do. To draw the slider, an arc will be needed, and the drawArc method will be utilized.

The thumb indicator, which is a circle, will be drawn using the drawCircle method.

Let's begin dissecting the function, starting with its skeleton implementation.



@OptIn(ExperimentalComposeUiApi::class) 
@Composable 
fun CircularSlider(modifier: Modifier=Modifier,
    padding: Float=50f,
    stroke: Float=20f,
    cap: StrokeCap=StrokeCap.Round,
    touchStroke: Float=50f,
    onChange: ((Float) -> Unit)?=null) {

    //Other code here

    LaunchedEffect(key1=angle) {

        //TODO(Add code here...)
    }

    //TODO(Add code here...)

    Canvas(modifier=modifier.onGloballyPositioned {

            //TODO(Add code here...)
        }

        .pointerInteropFilter {

            //TODO(Add code here...)

        }) {

        drawArc( 
            //TODO(Add code here...)
        ) 

        drawCircle( 
            //TODO(Add code here...)
        ))
    }
}

The //TODO(Add code here...) shows where code snippets will be added to complete the Canvas.

`LaunchedEffect`

Let's begin with the LaunchedEffect block. It will be used to ensure that the thumb indicator doesn't exceed the bounds of the arc by using an if conditional block. It will also be used to set the percentage traversed by the thumb indicator in relation to the arc's length using the invoke() operator.



LaunchedEffect(key1=angle) {

    if (angle < 0.0f && angle > -90f) {
        angle=0.0f
    }

    else if (angle < 0.0f && angle < -90f) {
        angle=180.0f
    }

    else if (angle >=180f) {
        angle=180f
    }

    appliedAngle=angle 
    onChange?.invoke(angle / 180f)
}

The figure 180 was settled on for this tutorial since we are creating a semicircle which usually covers 180°. So if the thumb's position is at 90°, then the percentage covered will be 50%. appliedAngle will be used in a moment when positioning the thumb's position indicator.

The second TODO will be for creating a gradient background for the arc. You can find the snippet in the full code.

The `onGloballyPositioned` and the `pointerInteropFilter` modifiers

onGloballyPositioned is used to position the canvas and its contents. It does so using the LayoutCoordinates' width and height. The center is calculated by halving the width and height. The radius is calculated using either the width or by subtracting half of the stroke's weight and the base padding from the height's half dimensions. The smaller value between the two will be the set radius.



.onGloballyPositioned {
    width = it.size.width
    height = it.size.height
    center = Offset(width / 2f, height / 2f)
    radius = min(width.toFloat(), height.toFloat()) / 2f - padding - stroke / 2f
}

pointerInteropFilter is where the dragging event logic is controlled.



.pointerInteropFilter {
    val x=it.x 
    val y=it.y 
    val offset=Offset(x, y) 

    when (it.action) {

        MotionEvent.ACTION_DOWN -> {
            val d=distance(offset, center) 
            val a=angle(center, offset) 

            if (d >= radius - touchStroke / 2f && d <= radius + touchStroke / 2f) {
                nearTheThumbIndicator=true angle=a
            }

            else {
                nearTheThumbIndicator=false
            }
        }

        MotionEvent.ACTION_MOVE -> {
            if (nearTheThumbIndicator) {
                angle=angle(center, offset)
            }
        }

        MotionEvent.ACTION_UP -> {
            nearTheThumbIndicator=false
        }

        else ->return@pointerInteropFilter false
    }

    return@pointerInteropFilter true
}

The events of interest here are ACTION_DOWN, ACTION_MOVE, and ACTION_UP. ACTION_DOWN is fired when the user's finger first touches the device's screen. ACTION_MOVE when the finger moves on the screen from the point of first contact. ACTION_UP is fired when the finger is lifted off the screen. A when statement is used to help decide which action will be fired.

For all three events, the finger's touch position coordinates(x and y) are captured for use in determining the offset.



val x = it.x
val y = it.y
val offset = Offset(x, y)

The offset will be used to calculate the distance(d) from the thumb and the thumb's indicator. It will also be used in determining the angle(a) where the thumb is on the arc.



val d = distance(offset, center)
val a = angle(center, offset)

You may be wondering why we need the distance. The distance is crucial because we don't want the thumb indicator to move when the user's finger is too far from it, but only when it is near the thumb position indicator. To effect that, the if block under the ACTION_DOWN only allows the thumb indicator to be dragged when:

Is equal or at a slightly greater distance than radius minus half the size of the touch stroke(d >= radius - touchStroke / 2f)
Is lesser than or equal to the arc's radius length plus half the size of the touch stroke(d <= radius + touchStroke / 2f)

When these conditions are met, the event is registered as near the thumb indicator(nearTheThumbIndicator = true).

If an ACTION_MOVE is registered and the finger is at the required proximity, then the thumb indicator's angle on the arc is updated using a helper method called angle(). The helper method's implementation is shown below:



fun angle(center: Offset, offset: Offset): Float {
    val rad = atan2(center.y - offset.y, center.x - offset.x)
    val deg = Math.toDegrees(rad.toDouble())
    return deg.toFloat()
}

It calculates the degree using the atan2 mathematical function. Since it returns the values in radians, it is converted to degrees.

The proximity distance is also calculated using a helper function whose implementation is shown below.



fun distance(first: Offset, second: Offset): Float {
    return sqrt((first.x - second.x).square() + (first.y - second.y).square())
}

It uses the Euclidean distance formula to compute the distance.

Drawing the arc and circle

The arc starts from -180° to 180° since we are moving in a clockwise direction, and that's how the canvas calibrates the angles.



drawArc(
    brush = gradient,
    startAngle = -180f,
    sweepAngle = 180f,
    topLeft = center - Offset(radius, radius),
    size = Size(radius * 2, radius * 2),
    useCenter = false,
    style = Stroke(
        width = stroke,
        cap = cap
    )
)

For the circle, its center is set using sin and cos. The mathematics behind that can be accessed exclusively from this resource.



drawCircle(
    color = Color.White,
    radius = 30f,
    center = center + Offset(
        radius * cos((-180 + appliedAngle) * PI / 180f).toFloat(),
        radius * sin((-180 + appliedAngle) * PI / 180f).toFloat()
    )
)

And that's it. I hope you got some insights on drawing a custom circular slider. Let me hear your thoughts in the comment section below.

Adding a TFLite model to your android app

Terrence Aluda — Wed, 28 Dec 2022 14:24:31 +0000

Hello there. Perhaps you are wondering how to straight-forwardly add some Machine Learning into your app. The documentation currently talks about on-device training. Furthermore, you are likely to run into data type incompatibility errors when trying to run some inferences. In this tutorial, we are going to see how we can add an already-trained model into your app and get predictions from it. It will perform a heart attack disease probability detection. Let's dig in.

Prerequisites

To follow through, you need hands-on knowledge in the following areas:

Python Programming
Machine Learning. Basic deep-learning knowledge is a plus.
Kotlin programming
Android development

You will also need the following tools installed.

TensorFlow. We will use this for creating the model.
We will be using this Kaggle dataset. Download and extract it. Our interest will be the heart.csv file.
Pandas. This will be used to help in the easy manipulation of the dataset.
Scikit-learn. It will be for preprocessing the data.
You also need Android Studio and Jupyter Notebook installed. If you don't have Jupyter Notebook, you can use the normal Python scripts. But for the article, Jupyter Notebook will be used.

What we will be doing

To achieve the goals, we will follow these steps:

Create a TensorFlow model.
Convert it to TFLite.
Create an Android app and install the dependencies needed.
Import the converted TFLite model.
Add the code to access the model and run the inferences.

Creating the TensorFlow model

Be sure to start your Jupyter Notebook server before this.

In your working folder, create a folder called datasets. In the created folder, add the heart.csv file you extracted earlier in it. When done, move back to the root of your folder.

In a new cell, import the modules we need using the code below. (In the next steps, you will be adding the codes in new cells).

from sklearn.model_selection
import train_test_split
import tensorflow as tf
import pandas as pd

These were discussed in the prerequisites section. We will be using the Keras(tf.keras) option provided by TensorFlow.

We then access the dataset and read it using pandas using this code.

file_path = 'datasets/heart.csv'
heart_data = pd.read_csv(file_path)

Create a pipeline that will impute it and then scale it.

from sklearn.impute import SimpleImputer
from sklearn.pipeline import Pipeline
from sklearn.preprocessing import StandardScaler

proc_pipeline = Pipeline([
    ('imputer', SimpleImputer(strategy="median")),
    ('std_scaler', StandardScaler()),
])

Remove the output column.

heart_data_no_output = heart_data.drop("output", axis=1)

Run the pipeline.

heart_data_imputed = proc_pipeline.fit_transform(heart_data_no_output)

Split it into train data, test data, and validation data while maintaining a random state using a seed of 42.

X_train_full, X_test, y_train_full, y_test = train_test_split(heart_data_imputed, heart_data.output, random_state=42)

X_train, X_valid, y_train, y_valid = train_test_split(X_train_full, y_train_full, random_state=42)

Create a class called Model.

class Model(tf.Module):
    def __init__(self):
        input = tf.keras.layers.Input(shape=X_train.shape[1:])
        hidden1 = tf.keras.layers.Dense(50, activation="sigmoid")(input)
        hidden2 = tf.keras.layers.Dense(50, activation="sigmoid")(hidden1)
        output = tf.keras.layers.Dense(1)(hidden2)
        self.model = tf.keras.models.Model(inputs=[input], outputs=[output])
        opt = tf.keras.optimizers.SGD(learning_rate=0.01)
        self.model.compile(loss="mse", optimizer=opt, metrics=['accuracy'])
        self.model.fit(X_train, y_train, epochs=20,
                       validation_data=(X_valid, y_valid))

    @tf.function(input_signature=[
        tf.TensorSpec([None, 13], tf.float32),
    ])
    def predictor(self, x):
        predictions = self.model(x)
        return {
            "prediction": predictions
        }

We create the model(deep learning model) in the constructor. The model contains 4 layers:

One input(input) layer takes in the number of train features as the shape parameter. That will be 13, equating to 13 neurons.
Two hidden layers(hidden1 and hidden2) each with 50 neurons, sigmoid activation functions, and each taking the previous layer as the input. This follows the Keras Functional API architecture. We used the sigmoid activation function since we are trying to get the probability.
The output layer(output) had only 1 neuron since we are outputting the highest probability, which is only one thing.

We use a Stochastic Gradient Descent Optimizer with a learning rate of 0.01. This optimizer will be used when compiling the model. The Mean Squared Error(mse) and accuracy are used for the loss and performance measuring metrics.

In fitting the model, we use 20 epochs while passing in the necessary data.

After the constructor, we have a TensorFlow function called predictor. We pass in the shape of the data(input) and the data type of the input in the function's signature.

    @tf.function(input_signature=[
        tf.TensorSpec([None, 13], tf.float32),
    ])

The input will be passed in as an argument signified by the parameter, x. We use the self.model(x) statement. This returns data containing the model's prediction. We will use a map with a key, prediction, to tap it.

    def predictor(self, x):
        predictions = self.model(x)
        return {
            "prediction": predictions
        }

Convert the model to TFlite

We will first initialize the model.

tcardio_model = Model()

We then save it in a directory called our_model. Here is where we will pass in the signatuure of our Tensorflow function. We give it the signature key, predictor. This will be used by our TFLite model to identify the function.

SAVED_MODEL_DIR = "saved_model"

tf.saved_model.save(
    tcardio_model,
    SAVED_MODEL_DIR,
    signatures={
        'predictor':
            tcardio_model.predictor.get_concrete_function(),
    })

The next code is where will create the TFLite model.

import os

converter = tf.lite.TFLiteConverter.from_saved_model(SAVED_MODEL_DIR)

converter.target_spec.supported_ops = [
    tf.lite.OpsSet.TFLITE_BUILTINS, 
    tf.lite.OpsSet.SELECT_TF_OPS 
]

converter.experimental_enable_resource_variables = True
tflite_model = converter.convert()

model_file_path = os.path.join('tcardio_model.tflite')
with open(model_file_path, 'wb') as model_file:
    model_file.write(tflite_model)

It starts by importing the os module since we are accessing the file system.

The next line simply instructs the Python interpreter to create a variable for a TFLite converter from the saved model.

In the array(converter.target_spec.supported_ops), we add options for enabling TFLite operations.

And finally, we add the TFLite model to the root path.

Run all cells. If everything completes successfully, you
will see a file called tcardio_model.tflite in your working directory.

Creating the Android app and install the dependencies needed

Follow the process of creating an android app. You can choose the Empty Activity option. But we won't modify the UI in any way.

Open the module-level build.gradle file and add the TFLite dependencies. Take note of the versions. There is a newly released version that isn't compatible with what we are going to do next. Stay tuned for the newly updated article.

implementation 'org.tensorflow:tensorflow-lite:2.9.0'
implementation 'org.tensorflow:tensorflow-lite-gpu:2.10.0'
implementation 'org.tensorflow:tensorflow-lite-support:0.4.2'

Sync the Gradle.

Import the converted TFLite model.

After the build is done, create a new folder called assets. Then copy the TFLite model generated into the directory.

In the MainActivity class, we will add the code necessary for accessing the model ad running the inferences. This is achieved in the next step.

Add the code to access the model and run the inferences

Open the MainActivity.kt file. In the file create a companion object and add the model's path.

    companion object {

        private const val MODEL_PATH = "tcardio_model.tflite"
    }

Then declare a class-level variable for the TFLite model using a lazy delegation. We pass in the TFLite file(in ByteBuffer form) in the Interpreter class.

    private val tflite by lazy {
        Interpreter(
            FileUtil.loadMappedFile(this, MODEL_PATH))
    }

Due to the compatibility issues between Kotlin's(Java) Float and TensorFlow Float(float32 or float64) datatypes, we need a helper function to convert the Kotlin Float(s) to float buffers before sending them to the TFLite model. We will use the method below.

    fun floatArrayToBuffer(floatArray: FloatArray): FloatBuffer? {
        val byteBuffer: ByteBuffer = ByteBuffer
            .allocateDirect(floatArray.size * 4)

        byteBuffer.order(ByteOrder.nativeOrder())

        val floatBuffer: FloatBuffer = byteBuffer.asFloatBuffer()

        floatBuffer.put(floatArray) 
        floatBuffer.position(0)
        return floatBuffer
    }

It first allocates a capacity of 4 since Java Floats are 4 bytes in size.

NOTE: We are referring to Java because Kotlin is based on Java and still uses some of Java's classes.

We then set the buffer allocation order to be the same as that of the underlying JVM machine. We then use the asFloatBuffer() method to convert the byte buffer to a float buffer. The method finishes by adding the float array we will pass into the float buffer we just created and sets the float buffer's start position to 0.

For performing the prediction, we will need a method called doInference().

    fun doInference():  Map<String, FloatBuffer?> {
        val input = floatArrayOf(63.0F, 1.0F, 3.0F, 145.0F , 233.0F , 1.0F, 0.0F, 150.0F, 0.0F, 2.3F, 0.0F, 0.0F, 1.0F)

        val inF = floatArrayToBuffer(input)

        var outs = floatArrayOf(0.0F)

        var outF = floatArrayToBuffer(outs)

        val inputs: Map<String, FloatBuffer?> = mapOf("x" to inF)

        var outputs: Map<String, FloatBuffer?> = mutableMapOf("prediction" to outF)

        tflite.runSignature(inputs, outputs, "predictor")
        return outputs
    }

The method sets our input array to the floatArrayToBuffer method we have just finished creating. We do the same for the output variable. We need this as it is what TFLite will map the output to.

The maps are used for matching the inputs and the outputs according to what was set in the TensorFlow model's function. Remember we had the input as x and the output as prediction.

We use the TFLite's runSignature method to get the prediction. The input, the output variable, and the signature of the Tensorflow function are passed in as parameters.

To get the output, we will add some statements in the onCreate method. These are the statements.

        try {
            var pred = doInference()

            var cb = pred.get("prediction")

            Log.i("PREDICTION: ", cb?.get(0).toString())
        }catch(e: Exception){
            Log.e("ERR: ", e.toString())
        }

W use a try-catch block to get any exception that may occur. Since we said the TensorFlow function returns a map, we will use the Map.get() method while passing in the key to retrieve the corresponding output. In this case, it will be a float buffer. The prediction value is normally returned as the first value of the float buffer returned. So we used the method get(0) while passing in the position.

On checking the logcat, you will see such an output.

PREDICTION:             com.bigdolphin.predtest    I  0.78253055

That means the model gave a 78.25% chance of a heart attack. This is in agreement with the sigmoid curve. Above 0.5 is 1 and below that is 0. The input data is from the first row of the dataset whose output is 1.

Conclusion

That is it. We have seen how to use a TFLite model in our apps. We did so by first creating a model from scratch, converting it, and then feeding it to the Android platform where we run an inference. I hope you gained some insights. In case of any questions, inaccuracies, or contributions, please feel free to leave a comment or email me at aludaterrence@gmail.com.

Have a good one.

Understanding Dijkstra's Shortest Path Algorithm using Python

Terrence Aluda — Wed, 19 May 2021 20:42:05 +0000

In this article, we are going to talk about how Dijkstras algorithm finds the shortest path between nodes in a network and write a Python script to illustrate the same.

Dijkstra's Shortest Path Algorithm in Network routing using Python

We will use an example of network routing.

A basic understanding of Python and its OOP concepts is needed.

We will first talk about some basic graph concepts because we are going to use them in this article.

A basic introduction to Graphs

Graphs are pictorial representations of connections between pairs of elements. The graphs in our case represent a network topology.

The connections are referred to as edges while the elements are called nodes.

We have three types of graphs:

Undirected: You can move using the edges towards any direction.
Directed: The direction you can move is specified and shown using arrows.

Weighted: The edges of weighted graphs denote a certain metric like distance, time taken to move using the edges, etc.

Dijkstra's shortest path algorithm

This algorithm is used to calculate and find the shortest path between nodes using the weights given in a graph. (In a network, the weights are given by link-state packets and contain information such as the health of the routers, traffic costs, etc.).

Summary of the working

It starts with the source node and finds the rest of the distances from the source node. Dijkstra's algorithm keeps track of the currently known distance from the source node to the rest of the nodes and dynamically updates these values if a shorter path is found.

A node is then marked as visited and added to the path if the distance between it and the source node is the shortest. This continues until all the nodes have been added to the path, and finally, we get the shortest path from the source node to all other nodes, which packets in a network can follow to their destination.

We need positive weights because they have to be added to the computations to achieve our goal. Negative weights would make the algorithm not give the desired results.

An example illustrating the working of the algorithm

The source node here is node 0. We assume the weights show the distances.

Initially, we have this list of distances. We mark the initial distances as INF (infinity) because we have not yet determined the actual distance except for node 0. After all, the distance from the node 0 to itself is 0.

NODE	DISTANCE
0	0
1	INF
2	INF
3	INF
4	INF
5	INF
6	INF

We also have a list to keep track of only the visited nodes, and since we have started with node 0, we add it to the list (we denote a visited node by adding an asterisk beside it in the table and a red border around it on the graph).

{0}

We check the distances 0 -> 1 and 0 -> 2, which are 2 and 6, respectively. We first update the distances from nodes 1 and 2 in the table.

NODE	DISTANCE
0	0
1	2
2	6
3	INF
4	INF
5	INF
6	INF

We then choose the shortest one, which is 0 -> 1 and mark node 1 as visited and add it to the visited path list.

NODE	DISTANCE
0	0
1	2*
2	6
3	INF
4	INF
5	INF
6	INF

{0,1}

Next, we check the nodes adjacent to the nodes added to the path(Nodes 2 and 3). We then update our distance table with the distance from the source node to the new adjacent node, node 3 (2 + 5 = 7).

To choose what to add to the path, we select the node with the shortest currently known distance to the source node, which is 0 -> 2 with distance 6.

NODE	DISTANCE
0	0
1	2*
2	6*
3	7
4	INF
5	INF
6	INF

{0,1,2}

Next we have the distances 0 -> 1 -> 3(2 + 5 = 7) and 0 -> 2 -> 3(6 + 8 = 14) in which 7 is clearly the shorter distance, so we add node 3 to the path and mark it as visited.

NODE	DISTANCE
0	0
1	2*
2	6*
3	7*
4	INF
5	INF
6	INF

{0,1,2,3}

We then check the next adjacent nodes (node 4 and 5) in which we have 0 -> 1 -> 3 -> 4 (7 + 10 = 17) for node 4 and 0 -> 1 -> 3 -> 5 (7 + 15 = 22) for node 5. We add node 4.

NODE	DISTANCE
0	0
1	2*
2	6*
3	7*
4	17*
5	22
6	INF

{0,1,2,3,4}

In the same way, we check the adjacent nodes(nodes 5 and 6).

Node 5:

Option 1: 0 -> 1 -> 3 -> 5(7 + 15 = 22)
Option 2: 0 -> 1 -> 3 -> 4 -> 5(17 + 6 = 23)
Option 3: 0 -> 1 -> 3 -> 4 -> 6 -> 5(17 + 2 + 6 = 25) We choose 22.

Node 6
0 -> 1 -> 3 -> 4 -> 6(17 + 2 = 19)

NODE	DISTANCE
0	0
1	2*
2	6*
3	7*
4	17*
5	22*
6	19*

{0,1,2,3,4,5,6}

Python code and explanation

We have the Python code below to illustrate the process above:


class Graph(): 
    # A constructor to iniltialize the values
    def __init__(self, nodes):
        #distance array initialization
        self.distArray = [0 for i in range(nodes)]
        #visited nodes initialization
        self.vistSet = [0 for i in range(nodes)]
        #initializing the number of nodes
        self.V = nodes
        #initializing the infinity value
        self.INF = 1000000
        #initializing the graph matrix
        self.graph = [[0 for column in range(nodes)]  
                    for row in range(nodes)]

    def dijkstra(self, srcNode):
        for i in range(self.V):
          #initialise the distances to infinity first
          self.distArray[i] = self.INF
          #set the visited nodes set to false for each node
          self.vistSet[i] = False
        #initialise the first distance to 0
        self.distArray[srcNode] = 0
        for i in range(self.V): 

            # Pick the minimum distance node from  
            # the set of nodes not yet processed.  
            # u is always equal to srcNode in first iteration 
            u = self.minDistance(self.distArray, self.vistSet) 

            # Put the minimum distance node in the  
            # visited nodes set
            self.vistSet[u] = True

             # Update dist[v] only if is not in vistSet, there is an edge from 
            # u to v, and total weight of path from src to  v through u is 
            # smaller than current value of dist[v]
            for v in range(self.V): 
                if self.graph[u][v] > 0 and self.vistSet[v] == False and self.distArray[v] > self.distArray[u] + self.graph[u][v]: 
                        self.distArray[v] = self.distArray[u] + self.graph[u][v] 

        self.printSolution(self.distArray)

    #A utility function to find the node with minimum distance value, from 
    # the set of nodes not yet included in shortest path tree 
    def minDistance(self, distArray, vistSet): 

        # Initilaize minimum distance for next node
        min = self.INF

        # Search not nearest node not in the  
        # unvisited nodes
        for v in range(self.V): 
            if distArray[v] < min and vistSet[v] == False: 
                min = distArray[v] 
                min_index = v 

        return min_index

    def printSolution(self, distArray): 
        print ("Node \tDistance from 0")
        for i in range(self.V): 
            print (i, "\t", distArray[i])
#Display our table
ourGraph = Graph(7) 
ourGraph.graph = [[0, 2, 6, 0, 0, 0, 0], 
        [2, 0, 0, 5, 0, 0, 0], 
        [6, 6, 0, 8, 0, 0, 0], 
        [0, 0, 8, 0, 10, 15, 0], 
        [0, 0, 0, 10, 0, 6, 2], 
        [0, 0, 0, 15, 6, 0, 6], 
        [0, 0, 0, 0, 2, 6, 0],
        ]; 

ourGraph.dijkstra(0)

Explanation

We have a constructor for giving initial _init_ values and three user-defined functions:

printSolution()
minDistance()
dijkstra()

The constructor takes the parameter nodes, which is the number of nodes to analyze.

def __init__(self, nodes):
    #distance array initialization
    self.distArray = [0 for i in range(nodes)]
    #visited nodes initialization
    self.vistSet = [0 for i in range(nodes)]
    #initializing the number of nodes
    self.V = nodes
    #initializing the infinity value
    self.INF = 1000000
    #initializing the graph matrix
    self.graph = [[0 for column in range(nodes)]  
        for row in range(nodes)]

dijkstra() takes a parameter, the source node (srcNode). It then first initializes each distance to infinity and visited status to false to show the node is unvisited using a for loop and the initial distance from the source node to 0.

In the next loop, it first picks the node with the minimum distance from the set of nodes not yet processed.u is always equal to srcNode in the first iteration.

It then adds the node with the minimum distance in the visited nodes set by setting the value to True. In the last loop, which is in the second loop, the code updates the distance of the node from node 0.

dist[v] only if it is not in visited list array, vistSet[], and if there is an edge from u to v, and the total distance of path from srcNode to v through u is less than the current value of dist[v].

It then calls the printSolution() to display the table after passing the distance array to the function.

def dijkstra(self, srcNode):
    for i in range(self.V):  
        self.distArray[i] = self.INF
        self.vistSet[i] = False
        self.distArray[srcNode] = 0
    for i in range(self.V): 
        u = self.minDistance(self.distArray, self.vistSet) 
        self.vistSet[u] = True
        for v in range(self.V): 
            if self.graph[u][v] > 0 and self.vistSet[v] == False and self.distArray[v] > self.distArray[u] + self.graph[u][v]: 
                self.distArray[v] = self.distArray[u] + self.graph[u][v] 
    self.printSolution(self.distArray)

minDistance()checks for the nearest node in the distArray not included in the unvisited nodes in the array vistSet[v]. It then returns the node's index. It takes two arrays as parameters distArray and vistSet[v].

def minDistance(self, distArray, vistSet): 
    min = self.INF
    for v in range(self.V): 
        if distArray[v] < min and vistSet[v] == False: 
            min = distArray[v] 
            min_index = v 
    return min_index

printSolution() is used to display the final results, which are the nodes and their respective tables stored in an array distArray, that it takes as a parameter.

def printSolution(self, distArray):
    print ("Node \tDistance from 0")
        for i in range(self.V): 
            print (i, "\t", distArray[i])

We then create an object ourGraph from our Graph() class and pass to it the number of nodes.

ourGraph = Graph(7)

Next, create the matrix to store the distances.

ourGraph.graph = [[0, 2, 6, 0, 0, 0, 0], 
        [2, 0, 0, 5, 0, 0, 0], 
        [6, 6, 0, 8, 0, 0, 0], 
        [0, 0, 8, 0, 10, 15, 0], 
        [0, 0, 0, 10, 0, 6, 2], 
        [0, 0, 0, 15, 6, 0, 6], 
        [0, 0, 0, 0, 2, 6, 0],
        ];

The matrix is the same as the table shown below:

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

The topmost row and most left column represent the nodes. We read a node from the left column and check its distance with the topmost row. The intersection shows the distance. The distance is 0 if the nodes are not adjacent.

For example:

The distance of 0 from 0 is 0.

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

The distance of 5 from 3 is 15.

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

Finally, we display our results.

ourGraph.dijkstra(0)

The output will be:

Node    Distance from 0
0        0
1        2
2        6
3        7
4        17
5        22
6        19

That's all for now. We now have a better idea on how Dijkstra's Algorithm works. I hope you can work with different graphs and language of your own.

Have a good one.

The images used were sourced from Free Code Camp.

Happy coding.

Big O notation using Python

Terrence Aluda — Wed, 19 May 2021 20:14:47 +0000

We all need a way to measure the performance (efficiency) of our algorithms as they scale up. We can perform an analysis on the efficiency by considering the number of resources, in our case, time and space.

The space used is determined by the number and sizes of variables together with the data structures being used. The time is determined by the elementary operations that must be performed during the algorithm execution.

In this article we will be going over time and space complexities and how the Big O notation is a standard measure of complexity.

That said, the time to run our algorithms is highly dependent on the software and hardware environment they run in. They are influenced by factors such as:

Read/Write Speed
Number of programs running
RAM size
Processor type
Machine configuration
Compilers or libraries being used

We therefore need a methodology that is independent of the software and hardware environment that takes into account all possible inputs.

This is done by a high-level description of the algorithm by associating each algorithm with a function f(n) that characterizes the running time of the algorithm in terms of the input size n.

Given the functions f(n) and g(n), we do say that f(n) is Big O of g(n) being written as:

f(n) is O(g(n))

Therefore Big O, (pronounced as Big Oh), describes how well the performance of our algorithms are as the input data grows larger.

It assists us in knowing which algorithm suits which task, and which one is not by estimating the different runtimes of the algorithms. The estimation of how the runtime varies with the problem size is called the runtime complexity of an algorithm.

A simple example of how different algorithms use different runtime complexities, is a tale of a South African telecommunication company with a slow network speed and a pigeon. The company wanted to send some information to its other office which was 50 miles away.

The information was given to both using data signals and an envelope respectively. Ironically, the pigeon delivered the data ahead of the telco network. Here, the pigeon could deliver any amount of information whether too large or too little at the same constant duration while the network's delivery time was inversely proportional to the amount of information being sent.

There are many notations of Big O but here we are going to discuss a few of them which are:

O(1)
O(n)
O(n²)
O(log2n)

In the article, we will also estimate the Big O of a sample algorithm.

In the code examples, we will use Python for illustrations but you can rewrite them using a language of your choice.

1. O(1) Constant runtime complexity

This means that the algorithm does a fixed number of operations no matter the number of inputs.

Let's look at the code snippet below:

def first_element(array):
    print(array[0])

The function first_element() takes an array passed in and prints the first element and does not consider how many elements are present in the array.

Take a look at the graph representation below:

O(1) graph
Image Source

2. O(n) Linear runtime complexity

This means that the runtime complexity of your algorithm increases linearly with the size of the input data.

Example:

def show_array_elements(array):
    for i in range(len(array)):   
        print(array[i]+"\n")

The code takes in an array using the function show_array_elements() and displays the array elements.
If the array passed in as an argument only has 1 element, then the algorithm will only take 1 operation to run and would similarly take 300 operations for an array with 300 elements. The number of times the loop iterates depends on the number of array elements.

O(n) graph
Image Source

3. O(n²) Quadratic runtime complexity

The algorithm varies with the square of the problem size, n.

Example:

def add_array_elements(array):  

    sum = 0  
    for i in range(len(array)):      
        for j in range (len(array)):         
            sum += array[i]+array[j] 

    return sum

The code has two loops, the outer, and the inner. The outer loop iterates n times giving an element to the inner loop which again loops n times, per one loop of the outer array, adding the element given by the outer array and all the array elements.

Taking a case where the array has 3 elements; the outer loop takes 3 operations in total to iterate over each element. For every 3 operations of the outer loop, the inner loop also takes 3 operations to iterate over each element. That is 3 × 3 operations amounting to 9.

O(n²) graph
Image Source

4. O(log2n)- Logarithmic runtime complexity

This is associated with the binary search algorithm that searches by doing necessary halvings to get the item being searched for. The essence of this method is to compare the value being searched for, let's name it X, with the middle element of the array and if X is not found there.

We then decide which half of the array to look at next, which is repeated until X is found. The expected number of steps depends on the number of halvings needed to get from n elements to 1 element.

Have a look at the code and graphical illustrations below:

def binary_search(array, query):
    lower_bound = 0
    upper_bound = len(array)-1
    found_bool = False
    while (lower_bound <= upper_bound and found_bool == False):

        middle_value = (lower_bound + upper_bound) // 2

        if array[middle_value] == query:
           found_bool = True
           return found_bool

        elif query > array[middle_value]:
           lower_bound = middle_value + 1 

        else:
           upper_bound = middle_value - 1

    return found_bool

array = [1,2,3,4,5,6,7,8,9]
query = 7

val_found = binary_search(array, query)

Step 1
The code takes in a sorted array with 9 elements through the function binary_search() and searches for the value, the parameter named query, 7. It divides it in half and checks if 7 is in the middle.

1	2	3	4	5	6	7	8	9

Step 2
The middle value is 5 and our algorithm checks it with 7 and since 7 is greater than 5, then it will move to the right-hand side.

1	2	3	4	5	6	7	8	9

Step 3
We now have an array with 4 elements. The algorithm will divide it by half to get two arrays with 6 & 7 and 8 & 9.
The one with 8 & 9 will be ignored and the algorithm will now check and compare 6 and 7.

1	2	3	4	5	6	7	8	9

Step 4
The comparison will be done and we will arrive at 7.

1	2	3	4	5	6	7	8	9

Further example inputs and the maximum number of steps to be taken are shown in the table below:

n	log2n
10	4
100	7
1000	10
10000	14
100000	17

O(log2n) graph
Image Source

Determining the Big-O of an algorithm

Here we look at the best-case and worst-case scenarios.

Best and worst-case scenarios

We will base our inferences based on the code below:


def linear_search(array, query):

    for i in range(len(array)):
        if array[i] == query:
            return i
    return -1

def binary_search(array, value):
    lower_bound = 0
    upper_bound = len(array)-1
    found_bool = False
    while (lower_bound <= upper_bound and found_bool == False):

        middle_value = (lower_bound + upper_bound) // 2

        if array[middle_value] == value:
           found_bool = True
           return found_bool

        elif value > array[middle_value]:
           lower_bound = middle_value + 1 

        else:
           upper_bound = middle_value - 1

    return found_bool

array = [1,2,3,4,5,6,7,8,9]
value = 7

The best case for linear_search() would be finding the value 1, O(1), while the worst case would be finding the last array element or a value not included in the array O(n). This is because it needs to traverse each element giving an O(n) complexity.

The best case for the binary_search() would be searching for the value of 5, which is the value in the middle of the array O(1). The worst-case would be searching the value 1 or 10, the first and the last elements of the array, or a value not included in the array. This is because the algorithm needs to make the halvings necessary until it reaches the first and the last elements (O(log2n)).

Checking the Big O of a sample code

We will look at the worst-case scenario perspective.

We will estimate the Big O of the code below (we are simply estimating its complexity, no conditional checks have been put for the code):

def array_arithmetic(array):

    value = 0  # O(1) complexity

    for e in range(len(array)): # O(n) complexity

        for j in range(10): # O(10) complexity

            for k in range(len(array)//2): # O(n/2) complexity

                value += array[e] + array[j] + array[k] # O(1) complexity

    return value # O(1) complexity

We should start with the innermost loop.

The innermost loop has O(n/2) complexity while its operation has O(1) complexity. The innermost loop therefore has (n/2) * (1) complexity.
The second inner loop has O(10) complexity and the inner loop (in No. 1) of this loop has O(n/2) meaning the whole second inner loop has (10) * (n/2) = O(5n) complexity.
An outer loop has O(n) complexity. The inner loop (No. 2) of this outer loop has in total O(5n) complexity.
So, they have n*5n = 5n² complexity.
Combining the loop's complexity together with the two operations outside the loop, we get 1+1+5n² = O(2+5n²).

We drop all constants when estimating the Big O notation in that we remain with O(n²) instead of O(2+5n²).

The code above therefore has O(n²) complexity.

That's all for now. Hope you will consider the scalability of your algorithm next time you write one.

Happy Coding!

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

DEV Community: Terrence Aluda

Chatbot personalization: How to build a chatbot that uses memory to create a better user experience

Prerequisites

What is personalization?

What is AI memory?

What is mem0?

Why mem0?

Building the chatbot

Building the chatbot without memorization

Creating the files

Creating a virtual environment

Installing the dependencies

Setting the Gemini API key

Calling the Gemini API

Capturing the user input (REPL)

Running the chatbot

Adding AI memory to the chatbot

Creating the Singleton class

Modifying the chatbot.py file

Modifying the main.py file

Running the memorized chatbot

Building your own memory vs using mem0

Next steps

Creating bouncing animations using Sine waves (Kotlin + Jetpack Compose): Part 2

What we will be doing

Drawing the heart

Explanation

Implement the fade in and fade out

Controlling opacity with alpha

Implementing the size increment and reduction

Fade-in growth

Setting out the path using the Sine wave formula

Explanation

Displaying the multiple bouncing hearts

Amplitudes list

Active hearts amplitudes

Launching staggered starts

Displaying the hearts

First heart (index 0):

Hearts at index 3 and 4:

All other hearts:

Creating bouncing animations using Sine waves (Kotlin + Jetpack Compose): Part 1

Analysis of the heart movements

A primer on wave properties

The Sine wave formula

How Cerbos minimizes latency in Authorization workflows

Understanding the latency problem using real-world examples

Cerbos features for tackling latency challenges

1. Statelessness design

2. Decoupled architecture

3. Edge deployment capabilities

4. Permission-aware data filtering

Wrapping up

10 reasons why you should choose Cerbos as your application's authorization provider

1. Get started up and running quickly

2. Flexible authorization that works anywhere

3. Multiple access control methods

4. Zero trust security model

5. Streamlined authorization management via the Cerbos Hub

6. Built-in Policy Testing

7. Experiment with your policies using the Cerbos Playground

8. Support for DevOps

9. Scalability tailored to your applications

10. Reliable support for all of your challenges

Final thoughts

A custom circular progress indicator using the Canvas and animation

Creating the arcs

Adding the animation (rotating the arc)

The fundamentals of building a circular draggable Slider in Jetpack Compose

The canvas

LaunchedEffect

The onGloballyPositioned and the pointerInteropFilter modifiers

Drawing the arc and circle

Adding a TFLite model to your android app

Prerequisites

What we will be doing

Creating the TensorFlow model

Convert the model to TFlite

Creating the Android app and install the dependencies needed

Import the converted TFLite model.

Modifying the `chatbot.py` file

Modifying the `main.py` file

`LaunchedEffect`

The `onGloballyPositioned` and the `pointerInteropFilter` modifiers

3. O(n²) Quadratic runtime complexity

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0

	0	1	2	3	4	5	6
0	0	2	6	0	0	0	0
1	2	0	0	5	0	0	0
2	6	6	0	8	0	0	0
3	0	0	8	0	10	15	0
4	0	0	0	10	0	6	2
5	0	0	0	15	6	0	6
6	0	0	0	0	2	6	0