DEV Community: Anthony

Bypass WhatsApp Template Limits with a Button-Triggered Formatting Flow

Anthony — Mon, 12 May 2025 08:04:13 +0000

Summary

WhatsApp imposes a 24-hour customer-service window during which you can send any message; outside of it, only template messages (unformatted) are allowed. Goalmatic.io needs to let users send richly formatted content (articles, poems, etc.), so we built a two-step workaround:

Template Send: Strip formatting and send via a WhatsApp template.
On-Click Upgrade: Include a “Get Formatted Text” button in the template. When the user clicks, the 24-hour window reopens, allowing us to send the original, fully formatted message.

Below is an end-to-end example in Node.js using the WhatsApp Cloud API.

The Challenge

WhatsApp’s customer-service window rules mean:

Within 24 hours of a user message, you can send any content (text, media, formatted).
After 24 hours, only template messages (unformatted, pre-approved) are allowed.

But Goalmatic users want formatting—bold, italics, lists, links—to enrich their content. If you try to include Markdown or HTML in a template payload, WhatsApp returns a 400 error. How do we let users see formatted content when they click outside the 24-hour window?

🛠️ Two-Part Workaround

Send the Template Strip all Markdown/HTML. Use a generic “Your content is here” template and include a button:

type dataType = {
  message: string;
  recipientNumber: string;
  uniqueTemplateMessageId: string;
}

export const goalmatic_whatsapp_workflow_template = (data: dataType) => {
  return JSON.stringify({
    'messaging_product': 'whatsapp',
    'recipient_type': 'individual',
    'to': data.recipientNumber,
    'type': 'template',
    'template': {
      'name': 'workflow_template',
      'language': {
        'code': 'en',
      },
      'components': [
        {
          'type': 'header',
          'parameters': [
            {
              'type': 'image',
              'image': {
                'link': 'https://goalmatic.io/hero/workflow.png',
              },
            },
          ],
        },
        {
          'type': 'body',
          'parameters': [
            {
              'type': 'text',
              'text': data.message,
            },

          ],
        },
        {
          'type': 'button',
          "index": "0",
          "sub_type": "quick_reply",
          'parameters': [
            {
              "type": "payload",
              "payload": data.uniqueTemplateMessageId
            }
          ],
        },
      ],
    },
  })
}

Handle the Click When the user taps “Get Formatted Text,” WhatsApp opens a conversation thread (re-opening the 24-hour window). Your webhook sees this click (or an inbound URL request) and responds with the full formatted content using a standard text API call.

Code Snippet: Stripping Formatting & Sending Both Messages

import express from 'express';
import bodyParser from 'body-parser';
import fetch from 'node-fetch';

// Helpers

/**
 * Strip markdown/HTML tags to produce unformatted text
 * @param {string} input
 * @returns {string}
 */
