update blog
This commit is contained in:
parent
05b4d4cad8
commit
495497b2e7
3 changed files with 90 additions and 85 deletions
90
content/posts/hello-webassembly-c.md
Normal file
90
content/posts/hello-webassembly-c.md
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
title: "Hello WebAssembly: Getting Started with C/C++"
|
||||
date: 2023-11-21T06:40:48Z
|
||||
draft: false
|
||||
tags: ["WebAssembly", "C", "C++", "Emscripten", "WASM"]
|
||||
---
|
||||
|
||||
WebAssembly (often abbreviated as wasm) is a binary instruction format for a stack-based virtual machine. It's designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications. The power of WebAssembly lies in its ability to execute code at near-native speed, opening up a world of possibilities for web applications. Let’s dive deep into setting up the tools and writing our first WebAssembly module using C.
|
||||
|
||||
## What is WebAssembly?
|
||||
|
||||
WebAssembly acts as a bridge between high-performance code written in languages like C, C++, or Rust, and the web. Traditional web applications run entirely on JavaScript, which, while powerful, might not be the most efficient language for computationally intensive tasks. WebAssembly provides a fast, low-level binary format that browsers can execute, bringing near-native performance to web applications.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To embark on our WebAssembly journey, we need a set of tools to compile our C/C++ code into wasm format. The primary toolchain for this task is Emscripten. Emscripten compiles C/C++ code into WebAssembly and generates the necessary JavaScript and HTML glue code for seamless integration into web applications.
|
||||
|
||||
### Setting Up Emscripten
|
||||
|
||||
The first step is setting up Emscripten. Open your terminal and follow these commands:
|
||||
|
||||
```bash
|
||||
# Clone Emscripten SDK repository
|
||||
git clone https://github.com/emscripten-core/emsdk.git
|
||||
|
||||
# Enter the cloned directory
|
||||
cd emsdk
|
||||
|
||||
# Install the latest Emscripten tools
|
||||
./emsdk install latest
|
||||
|
||||
# Activate the installed tools
|
||||
./emsdk activate latest
|
||||
|
||||
# Source the environment variables for your current terminal session
|
||||
source ./emsdk_env.sh
|
||||
```
|
||||
|
||||
With Emscripten installed and configured, we're ready to write and compile our C code.
|
||||
|
||||
## Writing C Code
|
||||
|
||||
Let's keep it simple for our first WebAssembly module. Create a file named `hello.c` with the following content:
|
||||
|
||||
```c
|
||||
#include <stdio.h>
|
||||
|
||||
int main() {
|
||||
printf("Hello, WebAssembly!\n");
|
||||
return 0;
|
||||
}
|
||||
```
|
||||
|
||||
This C program simply prints a classic greeting to the standard output. Now, the magic happens when we compile this code using Emscripten.
|
||||
|
||||
## Compiling to WebAssembly
|
||||
|
||||
In your terminal, navigate to the directory containing your `hello.c` file and execute the following command:
|
||||
|
||||
```bash
|
||||
emcc hello.c -o hello.html
|
||||
```
|
||||
|
||||
Let's break down this command:
|
||||
|
||||
- `emcc`: The Emscripten Compiler Frontend.
|
||||
- `hello.c`: Your input C file.
|
||||
- `-o hello.html`: The output flag specifying that we want an HTML file. Emscripten will not only generate the WebAssembly binary (`hello.wasm`) but also the necessary JavaScript and HTML code (`hello.js` and `hello.html`) to run it in a browser.
|
||||
|
||||
Once the compilation is complete, you should find three new files in your directory: `hello.wasm`, `hello.js`, and `hello.html`.
|
||||
|
||||
## Running the WebAssembly Module
|
||||
|
||||
Now, let's see our WebAssembly module in action. Since browsers restrict fetching local files for security reasons, it's recommended to serve the generated files via a local server.
|
||||
|
||||
You can use a simple tool like Python's `http.server` or `live-server` for this purpose. Let's use Python:
|
||||
|
||||
```bash
|
||||
python3 -m http.server
|
||||
```
|
||||
|
||||
Open your web browser and navigate to `http://localhost:8000/hello.html`. You should see a webpage displaying the output of our C program: "Hello, WebAssembly!".
|
||||
|
||||
## Conclusion
|
||||
|
||||
We've covered the basics of WebAssembly, installed the necessary toolchain (Emscripten), written a simple C program, and successfully compiled and executed it in a web browser.
|
||||
|
||||
This is just the tip of the iceberg. WebAssembly opens the door to porting complex applications, games, and libraries to the web, pushing the boundaries of what is possible in the browser. In future posts, we'll explore more advanced topics, including passing data between JavaScript and WebAssembly, handling memory, and optimizing code for the web.
|
||||
|
||||
Happy coding with WebAssembly!
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
---
|
||||
title: "Hello World"
|
||||
date: 2026-05-08
|
||||
description: "First post on my new blog, built with Hugo."
|
||||
tags: ["meta", "hugo"]
|
||||
---
|
||||
|
||||
Welcome to my new blog! I've rebuilt my personal website from scratch using [Hugo](https://gohugo.io/), a fast static site generator written in Go.
|
||||
|
||||
## Why Hugo?
|
||||
|
||||
I wanted something minimal, fast, and that gets out of the way. Hugo checks all the boxes:
|
||||
|
||||
- **Blazing fast builds** — the entire site builds in under 100ms
|
||||
- **Markdown-first** — I write posts in plain markdown files
|
||||
- **Zero JavaScript** — the site ships pure HTML and CSS
|
||||
- **Built-in features** — syntax highlighting, RSS feeds, sitemaps, all out of the box
|
||||
|
||||
## The Design
|
||||
|
||||
The design is inspired by the [Cactus Dark](https://probberechts.github.io/hexo-theme-cactus/) theme — a minimalist, terminal-inspired aesthetic with monospace typography and a dark color scheme. I built the theme from scratch for full control.
|
||||
|
||||
Here's a quick code example to make sure syntax highlighting works:
|
||||
|
||||
```python
|
||||
def greet(name: str) -> str:
|
||||
"""Return a greeting message."""
|
||||
return f"Hello, {name}! Welcome to divyam.dev"
|
||||
|
||||
if __name__ == "__main__":
|
||||
print(greet("World"))
|
||||
```
|
||||
|
||||
And some JavaScript too:
|
||||
|
||||
```javascript
|
||||
const fetchPosts = async () => {
|
||||
const response = await fetch('/api/posts');
|
||||
const posts = await response.json();
|
||||
return posts.filter(post => post.published);
|
||||
};
|
||||
```
|
||||
|
||||
## What's Next?
|
||||
|
||||
I plan to write about:
|
||||
|
||||
- Full-stack development patterns and best practices
|
||||
- Side projects and what I learn building them
|
||||
- Deep dives into interesting technical problems
|
||||
- Tools and workflows that make development better
|
||||
|
||||
Stay tuned — there's more coming soon.
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
---
|
||||
title: "Building a PDF Translation Pipeline"
|
||||
date: 2026-02-11
|
||||
description: "How I built a pipeline to translate Hindi PDFs to English using OCR and neural machine translation."
|
||||
tags: ["python", "ocr", "ml"]
|
||||
---
|
||||
|
||||
Recently, I needed to translate a PDF document from Hindi to English. Sounds simple enough, right? Turns out, it's a surprisingly deep rabbit hole.
|
||||
|
||||
## The Pipeline
|
||||
|
||||
The approach I settled on follows this flow:
|
||||
|
||||
```
|
||||
PDF → Images → OCR → Translation → Rendered Images → PDF
|
||||
```
|
||||
|
||||
Each step has its own set of challenges:
|
||||
|
||||
1. **PDF to Images**: Convert each page to a high-DPI image for better OCR accuracy
|
||||
2. **OCR**: Extract text with position data using PaddleOCR
|
||||
3. **Translation**: Run extracted text through NLLB (No Language Left Behind)
|
||||
4. **Rendering**: Paint translated text back onto the original image
|
||||
5. **Assembly**: Combine rendered images back into a PDF
|
||||
|
||||
## Lessons Learned
|
||||
|
||||
- **DPI matters a lot** — bumping from 150 to 300 DPI dramatically improved OCR accuracy for Hindi text
|
||||
- **Font rendering is hard** — getting translated text to fit in the same bounding boxes required careful font size calculation
|
||||
- **Fallback strategies** — TrOCR as a fallback when PaddleOCR fails on certain text regions
|
||||
|
||||
The code is messy but it works. Sometimes that's enough.
|
||||
Loading…
Reference in a new issue