Use smaller image previews in the editor

static/app.js

@@ -219,7 +219,7 @@ $('detectButton').onclick=()=>runJob('detect');$('refineButton').onclick=()=>run
 $('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);}};
 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.image;
+  $('beforeImage').src=state.session.image;$('afterImage').src=base+(result.preview||result.image);
   $('downloadImage').href=base+result.image;$('downloadRegions').href=base+result.metadata;
   $('resultSummary').textContent=`${result.elapsed.toFixed(1)}s`;
   $('resultSummary').title=`${result.model==='meanflow'?'MeanFlow':'Teacher'} · ${result.steps} steps`;
@@ -245,7 +245,7 @@ async function openStudio(){
       setBusy(true);
       const job=await api(`/api/sessions/${sid}/jobs/${jid}`);
       if(job.status!=='done'||job.kind!=='refine')throw new Error('This result is not available.');
-      const image=new Image();image.src=`/api/sessions/${sid}/source.png`;await image.decode();
+      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;

static/index.html

@@ -18,7 +18,7 @@
     
   </section>
   <section class="start-row">
-    <div class="example-selector"><button data-example="english" class="example active"><img src="/examples/english.png" alt="English editorial example"><span>English</span></button><button data-example="chinese" class="example"><img src="/examples/chinese.png" alt="Chinese New Year example"><span>中文</span></button></div>
+    <div class="example-selector"><button data-example="english" class="example active"><img src="/examples/english.webp" alt="English editorial example"><span>English</span></button><button data-example="chinese" class="example"><img src="/examples/chinese.webp" alt="Chinese New Year example"><span>中文</span></button></div>
     <div class="upload-area"><button id="uploadButton" class="button secondary"><span class="upload-icon">↥</span> Upload image</button><input id="imageUpload" type="file" accept="image/png,image/jpeg,image/webp" hidden></div>
   </section>
   <div id="notice" class="notice" role="status" hidden></div>