English translation mode, ms-precision time range + duration UI, drop Fly from docs

DEPLOY.md

@@ -38,16 +38,7 @@ Free CPU Spaces give 16 GB RAM and a stable public URL like
 4. Add env var `SARVAM_API_KEY`. Render injects `PORT`; the container already
    honors it. Deploy and share the `*.onrender.com` URL.
 
-## Option C — Fly.io (Docker, good for long requests)
-
-```bash
-fly launch --no-deploy          # generates fly.toml from the Dockerfile
-fly secrets set SARVAM_API_KEY=your_key
-fly scale memory 2048           # give it 2 GB
-fly deploy
-```
-
-## Option D — Instant link, zero deploy (temporary)
+## Option C — Instant link, zero deploy (temporary)
 
 Fastest way to show a client *right now*, while your server runs locally:
 

backend/main.py

@@ -102,8 +102,8 @@ async def transcribe(
         "speakers": speakers,
         "segments": [
             {
-                "start": round(s.start, 2),
-                "end": round(s.end, 2),
+                "start": round(s.start, 3),
+                "end": round(s.end, 3),
                 "speaker_id": s.speaker_id,
                 "text": s.text,
                 "gender": speakers.get(s.speaker_id, {}).get("label", "uncertain"),

backend/transcribe.py

@@ -36,7 +36,8 @@ def transcribe_with_diarization(
 
     job = client.speech_to_text_job.create_job(
         model="saaras:v3",
-        mode="verbatim",
+        # "translate" makes Saaras output English regardless of the spoken language.
+        mode="translate",
         language_code="unknown",
         with_diarization=True,
         num_speakers=num_speakers,

frontend/index.html

@@ -156,7 +156,7 @@
 
   .transcript { display: flex; flex-direction: column; gap: 10px; }
   .seg {
-    display: grid; grid-template-columns: 58px 1fr; gap: 16px; padding: 15px 18px; position: relative;
+    display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 15px 18px; position: relative;
     border-radius: 16px; border: 1px solid var(--stroke); cursor: pointer; transition: .18s cubic-bezier(.2,.8,.2,1);
     background: var(--glass-2); overflow: hidden;
   }
@@ -164,7 +164,14 @@
   .seg:hover { border-color: var(--stroke-strong); transform: translateX(2px); }
   .seg.active { border-color: rgba(168,85,247,.5); background: rgba(168,85,247,.09); box-shadow: 0 8px 24px rgba(168,85,247,.18); }
   .seg.active::before { background: var(--grad); }
-  .seg .time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); padding-top: 3px; font-weight: 500; }
+  .seg .time { font-variant-numeric: tabular-nums; padding-top: 2px;
+    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.25; }
+  .seg .time .t-start { color: var(--text); font-weight: 700; font-size: 12.5px; letter-spacing: .01em; transition: color .18s; }
+  .seg .time .t-end { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 4px; }
+  .seg .time .t-end::before { content: "→"; opacity: .45; font-size: 10px; }
+  .seg .time .t-dur { margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--cyan);
+    background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.22); padding: 1.5px 8px; border-radius: 999px; }
+  .seg.active .time .t-start { color: var(--violet); }
   .seg .who { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
   .seg .who b { font-family: "Space Grotesk"; font-size: 12.5px; }
   .seg .txt { font-size: 15px; line-height: 1.55; color: #e9eaf4; }
@@ -241,6 +248,13 @@
     const sec = Math.floor(s % 60);
     return `${m}:${sec.toString().padStart(2, "0")}`;
   };
+  // m:ss.mmm — millisecond precision (the resolution Sarvam actually provides).
+  const fmtPrecise = (s) => {
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    const ms = Math.round((s - Math.floor(s)) * 1000);
+    return `${m}:${sec.toString().padStart(2, "0")}.${ms.toString().padStart(3, "0")}`;
+  };
 
   drop.addEventListener("click", () => fileInput.click());
   ["dragover", "dragenter"].forEach(e =>
@@ -326,8 +340,13 @@
       el.className = "seg";
       el.dataset.start = seg.start;
       el.dataset.end = seg.end;
+      const dur = Math.max(0, seg.end - seg.start);
       el.innerHTML = `
-        <div class="time">${fmt(seg.start)}</div>
+        <div class="time" title="${seg.start}s – ${seg.end}s (${dur.toFixed(3)}s)">
+          <span class="t-start">${fmtPrecise(seg.start)}</span>
+          <span class="t-end">${fmtPrecise(seg.end)}</span>
+          <span class="t-dur">${dur.toFixed(2)}s</span>
+        </div>
         <div class="body">
           <div class="who">
             <span class="dot" style="background:${c}; box-shadow:0 0 10px ${c}88"></span>