src/js/lib/analysisDom.js

// @ts-nocheck

export function getAnalyzeButton() {
  const buttonHost = document.getElementById('analyze-screenshot-btn')
    || document.getElementById('header-analyze-btn')
    || document.querySelector('#global-analyze-action button')
    || document.querySelector('#global-analyze-action [role="button"]');
  const button = buttonHost?.querySelector?.('button') || buttonHost;
  return { buttonHost, button };
}
export function readResultSignature() {
  const resultHost = document.getElementById('important-response');
  return (
    resultHost?.querySelector?.('textarea, input')?.value
    || resultHost?.textContent
    || ''
  ).trim();
}

export function readAnalysisRequestInputs() {
  const frameData = window.__trackwhatDesktopFrameData
    || document.querySelector('#desktop-frame-data textarea, #desktop-frame-data input')?.value
    || '';
  const lockedTrackName = document.querySelector('#solo-mode input, #solo-mode select')?.value || 'Auto';
  const note = document.querySelector('#context-note textarea, #context-note input')?.value || '';
  const useHintOnce = document.querySelector('#context-note-once input[type="checkbox"]')?.checked ?? true;
  const visionModelId = Array.from(document.querySelectorAll('#vision-model input[type="radio"]')).find((input) => input.checked)?.value || '';
  return {
    frameData,
    lockedTrackName,
    note,
    useHintOnce,
    visionModelId,
  };
}

export function setHtmlContent(selector, value) {
  const host = document.querySelector(selector);
  if (!host || !host.isConnected) return false;
  host.innerHTML = value || '';
  return true;
}

function formatDisplayValue(value) {
  if (value == null) return '';
  if (typeof value === 'string') return value;
  try {
    return JSON.stringify(value, null, 2);
  } catch {
    return String(value);
  }
}

function setNativeDisplayValue(input, value) {
  const proto = input instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
  const setter = Object.getOwnPropertyDescriptor(proto, 'value')?.set;
  if (setter) setter.call(input, value);
  else input.value = value;
}

export function setDisplayValue(selector, value) {
  const input = document.querySelector(`${selector} textarea, ${selector} input`);
  if (!input || !input.isConnected) return false;
  const nextValue = formatDisplayValue(value);
  if (input instanceof HTMLTextAreaElement || input instanceof HTMLInputElement) {
    setNativeDisplayValue(input, nextValue);
    if (input instanceof HTMLTextAreaElement) {
      input.style.height = 'auto';
      input.style.height = `${Math.max(input.scrollHeight, 240)}px`;
    }
    input.dispatchEvent(new InputEvent('input', {
      bubbles: true,
      inputType: 'insertText',
      data: nextValue,
    }));
    input.dispatchEvent(new Event('change', { bubbles: true }));
  } else {
    input.textContent = nextValue;
  }
  return true;
}

function findMarkdownComponentId(initialValue) {
  const component = (window.gradio_config?.components || []).find((entry) => {
    return entry?.type === 'markdown'
      && typeof entry?.props?.value === 'string'
      && entry.props.value === initialValue;
  });
  return component?.id || null;
}

function cleanSummaryText(value) {
  const text = formatDisplayValue(value).trim();
  if (!text) return '';
  if (/<\/?(?:div|table|thead|tbody|tr|td|th)\b/i.test(text) || /&lt;\/?(?:div|table|thead|tbody|tr|td|th)\b/i.test(text)) {
    return 'Analysis updated.';
  }
  return text;
}

function setMarkdownHostText(host, value) {
  if (!host || !host.isConnected) return false;
  const text = cleanSummaryText(value);
  const paragraph = host?.querySelector?.('.prose p');
  if (paragraph) {
    paragraph.textContent = text;
    return true;
  }
  host.textContent = text;
  return true;
}

export function setMarkdownElementText(selector, value) {
  return setMarkdownHostText(document.querySelector(selector), value);
}

export function setMarkdownComponentText(initialValue, value) {
  const componentId = findMarkdownComponentId(initialValue);
  if (!componentId) return false;
  return setMarkdownHostText(document.querySelector(`#component-${componentId}`), value);
}

export function applyAnalysisOutputs(outputs) {
  const [
    analysisText,
    summaryHtml,
    tracksHtml,
    unknownsHtml,
    timelineHtml,
    summaryText,
    candidateRanking,
    trackingHeaderHtml,
    unknownGroupSelector,
    nextNote,
  ] = outputs || [];
  setDisplayValue('#important-response', analysisText || '');
  setHtmlContent('#summary-grid', summaryHtml || '');
  setHtmlContent('#tracks-grid', tracksHtml || '');
  setHtmlContent('#unknowns-grid', unknownsHtml || '');
  setHtmlContent('#timeline-grid', timelineHtml || '');
  setDisplayValue('#candidate-ranking', candidateRanking || '');
  setMarkdownElementText('#analysis-summary', summaryText || '')
    || setMarkdownComponentText('Start desktop capture to begin.', summaryText || '');
  setHtmlContent('#tracking-status-rail-host', trackingHeaderHtml || '');
  setDisplayValue('#context-note', nextNote || '');
  return true;
}