Spaces:

Georgefifth
/

tiny-browser-planner

Sleeping

App Files Files Community

Georgefifth commited on 22 days ago

Commit

e7f0307

verified ·

1 Parent(s): a3ff461

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

index.html +164 -17
style.css +310 -15

index.html CHANGED Viewed

@@ -1,19 +1,166 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Tiny Browser Planner — Research Story</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>A 1B model can explain the correct browser action<br>before it can reliably choose it.</h1>
+      <p class="subtitle">Fine-tuning MiniCPM5-1B with LoRA to study what a small model learns about planning.</p>
+      <div class="links">
+        <a href="https://huggingface.co/Georgefifth/tiny-browser-planner-reason" class="btn">Model</a>
+        <a href="https://huggingface.co/datasets/Georgefifth/tiny-browser-planner-data" class="btn">Dataset</a>
+        <a href="https://github.com/Georgefifth/tiny-browser-planner" class="btn">Code</a>
+      </div>
+    </header>
+    <section>
+      <h2>The Problem</h2>
+      <p>Large browser agents (7B+) are expensive and slow. Can a <strong>1B parameter model</strong> learn to plan browser actions — search, navigate, extract, backtrack — or does it just memorize heuristics?</p>
+      <div class="action-box">
+        <span class="tag">search</span>
+        <span class="tag">open_page</span>
+        <span class="tag">extract</span>
+        <span class="tag">back</span>
+        <span class="tag">refine_search</span>
+        <span class="tag">finish</span>
+      </div>
+    </section>
+    <section>
+      <h2>Experiment Timeline</h2>
+      <div class="timeline">
+        <div class="step">
+          <div class="step-num">v1</div>
+          <div class="step-body">
+            <strong>Linear data</strong> — 1142 samples, perfect regularity
+            <div class="result">Learned patterns, couldn't generalize</div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-num">v2/v3</div>
+          <div class="step-body">
+            <strong>More data</strong> — 1504 → 1948 samples
+            <div class="result">Still 72% — more data didn't help</div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-num">v4</div>
+          <div class="step-body">
+            <strong>Hard samples</strong> — 243 targeted examples, 89 decision points
+            <div class="result winner">200 quality examples &gt; 2000 generic ones</div>
+          </div>
+        </div>
+        <div class="step highlight">
+          <div class="step-num">Ablation</div>
+          <div class="step-body">
+            <strong>The Action Space Paradox</strong>
+            <p>Adding <code>back</code> gave the model a powerful tool — but it over-generalized. Both models (with/without back) learned a single heuristic instead of conditional selection.</p>
+            <table>
+              <tr><th>Model</th><th>Wrong page</th><th>Paywall</th><th>Standard</th><th>Refine</th><th>Total</th></tr>
+              <tr><td>vA (no back)</td><td class="pass">search ✅</td><td class="pass">search ✅</td><td class="pass">extract ✅</td><td class="pass">search ✅</td><td class="pass">11/11</td></tr>
+              <tr><td>vB (with back)</td><td class="pass">back ✅</td><td class="warn">back ✅</td><td class="fail">back ❌</td><td class="fail">back ❌</td><td class="fail">4/12</td></tr>
+            </table>
+            <div class="result insight">More actions → more capability → more confusion. The model trades expressive power for decision quality.</div>
+          </div>
+        </div>
+        <div class="step highlight">
+          <div class="step-num">Reason-First</div>
+          <div class="step-body">
+            <strong>Fixed with 40 samples and 7.8 seconds of training</strong>
+            <p>Hypothesis: the model <em>does</em> understand state, but action-only format encourages shortcutting. Forced reasoning before action.</p>
+            <div class="format-box">
+              <code>Observation → <span class="em">Reason: ...</span> → Action: ...</code>
+            </div>
+            <table>
+              <tr><th>Scenario</th><th>vB (action-only)</th><th>Reason-First</th></tr>
+              <tr><td>Wrong page</td><td class="pass">back ✅</td><td class="pass">back ✅</td></tr>
+              <tr><td>Paywall</td><td class="warn">1/2</td><td class="pass">back ✅</td></tr>
+              <tr><td>Standard page</td><td class="fail">back ❌</td><td class="pass">extract ✅</td></tr>
+              <tr><td>Needs refine</td><td class="fail">back ❌</td><td class="pass">refine_search ✅</td></tr>
+              <tr><td><strong>Total</strong></td><td class="fail"><strong>4/12</strong></td><td class="pass"><strong>10/12</strong></td></tr>
+            </table>
+            <div class="result winner">Reasoning eliminates heuristic shortcutting.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section>
+      <h2>Why It Works</h2>
+      <div class="example">
+        <div class="example-header wrong">Action-Only (vB)</div>
+        <div class="example-body">
+          <p><strong>Input:</strong> Task: Find Apple stock price — Page shows price prominently</p>
+          <p><strong>Output:</strong> <span class="bad">back</span></p>
+          <p class="note">Heuristic: "obstacle → back" applied to everything</p>
+        </div>
+      </div>
+      <div class="example">
+        <div class="example-header correct">Reason-First</div>
+        <div class="example-body">
+          <p><strong>Input:</strong> Task: Find Apple stock price — Page shows price prominently</p>
+          <p><strong>Output:</strong> <span class="good">Reason: Target information is present on the page</span></p>
+          <p><strong>Output:</strong> <span class="good">Action: extract ✅</span></p>
+        </div>
+      </div>
+      <p class="insight">The model already understood the state. The reasoning head exposes that knowledge.</p>
+    </section>
+    <section>
+      <h3>Key Insights</h3>
+      <div class="cards">
+        <div class="card">
+          <div class="card-icon">📊</div>
+          <h4>Data Quality > Quantity</h4>
+          <p>200 targeted hard samples outperformed 2000 generic ones.</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">🎯</div>
+          <h4>Reasoning > Data</h4>
+          <p>40 reason-first samples outperformed 88 action-only samples by fixing heuristic shortcutting.</p>
+        </div>
+        <div class="card">
+          <div class="card-icon">🧠</div>
+          <h4>State Understanding</h4>
+          <p>Correct reasoning in all passing cases confirms the model understands state — the bottleneck is action selection, not understanding.</p>
+        </div>
+      </div>
+    </section>
+    <section>
+      <h3>Try It Yourself</h3>
+      <pre><code>from unsloth import FastLanguageModel
+import torch, re
+model, tokenizer = FastLanguageModel.from_pretrained(
+    "Georgefifth/tiny-browser-planner-reason",
+    max_seq_length=2048,
+    load_in_4bit=True,
+    dtype=torch.bfloat16,
+)
+FastLanguageModel.for_inference(model)
+msgs = [
+    {"role": "system", "content": "First reason, then output the action."},
+    {"role": "user", "content": "Task: Find Apple stock price\n\nHistory:\n[search] Search completed.\n[open_page] Price displayed prominently at $198\n\nWhat is the next action?"},
+]
+prompt = tokenizer.apply_chat_template(msgs, tokenize=False, add_generation_prompt=True)
+inputs = tokenizer(prompt, return_tensors="pt").to("cuda")
+outs = model.generate(**inputs, max_new_tokens=48)
+print(tokenizer.decode(outs[0], skip_special_tokens=True))
+# Output:
+# Reason: Target information is present on the page
+# Action: extract</code></pre>
+    </section>
+    <footer>
+      <p>Built with <a href="https://huggingface.co/openbmb/MiniCPM5-1B">MiniCPM5-1B</a> + <a href="https://github.com/unslothai/unsloth">Unsloth</a> | <a href="https://huggingface.co/spaces/Georgefifth/tiny-browser-planner">Space</a></p>
+    </footer>
+  </div>
+</body>
 </html>

