Merge pull request #2 from cdreetz/streaming_eval

Streaming eval

README.md

@@ -10,14 +10,31 @@ Compare prompts
 
 
 
-## TODO
+## TODO v0.1.0
 - ~~model/provider selection dropdown~~
 - ~~remove selected model button~~
 - ~~initial results table skeleton~~
 - ~~info button top left on eval page~~
 - info button top left on compare page
-- parallel requests and streaming for compare page
-- results table outputs should be equal width per model
+- info button top left on transcription page
+- ~~header component with the nav dropdown and github icon link~~
+- ? or just add the github link to the dropdown?
+- ~~parallel requests and streaming for compare page~~
+- ~~results table outputs should be equal width per model~~
 - results table resizable
+- ~~Github logo link to repo~~
+- ~~fix margin of header icons~~
+- ~~add all model options to the dual llm comparison chat~~
+
+
+- about page
+- feedback / submit bug / feature request 
+
+- ~~stt page with Groq whisper~~
+- transcription optional arguments
+
+v0.2.0
+- auth / sign up / login pages
+- save prompt collection
 
 

app/api/chat/anthropic/route.ts

@@ -0,0 +1,16 @@
+import { anthropic } from '@ai-sdk/anthropic';
+import { streamText } from 'ai';
+
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages, model } = await req.json();
+
+  const result = await streamText({
+    model: anthropic(model || 'claude-3-opus-20240229'),
+    messages,
+  });
+
+  return result.toAIStreamResponse();
+}
+

app/api/transcribe/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Groq from 'groq-sdk';
+
+const groq = new Groq({
+  apiKey: process.env.GROQ_API_KEY,
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+
+    if (!file) {
+      return NextResponse.json({ error: 'No file provided' }, { status: 400 });
+    }
+
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    // Extract optional parameters from formData
+    const prompt = formData.get('prompt') as string | null;
+    const responseFormat = formData.get('responseFormat') as string | null;
+    const temperature = formData.get('temperature') as string | null;
+    const language = formData.get('language') as string | null;
+    const model = formData.get('model') as string | null;
+
+    const transcriptionOptions: any = {
+      file: new File([buffer], file.name, { type: file.type }),
+      model: model === 'distil-whisper-large-v3-en' ? 'distil-whisper-large-v3-en' : 'whisper-large-v3',
+    };
+
+    // Add optional parameters if provided
+    if (prompt) transcriptionOptions.prompt = prompt;
+    if (responseFormat) transcriptionOptions.response_format = responseFormat;
+    if (temperature) transcriptionOptions.temperature = parseFloat(temperature);
+    if (language) transcriptionOptions.language = language;
+
+    const transcription = await groq.audio.transcriptions.create(transcriptionOptions);
+
+    // Handle different response formats
+    if (responseFormat === 'verbose_json') {
+      return NextResponse.json(transcription);
+    } else if (responseFormat === 'text') {
+      return new NextResponse(transcription.text, { 
+        headers: { 'Content-Type': 'text/plain' }
+      });
+    } else {
+      // Default to JSON response with just the text
+      return NextResponse.json({ text: transcription.text });
+      //return NextResponse.json({ text: JSON.stringify(transcription) });
+    }
+  } catch (error) {
+    console.error('Transcription error:', error);
+    return NextResponse.json({ error: 'Transcription failed' }, { status: 500 });
+  }
+}

app/chat-with-comparison/page.tsx

