mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-12 12:39:52 +08:00
## Problem
A review of how the app uses the Vercel AI SDK (two Claude reviewers and Codex, each finding checked against the SDK's type definitions and source) found five behaviours that are wrong and a set of places where the app re-implements what the SDK already provides:
1. Quota tokens were recorded in `onFinish`, which the SDK does not call when a later step fails; only a user stop was handled (`onAbort`), and the write was not awaited.
2. An automatic retry after a tool error re-sent the request body as it was when the message was sent, so the model was told the "authoritative" canvas XML was the diagram from before the turn, although `display_diagram` commits a drawing before its screenshot check can fail.
3. The screenshot check and the connection test ran their model call on `AbortSignal.timeout` only, so pressing Stop (or closing the dialog) did not stop a paid model call.
4. The client ignored `finishReason`; a reasoning model that spent the whole output budget before calling a tool left the user with no diagram and no message.
5. The connection test counted an `invalid` tool call (a tool that does not exist, unreadable input) as proof of tool support.
## Change
- `onStepFinish` records each step's `usage.totalTokens` and awaits the write; the copies in `onFinish` and `onAbort` are gone.
- `DefaultChatTransport.prepareSendMessagesRequest` sends the current canvas page XML on every request after the first of a turn; the first keeps the exported (or snapshot) XML.
- `validate-diagram` and the connection test pass `req.signal` and use the SDK's `timeout` option; `validate-diagram` reports to Langfuse under `functionId: "validate-diagram"`.
- The connection test only counts a valid tool call.
- The client's `onFinish` shows a notice (with Retry) when `finishReason === "length"` and no tool was called.
- The server validates incoming messages with `safeValidateUIMessages` (400 otherwise), drops client system messages explicitly and prunes empty model messages with `pruneMessages`.
- The chat's tools live in `lib/chat-tools.ts` with an `outputSchema` for the client-side ones; `lib/chat-message.ts` defines `ChatUIMessage` (metadata, a `data-notice` part, `InferUITools`) so `useChat`, `addToolOutput` and the tool handlers are typed.
- Error notices are assistant messages with a `data-notice` part instead of role `system` UI messages.
- Regenerate, edit and retry use `sendMessage({ messageId })`; `isResending` and `flushSync` are gone.
- `isToolUIPart` / `getToolName` replace slicing `"tool-"` off part types; `ToolPartLike` derives from the SDK's part types.
Net: 578 insertions, 439 deletions over 16 files.
## Testing
- New unit tests: a step that fails after a finished step still counts that step's tokens; the screenshot check's model call ends when the request is aborted; an invalid tool call in the connection test gives the warning; malformed messages get a 400. The first and third confirm SDK behaviour the review relied on.
- `tsc`, `biome ci` (0 errors), root `vitest run` 723 passed on the branch rebased onto #986, `next build`: clean
- Playwright, 10 chat-related specs on the dev server: 199 passed, 0 failed, both before and after the rebase onto #986
179 lines
5.9 KiB
TypeScript
179 lines
5.9 KiB
TypeScript
/**
|
|
* API endpoint for VLM-based diagram validation.
|
|
* Accepts a PNG image and answers with the validation result as JSON.
|
|
*/
|
|
|
|
import { generateText, Output } from "ai"
|
|
import { checkAccessCode, rejectCrossSite } from "@/lib/access-code"
|
|
import { getValidationModel } from "@/lib/ai-providers"
|
|
import {
|
|
checkAndIncrementRequest,
|
|
isQuotaEnabled,
|
|
recordTokenUsage,
|
|
} from "@/lib/dynamo-quota-manager"
|
|
import { getTelemetryConfig } from "@/lib/langfuse"
|
|
import { getUserIdFromRequest } from "@/lib/user-id"
|
|
import { VALIDATION_SYSTEM_PROMPT } from "@/lib/validation-prompts"
|
|
import {
|
|
type ValidationResult,
|
|
ValidationResultSchema,
|
|
} from "@/lib/validation-schema"
|
|
|
|
export const maxDuration = 30
|
|
|
|
// Data URL length cap (~3.75 MB of PNG), well above a normal diagram capture
|
|
const MAX_IMAGE_DATA_LENGTH = 5 * 1024 * 1024
|
|
|
|
interface ValidateDiagramRequest {
|
|
imageData: string // Base64 PNG data URL
|
|
sessionId?: string
|
|
}
|
|
|
|
// Default valid result for disabled/error cases
|
|
const DEFAULT_VALID_RESULT: ValidationResult = {
|
|
valid: true,
|
|
issues: [],
|
|
suggestions: [],
|
|
}
|
|
|
|
export async function POST(req: Request): Promise<Response> {
|
|
const crossSite = rejectCrossSite(req)
|
|
if (crossSite) return crossSite
|
|
// Uses the server's model credentials, so require the access code
|
|
const accessError = checkAccessCode(req)
|
|
if (accessError) return accessError
|
|
|
|
try {
|
|
// Check if VLM validation is enabled (default: true)
|
|
const enableValidation = process.env.ENABLE_VLM_VALIDATION !== "false"
|
|
if (!enableValidation) {
|
|
return Response.json(DEFAULT_VALID_RESULT)
|
|
}
|
|
|
|
const body: ValidateDiagramRequest = await req.json()
|
|
const { imageData, sessionId } = body
|
|
|
|
if (!imageData) {
|
|
return Response.json(
|
|
{ error: "Missing imageData" },
|
|
{ status: 400 },
|
|
)
|
|
}
|
|
|
|
// Validate image data format
|
|
if (
|
|
!imageData.startsWith("data:image/png;base64,") &&
|
|
!imageData.startsWith("data:image/")
|
|
) {
|
|
return Response.json(
|
|
{ error: "Invalid image data format" },
|
|
{ status: 400 },
|
|
)
|
|
}
|
|
|
|
if (imageData.length > MAX_IMAGE_DATA_LENGTH) {
|
|
return Response.json(
|
|
{ error: "Image data too large" },
|
|
{ status: 413 },
|
|
)
|
|
}
|
|
|
|
// It runs the server's vision model: with the quota on, the daily
|
|
// and per-minute token limits apply, and its tokens are counted. Not
|
|
// the request limit, which is for chats: the day's last chat still
|
|
// gets its check, and a check does not count as a chat.
|
|
const userId = getUserIdFromRequest(req)
|
|
const countsQuota = isQuotaEnabled() && userId !== "anonymous"
|
|
if (countsQuota) {
|
|
const quotaCheck = await checkAndIncrementRequest(
|
|
userId,
|
|
{
|
|
requests: 0,
|
|
tokens: Number(process.env.DAILY_TOKEN_LIMIT) || 200000,
|
|
tpm: Number(process.env.TPM_LIMIT) || 20000,
|
|
},
|
|
0,
|
|
)
|
|
if (!quotaCheck.allowed) {
|
|
return Response.json(
|
|
{
|
|
error: quotaCheck.error,
|
|
type: quotaCheck.type,
|
|
used: quotaCheck.used,
|
|
limit: quotaCheck.limit,
|
|
},
|
|
{ status: 429 },
|
|
)
|
|
}
|
|
}
|
|
|
|
// Get the validation model
|
|
let model
|
|
try {
|
|
model = getValidationModel()
|
|
} catch (error) {
|
|
console.warn(
|
|
"[validate-diagram] Validation model not available:",
|
|
error,
|
|
)
|
|
// Return valid if no vision model is configured
|
|
return Response.json(DEFAULT_VALID_RESULT)
|
|
}
|
|
|
|
// Parse timeout with validation (minimum 1000ms, default 10000ms)
|
|
const timeout =
|
|
Math.max(
|
|
1000,
|
|
parseInt(process.env.VALIDATION_TIMEOUT || "10000", 10),
|
|
) || 10000
|
|
|
|
const { output, totalUsage } = await generateText({
|
|
model,
|
|
output: Output.object({ schema: ValidationResultSchema }),
|
|
system: VALIDATION_SYSTEM_PROMPT,
|
|
messages: [
|
|
{
|
|
role: "user",
|
|
content: [
|
|
{
|
|
type: "image",
|
|
image: imageData,
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Please analyze this diagram for visual quality issues.",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
maxOutputTokens: 1024,
|
|
// Ends with the request: the user pressed Stop, or left
|
|
abortSignal: req.signal,
|
|
timeout,
|
|
// Its usage and cost show in Langfuse next to the chat's
|
|
experimental_telemetry: getTelemetryConfig({
|
|
functionId: "validate-diagram",
|
|
sessionId,
|
|
userId,
|
|
}),
|
|
})
|
|
if (countsQuota) {
|
|
await recordTokenUsage(userId, totalUsage.totalTokens ?? 0)
|
|
}
|
|
if (sessionId) {
|
|
console.log(
|
|
`[validate-diagram] Session ${sessionId}: valid=${output.valid}, issues=${output.issues?.length ?? 0}`,
|
|
)
|
|
}
|
|
return Response.json(output)
|
|
} catch (error) {
|
|
// Log with session context if available
|
|
const errorMessage =
|
|
error instanceof Error ? error.message : String(error)
|
|
console.error("[validate-diagram] Error:", errorMessage)
|
|
|
|
// On error, return valid to not block the user
|
|
return Response.json(DEFAULT_VALID_RESULT)
|
|
}
|
|
}
|