style.css CHANGED Viewed

@@ -1,28 +1,323 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: #0a0a0f;
+  color: #e0e0e0;
+  line-height: 1.7;
+}
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+header {
+  text-align: center;
+  padding: 60px 0 40px;
 }
 h1 {
+  font-size: 1.8em;
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 1.3;
+  margin-bottom: 16px;
+}
+.subtitle {
+  font-size: 1.05em;
+  color: #888;
+  margin-bottom: 24px;
+}
+.links {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.btn {
+  display: inline-block;
+  padding: 10px 24px;
+  border-radius: 8px;
+  background: #1a1a2e;
+  color: #e0e0e0;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.9em;
+  transition: all 0.2s;
+  border: 1px solid #333;
+}
+.btn:hover {
+  background: #2a2a4e;
+  border-color: #555;
+}
+section {
+  margin: 40px 0;
+}
+h2 {
+  font-size: 1.3em;
+  color: #ffffff;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #222;
+}
+h3 {
+  font-size: 1.15em;
+  color: #ffffff;
+  margin-bottom: 16px;
 }
 p {
+  margin-bottom: 12px;
+  color: #b0b0b0;
+}
+.action-box {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 16px 0;
+}
+.tag {
+  display: inline-block;
+  padding: 4px 14px;
+  border-radius: 20px;
+  background: #1a1a2e;
+  border: 1px solid #333;
+  font-size: 0.85em;
+  font-family: "SF Mono", "Consolas", monospace;
+  color: #99c;
+}
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.step {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  background: #111118;
+  border: 1px solid #1a1a22;
+  transition: all 0.2s;
+}
+.step.highlight {
+  background: #12121e;
+  border-color: #2a2a44;
+}
+.step-num {
+  flex-shrink: 0;
+  width: 70px;
+  font-weight: 700;
+  font-size: 0.85em;
+  color: #6688cc;
+  padding-top: 2px;
+}
+.step-body {
+  flex: 1;
+  font-size: 0.92em;
+  color: #b0b0b0;
+}
+.step-body p {
+  margin: 8px 0;
+}
+.step-body code {
+  background: #1a1a2e;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  color: #aaccff;
+}
+.result {
+  margin-top: 8px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background: #181822;
+  font-size: 0.9em;
+  color: #999;
+}
+.result.winner {
+  border-left: 3px solid #4caf50;
+  color: #81c784;
+}
+.result.insight {
+  border-left: 3px solid #ff9800;
+  color: #ffb74d;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 12px 0;
+  font-size: 0.9em;
+}
+th, td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid #222;
+}
+th {
+  color: #888;
+  font-weight: 600;
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+td.pass { color: #81c784; }
+td.warn { color: #ffb74d; }
+td.fail { color: #ef5350; }
+.format-box {
+  background: #1a1a2e;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin: 12px 0;
+  font-size: 0.9em;
+  text-align: center;
+}
+.format-box .em {
+  color: #ffb74d;
+  font-weight: 600;
+}
+.example {
+  margin: 16px 0;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #222;
+}
+.example-header {
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 0.85em;
+}
+.example-header.wrong { background: #2a1010; color: #ef5350; }
+.example-header.correct { background: #0a2a10; color: #81c784; }
+.example-body {
+  padding: 16px;
+  background: #0e0e14;
+}
+.example-body p {
+  margin-bottom: 4px;
+  font-family: "SF Mono", "Consolas", monospace;
+  font-size: 0.85em;
+}
+.bad { color: #ef5350; font-weight: 600; }
+.good { color: #81c784; }
+.note {
+  color: #666 !important;
+  font-family: inherit !important;
+  font-size: 0.85em !important;
+}
+.insight {
+  font-size: 1em;
+  color: #ffb74d;
+  font-weight: 500;
+  text-align: center;
+  padding: 16px;
+}
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
 }
 .card {
+  padding: 20px;
+  background: #111118;
+  border: 1px solid #1a1a22;
+  border-radius: 8px;
+}
+.card-icon {
+  font-size: 1.5em;
+  margin-bottom: 8px;
+}
+.card h4 {
+  color: #ffffff;
+  margin-bottom: 8px;
+  font-size: 0.95em;
+}
+.card p {
+  font-size: 0.85em;
+  color: #888;
+}
+pre {
+  background: #0e0e14;
+  padding: 20px;
+  border-radius: 8px;
+  overflow-x: auto;
+  border: 1px solid #1a1a22;
+}
+code {
+  font-family: "SF Mono", "Consolas", "Liberation Mono", monospace;
+  font-size: 0.85em;
+  color: #aaccff;
+  line-height: 1.6;
+}
+footer {
+  text-align: center;
+  padding: 40px 0;
+  color: #555;
+  font-size: 0.85em;
+}
+footer a {
+  color: #6688cc;
+  text-decoration: none;
+}
+footer a:hover {
+  text-decoration: underline;
+}
+a {
+  color: #6688cc;
 }
+@media (max-width: 600px) {
+  h1 { font-size: 1.3em; }
+  .step { flex-direction: column; gap: 8px; }
+  .step-num { width: auto; }
 }