[dyad] Added image alt tag analysis - wrote 3 file(s)

src/components/meta-form.tsx

@@ -14,7 +14,7 @@ import {
   ImageOff,
   Search,
 } from "lucide-react";
-import { extractMetaData, type HeadlineNode } from "@/app/actions";
+import { extractMetaData, type HeadlineNode, type ImageAltData } from "@/app/actions";
 import { LengthIndicator } from "./length-indicator";
 import { CopyButton } from "./copy-button";
 import { SerpPreview } from "./serp-preview";
@@ -22,6 +22,7 @@ import { ResultsSkeleton } from "./results-skeleton";
 import { FaqDisplay } from "./faq-display";
 import { HeadlineTree } from "./headline-tree";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ImageAltDisplay } from "./image-alt-display";
 
 interface MetaData {
   title: string;
@@ -31,6 +32,7 @@ interface MetaData {
   headlines?: HeadlineNode[] | null;
   keyword?: string | null;
   keywordCount?: number | null;
+  images?: ImageAltData[] | null;
 }
 
 export function MetaForm() {
@@ -151,6 +153,9 @@ export function MetaForm() {
             {metaData.headlines && metaData.headlines.length > 0 && (
               <TabsTrigger value="headlines">Headlines</TabsTrigger>
             )}
+            {metaData.images && metaData.images.length > 0 && (
+              <TabsTrigger value="images">Images</TabsTrigger>
+            )}
             {metaData.faq && metaData.faq.length > 0 && (
               <TabsTrigger value="faq">FAQ</TabsTrigger>
             )}
@@ -335,6 +340,16 @@ export function MetaForm() {
             </TabsContent>
           )}
 
+          {metaData.images && metaData.images.length > 0 && (
+            <TabsContent value="images">
+              <Card className="w-full shadow-lg rounded-lg">
+                <CardContent className="p-6">
+                  <ImageAltDisplay images={metaData.images} />
+                </CardContent>
+              </Card>
+            </TabsContent>
+          )}
+
           {metaData.faq && metaData.faq.length > 0 && (
             <TabsContent value="faq">
               <Card className="w-full shadow-lg rounded-lg">