DEV Community: aj1thkr1sh

CNN-LSTM Hybrid Architecture for Thanglish-to-Tamil : Bridging 26 Letters to 247 Characters

aj1thkr1sh — Tue, 17 Feb 2026 07:13:24 +0000

Introduction : Let's do Experiment 🧪

I sometime use Google Input Tools to write Tamil via Thanglish. Like, if I type "Vanakkam" it will replace with "வணக்கம்"

Seeing(some years back) and using this on Day 1, I always thought, how they Built this? What Model they use? How we can Build this one? Like those

So, on past Weekend I decided to Build One 💪

Dataset : First thing in Machine Learning / Deep Learning 📊

I analyzed a lot of Dataset and decided to stick with Google Dakshina Dataset

It contains a lot of Dataset, I chose to use below

ta.translit.sampled.train.tsv
ta.translit.sampled.dev.tsv
ta.translit.sampled.test.tsv

So, it is Character Level not Word or Token Level

Choosing Architecture 🏗️ : Comes Engineer's Artist 🎨

Seq2Seq : Fixed

Just briefly : Seq2Seq is used to turn one Sequence of Data into another Sequence, typically contain Encoder Block to read the Input then produce the Context Representation and Decoder Block to generate the output

First it is understandable that we need Seq2Seq Model

Yes, we enter the Sequence of Characters and we need to get Sequence of Characters

We shall proceed with that

Intuition of Architecture

First, intuition that came to me to like

💭 Use Bidirectional RNN either BiLSTM or BiGRU with Attention Mechanism

That's the intuition that came to me

But, then I thought, wait, we are going to use Character Level, so, maximum Number of Timesteps will not exceed maximum of 50 time steps.

So, just LSTM works good here(LONG SHORT-TERM MEMORY!)

And I got another Thought, kind of FIRST PRINCIPLE

Look closely at First Level

Why, my Intuition suggested BiRNN(LSTM or GRU) with Attention Mechanism? Because of,

Thanglish Words Representation

Let us consider an example,

If we write "Vanakkam" for generating "வ" it needs to look for 'v' and 'a' both, right?

Similarly, for generating "ண" it needs to look for "na" and needs to decide which "ந", "ன", "ண" for that it needs to decide what comes BEFORE what comes AFTER

Because, "ன", "ண" won't appear in starting of the word and "ந" won't appear at end of the words rarely

Attention Mechanism

I will not go too detail about Attention Mechanism here but generally, allows the Decoder to look back at all the Encoder's Hidden States and Pick which ones are most Relevant at each step of the output

Here we need to look for surrounding characters and decide

Note : "na" is just one example, there are other PATTERNS to consider like for "pattam", "tt" should be "ட்ட" like many other patterns too

Vanilla LSTM

But, just LSTM on Seq2Seq should solve the use case right? Because there is no such Long Range Dependencies

Local Receptive Field

Local Receptive Field is one of the Fundamental concept in Convolutional Neural Networks (CNNs) which focuses on a specific spatial location

Have explained briefly CNN here, please take a look!

🤷 What to do with Image Here?

We aren't dealing with Image right, then why use CNN?

1D Convolution comes to rescue

We are going to use 1D Convolution, where Convolution is performed in Sequential Data, such as Text, Time Series, or Audio Signals etc.,

Again why Convolution 🤷

You can read more here

But briefly, it performs Convolution Operation : A Filter (or Kernel) that slides across an Input Data(mostly Image), Computing
Element Wise Multiplications and Summing the results at each position to produce an output called a Feature Map

We have the solution here

Both Attention and Convolution compute weighted combinations of input values, but Convolution is restricted to a small local window, while Attention can relate any positions regardless of distance

Similar to Attention Mechanism(where Attention dynamically Computes Relationships between positions, often globally), and Convolution Operation extracts Features from Local Spatial Regions (a small fixed window) to address our use case

Best Architecture?

There are many Architectures and Design Choices but let us stick with it as of now