function stripFormatting(input) {
  // Simple removal of markdown/HTML; adjust regex as needed
  return input
    .replace(/<\/?[^>]+(>|$)/g, '')    // remove HTML tags
    .replace(/(\*|_|~|`){1,3}/g, '')    // remove markdown **, __, ~~ , `
    .trim();
}

/**
 * Send a WhatsApp Cloud API message
 * @param {string} payload
 */
async function sendWhatsApp(payload) {
  const token = process.env.WA_CLOUD_TOKEN;
  const phoneNumberId = process.env.WA_PHONE_NUMBER_ID;

  const res = await fetch(
    `https://graph.facebook.com/v15.0/${phoneNumberId}/messages`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    }
  );
  if (!res.ok) {
    const err = await res.text();
    console.error('WhatsApp API error:', err);
  }
}

// Express App

const app = express();
app.use(bodyParser.json());

app.post('/send', async (req, res) => {
  const { to, formattedText } = req.body;
  const unformattedText = stripFormatting(formattedText);

  // 1️⃣ Send unformatted template with button
  await sendWhatsApp({
    to,
    type: 'template',
    template: {
      name: 'get_formatted_text',
      language: { code: 'en_US' },
      components: [
        {
          type: 'BODY',
          parameters: [{ type: 'text', text: unformattedText }]
        },
        {
          type: 'BUTTONS',
          buttons: [
            {
              type: 'url',
              url: `https://your-domain.com/fetch?to=${encodeURIComponent(to)}&msg=${encodeURIComponent(formattedText)}`,
              title: 'Get Formatted Text'
            }
          ]
        }
      ]
    }
  });

  res.sendStatus(200);
});

app.get('/fetch', async (req, res) => {
  // 2️⃣ User clicked button; send formatted text
  const { to, msg } = req.query;

  await sendWhatsApp({
    to,
    type: 'text',
    text: { body: msg }
  });

  res.send('<h1>Formatted message sent! ✅</h1>');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`🚀 Server running on port ${PORT}`));

How It Works

stripFormatting removes Markdown and HTML so the template body is plain text.
POST /send

Receives the user’s destination number and full formatted text.
Sends a WhatsApp template message with a URL-button “Get Formatted Text.”
1. GET /fetch
Triggered when the user clicks the button (opening the 24-hour window).
Sends the original formattedText back as a non-template text message, preserving all formatting.

Next Steps & Tips

Template Approval: You must pre-approve your “get_formatted_text” template with Facebook Business Manager.
Security: Sign or encrypt the URL parameters so users can’t tamper with message text.
Rich Media: You can adapt this pattern to send images, documents, or even interactive lists once the window is open.
UX: Customize the “Get Formatted Text” button title or use a quick-reply button to keep users inside WhatsApp.

Have you built something similar or run into other messaging-platform quirks? Let me know in the comments!

Systematic thinking for everyone, how to think like a programmer

Anthony — Wed, 07 Aug 2024 12:58:50 +0000

Introduction

Have you ever wondered what the purpose of verbal and quantitative reasoning was in primary school or why we have to study social studies, art, and math in secondary school? Well, it's to develop us as functional, contributing members of society. In order for that to happen, we need to develop different thinking faculties. This includes math for logical and systematic thinking, science for analytical and critical thinking, art for creative thinking, and English and language for communication and comprehensive thinking. The problem now is that after secondary school, a lot of people do away with math and hence indirectly do away with systematic thinking. They stop thinking in systems and improve their other thinking, like critical, intuitive, and creative. While all of these have their purpose, I would argue that systematic thinking is probably one of the most important forms of thinking that exists. That is why most Fortune 500 company CEOs are engineers. Once you start to see everything as a system, almost nothing is impossible. In this article, I will explain what systematic thinking is and how to utilize it in your daily life. I won't promise that your life will be instantly better, but if you apply the principles you learn here today to your daily problems, you should begin to have more solutions than problems.

What is systematic thinking.

Systematic thinking is a structured approach to problem-solving where a problem is broken down into a system with individual parts. Here’s a simple guide to understanding and applying systematic thinking:

Define the Problem as a System: Identify the main system that encompasses the problem. For example, building a chat app.
Identify Sub-Systems: Break down the main system into smaller, manageable sub-systems. In the case of a chat app, sub-systems might include:
- Authentication System: Handles user sign-up and sign-in.
- Profile System: Manages user profiles.
- Messaging System: Facilitates communication between users.
Order the Sub-Systems: Arrange the sub-systems logically. Typically, authentication should come before profile management, which should come before messaging.
Identify Blockers: Examine each sub-system for potential problems or blockers. Determine if these blockers are unit problems (problems that can’t be broken down further) or if they can be subdivided.
Classify Unit Problems: Group unit problems into common categories such as:
- Skill Issues: Lack of necessary skills or knowledge.
- Money Issues: Insufficient funds or resources.
- Location Issues: Geographic constraints.
- Combination Issues: Problems involving multiple factors. If problems fall into multiple categories, it may indicate that the problem hasn’t been fully broken down.
Develop Solutions: Create solutions for each unit problem. Since the problem is now in its simplest form, finding solutions should be more straightforward.
Iterate and Improve: Continuously refine and improve your solutions to make them more efficient.

Applied application of systematic thinking in everyday life

Before I end this write up let me give you some day to day scenarios where systematic thinking can be used

Scenario 1: Planning a Family Vacation

Define the Problem as a System

Main System: Planning a family vacation.

Identify Sub-Systems

Destination Selection: Choosing the vacation spot.
Budget Planning: Allocating funds for the trip.
Travel Arrangements: Booking flights or transportation.
Accommodation Booking: Reserving places to stay.
Itinerary Planning: Deciding on activities and attractions to visit.

Order the Sub-Systems

Destination Selection
Budget Planning
Travel Arrangements
Accommodation Booking
Itinerary Planning

Identify Blockers

Destination Selection:
- Lack of consensus on the destination.
- Limited vacation time.
Budget Planning:
- Insufficient funds.
Travel Arrangements:
- Limited availability of flights.
- High travel costs.
Accommodation Booking:
- Fully booked hotels.
- High accommodation costs.
Itinerary Planning:
- Overbooked attractions.
- Weather conditions.

Classify Unit Problems

Lack of Consensus: Skill Issue (communication and compromise).
Limited Vacation Time: Location Issue.
Insufficient Funds: Money Issue.
Limited Availability of Flights: Combination Issue (money and timing).
Fully Booked Hotels: Combination Issue (timing and location).
Overbooked Attractions: Location Issue.
Weather Conditions: Uncontrollable Factor.

Develop Solutions

Lack of Consensus: Have a family meeting to discuss and vote on the destination.
Limited Vacation Time: Choose a destination closer to home to maximize available time.
Insufficient Funds: Save in advance or look for budget-friendly destinations.
Limited Availability of Flights: Book flights early and be flexible with travel dates.
Fully Booked Hotels: Use booking platforms to find alternative accommodations.
Overbooked Attractions: Pre-book tickets online or visit less popular attractions.
Weather Conditions: Check the weather forecast and have backup plans.

Iterate and Improve

After the vacation, review what went well and what didn’t. Use this feedback to plan even better future trips.

Scenario 2: Organizing a Home Office

Define the Problem as a System

Main System: Organizing a home office.

Identify Sub-Systems

Workspace Setup: Arranging the desk, chair, and equipment.
Storage Solutions: Finding places for files, stationery, and other supplies.
Cable Management: Organizing and hiding cables.
Lighting: Ensuring adequate lighting for the workspace.
Ergonomics: Setting up a comfortable and healthy work environment.

Order the Sub-Systems

Workspace Setup
Storage Solutions
Cable Management
Lighting
Ergonomics

Identify Blockers

Workspace Setup:
- Limited space.
- Inadequate furniture.
Storage Solutions:
- Insufficient storage units.
Cable Management:
- Too many cables.
Lighting:
- Poor natural light.
- Lack of suitable lamps.
Ergonomics:
- Uncomfortable chair.
- Poor desk height.

Classify Unit Problems

Limited Space: Location Issue.
Inadequate Furniture: Money Issue.
Insufficient Storage Units: Money Issue.
Too Many Cables: Skill Issue (organization).
Poor Natural Light: Location Issue.
Lack of Suitable Lamps: Money Issue.
Uncomfortable Chair: Money Issue.
Poor Desk Height: Skill Issue (adjustments and modifications).

Develop Solutions

Limited Space: Use vertical space and multipurpose furniture.
Inadequate Furniture: Purchase second-hand or budget-friendly options.
Insufficient Storage Units: Use DIY storage solutions or declutter unnecessary items.
Too Many Cables: Use cable organizers and label cables.
Poor Natural Light: Add mirrors to reflect light and use light-colored decor.
Lack of Suitable Lamps: Buy affordable lamps or repurpose existing ones.
Uncomfortable Chair: Use cushions or invest in an ergonomic chair.
Poor Desk Height: Adjust desk height with risers or use an adjustable chair.

Iterate and Improve

Regularly assess the office setup and make adjustments to improve comfort and efficiency. Implement new storage solutions or rearrange furniture as needed.

The above 2 scenarios were generated by ai (Don't judge me, I just came back from the gym), but you get my point.

Conclusion

If you have reached the end of this article and understand what you have read, then I can assure you that coming up with solutions to your everyday problems will be a breeze. However, there are some pitfalls that you should be aware of, such as:

Trying to work on multiple unit problems at once. Remember to take it one unit problem at a time.
Similar to the first one, thinking about or start another unit problem before you are completely done with the ongoing one.
Systematic thinking can be very overwhelming, which is why the first two pitfalls are important.

Anyway, that's all I have for you. If you have any questions, leave them in the comments below.

Facial Recognition Attendance System with Tensorflow.js

Anthony — Sun, 21 Jul 2024 15:09:59 +0000

Introduction

This article has been in my drafts for so long that I have decided to just write it. Around the year 2020, a friend tasked me with building a fingerprint attendance system where students could take attendance by scanning their fingers on a system. Long story short, COVID happened, and everyone became wary of touching shared surfaces. Consequently, the idea pivoted to a facial recognition system instead of fingerprint scanning. The only problem with this whole project was that I had no idea what I was doing. I had never built an attendance system, nor had I worked with a fingerprint scanner or a facial recognition system before.

Problem Statement

Generally, the way I tackle problems in life or programming is by breaking them down into bits. I start by asking myself the following questions: What is the problem? What is the solution? What are the required steps to achieve the proposed solution? Are there any blockers? Are there alternate solutions?

After analyzing the Facial Recognition Attendance System, I found out that at its core, we just needed it to do three things. Firstly, it should be able to recognize faces. Secondly, it should save these faces and assign a unique identifier to them. Lastly, it should compare these stored faces to keep track of registered faces and mark them as absent or present.

The Ability to Recognize Faces

This project was undertaken before ChatGPT was popular, so when I needed an answer to a particular problem, I would turn to my trusty old friends, Google and Stack Overflow. It was while I was browsing through these platforms that I stumbled upon a library called "TensorFlow.js." It was the answer to my prayers, making it easy as pie to work with machine learning models using JavaScript. But after playing with it for a while and coming to the realization that this might not be as easy as pie after all, I went back to the internet for an easier solution. It was then that I found it, staring right at me, waiting for me to come and pick it up. It whispered into my ears, "Anthony, I know you have been looking for me." Its name was face-api.js, and it was built on top of TensorFlow.js. As the name implied, it specialized in face detection and face recognition, and it was everything I needed to make this facial attendance system a reality.

Registration of faces

Looking at the code now, I feel like I need to edit some things because this thing is so ugly, but I actually don't have time. So, if you look at the code below and you feel I wrote rubbish—you are right, but it works.

<template>
    <DefaultLayout>
        <div v-if="globalState.registerState.value == 0">
            <h4 id="alert" class="shadow-2xl w-auto mx-auto outline"></h4>
            <div class="web-cam">
                <video id="video" ref="video" width="500" height="500" autoplay muted class=""></video>
            </div>
            <div id="camera" ref="camera" class="h-auto w-auto text-center hidden"></div>
            <br>
            <p id="snapShot"></p>
        </div>
        <SavePerson v-else/>
    </DefaultLayout>
</template>

<script setup>
import SavePerson from '../components/SavePerson.vue'
import DefaultLayout from '../layout/defaultLayout.vue'
import {  onMounted, onUpdated } from 'vue'
import {mountWebcam} from '../composibles/useWebcam'
import {loadModels} from '../composibles/useFaceapi'
import {ScanFace} from '../composibles/useVideo'
import {globalState} from '../composibles/useState'


onUpdated(()=>{
    globalState.registerState.value = 0
})
onMounted(mountWebcam)
onMounted(loadModels)
onMounted(ScanFace)

</script>

So let's go through what the above code does:

First, we "mountWebcam." This initializes the device's camera and ensures it's ready to capture your beautiful faces. link to file
Then, we "loadModels." For face-api.js to work, we need some relatively large models loaded first. Ideally, I cache these models in the browser the first time the page is viewed so subsequent times the page loads as fast as possible. link to file
Finally, we scan the user's face, and once that has been done, we show the saveFace component where we get the user's face and save it to the database, in this case, localStorage. link to file

export const ScanFace = () => {
    const video = document.querySelector('#video')
    let recog
    video.addEventListener('play', () => {
        const canvas = faceapi.createCanvasFromMedia(video)

        document.body.append(canvas)
        const displaySize = { width: video.width, height: video.height }
        faceapi.matchDimensions(canvas, displaySize)
        recog = setInterval(async () => {
            const count = globalState.capturedFaces.value.length
            try {
                const detections = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
                const resizedDetections = faceapi.resizeResults(detections, displaySize)
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
                faceapi.draw.drawDetections(canvas, resizedDetections)
                faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)
                if (resizedDetections) {
                    if(count < 3)saveFace(resizedDetections)
                    document.querySelector('#alert').style.color = 'green';
                    document.querySelector('#alert').innerHTML = `Face found, Captured ${count} out of 3`
                    if (count >= 3) {
                        await clearInterval(recog)
                        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
                        globalState.registerState.value++
                    }
                } 
            } catch {
                if (count < 3) {
                    document.querySelector('#alert').style.color= 'red';
                    document.querySelector('#alert').innerHTML = `Can't find a Face, Please Adjust <br>  Captured ${count} out of 3`
                }

            }


        }, 1000)
    });   
}

The provided code defines a function called ScanFace which sets up face detection and tracking on a video feed using the face-api.js library. Here's a step-by-step explanation of what the code does:

Initialization:
- const video = document.querySelector('#video'): Selects the video element from the DOM where the video feed will be displayed.
- let recog: Declares a variable recog which will be used to store the interval ID for the face detection loop.
Event Listener for Video Play:
- video.addEventListener('play', () => { ... }): Sets up an event listener that triggers when the video starts playing.
Canvas Setup:
- const canvas = faceapi.createCanvasFromMedia(video): Creates a canvas element from the video feed using the face-api.js library.
- document.body.append(canvas): Appends the canvas to the body of the document.
- const displaySize = { width: video.width, height: video.height }: Sets the display size of the canvas to match the video element.
- faceapi.matchDimensions(canvas, displaySize): Matches the canvas dimensions to the display size.
Face Detection Loop:
- recog = setInterval(async () => { ... }, 1000): Sets up an interval that runs every second to perform face detection.
Face Detection Logic:
- const count = globalState.capturedFaces.value.length: Gets the current count of captured faces from the global state.
- try { ... } catch { ... }: A try-catch block to handle face detection and update the UI based on the result.
Face Detection Success:
- const detections = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions(): Detects a single face in the video feed along with its landmarks and expressions.
- const resizedDetections = faceapi.resizeResults(detections, displaySize): Resizes the detection results to match the display size.
- canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height): Clears the canvas.
- faceapi.draw.drawDetections(canvas, resizedDetections): Draws the face detections on the canvas.
- faceapi.draw.drawFaceLandmarks(canvas, resizedDetections): Draws the face landmarks on the canvas.
- if (resizedDetections) { ... }: If a face is detected, performs the following actions:
  - If the count of captured faces is less than 3, calls saveFace(resizedDetections) to save the detected face.
  - Updates the alert message to indicate a face has been found and how many faces have been captured.
  - If the count of captured faces is 3 or more, stops the interval and clears the canvas, then increments the registerState value in the global state.
