AWS Caption Editor (Post-Processing Tool)

AWS Caption Editor (Post-Processing Tool)

I built a Vue.js tool to post-process AWS Transcribe JSON output into editable captions. It displays transcripts with confidence-based highlighting, allows word edits, and exports VTT/SRT files. Useful for refining AI-generated captions for accuracy and accessibility in videos.

Problem / Context

AWS Transcribe provides JSON with timings and confidence scores, but editing requires manual processing. Needed a tool to visualize confidence, edit low-confidence words, and generate standard caption formats.

Constraints / Goals

  • Load AWS JSON: parse items, alternatives, confidence.
  • Visualize: highlight low-confidence words.
  • Edit: click to modify words.
  • Export: VTT/SRT with custom line lengths.
  • Stats: show confidence metrics.

Core Approach

Vue app loads JSON, computes transcript with highlighting, generates VTT from timings.

Loading and Parsing

Assumes awsjson from file input.

Transcript Display

<template v-for="(item, index) in awsjson.results.items">
  <template v-if="item.alternatives[0].content != '' && Number(item.alternatives[0].confidence) >= Number(slidercurrent)">
    {{item.alternatives[0].content}}
  </template>
  <span v-on:click="editword(index)" v-if="Number(item.alternatives[0].confidence) < Number(slidercurrent)" class="bg-warning">
    {{item.alternatives[0].content}}
  </span>
</template>

Confidence Filtering

Slider to set threshold; highlights below it.

Editing Words

Click low-confidence word to edit.

VTT Generation

Processes items into cue blocks with timings.

Export

Download SRT/VTT files.

Results / Impact

  • Improves caption accuracy.
  • Speeds up post-transcription editing.
  • Enhances accessibility.

Trade-offs / Limitations

  • Requires AWS JSON format.
  • No audio sync.
  • Client-side only.

Next Steps

  • Integrate with AWS API.
  • Auto-suggestions for edits.
  • Multi-language support.

Tech Summary

Vue.js, Bootstrap, JSON parsing, file download.

Summary Pattern Example

Problem: Edit AWS Transcribe output for captions.
Approach: Vue tool with confidence highlighting and VTT export.
Result: Efficient post-processing for accurate video captions.

Portfolio awstranscriptioncaptionsvttsrtjavascriptvuebootstrapaccessibilityvideoconfidence-filtering