chore: update deps, fix util._extend deprecation, improve SRT/VTT testing

- Bump all deps to latest (react 19.2.8, tailwind 4.3.3, prettier 3.9.6, etc.);
  TypeScript held at 5.x since 7.x is a compiler major with no benefit here
- http-proxy-middleware 3 -> 4 replaces unmaintained http-proxy with httpxy,
  removing the util._extend (DEP0060) deprecation warning in gatsby develop
- Only send diarize/timestamp_granularities when they apply
  (timestamp_granularities is only valid with response_format=verbose_json),
  so requests test exactly what was selected
- Displayed cURL now uses GATSBY_LITELLM_API_URL instead of a hardcoded host,
  and mirrors the conditional params
- Add SRT/VTT structural validation (header, timestamps, sequential cue
  numbering) with a pass/fail badge and a download button on both result
  panels, covered by node:test
- Update chat model option to claude-sonnet-4-6
- Ignore *.mp3 sample files

Author: dan2k3k4

.gitignore

@@ -67,3 +67,6 @@ yarn-error.log
 .pnp.js
 # Yarn Integrity file
 .yarn-integrity
+
+# Local audio samples (too large for git)
+*.mp3

package.json

@@ -6,8 +6,8 @@
   "author": "amazeeio",
   "dependencies": {
     "gatsby": "^5.16.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "scripts": {
     "build": "gatsby build",
@@ -16,19 +16,19 @@
     "start": "gatsby develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"No tests written yet\" && exit 1"
+    "test": "node --test src/services/*.test.ts"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.3.1",
-    "@types/node": "^25.9.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "autoprefixer": "^10.5.0",
+    "@tailwindcss/postcss": "^4.3.3",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "autoprefixer": "^10.5.4",
     "gatsby-plugin-postcss": "^6.16.0",
-    "http-proxy-middleware": "^3.0.6",
-    "postcss": "^8.5.15",
-    "prettier": "^3.8.4",
-    "tailwindcss": "^4.3.1",
+    "http-proxy-middleware": "^4.2.0",
+    "postcss": "^8.5.26",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3"
   }
 }

pnpm-lock.yaml

@@ -1,22 +1,64 @@
 import React from 'react';
 
+import { validateSubtitle, SubtitleFormat } from '../services/subtitle';
+
 interface TranslationResultProps {
   transcription: string;
   translation: string;
   isTranscribing: boolean;
   isTranslating: boolean;
   transcribeModel: string;
   translateModel: string;
+  responseFormat: string;
 }
 
