Course page PDF
CS 486/686
Dissecting a Vision-Language Model

Lecture 23

How a language model sees

Before we start: end-of-term updates

Extra office hours Wed Jul 29 · 3–4 PM DC 2633 Thu Jul 30 · 4–5 PM MC 4021
Final · Sat Aug 8 7:30–10:00 PM · PAC 5 Bring a non-programmable calculator + one double-sided letter-size notes sheet. Two sample exams are on LEARN.
Review materials A1 + A2 solutions are on LEARN Assignment 2 grades have also been released.
Upcoming deadlines A3 · Tue Aug 4 Final project · Wed Aug 5 Both at 11:59 PM Waterloo time.

Full details stay current on the course page.

Search Uncertainty Decisions Learning

By the end, you can trace how Qwen sees

  1. Run visual Q&A and OCR in your browser.
  2. Trace pixels → patches → image embeddings.
  3. Calculate how resolution changes the token count.
  4. Explain how a familiar embedding interface lets us reuse an LLM.

Without an image, Qwen is the LM you already know

textExplain gradient descent
token embeddings\([T,1024]\)
causal LM24 blocks
next tokenrepeat

L21 already explained this path. Today we change the input, not the output loop.

The exact model we will dissect

Qwen3.5-0.8B post-trained checkpoint Qwen/Qwen3.5-0.8B
1024LM hidden width
24language blocks
16×16image patches
textoutput modality

Qwen Team, “Qwen3.5: Towards Native Multimodal Agents,” 2026; official model configuration.

One twist: most blocks carry a recurrent state

Gated DeltaNetrecurrent-style linear attention
Gated DeltaNetrecurrent-style linear attention
Gated DeltaNetrecurrent-style linear attention
full attentionprecise token lookup
× 6= 24 blocks

Long image contexts do not pay full quadratic attention in every block.

Ask Qwen about an imagelive in browser

Choose the photo—or upload your own—then ask a visual question.

No WebGPU? Live generation may take about 20 minutes.

Black-and-white portrait of a person wearing a suit and tie
recorded Qwen3.5-0.8B output Question

Is the person wearing a suit? What are they wearing?

Answer

Yes, the person is wearing a suit. They are dressed in a dark suit jacket, a white collared shirt, and a dark tie.

Live path: Transformers.js v4 + WebGPU + onnx-community/Qwen3.5-0.8B-ONNX. No API key; inference stays in the browser.

The central question

The language model did not receive pixels.

What vectors did it receive?

Make the image look like language to the LLM

imagepixels
patchify16×16 regions
vision encoder768-wide features
merge + MLP1024-wide
Qwen LMreuse 24 blocks
answertext tokens

Pixels and token IDs begin in different worlds

image [384, 640, 3] 737,280 RGB numbers
text [2488, 374, 2201, …] a short sequence of IDs

First compress local pixels into a sequence of patch vectors.

Qwen starts with 16×16 image patches

one patch\(16\times16\times3=768\) pixel values
one learned vectorthe patch embedding
all patchesa spatial sequence

Patchify while preserving the image shapelive

Change the retained resolution; count raw patches and merged image embeddings.

640×384 image → 40×24 raw patches → 20×12 = 240 image embeddings

A fixed square resize can erase small details

Office-hours document reduced to a blurry 224-by-224 square
original CLIP-style input
224×224 square
Wide office-hours document with clearly readable text
variable-resolution input
640×384, aspect preserved

Documents need enough retained patches for their text to survive.

“Native resolution” means a variable patch grid

preserveaspect ratio
rounddimensions to patch-compatible sizes
capthe total visual-token budget

The processor does not promise to retain every original pixel; it chooses the largest useful grid within its configured budget.

SigLIP 2 NaFlex and Qwen multimodal image preprocessing use variable grids to reduce aspect-ratio distortion.

More retained pixels create a longer visual sequence

256×25616×16 = 256 raw patches64 after 2×2 merge
512×51232×32 = 1024 raw patches256 after 2×2 merge
640×38440×24 = 960 raw patches240 after 2×2 merge

Resolution buys detail by spending context and compute.

Qwen merges each 2×2 neighborhood

\(v_1\)\(v_2\)\(v_3\)\(v_4\)
\([v_1;v_2;v_3;v_4]\) four positions become one
\[ N_{\text{LM image}}=\frac{H}{16}\frac{W}{16}\frac{1}{4} =\frac{H}{32}\frac{W}{32} \]
Patches are only the start

How does a patch come to mean “cup” or “deadline”?

It must be trained to carry visual semantics.

Recall CLIP: put matching images and text nearby

Portrait used as a CLIP image input image encoder \(f_I(I)\) → blue point
image text similar vectors
“a person wearing a suit”
text encoder purple point ← \(f_T(T)\)