Any of those which one is the best Architecture, that's the billion dollar question, right?

Let the Evaluation Speak

Evaluation 📈

Training using Google Colab

Note : These Accuracy are not too high, I am just tweaking Hyperparameter like Regularization, Architectural Design etc., with limited Compute Resource, just sharing the current progress here

Vanilla LSTM

Current Total Parameters : 1,411,890

Train Loss: 0.1314 | Val Loss: 1.4453 | Val Acc: 53.41% | Val CER: 15.67% | LR: 0.000500

Test Exact Match Accuracy: 51.57%
Test Character Error Rate: 16.36%

Good

The Model is actually Learning
Some demo outputs are correct

Bad

Overfitting
Some Errors in demo

Fixes(but not limited to)

Regularization
Model Architecture Improvement

BiGRU with Attention Mechanism

Current Total Parameters : 12,580,914

Train Loss: 0.1460 | Val Loss: 1.3492 | Val Acc: 54.74% | Val CER: 15.50% | LR: 0.000500

Test Exact Match Accuracy: 50.60%
Test Character Error Rate: 16.44%

Good

The Model is actually Learning
Some demo outputs are correct

Bad

Overfitting
Some Errors in demo

Fixes(but not limited to)

Regularization
Model Architecture Improvement
Residual Connection

CNN-LSTM Architecture

Current Total Parameters : 767,666

Train Loss : 0.0903 | Val Loss: 0.9868 | Val Acc : 53.13% | Val CER : 15.77% | LR : 0.000125

Test Exact Match Accuracy : 50.55%
Test Character Error Rate : 15.81%

Good

Total Parameters size is low comparatively
The Model is actually Learning
Some demo outputs are correct

Bad

Overfitting
Some Errors in demo

Fixes(but not limited to)

Regularization
Model Architecture Improvement
Residual Connection

🏆 Billion Dollar Question : Which Architecture is the Winner?

All three Models perform remarkably similarly on test metrics (~50-51% accuracy, ~15.8-16.4% CER)

But the winner is.....

.
.
.
.
.
.
.
.
.

CNN-LSTM Architecture wins 🎉 🥳

Why CNN-LSTM wins :

First CNN does Parameter Sharing

Best generalization : Lowest val loss (0.9868) by a significant margin compared to the other two (~1.35–1.45)
Best test CER (15.81%)
Smallest Model : Only 767K parameters, roughly 16x smaller than BiGRU+Attention and 2x smaller than Vanilla LSTM. This means faster Inference, easier Deployment
Best efficiency : Achieving comparable (or better) results with far Fewer Parameters is a strong signal that the Architecture suits this task well and CNNs are good at capturing local character-level n-gram patterns, which is exactly what transliteration needs

Note : In all Three Architectures, we can do fixes to improve all Three Models, may be even with Hyperparameter tuning other Architecture might win but here sharing the current status

Also, CNN-LSTM is not new it's already applied in other various fields and domain, like

OCR : Optical Character Recognition
The CNN-LSTM Attention-based Seq2Seq model has been shown to be effective for OCR
Many other Domains and Fields

Because we need to Experiment and Find

Repository : https://github.com/ajithraghavan/VisAI

Please feel free to Clone, Use and Train on your own Dataset for exploration

Thanks for reading!

Originally Posted : https://ajithraghavan.github.io/blog/CNN-and-LSTM-for-Tamil-Typing/

Try My ~3.5 Million Parameters Model Instead for ✨😉

aj1thkr1sh — Mon, 25 Aug 2025 07:26:03 +0000

😊 Introduction

I thought to Build a Machine Learning Model to generate Emojis for My Writing content

Like when typing some sentences, I think I need relevant Emojis in the sentences, as it will give more expressiveness, right

And also because currently I am searching in Web(using some website like Emoji Finder etc., it is based on keywords only) to pick Emojis

So I decided to Develop a LSTM Model to automatically generate Emoji for My Sentences

🎥 First Demo

