DEV Community

PEACEBINFLOW
PEACEBINFLOW

Posted on

Teaching Gemma 4 to Speak WebScript: A New Spatial Language Meets a New Open Model

#devchallenge #gemmachallenge #gemma

Gemma 4 Challenge: Write about Gemma 4 Submission

Teaching Gemma 4 to Speak WebScript: A New Spatial Language Meets a New Open Model

Submitted to the DEV Gemma 4 Challenge — Write About Gemma 4 track

The Setup

I've been building a language called WebScript — a constraint-based spatial DSL that compiles simultaneously to HTML, CSS, SVG, JavaScript, TypeScript, and SQL. The core idea is that the browser is a geometric space, and the right programming language for that space should be declarative, relational, and mathematically fluent.

A few weeks ago I started asking a different question: what happens when you give a capable open model a new language it has never seen — and ask it to think in that language?

Gemma 4 was the obvious candidate to test this. Here's what I found.

What WebScript Is (Quick Brief)

WebScript has four sentence patterns:

Entity Declaration

card {
  depth : 300
  rotate : harmonic(0.5)
  position : orbit(cursor)
}
Enter fullscreen mode Exit fullscreen mode

Relational Particle (from Mandarin topic-comment grammar)

panel of viewport {
  sync : parent.rhythm
  opacity : field(0.85)
  depth : phi * 300
}
Enter fullscreen mode Exit fullscreen mode

Equation Constraint (live reactive binding)

card.rotation = cursor.angle * harmonic(0.4)
card.scale = distance(origin) ^ 0.5
Enter fullscreen mode Exit fullscreen mode

Classifier Units (from Mandarin measure words)

7 orbital nodes
3 harmonic layers
1 depth field
Enter fullscreen mode Exit fullscreen mode

Every declaration compiles to all six targets simultaneously. The language owns the relational logic. HTML, CSS, SVG, JS each own their domain. WebScript is the coordination layer.

The full spec and implementation are at github.com/PEACEBINFLOW/webscript.

Why This Is an Interesting Test for Gemma 4

Most model benchmarks test performance on known languages — Python, JavaScript, SQL. These languages are in the training data by the gigabyte. The model is not reasoning about the language; it's pattern-matching against a vast memorized corpus.

WebScript is different. It is:

  • Publicly released in the last week
  • Vanishingly small training surface
  • Syntactically novel (the of relational particle, classifier units, multi-target compilation)
  • Semantically dense (each line has geometric, mathematical, and cross-language meaning)

Testing Gemma 4 on WebScript is essentially testing zero-shot structural reasoning on a real grammar. Can the model infer the rules from the spec and generate valid, meaningful WebScript from a natural language description?

Setting Up: Gemma 4 via Hugging Face (Free, No Card Required)

I used the Gemma 4 27B model via Google AI Studio's Gemini API, which provides access at no cost within the free tier. If you want fully local, the 4B or 2B variants run on a Raspberry Pi or a mid-range phone — pull directly from Hugging Face:

# Install ollama (local inference runtime)
curl -fsSL https://ollama.com/install.sh | sh

# Pull Gemma 4 4B (runs on ~8GB RAM)
ollama pull gemma4:4b

# Or the 27B if you have the hardware
ollama pull gemma4:27b
Enter fullscreen mode Exit fullscreen mode

For this experiment I used the API path so I could iterate quickly, but the local path produces comparable results on the 27B.

The Experiment: Prompt Engineering WebScript Generation

Step 1: Spec Injection

The first prompt pass injects the full grammar specification as a system message:

You are a WebScript compiler assistant. WebScript is a constraint-based spatial DSL.
Its grammar has four patterns:

1. Entity Declaration: name { property : value }
2. Relational Particle: name of parent { property : value }
3. Equation Constraint: entity.property = expression
4. Classifier Units: N type_name

Built-in functions: harmonic(t), orbit(target), distance(a,b), field(value)
Constants: phi (1.618...), pi, fibonacci(n), hue(angle), decay(rate)

WebScript compiles to HTML, CSS, SVG, JS, TS, and SQL simultaneously.
Each entity becomes a DOM node. Constraints become reactive event bindings.
Spatial properties (depth, position, orbit) compile to CSS transforms and SVG geometry.

Given a natural language description of a UI, produce valid WebScript.
Enter fullscreen mode Exit fullscreen mode

Step 2: Test Prompts — Simple to Complex

Test 1: Simple spatial layout

Prompt: "A set of five cards that orbit a central point, each card fading in opacity based on its distance from the cursor."

Gemma 4 27B output:

5 orbital cards

cards of viewport {
  position : orbit(center, 200)
  depth : phi * 150
}

cards.opacity = 1 - (distance(cursor) * decay(0.003))
cards.rotation = harmonic(time * 0.2)
Enter fullscreen mode Exit fullscreen mode

This is syntactically valid WebScript. The model correctly used:

  • Classifier units (5 orbital cards)
  • Relational particle (cards of viewport)
  • Equation constraints with correct built-ins (distance, decay, harmonic)
  • Multi-entity binding (applying constraints to the classifier group)

