Tag Archives: technology

I Built a Pokémon Game. Here’s What I Learned About LangChain and LangGraph.

I wanted to learn LangChain and LangGraph properly — not through dry tutorials, but by building something fun. So I built a text-based Pokémon RPG where an LLM narrates your adventure, generates wild encounters, and drives the story, while Python handles the actual game mechanics.

The full source code is a single main.py file. In this post, I’ll walk through the key concepts and point to exactly where they show up in the code.

📦 Full source on GitHub

I also have a YouTube video about this


The Big Idea: LLM for Creativity, Code for Logic

The most important design decision was the split of responsibilities. The LLM handles things it’s good at — narration, personality, generating Pokémon names and descriptions. Python handles things that need to be deterministic — damage formulas, catch rates, HP tracking. LangGraph ties them together into a state machine that is the game loop.


1. Connecting to the LLM

LangChain abstracts LLM providers behind a unified interface. Whether you use OpenAI, Anthropic, or a self-hosted Ollama server, the API is the same. I’m running Qwen 3.5 on a remote Ollama instance:

llm = ChatOllama(
model="qwen3.5:35b-a3b",
base_url="http://127.0.0.1:11434",
max_tokens=4096,
temperature=0.7,
)

This single object gets reused everywhere — for narration, Pokémon generation, and Professor Oak’s dialogue. Swap the model or URL, and the entire game runs on a different LLM with zero code changes.


2. Prompt Templates: Giving the LLM a Role

Raw strings work, but templates are reusable. The narrator chain uses a SystemMessage to set the persona, a MessagesPlaceholder for conversation history, and variables for dynamic context:

narrator = (
ChatPromptTemplate.from_messages([
("system", """You are the narrator of a Pokémon text adventure.
Player: {player_name} | Location: {location} | Badges: {badge_count}
Team: {team_str} ..."""),
MessagesPlaceholder("history"),
("human", "{input}"),
])
| llm
)

The | pipe is LCEL (LangChain Expression Language) — it composes the template and the LLM into a single callable chain. One .invoke() fills the template, sends it to the model, and returns the response.


3. Structured Output: Pokémon as Data, Not Prose

This was the moment it clicked for me. Instead of parsing free text with regex, you define a Pydantic model and LangChain forces the LLM to return valid, typed data:

class WildPokemonSchema(BaseModel):
name: str
type: str
level: int = Field(ge=2, le=50)
hp: int = Field(ge=20, le=120)
attack: int = Field(ge=10, le=60)
defense: int = Field(ge=10, le=50)
encounter_generator = llm.with_structured_output(WildPokemonSchema)

Now, when I call encounter_generator.invoke("Generate a wild Pokémon for Viridian Forest"), I get back an actual WildPokemonSchema object with guaranteed fields and value ranges — not a blob of text I have to hope is parseable.


4. LangGraph: The Game Is a State Machine

This is where things get interesting. A Pokémon game isn’t a linear prompt → response flow. It’s a loop with branches: explore → maybe encounter → fight or catch or run → check outcome → loop back. That’s a state machine, and that’s exactly what LangGraph gives you.

First, you define the state — everything the game needs to track:

class GameState(TypedDict):
messages: Annotated[list, add_messages]
player_name: str
location: str
pokemon_team: list[dict]
wild_pokemon: dict | None
badge_count: int
game_phase: str
turn_count: int

The Annotated[list, add_messages] part is a reducer — it tells LangGraph to append new messages to the list instead of replacing it. This is how conversation history accumulates automatically.

Then you write nodes — plain functions that receive the state and return partial updates:

def explore_node(state: GameState) -> dict:
# ... call the narrator LLM, return new messages
return {"messages": [...], "game_phase": "exploration"}
def battle_node(state: GameState) -> dict:
# ... handle fight/catch/run logic
return {"messages": [...], "wild_pokemon": updated, "game_phase": "battle"}

You only return the keys that changed. LangGraph handles merging.


5. Conditional Edges: Branching Paths

The real power of the graph is dynamic routing. After exploring, should the player encounter a wild Pokémon or keep walking? After a battle turn, did they win, lose, or is the fight still going?

def route_after_battle(state: GameState) -> str:
phase = state.get("game_phase", "")
if phase == "exploration":
return "explore" # won the fight
if phase == "game_over":
return "game_over" # your Pokémon fainted
return "battle" # fight continues
graph.add_conditional_edges("battle", route_after_battle,
{"explore": "explore", "game_over": "game_over", "battle": "battle"})

The routing function reads the state and returns a string key. The mapping dict sends the graph to the right node. No if/else spaghetti — the graph structure is the game logic.