Radford et al., “Learning Transferable Visual Models From Natural Language Supervision,” 2021. Callback to L18.

Each image finds its caption—and vice versalive

The diagonal contains real pairs; other cells are in-batch mismatches.

photo ↔ “person” photo ↔ “chart” chart ↔ “person” chart ↔ “chart”

Contrastive training turns appearance into meaning

beforecolors, edges, textures
after matching textobjects, actions, concepts

Now the vision features are useful to a language model—not merely compact pixels.

Qwen’s vision tower is derived from SigLIP2

CLIPcontrastive image–text alignment
SigLIP2stronger multilingual and dense visual features
Qwen toweradapted vision encoder + Qwen merger

We use the idea and move on; the SigLIP2 training refinements are optional reading.

Tschannen et al., “SigLIP 2,” 2025; Qwen3.5 vision configuration.

The vision tower contextualizes every patch

patch embeddings
12 vision blocks
\([N,768]\) contextual features
hidden width768
attention heads12
patch size16×16

The same tower also handles video with temporal patches; today we follow one still image.

The connector changes count and width

normalize four featuresLayerNorm: \(4\times768\)
concatenate\(3072\)
MLP + GELUlearned adapter
one image embedding\(1024\)

Qwen3.5 visual merger: LayerNorm, 2×2 spatial merge, two linear layers with GELU.

Same shape means the same LLM interface

image embeddings [V, 1024] from the connector
word embeddings [T, 1024] from the lookup table
llm(inputs_embeds = concat(image_embeds, text_embeds))

To the backbone, both are sequences of 1024-dimensional vectors.

Turn the unknown into the known

new problemunderstand an image
adapterproduce the known interface
reusethe existing language model

This pattern appears everywhere in computer science: adapt, reduce, reuse.

The image and question become one context

Which room in <vision_start> \(v_1\) \(v_2\) \(v_V\) <vision_end> hosts Wednesday hours?

Image spans can appear wherever the prompt places them. After embedding, every position uses the same 1024-D interface.

Once embedded, generation is unchanged

multimodal prefiximage + question embeddings
hybrid Qwen LMsame 24 blocks
next text tokenappend and repeat

Vision changes prefill; decoding still grows the text answer one token at a time.

End-to-end training teaches Qwen to use the adapter

Office-hours announcement used as a multimodal training input Where are Wednesday’s office hours?
They are in DC 2633.
vision towerconnectorQwen LMnext-token loss

Early-fusion multimodal training makes the connected system useful—not the connector shape alone.

One image, every boundary

640×384retained pixels
40×24 = 960raw patch features
20×12 = 240image embeddings
+ promptone LM prefix
“DC 2633”generated text

The recorded trace is generated from the real processor; the demo reports its actual grid for uploaded images.

The complete browser path is short

const processor = await AutoProcessor.from_pretrained(MODEL);
const model = await Qwen3_5ForConditionalGeneration
  .from_pretrained(MODEL, {
    device: "webgpu",
    dtype: {
      embed_tokens: "q4",
      vision_encoder: "fp16",
      decoder_model_merged: "q4",
    },
  });

const prompt = processor.apply_chat_template(messages, {
  add_generation_prompt: true,
  enable_thinking: false,
});
const inputs = await processor(prompt, [image]);
const output = await model.generate({ ...inputs, max_new_tokens: 64 });
processorpatch + serialize
modelencode + adapt + reuse LM
generateemit text tokens

Adapted from the official Transformers.js Qwen3.5 WebGPU example.

Read a document with the same modellive in browser

The model loaded for VQA is reused—choose the announcement or upload a document.

No WebGPU? Live generation may take about 20 minutes.

CS486 additional office hours announcement listing Wednesday and Thursday sessions
recorded Qwen3.5-0.8B output Question

Where and when are the Wednesday office hours?

Answer

Wednesday 3-4 PM at DC 2633

Too few patches can erase the evidence

Readable high-resolution office-hours announcement
240 embeddingsQwen: “Wednesday 3-4 PM at DC 2633”
Strongly downsampled office-hours announcement with unreadable small text
77 embeddingsQwen: “Wednesday 3:00 PM” — room lost

The model cannot recover visual evidence that preprocessing removed.

Recap: adapt the image, then reuse the LLM

  1. 1Patch the image into 16×16 regions.
  2. 2Encode them as 768-wide semantic features.
  3. 3Merge + project 2×2 groups into 1024-wide image embeddings.
  4. 4Concatenate image and word embeddings through the same interface.
  5. 5Reuse Qwen to predict the text answer.
Look at the output head

Qwen can see images—but it can only emit text tokens.

\([1024]\) hidden state 248,320 vocabulary scores next text token

No image decoder. No denoiser. No pixels out.

Next: how do models generate images and future frames?

L24: Dissecting Diffusion and World Models.