fix: changes to update pipecat version to 0.0.100 (#122)

* feat: add stt evals

* add smart turn as provider

* chore: remove deprecations

* chore: format files

* fix: remove deprecated UserIdleProcessor

* fix: remove deprecated TranscriptProcessor

* chore: update pipecat submodule

* feat: add evals visualisation

* fix: trigger llm generation on client connected and pipeline started

* chore: update pipecat

* chore: update pipecat submodule

* Add tests

* fix: slow loading of workflow page

* chore: update pipecat submodule

* Show version after release

* Fixes #99

* fix: provider check for websocket connection

* Fixes #107

* Fix #96

* chore: fix documentation

* fix: cloudonix campaign call error

---------

Co-authored-by: Sabiha Khan <sabihak89@gmail.com>

evals/visualizer/src/app/api/audio/[filename]/route.ts

@@ -0,0 +1,42 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const AUDIO_DIR = path.join(process.cwd(), "..", "stt", "audio");
+
+const MIME_TYPES: Record<string, string> = {
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".m4a": "audio/mp4",
+  ".ogg": "audio/ogg",
+  ".webm": "audio/webm",
+};
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ filename: string }> }
+) {
+  try {
+    const { filename } = await params;
+    const filePath = path.join(AUDIO_DIR, filename);
+
+    if (!fs.existsSync(filePath)) {
+      return NextResponse.json({ error: "Audio file not found" }, { status: 404 });
+    }
+
+    const ext = path.extname(filename).toLowerCase();
+    const contentType = MIME_TYPES[ext] || "application/octet-stream";
+
+    const fileBuffer = fs.readFileSync(filePath);
+
+    return new NextResponse(fileBuffer, {
+      headers: {
+        "Content-Type": contentType,
+        "Content-Length": fileBuffer.length.toString(),
+      },
+    });
+  } catch (error) {
+    console.error("Error serving audio:", error);
+    return NextResponse.json({ error: "Failed to serve audio" }, { status: 500 });
+  }
+}

evals/visualizer/src/app/api/results/[id]/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+
+const RESULTS_DIR = path.join(process.cwd(), "..", "stt", "results");
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const filePath = path.join(RESULTS_DIR, `${id}.json`);
+
+    if (!fs.existsSync(filePath)) {
+      return NextResponse.json({ error: "Result not found" }, { status: 404 });
+    }
+
+    const content = fs.readFileSync(filePath, "utf-8");
+    const data = JSON.parse(content);
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error("Error reading result:", error);
+    return NextResponse.json({ error: "Failed to read result" }, { status: 500 });
+  }
+}

evals/visualizer/src/app/api/results/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import { ResultSummary, EventCaptureResult } from "@/types";
+
+const RESULTS_DIR = path.join(process.cwd(), "..", "stt", "results");
+
+export async function GET() {
+  try {
+    if (!fs.existsSync(RESULTS_DIR)) {
+      return NextResponse.json([]);
+    }
+
+    const files = fs.readdirSync(RESULTS_DIR).filter((f) => f.endsWith(".json"));
+    const results: ResultSummary[] = [];
+
+    for (const file of files) {
+      try {
+        const filePath = path.join(RESULTS_DIR, file);
+        const content = fs.readFileSync(filePath, "utf-8");
+        const data: EventCaptureResult = JSON.parse(content);
+
+        results.push({
+          id: file.replace(".json", ""),
+          audio_file: data.audio_file,
+          provider: data.provider,
+          duration: data.duration,
+          created_at: data.created_at,
+          event_count: data.events.length,
+        });
+      } catch {
+        console.error(`Failed to parse ${file}`);
+      }
+    }
+
+    // Sort by created_at descending
+    results.sort(
+      (a, b) =>
+        new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+    );
+
+    return NextResponse.json(results);
+  } catch (error) {
+    console.error("Error reading results:", error);
+    return NextResponse.json({ error: "Failed to read results" }, { status: 500 });
+  }
+}

evals/visualizer/src/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

evals/visualizer/src/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "STT Event Visualizer",
+  description: "Visualize WebSocket events from STT providers",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