6. interrupt(): Waiting for the Player

The most game-changing feature (pun intended). interrupt() pauses the entire graph and surfaces a prompt to the player. When they respond, execution resumes exactly where it left off:

# Inside battle_node:
action = interrupt(
f"⚔️ BATTLE — Turn {state.get('turn_count', 0) + 1}\n"
f" {p['name']}: {p['hp']}/{p['max_hp']} HP\n"
f" Wild {w['name']}: {w['hp']}/{w['max_hp']} HP\n"
f" Your moves: [{moves_str}]\n"
f" Or: [catch] / [run]"
)
# 'action' now contains whatever the player typed

For this to work, you need a checkpointer — it saves the graph’s state between pauses:

checkpointer = MemorySaver()
game = graph.compile(checkpointer=checkpointer)
# Each session gets a thread_id (like a save file)
config = {"configurable": {"thread_id": f"game-{name}"}}

The game loop then checks for interrupts and resumes with the player’s input:

snapshot = game.get_state(config)
if snapshot.tasks and snapshot.tasks[0].interrupts:
prompt = snapshot.tasks[0].interrupts[0].value
player_input = input("> ")
result = game.invoke(Command(resume=player_input), config)

The Final Graph

Here’s the complete game flow:

        ┌──────────┐
        │  START    │
        └────┬─────┘
             │
        ┌────▼─────┐
        │  intro    │  ← Professor Oak
        └────┬─────┘
             │
        ┌────▼─────┐ ◄──────────────────────────┐
        │ explore   │  ← waits for player input   │
        └────┬─────┘                              │
             │                                    │
      ┌──────┴──────┐                             │
      ▼             ▼                             │
 ┌────────┐  ┌──────────────┐                     │
 │  heal  │  │encounter_chk │                     │
 └───┬────┘  └──────┬───────┘                     │
     │          ┌───┴────┐                        │
     │        none    encounter                   │
     │          │        │                        │
     │          │ ┌──────▼──────┐                  │
     │          │ │   battle    │◄──┐             │
     │          │ │  (interrupt)│   │ ongoing     │
     │          │ └──────┬──────┘   │             │
     │          │   ┌────┼────┐    │             │
     │          │  win  loss  loop─┘             │
     │          │   │    │                        │
     └──────────┴───┴────┼────────────────────────┘
                         │
                  ┌──────▼──────┐
                  │  game_over  │ → END
                  └─────────────┘

Key Takeaways

Split responsibilities wisely. LLMs are great at generating creative text and structured data. They’re terrible at math and consistent state tracking. Let each do what it’s good at.

Structured output is underrated. .with_structured_output() turned the LLM from a chatbot into a game asset generator. No parsing, no praying — just typed Python objects.

LangGraph thinks in graphs, not chains. Once I stopped thinking “prompt → response” and started thinking “state → node → conditional edge → next state,” the game architecture fell into place naturally.

interrupt() makes real interactivity possible. Without it, you’re stuck building hacky input loops around the LLM. With it, the graph itself manages the pause/resume cycle.


The full game is a single main.py — about 300 lines of Python. Clone it, point it at any Ollama-compatible server, and start catching Pokémon.

📦 Source code on GitHub

Is coding over? My prediction…

Here’s a summary of the related video I uploaded to my YouTube channel:


We Are About to Let AI Write 90% of Our Code

Hi friends 👋

In the last two months, something has changed.

And I don’t mean incrementally. I mean, fundamentally.

If you’ve tried using Claude Code with Opus — or accessed the Opus model through another provider — you can feel it. This is no longer autocomplete on steroids. This is something different.

This is real.
And it’s starting to work really well.

My Prediction

I’m not sure you’ll agree with me, but here it goes:

Within the next 2–3 years, 90% of the code we ship will be AI-generated.

Our job as developers will shift dramatically.

Instead of writing most of the code ourselves, we’ll focus on:

  • Providing high-quality context
  • Managing complexity and moving pieces
  • Handling edge cases AI can’t infer
  • Connecting systems
  • Making architectural decisions
  • Ensuring business value is delivered

In short, we’ll move from being writers of code to being managers of AI agents.

Almost like engineering managers — but for agents.

From Autocomplete to Agents

The early days of AI in development were about better tab-complete.

That era is over.

It’s time to “leave the seat” to AI agents — or even multiple agents working together — and step into a different role:

  • Making sure priorities are correct
  • Deciding which models to use and when
  • Managing cost (because yes, this can get expensive)
  • Ensuring output quality
  • Validating real-world impact

This year, I think we’ll learn a lot about how to be efficient in this new paradigm.