Face Detection Failure:
- If no face is detected, updates the alert message to indicate that a face cannot be found and suggests adjusting the position. It also shows how many faces have been captured so far.

In summary, this code continuously checks the video feed for a face, draws detection results on a canvas, and saves up to three detected faces. It provides user feedback through alert messages and stops once three faces have been successfully captured.

After three faces of the same user has been captured we then show the savePerson component and get more information about the current user like the name.

<template>
    <form class="grid place-items-center place-content-center mt-24 w-full"     @submit.prevent="save">
        <img :src="face.img" alt="userFace"  class="rounded-full w-72 h-72 border border-indigo-600 object-cover">
        <div class="border border-indigo-600 w-full p-5 max-w-[40rem] h-auto overflow-hidden md:text-lg rounded-md shadow-xl  flex flex-col justify-center items-center mt-5">
            Name: <input type="text" v-model="globalState.CapturedUserName.value" placeholder="Input your name" class="p-2 py-1 border-2 border-indigo-600 rounded bg-transparent z-50" required>
        </div>
        <div class="border border-indigo-600 w-full p-5 max-w-[40rem] h-auto overflow-hidden md:text-lg rounded-md shadow-xl  flex flex-col justify-center items-center mt-5">
            Face Certainty : {{face.detection}}
        </div>
        <div class="border border-indigo-600 w-full p-5 max-w-[40rem] h-auto overflow-hidden md:text-lg rounded-md shadow-xl  flex flex-col justify-center items-center mt-5">
            User's Mood : {{face.mood}}
        </div>
        <button
            type="submit"

            class="text-center w-full px-6 py-3 mt-3 text-lg text-white bg-indigo-600 rounded-md sm:mb-0 hover:bg-indigo-700 "
        >
            Register
        </button>
    </form>
