// Shared Playground component — drives every "try the API" surface on the site. // Reads from ENDPOINTS / GROUPS / playgroundEnabledIds() / priceFor / docsHrefFor. // Replaces the hardcoded V1Playground / V2Console hero panels. const PG_DARK = { bg: '#0e1115', bgDeep: '#0a0c0f', panel: '#11151a', panelAlt: '#0d1014', line: '#1f2228', line2: '#171a1f', ink: '#e6e9ed', ink2: '#cdd1d6', ink3: '#8b929b', ink4: '#5b6573', }; const PG_DEMO_MEDIA_URL = 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4'; const PG_WORKFLOWS = [ { name: 'Find a funny clip', endpoint: 'audio/detect-laughter', steps: ['detect-laughter', 'detect-silence', 'clip-near'] }, { name: 'Create a thumbnail', endpoint: 'video/best-frames', steps: ['best-frames', 'thumbnail-score'] }, { name: 'Find exact words', endpoint: 'audio/find-words', steps: ['transcribe', 'find-words', 'clip-window'] }, { name: 'Build topic sections', endpoint: 'audio/topic-segments', steps: ['transcribe', 'topic-segments', 'timeline-merge'] }, { name: 'Cut dead space', endpoint: 'audio/detect-silence', steps: ['detect-silence', 'clip-window'] }, { name: 'Find readable moments', endpoint: 'video/text-frames', steps: ['text-frames', 'dedupe-frames'] }, ]; const pgIsTimeControl = (ctl) => ctl && ctl.type === 'number' && /^(start|end|t|window|before|after|target_duration|min_duration|max_duration|min_gap|min_segment|resolution|min_clip|max_clip)$/.test(ctl.key); const pgControlLabel = (ctl) => ({ media_url: 'Source media URL', local_path: 'Source media', start: 'Start time', end: 'End time', t: 'Target timestamp', window: 'Search window', target_duration: 'Target duration', min_duration: 'Minimum duration', max_frames: 'Frames to return', min_gap: 'Minimum gap', min_segment: 'Minimum segment', resolution: 'Time resolution', quality: 'Processing quality', format: 'Output format', threshold_db: 'Silence threshold', speech_threshold: 'Speech threshold', threshold: 'Threshold', method: 'Method', match: 'Match mode', words: 'Timestamped words', queries: 'Search queries', transcript: 'Transcript segments', non_speech_volume: 'Non-speech volume', min_speakers: 'Min speakers', max_speakers: 'Max speakers', num_speakers: 'Known speakers', before: 'Context before', after: 'Context after', max_duration: 'Maximum duration', sensitivity: 'Sensitivity', estimated_speakers: 'Estimated speakers', }[ctl.key] || ctl.label || ctl.key); const pgControlHint = (ctl) => { if (ctl.key === 'start') return 'where processing begins'; if (ctl.key === 'end') return 'blank means end of media'; if (ctl.key === 'before') return 'context before'; if (ctl.key === 'after') return 'context after'; if (pgIsTimeControl(ctl)) return 'DD:HH:MM:SS'; return ctl.hint; }; const pgFormatDuration = (seconds) => { const n = Number(seconds); if (!Number.isFinite(n)) return ''; const whole = Math.max(0, Math.floor(n)); const d = Math.floor(whole / 86400); const h = Math.floor((whole % 86400) / 3600); const m = Math.floor((whole % 3600) / 60); const s = whole % 60; const pad = (x) => String(x).padStart(2, '0'); return `${pad(d)}:${pad(h)}:${pad(m)}:${pad(s)}`; }; const pgParseDuration = (text) => { if (typeof text === 'number') return text; const raw = String(text || '').trim(); if (!raw) return ''; if (!raw.includes(':')) { const n = Number(raw); return Number.isFinite(n) ? n : 0; } const parts = raw.split(':').map(p => Number(p || 0)); while (parts.length < 4) parts.unshift(0); const [d, h, m, s] = parts.slice(-4); return (d * 86400) + (h * 3600) + (m * 60) + s; }; const pgDisplayRequest = (request, controls = []) => { const out = { ...request }; controls.forEach(c => { if (pgIsTimeControl(c) && out[c.key] !== '' && out[c.key] != null) out[c.key] = pgFormatDuration(out[c.key]); }); return out; }; const PG_DEFAULT_MEDIA_SECONDS = 5; const pgEndpointFromStep = (step) => { if (!step) return null; if (ENDPOINTS[step]) return step; return endpointIds().find(id => id.endsWith(`/${step}`) || id.replace('/', '-') === step) || null; }; const pgWorkflowEndpointIds = (workflow) => (workflow.steps || [workflow.endpoint]).map(pgEndpointFromStep).filter(Boolean); const pgParamsForEndpoint = (endpointId, activeEndpointId, activeRequest, mediaUrl) => { const endpoint = ENDPOINTS[endpointId] || {}; const base = endpointId === activeEndpointId ? { ...activeRequest } : pgDefaultParamsFor(endpoint); if ('media_url' in base) base.media_url = mediaUrl || base.media_url || PG_DEMO_MEDIA_URL; if ('local_path' in base) base.local_path = mediaUrl || base.local_path || PG_DEMO_MEDIA_URL; return base; }; const pgResultPayload = (response) => response?.results || response?.job?.result || response?.result || response; const pgApplyPreviousResultToParams = (endpointId, params, previousResult) => { const next = { ...(params || {}) }; const controls = ENDPOINTS[endpointId]?.playgroundControls || []; const needsFrames = controls.some(control => control.key === 'frames'); if (needsFrames && Array.isArray(previousResult?.frames)) next.frames = previousResult.frames; return next; }; const pgBillableSecondsFor = (endpointId, mediaSeconds, params = {}) => { const unit = pricingUnit(endpointId); if (unit === 'request') return 0; if (unit === 'clip_min') { if (endpointId === 'video/clip-window') { const start = Number(params.start || 0); const end = Number(params.end || 0); if (Number.isFinite(start) && Number.isFinite(end) && end > start) return end - start; } if (endpointId === 'video/clip-near') { const target = Number(params.target_duration || params.max_duration || 0); if (Number.isFinite(target) && target > 0) return target; } } return Number.isFinite(mediaSeconds) && mediaSeconds > 0 ? mediaSeconds : PG_DEFAULT_MEDIA_SECONDS; }; const pgEstimateEndpointUsd = (endpointId, mediaSeconds, params = {}) => { const unit = pricingUnit(endpointId); const rate = priceFor(endpointId); if (unit === 'request') return rate; return rate * (pgBillableSecondsFor(endpointId, mediaSeconds, params) / 60); }; // ───────────────────────────────────────────────────────────── primitives ── const PgInput = ({ ctl, value, onChange }) => { const inputBase = { width: '100%', boxSizing: 'border-box', background: PG_DARK.bgDeep, border: `1px solid ${PG_DARK.line}`, borderRadius: 7, padding: '8px 10px', minHeight: 34, fontFamily: wf.mono, fontSize: 12.5, color: PG_DARK.ink, outline: 'none', }; if (ctl.type === 'toggle') { return (
onChange(!value)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 10px', borderRadius: 7, cursor: 'pointer', border: `1px solid ${PG_DARK.line}`, background: PG_DARK.bgDeep, fontFamily: wf.mono, fontSize: 12, color: PG_DARK.ink2, }}> {value ? 'true' : 'false'}
); } if (ctl.type === 'select') { return ( ); } if (ctl.type === 'json') { const text = typeof value === 'string' ? value : JSON.stringify(value); return ( { try { onChange(JSON.parse(e.target.value)); } catch { onChange(e.target.value); } }} style={inputBase} spellCheck={false} /> ); } if (pgIsTimeControl(ctl)) { return ( onChange(pgParseDuration(e.target.value))} style={inputBase} spellCheck={false} /> ); } // url / text / number return ( onChange(ctl.type === 'number' ? Number(e.target.value) : e.target.value)} style={inputBase} spellCheck={false} /> ); }; // JSON syntax-highlighter (very small) const JsonBlock = ({ value, maxHeight = 280 }) => { const text = typeof value === 'string' ? value : JSON.stringify(value, null, 2); return ( 
      {text.split('\n').map((ln, i) => {
        // string highlighter
        const parts = []; let key = 0; let last = 0;
        const re = /"([^"]*)"(\s*:)?/g; let m;
        while ((m = re.exec(ln)) !== null) {
          if (m.index > last) parts.push({ln.slice(last, m.index)});
          const isKey = !!m[2];
          parts.push("{m[1]}");
          if (isKey) parts.push(:);
          last = m.index + m[0].length;
        }
        if (last < ln.length) {
          // number highlight in trailing chunk
          const tail = ln.slice(last);
          const nm = tail.split(/(-?\d+\.?\d*)/);
          parts.push(...nm.map((seg, i) =>
            /^-?\d+\.?\d*$/.test(seg)
              ? {seg}
              : {seg}
          ));
        }
        return 
{parts.length ? parts : '\u00a0'}
;
      })}
); }; // ──────────────────────────────────────────────────────── response previews ── const FrameTile = ({ t, score, label, url }) => (
{url && } t={pgFormatDuration(t)} {label && {label}}
{typeof score === 'number' && (
score{score.toFixed(2)}
)}
); const PreviewFrames = ({ ep, response }) => { const frames = response.frames || (response.frame ? [response.frame] : []); return (
{frames.length} frame{frames.length === 1 ? '' : 's'}
{frames.slice(0, 6).map((f, i) => ( ))}
); }; const PreviewTimelineSegments = ({ ep, response }) => { const timelineValue = response.timeline?.segments || response.timeline || []; const segs = response.segments || response.chunks || response.ranges || (Array.isArray(timelineValue) ? timelineValue : []); const cuts = response.cuts || []; const totalEnd = Math.max( ...segs.map(s => s.end ?? (s.t ? s.t + (s.dur || 0) : 0)), ...cuts, response.media_seconds || 100, ); const norm = (x) => `${(x / totalEnd) * 100}%`; const palette = ['var(--accent)', '#9bd17b', '#e6c07b', '#c678dd', '#56b6c2']; return (
timeline · {segs.length || cuts.length} segment{(segs.length || cuts.length) === 1 ? '' : 's'}
{segs.map((s, i) => { const start = s.start ?? s.t ?? 0; const end = s.end ?? (s.t ? s.t + (s.dur || 1) : start + 1); const c = palette[i % palette.length]; return (
); })} {cuts.map((t, i) => ( ))}
{segs.slice(0, 5).map((s, i) => { const start = s.start ?? s.t ?? 0; const end = s.end ?? (s.t ? s.t + (s.dur || 1) : start + 1); return ( {pgFormatDuration(start)}-{pgFormatDuration(end)} {s.topic || s.reason || s.kind ? `· ${s.topic || s.reason || s.kind}` : ''} ); })}
); }; const PreviewClip = ({ ep, response }) => { const outputUrl = response.url || response.output_file?.url || response.output_file?.storage?.url; const isAudioOutput = (ep?.group === 'audio') || /^audio\//.test(ep?.id || '') || /^audio\//.test(response?.source || '') || ['mp3', 'wav', 'm4a'].includes(String(response?.format || '').toLowerCase()); return (
playable clip
{outputUrl ? ( isAudioOutput ? (
) : (
); }; const PreviewSignal = ({ ep, response }) => { // collect rows from any of: results, silences, peaks, music, mixed, cuts, speakers, overlaps, event const rows = []; const colorFor = (k) => ({ laughter:'#9bd17b', silence:'#8b929b', music:'#c678dd', mixed:'#e6c07b', energy_peak:'var(--accent)', speaker:'var(--accent)', overlap:'#e08e6e', cut:'var(--accent)', signal:'var(--accent)', })[k] || 'var(--accent)'; if (response.results) response.results.forEach(r => rows.push({ kind: ep.title.replace('detect-',''), t: r.t, dur: r.dur, conf: r.conf })); if (response.segments) response.segments.forEach(r => rows.push({ kind: r.kind || ep.title, t: r.start ?? r.t, dur: (r.end != null && r.start != null) ? r.end - r.start : r.dur, conf: r.confidence ?? r.score, label: r.metadata?.speaker_label || r.metadata?.title })); if (response.matches) response.matches.forEach(r => rows.push({ kind: r.kind || 'word_match', t: r.start, dur: (r.end || r.start) - r.start, conf: r.confidence ?? r.score, label: r.metadata?.text || r.metadata?.query })); if (response.silences) response.silences.forEach(r => rows.push({ kind:'silence', t: r.start, dur: r.end - r.start })); if (response.peaks) response.peaks.forEach(r => rows.push({ kind:'energy_peak', t: r.t, conf: r.score })); if (response.music) response.music.forEach(r => rows.push({ kind:'music', t: r.start, dur: r.end - r.start, conf: r.confidence })); if (response.cuts && Array.isArray(response.cuts)) response.cuts.forEach(c => rows.push({ kind:'cut', t: c.t ?? c, conf: c.quality, reason: c.reason })); if (response.speakers) response.speakers.forEach(s => rows.push({ kind:`speaker ${s.id}`, t: 0, dur: 0, label: `${(s.share*100).toFixed(0)}% · ${s.segments} segments` })); if (response.overlaps) response.overlaps.forEach(o => rows.push({ kind:'overlap', t: o.t, dur: o.dur, label: (o.ids||[]).join('+') })); if (response.event) rows.push({ kind: response.event.kind, t: response.event.t, dur: response.event.dur, label: `Δ ${pgFormatDuration(response.delta || 0)}` }); if (rows.length === 0 && Array.isArray(response.timeline)) response.timeline.forEach(e => rows.push({ kind: e.kind, t: e.t ?? e.start, dur: e.dur ?? ((e.end || e.start) - e.start) })); if (rows.length === 0 && Array.isArray(response.timeline?.segments)) response.timeline.segments.forEach(e => rows.push({ kind: e.kind, t: e.t ?? e.start, dur: e.dur ?? ((e.end || e.start) - e.start) })); return (
{rows.length} event{rows.length === 1 ? '' : 's'}
{rows.slice(0, 6).map((r, i) => (
{r.kind} t={pgFormatDuration(r.t || 0)} {r.dur ? pgFormatDuration(r.dur) : '—'} {r.conf != null ? `conf ${r.conf.toFixed(2)}` : (r.label || r.reason || '')}
))}
); }; const PREVIEWS = { 'frames': PreviewFrames, 'timeline-segments': PreviewTimelineSegments, 'clip': PreviewClip, 'signal': PreviewSignal, }; const PreviewWaiting = ({ chain, mediaSeconds }) => (
Output appears here after processing
Choose a source file, pick one or more endpoints, then run the chain.
{chain.length} endpoint{chain.length === 1 ? '' : 's'} selected - {pgFormatDuration(mediaSeconds)}
); // ───────────────────────────────────────────────────────── grouped selector ── const GroupedSelect = ({ value, onChange }) => { return ( ); }; // ───────────────────────────────────────────────────────────────── main ──── // ── analytics helpers ───────────────────────────────────────────────────── // Safe metadata only — never includes the media_url or full request body. const pgEpMeta = (id) => { const ep = ENDPOINTS[id] || {}; return { endpoint_id: id, endpoint_path: ep.path, endpoint_group: ep.group, pricing_unit: (typeof pricingUnit === 'function') ? pricingUnit(id) : undefined, fake_response_type: ep.fakeResponseType, }; }; const safeFileExt = (s) => { if (typeof s !== 'string') return undefined; const m = s.match(/\.([a-z0-9]{2,5})(?:[?#]|$)/i); return m ? m[1].toLowerCase() : undefined; }; const pgInitialEndpoint = (fallback) => { try { const hashQuery = String(window.location.hash || '').split('?')[1] || ''; const fromHash = new URLSearchParams(hashQuery).get('endpoint'); const fromUrl = fromHash || new URLSearchParams(window.location.search).get('endpoint'); return fromUrl && ENDPOINTS[fromUrl] && ENDPOINTS[fromUrl].playgroundEnabled !== false ? fromUrl : fallback; } catch { return fallback; } }; const pgDefaultParamsFor = (endpoint) => { const next = { ...(endpoint.defaultRequest || endpoint.requestExample) }; (endpoint.playgroundControls || []).forEach(c => { if (next[c.key] == null && c.default != null) next[c.key] = c.default; }); if ('media_url' in next) next.media_url = PG_DEMO_MEDIA_URL; if ('local_path' in next) next.local_path = PG_DEMO_MEDIA_URL; return next; }; const pgTrack = (name, props) => { if (window.MIQAnalytics) window.MIQAnalytics.track(name, props || {}); }; const Playground = ({ initialId = 'audio/detect-speakers', defaultMinutes = 18, height = 'auto', }) => { const [id, setId] = React.useState(() => pgInitialEndpoint(initialId)); const ep = ENDPOINTS[id]; const [params, setParams] = React.useState(() => pgDefaultParamsFor(ep)); const [chain, setChain] = React.useState(() => [pgInitialEndpoint(initialId)]); const [mediaSeconds, setMediaSeconds] = React.useState(PG_DEFAULT_MEDIA_SECONDS); const [sourcePreviewUrl, setSourcePreviewUrl] = React.useState(PG_DEMO_MEDIA_URL); const [copied, setCopied] = React.useState(''); const [running, setRunning] = React.useState(false); const [liveResponse, setLiveResponse] = React.useState(null); const [liveError, setLiveError] = React.useState(null); const [liveJob, setLiveJob] = React.useState(null); const [selectedFile, setSelectedFile] = React.useState(null); const [mediaSourceMode, setMediaSourceMode] = React.useState('demo'); const [uploadInfo, setUploadInfo] = React.useState(null); const [uploadPhase, setUploadPhase] = React.useState(''); const [labSession, setLabSession] = React.useState(null); // playground_viewed — once per mount React.useEffect(() => { pgTrack('playground_viewed', pgEpMeta(id)); if (window.MomentIQ?.getLabSession) { window.MomentIQ.getLabSession() .then(payload => setLabSession(payload.lab_session || null)) .catch(() => {}); } // eslint-disable-next-line react-hooks/exhaustive-deps }, []); React.useEffect(() => { setParams(pgDefaultParamsFor(ep)); setLiveResponse(null); setLiveError(null); setLiveJob(null); }, [id]); React.useEffect(() => { if (!selectedFile) { setSourcePreviewUrl(PG_DEMO_MEDIA_URL); return undefined; } const url = URL.createObjectURL(selectedFile); setSourcePreviewUrl(url); return () => URL.revokeObjectURL(url); }, [selectedFile]); // Wrapped setter so every endpoint switch becomes a tracked event. const selectEndpoint = (next) => { if (next === id) return; pgTrack('playground_endpoint_selected', { ...pgEpMeta(next), from_endpoint_id: id }); setId(next); setChain(current => current.length <= 1 ? [next] : current); }; const mediaKey = (ep.playgroundControls || []).find(c => c.key === 'media_url' || c.key === 'local_path')?.key; const useDemoMedia = () => { setMediaSourceMode('demo'); setSelectedFile(null); setUploadInfo(null); setUploadPhase(''); setMediaSeconds(PG_DEFAULT_MEDIA_SECONDS); if (mediaKey) setParam(mediaKey, PG_DEMO_MEDIA_URL); }; const chooseFile = (file) => { if (!file) return; setMediaSourceMode('upload'); setSelectedFile(file); setUploadInfo(null); setUploadPhase('ready'); setLiveResponse(null); setLiveError(null); setLiveJob(null); pgTrack('playground_media_uploaded', { ...pgEpMeta(id), media_source_type: 'upload', file_extension: safeFileExt(file.name), file_size_bytes: file.size, }); }; const selectWorkflow = (workflow) => { const workflowChain = pgWorkflowEndpointIds(workflow); if (workflowChain.length) { setChain(workflowChain); selectEndpoint(workflowChain[0]); } else { selectEndpoint(workflow.endpoint); } pgTrack('playground_workflow_selected', { workflow: workflow.name, endpoint_id: workflow.endpoint }); }; const addEndpointToChain = () => { setChain(current => current.includes(id) ? current : [...current, id]); pgTrack('playground_chain_endpoint_added', pgEpMeta(id)); }; const removeEndpointFromChain = (endpointId) => { setChain(current => { const next = current.filter(item => item !== endpointId); return next.length ? next : [id]; }); }; const setParam = (k, v) => { setParams(p => ({ ...p, [k]: v })); const ctl = (ep.playgroundControls || []).find(c => c.key === k); if (!ctl) return; const base = pgEpMeta(id); if (ctl.type === 'url' && k.toLowerCase().indexOf('url') >= 0) { // Never the URL itself — only the fact + safe extension. pgTrack('playground_media_url_entered', { ...base, media_url_entered: !!v, media_source_type: 'url', file_extension: safeFileExt(v), }); } else if (k === 'start' || k === 'end') { const start = k === 'start' ? v : params.start; const end = k === 'end' ? v : params.end; pgTrack('playground_time_window_changed', { ...base, start, end, window_seconds: (Number.isFinite(start) && Number.isFinite(end)) ? Math.max(0, end - start) : undefined, }); } else if (k === 'quality') { pgTrack('playground_param_changed', { ...base, param: 'quality', quality: v }); } }; const requestBody = React.useMemo(() => { const out = {}; (ep.playgroundControls || []).forEach(c => { out[c.key] = params[c.key] ?? c.default; }); return out; }, [ep, params]); const displayRequestBody = React.useMemo( () => { const display = { ...requestBody }; if (selectedFile && mediaKey) display[mediaKey] = uploadInfo?.media_url || `upload://${selectedFile.name}`; return pgDisplayRequest(display, ep.playgroundControls || []); }, [requestBody, ep, selectedFile, uploadInfo, mediaKey], ); const chainDetails = React.useMemo(() => { const mediaUrl = selectedFile ? (uploadInfo?.media_url || `upload://${selectedFile.name}`) : (requestBody[mediaKey] || PG_DEMO_MEDIA_URL); return chain.map(endpointId => { const chainParams = pgParamsForEndpoint(endpointId, id, requestBody, mediaUrl); const billableSeconds = pgBillableSecondsFor(endpointId, mediaSeconds, chainParams); const estimatedUsd = pgEstimateEndpointUsd(endpointId, mediaSeconds, chainParams); return { endpointId, params: chainParams, billableSeconds, estimatedUsd }; }); }, [chain, id, requestBody, selectedFile, uploadInfo, mediaKey, mediaSeconds]); const cost = chainDetails.reduce((sum, item) => sum + item.estimatedUsd, 0); const liveChainEnabled = chain.every(endpointId => window.MomentIQ?.canRunLive?.(endpointId)); const isFixedPrice = chainDetails.every(item => pricingUnit(item.endpointId) === 'request'); const outputEndpointId = chain[chain.length - 1] || id; const outputEp = ENDPOINTS[outputEndpointId] || ep; const Preview = PREVIEWS[outputEp.fakeResponseType] || PreviewSignal; const liveEnabled = !!(window.MomentIQ && typeof window.MomentIQ.runJob === 'function' && liveChainEnabled); const hasProcessedOutput = !!(liveResponse || liveError || liveJob); const previewResponse = liveResponse?.results || liveResponse?.job?.result || liveResponse?.clip || liveResponse || ep.responseExample; // playground_price_estimate_viewed — fire when the estimated cost actually // changes (debounced through React state, not on every keystroke). React.useEffect(() => { pgTrack('playground_price_estimate_viewed', { ...pgEpMeta(id), estimated_price_usd: +cost.toFixed(4), media_length_seconds: mediaSeconds, is_fixed_price: isFixedPrice, endpoint_chain: chain, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [id, mediaSeconds, chain.join('|'), cost]); const copy = (label, text) => { try { navigator.clipboard?.writeText(text); } catch (e) {} setCopied(label); setTimeout(() => setCopied(''), 1400); }; // Job runner. Endpoints with worker adapters use the hosted API/worker path; // endpoints without adapters still show preview data until they are live. const runDemo = async () => { const base = pgEpMeta(id); pgTrack('playground_demo_run_clicked', { ...base, media_length_seconds: mediaSeconds, estimated_price_usd: +cost.toFixed(4), start: params.start, end: params.end, quality: params.quality, endpoint_chain: chain, }); setRunning(true); setLiveJob(null); if (liveEnabled) { setLiveResponse(null); setLiveError(null); try { const runOptions = { intervalMs: 1500, timeoutMs: 120000, onProgress: ({ phase, upload }) => { setUploadPhase(phase); if (upload) setUploadInfo(upload); }, }; let upload = null; let mediaUrl = requestBody[mediaKey] || PG_DEMO_MEDIA_URL; if (selectedFile && mediaKey) { upload = await window.MomentIQ.uploadFile(selectedFile, runOptions); setUploadInfo(upload); mediaUrl = upload.media_url; setParams(p => ({ ...p, [mediaKey]: upload.media_url })); } const chainResults = []; let response = null; let previousResult = null; for (const endpointId of chain) { const endpointParams = pgApplyPreviousResultToParams( endpointId, pgParamsForEndpoint(endpointId, id, requestBody, mediaUrl), previousResult, ); response = await window.MomentIQ.runJob(endpointId, endpointParams, runOptions); previousResult = pgResultPayload(response); chainResults.push({ endpoint: endpointId, response }); if (response?.lab_session) setLabSession(response.lab_session); setLiveResponse({ ...response, upload, chain_results: chainResults, results: pgResultPayload(response), }); setLiveJob(response?.job || null); } const finalResponse = { ...(response || {}), upload, chain_results: chainResults, results: pgResultPayload(response), }; setLiveResponse(finalResponse); setLiveJob(response?.job || null); pgTrack('playground_demo_completed', { ...base, media_length_seconds: mediaSeconds, estimated_price_usd: response?.job?.estimatedPriceUsd ?? response?.estimated_price_usd ?? +cost.toFixed(4), success: response?.job?.status !== 'failed', job_id: response?.job?.id || response?.job_id, job_status: response?.job?.status || response?.status, endpoint_chain: chain, }); } catch (err) { const payload = err?.payload || { error: { code: 'client_error', message: err?.message || String(err) } }; setLiveError(payload); setLiveJob(payload?.job || null); pgTrack('playground_demo_completed', { ...base, media_length_seconds: mediaSeconds, estimated_price_usd: +cost.toFixed(4), success: false, error_code: payload?.error?.code, endpoint_chain: chain, }); } finally { setRunning(false); } return; } setTimeout(() => { setRunning(false); setLiveResponse({ mode: 'preview_only', note: 'This endpoint is not connected to a hosted worker yet.', results: ep.responseExample }); pgTrack('playground_demo_completed', { ...base, media_length_seconds: mediaSeconds, estimated_price_usd: +cost.toFixed(4), success: true, endpoint_chain: chain, }); }, 650); }; return (
{/* chrome */}
Moment Lab Try the API free here
{/* LEFT: selector + controls + request JSON */}
Choose endpoint
Endpoint chain
{chain.map((endpointId, index) => { const item = ENDPOINTS[endpointId]; const group = GROUPS[item.group]; return ( ); })}
Workflow chain presets
{PG_WORKFLOWS.map(w => ( ))}
{ep.path} {ep.group} {liveEnabled ? 'live worker' : 'preview'}
{ep.playgroundDescription || ep.short}
{mediaKey && (
Source media
Choose the file the selected endpoint chain should process.
{selectedFile ? selectedFile.name : 'Demo video loaded'}
{selectedFile ? `${(selectedFile.size / 1024 / 1024).toFixed(1)} MB ${uploadPhase ? `- ${uploadPhase}` : ''}` : PG_DEMO_MEDIA_URL}
Duration: {pgFormatDuration(mediaSeconds)}
{(selectedFile && selectedFile.type && selectedFile.type.startsWith('audio/')) ? (
)} {/* Controls */}
Request settings
{(ep.playgroundControls || []).map(ctl => { const span = (ctl.type === 'url' || ctl.type === 'json' || ctl.type === 'text') ? '1 / -1' : 'auto'; return (
{pgControlLabel(ctl)} {pgControlHint(ctl) && {pgControlHint(ctl)}}
setParam(ctl.key, v)} />
); })}
API request for developers
Request body POST {ep.path}
{/* RIGHT: response + cost + actions */}
{/* Cost row */}
Estimated cost
${cost.toFixed(2)} {chain.length} endpoint{chain.length === 1 ? '' : 's'} on {pgFormatDuration(mediaSeconds)}
{chainDetails.map(item => (
{ENDPOINTS[item.endpointId].path.replace('/v1/', '')} {pricingUnit(item.endpointId) === 'request' ? priceLabel(item.endpointId) : `$${item.estimatedUsd.toFixed(2)}`}
))}
{labSession && (
Moment Lab trial: {labSession.trial_units_remaining} units left
)}
$5 free credit before signup. We ask you to create an account when trial credit runs out.
{/* Response preview */}
Output after selected endpoints run
{hasProcessedOutput ? : }
{liveError && (
{liveError?.error?.code || 'error'}: {liveError?.error?.message || 'MomentIQ request failed'}
)} {liveJob && (
{liveJob.id} · {liveJob.status} · {liveJob.resultMode || 'worker'} {liveJob.processingMs != null ? `${liveJob.processingMs} ms` : ''}
)} {/* Actions */}
pgTrack('playground_view_docs_clicked', pgEpMeta(id))} style={{ ...pgBtn(false), textDecoration: 'none', display: 'inline-flex' }}> View docs →
{/* Response JSON (collapsed peek) */}
Show raw response JSON
); }; const pgBtn = (primary) => ({ fontFamily: wf.sans, fontSize: 13, fontWeight: 500, padding: '8px 14px', borderRadius: 8, border: `1px solid ${primary ? 'var(--accent)' : PG_DARK.line}`, background: primary ? 'var(--accent)' : PG_DARK.panel, color: primary ? '#fff' : PG_DARK.ink, cursor: 'pointer', }); window.Playground = Playground; window.pgEpMeta = pgEpMeta; window.pgTrack = pgTrack;