🧑‍🏫 Explanation

When the user types the paragraph, for each paragraph the Model predicts the approximate Emoji

For example, if you have 5 sentences in a paragraph, the Model will generate 5 Emojis

⚙️ Technical Details

I currently have totally 20 Emojis ❤, 😍, 😂, 💕, 🔥, 😊, 😎, ✨, 💙, 😘, 📷, 🇺🇸, ☀, 💜, 😉, 💯, 😁, 🎄, 📸, 😜

And used Dataset from Hugging Face and used Google Colab for Training

🎯 Model Selection

I have decided to use BiLSTM(Bidirectional LSTM(Long Short-Term Memory))

We could have just used LSTM rather then BiLSTM as we are not doing Seq2Seq Task, like we are not translating English to Emojis

But, here BiLSTM improves the performance by at least 10%

So, decided to use BiLSTM

Note :

Here we could have used BiLSTM with Attention Mechanism or even Fine-Tuned Pre Trained Model like BERT

But decided to use BiLSTM

🏗️ Architecture

First have used Embedding Layer
Then, BiLSTM with 2 Layers
Dropout for Regularization
Then Linear Layer with 20 output units for each Emojis
- Note :
- We are using BiLSTM, so it will hidden states from both the directions
- So, before passing to Linear Layer we must concatenate both the hidden states

🎲 Hyperparameters

I have used the Maximum length of the Sequence to be 50
Embedding Dimension as 128
Hidden Dimension for LSTM States to be 128
As stated before, we have chosen Number of Layers to be 2
Learning Rate α : 0.0005

🚨 Accuracy and Important Study

Regarding Accuracy, it is not relatively higher although with BiLSTM and even low with Unidirectional LSTM

Was tweaking and trying to improve the performance then LATER ONLY realized that data has Class Imbalance Problem

Where ~21% of the Data has "❤" which dominates most and followed by ~10% of Data has "😍" and so on... then "😜" was barely minimum

⚠️ Important action

🥇 First Rule : Data in Training Set, Development Set and Test Set should follow the same Distribution

Followed by, may be here, we can Augmented Data Synthetically, or may be with some other Architecture so on

Yes, we can also increase Accuracy with the same Data but as of now saved that for later

📜 Little History

I have used Regular LSTM and saw the Model was Overfitting

So, of various Hyperparameters(still overfitting) after few tweaking various Hyperparameters along with BiLSTM showed little improvement and continued and seems to work fine

Originally Posted : https://ajithraghavan.github.io/blog/emoji-generator/

Thanks for reading

🚀 Meet QMD : Quick Markdown

aj1thkr1sh — Thu, 17 Jul 2025 14:17:03 +0000

Hey Developers! 👋

TL;DR: Single-character syntax = significant fewer tokens = cheaper AI costs 🎯

What if I told you there's a way to make your Markdown few percentage more efficient for LLMs while keeping it just as readable for humans?

Sounds too good to be true? Well, Quick Markdown (QMD) is here to change the game! 🎮

🤔 What is Quick Markdown?

Quick Markdown (QMD) is a lightweight markup language that maintains Markdown's readability while significantly reducing storage requirements and token consumption.

Enter: QMD 🎯

🧠 Built for LLMs(in addition)
💾 Reduces token & storage usage
📏 Compact, clean, and context-aware
🔁 Still plays nicely with traditional Markdown!

It’s like Markdown, but on a diet 💪🍃

💭 Show us example, man

Yes, yes, here are examples by comparison

Traditional:    ## Heading Two        (3 tokens)
QMD:            >Heading Two          (1 token) 🎉

Traditional:    **bold text**         (4 tokens)  
QMD:            *bold text*           (2 tokens) ⚡

Traditional:    - [x] Done task       (6 tokens)
QMD:            + Done task           (2 tokens) 🍀

💵 Real impact

Comparison: Traditional vs QMD

Traditional Markdown (231 bytes):

## Shopping List

**Important** items to buy:

