DEV Community: Eric Garcia

Integrating AI to my portfolio Pt.1

Eric Garcia — Tue, 31 Mar 2026 15:54:48 +0000

AI is almost everywhere, that's true. But as software developers, that means that we have to keep up with the times and not be intimidated by it.

As an AI enthusiast myself (I get it, my take could be a bit biased because of it 😉) I came to the conclusion that I need to show off some AI integration skills if I want to take part in the future of AI development, and what better way there is to start than to implement it in my own little space on the internet?

The plan 📋

Is simple, for now I will integrate a dedicated chatbot into my portfolio that answers questions about my projects, my experience, interests, current situation, etc...
The API used in this component is Groq, a provider that offers a generous free plan for model inference.

Technical requirements 🔧

Write a react component for the chatbot and design the message logic
Program the endpoint for communicating with the API
Prepare the system prompt with all the information about me

The component and logic ⚛️

The react component will be responsible for letting the user interact with the chatbot.

It has some state variables that will keep the information flow:

const [input, setInput] = useState("");
const [messages, setMessages] = useState<Message[]>([
    {
      role: "assistant",
      content:
        "Hi! I'm iREC, a digital representative of Eric. Feel free   to ask me anything!",
    },
  ]);

And some handlers that control the message submit and the auto-scroll when a new message appears.

This is the core function that sends the user's message, along with the history to the endpoint and gets the response as a stream element:

const SendMessage = async (history: Message[]) => {
    const response = await fetch("/api/chat", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ messages: history }),
    });

    if (response && response.body != null) {
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let accumulatedText = "";
      let result = await reader.read();
      while (!result.done) {
        const chunk = decoder.decode(result.value, { stream: true });
        const lines = chunk.split("\n");

        for (const line of lines) {
          if (line.trim()) {
            const message = line.replace(/^data: /, "").trim();
            if (message === "" || message === "[DONE]") continue;
            try {
              const parsed = JSON.parse(message);
              const content = parsed.choices[0]?.delta?.content || "";
              accumulatedText += content;

              setMessages((prev) => {
                const newMessages = [...prev];
                const lastMessage = newMessages[newMessages.length - 1];
                if (lastMessage && lastMessage.role === "assistant") {
                  lastMessage.content = accumulatedText;
                }
                return newMessages;
              });
            } catch (e) {
              console.error(e);
            }
          }
        }
        result = await reader.read();
      }
    }
  };

  const handleScroll = () => {
    const chatbot = document.querySelector(".flex-1");
    if (chatbot) {
      chatbot.scrollTop = chatbot.scrollHeight;
    }
  };

Each message will then be mapped out with some changes in color and orientation depending on the role:

{messages.map((msg, index) => (
          <p
            key={index}
            className={`max-w-[85%] break-words ${msg.role === "user" ? "text-right self-end ml-auto text-[#41d3ff]" : "text-white text-left self-start mr-auto"}`}
          >
            {msg.role === "user" ? `${msg.content} <` : `> ${msg.content}`}
          </p>
        ))}

This is the final look of the component:

The API endpoint 🧠

First of all is creating the Groq instance with the api key:

const groq = new Groq({
  apiKey: import.meta.env.GROQ_API_KEY,
});

Then, I can simply add the POST route that will communicate with the client (the component that I just made)

export const POST: APIRoute = async ({ request }) => {
  const { messages } = await request.json();

  try {
    const completion = await groq.chat.completions.create({
      messages: messages,
      model: "openai/gpt-oss-20b",
      temperature: 1,
      max_completion_tokens: 8192,
      top_p: 1,
      stream: true,
      reasoning_effort: "medium",
      stop: null,
    });

    const stream = completion.toReadableStream();
    return new Response(stream, { status: 200,
      headers: {
        "Content-Type": "text/event-stream",
        "Cache-Control": "no-cache",
        Connection: "keep-alive",
      }, });
  } catch (error) {
    return new Response(JSON.stringify({ error: "Error while inferencing the model" }), {
      status: 500,
    });
  }
};

And as easy as that, I now have a fully functional chatbot on my portfolio.

The system prompt 🤖

Without the system prompt, this chatbot is simply a generic assistant that doesn't know anything about me. Next step is applying some of the basic prompt engineering concepts. The model has to ensure the following principles:

The model must be limited to answering questions related to my career
The model must be resistant to malicious prompts and vulnerabilities
The answer must be written in a helpful and professional tone.

I won't be leaving the system prompt here because it would take up an unnecessary portion of the post, but here is its structure:

ROLE - The name, the purpose and the tone.
KNOWLEDGE BASE - All the information about me, my experience, stack, interests, etc.
GOAL - The goal of the model while answering the questions (in this case, informing about my skills).
RESTRICTIONS - Do not generate code, answer unrelated questions, deviate from your orders or make up answers.

