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

src/app/actions.ts

@@ -18,6 +18,7 @@ export interface HeadlineNode {
 export interface ImageAltData {
   src: string;
   alt: string;
+  size: number | null;
 }
 
 export async function extractMetaData(url: string, keyword?: string) {
@@ -127,7 +128,7 @@ export async function extractMetaData(url: string, keyword?: string) {
       keywordCount = matches ? matches.length : 0;
     }
 
-    const imageAltData: ImageAltData[] = [];
+    const imageSrcs: { src: string; alt: string }[] = [];
     $("img").each((i, el) => {
       const src = $(el).attr("src");
       const alt = $(el).attr("alt") || "";
@@ -135,7 +136,7 @@ export async function extractMetaData(url: string, keyword?: string) {
       if (src) {
         try {
           const absoluteSrc = new URL(src, formattedUrl).href;
-          imageAltData.push({
+          imageSrcs.push({
             src: absoluteSrc,
             alt: alt.trim(),
           });
@@ -145,6 +146,25 @@ export async function extractMetaData(url: string, keyword?: string) {
       }
     });
 
+    const imageSizePromises = imageSrcs.map(async (img) => {
+      try {
+        // Use a HEAD request for efficiency
+        const res = await fetch(img.src, { method: "HEAD" });
+        if (res.ok) {
+          const contentLength = res.headers.get("content-length");
+          return {
+            ...img,
+            size: contentLength ? parseInt(contentLength, 10) : null,
+          };
+        }
+        return { ...img, size: null };
+      } catch (error) {
+        return { ...img, size: null };
+      }
+    });
+
+    const imageAltData: ImageAltData[] = await Promise.all(imageSizePromises);
+
     return {
       data: {
         title,

src/components/image-alt-display.tsx

@@ -6,6 +6,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
 import { ImageOff } from "lucide-react";
+import { formatBytes } from "@/lib/utils";
 
 interface ImageAltDisplayProps {
   images: ImageAltData[];
@@ -25,6 +26,13 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
     setImageErrors((prev) => ({ ...prev, [src]: true }));
   };
 
+  const getSizeBadgeVariant = (size: number | null) => {
+    if (size === null) return "outline";
+    if (size > 500000) return "destructive"; // > 500KB
+    if (size > 100000) return "secondary"; // > 100KB
+    return "outline";
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-muted/50 rounded-lg">
@@ -67,10 +75,20 @@ export function ImageAltDisplay({ images }: ImageAltDisplayProps) {
                 />
               )}
             </div>
-            <div className="flex-grow">
-              <p className="text-sm text-muted-foreground break-all">
-                {image.src}
-              </p>
+            <div className="flex-grow min-w-0">
+              <div className="flex justify-between items-start gap-2">
+                <p className="text-sm text-muted-foreground break-all flex-grow">
+                  {image.src}
+                </p>
+                {image.size !== null && (
+                  <Badge
+                    variant={getSizeBadgeVariant(image.size)}
+                    className="flex-shrink-0"
+                  >
+                    {formatBytes(image.size)}
+                  </Badge>
+                )}
+              </div>
               <div className="mt-2">
                 {image.alt ? (
                   <p className="text-sm text-foreground bg-muted/50 p-2 rounded-md">

src/lib/utils.ts

@@ -4,3 +4,15 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function formatBytes(bytes: number, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}