Forem: Piko

I Built an AI That Reads My Blinks and Speaks Morse Code

Piko — Wed, 24 Sep 2025 14:27:14 +0000

What if you could speak with your eyes?

It's a thought that feels like it's straight out of science fiction. But when I first saw an AI mapping 478 points across my face in real-time, directly in my browser, that science fiction suddenly felt tangible. The white mesh, clinging to every contour, knew the exact position of my lips, my cheeks, the tip of my nose. It knew when I blinked.

I decided I was going to use it to achieve a lifelong dream: to actually speak with my eyes. The plan was to translate my blinks into Morse code.
It turned out to be way harder and far more interesting than I ever imagined!

This project was also deeply inspired by the incredible story of Jeremiah Denton, a captured US pilot who blinked the word "TORTURE" in Morse code during a propaganda video. I wanted to see if I could build a digital, open-source version of that incredible human ingenuity.

Here's a breakdown of the most interesting technical challenges and how I solved them.

The Tech Stack is surprisingly simple:

JavaScript (ES6 Modules): To handle all the logic.
MediaPipe Face Landmarker: For the real-time facial landmark and blendshape detection. This is the core of the project.
HTML5 & CSS3: For the UI. No frameworks needed!

Challenge #1: How to Tell a Dot from a Dash?

The first problem was detecting blinks. MediaPipe provides real-time scores for 52 different facial expressions, called "blendshapes," that track everything from a smile to a raised eyebrow. Luckily for me, two of those blendshapes were exactly what I needed: eyeBlinkLeft and eyeBlinkRight.

The way they work is simple: a score near 0 means the eye is open, and a score closer to 1 means it's closed.

My first thought was, "Easy, I'll just use setTimeout to see how long the eye is closed." This was a terrible idea. It was messy and out of sync with the video's requestAnimationFrame loop.The way they work is simple: a score near 0 means the eye is open, and a score closer to 1 means it's closed.
My first thought was, "Easy, I'll just use setTimeout to see how long the eye is closed." This was a terrible idea. It was messy and out of sync with the video's requestAnimationFrame loop.

The solution was much cleaner: count the frames.

Since the AI analyzes every frame, I could just increment a counter for every consecutive frame the eyes were closed.

💡 The Logic:

If the eye-blink score is above a threshold (say, 0.5), increment blinkFrameCounter.
If the score drops below the threshold, check the counter's value.
If blinkFrameCounter is between 2-14 frames, it's a short blink (dot).
If it's 15 or more frames, it's a long blink (dash).

Here's the code snippet for that logic:

// From js/detection.js

// Check if the average blink score is above our threshold
if ((rightEyeBlink + leftEyeBlink) / 2.0 > CONST.BLINK_THRESHOLD) {
    appState.blinkFrameCounter++;
    return null; // Still blinking, don't do anything yet
}

// If we've stopped blinking, check how long we blinked for
if (appState.blinkFrameCounter >= CONST.BLINK_CONSECUTIVE_FRAMES) {
    const isLong = appState.blinkFrameCounter >= CONST.LONG_BLINK_FRAMES;
    appState.blinkFrameCounter = 0; // Reset for next time
    return isLong ? 'long' : 'short'; // Success!
}

// If we didn't blink long enough, just reset
appState.blinkFrameCounter = 0;
return null;

Challenge #2: Detecting Nods Without the Jitters

