[KAMINO-750] find images for each supported product

README.md

@@ -11,7 +11,7 @@ A Next.js application that demonstrates the VisualDx API's ability to analyze sk
 - Error handling for various API states
 - Responsive design
 - Results display with lesion identification and therapy recommendations
-
+- **Product recommendations with images** - Display therapy-recommended skincare products with thumbnails
 ## Getting Started
 
 ### Prerequisites
@@ -99,6 +99,11 @@ The application handles various error states:
 
 Update the entries in `src/lib/lesions-data.ts` (and regenerate any helpers in `src/lib/lesion-info.ts` if needed) to add new lesion types and their corresponding therapy messages.
 
+### Adding New Products
+
+1. Add product entry to `src/lib/products-data.ts`
+2. Add product image to `public/images/products/` as `product-{id}.jpg`
+
 ### Result Messaging
 
 Known lesions render as:

src/app/page.module.css

@@ -191,6 +191,15 @@
   margin-bottom: 0.75rem;
 }
 
+.productImage {
+  width: 100%;
+  height: 200px;
+  object-fit: contain;
+  border-radius: 4px;
+  margin-bottom: 0.75rem;
+  background: #f9f9f9;
+}
+
 .productName {
   display: block;
   font-weight: 600;

src/app/page.tsx

@@ -24,13 +24,15 @@ export default function Home() {
       // Validate file type and size
       if (!file.type.match(/^image\/(png|jpeg|jpg)$/)) {
         setError('Only .png and .jpg images smaller than 10MB are supported');
+        setSelectedFile(null); // Clear selected file
         setPreviewUrl('');
         setResult(null); // Clear previous results
         return;
       }
 
       if (file.size > 10 * 1024 * 1024) { // 10MB
         setError('Only .png and .jpg images smaller than 10MB are supported');
+        setSelectedFile(null); // Clear selected file
         setPreviewUrl('');
         setResult(null); // Clear previous results
         return;
@@ -57,6 +59,17 @@ export default function Home() {
       return;
     }
 
+    // Double-check file validation before submission
+    if (!selectedFile.type.match(/^image\/(png|jpeg|jpg)$/)) {
+      setError('Only .png and .jpg images smaller than 10MB are supported');
+      return;
+    }
+
+    if (selectedFile.size > 10 * 1024 * 1024) {
+      setError('Only .png and .jpg images smaller than 10MB are supported');
+      return;
+    }
+
     setIsAnalyzing(true);
     setError('');
     setResult(null);
@@ -168,15 +181,29 @@ export default function Home() {
             <div className={styles.productsContainer}>
               <h3>Recommended Products</h3>
               <div className={styles.productsGrid}>
-                {result.products.map((product) => (
-                  <div key={product.productId} className={styles.productCard}>
-                    <a href={product.purchaseLink} target="_blank" rel="noopener noreferrer">
-                      <div className={styles.productImagePlaceholder}></div>
-                      <span className={styles.productName}>{product.productName}</span>
-                    </a>
-                    <p className={styles.productDescription}>{product.description}</p>
-                  </div>
-                ))}
+                {result.products.map((product) => {
+                  const imageSrc = product.imageFileName 
+                    ? `/images/products/${product.imageFileName}`
+                    : '/images/products/placeholder.svg';
+
+                  return (
+                    <div key={product.productId} className={styles.productCard}>
+                      <a href={product.purchaseLink} target="_blank" rel="noopener noreferrer">
+                        <img 
+                          src={imageSrc} 
+                          alt={product.productName}
+                          className={styles.productImage}
+                          onError={(e) => {
+                            // Fallback to placeholder if image fails to load
+                            (e.target as HTMLImageElement).src = '/images/products/placeholder.svg';
+                          }}
+                        />
+                        <span className={styles.productName}>{product.productName}</span>
+                      </a>
+                      <p className={styles.productDescription}>{product.description}</p>
+                    </div>
+                  );
+                })}
               </div>
             </div>
           )}

src/lib/lesion-info.ts

@@ -30,7 +30,8 @@ function getProductsFromTherapyIds(therapyIdsString: any): ProductInfo[] {
         productId: product.productId,
         productName: product.productName,
         description: product.description,
-        purchaseLink: product.purchaseLink
+        purchaseLink: product.purchaseLink,
+        imageFileName: (product as any).imageFileName || undefined
       });
     }
   });

src/lib/lesions-data.ts

@@ -465,7 +465,7 @@ export const lesionsData = [
     "lesionMessage": NaN,
     "therapynames": "Exfoliating creams with urea, lactic acid, or salicylic acid",
     "therapyMessage": "We recommend trying exfoliating creams with urea, lactic acid, or salicylic acid.",
-    "therapyIds": NaN
+    "therapyIds": "1,2,3,4,31"
   },
   {
     "findingid": 3096,