feat(ui): progress indicator while the cloud OCR reads a photo

livemedcard/static/index.html

@@ -354,6 +354,14 @@
   .sphoto{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;margin-top:14px}
   .sphoto img{width:100%;max-width:420px;border-radius:8px;border:1px solid var(--line);display:block;margin:9px 0}
   .sfoot{display:flex;gap:9px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)}
+  .ocrp{display:none;margin-top:11px}
+  .ocrp.on{display:block}
+  .ocrp .track{height:4px;border-radius:99px;background:var(--line-soft);overflow:hidden}
+  .ocrp .track i{display:block;height:100%;width:38%;border-radius:99px;background:var(--accent);
+    animation:ocrslide 1.5s ease-in-out infinite}
+  @keyframes ocrslide{0%{transform:translateX(-100%)}100%{transform:translateX(360%)}}
+  .ocrp .lbl{margin-top:7px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
+  .ocrp .lbl b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
   a#samples-photo-dl{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;
     font:inherit;font-weight:550;border:1px solid var(--line);border-radius:10px;padding:9px 15px;
     background:transparent;color:var(--ink);transition:.14s}
@@ -379,6 +387,7 @@
   .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
 
   @media (prefers-reduced-motion:reduce){
+    .ocrp .track i{animation:none;width:100%}
     *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
       transition-duration:.001s!important}
     .spark path.line{stroke-dashoffset:0}
@@ -444,6 +453,7 @@
       </select>
       <button class="primary" id="add-submit">Process document</button>
     </div>
+    <div class="ocrp" id="add-ocrp"><div class="track"><i></i></div><div class="lbl"></div></div>
   </div>
 
   <div class="story" id="story" role="note">
@@ -533,6 +543,7 @@
         <button class="ghost" id="samples-photo-btn"></button>
         <a class="ghost" id="samples-photo-dl" href="/samples/image" download="livemedcard_sample_lab_report.jpg"></a>
       </div>
+      <div class="ocrp" id="samples-ocrp"><div class="track"><i></i></div><div class="lbl"></div></div>
     </div>
   </div>
   <div class="sfoot">
@@ -636,6 +647,7 @@ const I18N = {
     toastExport:'FHIR bundle downloaded', toastNeedInput:'Enter text or choose a photo',
     ocrReading:'Reading (OCR)…', processing:'Processing…',
     toastOcrWait:'Reading the photo on the cloud OCR lab — up to ~90 s',
+    ocrProgress:sec=>`Reading on the cloud OCR lab — <b>${sec} s</b> · usually 40–90 s`,
     toastEscalated:'Processed · escalated to human', toastAuto:'Processed · auto',
     toastNoFacts:'Document saved, but no measurements were extracted',
     errorPrefix:'Error: ', selected:name=>`Selected: ${name}`,
@@ -740,6 +752,7 @@ const I18N = {
     toastExport:'FHIR Bundle завантажено', toastNeedInput:'Введіть текст або виберіть фото',
     ocrReading:'Зчитування (OCR)…', processing:'Опрацювання…',
     toastOcrWait:'Фото читає хмарний OCR-лаб — до ~90 с',
+    ocrProgress:sec=>`Читає хмарний OCR-лаб — <b>${sec} с</b> · зазвичай 40–90 с`,
     toastEscalated:'Оброблено · ескалація до людини', toastAuto:'Оброблено · авто',
     toastNoFacts:'Документ збережено, але жодного показника не витягнуто',
     errorPrefix:'Помилка: ', selected:name=>`Вибрано: ${name}`,
@@ -1260,6 +1273,7 @@ $('#samples-load').onclick=async()=>{
 $('#samples-photo-btn').onclick=async()=>{
   const t=I18N[LANG], b=$('#samples-photo-btn'), orig=b.textContent;
   b.disabled=true; b.textContent=t.ocrReading; toast(t.toastOcrWait);
+  const stop=startOcrProgress('#samples-ocrp');
   try{
     const blob=await (await fetch('/samples/image')).blob();
     const base64=await new Promise((res,rej)=>{
@@ -1270,7 +1284,7 @@ $('#samples-photo-btn').onclick=async()=>{
     const got=(rep.extraction&&rep.extraction.observations||[]).length;
     toast(got?(rep.decision.escalate?t.toastEscalated:t.toastAuto):t.toastNoFacts);
   }catch(e){toast(t.errorPrefix+e.message);}
-  finally{b.disabled=false;b.textContent=orig;}
+  finally{stop();b.disabled=false;b.textContent=orig;}
 };
 $('#btn-reset').onclick=async()=>{await api('/reset',{method:'POST'});$('#log').innerHTML='';await refresh();toast(I18N[LANG].toastReset);};
 $('#btn-export').onclick=async()=>{
@@ -1283,6 +1297,14 @@ $('#btn-export').onclick=async()=>{
 };
 $('#btn-add').onclick=()=>$('#add-form').classList.toggle('show');
 
+function startOcrProgress(id){
+  const box=$(id), lbl=box.querySelector('.lbl'), t0=Date.now();
+  const tick=()=>{lbl.innerHTML=I18N[LANG].ocrProgress(Math.round((Date.now()-t0)/1000));};
+  tick(); box.classList.add('on');
+  const iv=setInterval(tick,1000);
+  return ()=>{clearInterval(iv); box.classList.remove('on'); lbl.textContent='';};
+}
+
 /* Згода на відправку фото в хмару. Питаємо ПЕРЕД тим, як файл по��ине пристрій —
    згода постфактум згодою не є. Локальний бекенд нічого не питає. */
 function askCloudConsent(){
@@ -1322,11 +1344,13 @@ $('#add-submit').onclick=async()=>{
   const text=$('#add-text').value.trim(), file=fileInput.files[0];
   if(!text&&!file){toast(t.toastNeedInput);return;}
   const btn=$('#add-submit'), orig=btn.textContent; btn.disabled=true;
+  let stopOcr=null;
   try{
     let rep;
     if(file){
       if(!await askCloudConsent()){ btn.disabled=false; btn.textContent=orig; return; }
       btn.textContent=t.ocrReading;
+      stopOcr=startOcrProgress('#add-ocrp');
       // Хмарний OCR — це ~70–90 с. Без попередження мовчазне очікування читається
       // як зависання (і саме так виглядає для журі, що клікне демо самостійно).
       toast(t.toastOcrWait);
@@ -1347,7 +1371,7 @@ $('#add-submit').onclick=async()=>{
     const got=(rep.extraction&&rep.extraction.observations||[]).length;
     toast(got?(rep.decision.escalate?t.toastEscalated:t.toastAuto):t.toastNoFacts);
   }catch(e){toast(t.errorPrefix+e.message);}
-  finally{btn.disabled=false;btn.textContent=orig;}
+  finally{if(stopOcr)stopOcr();btn.disabled=false;btn.textContent=orig;}
 };
 
 $('#ask').onclick=()=>ask();