For separating letters and words, I wanted to use head nods. My first attempt was to track the y position of the nose tip (landmark #4) and compare it frame-by-frame. This failed spectacularly. The system was so sensitive it would trigger from me just breathing!

The key was to realize a nod is a journey, not a snapshot. The solution: a "sliding window" algorithm.

💡 The Logic:

Keep a running history of the nose's y position in an array (noseYHistory) for the last 15 frames.
In every frame, find the min and max Y-position within that history.
If (max - min) is greater than our movement threshold, we have a clear, intentional nod.

This smoothed out all the noise and only registered real nods.

// From js/detection.js
export function processNod(landmarks) {
    const noseY = landmarks[CONST.NOSE_TIP_INDEX].y * DOM.video.videoHeight;
    appState.noseYHistory.push(noseY);

    // Keep the history at a fixed length
    if (appState.noseYHistory.length > CONST.NOD_HISTORY_LENGTH) {
        appState.noseYHistory.shift();
    }

    // Don't detect another nod immediately
    if (appState.nodCooldownCounter > 0) {
        appState.nodCooldownCounter--;
        return false;
    }

    if (appState.noseYHistory.length === CONST.NOD_HISTORY_LENGTH) {
        const minY = Math.min(...appState.noseYHistory);
        const maxY = Math.max(...appState.noseYHistory);

        if ((maxY - minY) > CONST.NOD_MOVEMENT_THRESHOLD) {
            appState.nodCooldownCounter = CONST.NOD_COOLDOWN_FRAMES; // Set cooldown
            appState.noseYHistory = []; // Clear history after detection
            return true; // We have a nod!
        }
    }
    return false;
}

Challenge #3: The Cheek-to-Nose Ratio for Head Turns

Detecting head turns for backspace and spaces had the same "jitter" problem. The solution came from noticing how my face's proportions change when I turn.

When looking straight, the distance from my nose to my left cheek is about the same as to my right cheek. When I turn left, my right cheek gets "wider" from the nose's perspective, and my left cheek gets "narrower."

💡 The Logic:

Get the x coordinates of the left cheek (#454), right cheek (#234), and nose (#4).
Calculate the total width: leftCheek.x - rightCheek.x.
Calculate the ratio: (nose.x - rightCheek.x) / totalCheekWidth.
When looking straight, this ratio is ~0.5. When I turn left, it goes up (> 0.65). When I turn right, it goes down (< 0.35).

This worked so well I was very happy!

// From js/detection.js
export function processTurn(landmarks) {
    const nose = landmarks[CONST.NOSE_TIP_INDEX];
    const leftCheek = landmarks[CONST.LEFT_CHEEK_INDEX];
    const rightCheek = landmarks[CONST.RIGHT_CHEEK_INDEX];

    const totalCheekWidth = leftCheek.x - rightCheek.x;
    const noseToRightCheekDist = nose.x - rightCheek.x;

    if (totalCheekWidth > 0.1) { // Avoid division by zero
        const turnRatio = noseToRightCheekDist / totalCheekWidth;
        if (turnRatio > CONST.TURN_RIGHT_RATIO_THRESHOLD) {
            return 'left';
        } else if (turnRatio < CONST.TURN_LEFT_RATIO_THRESHOLD) {
            return 'right';
        }
    }
    return null; // Head is centered
}

Final Thoughts

This was one of the most fun projects I've ever built. It's a great example of how accessible and powerful browser-based AI has become. What once required specialized hardware can now be built with a bit of creative problem-solving and open-source tools.

If you have any questions, drop them in the comments below. I'd love to hear your thoughts! What would you build with this tech?

Full Video:

Live Demo: Click Here!
Full Video: Watch on YouTube
GitHub Repo: Click Here! Happy coding! ✨

How to Deploy a Django App to Production in 2025

Piko — Mon, 01 Sep 2025 18:13:59 +0000

From Localhost to Live: The Essential Django Deployment Guide

You've done it. You’ve built a Django app, and it’s running beautifully on your local machine with its virtual environment and all dependencies installed. Now comes the big question: how do you get this thing ready for the world to see?

Deploying a Django app isn't just about copying files to a server. It's about transforming your development setup into a secure, efficient, and reliable production environment. This guide will walk you through the essential steps to bridge that gap.

The Golden Rule: Never Hardcode Secrets

Before we touch anything, let's establish the most important principle: separate your configuration from your code. Your production environment will have different settings than your local one (different databases, secret keys, debug settings). Hardcoding these values is a recipe for security risks and deployment headaches.

The solution is to use environment variables. We'll store our configuration in the hosting environment and have Django read from there.

For local development, we can simulate this with a .env file and the python-dotenv library.

Install the library:
```
pip install python-dotenv
```
Create a .env file in your project's root (the same level as manage.py):
```
# .env
DEBUG=True
SECRET_KEY=your-insecure-local-secret-key
DATABASE_URL=sqlite:///db.sqlite3
```
Important: Add .env to your .gitignore file immediately! This file should never be committed to version control.

Step 1: Production-Proof Your `settings.py`

Now, let's modify your settings.py to read from these environment variables.

1.1 Load Environment Variables

At the top of your settings.py, add the following to load the .env file (it won't do anything in production, which is what we want).

# settings.py
import os
from dotenv import load_dotenv

load_dotenv()

1.2 Secure `SECRET_KEY` and `DEBUG`

Replace your hardcoded SECRET_KEY and DEBUG values.

# settings.py

# Pull the SECRET_KEY from the environment
SECRET_KEY = os.getenv("SECRET_KEY")

# Set DEBUG to False unless explicitly set to "True" in the environment
DEBUG = os.getenv("DEBUG", "False").lower() == "true"

1.3 Configure `ALLOWED_HOSTS`

In production, you must tell Django which domain(s) are permitted to host your app.

# settings.py

# We'll get the actual domain from our hosting provider later
ALLOWED_HOSTS = os.getenv("ALLOWED_HOSTS", "localhost,127.0.0.1").split(",")

# Important for security when running on HTTPS
CSRF_TRUSTED_ORIGINS = os.getenv("CSRF_TRUSTED_ORIGINS", "http://localhost").split(",")

Step 2: Bring in the Production Stack

Your development server and database aren't cut out for production traffic. Let's bring in the right tools for the job.

2.1 Use a Production WSGI Server: Gunicorn

The manage.py runserver command is only for development. For production, you need a robust WSGI server. Gunicorn (Green Unicorn) is a popular and reliable choice.

pip install gunicorn

2.2 Serve Static Files with WhiteNoise

When DEBUG is False, Django stops serving static files (your CSS, JavaScript, and images). WhiteNoise is the easiest way to get your app to serve its own static files securely and efficiently.

Install WhiteNoise:
```
pip install whitenoise
```

Configure in settings.py:

Add WhiteNoise to your middleware, right after the SecurityMiddleware.
Set the STATIC_ROOT and configure the staticfiles storage backend.

# settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware', # Add this line
    # ... other middleware
]

# This is where collectstatic will gather all static files
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

# This improves performance by caching and compressing files
STORAGES = {
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

2.3 Switch to a Production Database: PostgreSQL

SQLite is a single-file database that can't handle concurrent requests well, making it unsuitable for most production sites. PostgreSQL is a powerful, open-source database that's a standard choice for Django apps.

To make connecting easy, we'll use dj-database-url and psycopg2-binary.

Install Packages:

pip install psycopg2-binary dj-database-url

Configure in settings.py:
This will read your database connection string from a single DATABASE_URL environment variable. It cleverly defaults to your existing SQLite setup if the variable isn't found.

# settings.py
import dj_database_url

# ... at the bottom of the file ...

DATABASES = {
    'default': dj_database_url.config(
        # Default to SQLite if DATABASE_URL is not set
        default=f"sqlite:///{os.path.join(BASE_DIR, 'db.sqlite3')}"
    )
}

Step 3: Automate Your Deployment Tasks

You need to perform the same set of tasks every time you deploy: install packages, collect static files, and run migrations. Let's automate this with a simple build script.

Create a file named build.sh in your project's root:

#!/bin/bash

# Exit immediately if a command exits with a non-zero status.
set -e

# Install Python dependencies
pip install -r requirements.txt

# Run Django's collectstatic to gather static files
python manage.py collectstatic --no-input

# Apply any database migrations
python manage.py migrate

Now, make the script executable: chmod +x build.sh

Final Preparations

You're almost there!

Update requirements.txt: Your virtual environment now has Gunicorn, WhiteNoise, and other production packages. Update your requirements file to reflect this.
```
pip freeze > requirements.txt
```
Push to Git: Commit all your changes and push them to your GitHub (or GitLab) repository. Your code is now fully prepared for deployment.

Time to Deploy!

Now you can head to your hosting platform of choice (like Seenode, Heroku, Render, etc.). The process will generally be:

Connect Your Repo: Link the platform to your GitHub repository.
Set Build & Start Commands:
- Build Command: ./build.sh
- Start Command: gunicorn movie_spot.wsgi --bind 0.0.0.0:80 (Replace movie_spot with your project's name).
Set Environment Variables: This is where you'll add your production SECRET_KEY, set DEBUG to False, and provide the DATABASE_URL from the PostgreSQL database you create on the platform. You'll also set your live domain in ALLOWED_HOSTS and CSRF_TRUSTED_ORIGINS.

And that's it! With these steps, you've taken your Django project from a local development build to a secure, robust, and production-ready application.

Are you a visual learner?

I've created a complete video walkthrough of this deployment guide. Watch and code along as we take our project from localhost to a live, production-ready application on the cloud.

Happy deploying

javaScript newbies, I have a challenge for you!

Piko — Sat, 18 Nov 2023 15:21:31 +0000

As a beginner or someone learning programming, it can be overwhelming to start working on solo projects. However, like anything complex, it helps to take baby steps.

For example, after you learn something new you could try to figure out a way to apply what you have learned. You do not have to create anything massive or huge. Creating something small but has a clear purpose can be a greateway to get your feet wet.

Okay, but how do I find ideas on what to create?

Every invention starts with an idea, and every idea starts with a question. So every time you learn something new try to ask yourself something like:
“How can I use this to create something with purpose?”
“Do I know of a problem that this can help solve?”

It also helps to try and stop after learning something new, and see how you could use that with the things you have already learned. For example, I wrote an RGB color generator function a while back, I was still in my early coding days. It started with me asking myself “ if the RGB model consists of different values of the colors Red, Blue, and Green. Can I just make a function that relies on the Math.random method to generate different colors, by generating a random integer value of each color component?”

It was at a time, when I felt I knew all the concepts that would allow me to create a function like that, but I still lacked the confidence. However, I pushed myself and I did it, and it was only possible because I broke down the problem into simple TODOs.

Here is your Challenge!

If you are someone who is new to coding and is looking for a challenge to help you slowly breakout of tutorial hell, and start creating your own project. I challenge you to try and create an RGB color generator function. I made a code pen - You'll find it below complete with all the extra code required, and all you have to do it complete the function.

The concepts you should be familiar with to complete the challenge:

Defining a function
Declaring variables: We declare a variable to hold the values of - The RGB color format
Math.random method

To try the challenge just complete the colorGen function in the JS section:

Spend at least half an hour trying, and after that if you feel completely at loss. You could watch this short tutorial to help you out:

Best of luck!

Create an SVG Fractal Tree by Writing a Recursive Function - Easy JavaScript Tutorial

Piko — Wed, 15 Nov 2023 20:11:29 +0000

After a long hike searching for mushrooms and observing the trees around me with their beautiful patterns, I wondered if I could create a function to generate a tree in JavaScript. The next morning, I started researching and learned a bit about fractal mathematics and how it involves repeating the same pattern at different scales. This realization meant that I could probably create a recursive function to generate my tree.

I set out to create the function, and it turned out to be much simpler than I initially thought. Of course, this simplicity came after rewriting messy code multiple times. So now, I finally have a function that creates a cool fractal tree in less than 20 lines of code - it could be simplified to 10.

To render the tree, I used the SVG element, which I really enjoy working with. The function draws the first line (the base of the tree) and then recursively draws two lines at a time. The angles and lengths are calculated dynamically.

I learned a lot during this process, especially about how elegant and enjoyable using recursive functions can be. If you want to see how I did it or learn about using recursive functions to generate a pattern, I made a YouTube tutorial:

If you want to jump straight to the code:

Code Pen: https://codepen.io/Piko-the-solid/pen/RwvjNed
Github: https://github.com/PikoCanFly/fractal-tree

What made you decide to learn coding? Which language do you prefer and which do you use the most? Why?

Piko — Sun, 12 Nov 2023 22:16:43 +0000

I made an app that generates random blob creatures! Use cases include: endless avatar creation

Piko — Wed, 08 Nov 2023 15:05:56 +0000

So the other day I discovered the Haikei blob generator and I just started obsessively hitting that generate button; you know the one that looks like a die 🎲 and after 15 minutes of mindless clicking, I decided I needed to make my very own blob generator. And the research began!

I revisited articles about Bezier curves, and learnt that about using them in SVG. After hours of experimenting I came up with a function that generates blobs! Later, I just added some eyes! And now I have a blob creature generator.

If you want to see how I did it, check out this video I made:

If you want to checkout the code:
https://github.com/PikoCanFly/blobster.git

Happy ~~blobbing~~ coding!

I wrote a function that creates a drawing animation for any logo or simple SVG Image

Piko — Tue, 07 Nov 2023 20:12:40 +0000

A week + couple of days ago I wrote a JavaScript function that I am so proud of; it can quickly create a drawing style animation from any SVG logo/simple SVG image. It's proven to be a fun way to quickly create loading animations. I have shared it with a few people and someone suggested posting about here. - side note: This my first post on dev.to

To create the animations I played around with the strokeDasharray and strokeDashoffset CSS attributes.

If you want to see how I made it here is a short YT video:

Happy Coding!

Forem: Piko

I Built an AI That Reads My Blinks and Speaks Morse Code

The Tech Stack is surprisingly simple:

Challenge #1: How to Tell a Dot from a Dash?

Challenge #2: Detecting Nods Without the Jitters

Challenge #3: The Cheek-to-Nose Ratio for Head Turns

Final Thoughts

Full Video:

How to Deploy a Django App to Production in 2025

From Localhost to Live: The Essential Django Deployment Guide

The Golden Rule: Never Hardcode Secrets

Step 1: Production-Proof Your settings.py

1.1 Load Environment Variables

1.2 Secure SECRET_KEY and DEBUG

1.3 Configure ALLOWED_HOSTS

Step 2: Bring in the Production Stack

2.1 Use a Production WSGI Server: Gunicorn

2.2 Serve Static Files with WhiteNoise

2.3 Switch to a Production Database: PostgreSQL

Step 3: Automate Your Deployment Tasks

Final Preparations

Time to Deploy!

Are you a visual learner?

javaScript newbies, I have a challenge for you!

Okay, but how do I find ideas on what to create?

Here is your Challenge!

Create an SVG Fractal Tree by Writing a Recursive Function - Easy JavaScript Tutorial

What made you decide to learn coding? Which language do you prefer and which do you use the most? Why?

I made an app that generates random blob creatures! Use cases include: endless avatar creation

I wrote a function that creates a drawing animation for any logo or simple SVG Image

Step 1: Production-Proof Your `settings.py`

1.2 Secure `SECRET_KEY` and `DEBUG`

1.3 Configure `ALLOWED_HOSTS`