Merge pull request #48 from mastra-ai/taofeeq/futr-817-update-bird-ch…

…ecker-with-eval-variant-to-use-new-mastra

update bird checker with eval variant

bird-checker-with-eval/package.json

@@ -9,10 +9,11 @@
     "lint": "next lint",
     "mastra:init": "pnpm dlx mastra init",
     "mastra:dev": "pnpm dlx mastra dev",
-    "mastra:migrate": "pnpm dlx mastra migrate"
+    "mastra:migrate": "pnpm dlx mastra migrate",
+    "braintrust:eval": "npx braintrust eval src/lib/evals"
   },
   "dependencies": {
-    "@mastra/core": "^0.1.26",
+    "@mastra/core": "0.1.27-alpha.0",
     "@prisma/client": "5.22.0",
     "braintrust": "^0.0.168",
     "class-variance-authority": "^0.7.0",

bird-checker-with-eval/src/app/components/bird-checker-response.tsx

@@ -6,7 +6,32 @@ import { toast } from "sonner";
 import { Status } from "./bird-checker";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Bird, Check, MapPin } from "lucide-react";
-import { getObjectFromString } from "@/lib/utils";
+
+function getObjectFromString(text: string) {
+  // First approach: using match()
+  const regex =
+    /(?<=bird:).*?(?=,|\n)|(?<=location:).*?(?=,|\n)|(?<=species:).*(?=\n|})/g;
+  const matches = text.match(regex);
+
+  if (!matches) {
+    return {
+      bird: "no",
+      location: text,
+      species: ""
+    };
+  }
+
+  const [bird, location, species] = matches;
+  console.log("Bird:", bird);
+  console.log("Location:", location);
+  console.log("Species:", species);
+
+  return {
+    bird: bird?.trim(),
+    location: location?.trim(),
+    species: species?.split("}")?.join("")?.trim()
+  };
+}
 
 export const BirdCheckerResponse = ({
   imageUrl,
@@ -33,8 +58,6 @@ export const BirdCheckerResponse = ({
     const getRandomImage = async () => {
       if (!imageUrl) return;
 
-      console.log("imageUrl==", imageUrl);
-
       setMetadataStatus("loading");
       const res = await promptClaude({ imageUrl });
 
@@ -45,7 +68,7 @@ export const BirdCheckerResponse = ({
       }
       console.log("res===", res.data);
       setMetadataStatus("success");
-      const object = getObjectFromString(res.data.content[0].text);
+      const object = getObjectFromString(res.data.text);
 
       setMedata(object);
     };

bird-checker-with-eval/src/app/components/bird-checker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { getImage } from "@/lib/mastra/actions";
+import { getImage, ImageQuery } from "@/lib/mastra/actions";
 import { cn } from "@/lib/utils";
 import { Bird, Camera, Feather, Plane } from "lucide-react";
 import Image from "next/image";
@@ -43,7 +43,7 @@ export const BirdChecker = () => {
     const getRandomImage = async () => {
       setStatus("loading");
       console.log("got here");
-      const res = await getImage({ query });
+      const res = await getImage({ query: query as ImageQuery });
       if (!res.ok) {
         setStatus("error");
         toast.error("Failed to fetch image");
@@ -74,8 +74,8 @@ export const BirdChecker = () => {
             <p className="md:hidden text-sm text-center font-base font-normal italic font-serif">
               Inspired by{" "}
               <a
-                href="https://xkcd.com/1425/"
                 rel="noopener"
+                href="https://xkcd.com/1425/"
                 target="_blank"
                 className="text-[#0057ff] font-medium">
                 Randall Munroe
@@ -159,9 +159,9 @@ export const BirdChecker = () => {
           <span className="sm:hidden bottom-2 right-2 w-fit mx-auto py-1 bg-gray-100 duration-300 ease-out transition-all rounded-full px-2 border-[hsla(256,2%,99%,.08)] justify-center items-center font-medium border text-sm">
             <div className="flex gap-2">
               <a
+                rel="noopener"
                 href="https://github.com/mastra-ai/examples/tree/main/bird-checker"
                 target="_blank"
-                rel="noopener"
                 className="uppercase inline-flex items-center h-4 rounded-full text-black px-1.5 leading-tight tracking-widest text-[9px] bg-gray-50 font-semibold">
                 see the code
               </a>
@@ -180,8 +180,8 @@ export const BirdChecker = () => {
           <p className="absolute hidden md:block right-2 bottom-2 italic font-serif">
             Inspired by{" "}
             <a
-              href="https://xkcd.com/1425/"
               rel="noopener"
+              href="https://xkcd.com/1425/"
               target="_blank"
               className="text-[#0057ff] font-medium">
               Randall Munroe
@@ -192,17 +192,17 @@ export const BirdChecker = () => {
       <span className="hidden md:block md:fixed bottom-2 right-2 w-fit mx-auto py-1 bg-gray-100 duration-300 ease-out transition-all rounded-full px-2 border-[hsla(256,2%,99%,.08)] justify-center items-center font-medium border text-sm">
         <div className="flex gap-2">
           <a
+            rel="noopener"
             href="https://github.com/mastra-ai/examples/tree/main/bird-checker"
             target="_blank"
-            rel="noopener"
             className="uppercase inline-flex items-center h-4 rounded-full text-black px-1.5 leading-tight tracking-widest text-[9px] bg-gray-50 font-semibold">
             see the code
           </a>
           <span className="text-xs text-black font-semibold">
             Built with{" "}
             <a
-              href="https://mastra.ai/"
               rel="noopener"
+              href="https://mastra.ai/"
               className="underline"
               target="_blank">
               Mastra.ai

bird-checker-with-eval/src/lib/evals/data.ts

@@ -1,9 +1,9 @@
 export const IMAGES = {
   notBird: {
     bird: "no",
-    species: "not applicable",
+    species: "Panthera leo",
     image:
-      "https://images.unsplash.com/photo-1731009918047-1e02c93a28f0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2NzI1Mzd8MHwxfHNlYXJjaHw0MXx8d2lsZGxpZmV8ZW58MHx8Mnx8MTczMTMyODAyOHww&ixlib=rb-4.0.3&q=80&w=1080"
+      "https://images.unsplash.com/photo-1470848051974-964b789cb6fa?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2NzI1Mzd8MHwxfHNlYXJjaHwzNXx8d2lsZGxpZmV8ZW58MHx8fHwxNzMyMTIwMTMyfDA&ixlib=rb-4.0.3&q=80&w=1080"
   },
   isBird: {
     bird: "yes",

bird-checker-with-eval/src/lib/evals/index.eval.ts

@@ -1,7 +1,7 @@
 import { Eval } from "braintrust";
 import { IMAGES } from "./data";
 import { BirdObj } from "../utils";
-import { getImageMetadataFromClaude } from "../mastra/system-apis";
+import { promptClaude } from "../mastra/actions";
 
 export function getObjectFromString(text: string): BirdObj {
   // First approach: using match()
@@ -60,11 +60,11 @@ Eval("Is a bird", {
     ];
   },
   task: async (input) => {
-    const claudeResponse = await getImageMetadataFromClaude({ imageUrl: input });
+    const claudeResponse = await promptClaude({ imageUrl: input });
     if (!claudeResponse.ok) {
       return { bird: "", location: "", species: "" };
     }
-    const object = getObjectFromString(claudeResponse.data.content[0].text);
+    const object = getObjectFromString(claudeResponse.data.text);
 
     return object;
   },