evals/visualizer/src/app/page.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ResultSummary } from "@/types";
+
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+function formatDate(isoString: string): string {
+  const date = new Date(isoString);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+const PROVIDER_COLORS: Record<string, string> = {
+  deepgram: "bg-blue-500/20 text-blue-300",
+  "deepgram-flux": "bg-green-500/20 text-green-300",
+  speechmatics: "bg-purple-500/20 text-purple-300",
+};
+
+export default function Home() {
+  const [results, setResults] = useState<ResultSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchResults() {
+      try {
+        const response = await fetch("/api/results");
+        if (!response.ok) {
+          throw new Error("Failed to fetch results");
+        }
+        const data = await response.json();
+        setResults(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchResults();
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white">
+      <div className="max-w-4xl mx-auto px-6 py-12">
+        <header className="mb-12">
+          <h1 className="text-3xl font-bold">STT Event Visualizer</h1>
+          <p className="text-zinc-400 mt-2">
+            Visualize captured WebSocket events from STT providers
+          </p>
+        </header>
+
+        {loading && (
+          <div className="flex items-center justify-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+          </div>
+        )}
+
+        {error && (
+          <div className="bg-red-500/20 text-red-300 p-4 rounded-lg">
+            {error}
+          </div>
+        )}
+
+        {!loading && !error && results.length === 0 && (
+          <div className="text-center py-12 text-zinc-500">
+            <p className="text-lg mb-4">No results found</p>
+            <p className="text-sm">
+              Run the event capture script to generate results:
+            </p>
+            <code className="block mt-2 bg-zinc-800 p-3 rounded text-zinc-300 text-sm">
+              python -m evals.stt.event_capture audio/multi_speaker.m4a --provider deepgram
+            </code>
+          </div>
+        )}
+
+        {!loading && !error && results.length > 0 && (
+          <div className="space-y-3">
+            {results.map((result) => (
+              <Link
+                key={result.id}
+                href={`/view/${result.id}`}
+                className="block bg-zinc-900 hover:bg-zinc-800 rounded-lg p-4 transition-colors"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-3">
+                      <span className="font-medium">{result.audio_file}</span>
+                      <span
+                        className={`text-xs px-2 py-0.5 rounded ${
+                          PROVIDER_COLORS[result.provider] ||
+                          "bg-zinc-700 text-zinc-300"
+                        }`}
+                      >
+                        {result.provider}
+                      </span>
+                    </div>
+                    <div className="text-sm text-zinc-500">
+                      {formatDate(result.created_at)}
+                    </div>
+                  </div>
+                  <div className="text-right space-y-1">
+                    <div className="text-sm text-zinc-400">
+                      {formatDuration(result.duration)}
+                    </div>
+                    <div className="text-xs text-zinc-500">
+                      {result.event_count} events
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

evals/visualizer/src/app/view/[id]/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+import { EventCaptureResult } from "@/types";
+import AudioPlayer from "@/components/AudioPlayer";
+import EventTimeline from "@/components/EventTimeline";
+import EventList from "@/components/EventList";
+
+const PROVIDER_COLORS: Record<string, string> = {
+  deepgram: "bg-blue-500/20 text-blue-300",
+  "deepgram-flux": "bg-green-500/20 text-green-300",
+  speechmatics: "bg-purple-500/20 text-purple-300",
+};
+
+export default function ViewPage() {
+  const params = useParams();
+  const id = params.id as string;
+
+  const [result, setResult] = useState<EventCaptureResult | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  useEffect(() => {
+    async function fetchResult() {
+      try {
+        const response = await fetch(`/api/results/${id}`);
+        if (!response.ok) {
+          if (response.status === 404) {
+            throw new Error("Result not found");
+          }
+          throw new Error("Failed to fetch result");
+        }
+        const data = await response.json();
+        setResult(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    if (id) {
+      fetchResult();
+    }
+  }, [id]);
+
+  const handleTimeUpdate = useCallback((time: number) => {
+    setCurrentTime(time);
+  }, []);
+
+  const handlePlayingChange = useCallback((playing: boolean) => {
+    setIsPlaying(playing);
+  }, []);
+
+  const handleSeek = useCallback((time: number) => {
+    setCurrentTime(time);
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-zinc-950 text-white flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-zinc-950 text-white p-6">
+        <div className="max-w-4xl mx-auto">
+          <Link href="/" className="text-zinc-400 hover:text-white mb-4 inline-block">
+            &larr; Back to results
+          </Link>
+          <div className="bg-red-500/20 text-red-300 p-4 rounded-lg">{error}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!result) {
+    return null;
+  }
+
+  const audioUrl = `/api/audio/${result.audio_file}`;
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white">
+      <div className="max-w-7xl mx-auto px-6 py-6">
+        {/* Header */}
+        <header className="mb-6">
+          <Link href="/" className="text-zinc-400 hover:text-white mb-2 inline-block text-sm">
+            &larr; Back to results
+          </Link>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold">{result.audio_file}</h1>
+            <span
+              className={`text-sm px-2 py-0.5 rounded ${
+                PROVIDER_COLORS[result.provider] || "bg-zinc-700 text-zinc-300"
+              }`}
+            >
+              {result.provider}
+            </span>
+          </div>
+          {result.transcript && (
+            <p className="text-zinc-400 mt-2 text-sm line-clamp-2">
+              {result.transcript}
+            </p>
+          )}
+        </header>
+
+        {/* Main content */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Left column: Audio player and timeline */}
+          <div className="lg:col-span-2 space-y-4">
+            <AudioPlayer
+              audioUrl={audioUrl}
+              duration={result.duration}
+              currentTime={currentTime}
+              onTimeUpdate={handleTimeUpdate}
+              onPlayingChange={handlePlayingChange}
+            />
+
+            <EventTimeline
+              events={result.events}
+              duration={result.duration}
+              currentTime={currentTime}
+              onSeek={handleSeek}
+            />
+
+            {/* Transcript section */}
+            {result.transcript && (
+              <div className="bg-zinc-800 rounded-lg p-4">
+                <div className="text-sm text-zinc-400 font-medium mb-2">
+                  Final Transcript
+                </div>
+                <p className="text-zinc-300">{result.transcript}</p>
+              </div>
+            )}
+          </div>
+
+          {/* Right column: Event list */}
+          <div className="lg:col-span-1 h-[calc(100vh-12rem)]">
+            <EventList
+              events={result.events}
+              currentTime={currentTime}
+              onSeek={handleSeek}
+              provider={result.provider}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}