PageSourceSearch

https://draw2think.github.io/

html draw2think.github.io collected 2026-10-03 09:03:45 UTC 32,043 bytes, 649 lines download raw bytes

1<!doctype html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1">
6  <title>Draw2Think: Harnessing Geometry Reasoning through Constraint Engine Interaction</title>
7  <meta name="description" content="Draw2Think recasts geometric reasoning as agentic interaction with the GeoGebra constraint engine: a frozen VLM proposes typed actions, the engine verifies each one, and the canvas becomes a checkable intermediate state.">
8  <meta property="og:title" content="Draw2Think: Harnessing Geometry Reasoning through Constraint Engine Interaction">
9  <meta property="og:description" content="A training-free constraint-agentic harness wrapping a frozen VLM around a dynamic-geometry engine. Each action is engine-verified; the canvas is a checkable intermediate state.">
10  <meta property="og:image" content="assets/fig1_overview.png">
11  <meta property="og:type" content="website">
12  <meta name="twitter:card" content="summary_large_image">
13  <link rel="preconnect" href="https://fonts.googleapis.com">
14  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15  <link href="https://fonts.googleapis.com/css?family=Google+Sans:400,500,600,700" rel="stylesheet">
16  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;
16family=JetBrains+Mono:wght@400;500&amp;family=Noto+Sans:wght@500;600;700&amp;family=Source+Serif+4:wght@400;600&amp;display=swap" rel="stylesheet">
17  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/academicons.min.css">
18  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
19  <link rel="stylesheet" href="assets/style.css">
20  
20<script src="https://www.geogebra.org/apps/deployggb.js" defer></script>
20
21</head>
22<body>
23<!-- Synchronous anti-flash: if the URL already has the focus hash
24     (e.g. when arriving from an arXiv figure's href), tag body with
25     the focus class BEFORE the rest of the document parses. That
26     way the existing body.focus-paradigms CSS hides the hero / TL;DR
27     / other sections from the very first paint, so the reader never
28     sees a flash of the full page before the focus view settles. -->
29<script>
30  if (location.hash === '#focus=paradigms') {
31    document.body.classList.add('focus-paradigms');
32  }
33</script>
33
34
35<!-- ─── STICKY TOP NAV ─────────────────────────────────────────── -->
36<nav class="topnav" aria-label="Page sections">
37  <div class="container topnav-row">
38    <a href="#top" class="brand">Draw2Think</a>
39    <div class="topnav-links">
40      <a href="#top" class="topnav-top" aria-label="Back to top">
41        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
42          <line x1="5" y1="5" x2="19" y2="5"/>
43          <polyline points="7 13 12 8 17 13"/>
44          <line x1="12" y1="9" x2="12" y2="20"/>
45        </svg>
46        <span class="topnav-top-label">Top</span>
47      </a>
48      <a href="#overview">Overview</a>
49      <a href="#method">Loop</a>
50      <a href="#demo">Walk-through</a>
51      <a href="#insights">Insights</a>
52      <a href="#mechanisms">Mechanisms</a>
53      <a href="#future">Future</a>
54      <a href="#bibtex">BibTeX</a>
55    </div>
56  </div>
57</nav>
58
59<!-- ─── HERO ─────────────────────────────────────────────────────── -->
60<header class="hero" id="top">
61  <div class="container narrow">
62    <h1 class="title">
63      Draw2Think:<br>
64      <span class="subtitle">Harnessing Geometry Reasoning through Constraint Engine Interaction</span>
65    </h1>
66
67    <div class="authors">
68      <span class="author"><a href="https://chengdobbs.github.io">Juncheng Hu</a><sup>1,2,3</sup></span>
69      <span class="author"><a href="https://scholar.google.com/citations?user=WrJKEzEAAAAJ">Jiawei Du</a><sup>2,3</sup></span>
70      <span class="author"><a href="https://zhangxin-xd.github.io/">Xin Zhang</a><sup>2,3</sup></span>
71      <span class="author"><a href="https://joeyzhouty.github.io/">Joey Tianyi Zhou</a><sup>2,3</sup></span>
72    </div>
73    <div class="affiliations">
74      <span><sup>1</sup>National University of Singapore</span>
75      <span><sup>2</sup>Centre for Frontier AI Research, A*STAR</span>
76      <span><sup>3</sup>Institute of High Performance Computing, A*STAR</span>
77    </div>
78    <div class="contact">
79      <code>[email protected]</code>
80      &nbsp;&middot;&nbsp;
81      <code>{dujw, zhangx7, Joey_Zhou}@a-star.edu.sg</code>
82    </div>
83
84    <nav class="buttons">
85      <a class="btn" href="https://arxiv.org/pdf/2605.20743" aria-label="Paper PDF">
86        <span class="paper-icon" aria-hidden="true">
87          <i class="far fa-file"></i>
88          <span class="paper-icon-badge">PDF</span>
89        </span>
90        Paper
91      </a>
92      <a class="btn" href="https://arxiv.org/abs/2605.20743" aria-label="arXiv preprint">
93        <i class="ai ai-arxiv" aria-hidden="true"></i>
94        arXiv
95      </a>
96      <a class="btn" href="https://github.com/draw2think/harness-geometry" aria-label="Source code on GitHub">
97        <i class="fab fa-github" aria-hidden="true"></i>
98        Code
99      </a>
100      <a class="btn" href="#" data-link="slides" aria-label="Presentation slides">
101        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
102          <path d="M2 3h20"/>
103          <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/>
104          <path d="M8 21l4-4 4 4"/>
105          <line x1="12" y1="17" x2="12" y2="21"/>
106        </svg>
107        Slides
108      </a>
109      <a class="btn" href="#" data-link="poster" aria-label="Poster">
110        <i class="fas fa-image" aria-hidden="true"></i>
111        Poster
112      </a>
113      <a class="btn" href="#" data-link="video" aria-label="Project video">
114        <i class="fas fa-play-circle" aria-hidden="true"></i>
115        Video
116      </a>
117    </nav>
118
119    <!-- Hero asset: canvas demo video/GIF. PLACEHOLDER — commented out
120         until the final asset + caption are recorded. Uncomment and
121         drop the real mp4/gif into assets/ to restore.
122    <figure class="hero-media">
123      <video class="hero-video" autoplay loop muted playsinline poster="assets/fig1_overview.png">
124        <source src="assets/demo_canvas.mp4" type="video/mp4">
125        <img src="assets/demo_canvas.gif" alt="Draw2Think: GeoGebra canvas evolving through engine-verified actions">
126      </video>
127      <figcaption>
128        A frozen VLM proposes typed ToolSpecs; the GeoGebra engine accepts or rejects each one;
129        the canvas accumulates as a checkable intermediate state.
130      </figcaption>
131    </figure>
132    -->
133
134  </div>
135</header>
136
137<!-- ─── TL;DR ────────────────────────────────────────────────────── -->
138<section class="band tldr">
139  <div class="container narrow">
140    <h2 class="band-title">TL;DR</h2>
141    <ul class="tldr-list">
142      <li>
143        <strong>Geometry needs checkable state.</strong>
144        Text traces, rendered sketches, and generated scripts can expose intermediate
145        work while leaving construction-time validity outside the loop.
146        Draw2Think makes the canvas itself the working memory.
147      </li>
148      <li>
149        <strong>The engine verifies during construction.</strong>
150        A frozen VLM proposes typed ToolSpecs; the engine executes or rejects them;
151        exact observations return before the model commits to the next step.
152        Tool calls become checked premises for subsequent reasoning.
153      </li>
154      <li>
155        <strong>We find that grounding is selective.</strong>
156        External grounding pays off when construction, measurement, or state tracking
157        is the bottleneck. On saturated textbook-style problems, forcing a canvas
158        can impose cost without adding evidence; that boundary is part of the result.
159      </li>
160    </ul>
161  </div>
162</section>
163
164<!-- ─── OVERVIEW ────────────────────────────────────────────────── -->
165<section class="band" id="overview">
166  <div class="container">
167    <h2>Overview: Four Paradigms for Externalizing Geometry Reasoning</h2>
168    <!-- Focus button: SIBLING of .paradigms inside .container so it
169         participates in NO grid layout. Anchored to .container's
170         top-right corner via absolute positioning (see CSS). Toggles
171         URL hash `#focus=paradigms`. -->
172    <button class="paradigms-zoom-btn" type="button" aria-label="Focus on the four paradigms (fullscreen view)">
173      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
174        <polyline points="15 3 21 3 21 9"/>
175        <polyline points="9 21 3 21 3 15"/>
176        <line x1="21" y1="3" x2="14" y2="10"/>
177        <line x1="3" y1="21" x2="10" y2="14"/>
178      </svg>
179      <span>Focus</span>
180    </button>
181    <div class="paradigms">
182      <!-- Col 1: Visual Artifacts -->
183      <article class="paradigm" data-flavor="visual" tabindex="0">
184        <header class="paradigm-head">
185          <span class="paradigm-icon">
186            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
187              <rect x="3" y="4" width="18" height="14" rx="2"/>
188              <path d="M3 16l5-4 4 3 5-5 4 4"/>
189            </svg>
190          </span>
191          <h3>Visual Artifacts</h3>
192        </header>
193        <!-- Encapsulated in Shadow DOM (defined in assets/js/visual-flow.js).
194             Hover triggers a multi-wave clarification animation on the
195             rendered bitmap, with two orbital flow streaks circling its
196             border + an L-return on the LEFT back to the prompt. -->
197        <visual-flow class="paradigm-flow"></visual-flow>
198        <div class="paradigm-badge">Perceptual feedback<span class="paradigm-badge-sub">rendered image / bitmap</span></div>
199        <p class="paradigm-caveat">
200          <span class="caveat-emoji caveat-emoji-anim emoji-cry" role="img" aria-label="cry"></span>
201          pixel approximation;  <br/> no engine-exact certificate.
202        </p>
203      </article>
204
205      <!-- Col 2: Textual Traces -->
206      <article class="paradigm" data-flavor="text" tabindex="0">
207        <header class="paradigm-head">
208          <span class="paradigm-icon">
209            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
210              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
211              <line x1="8" y1="9"  x2="16" y2="9"/>
212              <line x1="8" y1="13" x2="14" y2="13"/>
213            </svg>
214          </span>
215          <h3>Textual Traces</h3>
216        </header>
217        <!-- Encapsulated in Shadow DOM (defined in assets/js/textual-flow.js).
218             Each of the 4 reasoning traces lives in its own block with a
219             dashed self-reflect curve on the right; hover streams a flow
220             streak through all 5 arrows in sequence. -->
221        <textual-flow class="paradigm-flow"></textual-flow>
222        <div class="paradigm-badge">Internal self-check<span class="paradigm-badge-sub">reasoning trace in text</span></div>
223        <p class="paradigm-caveat">
224          <span class="caveat-emoji caveat-emoji-anim emoji-cry" role="img" aria-label="cry"></span>
225          intermediate text lacks <br/> exact validation
226        </p>
227      </article>
228
229      <!-- Col 3: Executable Scripts -->
230      <article class="paradigm" data-flavor="code" tabindex="0">
231        <header class="paradigm-head">
232          <span class="paradigm-icon">
233            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
234              <polyline points="16 18 22 12 16 6"/>
235              <polyline points="8 6 2 12 8 18"/>
236            </svg>
237          </span>
238          <h3>Executable Scripts</h3>
239        </header>
240        <div class="paradigm-flow">
241          <!-- Top 5 code tiles with title + simultaneous char-by-char
242               streaming, triggered when the col-3 flow reaches the
243               Code/script block (web component, see code-tiles.js). -->
244          <code-tiles></code-tiles>
245          <!-- 4-block horizontal code pipeline (web component, see
246               assets/js/code-flow.js). Renders: VLM/agent → Code/script →
247               Execute/render ⇢ Post-hoc check, with two dashed feedback
248               arcs swinging back from Execute and Post-hoc into VLM. -->
249          <code-flow></code-flow>
250        </div>
251        <div class="paradigm-badge">Post-hoc verification<span class="paradigm-badge-sub">code / configuration / scripts</span></div>
252        <p class="paradigm-caveat">
253          <span class="caveat-emoji caveat-emoji-anim emoji-cry" role="img" aria-label="cry"></span>
254          geometry checked after generation;  <br/>
255          no per-action engine feedback
256        </p>
257      </article>
258
259      <!-- Col 4: Constraint-Agentic Harness (Draw2Think) -->
260      <article class="paradigm paradigm-ours" data-flavor="ours" tabindex="0">
261        <header class="paradigm-head">
262          <h3>Constraint-Agentic Harness <span class="paradigm-star" aria-hidden="true">&#9733;</span></h3>
263          <span class="paradigm-mine">Draw2Think <span class="paradigm-mine-tag">(ours)</span></span>
264        </header>
265        <!-- Encapsulated in Shadow DOM (defined in assets/demo.js) so
266             extensions can't leak CSS into the diagram. Styles live in
267             the shadow tree; the host element is just <d2t-diagram>. -->
268        <d2t-diagram class="paradigm-flow"></d2t-diagram>
269        <div class="paradigm-badge paradigm-badge-ours"><span class="caveat-emoji caveat-emoji-anim emoji-grin" role="img" aria-label="grin"></span>Typed actions &middot; Exact verdicts &middot; Reusable canvas</div>
270      </article>
271
272    </div>
273
274    <p class="lead">
275      Prior routes externalize intermediate geometry as <em>visual artifacts</em>,
276      <em>textual traces</em>, or <em>executable scripts</em> &mdash; each surfaces a
277      state while leaving geometric validity uncertified during construction.
278      <strong>Draw2Think</strong> adds a fourth route: a <em>constraint-agentic
279      harness</em> where a frozen VLM selects typed ToolSpecs, the GeoGebra engine
280      updates an engine-valid canvas state, and structured observations return
281      after each action. The distinction is less about externalizing state than
282      about <em>when verification enters the loop</em>.
283    </p>
284  </div>
285</section>
286
287<!-- ─── METHOD ─────────────────────────────────────────────────── -->
288<section class="band alt" id="method">
289  <div class="container narrow">
290    <h2>The Propose-Draw-Verify Loop</h2>
291    <p>
292      Draw2Think wraps a frozen VLM around a dynamic-geometry engine via typed
293      ToolSpecs. In dynamic geometry systems such as GeoGebra, construction commands
294      enforce geometric relationships <em>algebraically</em> rather than by coordinate
295      approximation. Each accepted action is therefore engine-checkable, while the
296      model still chooses the construction strategy.
297    </p>
298
299    <ol class="loop">
300      <li>
301        <span class="loop-tag">Propose</span>
302        The VLM reads the problem and current canvas snapshot, then emits one or more typed ToolSpec calls
303        (e.g., <code>line_through_perpendicular</code>, <code>circle_through_center</code>).
304      </li>
305      <li>
306        <span class="loop-tag">Draw</span>
307        GeoGebra executes the call algebraically. Invalid or degenerate configurations
308        surface as engine errors rather than silent approximations.
309      </li>
310      <li>
311        <span class="loop-tag">Verify</span>
312        Structured observations (exact lengths, angles, intersections, error
313        messages) return to the model and ground the next step.
314      </li>
315    </ol>
316
317    <p class="caption-note">
318      Two properties become separately auditable:
319      <strong>Construction Fidelity</strong> (model-level: did the canvas realize
320      the intended configuration?) and
321      <strong>Measurement Faithfulness</strong> (engine-level: are exact values and
322      relations preserved by canvas constraints?).
323    </p>
324  </div>
325</section>
326
327<!-- ─── LIVE DEMO ─────────────────────────────────────────────── -->
328<section class="band" id="demo">
329  <div class="container">
330    <h2>Live walk-through</h2>
331    <p class="lead">
332      Five real Draw2Think trajectories from four datasets. Pick a problem below &mdash;
333      <strong>hover or click any <em>Engine command</em> step</strong>; the
334      model response (left), engine output (right), and live canvas (below) all
335      snap to that step in lock-step. For multi-turn problems, the turn tabs at
336      the top of the command column scroll the active turn into view.
337    </p>
338
339    <div class="demo-card" data-demo="geometry3k_2103">
340      <header class="demo-banner">
341        <div class="demo-banner-text">
342          <!-- Bench / problem selector: pills sit IN the banner where
343               the meta pills used to live. Each button is one demo;
344               clicking re-fetches assets/demos/<demo-id>.json + re-renders. -->
345          <div class="demo-selector" id="demo-selector" role="tablist" aria-label="Choose demo problem">
346            <button type="button" data-demo-id="geometry3k_2103" class="active">
347              <span class="pill-bench">Geo3K</span>
348              <span class="pill-id">#2103</span>
349              <span class="pill-tag">trapezoid</span>
350            </button>
351            <button type="button" data-demo-id="pgps9k_152">
352              <span class="pill-bench">PGPS9K</span>
353              <span class="pill-id">#152</span>
354              <span class="pill-tag">3-turn retry</span>
355            </button>
356            <button type="button" data-demo-id="geometry3k_2856">
357              <span class="pill-bench">Geo3K</span>
358              <span class="pill-id">#2856</span>
359              <span class="pill-tag">CAS + verify</span>
360            </button>
361            <button type="button" data-demo-id="geometry3k_2171">
362              <span class="pill-bench">Geo3K</span>
363              <span class="pill-id">#2171</span>
364              <span class="pill-tag">CAS only, no canvas</span>
365            </button>
366            <button type="button" data-demo-id="geogoal_00006">
367              <span class="pill-bench">GeoGoal</span>
368              <span class="pill-id">#00006</span>
369              <span class="pill-tag">14-turn retry</span>
370            </button>
371            <button type="button" data-demo-id="customize_draw_sketch">
372              <span class="pill-bench">Custom</span>
373              <span class="pill-id">Draw title</span>
374              <span class="pill-tag">your input</span>
375            </button>
376            <button type="button" data-demo-id="genexam_math_100">
377              <span class="pill-bench">GenExam</span>
378              <span class="pill-id">Math_100</span>
379              <span class="pill-tag">chord</span>
380            </button>
381            <button type="button" data-demo-id="genexam_math_45">
382              <span class="pill-bench">GenExam</span>
383              <span class="pill-id">Math_45</span>
384              <span class="pill-tag">integral</span>
385            </button>
386          </div>
387          <!-- Old data-driven meta pills removed — the selector above
388               already encodes bench + id + tag (and CSS `display:flex`
389               on .demo-meta was overriding the HTML `hidden` attr,
390               keeping them visible despite being marked hidden). -->
391          <h3 class="demo-question" id="demo-question"></h3>
392          <div class="demo-choices" id="demo-choices"></div>
393        </div>
394        <figure class="demo-banner-image" id="demo-input-image">
395          <!-- Filled by JS if data.input_image is present -->
396        </figure>
397      </header>
398
399      <div class="demo-grid">
400        <!-- Col 1: raw model response (function-call JSON) -->
401        <div class="demo-col col-raw">
402          <div class="col-head">Model response (function call)</div>
403          <pre class="raw-json" id="raw-json" aria-live="polite"></pre>
404        </div>
405
406        <!-- Col 2: tool calls (engine command). The turn-tabs strip is
407             horizontally scrollable; demo.js auto-scrolls the active
408             turn into view (matters for the 30-turn GeoGoal demo). -->
409        <div class="demo-col col-tools">
410          <div class="col-head">Engine command (Model &rarr; Engine Harness)</div>
411          <div class="turn-tabs-wrap" id="turn-tabs-wrap">
412            <div class="turn-tabs" id="turn-tabs" role="tablist" aria-label="Turn"></div>
413          </div>
414          <ol class="tool-list" id="tool-list"></ol>
415        </div>
416
417        <!-- Col 3: engine diff -->
418        <div class="demo-col col-engine">
419          <div class="col-head">Engine output (new objects)</div>
420          <pre class="engine-diff" id="engine-diff" aria-live="polite"></pre>
421        </div>
422
423        <!-- Col 4: GeoGebra canvas -->
424        <div class="demo-col col-canvas">
425          <div class="col-head">GeoGebra canvas (live)</div>
426          <div class="canvas-wrap">
427            <div id="ggb-applet">
428              <div class="canvas-fallback">
429                Canvas loads from <code>geogebra.org</code>. Needs internet on first paint.
430              </div>
431            </div>
432          </div>
433          <p class="canvas-note">If the canvas renders incorrectly, refresh with Ctrl/Cmd + Shift + R.</p>
434        </div>
435      </div>
436    </div>
437  </div>
438</section>
439
440<!-- ─── INSIGHTS ──────────────────────────────────────────────── -->
441<section class="band" id="insights">
442  <div class="container">
443    <h2>Insights from the Harness</h2>
444    <p class="lead">
445      Constraint interaction separates latent strategy from checked state: the model
446      still explores, while accepted canvas state is already engine-checked.
447    </p>
448
449    <div class="insight-grid">
450      <article class="insight-card">
451        <span class="insight-kicker">Verification timing</span>
452        <h3>Verification timing matters as much as externalization.</h3>
453        <p>
454          Visual sketches, text traces, and generated scripts all expose intermediate
455          objects. Draw2Think moves the verification point earlier: each accepted
456          action becomes a checked premise for the next action.
457        </p>
458      </article>
459
460      <article class="insight-card">
461        <span class="insight-kicker">Selective grounding</span>
462        <h3>External grounding pays off when geometry is the bottleneck.</h3>
463        <p>
464          The gain appears when the model needs exact measurements,
465          consistent construction, or a stable state. On easy or memorized routes,
466          building the canvas can impose cost rather than add evidence.
467        </p>
468      </article>
469
470      <article class="insight-card">
471        <span class="insight-kicker">Auditable state</span>
472        <h3>Outcome accuracy hides too many failure modes.</h3>
473        <p>
474          A final answer does not separate perception, construction, measurement,
475          and algebra errors. A canvas audit lets us ask whether the intermediate
476          geometry itself was realized, independently of the final response.
477        </p>
478      </article>
479    </div>
480  </div>
481</section>
482
483<!-- ─── MECHANISMS ────────────────────────────────────────────── -->
484<section class="band alt" id="mechanisms">
485  <div class="container narrow">
486    <h2>Mechanisms</h2>
487    <p class="lead">
488      Beyond geometry, Draw2Think shows how a generative model can
489      use a deterministic engine for checks while keeping construction choices under
490      model control.
491    </p>
492
493    <div class="mechanism-list">
494      <article class="mechanism-item">
495        <h3>Readout is part of reasoning.</h3>
496        <p>
497          Query tools turn exact engine state into answerable evidence. When that channel is
498          removed, answers shift toward escape routes: internal reasoning,
499          construction-return shortcuts, or unanchored final responses.
500        </p>
501      </article>
502
503      <article class="mechanism-item">
504        <h3>Cached context changes the cost profile.</h3>
505        <p>
506          With cacheable input context, marginal cost shifts toward generated
507          reasoning. On high-thinking benchmarks, engine readouts cut thinking
508          tokens by up to 36%, while ToolSpecs turn free-form text into typed calls
509          and structured observations.
510        </p>
511      </article>
512
513      <article class="mechanism-item">
514        <h3>ToolSpecs shape trajectories.</h3>
515        <p>
516          The interface is a control surface for tool orchestration. Small descriptions
517          shift tool selection, parameter binding, and readout anchoring because the
518          model chooses among typed operations rather than emitting arbitrary pixels.
519        </p>
520      </article>
521
522      <article class="mechanism-item">
523        <h3>Per-action verification leaves strategy open.</h3>
524        <p>
525          GeoGebra can reject invalid constructions and return exact observations.
526          Auxiliary-object selection and stopping decisions remain with the model,
527          so residual failures point to policy-level planning.
528        </p>
529      </article>
530    </div>
531  </div>
532</section>
533
534<!-- ─── FUTURE DIRECTIONS ─────────────────────────────────────── -->
535<section class="band" id="future">
536  <div class="container">
537    <h2>Future Directions</h2>
538    <p class="lead">
539      Future work could use Draw2Think to study process evidence directly, treating
540      final-answer gains as one metric among canvas audits, planning signals, and
541      reusable trajectory data.
542    </p>
543
544    <div class="future-grid">
545      <article class="future-card">
546        <span class="future-kicker">Strategy-level checks</span>
547        <h3>Expose more than the rendered canvas.</h3>
548        <p>
549          Future harnesses can return dependency graphs, unresolved constraints, and
550          symbolic query opportunities so the model can reason from the construction
551          plan alongside visible objects, measurements, and final pixels.
552        </p>
553      </article>
554
555      <article class="future-card">
556        <span class="future-kicker">Proximal twins</span>
557        <h3>Generalize toward physical-world reasoning.</h3>
558        <p>
559          Geometry isolates the setting: the engine rejects invalid actions and exposes
560          local state. Similar loops may extend to physical-world AI when tasks have
561          typed actions, an executable twin, and cheap local checks before acting in
562          the real system.
563        </p>
564      </article>
565
566      <article class="future-card">
567        <span class="future-kicker">Reusable trajectories</span>
568        <h3>Treat process records as assets.</h3>
569        <p>
570          A Draw2Think trajectory contains typed dependencies, engine verdicts, and
571          concrete canvas effects. That makes it a denser training signal than a final
572          answer or a free-form explanation.
573        </p>
574      </article>
575    </div>
576  </div>
577</section>
578
579<!-- ─── BIBTEX ─────────────────────────────────────────────────── -->
580<section class="band alt" id="bibtex">
581  <div class="container narrow">
582    <h2>Citation</h2>
583    <p>
583If Draw2Think <small>(or the live demos on this project page)</small> is useful for your research, please cite:</p>
584    <div class="bibtex-block">
585      <pre class="bibtex"><code>@article{hu2026draw2think,
586  title  = {Draw2Think: Harnessing Geometry Reasoning through Constraint Engine Interaction},
587  author = {Hu, Juncheng and Du, Jiawei and Zhang, Xin and Zhou, Joey Tianyi},
588  journal = {arXiv preprint arXiv:2605.20743},
589  year   = {2026},
590  url    = {https://draw2think.github.io}
591}</code></pre>
592      <button class="copy-btn" data-copy="bibtex" type="button" aria-label="Copy BibTeX to clipboard" title="Copy BibTeX">
593        <i class="far fa-clipboard copy-icon" aria-hidden="true"></i>
594        <i class="fas fa-check copy-icon-done" aria-hidden="true"></i>
595      </button>
596    </div>
597  </div>
598</section>
599
600<!-- ─── FOOTER ─────────────────────────────────────────────────── -->
601<footer class="footer">
602  <div class="container narrow">
603    <p>
604      <strong>Acknowledgements.</strong>
605      We thank, in particular, the following products / projects / posts / talks:
606      <br>
607      &middot; <a href="https://github.com/geogebra">GeoGebra</a> &mdash; the public dynamic-geometry construction kernel (<a href="https://www.geogebra.org/calculator">try the web calculator</a>);
608      <br>
609      &middot; <a href="https://deepmind.google/models/gemini/flash/">Gemini 3 Flash</a> &mdash; the frontier multimodal backbone used in our main experiments;
610      <br>
611      &middot; <a href="https://github.com/Newclid/Newclid">Newclid</a> &mdash; the predicate-level verifier underpinning our construction-fidelity audit;
612      <br>
613      &middot; <a href="https://github.com/OpenGVLab/GenExam">GenExam</a> &mdash; the rendering benchmark and evaluation protocol;
614      <br>
615      &middot; <a href="https://lilianweng.github.io/posts/2025-05-01-thinking/">Lilian Weng: Why We Think</a> (1 May, 2025).
616      <br>
617      &middot; <a href="https://www.youtube.com/watch?v=y5qEFrZv-2Q">Thang Luong: Towards AI Superhuman Reasoning for Math and Beyond</a> (4 Nov, 2024).
618    </p>
619    <p class="meta">
620      &copy; 2026 The Draw2Think authors.
621    </p>
622  </div>
623</footer>
624
625<!-- Exit-focus button: shown only when body.focus-paradigms is set.
626     Fixed top-right under the sticky topnav. ESC also exits. -->
627<button class="focus-exit" type="button" aria-label="Exit focus view (or press ESC)" title="Exit focus (ESC)">
628  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
629    <line x1="18" y1="6" x2="6" y2="18"/>
630    <line x1="6" y1="6" x2="18" y2="18"/>
631  </svg>
632</button>
633
634<!-- Split out by concern:
635     paradigm-flow = <d2t-diagram> (col 4 Constraint-Agentic Harness)
636     visual-flow   = <visual-flow> (col 1 Visual Artifacts hover anim)
637     demo          = GeoGebra live trajectory
638     site          = nav highlight + BibTeX copy + paradigms focus mode.
639     All independent + defer-loaded; order doesn't matter. -->
640<script src="assets/js/paradigm-flow.js" defer></script>
vendor: 1 bytes, line 640
640
641<script src="assets/js/visual-flow.js" defer></script>
vendor: 1 bytes, line 641
641
642<script src="assets/js/textual-flow.js" defer></script>
vendor: 1 bytes, line 642
642
643<script src="assets/js/code-flow.js" defer></script>
vendor: 1 bytes, line 643
643
644<script src="assets/js/code-tiles.js" defer></script>
vendor: 1 bytes, line 644
644
645<script src="assets/js/demo.js" defer></script>
vendor: 1 bytes, line 645
645
646<script src="assets/js/site.js" defer></script>
646
647
648</body>
649</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.