</template>

<script setup>
import { highestDetection, globalState, saveCapturedUser } from '../composibles/useState';
import { useRouter } from 'vue-router';

const router = useRouter()
const face = highestDetection()
const save = async()=>{
    await saveCapturedUser()
    router.push('/')
}
</script>

Taking attendance of registered users / faces

Now that we have successfully captured and saved a user, all that is left is to be able to recognize that face keep a timestamp next time the face is shown to the system. below is the code for the take attendance page link to the page

<template>
    <DefaultLayout>
        <div>
            <h4 id="alert" class="shadow-2xl w-auto mx-auto outline"></h4>
            <div class="web-cam flex justify-center items-center">
                <h2 class="mt-20 text-3xl absolute mx-auto">Loading...</h2>
                <video
                    id="video"
                    ref="video"
                    width="500"
                    height="500"
                    autoplay
                    muted
                    class="z-50"
                ></video>
            </div>
            <div
                id="camera"
                ref="camera"
                class="h-auto w-auto text-center hidden"
            ></div>
            <br />
            <p id="snapShot"></p>
        </div>
    </DefaultLayout>
</template>

<script setup>
import DefaultLayout from '../layout/defaultLayout.vue';
import { onMounted, onUpdated } from 'vue';
import { mountWebcam } from '../composibles/useWebcam';
import { loadModels } from '../composibles/useFaceapi';
import { SnapFace } from '../composibles/useAttendance';
import { globalState } from '../composibles/useState';

