Change step artifact headers (#227)

This commit is contained in:
Salih Altun
2024-04-24 18:14:20 +03:00
committed by GitHub
parent 382505ee75
commit ef227dc9ff
2 changed files with 18 additions and 48 deletions

View File

@@ -50,10 +50,6 @@ function StepArtifacts({ id, stepProps }: Props) {
(artifact) => artifact.artifact_type === ArtifactType.ActionScreenshot,
);
const visibleElementsTree = artifacts?.find(
(artifact) => artifact.artifact_type === ArtifactType.VisibleElementsTree,
);
const visibleElementsTreeTrimmed = artifacts?.find(
(artifact) =>
artifact.artifact_type === ArtifactType.VisibleElementsTreeTrimmed,
@@ -63,14 +59,6 @@ function StepArtifacts({ id, stepProps }: Props) {
(artifact) => artifact.artifact_type === ArtifactType.LLMPrompt,
);
const llmRequest = artifacts?.find(
(artifact) => artifact.artifact_type === ArtifactType.LLMRequest,
);
const llmResponseRaw = artifacts?.find(
(artifact) => artifact.artifact_type === ArtifactType.LLMResponseRaw,
);
const llmResponseParsed = artifacts?.find(
(artifact) => artifact.artifact_type === ArtifactType.LLMResponseParsed,
);
@@ -81,26 +69,19 @@ function StepArtifacts({ id, stepProps }: Props) {
return (
<Tabs defaultValue="info" className="w-full">
<TabsList className="grid w-full h-16 grid-cols-5">
<TabsList className="grid w-full h-16 grid-cols-4">
<TabsTrigger value="info">Info</TabsTrigger>
<TabsTrigger value="screenshot_llm">Page Screenshots</TabsTrigger>
<TabsTrigger value="screenshot_llm">Annotated Screenshots</TabsTrigger>
<TabsTrigger value="screenshot_action">Action Screenshots</TabsTrigger>
<TabsTrigger value="element_tree">Element Tree</TabsTrigger>
<TabsTrigger value="element_tree_trimmed">
Element Tree (Trimmed)
</TabsTrigger>
<TabsTrigger value="llm_prompt">LLM Prompt</TabsTrigger>
<TabsTrigger value="llm_request">LLM Request</TabsTrigger>
<TabsTrigger value="llm_response_raw">LLM Response (Raw)</TabsTrigger>
<TabsTrigger value="llm_response_parsed">
LLM Response (Parsed)
</TabsTrigger>
<TabsTrigger value="element_tree_trimmed">Element Tree</TabsTrigger>
<TabsTrigger value="llm_prompt">Prompt</TabsTrigger>
<TabsTrigger value="llm_response_parsed">Action List</TabsTrigger>
<TabsTrigger value="html_raw">HTML (Raw)</TabsTrigger>
</TabsList>
<TabsContent value="info">
<div className="flex flex-col gap-6 p-4">
<div className="flex items-center">
<Label className="w-32 shrink-0 text-xl">Step ID</Label>
<Label className="w-32 shrink-0">Step ID</Label>
{isFetching ? (
<Skeleton className="h-4 w-40" />
) : (
@@ -108,7 +89,7 @@ function StepArtifacts({ id, stepProps }: Props) {
)}
</div>
<div className="flex items-center">
<Label className="w-32 shrink-0 text-xl">Status</Label>
<Label className="w-32 shrink-0">Status</Label>
{isFetching ? (
<Skeleton className="h-4 w-40" />
) : stepProps ? (
@@ -116,7 +97,7 @@ function StepArtifacts({ id, stepProps }: Props) {
) : null}
</div>
<div className="flex items-center">
<Label className="w-32 shrink-0 text-xl">Created At</Label>
<Label className="w-32 shrink-0">Created At</Label>
{isFetching ? (
<Skeleton className="h-4 w-40" />
) : stepProps ? (
@@ -169,11 +150,6 @@ function StepArtifacts({ id, stepProps }: Props) {
<div>No screenshots found</div>
)}
</TabsContent>
<TabsContent value="element_tree">
{visibleElementsTree ? (
<JSONArtifact artifact={visibleElementsTree} />
) : null}
</TabsContent>
<TabsContent value="element_tree_trimmed">
{visibleElementsTreeTrimmed ? (
<JSONArtifact artifact={visibleElementsTreeTrimmed} />
@@ -182,12 +158,6 @@ function StepArtifacts({ id, stepProps }: Props) {
<TabsContent value="llm_prompt">
{llmPrompt ? <TextArtifact artifact={llmPrompt} /> : null}
</TabsContent>
<TabsContent value="llm_request">
{llmRequest ? <JSONArtifact artifact={llmRequest} /> : null}
</TabsContent>
<TabsContent value="llm_response_raw">
{llmResponseRaw ? <JSONArtifact artifact={llmResponseRaw} /> : null}
</TabsContent>
<TabsContent value="llm_response_parsed">
{llmResponseParsed ? (
<JSONArtifact artifact={llmResponseParsed} />

View File

@@ -51,7 +51,7 @@ function TaskDetails() {
}
return (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-8 max-w-5xl mx-auto">
<div className="flex items-center">
<Label className="w-32 shrink-0 text-lg">Task ID</Label>
<Input value={taskId} readOnly />
@@ -131,6 +131,15 @@ function TaskDetails() {
</CardContent>
</Card>
) : null}
<Card>
<CardHeader className="border-b-2">
<CardTitle className="text-lg">Steps</CardTitle>
<CardDescription>Task Steps and Step Artifacts</CardDescription>
</CardHeader>
<CardContent className="min-h-96">
<StepArtifactsLayout />
</CardContent>
</Card>
<Card>
<CardHeader className="border-b-2">
<CardTitle className="text-xl">Parameters</CardTitle>
@@ -179,15 +188,6 @@ function TaskDetails() {
) : null}
</CardContent>
</Card>
<Card>
<CardHeader className="border-b-2">
<CardTitle className="text-lg">Steps</CardTitle>
<CardDescription>Task Steps and Step Artifacts</CardDescription>
</CardHeader>
<CardContent className="min-h-96">
<StepArtifactsLayout />
</CardContent>
</Card>
</div>
);
}