+const downloadText = (text: string, filename: string) => {
+  const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
+const SubtitleTools: React.FC<{ content: string; format: SubtitleFormat; filename: string }> = ({
+  content,
+  format,
+  filename,
+}) => {
+  const error = validateSubtitle(content, format);
+  return (
+    <div className="mt-2 flex items-center gap-3 text-xs">
+      {error ? (
+        <span className="px-2 py-0.5 rounded bg-red-100 text-red-800 border border-red-200" title={error}>
+          ✗ Invalid {format.toUpperCase()}: {error}
+        </span>
+      ) : (
+        <span className="px-2 py-0.5 rounded bg-green-100 text-green-800 border border-green-200">
+          ✓ Valid {format.toUpperCase()}
+        </span>
+      )}
+      <button
+        onClick={() => downloadText(content, filename)}
+        className="underline text-indigo-600 hover:text-indigo-800 cursor-pointer"
+      >
+        Download .{format}
+      </button>
+    </div>
+  );
+};
+
 export const TranslationResult: React.FC<TranslationResultProps> = ({
   transcription,
   translation,
   isTranscribing,
   isTranslating,
   transcribeModel,
   translateModel,
+  responseFormat,
 }) => {
+  const subtitleFormat =
+    responseFormat === 'srt' || responseFormat === 'vtt' ? (responseFormat as SubtitleFormat) : null;
 
   return (
     <div className="w-full space-y-6 grid grid-cols-2 gap-6">
@@ -33,6 +75,13 @@ export const TranslationResult: React.FC<TranslationResultProps> = ({
             )}
           </h3>
           <p className="mt-1 max-w-2xl text-sm text-gray-500">Transcribed via "{transcribeModel}" model.</p>
+          {subtitleFormat && transcription && !isTranscribing && (
+            <SubtitleTools
+              content={transcription}
+              format={subtitleFormat}
+              filename={`transcription.${subtitleFormat}`}
+            />
+          )}
         </div>
         <div className="px-4 py-5 sm:p-6 text-gray-800 whitespace-pre-wrap min-h-[100px]">
           {isTranscribing ? (
@@ -59,6 +108,13 @@ export const TranslationResult: React.FC<TranslationResultProps> = ({
             )}
           </h3>
           <p className="mt-1 max-w-2xl text-sm text-indigo-500">Target language text result via "{translateModel}" model.</p>
+          {subtitleFormat && translation && !isTranslating && (
+            <SubtitleTools
+              content={translation}
+              format={subtitleFormat}
+              filename={`translation.${subtitleFormat}`}
+            />
+          )}
         </div>
         <div className="px-4 py-5 sm:p-6 text-gray-800 whitespace-pre-wrap min-h-[100px]">
           {isTranslating ? (

src/components/TranslationResult.tsx

@@ -52,15 +52,21 @@ const IndexPage = () => {
     setTranscription('');
     setTranslation('');
 
-    // Construct a representation of the curl request for transparency
-    const curlCommand = `curl -X POST "https://llm.us104.amazee.ai/v1/audio/transcriptions" \\
-  -H "Authorization: Bearer [GATSBY_LITELLM_API_KEY]" \\
-  -F "file=@${file.name}" \\
-  -F "model=${transcribeModel}" \\
-  -F "response_format=${responseFormat}" \\
-  -F "diarize=${diarize}" \\
-  ${timestampGranularity.map(g => `-F "timestamp_granularities[]=${g}"`).join(' \\\n  ')} \\
-  ${sourceLang ? `-F "language=${sourceLang}"` : ''}`;
+    // Construct a representation of the curl request for transparency.
+    // Mirrors llmService.ts: optional params only included when they apply.
+    const apiBase = process.env.GATSBY_LITELLM_API_URL || 'https://llm.us104.amazee.ai';
+    const curlCommand = [
+      `curl -X POST "${apiBase}/v1/audio/transcriptions"`,
+      `-H "Authorization: Bearer [GATSBY_LITELLM_API_KEY]"`,
+      `-F "file=@${file.name}"`,
+      `-F "model=${transcribeModel}"`,
+      ...(diarize ? [`-F "diarize=true"`] : []),
+      ...(responseFormat === 'verbose_json'
+        ? timestampGranularity.map(g => `-F "timestamp_granularities[]=${g}"`)
+        : []),
+      `-F "response_format=${responseFormat}"`,
+      ...(sourceLang ? [`-F "language=${sourceLang}"`] : []),
+    ].join(' \\\n  ');
 
     setLastCurlRequest(curlCommand);
     setIsCurlExpanded(true);
@@ -76,7 +82,7 @@ const IndexPage = () => {
       setIsTranslating(true);
 
       // Construct a representation of the curl request for translation
-      const translateCurl = `curl -X POST "https://llm.us104.amazee.ai/v1/chat/completions" \\
+      const translateCurl = `curl -X POST "${apiBase}/v1/chat/completions" \\
   -H "Content-Type: application/json" \\
   -H "Authorization: Bearer [GATSBY_LITELLM_API_KEY]" \\
   -d '{
@@ -248,7 +254,7 @@ const IndexPage = () => {
                   onChange={(e) => setChatModel(e.target.value)}
                 >
                   <option value="chat">chat</option>
-                  <option value="claude-4-5-sonnet">claude-4-5-sonnet</option>
+                  <option value="claude-sonnet-4-6">claude-sonnet-4-6</option>
                 </select>
               </div>
 
@@ -360,6 +366,7 @@ const IndexPage = () => {
               isTranslating={isTranslating}
               transcribeModel={transcribeModel}
               translateModel={chatModel}
+              responseFormat={responseFormat}
             />
           </div>
         </div>

src/pages/index.tsx

@@ -22,10 +22,16 @@ export const transcribeAudio = async (
   formData.append('file', file);
   formData.append('model', model);
 
-  // diarize and timestamp_granularities support
-  formData.append('diarize', diarize.toString());
-  timestampGranularities.forEach(g => formData.append('timestamp_granularities[]', g));
-  
+  // Only send optional params when they apply, so the request tests exactly
+  // what was selected. timestamp_granularities is only valid with
+  // response_format=verbose_json per the transcription API.
+  if (diarize) {
+    formData.append('diarize', 'true');
+  }
+  if (responseFormat === 'verbose_json') {
+    timestampGranularities.forEach(g => formData.append('timestamp_granularities[]', g));
+  }
+
   formData.append('response_format', responseFormat);
 
   if (sourceLanguage) {

src/services/llmService.ts

@@ -0,0 +1,30 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { validateSubtitle } from './subtitle.ts';
+
+const srt = `1
+00:00:01,000 --> 00:00:03,500
+Hello world
+
+2
+00:00:04,000 --> 00:00:06,000
+Second line`;
+
+const vtt = `WEBVTT
+
+00:00:01.000 --> 00:00:03.500
+Hello world
+
+00:00:04.000 --> 00:00:06.000
+Second line`;
+
+test('valid srt passes', () => assert.equal(validateSubtitle(srt, 'srt'), null));
+test('valid vtt passes', () => assert.equal(validateSubtitle(vtt, 'vtt'), null));
+test('empty output fails', () => assert.match(validateSubtitle('  ', 'srt')!, /empty/));
+test('vtt without header fails', () =>
+  assert.match(validateSubtitle(vtt.replace('WEBVTT\n\n', ''), 'vtt')!, /WEBVTT/));
+test('no cues fails', () => assert.match(validateSubtitle('just some text', 'srt')!, /cues/));
+test('wrong timestamp separator fails', () =>
+  assert.match(validateSubtitle(srt.replaceAll(',', '.'), 'srt')!, /timestamp/i));
+test('broken numbering fails', () =>
+  assert.match(validateSubtitle(srt.replace('\n2\n', '\n3\n'), 'srt')!, /numbering/));

src/services/subtitle.test.ts

@@ -0,0 +1,45 @@
+export type SubtitleFormat = 'srt' | 'vtt';
+
+const TIMESTAMP = {
+  srt: /^\d{2}:\d{2}:\d{2},\d{3} --> \d{2}:\d{2}:\d{2},\d{3}/,
+  vtt: /^(\d{2,}:)?\d{2}:\d{2}\.\d{3} --> (\d{2,}:)?\d{2}:\d{2}\.\d{3}/,
+};
+
+/**
+ * Validates SRT/VTT structure: header, timestamp lines, and (for SRT)
+ * sequential cue numbering. Returns null if valid, otherwise a message
+ * describing the first problem found.
+ */
+export const validateSubtitle = (text: string, format: SubtitleFormat): string | null => {
+  const trimmed = text.trim();
+  if (!trimmed) return 'Output is empty';
+  if (format === 'vtt' && !trimmed.startsWith('WEBVTT')) {
+    return 'Missing "WEBVTT" header on first line';
+  }
+
+  const lines = trimmed.split(/\r?\n/);
+  const cueIndexes = lines.reduce<number[]>((acc, line, i) => {
+    if (line.includes('-->')) acc.push(i);
+    return acc;
+  }, []);
+  if (cueIndexes.length === 0) return 'No timestamp cues ("-->") found';
+
+  for (const i of cueIndexes) {
+    if (!TIMESTAMP[format].test(lines[i].trim())) {
+      return `Malformed ${format.toUpperCase()} timestamp: "${lines[i].trim().slice(0, 50)}"`;
+    }
+  }
+
+  if (format === 'srt') {
+    let expected = 1;
+    for (const i of cueIndexes) {
+      const num = Number(lines[i - 1]?.trim());
+      if (num !== expected) {
+        return `Cue numbering broken: expected ${expected}, got "${(lines[i - 1] ?? '').trim()}"`;
+      }
+      expected++;
+    }
+  }
+
+  return null;
+};