onMounted(() => {
    globalState.registerState.value = 0;
});
onMounted(mountWebcam);
onMounted(loadModels);
onMounted(SnapFace);
</script>

If you noticed the above code is very similar to the original register face / user code with the only difference being that, instead of "scanFace" that we had in register, we have "SnapFace" function here link to file

export const SnapFace = () => {
    const router = useRouter()
    const video = document.querySelector('#video')
    let recog
    video.addEventListener('play', () => {
        const canvas = faceapi.createCanvasFromMedia(video)
        document.body.append(canvas)
        const displaySize = { width: video.width, height: video.height }
        faceapi.matchDimensions(canvas, displaySize)
        recog = setInterval(async () => {
            try {
                const detections = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions()
                const resizedDetections = faceapi.resizeResults(detections, displaySize)
                canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
                faceapi.draw.drawDetections(canvas, resizedDetections)
                faceapi.draw.drawFaceLandmarks(canvas, resizedDetections)

                if (resizedDetections) {
                    if (resizedDetections.detection.score.toFixed(2) > 0.7) {
                        await clearInterval(recog)
                        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
                        document.querySelector('#alert').style.color = 'green';
                        document.querySelector('#alert').innerHTML = 'Face found'
                        Webcam.snap(function (data_uri) {
                            snappedFace = data_uri
                        });
                        await scanImg(router)

                    } else {
                        document.querySelector('#alert').style.color= 'red';
                        document.querySelector('#alert').innerHTML = 'Can\'t find a Face, Please Adjust'

                    }
                }

            } catch (err) {
                console.log('something went wrong ====', err )
            }
        }, 1000)
    });   
}