@@ -7,6 +7,7 @@ import { ProviderSelect } from '../../components/ProviderSelect';
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import InfoButton from '@/components/InfoButton';
 
 export default function DualChat() {
   const [provider1, setProvider1] = useState<Provider>('openai');
@@ -32,7 +33,16 @@ export default function DualChat() {
   };
 
   return (
-    <div className="container mx-auto p-4">
+    <main className="container mx-auto p-4">
+      <InfoButton
+        title="LLM Evaluations"
+        className="absolute top-4 left-4 z-10"
+      >
+        <ol className="list-decimal pl-4">
+          <li>Select two models you want to compare</li>
+          <li>Start chatting with the models like you normally would</li>
+        </ol>
+      </InfoButton>
       <h1 className="text-3xl font-bold mb-6">Dual Model Chat Comparison</h1>
       <div className="grid grid-cols-2 gap-4 mb-4">
         {[
@@ -50,7 +60,7 @@ export default function DualChat() {
               }} 
               onModelChange={chatConfig.setModel}
             />
-            <ScrollArea className="h-[500px] mt-4">
+            <ScrollArea className="h-[400px] mt-4">
               {chatConfig.chat.messages.map((m) => (
                 <div key={m.id} className="whitespace-pre-wrap mb-4">
                   <strong>{m.role === 'user' ? 'User: ' : 'AI: '}</strong>
@@ -72,6 +82,6 @@ export default function DualChat() {
           <Button type="submit">Send</Button>
         </div>
       </form>
-    </div>
+    </main>
   );
 }

app/layout.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import NavMenu from '@/components/NevMenu'
+import HeaderBar from '@/components/HeaderBar'
 import { Analytics } from "@vercel/analytics/react"
 
 const inter = Inter({ subsets: ["latin"] });
@@ -19,7 +19,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <NavMenu />
+        <HeaderBar />
         {children}
         <Analytics />
       </body>

app/page.tsx

@@ -8,6 +8,7 @@ import EvaluationButton from '@/components/EvaluationButton'
 import ResultsTable from '@/components/ResultsTable'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import InfoButton from '@/components/InfoButton';
+import { ScrollArea } from "@/components/ui/scroll-area"
 
 export type Provider = 'openai' | 'groq' | 'anthropic';
 
@@ -116,30 +117,41 @@ export default function Home() {
 
   return (
     <main className="container mx-auto p-4">
-      <InfoButton />
-      <h1 className="text-3xl font-bold mb-6 mt-10 mx-6">LLM Evaluations</h1>
+      <InfoButton
+        title="LLM Evaluations"
+        className="absolute top-4 left-4 z-10"
+      >
+        <ol className="list-decimal pl-4">
+          <li>Select the models you want to compare</li>
+          <li>Enter prompts you want to evaluate for</li>
+          <li>Click Evaluate and wait for the generated responses</li>
+        </ol>
+      </InfoButton>
+      <h1 className="text-3xl font-bold mb-6">LLM Evaluations</h1>
       {error && (
         <Alert variant="destructive" className="mb-4">
           <AlertDescription>{error}</AlertDescription>
         </Alert>
       )}
-      <div className="space-y-6 mx-6">
-        <div className="flex flex-row w-full border p-4 space-x-2">
-          <div className="flex flex-col w-1/2 pr-4">
-            <ModelSelectionForm
-              availableModels={AVAILABLE_MODELS}
-              selectedModels={selectedModels}
-              onModelSelectionChange={setSelectedModels}
-            />
-            <EvaluationButton onEvaluate={handleEvaluate} isLoading={isLoading} />
-          </div>
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <div className="border rounded-lg p-4">
+          <ModelSelectionForm
+            availableModels={AVAILABLE_MODELS}
+            selectedModels={selectedModels}
+            onModelSelectionChange={setSelectedModels}
+          />
+          <EvaluationButton onEvaluate={handleEvaluate} isLoading={isLoading}  />
+        </div>
+        <div className="border rounded-lg p-4">
           <PromptInputForm
             prompts={prompts}
             onPromptsChange={setPrompts}
           />
         </div>
-        <ResultsTable results={results} selectedModels={selectedModels} isLoading={isLoading} isInitial={isInitial} />
       </div>
+      <ScrollArea className="h-[400px] border rounded-lg p-4">
+        <ResultsTable results={results} selectedModels={selectedModels} isLoading={isLoading} isInitial={isInitial} />
+      </ScrollArea>
     </main>
   )
 }