- Milk
- Bread
  - Whole wheat
  - Sourdough
- ~~Eggs~~ Already have

### Tasks
- [x] Buy groceries
- [ ] Call store
- [~] Check prices

### Notes

Check https://store.com for *deals*.

QMD Version (217 bytes, approximately 6.1 % reduction):

>Shopping List

*Important* items to buy:

• Milk
• Bread
  • Whole wheat
  • Sourdough
• ~Eggs~ Already have

-Tasks
+ Buy groceries
. Call store
* Check prices

-Notes

Check https://store.com for /deals/.

For larger files, the compression ratio between QMD and MD should be significantly better

🚀 Ready to Start?

Check out the GitHub repo and start using QMD today! Your LLM bills will thank you! 💰

GitHub : https://github.com/ajithraghavan/qmd

The future of documentation is Quick, Quality, and ready for a Quantum-leap! ⚡

⭐ Star it on GitHub, clone it, try it out and tell us what you think!

Built something cool with QMD

💬 Drop it in the comments!

📱🎉 Say Hi to PhoneSlides – The Vertical-First Presentation Tool! 🎉📱

aj1thkr1sh — Sat, 12 Jul 2025 12:00:21 +0000

Hey Folks 👋

Introducing 🚀 PhoneSlides : the friendliest slide presentation tool made for your phone!

🧠 The Idea

We are consuming everything on vertical screens now:

Reels 📱
Shorts 🎬
TikToks 🕺
Stories 🧃
etc

But what about presentations?
That’s where PhoneSlides comes in

📲 What is PhoneSlides?

✅ Create beautiful vertical-first presentations (optimized for phones)
✅ Add titles, descriptions, and images with ease
✅ Record your screen and voice walkthrough (hello, mini-reels!)
✅ Export/share as video to YouTube Shorts, Instagram Reels, or even WhatsApp

So, just tall, crisp, story-driven slides.

🛠️ Tech Stack

We built PhoneSlides using: HTML, CSS, JavaScript

🔮 What's Next?

✨ Templates and styling options
🎨 Image uploads and custom themes
🐛 Bug fixes and performance tweaks

Your feedback will shape what comes next!

🎯 Try It Out!

GitHub Link : https://github.com/ajithraghavan/PhoneSlides

💬 We Want Your Feedback!

This is the initial stage release of PhoneSlides, and we are excited to hear from the community:

What features would you love to see?
How would you use PhoneSlides in your work?
Found any bugs? We'd love to fix them!

Drop a comment below or star ⭐️ us on GitHub if you find this interesting!

Or raise an issue, or even send a PR!

Let’s build a better mobile presentation future together 💪

Your feedback helps us build something amazing 🙌

Yaali, the Tamil conversing AI

aj1thkr1sh — Wed, 18 Aug 2021 15:41:17 +0000

Yaali

I have created Yaali AI, using Neural Network, that one can communicate in Tamil

Please look at the demo here

Conversation

When I say "Yaali", Yaali will reply "Sollunga"
When I ask to say a joke,
Yaali will say, "risk edukarathellam enakku rusk sapdramathiri",
which is one of the actor Vadivelu's dialogues joke

Thanks for reading

Follow on
Instagram
Twitter

Single Page Application Library in Vanilla JS

aj1thkr1sh — Sat, 20 Mar 2021 19:18:11 +0000

Flyght

Hi, library for making Single Page Application (SPA) in Vanilla JavaScript library

Flyght works based window.loction.hash whenever the hash changes, the configured URL will be triggered and page will be loaded

One can easily make Single Page Application using the Flyght

Simple, yet powerful

Note : Single Page Application might affect SEO, choose appropriate case to use

Usage

<script type="text/javascript" src="https://unpkg.com/flyght"></script>

Simple right?

Yes, Simple yet powerful

Configuration

You need to init the Flyght with required parameter, then your webpage will turn into SPA, like the Flyght way

