Adjust SVG dimensions and positioning in OSWorld blog post for improved layout and visual consistency. Update chart elements and labels to align with new dimensions, ensuring accurate representation of model performance metrics.

Timothyxxx · Timothyxxx · commit 490d269714d0 · 2025-08-07T12:37:09.000Z
diff --git a/public/blog/osworld-verified/human_gap_svg.svg b/public/blog/osworld-verified/human_gap_svg.svg
@@ -1,27 +1,27 @@
-<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
+<svg width="700" height="500" xmlns="http://www.w3.org/2000/svg">
   <!-- Background -->
-  <rect width="800" height="500" fill="#f8f9fa" rx="10"/>
+  <rect width="700" height="500" fill="#f8f9fa" rx="10"/>
   
   <!-- Title -->
-  <text x="400" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2c3e50">
+  <text x="350" y="40" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2c3e50">
     Gap to Human Performance
   </text>
   
   <!-- Subtitle -->
-  <text x="400" y="65" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d">
+  <text x="350" y="65" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#7f8c8d">
     Best Models vs Human Performance
   </text>
   
   <!-- Chart area background -->
-  <rect x="80" y="100" width="700" height="300" fill="white" stroke="#e9ecef" stroke-width="1" rx="5"/>
+  <rect x="80" y="100" width="580" height="300" fill="white" stroke="#e9ecef" stroke-width="1" rx="5"/>
   
   <!-- Grid lines -->
   <g stroke="#e9ecef" stroke-width="1">
     <!-- Horizontal grid lines -->
-    <line x1="80" y1="160" x2="780" y2="160"/>
-    <line x1="80" y1="220" x2="780" y2="220"/>
-    <line x1="80" y1="280" x2="780" y2="280"/>
-    <line x1="80" y1="340" x2="780" y2="340"/>
+    <line x1="80" y1="160" x2="660" y2="160"/>
+    <line x1="80" y1="220" x2="660" y2="220"/>
+    <line x1="80" y1="280" x2="660" y2="280"/>
+    <line x1="80" y1="340" x2="660" y2="340"/>
   </g>
   
   <!-- Y-axis labels -->
@@ -40,46 +40,46 @@
   
   <!-- Bars -->
   <!-- CoACT-1: 60.76% -->
-  <rect x="100" y="174.28" width="70" height="225.72" fill="rgba(102, 126, 234, 0.8)" stroke="rgba(102, 126, 234, 1)" stroke-width="2" rx="3"/>
+  <rect x="110" y="174.28" width="70" height="225.72" fill="rgba(102, 126, 234, 0.8)" stroke="rgba(102, 126, 234, 1)" stroke-width="2" rx="3"/>
   
   <!-- Agent S2.5 w/ o3: 56.0% -->
-  <rect x="190" y="192" width="70" height="208" fill="rgba(102, 126, 234, 0.6)" stroke="rgba(102, 126, 234, 1)" stroke-width="2" rx="3"/>
+  <rect x="200" y="192" width="70" height="208" fill="rgba(102, 126, 234, 0.6)" stroke="rgba(102, 126, 234, 1)" stroke-width="2" rx="3"/>
   
   <!-- Claude 4 Sonnet: 43.9% -->
-  <rect x="280" y="237.15" width="70" height="162.85" fill="rgba(255, 193, 7, 0.8)" stroke="rgba(255, 193, 7, 1)" stroke-width="2" rx="3"/>
+  <rect x="290" y="237.15" width="70" height="162.85" fill="rgba(255, 193, 7, 0.8)" stroke="rgba(255, 193, 7, 1)" stroke-width="2" rx="3"/>
   
   <!-- Doubao: 40.0% -->
-  <rect x="370" y="250" width="70" height="150" fill="rgba(255, 193, 7, 0.8)" stroke="rgba(255, 193, 7, 1)" stroke-width="2" rx="3"/>
+  <rect x="380" y="250" width="70" height="150" fill="rgba(255, 193, 7, 0.8)" stroke="rgba(255, 193, 7, 1)" stroke-width="2" rx="3"/>
   
   <!-- OpenCUA-32B: 35.7% -->
-  <rect x="460" y="266.45" width="70" height="133.55" fill="rgba(255, 99, 132, 0.8)" stroke="rgba(255, 99, 132, 1)" stroke-width="2" rx="3"/>
+  <rect x="470" y="266.45" width="70" height="133.55" fill="rgba(255, 99, 132, 0.8)" stroke="rgba(255, 99, 132, 1)" stroke-width="2" rx="3"/>
   
   <!-- Human Performance: 72% -->
-  <rect x="550" y="130" width="70" height="270" fill="rgba(46, 204, 113, 0.8)" stroke="rgba(46, 204, 113, 1)" stroke-width="2" rx="3"/>
+  <rect x="560" y="130" width="70" height="270" fill="rgba(46, 204, 113, 0.8)" stroke="rgba(46, 204, 113, 1)" stroke-width="2" rx="3"/>
   
   <!-- Value labels on bars -->
   <g font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">
-    <text x="135" y="195">60.8%</text>
-    <text x="225" y="210">56.0%</text>
-    <text x="315" y="255">43.9%</text>
-    <text x="405" y="270">40.0%</text>
-    <text x="495" y="285">35.7%</text>
-    <text x="585" y="150">72.0%</text>
+    <text x="145" y="195">60.8%</text>
+    <text x="235" y="210">56.0%</text>
+    <text x="325" y="255">43.9%</text>
+    <text x="415" y="270">40.0%</text>
+    <text x="505" y="285">35.7%</text>
+    <text x="595" y="150">72.0%</text>
   </g>
   
   <!-- X-axis labels -->
   <g font-family="Arial, sans-serif" font-size="11" fill="#666" text-anchor="middle">
-    <text x="135" y="430">CoACT-1</text>
-    <text x="225" y="425">Agent S2.5</text>
-    <text x="225" y="440">w/ o3</text>
-    <text x="315" y="425">Claude 4</text>
-    <text x="315" y="440">Sonnet</text>
-    <text x="405" y="425">Doubao-1.5</text>
-    <text x="405" y="440">Thinking</text>
-    <text x="495" y="425">OpenCUA</text>
-    <text x="495" y="440">32B</text>
-    <text x="585" y="425">Human</text>
-    <text x="585" y="440">Performance</text>
+    <text x="145" y="430">CoACT-1</text>
+    <text x="235" y="425">Agent S2.5</text>
+    <text x="235" y="440">w/ o3</text>
+    <text x="325" y="425">Claude 4</text>
+    <text x="325" y="440">Sonnet</text>
+    <text x="415" y="425">Doubao-1.5</text>
+    <text x="415" y="440">Thinking</text>
+    <text x="505" y="425">OpenCUA</text>
+    <text x="505" y="440">32B</text>
+    <text x="595" y="425">Human</text>
+    <text x="595" y="440">Performance</text>
   </g>
   
   <!-- Legend indicators -->
