Deploy Ekko v1 Tiny + PnC browser demo

app.js

@@ -72,6 +72,8 @@ const state = {
   pncFailed: false,
   pncInitializationRequested: false,
   pncRequestId: 0,
+  pncPending: null,
+  pncFormattedCount: 0,
   nextSegmentId: 0,
   rawSegments: [],
   segments: [],
@@ -92,7 +94,7 @@ const state = {
 };
 
 const worker = new Worker(signedAsset("worker.js?v=20260927-2"));
-const pncWorker = new Worker(signedAsset("pnc-worker.js?v=20261001-1"));
+const pncWorker = new Worker(signedAsset("pnc-worker.js?v=20261001-2"));
 
 function setStatus(text, detail = "", kind = "loading") {
   elements.statusText.textContent = text;
@@ -156,6 +158,7 @@ function readConversationHistory() {
         rawSegments: copySegments(record.rawSegments || record.segments),
         segments: copySegments(record.segments),
         punctuationApplied: Boolean(record.punctuationApplied),
+        formattedCount: Number.isInteger(record.formattedCount) ? record.formattedCount : null,
       }));
   } catch (error) {
     console.warn("Kunne ikke læse lokal samtalehistorik", error);
@@ -245,7 +248,8 @@ function writeConversationHistory() {
 }
 
 function persistCurrentConversation() {
-  const text = transcriptText();
+  const finalizedSegments = state.segments.filter((segment) => segment.id !== "live-preview");
+  const text = finalizedSegments.map((segment) => segment.text).filter(Boolean).join(" ").trim();
   if (!state.currentConversationId || !text) return;
   const timestamp = new Date().toISOString();
   const record = {
@@ -254,8 +258,9 @@ function persistCurrentConversation() {
     updatedAt: timestamp,
     text,
     rawSegments: copySegments(state.rawSegments),
-    segments: copySegments(state.segments),
+    segments: copySegments(finalizedSegments),
     punctuationApplied: state.punctuationApplied,
+    formattedCount: state.pncFormattedCount,
   };
   state.history = [record, ...state.history.filter((item) => item.id !== record.id)];
   writeConversationHistory();
@@ -265,11 +270,16 @@ function loadConversation(recordId) {
   const record = state.history.find((item) => item.id === recordId);
   if (!record || state.recording || state.stopping) return;
   state.pncRequestId += 1;
+  state.pncPending = null;
   state.currentConversationId = record.id;
   state.currentConversationCreatedAt = record.createdAt;
   state.rawSegments = copySegments(record.rawSegments);
-  state.punctuationApplied = record.punctuationApplied;
-  state.segments = copySegments(record.punctuationApplied ? record.segments : record.rawSegments);
+  state.pncFormattedCount = record.formattedCount === null
+    ? (record.punctuationApplied ? state.rawSegments.length : 0)
+    : Math.max(0, Math.min(record.formattedCount, state.rawSegments.length));
+  state.punctuationApplied = state.pncFormattedCount === state.rawSegments.length;
+  state.segments = copySegments(state.pncFormattedCount ? record.segments : record.rawSegments)
+    .filter((segment) => segment.id !== "live-preview");
   state.nextSegmentId = state.segments.length;
   elements.app.classList.add("session-active");
   document.body.classList.add("session-active");
@@ -366,6 +376,8 @@ function renderTranscript({animateNew = false} = {}) {
 
 function clearTranscript() {
   state.pncRequestId += 1;
+  state.pncPending = null;
+  state.pncFormattedCount = 0;
   state.nextSegmentId = 0;
   state.rawSegments = [];
   state.segments = [];
@@ -389,17 +401,55 @@ function ensurePunctuation() {
 }
 
 function requestPunctuation() {
-  if (state.pncFailed || !state.rawSegments.length) return;
+  if (state.pncFailed || state.pncPending || state.pncFormattedCount >= state.rawSegments.length) return;
   ensurePunctuation();
   state.pncRequestId += 1;
+  const start = state.pncFormattedCount;
+  const segments = state.rawSegments.slice(start);
+  const capitalizeFirst = start > 0 && /[.!?]["”’']*$/u.test(
+    state.segments[start - 1]?.text.trim() || "",
+  );
+  const contextWords = [];
+  for (let index = start - 1; index >= 0 && contextWords.length < 12; index -= 1) {
+    const words = state.rawSegments[index].text.trim().split(/\s+/).filter(Boolean);
+    contextWords.unshift(...words.slice(-Math.max(0, 12 - contextWords.length)));
+  }
+  state.pncPending = {requestId: state.pncRequestId, start, ids: segments.map((segment) => segment.id)};
   pncWorker.postMessage({
     type: "punctuate",
     requestId: state.pncRequestId,
     configUrl: signedAsset("model-config.json"),
-    segments: state.rawSegments,
+    contextWords,
+    capitalizeFirst,
+    segments,
   });
 }
 
+function applyPunctuationResult(message) {
+  const pending = state.pncPending;
+  if (!pending || message.requestId !== pending.requestId) return;
+  state.pncPending = null;
+  if (!Array.isArray(message.segments)
+    || message.segments.length !== pending.ids.length
+    || message.segments.some((segment, index) => segment.id !== pending.ids[index]
+      || state.rawSegments[pending.start + index]?.id !== segment.id)) {
+    state.pncFailed = true;
+    elements.pncStatus.textContent = "Tegnsætning utilgængelig";
+    console.error("PnC returnerede segmenter i uventet rækkefølge");
+    return;
+  }
+  const formatted = new Map(message.segments.map((segment) => [segment.id, segment]));
+  const displayed = new Map(state.segments.map((segment) => [segment.id, segment]));
+  state.segments = state.rawSegments.map((segment) =>
+    formatted.get(segment.id) || displayed.get(segment.id) || segment);
+  if (state.previewSegment) state.segments.push(state.previewSegment);
+  state.pncFormattedCount = pending.start + message.segments.length;
+  state.punctuationApplied = state.pncFormattedCount === state.rawSegments.length;
+  renderTranscript();
+  persistCurrentConversation();
+  requestPunctuation();
+}
+
 class StreamingLinearResampler {
   constructor(sourceRate, targetRate) {
     this.sourceRate = sourceRate;
@@ -671,11 +721,7 @@ pncWorker.onmessage = (event) => {
     elements.pncStatus.textContent = `Klar · ${formatBytes(message.bytes)}`;
     requestPunctuation();
   } else if (message.type === "pnc-result") {
-    if (message.requestId !== state.pncRequestId) return;
-    state.punctuationApplied = true;
-    state.segments = [...message.segments, ...(state.previewSegment ? [state.previewSegment] : [])];
-    renderTranscript();
-    persistCurrentConversation();
+    applyPunctuationResult(message);
   } else if (message.type === "pnc-error") {
     state.pncFailed = true;
     elements.pncStatus.textContent = "Tegnsætning utilgængelig";

index.html

@@ -195,6 +195,6 @@
       </form>
     </dialog>
 
-    <script src="app.js?v=20261001-1" type="module"></script>
+    <script src="app.js?v=20261001-2" type="module"></script>
   </body>
 </html>

pnc-worker.js

@@ -285,16 +285,19 @@ async function punctuateWords(words) {
   return output;
 }
 
-async function punctuateSegments(segments) {
+async function punctuateSegments(segments, contextWords = [], capitalizeFirst = false) {
   const counts = [];
-  const sourceWords = [];
+  const sourceWords = [...contextWords];
   segments.forEach((segment) => {
     const words = String(segment.text || "").trim().split(/\s+/).filter(Boolean);
     counts.push(words.length);
     sourceWords.push(...words);
   });
   const renderedWords = stabilizeRenderedWords(await punctuateWords(sourceWords));
-  let offset = 0;
+  if (capitalizeFirst && renderedWords.length > contextWords.length) {
+    renderedWords[contextWords.length] = capitalizeInitial(renderedWords[contextWords.length]);
+  }
+  let offset = contextWords.length;
   return segments.map((segment, segmentIndex) => {
     const start = offset;
     const rendered = renderedWords.slice(start, start + counts[segmentIndex]);
@@ -321,7 +324,9 @@ async function drainRequests() {
       const request = pendingRequest;
       pendingRequest = null;
       await initialization;
-      const segments = await punctuateSegments(request.segments);
+      const segments = await punctuateSegments(
+        request.segments, request.contextWords, request.capitalizeFirst,
+      );
       self.postMessage({type: "pnc-result", requestId: request.requestId, segments});
     }
   } catch (error) {