Load example regions and inference settings with the image

static/app.js

@@ -53,8 +53,19 @@ function switchView(view) {
   $('editorPanel').hidden=view!=='edit'; $('comparePanel').hidden=view!=='compare';
   ['edit','compare'].forEach(v=>{ $(v+'View').classList.toggle('active',v===view); $(v+'View').setAttribute('aria-selected',String(v===view)); });
 }
+function applySettings(settings) {
+  state.model=settings.variant||settings.model||state.model;
+  document.querySelectorAll('[data-model]').forEach(button=>{
+    const active=button.dataset.model===state.model;
+    button.classList.toggle('active',active);button.setAttribute('aria-checked',String(active));
+  });
+  for(const [key,id] of [['steps','steps'],['seed','seed'],['guidance','guidance'],['text_threshold','textThreshold']]){
+    if(settings[key]!=null)$(id).value=settings[key];
+  }
+}
 async function loadSession(session) {
-  state.session=session;state.regions=[];state.selected=null;state.history=[];state.result=null;state.stale=false;state.tool='select';
+  state.session=session;state.regions=clone(session.regions||[]);state.selected=state.regions[0]?.id||null;state.history=[];state.result=null;state.stale=false;state.tool='select';
+  if(session.settings)applySettings(session.settings);
   $('regionResults').hidden=true;$('compareView').disabled=true;
   $('regionCanvas').setAttribute('viewBox',`0 0 ${session.width} ${session.height}`);
   $('regionCanvas').style.aspectRatio=`${session.width} / ${session.height}`;
@@ -224,7 +235,7 @@ async function runJob(kind) {
   }catch(e){notice(e.message);}finally{setBusy(false);renderList();}
 }
 $('detectButton').onclick=()=>runJob('detect');$('refineButton').onclick=()=>runJob('refine');
-$('exampleTargets').onclick=async()=>{if(state.busy||!state.session)return;try{const data=await api(endpoint('targets'));pushHistory();state.regions=data.regions;state.selected=data.regions[0]?.id||null;render();changed();switchView('edit');notice('Example edits loaded.',true);}catch(e){notice(e.message);}};
+$('exampleTargets').onclick=async()=>{if(state.busy||!state.session)return;try{setBusy(true);const data=await api(endpoint('targets'));pushHistory();state.regions=data.regions;state.selected=data.regions[0]?.id||null;applySettings(data.settings);render();changed();switchView('edit');notice();}catch(e){notice(e.message);}finally{setBusy(false);}};
 function renderResults(){
   const result=state.result,base=endpoint('');$('compareView').disabled=false;$('comparePanel').classList.remove('result-stale');
   $('beforeImage').src=state.session.image;$('afterImage').src=base+(result.preview||result.image);
@@ -256,8 +267,7 @@ async function openStudio(){
       const image=new Image();image.src=`/api/sessions/${sid}/preview.webp`;await image.decode();
       await loadSession({id:sid,image:image.src,width:image.naturalWidth,height:image.naturalHeight,example:params.get('e')});
       state.regions=job.result.regions.map(r=>({...r,enabled:true,origin:'saved'}));state.selected=state.regions[0]?.id||null;
-      state.model=job.result.model;$('steps').value=job.result.steps;$('seed').value=job.result.seed;$('guidance').value=job.result.guidance;
-      document.querySelectorAll('[data-model]').forEach(b=>{b.classList.toggle('active',b.dataset.model===state.model);b.setAttribute('aria-checked',String(b.dataset.model===state.model));});
+      applySettings(job.result);
       state.result=job.result;render();renderResults();switchView('compare');return;
     }catch(e){notice('This preview has expired. Choose an example to start a new image.');}
     finally{setBusy(false);}

static/index.html

@@ -37,7 +37,7 @@
       </div>
     </div>
     <aside class="controls">
-      <section class="detect-section"><button id="detectButton" class="button detect"><span class="scan-icon">⌗</span> Detect words <span class="button-arrow">→</span></button><div class="detect-sub"><button id="exampleTargets">Use example edits</button></div></section>
+      <section class="detect-section"><button id="detectButton" class="button detect"><span class="scan-icon">⌗</span> Detect words <span class="button-arrow">→</span></button><div class="detect-sub"><button id="exampleTargets">Reset example</button></div></section>
       <section class="regions-section"><div class="control-title"><h2>Regions</h2><span id="selectedCount" class="count-pill">0 selected</span></div><div id="regionsEmpty" class="empty-regions"><p>Detect words or draw a box.</p></div><div id="regionList" class="region-list" aria-label="Detected text regions"></div><div id="regionDetail" class="region-detail" hidden><div class="detail-heading"><button id="deleteRegion" title="Delete selected region">Delete</button></div><div class="crop-preview"><canvas id="selectedCrop"></canvas></div><label for="targetText">Target text</label><input id="targetText" type="text" maxlength="64" placeholder="Enter the correct word"><details class="box-settings"><summary>Box coordinates</summary><div class="coords" id="coordinates"></div></details><div hidden><input id="enableRegion" type="checkbox"><span id="regionOrigin"></span></div></div></section>
       <section class="refine-section"><div class="model-options" role="radiogroup" aria-label="PixText model"><button class="model-option active" data-model="meanflow" role="radio" aria-checked="true"><strong>MeanFlow</strong><span>4 steps</span><i></i></button><button class="model-option" data-model="teacher" role="radio" aria-checked="false"><strong>Teacher</strong><span>25 steps</span><i></i></button></div><details class="settings"><summary>Settings <span>⌄</span></summary><div class="settings-grid"><label>Steps<input id="steps" type="number" min="1" max="40" value="4"></label><label>Seed<input id="seed" type="number" min="0" max="4294967295" value="42"></label><label>Guidance<input id="guidance" type="number" min="0" max="10" step="0.1" value="3.3"></label><label>Text threshold<input id="textThreshold" type="number" min="0.1" max="0.95" step="0.05" value="0.5"></label></div></details><button id="refineButton" class="button primary" disabled>Refine text <span>↗</span></button><div id="jobProgress" class="job-progress" hidden><div><span id="jobMessage">Preparing</span><span id="jobPercent" hidden>0%</span></div><div class="progress-track"><div id="progressFill"></div></div></div><p class="run-note" id="runNote" hidden></p></section>
     </aside>