transcription optional args

cdreetz · Aug 21, 2024 · 2b4f19c · 2b4f19c
1 parent b329a24
commit 2b4f19c
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -10,24 +10,28 @@ 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
+- 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
+- ~~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
+- ~~stt page with Groq whisper~~
+- transcription optional arguments
 
 v0.2.0
 - auth / sign up / login pages

diff --git a/app/api/chat/anthropic/route.ts b/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();
+}
+
diff --git a/app/api/transcribe/route.ts b/app/api/transcribe/route.ts
@@ -22,10 +22,11 @@ export async function POST(request: NextRequest) {
     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: "distil-whisper-large-v3-en",
+      model: model === 'distil-whisper-large-v3-en' ? 'distil-whisper-large-v3-en' : 'whisper-large-v3',
     };
 
     // Add optional parameters if provided
@@ -46,6 +47,7 @@ export async function POST(request: NextRequest) {
     } 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);

diff --git a/app/chat-with-comparison/page.tsx b/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">
         {[
@@ -72,6 +82,6 @@ export default function DualChat() {
           <Button type="submit">Send</Button>
         </div>
       </form>
-    </div>
+    </main>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -33,6 +33,11 @@ const AVAILABLE_MODELS: Model[] = [
   { id: 'claude-3-sonnet-20240229', name: 'Claude 3 Sonnet', provider: 'anthropic' },
 ];
 
+
+
+
+
+
 interface EvaluationResult {
   prompt: string;
   results: {
@@ -116,7 +121,16 @@ export default function Home() {
 
   return (
     <main className="container mx-auto p-4">
-      <InfoButton />
+      <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 mx-6">LLM Evaluations</h1>
       {error && (
         <Alert variant="destructive" className="mb-4">

diff --git a/app/transcribe/page.tsx b/app/transcribe/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
@@ -19,10 +19,31 @@ export default function TranscribePage() {
   const [language, setLanguage] = useState('');
   const [prompt, setPrompt] = useState('');
   const [temperature, setTemperature] = useState('');
+  const [fileDetails, setFileDetails] = useState<{ name: string; duration: string; transcriptionTime: string } | null>(null);
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const [model, setModel] = useState('whisper-large-v3');
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files[0]) {
-      setFile(event.target.files[0]);
+      const selectedFile = event.target.files[0];
+      setFile(selectedFile);
+      setFileDetails(null); // Reset file details when a new file is selected
+
+      // Create a URL for the audio file
+      const audioUrl = URL.createObjectURL(selectedFile);
+      if (audioRef.current) {
+        audioRef.current.src = audioUrl;
+        audioRef.current.onloadedmetadata = () => {
+          const duration = audioRef.current?.duration || 0;
+          const minutes = Math.floor(duration / 60);
+          const seconds = Math.floor(duration % 60);
+          setFileDetails({
+            name: selectedFile.name,
+            duration: `${minutes}:${seconds.toString().padStart(2, '0')}`,
+            transcriptionTime: '',
+          });
+        };
+      }
     }
   };
 
@@ -34,6 +55,7 @@ export default function TranscribePage() {
 
     setIsLoading(true);
     setError('');
+    const startTime = Date.now();
 
     try {
       const formData = new FormData();
@@ -42,6 +64,7 @@ export default function TranscribePage() {
       if (language) formData.append('language', language);
       if (prompt) formData.append('prompt', prompt);
       if (temperature) formData.append('temperature', temperature);
+      formData.append('model', model);
 
       const response = await fetch('/api/transcribe', {
         method: 'POST',
@@ -54,6 +77,13 @@ export default function TranscribePage() {
 
       const data = await response.json();
       setTranscription(verboseJson ? JSON.stringify(data, null, 2) : data.text);
+
+      const endTime = Date.now();
+      const transcriptionTime = ((endTime - startTime) / 1000).toFixed(2);
+      setFileDetails(prevDetails => ({
+        ...prevDetails!,
+        transcriptionTime: `${transcriptionTime} seconds`,
+      }));
     } catch (err) {
       setError('An error occurred during transcription. Please try again.');
     } finally {
@@ -63,7 +93,17 @@ export default function TranscribePage() {
 
   return (
     <main className="container mx-auto p-4">
-      <InfoButton />
+       <InfoButton
+        title="LLM Evaluations"
+        className="absolute top-4 left-4 z-10"
+      >
+        <ol className="list-decimal pl-4">
+          <li>Select an audio file</li>
+          <li>Select any optional settings if you want</li>
+          <li>Click Transcribe Audio</li>
+          <li>Wait for the transcription to finish</li>
+        </ol>
+      </InfoButton>
       <h1 className="text-3xl font-bold mb-6 mx-6">Audio Transcription</h1>
       {error && (
         <Alert variant="destructive" className="mb-4">
@@ -78,6 +118,25 @@ export default function TranscribePage() {
             onChange={handleFileChange}
             className="mb-4"
           />
+          {fileDetails && (
+            <div className="mb-4 p-2 bg-gray-100 rounded">
+              <h3 className="font-semibold">File Details:</h3>
+              <p>Name: {fileDetails.name}</p>
+              <p>Duration: {fileDetails.duration}</p>
+              {fileDetails.transcriptionTime && (
+                <p>Time to transcribe: {fileDetails.transcriptionTime}</p>
+              )}
+            </div>
+          )}
+          <Select onValueChange={setModel} value={model}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select Model" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="whisper-large-v3">Whisper Large v3</SelectItem>
+              <SelectItem value="distil-whisper-large-v3-en">Distil Whisper Large v3 (English)</SelectItem>
+            </SelectContent>
+          </Select>
           <div className="flex items-center space-x-2">
             <Switch
               id="verbose-json"
@@ -125,6 +184,7 @@ export default function TranscribePage() {
           />
         </div>
       </div>
+      <audio ref={audioRef} style={{ display: 'none' }} />
     </main>
   );
 }
diff --git a/components/InfoButton.tsx b/components/InfoButton.tsx
@@ -10,10 +10,17 @@ import {
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
 import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';
+import { ReactNode } from 'react';
 
-export default function InfoButton() {
+interface InfoButtonProps {
+  title: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export default function InfoButton({ title, children, className = 'absolute top-4 left-4 z-10' }: InfoButtonProps) {
   return (
-    <div className='absolute top-4 left-4 z-10'>
+    <div className={className}>
       <AlertDialog>
         <AlertDialogTrigger asChild>
           <Button variant='outline' size='icon'>
@@ -22,13 +29,9 @@ export default function InfoButton() {
         </AlertDialogTrigger>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>How to Use This Page</AlertDialogTitle>
+            <AlertDialogTitle>{title}</AlertDialogTitle>
             <AlertDialogDescription>
-              <ol className='list-decimal list-inside space-y-2'>
-                <li>Select the models you want to compare</li>
-                <li>Add the prompts you want to evaluate for</li>
-                <li>Run the evaluation and wait for all the responses to generate</li>
-              </ol>
+              {children}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>

diff --git a/components/ProviderSelect.tsx b/components/ProviderSelect.tsx
@@ -23,6 +23,7 @@ export function ProviderSelect({ provider, model, onProviderChange, onModelChang
         <SelectContent>
           <SelectItem value="openai">OpenAI</SelectItem>
           <SelectItem value="groq">Groq</SelectItem>
+          <SelectItem value="anthropic">Anthropic</SelectItem>
         </SelectContent>
       </Select>
       <Select onValueChange={onModelChange} value={model}>

diff --git a/hooks/useMultiProviderChat.ts b/hooks/useMultiProviderChat.ts
@@ -21,6 +21,9 @@ export const AVAILABLE_MODELS: Model[] = [
   { id: 'mixtral-8x7b-32768', name: 'Mixtral 8x7b', provider: 'groq' },
   { id: 'gemma-7b-it', name: 'Gemma 7b', provider: 'groq' },
   { id: 'gemma2-9b-it', name: 'Gemma2 9b', provider: 'groq' },
+  { id: 'claude-3-opus-20240229', name: 'Claude 3 Opus', provider: 'anthropic' },
+  { id: 'claude-3-haiku-20240307', name: 'Claude 3 Haiku', provider: 'anthropic' },
+  { id: 'claude-3-sonnet-20240229', name: 'Claude 3 Sonnet', provider: 'anthropic' },
 ];
 
 interface UseMultiProviderChatOptions extends Omit<UseChatOptions, 'api'> {