app.mjs

import {buildPayload, previewPayload, pythonExample, requestDecision} from './api.mjs';
import {words, examples, exampleMedia, ratingOptions} from './locales.mjs';
import {readMedia} from './media.mjs';
const $ = id => document.getElementById(id);
let language = new URL(location.href).searchParams.get('lang') === 'zh' ? 'zh' : 'en';
let imageData, attachment, mediaController, mediaRequired = false, controller, resultData, requestPayload, lastError, state = 'ready', statusKey = '';
const t = key => words[language][key] || key;

function renderLanguage() {
  document.documentElement.lang = language === 'zh' ? 'zh-CN' : 'en';
  document.querySelectorAll('[data-i18n]').forEach(el => {el.textContent = t(el.dataset.i18n);});
  document.querySelectorAll('[data-placeholder]').forEach(el => {el.placeholder = t(el.dataset.placeholder);});
  $('language').textContent = language === 'en' ? '中文' : 'EN';
  $('language').ariaLabel = language === 'en' ? '切换到中文' : 'Switch to English';
  $('theme').ariaLabel = language === 'en' ? 'Switch color theme' : '切换主题';
  configureOptions(); renderState();
  if (resultData) renderAnswer(resultData.answer, resultData.data, requestPayload);
}
function configureOptions() {
  $('options-field').hidden = $('mode').value === 'predicate';
  $('options-label').textContent = t($('mode').value === 'score' ? 'levelsLabel' : 'choicesLabel');
}
function renderState() {
  $('state-badge').dataset.state = state;
  $('state-badge').textContent = t(state);
  $('status').className = state === 'error' ? 'error' : '';
  $('status').textContent = lastError ? (words[language].errors[lastError] || `HTTP ${lastError.replace('http_', '')}`) : statusKey ? t(statusKey) : '';
}
function clearResult() {
  resultData = null; lastError = null; state = 'ready'; statusKey = '';
  $('answer').hidden = true; $('empty').hidden = false;
  $('response-json').textContent = ''; $('probabilities').replaceChildren();renderState();
}
function showError(error) {
  state = 'error'; lastError = error instanceof TypeError ? 'network' : error.message;
  if (!words[language].errors[lastError] && !/^http_\d+$/.test(lastError)) lastError = 'response';
  renderState();
}
function currentPayload() {
  if(mediaRequired&&!imageData)throw new Error('image');
  return buildPayload({model:$('model').value,mode:$('mode').value,question:$('question').value,
    context:$('context').value,options:$('options').value,image:imageData});
}
function updatePreview(report = false) {
  try {
    const payload = currentPayload();
    $('python-code').textContent = pythonExample(payload,attachment);
    $('request-json').textContent = JSON.stringify(previewPayload(payload),null,2);
    $('copy-code').disabled = false;return payload;
  } catch (error) {
    $('python-code').textContent = t('noCode');$('request-json').textContent = '';$('copy-code').disabled = true;
    if (report) showError(error);
  }
}
function renderAnswer(answer, data, payload) {
  $('empty').hidden = true;$('answer').hidden = false;
  const isPredicate = payload.questions[0].type === 'predicate';
  $('decision-title').textContent = isPredicate ? t(answer.title) : answer.title;
  $('probabilities').replaceChildren();
  for (const row of answer.rows) {
    const label = isPredicate ? t(row.label) : row.label;
    const block = document.createElement('div');block.className = 'prob-row';
    const top = document.createElement('div');top.className = 'prob-label';
    const name = document.createElement('span');name.textContent = label;
    const number = document.createElement('strong');number.textContent = `${(row.probability*100).toFixed(1)}%`;top.append(name,number);
    const progress = document.createElement('progress');progress.max=1;progress.value=row.probability;progress.ariaLabel=label;
    block.append(top,progress);$('probabilities').append(block);
  }
  $('score-note').hidden = payload.questions[0].type !== 'score';
  $('confidence').textContent = answer.confidence === undefined ? '' : `${t('confidence')}: ${(answer.confidence*100).toFixed(1)}%`;
  $('model-id').textContent = data.model_id ? `${t('modelId')}: ${data.model_id}` : '';
  $('response-json').textContent = JSON.stringify(data,null,2);
}
function lock(value) {
  $('fields').disabled=value;
  document.querySelectorAll('[data-example]').forEach(button=>{button.disabled=value;});
  $('preview-code').disabled=value;
}
function removeImage() {
  mediaController?.abort();mediaController=null;
  $('video-preview').pause();$('video-preview').removeAttribute('src');$('video-preview').load();$('video-preview').hidden=true;
  if(attachment?.objectUrl)URL.revokeObjectURL(attachment.objectUrl);
  attachment=undefined;imageData=undefined;mediaRequired=false;$('image').value='';
  $('thumbnail').removeAttribute('src');$('image-preview').hidden=true;$('video-note').hidden=true;clearResult();updatePreview();
}
async function loadMedia(fileOrExample) {
  removeImage();mediaRequired=true;
  const active=new AbortController();mediaController=active;
  lock(true);state='busy';statusKey='reading';renderState();
  try {
    let file=fileOrExample;
    if(!(file instanceof File)) {
      const response=await fetch(file.src,{signal:active.signal});if(!response.ok)throw new Error('image');
      file=new File([await response.blob()],file.name,{type:file.kind==='video'?'video/mp4':'image/jpeg'});
    }
    const next=await readMedia(file,active.signal);
    if(active.signal.aborted){URL.revokeObjectURL(next.objectUrl);return;}
    attachment=next;imageData=next.image;
    $('thumbnail').src=imageData;$('image-name').textContent=next.name;$('image-preview').hidden=false;
    if(next.kind==='video'){$('video-preview').src=next.video;$('video-preview').poster=imageData;$('video-preview').hidden=false;$('video-note').hidden=false;}
    state='ready';statusKey='';renderState();updatePreview();
  } catch(error) {
    if(active.signal.aborted)return;
    $('image').value='';showError(new Error(error.message==='size'?'size':'image'));updatePreview();
  } finally {if(mediaController===active){mediaController=null;lock(false);}}
}
$('image').addEventListener('change',()=>{
  const file=$('image').files[0];if(!file){removeImage();return;}void loadMedia(file);
});
$('decision-form').addEventListener('submit', async event => {
  event.preventDefault();if(controller||mediaController)return;
  clearResult();const payload=updatePreview(true);if(!payload)return;
  requestPayload=payload;controller=new AbortController();const active=controller;
  const timeout=setTimeout(()=>active.abort('timeout'),120000);
  lock(true);$('cancel').hidden=false;state='busy';statusKey='waiting';renderState();
  try {
    const result=await requestDecision(payload,active.signal);if(active.signal.aborted)return;
    resultData=result;state='success';statusKey='';renderState();renderAnswer(result.answer,result.data,payload);
  } catch(error) {
    if(active.signal.aborted) {
      if(active.signal.reason==='timeout')showError(new Error('timeout'));
      else{state='ready';statusKey='cancelled';renderState();}
    } else showError(error);
  } finally {clearTimeout(timeout);if(controller===active){controller=null;lock(false);$('cancel').hidden=true;}}
});
$('cancel').addEventListener('click',()=>controller?.abort('cancelled'));
$('remove-image').addEventListener('click',removeImage);
$('language').addEventListener('click',()=>{language=language==='en'?'zh':'en';renderLanguage();updatePreview();});
$('theme').addEventListener('click',()=>{document.body.dataset.theme=document.body.dataset.theme==='dark'?'light':'dark';});
$('mode').addEventListener('change',()=>{
  if($('mode').value==='score'&&!$('options').value.trim())$('options').value=ratingOptions[language];configureOptions();
});
for (const name of ['question','context','options','model','mode']) {
  $(name).addEventListener('input',()=>{clearResult();updatePreview();});
  $(name).addEventListener('change',()=>{configureOptions();updatePreview();});
}
document.querySelectorAll('[data-example]').forEach(button=>button.addEventListener('click',async()=>{
  removeImage();const index=Number(button.dataset.example);const example=examples[language][index];
  ['mode','question','context','options'].forEach((id,index)=>{$(id).value=example[index];});
  configureOptions();if(exampleMedia[index])await loadMedia(exampleMedia[index]);else updatePreview();
  $('question').focus({preventScroll:true});
  $('decision-form').scrollIntoView({behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'instant':'smooth',block:'center'});
}));
$('preview-code').addEventListener('click',()=>{updatePreview(true);});
$('copy-code').addEventListener('click',async()=>{
  try{await navigator.clipboard.writeText($('python-code').textContent);$('copy-status').textContent=t('copied');}
  catch{$('copy-status').textContent=t('copyFailed');}
});
document.body.dataset.theme=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
renderLanguage();updatePreview();