Skip to content

Commit

Permalink
info button added
Browse files Browse the repository at this point in the history
also added initial state for resutls table
  • Loading branch information
cdreetz committed Aug 20, 2024
1 parent 2f77628 commit e4df057
Show file tree
Hide file tree
Showing 8 changed files with 315 additions and 25 deletions.
15 changes: 14 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,17 @@ Idk I'll write this later just look at the 2 pages and read the code

Compare models

Compare prompts
Compare prompts





## TODO
- 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


15 changes: 12 additions & 3 deletions app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import PromptInputForm from '@/components/PromptInputForm'
import EvaluationButton from '@/components/EvaluationButton'
import ResultsTable from '@/components/ResultsTable'
import { Alert, AlertDescription } from '@/components/ui/alert'
import InfoButton from '@/components/InfoButton';

export type Provider = 'openai' | 'groq';

Expand All @@ -20,8 +21,13 @@ const AVAILABLE_MODELS: Model[] = [
{ id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', provider: 'openai' },
{ id: 'gpt-4', name: 'GPT-4', provider: 'openai' },
{ id: 'gpt-4-turbo', name: 'GPT-4 Turbo', provider: 'openai' },
{ id: 'gpt-4o', name: 'GPT-4o', provider: 'openai' },
{ id: 'gpt-4o-mini', name: 'GPT-4o Mini', provider: 'openai' },
{ id: 'llama-3.1-70b-versatile', name: 'Llama-3.1 70b', provider: 'groq' },
{ id: 'llama-3.1-8b-instant', name: 'Llama-3.1 8b', provider: 'groq' },
{ 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' },
];

interface EvaluationResult {
Expand All @@ -37,9 +43,11 @@ export default function Home() {
const [results, setResults] = useState<EvaluationResult[]>([]);
const [registry, setRegistry] = useState<any>(null);
const [isLoading, setIsLoading] = useState(false);
const [isInitial, setIsInitial] = useState(true);
const [error, setError] = useState<string | null>(null);

const handleEvaluate = async () => {
setIsInitial(false);
setIsLoading(true);
setError(null);

Expand Down Expand Up @@ -88,13 +96,14 @@ export default function Home() {

return (
<main className="container mx-auto p-4">
<h1 className="text-3xl font-bold mb-6">LLM Evaluations</h1>
<InfoButton />
<h1 className="text-3xl font-bold mb-6 mt-10 mx-6">LLM Evaluations</h1>
{error && (
<Alert variant="destructive" className="mb-4">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="space-y-6">
<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
Expand All @@ -109,7 +118,7 @@ export default function Home() {
onPromptsChange={setPrompts}
/>
</div>
<ResultsTable results={results} selectedModels={selectedModels} isLoading={isLoading} />
<ResultsTable results={results} selectedModels={selectedModels} isLoading={isLoading} isInitial={isInitial} />
</div>
</main>
)
Expand Down
41 changes: 41 additions & 0 deletions components/InfoButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {
AlertDialog,
AlertDialogContent,
AlertDialogDescription,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogTrigger,
AlertDialogAction,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
import { QuestionMarkCircledIcon } from '@radix-ui/react-icons';

export default function InfoButton() {
return (
<div className='absolute top-2 left-4 z-10'>
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant='outline' size='icon'>
<QuestionMarkCircledIcon className='h-4 w-4' />
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>How to Use This Page</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>
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction>Close</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
)
}
24 changes: 13 additions & 11 deletions components/ModelSelectionForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,20 @@ export default function ModelSelectionForm({
}

return (
<div className="space-y-4 w-full pb-2">
<div className="space-y-2 w-full pb-2">
<h2 className="text-xl font-semibold">Select Models</h2>
{availableModels.map((model) => (
<div key={model.id} className="flex items-center space-x-2">
<Checkbox
id={model.id}
checked={selectedModels.some(m => m.id === model.id)}
onCheckedChange={() => handleModelToggle(model)}
/>
<Label htmlFor={model.id} className="text-sm md:text-md">{model.name} {model.provider}</Label>
</div>
))}
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
{availableModels.map((model) => (
<div key={model.id} className="flex items-center space-x-2">
<Checkbox
id={model.id}
checked={selectedModels.some(m => m.id === model.id)}
onCheckedChange={() => handleModelToggle(model)}
/>
<Label htmlFor={model.id} className="text-sm md:text-md">{model.name} {model.provider}</Label>
</div>
))}
</div>
</div>
)
}
30 changes: 20 additions & 10 deletions components/ResultsTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ interface ResultsTableProps {
}>
selectedModels: Model[]
isLoading: boolean
isInitial: boolean
}

export default function ResultsTable({ results, selectedModels, isLoading }: ResultsTableProps) {
if (results.length === 0 && !isLoading) {
export default function ResultsTable({ results, selectedModels, isLoading, isInitial }: ResultsTableProps) {
if (results.length === 0 && !isLoading && !isInitial) {
return null
}

Expand All @@ -33,16 +34,25 @@ export default function ResultsTable({ results, selectedModels, isLoading }: Res
</TableRow>
</TableHeader>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={selectedModels.length + 1}>
<div className="space-y-2">
<Skeleton className="h-4 w-full" />
{isInitial ? (
<TableRow>
<TableCell>
<Skeleton className="h-4 w-full" />
</TableCell>
</TableRow>
) : isLoading ? (
Array.from({ length: 5 }).map((_, index) => (
<TableRow key={index}>
<TableCell>
<Skeleton className="h-4 w-full" />
</div>
</TableCell>
</TableRow>
</TableCell>
{selectedModels.map((model) => (
<TableCell key={model.id}>
<Skeleton className="h-4 w-full" />
</TableCell>
))}
</TableRow>
))
) : (
results.map((result, index) => (
<TableRow key={index}>
Expand Down
141 changes: 141 additions & 0 deletions components/ui/alert-dialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
"use client"

import * as React from "react"
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

const AlertDialog = AlertDialogPrimitive.Root

const AlertDialogTrigger = AlertDialogPrimitive.Trigger

const AlertDialogPortal = AlertDialogPrimitive.Portal

const AlertDialogOverlay = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName

const AlertDialogContent = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
/>
</AlertDialogPortal>
))
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName

const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
AlertDialogHeader.displayName = "AlertDialogHeader"

const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
AlertDialogFooter.displayName = "AlertDialogFooter"

const AlertDialogTitle = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold", className)}
{...props}
/>
))
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName

const AlertDialogDescription = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName

const AlertDialogAction = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Action>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Action
ref={ref}
className={cn(buttonVariants(), className)}
{...props}
/>
))
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName

const AlertDialogCancel = React.forwardRef<
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
>(({ className, ...props }, ref) => (
<AlertDialogPrimitive.Cancel
ref={ref}
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className
)}
{...props}
/>
))
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName

export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}
Loading

0 comments on commit e4df057

Please sign in to comment.