The SnapFace function uses the face-api.js library to detect faces in a video feed, capture an image of the detected face, and then trigger further actions such as scanning the image. Here's a detailed explanation of what the code does:

Initialization:
- const router = useRouter(): Initializes the router, likely for navigating to different routes in the application.
- const video = document.querySelector('#video'): Selects the video element from the DOM where the video feed will be displayed.
- let recog: Declares a variable recog which will be used to store the interval ID for the face detection loop.
Event Listener for Video Play:
- video.addEventListener('play', () => { ... }): Sets up an event listener that triggers when the video starts playing.
Canvas Setup:
- const canvas = faceapi.createCanvasFromMedia(video): Creates a canvas element from the video feed using the face-api.js library.
- document.body.append(canvas): Appends the canvas to the body of the document.
- const displaySize = { width: video.width, height: video.height }: Sets the display size of the canvas to match the video element.
- faceapi.matchDimensions(canvas, displaySize): Matches the canvas dimensions to the display size.
Face Detection Loop:
- recog = setInterval(async () => { ... }, 1000): Sets up an interval that runs every second to perform face detection.
Face Detection Logic:
- try { ... } catch (err) { ... }: A try-catch block to handle face detection and log any errors.
Face Detection Success:
- const detections = await faceapi.detectSingleFace(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions(): Detects a single face in the video feed along with its landmarks and expressions.
- const resizedDetections = faceapi.resizeResults(detections, displaySize): Resizes the detection results to match the display size.
- canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height): Clears the canvas.
- faceapi.draw.drawDetections(canvas, resizedDetections): Draws the face detections on the canvas.
- faceapi.draw.drawFaceLandmarks(canvas, resizedDetections): Draws the face landmarks on the canvas.
- if (resizedDetections) { ... }: If a face is detected, performs the following actions:
  - if (resizedDetections.detection.score.toFixed(2) > 0.7): Checks if the detection score is greater than 0.7 (i.e., the detection confidence is high enough).
  - If the detection confidence is high:
  - Stops the interval and clears the canvas.
  - Updates the alert message to indicate a face has been found.
  - Captures an image of the detected face using the Webcam.snap function.
  - Calls the scanImg(router) function, which likely processes the captured image and triggers further actions.
Face Detection Failure:
- If the detection confidence is not high enough, updates the alert message to indicate that a face cannot be found and suggests adjusting the position.
Error Handling:
- Logs any errors that occur during the face detection process.