If You Don’t Believe It…

Try Claude Code with Opus.

That’s my honest recommendation. It’s what I’ve been using over the past two weeks, and it genuinely opened my eyes.

Other models can work too — Codex latest versions are solid — but not all models feel the same. Some are useful, but don’t yet deliver that “this changes everything” moment.

Opus does.

New Challenges Ahead

Of course, this shift brings new problems:

What happens to pull requests?

If most of the code is AI-generated, what exactly are we reviewing?

What about knowledge depth?

If you’re not writing the code, are you really understanding it?

This is critical.

You don’t want to be on call at 3AM, debugging production, and only knowing how to “prompt better.”

We are not at the point where programming becomes assembly and English becomes the new C.

We are far from that.

You still need to understand what’s happening. Deeply.

The 90/10 Rule

I think we’ll see something like a Pareto distribution:

  • 90% of code: AI-generated
  • 10% of code: Human-crafted

That 10% will matter a lot.

It will involve:

  • Complex context
  • Architectural glue
  • Edge cases
  • Critical logic
  • Irreducible human judgment

Development isn’t disappearing.

But it is transforming.

Exciting Times (Depending on Why You’re Here)

If you love building, solving problems, designing systems — this is an incredibly exciting time.

If what you loved most was physically typing every line of code yourself…

That part is changing.


I’m optimistic.

I think software development is evolving, not dying.

But the role of the developer?
That’s definitely being rewritten.

Let me know what you think.

See you 👋

Free Auto Silence Remover / Slicer – Remove Silence from Videos Automatically

This post is based on the youtube video I uploaded:

🔗 Related links

🔧 Source code (GitHub): https://github.com/ivmos/SilenceRemover (one of the available repos)

🌐 Try it online

https://silenceslicer.com/ (Jerry Li’s hosted app)

https://silence-remove.vercel.app (vercel deployment example)


Removing Silences from Videos with a Free Open-Source Tool (Local + Vercel Deployment)

Hi friends 👋
In this post, I want to show you the free, open-source tool I currently use to remove silences from my videos. We’ll walk through how it works locally, explore its UI and internals, and finally deploy it to Vercel so you can run it as a hosted solution.

If you create YouTube videos, podcasts, or tutorials, this tool can save you a lot of editing time.


Running the Project Locally

I’m starting directly from the repository. This is a Node.js project, and running it locally is straightforward:

yarn run dev

Once executed, the app runs on a local port and spins up a development server. The local UI is slightly different from the currently hosted version, which makes it ideal for experimentation and debugging.


Analyzing a Video (Silence Detection)

After the app is running, you can simply drag and drop a video file into the interface. I tested it with my previous video about Moises.ai, and the analysis was surprisingly fast.

To better understand what’s happening behind the scenes, I opened the developer tools. You can clearly see FFmpeg being loaded and network activity kicking in while the analysis runs.

Tweaking Detection Parameters

One of the best things about this tool is how configurable it is:

  • Mean volume – controls how quiet a segment must be to count as silence
  • Minimum silence duration – adjusts how long silence must last to be removed

After tweaking these values and clicking Analyze again, you’ll notice different results. Once finished, the app tells you the new duration of the video after silence removal.


Exporting the Result

When you’re happy with the analysis, you can:

  • Export the processed video
  • Export the timeline (useful for further editing)

At this point, everything is handled locally through FFmpeg, without uploading your video anywhere — a big plus for privacy.


Working with the Timeline UI

The UI is honestly one of the highlights of this project.

You get a visual timeline where silence regions are clearly marked. From here you can:

  • Add zones manually
    Click Zone Add and select the part you want to include or modify.
  • Remove zones manually
    Click Zone Delete and simply select the sound you want to remove.

You can immediately play back the result to verify that everything works as expected — and it does, really well.


Deploying to Vercel

Next, I wanted a hosted version, so I deployed the project to Vercel.

Steps:

  1. Go to your Vercel dashboard
  2. Click Import Project
  3. Vercel detects it as a Node.js project automatically
  4. Deploy with default settings

At first, I ran into a deployment error. After copying the error message into ChatGPT and applying a small fix, the deployment worked perfectly.

Once deployed, the app behaves exactly the same as the local version — but now it’s available online under my own Vercel URL.


Quick Look at the Codebase

Since we had some extra time, I explored the code to understand how silence removal actually works.

Tech Stack Overview

  • Node.js
  • UI built with a React-like framework
  • FFmpeg running in the browser
  • WaveSurfer.js for waveform visualization

Key Components

  • VideoEditor component
  • Timeline / waveform component
  • Silence detection logic in the video renderer