Flyght.init({
  idElement : "idElement",
  urlConfiguration : [ {
    hash : "#about",
    url : "/about.html",
    type : "GET"
  }, {
    hash : "#contact",
    url : "/contact.html",
    type : "GET"
  }, {
    hash : "#team",
    url : "/team.html",
    type : "GET"
  } ],
  requestHeader : [ {
    header : 'Content-type',
    value : 'application/json'
  } ]
});

Configuration Parameters

idElement : Is the id of the DOM Element, where the loaded page is rendered
urlConfiguration : Is the Array of Object that has, url, hash, and request type
1. hash : The hash we provided
2. url : For the given hash respective URL will be called and response will be attached to the idElement content
3. type : The request type URL to be called
requestHeader : The header to be attached to the request
1. header : The header value to be attached to the header
2. value : The value to the request header

⭐ on GitHub if you love

Follow Me on
Twitter
Intsagram
LinkedIn

Access any HTML DOM Element, easier than ever

aj1thkr1sh — Sat, 09 Jan 2021 08:41:33 +0000

EnFields

Say, if you are developing the web application in JavaScript

You need to manipulate the HTML DOM to add event listener or actions or anything by mapping the HTML DOM to JavaScript variables

Example,
if below is the HTML

......
<input type="text" id="name" placeholder="Name">
<input type="email" id="email" placeholder="EMail">
<input type="number" id="mobile_number" placeholder="Mobile Number">
......

you need to map those HTML DOM to JavaScript variable to access

......
var name = document.getElementById("name");
var email = document.getElementById("email");
var mobileNumber = document.getElementById("mobile_number");
......

then you can get the values or attach event or whatever you want to manipulate the HTML DOM

🤔 What if the library does this for you?

Say Hi, to EnFields

EnFields does the process for you

😲 How?

It is very simple. Include the library in you webpage

<script src="https://unpkg.com/enfields"></script>

then,

EnFields.start();

🎉 Ta-da!

The

<input type="text" id="name" placeholder="Name">

DOM will map to variable

_name

😍

How cool, right?

⚙️ Naming Convention( What will be the name of the variable? )

The name given to the id that is

id="name"

, the "name" is taken, appending with preceding underscore, so, the

_name

is the variable generated, which will be added to window object. So, directly using

_name

will refer to that HTML DOM

🔧 EnFields parameters

EnFields.start()

accepts the object of below type,

queryElement : is the value, where the variable generation process starts, if not provided then, all id element from the HTML DOM will be generated

Example

  <form id="user-form">......</form>

  EnFields.start({
    queryElement: 'user-form'
  });

The variable, will be generated for all the HTML DOM element containing id attribute, in user-form HTML DOM, including user-form tag

targetObject : is used to assign the generated variable to the provided target object, instead of window object

Example

  var UserForm = {};

  EnFields.start({
    targetObject: UserForm
  });

The variables will be generated and will be stored to UserForm object instead of window object

idList : list of id names in array, if passed, variables will be generated only for the ids, contained in this array

Example

  EnFields.start({
    idList: ['name', 'email']
  });

The variable will be generated only for name and email HTML DOM

However, one can use all the three keys to make more flexible

Example

EnFields.start({
  targetObject: UserForm,
  queryElement: 'user-form',
  idList: ['name', 'email']
});

⭐ Star on GitHub if you love

Stylq: 5000+ downloads

aj1thkr1sh — Sat, 21 Nov 2020 08:32:26 +0000

Hi, Thank You for 5000+ downloads on Stylq

Stylq is the cool syntax language, allows user to make website more easily and effectively.

Stlyq is the Rich Syntax file that generate HTML file.
Stylq uses variable to make website fastly and effectively.

Download and enjoy here

Star on GitHub if you like Stylq

Stylq CLI

One can also use Stylq CLI to achieve the same more effectively

Stylq-CLI Github

Thanks for the support

Stylq CLI

aj1thkr1sh — Sat, 04 Jan 2020 06:35:01 +0000