In summary, this code continuously checks the video feed for a face, draws detection results on a canvas, and captures an image of the face if the detection confidence is high. It provides user feedback through alert messages and triggers further processing of the captured image which in this case is calling the "scanImg".

Saving to localStorage or a database

const scanImg = async (router) => {

    const image = new Image()
    image.src = snappedFace

    // const image = snappedFace
    const container = document.createElement('div')
    container.style.position = 'relative'
    document.body.append(container)
    const labeledFaceDescriptors = await loadLabeledImages(router)

    const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.4)

    const canvas = await faceapi.createCanvasFromMedia(image)
    document.body.append(canvas)
    const displaySize = { width: 350, height: 265 }

    faceapi.matchDimensions(canvas, displaySize)
    const detection = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors()
    if (detection.length < 1) {
        location.reload()
    } else { 
        const resizedDetections = faceapi.resizeResults(detection, displaySize)
        const results = resizedDetections.map((d) => faceMatcher.findBestMatch(d.descriptor))
        results.forEach((result, i) => {
            const box = resizedDetections[i].detection.box
            const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
            drawBox.draw(canvas)
            savedUsers.map(async (label, index) => { 
                if (label.name === result._label) {
                    savedUsers[index].date.push(`${new Date().toLocaleTimeString()} of ${new Date().toLocaleDateString()}`)
                    canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
                    useAlert().openAlert(`Attendance has been taken for ${result._label}`)
                    router.push('/attendanceSheet')
                } 
            })
            canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height)
            useAlert().openAlert('Unknown User Found, go and register')
        })
    }
}

The scanImg function is designed to process the captured image, detect faces, match them against known faces, and take appropriate actions based on the results. Here's a detailed explanation of what the code does:

Image Initialization:
- const image = new Image(): Creates a new image object.
- image.src = snappedFace: Sets the source of the image to the captured face image stored in snappedFace.
Container Setup:
- const container = document.createElement('div'): Creates a new div element.
- container.style.position = 'relative': Sets the position style of the container to relative.
- document.body.append(container): Appends the container to the body of the document.
Load Labeled Images:
- const labeledFaceDescriptors = await loadLabeledImages(router): Loads labeled face descriptors using the loadLabeledImages function, which presumably fetches known faces for matching.
Face Matcher Initialization:
- const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.4): Initializes a face matcher with the labeled face descriptors and a threshold of 0.4.
Canvas Setup:
- const canvas = await faceapi.createCanvasFromMedia(image): Creates a canvas from the image using face-api.js.
- document.body.append(canvas): Appends the canvas to the body of the document.
- const displaySize = { width: 350, height: 265 }: Sets the display size for the canvas.
- faceapi.matchDimensions(canvas, displaySize): Matches the canvas dimensions to the display size.
Face Detection:
- const detection = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors(): Detects all faces in the image along with their landmarks and descriptors.
No Face Detected:
- if (detection.length < 1) { location.reload() }: If no face is detected, reloads the page.
Face Detected:
- const resizedDetections = faceapi.resizeResults(detection, displaySize): Resizes the detection results to match the display size.
- const results = resizedDetections.map((d) => faceMatcher.findBestMatch(d.descriptor)): Maps each resized detection to the best matching known face using the face matcher.
- results.forEach((result, i) => { ... }): Iterates over the results to take appropriate actions based on the match results.
Action Based on Match Results:
- For each result:
  - const box = resizedDetections[i].detection.box: Gets the bounding box of the detected face.
  - const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() }): Creates a box with a label for drawing.
  - drawBox.draw(canvas): Draws the box on the canvas.
  - savedUsers.map(async (label, index) => { ... }): Maps over the saved users to check if the detected face matches any known user.
  - If a match is found:
    - Updates the attendance record for the matched user.
    - Clears the canvas.
    - Opens an alert indicating that attendance has been taken for the user.
    - Redirects to the attendance sheet page using the router.
  - If no match is found:
    - Clears the canvas.
    - Opens an alert indicating that an unknown user was found and suggests registration.

In summary, the scanImg function processes the captured image, detects faces, matches them against known faces, and updates the attendance records if a match is found. It also provides user feedback and handles navigation based on the detection results.

Viewing Attendance

Once the scanImg is done running it actually takes you to the view attendance page. you can also navigate to it from the homepage or entering /attendanceSheet in the url path

Conclusion

This article became way longer than I wanted it to be, but I had fun writing it. If you have any specific questions or are confused about any part of the above article, feel free to leave a comment below, and I will try my absolute best to help you out. Bye for now, till next time!