What surprised me: it invented center as an implicit anchor — which is not in the spec — but in context is the exactly correct inference. The language would need that. The model anticipated a gap in the grammar and filled it consistently.

Test 2: Hierarchical composition

Prompt: "A navigation panel that syncs its rhythm to the viewport, containing three depth layers, each with a different harmonic phase."

Output:

nav of viewport {
  sync : parent.rhythm
  depth : phi * 400
}

3 harmonic layers

layers[0] {
  depth : phi * 100
  phase : harmonic(0.0)
  opacity : field(0.9)
}

layers[1] {
  depth : phi * 200  
  phase : harmonic(0.33)
  opacity : field(0.75)
}

layers[2] {
  depth : phi * 300
  phase : harmonic(0.66)
  opacity : field(0.6)
}
Enter fullscreen mode Exit fullscreen mode

The model distributed the harmonic phase across three units (0.0, 0.33, 0.66 — thirds of a cycle) without being told to. This is compositional geometric reasoning, not pattern matching. It understood that "different harmonic phase" across three layers means distributing across the 0–1 domain.

Test 3: Cross-language intent

Prompt: "A data table that stores row positions spatially, where row depth is bound to a SQL query result."

Output:

table of viewport {
  depth : wsql(SELECT depth_score FROM layout_data WHERE id = row.id)
  position : field(row.index * 40)
}

table.row.opacity = harmonic(row.depth / phi)
Enter fullscreen mode Exit fullscreen mode

This is exactly the WSQL bridge the spec describes. The model inferred the wsql() function pattern from the spec's mention of a "WSQL data bridge" — even though no wsql() function is defined in the stdlib section. It extrapolated the pattern from the architecture description.

What Gemma 4 Got Right

Structural faithfulness. Every output respected the four-pattern grammar. The model did not hallucinate HTML or CSS syntax inside WebScript blocks, which would be an easy failure mode given its massive training on those languages.

Mathematical coherence. Uses of phi, harmonic(), and decay() were geometrically sensible — not random. Phase distributions, orbital radii, and depth fields followed internal logic.

Zero-shot gap-filling. Where the spec was silent (the center anchor, the wsql() function pattern, indexed classifier access layers[0]), the model made consistent, architecturally coherent inferences. These feel like real language design contributions, not errors.

Cross-target awareness. When asked follow-up questions like "what does this compile to in CSS?", the model correctly traced the compilation path: orbit() → CSS transform: translate() + trigonometry, depth → z-index + perspective, harmonic() → a @keyframes curve or JS interpolation depending on whether the binding is static or reactive.

What It Got Wrong

Classifier indexing syntax. layers[0] is not in the spec. The model invented JS-style indexing. The spec has no defined syntax for addressing individual members of a classifier group. This is a genuine gap — and the model correctly identified it even while inventing a workaround.

Semicolons. Occasionally inserted trailing semicolons inside entity blocks — a JS contamination. Not a semantic error, but a syntax violation.

Over-nesting. On complex prompts it sometimes nested entity declarations inside other entities, which the grammar does not currently support. Again, a reasonable extrapolation (most spatial languages support nesting), but currently outside the spec.

The Deeper Observation

Testing Gemma 4 on WebScript surfaced something interesting about how capable open models handle novel formal languages.

The model's failure modes were not random — they were directional. Each gap it filled, it filled consistently across multiple prompts. layers[0] syntax appeared in every prompt that required classifier indexing. The center anchor appeared in every orbital layout. The wsql() pattern held across three separate data-binding tests.

This means the model is not pattern-matching against a memorized corpus — it is building an internal model of the language from the spec and then generating consistently from that model. The errors are the model's design opinions, not noise.

For a language author, that's actually valuable. Gemma 4 functioned as an unintentional co-designer — showing me where the spec has gaps by filling them consistently with the same invented syntax.

What This Means for Local AI

The "local AI is having a moment" framing in this challenge is accurate, but I think the deeper implication is about language sovereignty.

If you are building a domain-specific language — for spatial interfaces, for constraint systems, for any specialized domain — you no longer need to wait for OpenAI or Anthropic to train on your syntax. You can take a capable open model, inject your spec, and get a working co-designer running locally within minutes.

WebScript is authored in Botswana. It's an unusual language — influenced by Mandarin grammar, rooted in spatial mathematics, designed for the geometric reality of the browser. It is not a language that will ever be prominent in any training corpus.

And yet Gemma 4, given the spec, speaks it coherently.

That is what open models actually unlock: the ability to bring your own language into the model's reasoning space, on your own hardware, with no dependency on an API you don't control.

Try It Yourself

  1. Clone the WebScript repo: git clone https://github.com/PEACEBINFLOW/webscript
  2. Read docs/specification.md
  3. Paste the spec into Gemma 4 as a system prompt (AI Studio free tier, Ollama locally, or OpenRouter)
  4. Describe a spatial UI in natural language and watch it generate WebScript

The interesting experiment is asking it to generate something the spec doesn't cover and see what consistent inference it makes. That's where the real conversation starts.

Peace Thabiwa — SAGEWORKS AI, Maun, Botswana
WebScript: github.com/PEACEBINFLOW/webscript

Top comments (0)