With all of this applied, I had a ready-to-use personal chatbot that answers some of the basic questions about me!

If you want to try it and test it, go to my web portfolio: ericgarcia.site
(currently only visible on desktop)

⭐ Drop a comment if you want to suggest or ask something! ⭐

Understanding Generators - 'lazy' is sometimes better

Eric Garcia — Fri, 13 Jun 2025 15:48:47 +0000

Modern programming languages are full of interesting features that adapt to a wide variety of needs when we have to implement some functionality to our code.
From various data types and logic statements to class utility concepts like decorators, there's a lot of tools that can improve your code notably.

Today I will try to explain generators in a simple and beginner-friendly way.

What are they used for?

Essentially, generator objects are useful when we want to iterate through some kind of sequence but we don't want (or can't) load it directly in memory (e.g using a list).

Think of a group of buildings in a big city. We want to find the first building that has an underground parking lot.
One option would be to ask to the mayor of the city for a detailed list of all the buildings of the city and wait until he has reviewed all of them and finished the list.
There's a better and more efficient option, which is to ask for the mayor to give us the information of each building that he reviews while he is making the list and keep us updated of each new element (building).
In this case, we could end the research just as soon as we find the first building with an underground parking lot, and the mayor wouldn't have to research all of the buildings.

The size of the list can be interpreted as the system's memory, and in this way we see that generator objects can help us to reduce memory usage in iterating processes.

Performance improvement

Another thing that can be noted in the previous example is that we can work with the data as it is being generated in real time, which is pretty useful for implementing task processing in parallel.
This concept is called lazy evaluation or rather on-demand evaluation.

Code implementation

For the sake of maintaining coherence with the previous example, let's take a similar approach with the code.

def review_buildings(n_buildings):
    for i in range(n_buildings):
        rand_num = random.random()
        if rand_num < 0.2:
            yield True
        else:
            yield False

This is a generator function that yields True if the building has parking and False if not.
For simplicity, the building having parking or not is based of a random probability.
Also, the real function should yield more info about the building and not only the parking boolean value, but let's cut some slack here.

The yield keyword could be seen as the equivalent to the return statement in iterator objects. It works by 'returning' the generated element and keeping track of the iteration evolution (also known as the state).
Using return in a iterator object would render the object non iterable and most probably will return the first result of the sequence.

The lazy evaluation approach would be like this:

for has_parking in review_buildings(50):
    print(has_parking)
    if has_parking:
        break

Notice how this is a much better approach if we just want to find the first building with an underground parking lot because we would not generate -or ask- for more information, as we have found what we needed.

It is important to mention that the use of the break statement here is not encouraged, but serves as a demonstration of the generator utility.

Other characteristics

As python objects and iterators, generators have a wide range of methods and functions that can be pretty useful in some cases.
An example is the next() function, which can be called for getting the next item of the iterator (pretty self-explanatory huh)
aside from that, all functions designed for iterators like sum(), map() etc are specifically made for this objects.