Stylq

Stylq is the cool syntax HTML Preprocessor.
Stylq will allow user to make HTML file more easily.
Stlyq is the Rich Syntax file to generator HTML file in the easy way. Stylq is easy readable and writable.

Stylq CLI

Stylq CLI is the easy way to process Stylq file

Command Line Usage

For NPM

  npm i stylq-cli

For YARN

  yarn add stylq-cli

General Syntax

Use
1.

stylq FileName.stylq

to process the file and save as the same name

stylq FileName.stylq TargetFile.html

to process and save to the target location

Thanks for reading.

Please Star on GitHub if you like it.

Stylq
StylqCLI

Find the real world match that you draw

aj1thkr1sh — Sun, 01 Sep 2019 05:52:05 +0000

Hi I am Ajith, I have created the web application called MagicDraw

You can draw the image and find the near exact match of the real world picture

This application (MagicDraw) creation date : 30/08/2019

Take a look in Instagram : https://www.instagram.com/p/B10_CE-jDq8/?igshid=1toi26d7yxo9b

Take a look

cover_image:https://thepracticalde/v.s3.amazonaws.com/i/omss4z0j88w0hesym7ew.png

Color You console, with iPrint

aj1thkr1sh — Sat, 15 Jun 2019 05:16:18 +0000

iPrint

Hi, cosole.log(value);
is cool 😎 but it is very large syntax to, type.
And,

how cool if you have to just do type

  iPrint('Hi');

and adding color to the console?
😲

Here you are!

iPrint is the cool console logger.

iPrint gives color to your "console"!

Command Line Usage

For NPM

  npm install iprint

  npm i iprint

Example


  var iPrint = require('iPrint').iPrinter;

  iPrint('Hi, everyone');

  iPrint('Hi everyone - Magenta Color','magenta');

  iPrint('Hi, everyone - Blue Background','bgblue');

  iPrint('iPrintDefaultColor','cyan'); // Changes default output color from 'blue' to 'cyan'

  iPrint('Hi, default color changed form blue to cyan');

General Syntax

Just type as follow

..1. To just print the string (default color is blue)

    iPrint(value);

..2. To add color to your string

    iPrint(value,colorValue);

..3. To add background color to your string

    iPrint(value,backgroundColorValue);

..4. To change default color to your string

    iPrint('iPrintDefaultColor',colorValue);

'iPrintDefaultColor' is strict notation of changing the default color of output string.

Here after output's default color will be changed.

Color Values

    iPrint(value,colorValue);

colorValue = 'blue'
colorValue = 'red'
colorValue = 'green'
colorValue = 'yellow'
colorValue = 'cyan'
colorValue = 'white'
colorValue = 'black'
colorValue = 'magenta'

Background Color Values

      iPrint(value,backgroundColorValue);

colorValue = 'bgblue'
colorValue = 'bgred'
colorValue = 'bggreen'
colorValue = 'bgyellow'
colorValue = 'bgcyan'
colorValue = 'bgwhite'
colorValue = 'bgblack'
colorValue = 'bgmagenta'

Stylq

aj1thkr1sh — Mon, 20 Aug 2018 15:56:07 +0000

title: Stylq
published: true
description: Stylq is the cool syntax HTML Preprocessor. Stylq will allow user to make HTML file more easily. Stlyq is the Rich Syntax file to generator HTML file in the easy way. Stylq is the easy readable and writable.

Usage and Example

  var stylq = require('stylq');

  stylq.process('sample.stylq');

To Send to another location

  stylq.processAndSend('sample.stylq','targetFileName.html');

Here is the sample file that is given as input.

 //sample.stylq

  html{
    head{
      title{
        The Title of the Page
      }
    }
    body{
      h1{
        This is header
      }
      p id="paragraph-id"{
        This is paragraph
      }
      h2 style="color: blue;" id="heading-line"{
        The Multi attributes
      }
    }
  }

NPM
Yarn
tags: js,stylq,webdev,html