Links and Repo

Connecting your HTML forms to a Google spreadsheet

Anthony — Mon, 14 Mar 2022 01:59:13 +0000

If you would prefer a video check it out on youtube at

.
HTML forms are one part of the frontend development cycle that every web developer has had to deal with at one point or another in their career, and recently a friend of mine asked if there was a way to save data entered on an HTML form without any backend, and the Answer was YES!!.

In this article, I would be teaching you how you can link a simple HTML form to a google spreadsheet With the easiest, quickest approach possible. All you need is an HTML form, a Google account (to create the Google sheet), and the ability to copy and paste.

The steps below are used to link the forms and Sheet together:

1.) Create your HTML Form and add the appropriate input fields. For this example I would be creating a feedback form with a name and message field
.

2.) Then log in to your Google account and create a Spreadsheet, fill in the first row of the sheet with the name of the input fields in your HTML form. OMIT THE FIRST COLUMN; it would be used to track the date of each entry.

3.) while still on the sheet, click on the extension menu and select app script. This would open up in another browser tab .

4.)

Rename the app script from “untitled project” to whatever you want. I renamed mine to “feedback form”. After replace the myFunction function with the one below



const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
 const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
 scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
 const lock = LockService.getScriptLock()
 lock.tryLock(10000)

 try {
   const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
   const sheet = doc.getSheetByName(sheetName)

   const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
   const nextRow = sheet.getLastRow() + 1

   const newRow = headers.map(function(header) {
     return header === 'Date' ? new Date() : e.parameter[header]
   })

   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

   return ContentService
     .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
     .setMimeType(ContentService.MimeType.JSON)
 }

 catch (e) {
   return ContentService
     .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
     .setMimeType(ContentService.MimeType.JSON)
 }

 finally {
   lock.releaseLock()
 }
}


```.
Save the project (Ctrl + S or click the floppy disk icon).

5.) Run the script. This should bring up a permission dialog, follow the steps and grant all permissions required. When you get to this part 
![Google permission dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgtsqy0xq35rpafi78q0.png) click in advance and continue to the form. If permissions have been given properly, then you should see this 
![Excution successful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8zwv6i7yjoru2shyvki.png).

6.) create triggers for the script by clicking on the trigger icon(alarm) on the sidebar and clicking the fab-like button to add a trigger. This would open up a modal like this 
![trigger modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9e45mwtcwa40pgx9jpam.png)
Fill in the following options:

- Choose which function to run: “doPost”
- Choose which deployment should run: “Head”
- Select event source: “From Spreadsheet”
- Select event type: “On form submit”
Then save, this might require another permission request which you should grant.

    7.) After saving, click on the blue Deploy button on the top right corner and select “New Deployment”. Then click the “Select type Icon” and select “Web App”.

    8.) In the form that appears fill in the description field, this can be whatever you want. In the “execute as” field, select “Me”. and then in “who has access” select “anyone”


    9.) Deploy and copy the web URL that is shown afterward.


With the above steps, we are done with the google sheet aspect. All that is left now is to link the HTML Form to the sheet. There are several methods of doing this but I would be showing you the one I perceive to be the easier and most flexible. Copy and paste the code below in a script tag.

const form = document.querySelector("#form")
const submitButton = document.querySelector("#submit")
const scriptURL = 'https://script.google.com/macros/s/AKfycbwG9vCMBREFM4suhSiTdVPFu7-F-6JclKyZGGuKjFS-dqaZT6kKXS6r_15kub3YH2R5yw/exec'

form.addEventListener('submit', e => {
submitButton.disabled = true
e.preventDefault()
let requestBody = new FormData(form)
fetch(scriptURL, { method: 'POST', body: requestBody})
.then(response => {
alert('Success!', response)
submitButton.disabled = false
})
.catch(error => {
alert('Error!', error.message)
submitButton.disabled = false

   }
   )

})


The above script:


- submits the form data.
-  prevents the page from reloading.
-  Disables the submit button while the data is being sent to 
prevent double clicks.

### Conclusion. 
If you follow the instructions above, then you should be able to any type of HTML form to a google spreadsheet. Below is a list of helpful links.
- The Github repo: https://github.com/kromate/HTMLForms-to-google-sheets
- The Google Sheet: https://docs.google.com/spreadsheets/d/1WDCaLrS8u9Topr2cwERgOgvKbJGqhuHgnQjyf5oZWgY/edit#gid=0