How Silence Detection Works

The core logic happens in a helper responsible for silence analysis:

  • It uses WaveSurfer.js with the Regions plugin
  • Regions are automatically extracted based on silence
  • The analyzeRegions helper:
    • Extracts regions
    • Filters them by silence thresholds
    • Produces the final list of segments to keep

FFmpeg is then called with the correct parameters to stitch together only the non-silent parts.

Simple, elegant, and very effective.


Final Thoughts

This tool is a great example of how powerful open-source projects can be when combined with modern web tech. It’s fast, private, configurable, and easy to deploy.

If you edit videos regularly, I highly recommend checking it out and even self-hosting it like I did.

See you in the next video 👋

Exploring Steganography with Hidden Unicode Characters

In the digital age, where information security is paramount, steganography has emerged as a fascinating and subtle method for concealing information. Unlike traditional encryption, which transforms data into a seemingly random string, steganography hides information in plain sight. One intriguing technique is the use of hidden Unicode characters in plain text, an approach that combines simplicity with stealth.

Related video from my Youtube channel:

What is Steganography?

Steganography, derived from the Greek words “steganos” (hidden) and “graphein” (to write), is the practice of concealing messages or information within other non-suspicious messages or media. The goal is not to make the hidden information undecipherable but to ensure that it goes unnoticed. Historically, this could mean writing a message in invisible ink between the lines of an innocent letter. In the digital realm, it can involve embedding data in images, audio files, or text.

The Role of Unicode in Text Steganography

Unicode is a universal character encoding standard that allows for text representation from various writing systems. It includes many characters, including letters, numbers, symbols, and control characters. Some of these characters are non-printing or invisible, making them perfect for hiding information within plain text without altering its visible appearance.

How Does Unicode Steganography Work?

Unicode steganography leverages the non-printing characters within the Unicode standard to embed hidden messages in plain text. These characters can be inserted into the text without affecting its readability or format. Here’s a simple breakdown of the process:

  1. Choose Hidden Characters: Unicode offers several invisible characters, such as the zero-width space (U+200B), zero-width non-joiner (U+200C), and zero-width joiner (U+200D). These characters do not render visibly in the text.
  2. Encode the Message: Convert the hidden message into a binary or encoded format. Each bit or group of bits can be represented by a unique combination of invisible characters.
  3. Embed the Message: Insert the invisible characters into the plain text at predetermined positions or intervals, embedding the hidden message within the regular text.
  4. Extract the Message: A recipient who knows the encoding scheme can extract the invisible characters from the text and decode the hidden message.

Example: Hiding a Message

Let’s say we want to hide the message “Hi” within the text “Hello World”. First, we convert “Hi” into binary (using ASCII values):

  • H = 72 = 01001000
  • i = 105 = 01101001

Next, we map these binary values to invisible characters. For simplicity, let’s use the zero-width space (U+200B) for ‘0’ and zero-width non-joiner (U+200C) for ‘1’. The binary for “Hi” becomes a sequence of these characters:

  • H: 01001000 → U+200B U+200C U+200B U+200B U+200C U+200B U+200B U+200B
  • i: 01101001 → U+200B U+200C U+200C U+200B U+200C U+200B U+200B U+200C

We then embed this sequence in the text “Hello World”:

H\u200B\u200C\u200B\u200B\u200C\u200B\u200B\u200B e\u200B\u200C\u200C\u200B\u200C\u200B\u200B\u200C llo World

To the naked eye, “Hello World” appears unchanged, but the hidden message “Hi” is embedded within.

Advantages and Disadvantages

Advantages:

  • Subtlety: The hidden information is invisible to the casual observer.
  • Preserves Original Format: The visible text remains unaltered, maintaining readability and meaning.
  • Easy to Implement: Inserting and extracting hidden characters is straightforward with proper tools.

Disadvantages:

  • Limited Capacity: The amount of data that can be hidden is relatively small.
  • Vulnerability: If the presence of hidden characters is suspected, they can be detected and removed.
  • Dependence on Format: Changes in text formatting or encoding can corrupt the hidden message.

Practical Applications

  1. Secure Communication: Concealing sensitive messages within seemingly innocuous text.
  2. Watermarking: Embedding copyright information in digital documents.
  3. Data Integrity: Adding hidden markers to verify the authenticity of text.

Conclusion

Unicode steganography in plain text with hidden characters offers a clever and discreet way to conceal information. By understanding and utilizing the invisible aspects of Unicode, individuals can enhance their data security practices, ensuring their messages remain hidden in plain sight. As with all security techniques, it’s essential to stay informed about potential vulnerabilities and to use these methods responsibly.