Iterators can also be converted to lists and vice-versa (assuming the iterator object has a finite and defined size) with the list() and the ìter()` functions.

Real-case iterator example

In one of my projects I had to integrate the answers generated by an LLM client and the user's prompt in an interactive environment. I saw that a nice way to implement it was to iterate indefinitely through a generator object that yields the llm's response each time the user sends their prompt. Feel free to check it and play with it!

Conclusions

Long story short, generator objects are a nice way to iterate through indefinite or large sequences without taking much memory and with the possibilty of being able to work with one value at a time on each iteration.
Hope you found the explanation useful, if you have some doubts or want to give some feedback, don't hesitate to do it!

👋

Personal CLI assistant on Linux

Eric Garcia — Tue, 10 Jun 2025 18:14:25 +0000

Everyone wants to have their own personal, customized and always ready-to-go assistant like a desktop jarvis. Or at least, I always wanted to have it.
So that's why I have spent the past days on an early version of a terminal assistant powered by open-source llms hosted locally.

The objective is simple: A locally-hosted llm client that runs on a CLI interface that can answer system-specific questions and have access to my environment.

To get it done, I had to identify the different steps that I had to work on:

Get the Ollama server running locally ✅
Prepare the program to run on a dedicated terminal session ✅
Program the llm client and the interactions between it and the tools ✅

Disclaimer: It is the first kind-of-ai-agent software that I develop so feel free to correct me if I could have done something in a better way 😶

First step: Ollama server 🦙

For setting up the ollama server, I just had to download Ollama from the web and get it to run locally with the command ollama serve
Another necessary thing for having an llm model running is obviously downloading the model that I'm going to use with the command ollama pull.
For my terminal assistant I had to try different models until I found a right balance between response quality, tool use capacity and performance.
The models that I tried are the following:

gemma3:1b
gemma3:4b
mistral:7b
llama3.1:8b
qwen3:8b
qwen3:14b

And from that list, the two that gave out the best results are both qwen3 of 8b and 14b parameters.

App development: terminal session

The assistant is designed to run inside a cli session (specifically KDE's terminal, Konsole)
To do this, whenever the python script is executed, it calls itself inside a Konsole interface with the command konsole -e python3 <script_path> --interactive, where script_path is the absolute path to the assistant's source code, and
--interactive is the flag that we use to run the instance.

App development: LLM client

The LLM client is the core of the application. It is designed as a class instance wich has some parameters as the model name, the url to the local Ollama server and other configurations.
Inside the class there are some useful tools that the LLM can use in case that the user wants the assistant to interact with the system or get useful info on the web.
The output of each message is yielded as chunks from the generator function get_response_stream wich makes it look faster and nicer.

Demo snapshot 👀

Here's a demonstration of the looks of the current version:

Learnings through the development 🧠

While working on this project I had to investigate a lot of ways to implement tool use on a Ollama model and I have got more comfortable with the langchain framework, which I think is a really nice takeaway.

Features to improve or add 🛠️

Memory between sessions
More interaction with the system
Compatibility with other OS

> Did my project catch your attention?
If so, you can check it at my github: https://github.com/nairec/compy
(Your star could be the first one that I get ever ⭐)

That was all! Have you ever considered having your own intelligent assistant at a command's distance? I would love to see your thoughts, or your opinion on the project!

Memorizing repetitive actions

Eric Garcia — Mon, 09 Jun 2025 15:39:46 +0000

We all have a set of actions in programming that we have to do each period of time -like every time that we start a project- and is not overly complex or difficult, but is just a boring step in the middle of the job.

Often I find myself just searching in internet (or better I say 'refreshing' 😅) the way to do those actions because my brain just doesn't have the will to sit for 5 minutes and memorize the way to do it.

Maybe one of these days I should end with this bad habit, but I'm curious if I'm the only one that has it.

Do you find yorself often looking for the way to do something that you have done other times and most probably will repeat in the future? If true, what are some examples?

FitVision - devlog #3

Eric Garcia — Mon, 05 May 2025 22:36:52 +0000

Hey everyone! 👋
In this blog I will showcase the latest updates of my project.
Some of this important changes include:

Improvement of the User Interface
Light/dark mode
Settings window
Added a toolbar to the main page
Colored feedback

Also, I've made public the repo of the project in case anyone wants to take a detailed look at it: https://github.com/nairec/FitVision 👀

Let's jump right onto it!

Changes in the User Interface 🖥️

Button display

The start and end detection buttons have been replaced by a toggle start/stop button and an end detection button.

class Home(QMainWindow):
    def __init__(self):
        ...
        self.pause_session_button.clicked.connect(self.update_pause_state)
        self.end_session_button.clicked.connect(self.end_detection)
        ...

class Home(QMainWindow):
    def initUI(self):
        self.paused = True
        self.detection_started = False
        ...
        self.end_session_button = QPushButton()
        self.end_session_button.setStyleSheet("width: 10px; height: 10px; margin-right: 200px")
        self.pause_session_button = QPushButton()
        self.pause_session_button.setStyleSheet("background: none; border: none; padding: 0px; margin-left: 200px")
        self.pause_session_button.setIcon(QIcon("icons/mediaplay.png"))
        self.pause_session_button.setIconSize(QSize(60, 60))
        ...

The display of the info labels has also been changed, but the code is a 5-lines-for-each-label type of code, so I decided not to include it here.

The class Inherited by Home() has been changed from QWidget() to QMainWindow() to enable the new toolbar.

Some methods of the Home() class have been updated to work with the change in the display of the main buttons, and two new methods have been created: update_pause_state() and update_pause_icon()

class Home(QMainWidget):
    ...
    def start_detection(self):
        self.paused = False
        self.update_pause_icon()
        self.app_signals.start_detection.emit()
    ...

class Home(QMainWidget):
    ...
    def end_detection(self):
        self.paused = True
        self.detection_started = False
        self.update_pause_icon()
        self.app_signals.end_detection.emit()
    ...

class Home(QMainWidget):
    ...
    def update_pause_state(self):
        if self.detection_started: # If detection has already started, pause
            self.paused = not self.paused
            self.update_pause_icon()
            self.app_signals.pause_detection.emit(self.paused)
        else: # If detection hasn't started, start it
            self.detection_started = True
            self.start_detection()
    ...

class Home(QMainWidget):
    ...
    def update_pause_icon(self):
        if self.paused:
            self.pause_session_button.setIcon(QIcon("icons/mediaplay.png"))
            self.pause_session_button.setIconSize(QSize(60, 60))
        else:
            self.pause_session_button.setIcon(QIcon("icons/mediapause.png"))
            self.pause_session_button.setIconSize(QSize(60, 60))
    ...

Colored feedback

Now, the user has the option to enable or disable (it is enabled by default) a coloration in the labels that show the information like rep count, timer, etc.
This coloration is based on the average values that would be considered low/medium/high or excessive/addequate.

class Home(QMainWindow):
    def __init__(self):
        ...
        self.feedback_on = True
        self.bad_feedback_color = "#94322E"
        self.medium_feedback_color = "#F0E68C"
        self.good_feedback_color = "#80FF80"
        ...

The logic behind the actual coloration of the labels is formed of some if statements that check the intervals of the values.

Color themes

Obviously, an application is not properly designed if it doesn't have an option to change between light and dark modes, so I added that posibility in the settings window.

The changes on the UI style based on the color theme selected are defined in a new method called toggle_theme().
I will skip the explanation of this method because it's mainly just boring CSS, and nobody likes CSS around here 🥱.

Settings window ⚙️

For communicating changes in the settings I created a new signal class

class SettingsSignals(QObject):
    toggle_feedback = pyqtSignal(bool)
    toggle_theme = pyqtSignal(str)

The first signal sends a bool value that represents wether the colored feedback is on or off, and the second one sends the selected color theme.

The class for the settings window is formed by inheriting the QWidget class and takes as parameters the SettingsSignals object and the current value of the color theme for defining the pre-selected theme on the combobox when opening the window.

class SettingsWindow(QWidget):
    def __init__(self, settings_signals:SettingsSignals, currentTheme:str):
    ...

I won't show fully the code of this class as it is not that interesting, but the two methods that control the change in feedback and theme options are the following:

class SettingsWindow(QWidget):
    ...
    def apply_toggle_feedback(self, state:bool):
        if state == Qt.Checked:
            self.settings_signals.toggle_feedback.emit(True)
        else:
            self.settings_signals.toggle_feedback.emit(False)

    def apply_toggle_theme(self, theme:str):
        self.settings_signals.toggle_theme.emit(theme)

The first one emits the value of the checkbox and the second one emits the label of the selected color theme.

Results! ✅

Light mode, colored feedback disabled:

Light mode, colored feedback enabled:

Dark mode, colored feedback disabled:

Dark mode, colored feedback enabled:

Next steps 📑

Saving session records
New color themes ?
Personalized color feedback

Thank you for reaching the end of the blog and see you in the next!

Cool python syntax techniques

Eric Garcia — Sat, 03 May 2025 15:55:54 +0000

Did you ever do something that your friends saw and said "Wow, how did you know that?"
Well, this blog aims to help you discovering (or getting a better understanding) of techniques that can level up your code notably if you did not know them before.
Some of this techniques are python-specific, while the others are present in other languages but are considered pythonic (nice practices in python code).
After reading this blog you may be able to flex a bit on your fellow beginner developers 😉.

What will you learn❓

String formatting and interpolation ✔️
Inline conditionals ✔️
List comprehensions ✔️
Lambda functions ✔️
Type hinting ✔️

⛓️ String formatting and interpolation

The first way that people often learn to join values and strings is the concatenating method:

words = "5"
concat_str = "This string has " + words + " words"

However, this method is not very readable and doesn't work on many languages.

Interpolated strings are a way of combinating variables and fixed strings in a more visual way, which can help code insight and debugging.
Also, it offers more configuration capabilities in the way we want to represent the values.
The way that string interpolation works is by inserting other values as strings or objects into the original string.

The next three ways are much better and have some useful particularities:

f-strings (my favourite)
.format()
% operator

f-strings

On python version 3.6 and higher, a new way of interpolating strings was added, which is the f-string.
The way it is used is by adding the prefix "f" or "F" before the string.

words = 5
concat_str = f"This string has {words} words"

Notice how the interpolated values don't have to be of type str

This method offers some configuration capabilities, I.E: defining the number of decimals to show on a float.

num1 = 3.141592
num2 = 6.6743
concat_str = f"2 decimals: {num1:.2f} and 4 decimals: {num2:.4f}
print(concat_str)

-> Output: "2 decimals: 3.14 and 4 decimals: 6.6743"

.format()

The .format() method is another way of interpolating strings, but it comes with a big particularity: it uses lazy evaluation
The concepts of eager and lazy evaluations both deserve a dedicated blog, so if you want to see a blog about them, let me know 😉.

The way to use it is as follows:

day = "saturday"
month = "may"
concat_str = "current day and month: {day},{month}".format(day=day,month=month)
print(concat_str)

-> Output: "current day and month: saturday, may"

Modulo (%) operator

A more "primitive" interpolation method that also appears when formatting strings in C.
It is used by placing the % icon in the place we want the value printed, next to its type and other flags as the number of decimals to show.

day = "saturday"
hour = 12.06
concat_str = "day: %s, hour: %.2f" % (day, hour)
print(concat_str)

-> Output: "day: saturday, hour: 12.06"

✅-❎ Inline conditionals

Inline conditionals are a cool way of condensing expressions in less lines and eliminate a bit of the verbosity of traditional if statements.

This is the general syntax for inline conditionals:

expression_if_true if condition else expression_if_false

Here is an example of inline conditionals in python:

value = True
print("value is True") if value else print("value is False")

-> Output: "value is True"

Another example manipulating the value of a variable:

value = False
num = 1 if value else 0
print(num)

-> Output: 0

[🧾] List comprehensions

One of my favourite python techniques, widely used in data science where big sets of information are used and manipulated.
List comprehensions are a way of writing a list (or other data collection types) out of another iterable variable in a single line.

Imagine we have a list of fruits named fruits
fruits = ["apple", "banana", "pear", "peach"]
and we want to create another list consisting of fruits that have a p in their name, the list comprehension used would be like this one:

fruits_with_p = [fruit for fruit in fruits if "p" in fruit]

The meaning of the line of code from above is "Each element will be a fruit element of the list fruits if there's a "p" in said element fruit"

List comprehensions often demand some knowledge of how to create inline conditionals, as you may have seen.

Also, an important thing to note is that list comprehensions are generally faster than their equivalent in a for loop expression. This is mainly because list comprehensions move better the computation to C rather that using the python computation.
(kudos to u/toastedstapler - https://www.reddit.com/r/learnpython/comments/i28kcn/why_are_list_comprehensions_so_much_faster_than/

❗HOWEVER list comprehensions are known for difficulting the readability of the code when used without conscience, so don't abuse of their power.

λ Lambda functions

Lambda functions (also called anonymous functions) are basically definitions of functions that are short, concise and usually not worth to declare as a traditional function.
They could be imagined as some kind of inline function declarations.

Their syntax is

lambda arguments : expression

Even though lambda functions can be declared inline and called when needed as in the following example, this is not their main use.

day_and_month = lambda day, month : print(f'day: {day}, month: {month}')
day_and_month("saturday", "may")

-> Output: "day: saturday, month: may"

Usually lambda functions are used as parameters to generator functions like map() and are often used in Data Science.
The following is an example of using a lambda function as a parameter

celsius_temps = [0, 20, 25, 30, 37]
fahrenheit_temps = list(map(lambda c: (c * 9/5) + 32, celsius_temps))
print(fahrenheit_temps)

-> Output: [32.0, 68.0, 77.0, 86.0, 98.6]

The above code takes an anonymous function that converts celsius degrees to fahrenheit and applies it to each element in the celsius_temp list.
Lambda functions can usually be replaced by list comprehensions, with the following code in this case:

celsius_temps = [0, 20, 25, 30, 37]
fahrenheit_temps = [c * 9/5 + 32 for c in celsius_temps]
print(fahrenheit_temps)

-> Output: [32.0, 68.0, 77.0, 86.0, 98.6]

So the usage of each implementation depends on the programmer and the specific needs in the moment.

💡 Type hintings

Type hintings are a useful way to make your code much more readable and easy to debug.
Python is a dynamically typed language, which means that the variables don't have a specific data type in the moment of their creation.

Type hintings can help the IDE or linting software to interpret the code and give better insights in case of errors or warnings.

Variables can be type-hinted as they are created and also in the expected parameters of a function.

Example of type hinting at creation of variables:

a:int = 5
b:float = 3.5
s:str = "string"
l:list = [a, b, s]

Example of type hinting at definition of a function:

# Function that searches a word in a list and returns its index
def search_in_list(original_list:list, word:str) -> int:
    for i,elem in enumerate(original_list):
        if elem == word:
            return i 
    return -1

Using this technique, the readability and facility to debug your code will updgrade a lot.

Hope you found this knowledge useful! If you have anything to contribute, feel free to comment it!
Also, if you are interested in ML, computer vision or fitness in general, I suggest to check my devlog series about my latest side-project, FitVision 👀 https://dev.to/ceir/fitvision-devlog-1-3a0i

FitVision - devlog #2

Eric Garcia — Thu, 01 May 2025 16:34:43 +0000

Communication with the video detection ⚙️

For communicating the change in variables modified in the detection algorithm, a AppSignals class is created, taking advantage of the pyqtSignal facility.

class AppSignals(QObject):
    stop_detection = pyqtSignal()
    start_detection = pyqtSignal()
    update_reps = pyqtSignal(int)
    update_avg_time = pyqtSignal(float)
    update_training_time = pyqtSignal(int)
    update_set_time = pyqtSignal(int)
    update_rest_time = pyqtSignal(int)

This class is used in the initializer method of the Home class

class Home(QWidget):
    def __init__(self):
        super().__init__()
        self.initUI()
        self.settings()

        self.app_signals = AppSignals()
        self.detection_worker = DetectionWorker(self.app_signals)

        self.start_session_button.clicked.connect(self.app_signals.start_detection.emit)
        self.end_session_button.clicked.connect(self.app_signals.stop_detection.emit)

        self.app_signals.update_reps.connect(self.update_reps_label)
        self.app_signals.update_avg_time.connect(self.update_avg_time_label)
        self.app_signals.update_training_time.connect(self.update_training_time_label)
        self.app_signals.update_set_time.connect(self.update_set_time_label)
        self.app_signals.update_rest_time.connect(self.update_rest_time_label)

This method initializes the UI and the settings of the app.
Then the objects of app_signals and detection_worker are created, the first one for managing the change in variables in real time and the second one for calling the detection methods described in the last devlog.

The rest of the lines connect the clicks in buttons to their respective actions and the change in variables to the update of their respective labels.

Updating methods and settings

    def settings(self):
        self.setWindowTitle("FitVision")
        self.setGeometry(250, 250, 600, 400)

    def update_reps_label(self, reps):
        self.last_session_total_reps.setText(f"Total Reps: {reps}")

    def update_avg_time_label(self, avg_time):
        self.last_session_avg_time_per_rep.setText(f"Avg time per rep: {avg_time:.2f}s")

    def update_training_time_label(self, training_time):
        self.last_session_training_time.setText(f"Total training time: {training_time}s")

    def update_set_time_label(self, set_time):
        self.last_set_time.setText(f"Set time: {set_time}s")

    def update_rest_time_label(self, rest_time):
        self.last_rest_time.setText(f"Rest time: {rest_time}s")

The settings method, which sets the initial parameters of the app is called at the initialization of the Home object, and the rest of the methods are called whenever a change in the value of any variable is communicated through the app_signals object.

First version of the User Interface 🖥️

The code

The first version of the app's UI is powered by PyQT5

    def initUI(self):
        self.start_session_button = QPushButton("Start Session")
        self.end_session_button = QPushButton("End Session")
        self.last_session_total_reps = QLabel("Total Reps: 0")
        self.last_session_avg_time_per_rep = QLabel("Avg Time per Rep: 0s")
        self.last_session_training_time = QLabel("Training Time: 0s")
        self.last_set_time = QLabel("Set Time: 0s")
        self.last_rest_time = QLabel("Rest Time: 0s")

The first lines of the UI initializer method are used to define the interface elements.

        self.master = QVBoxLayout()

        row1 = QHBoxLayout()
        row2 = QHBoxLayout()
        row3 = QHBoxLayout()

        row1.addWidget(self.start_session_button, alignment=Qt.AlignCenter)
        row1.addWidget(self.end_session_button, alignment=Qt.AlignCenter)
        row2.addWidget(self.last_session_training_time, alignment=Qt.AlignCenter)
        row2.addWidget(self.last_session_total_reps, alignment=Qt.AlignCenter)
        row2.addWidget(self.last_session_avg_time_per_rep, alignment=Qt.AlignCenter)
        row3.addWidget(self.last_set_time, alignment=Qt.AlignCenter)
        row3.addWidget(self.last_rest_time, alignment=Qt.AlignCenter)

        self.master.addLayout(row1, 50)
        self.master.addLayout(row2, 25)
        self.master.addLayout(row3, 25)
        self.setLayout(self.master)

Then, the widgets are created and placed in the master layout.

        self.setStyleSheet("""
            QWidget {
                background-color: #565656;
            }

            QPushButton {
                background-color: #1c549f;
                padding: 20px;
                border-width: 5px;
                border-style: solid;
                border-radius: 5px;
                border-color: #1a4b8e;
                color: white;
                margin-top: 40px;
            }

            QPushButton:hover {
                background-color: #1a4b8e;
            }
        """)

And finally, a simple CSS style is applied.

The results 👀

The result is a simple and minimalistic UI which tells the user some important metrics of his/her workout.
Important: The size of the window is currently set to be 600x400 as seen in the settings() method, but this and many other things may be changed in the future.

Next steps 📑

The next planned steps are the following:

Add a Pause session feature
Improve the UI desing
Add a visual feedback to some counts like the avg_time per rep, set/rest times and repetition count.

Thanks for reading! 🤗

Credits

I watched the following video to get to know PyQT5:

Build a Python Desktop Application in Minutes | Code with Josh

FitVision - devlog #1

Eric Garcia — Tue, 29 Apr 2025 18:07:57 +0000

Hi there! This will be the first devlog that I make public (And hope is the first one I finish ;)
Also, this post is not a full explanation of the current version because I will divide the explanation in two parts, one for each file.
In this series of blogs I'm going to share my journey through the development of an application that I wanted to build since when I started to workout at home.

What is this?

-> The mission: building a desktop app that helps the user to track his/her training evolution in a automated way.
-> The big brain idea: implementing a computer-vision system that detects user's repetitions, resting time, set time and total workout time (along with other possible ideas that may come to me while working on it).
-> The tech stack: Initially only Python.

Now that I have explained a bit the idea, it's time to start the journey.

First steps: vision model

The libraries that the vision code uses currently are the following:

import cv2 
import mediapipe as mp
import numpy as np
import time
from PyQt5.QtCore import QThread, QTimer

mp_drawing = mp.solutions.drawing_utils
mp_pose = mp.solutions.pose

mp_drawing and mp_pose are utilities for drawing the detected user's pose and detecting it, respectively (not libraries but I wanted to include them in this section either way).
The imports are dedicated to the computer vision models, arithmetic operations and time calculations.

The full implementation of the vision model is wrapped around a class called DetectionWorker which is imported in the main file, which will be explained in the next blog.
Originally, I designed the model to be called by a simple function called capture_and_detect_video() which will be reviewed later, but for the detection to be started and stopped correctly using the interface buttons, I had to add the wrapper class.

The next is the initializer method of the DetectionWorker class:

    def __init__(self, app_signals):
        super().__init__()
        self.app_signals = app_signals
        self.running = False
        self.last_rep_time = 0 # keeps track of the last rep time for detecting rest or mid-set time
        self.status = "resting" # resting by default until the first rep

        # Total training session timer
        self.total_training_time = 0
        self.training_timer = QTimer()
        self.training_timer.timeout.connect(self.update_total_training_time)

        # Set and rest times
        self.set_training_time = 0
        self.rest_training_time = 0

        self.app_signals.stop_detection.connect(self.stop_detection)
        self.app_signals.start_detection.connect(self.start_detection)

The initializer method is pretty self-explanatory, the object is initialized with a app_signals object which communicate to the app the state of some variables, and the timer is initialized with a QTime() object.

Now I will showcase the start and stop detection methods and other utilities of the class.

    def start_detection(self):
        self.total_training_time = 0
        self.set_training_time = 0
        self.rest_training_time = 0
        self.training_timer.start(1000)
        self.running = True
        self.capture_and_detect_video()

    def stop_detection(self):
        self.training_timer.stop()
        self.running = False

The start and the stop of the video detection actualize the value of the time counts, starts/stops the timers and updates the self.running property, which is the responsible for maintaining the flow of the detections.

    def update_total_training_time(self):
        self.total_training_time += 1
        self.app_signals.update_training_time.emit(self.total_training_time)

        # Detect if user is resting or mid-set
        if np.abs(self.last_rep_time - time.time()) > 5:
            self.status = "resting"
            self.set_training_time = 0
            self.rest_training_time += 1
            self.app_signals.update_rest_time.emit(self.rest_training_time)
        else:
            self.status = "mid-set"
            self.rest_training_time = 0
            self.set_training_time += 1
            self.app_signals.update_set_time.emit(self.set_training_time)

The function dedicated to update the timers first adds 1 to the count of total seconds of the workout and detects wether the user is resting or in the middle of a set. Depending on the result, the respective timers are updated.

Note that the time period used for determining the status of the workout is not definitive, it is currently low for debug purposes.

    def calculate_angle(self, a: list, b: list, c: list) -> float:
        a = np.array(a)
        b = np.array(b)
        c = np.array(c)
        radians = np.arctan2(c[1] - b[1], c[0] - b[0]) - np.arctan2(a[1] - b[1], a[0] - b[0])
        angle = np.abs(radians * 180 / np.pi)

        if angle > 180.0:
            angle = 360 - angle

        return angle

The calculate_angle function simply takes three lists of coordinates (x,y) as arguments for determining the angle formed by such points and returns it as a float.

From now on, all of the next pieces of code will be the ones that form the _capture_and_detect_video() method, which is the method in charge of the pose detection in real time.
cap = cv2.VideoCapture(0) # Camera code may be changed depending on the device
This line initializes the video capturing element.

The remainding code of the method is inside a with statement:

        with mp_pose.Pose(min_detection_confidence=0.5, min_tracking_confidence=0.5) as pose:
            counter = 0
            stage = "down"
            times_hist = []
            rep_start_time = None

Using the pose detection utility of mediapipe, the default initial values of counter and stage are set.
A list named times_hist is created with the purpose of storing the time that the user took for completing each rep (for calculating the average time per rep metric)
rep_start_time is also set to its default value of None.

            while cap.isOpened() and self.running:
                ret, frame = cap.read()

                # Recolor image to RGB
                image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
                image.flags.writeable = False

                # Make detection
                results = pose.process(image)

                # Recolor back
                image.flags.writeable = True
                image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)

Inside the loop of the video detection, the frame is first processed for detecting the user's pose and reprocessed back.
This loop starts and stop running when the self.running property is changed as was shown earlier.

                # Extract landmarks
                try:
                    landmarks = results.pose_landmarks.landmark

                    # Get limbs
                    l_shoulder = [landmarks[mp_pose.PoseLandmark.LEFT_SHOULDER.value].x, landmarks[mp_pose.PoseLandmark.LEFT_SHOULDER.value].y]
                    l_elbow = [landmarks[mp_pose.PoseLandmark.LEFT_ELBOW.value].x, landmarks[mp_pose.PoseLandmark.LEFT_ELBOW.value].y]
                    l_wrist = [landmarks[mp_pose.PoseLandmark.LEFT_WRIST.value].x, landmarks[mp_pose.PoseLandmark.LEFT_WRIST.value].y]

                    # Calculate angles
                    angle = self.calculate_angle(l_shoulder, l_elbow, l_wrist)

                    # Visualize angles
                    cv2.putText(image, str(angle), tuple(np.multiply(l_elbow, [640, 480]).astype(int)), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (255, 255, 255), 2, cv2.LINE_AA)

                    # Curl count
                    if angle > 160:
                        stage = "down"
                        rep_start_time = time.time() if rep_start_time is None else rep_start_time
                    elif angle < 30 and stage == "down":
                        stage = "up"
                        counter += 1
                        end_time = time.time()
                        self.last_rep_time = end_time
                        rep_time = end_time - rep_start_time
                        rep_start_time = None
                        times_hist.append(rep_time)



                    average_time = sum(times_hist) / len(times_hist)
                    self.app_signals.update_reps.emit(counter)
                    self.app_signals.update_avg_time.emit(average_time)


                except:
                    pass

In this fragment of code, the system tries to extract information about the position of each key node of the user's body (currently just the ones needed for counting curl reps) and calculate the angle formed by them.
Then the angle is visualized for debugging purposes and the curl count is executed.

If the formed angle is more than 160º, it means the user has the arm extended (resting position), and the system updates the stage and the start time of the repetition, which is only set one time immediately when the arm reaches the resting position.
If the formed angle is less than 30º and the last tracked position of the curl was "down", the system updates the stage counts one rep, calculates the time took to execute the rep and it is stored to the times_hist list.

Then the average time per repetition is calculated and the information is sent through the app_signals object that was shown previously.

If any errors occur while executing the above instructions (which may be caused by an erroneous detection of the user's pose), the system ignores that frame for the sake of simplicity.

Now, the next fragment is the last one to review!

                #Render detection
                mp_drawing.draw_landmarks(image, results.pose_landmarks, mp_pose.POSE_CONNECTIONS,
                                        mp_drawing.DrawingSpec(color=(255,255,255), thickness=2, circle_radius=2),
                                        mp_drawing.DrawingSpec(color=(255,255,255), thickness=2, circle_radius=2))
                cv2.imshow('frame', image)


                if cv2.waitKey(10) & 0xFF == ord('q') or not self.running:
                    self.stop_detection()

            cap.release()
            cv2.destroyAllWindows()

The last lines of code of the capture_and_detect_video() method render the detected nodes and the connections between them in the returned frames.
They also handle the stop of the detection by the user and, ultimately, releases the video capture element and destroys all instances of the video detection when the loop is stopped.

In a few lines

Summarizing all of this, the algorithm made is able to determine the current state of the user's workout, detecting if he/she is in a rest or mid-set time interval and if he/she is doing a rep or just ended one.
This functionalities are connected with a UI that will be explained in the next devlog, and implemented in a way that will help the user evaluating his/her workouts automatically.

If you have followed through until here, thank you very much for taking the time to read it! Any question, kind suggestion or idea is extremely appreciated. 😉

(and yes, the cover image is ai generated)

Credits

For starting this project, I watched the following videos:

https://youtu.be/06TE_U21FK4?si=oDEl9eeGzVKnkv-g