HomeComputer ScienceFill-in-the-Middle: AI Code Infilling (2D)

Fill-in-the-Middle: AI Code Infilling (2D)

A 2D multi-panel view of Fill-in-the-Middle (FIM) code infilling: watch source order vs. the model's PSM/SPM input sequence, a live temperature-scaled softmax bar chart per token, and a running perplexity/match-rate trace, with top-k truncation.

Computer Science2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-ai-topic-76 ↗ Open standalone

Modern code-completion models — GitHub Copilot, Cursor AI, Code Llama, StarCoder — don't just extend code forward from your cursor; they can also fill a gap you've left in the middle of a function, because they were trained on the Fill-in-the-Middle (FIM) objective. This 2D build renders the same mechanism as four coordinated panels instead of a 3D token grid: source-order code, the model's reordered PSM/SPM input sequence, a live temperature-scaled softmax bar chart for the token about to be sampled, and a running perplexity/match-rate trace. A real short function is split into a prefix, a missing middle "hole", and a suffix; dragging temperature or the added top-k truncation control visibly reshapes the candidate distribution and changes how often the model's picks diverge from the ground truth — a mechanistic view of why AI code completion is sometimes confidently wrong.

⚙ Under the hood

A 2D multi-panel view of Fill-in-the-Middle (FIM) code infilling: watch source order vs. the model's PSM/SPM input sequence, a live temperature-scaled softmax bar chart per token, and a running perplexity/match-rate trace, with top-k truncation.

ai code generationfill-in-the-middlellmcode completionsoftmaxcopilot

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)