feat: enhance product summary with health goals, religious requirements, and improved UI

- Add support for health goals and religious dietary requirements in product analysis
- Include detailed nutritional data (calories, carbs, sugars, fats, proteins, fiber, salt)
- Integrate allergen tags, product labels, and categories from Open Food Facts API
- Improve prompt to conditionally include only user-specified preferences
- Modernize UI with card-based design for AI summary and generated images
- Add emoji icons and improved typography for better visual hierarchy
- Maintain comprehensive translations for all 5 languages (EN, FR, ES, IT, AR)

Author: jeremyLabrado

README.md

@@ -223,7 +223,7 @@ The output format is a Markdown file to faciliate the display of the recipe on t
 
 - **Challenge**: Present the application in multiple languages
 
-- **Solution**: The same prompt is utilized, but the LLM is instructed to generate the output in a specific language, catering to the user's language preference (English/French).
+- **Solution**: The same prompt is utilized, but the LLM is instructed to generate the output in a specific language, catering to the user's language preference (English, French, Spanish, Italian, Arabic). The UI includes comprehensive translations for all features including allergen warnings, ingredient descriptions, and nutritional information.
 
 **Direct Allergen Detection and Nutritional Analysis**
 

lambda/barcode_product_summary/index.js

@@ -38,6 +38,8 @@ const customTranslations: Record<string, Record<string, string>> = {
     ingredients_desc_additive:
       "Click on each additive to view AI-generated detailed descriptions",
     ingredients_no_additive: "The product does not have additives",
+    allergen_warning_title: "Allergen Warning",
+    allergen_warning_message: "This product contains allergens you're sensitive to:",
     summary_title: "Summary of ingredients generated by AI",
     summary_benefits_title: "Benefits",
     summary_disadvantages_title: "Disadvantages",
@@ -128,6 +130,8 @@ const customTranslations: Record<string, Record<string, string>> = {
     ingredients_desc_additive:
       "Cliquez sur chaque additif pour voir les descriptions détaillées générées par l'IA",
     ingredients_no_additive: "Le produit ne contient pas d'additifs",
+    allergen_warning_title: "Avertissement Allergène",
+    allergen_warning_message: "Ce produit contient des allergènes auxquels vous êtes sensible :",
     summary_title: "Résumé des ingrédients généré par IA",
     summary_benefits_title: "Avantages",
     summary_disadvantages_title: "Inconvénients",
@@ -220,6 +224,8 @@ const customTranslations: Record<string, Record<string, string>> = {
     ingredients_no_additive: "Il prodotto non contiene additivi",
     ingredients_desc_additive:
       "Fai clic su ogni additivo per visualizzare le descrizioni dettagliate generate dall’AI",
+    allergen_warning_title: "Avviso Allergeni",
+    allergen_warning_message: "Questo prodotto contiene allergeni a cui sei sensibile:",
     summary_title: "Riepilogo degli ingredienti generato dall’AI",
     summary_benefits_title: "Benefici",
     summary_disadvantages_title: "Svantaggi",
@@ -313,6 +319,8 @@ const customTranslations: Record<string, Record<string, string>> = {
     ingredients_no_additive: "El producto no contiene aditivos",
     ingredients_desc_additive:
       "Haz clic en cada aditivo para ver descripciones detalladas generadas por IA",
+    allergen_warning_title: "Advertencia de Alérgenos",
+    allergen_warning_message: "Este producto contiene alérgenos a los que eres sensible:",
     summary_title: "Resumen de ingredientes generados por IA",
     summary_benefits_title: "Beneficios",
     summary_disadvantages_title: "Desventajas",
@@ -398,6 +406,8 @@ arabic:{
     "ingredients_desc_ingredient": "انقر على كل مكون لعرض الوصف التفصيلي الناتج عن الذكاء الاصطناعي",
     "ingredients_desc_additive": "انقر على كل إضافة لعرض الوصف التفصيلي الناتج عن الذكاء الاصطناعي",
     "ingredients_no_additive": "المنتج لا يحتوي على إضافات",
+    "allergen_warning_title": "تحذير من مسببات الحساسية",
+    "allergen_warning_message": "يحتوي هذا المنتج على مسببات حساسية تؤثر عليك:",
     "summary_title": "ملخص المكونات الناتجة عن الذكاء الاصطناعي",
     "summary_benefits_title": "الفوائد",
     "summary_disadvantages_title": "العيوب",

lambda/recipe_step_by_step/index.js

@@ -39,9 +39,7 @@ const BarcodeIngredients: React.FC<BarcodeIngredientsProps> = ({
   const [ingredientsError, setIngredientsError] = useState("");
 
   const fetchData = async () => {
-    console.log(
-      `call backend with scannedCode: ${productCode} and language: ${language}`
-    );
+
     setApiResponse(null);
     setLoading(true);
 
@@ -53,13 +51,11 @@ const BarcodeIngredients: React.FC<BarcodeIngredientsProps> = ({
       );
 
       if (!response.error) {
-        console.log("response=" + JSON.stringify(response));
         const keyValueArray = Object.entries(response.ingredients_description);
         const newIngredients = keyValueArray.map(([key, value]) => ({
           label: key,
           description: value,
         }));
-        console.log(newIngredients);
 
         setIngredients(newIngredients);
 

resources/ui/src/assets/i18n/all.ts

@@ -142,12 +142,14 @@ const BarcodeProductSummary: React.FC<BarcodeProductSummaryProps> = ({
   return (
     <div>
       {loadingSummary && (
-        <div>
+        <div style={{ padding: "16px" }}>
           <Alert>
-            <strong>Loading Summary of Ingredients...</strong>
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <strong>{currentTranslations["summary_title"].replace("Summary of ingredients generated by AI", "Loading AI Analysis")}...</strong>
+            </div>
           </Alert>
         </div>
-      )}{" "}
+      )}
       {summaryError ? (
         <Alert statusIconAriaLabel="Error" type="error">
           <strong>{summaryError}</strong>
@@ -156,42 +158,64 @@ const BarcodeProductSummary: React.FC<BarcodeProductSummaryProps> = ({
         <>
           {recommendation && (
             <div>
-              <SpaceBetween direction="vertical" size="m">
-              <ColumnLayout columns={2}>
-                
-                <Container
-                  header={
-                    <Header variant="h2">
+              <SpaceBetween direction="vertical" size="l">
+                {/* AI Summary Card */}
+                <div style={{
+                  background: "white",
+                  border: "1px solid #e5e7eb",
+                  borderRadius: "8px",
+                  padding: "20px",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
+                }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px" }}>
+                    <span style={{ fontSize: "24px" }}>✨</span>
+                    <h3 style={{ margin: 0, fontSize: "20px", fontWeight: "600" }}>
                       {currentTranslations["summary_title"]}
-                    </Header>
-                  }
-                  
-                >
-                  <ReactMarkdown children={recommendation}></ReactMarkdown>
-                </Container>
-                <Container
-                  
-                  media={{
-                    position: "top",
-                    content: (
-                      <div className={image ? "" : "pulsate"}>
-                        <img
-                          src={
-                            image
-                              ? `${hostingDomain}${image}`
-                              : "image-placeholder.png"
-                          }
-                          alt={currentTranslations['image_title']}
-                        />
+                    </h3>
+                  </div>
+                  <div style={{
+                    fontSize: "15px",
+                    lineHeight: "1.6",
+                    color: "#374151"
+                  }}>
+                    <ReactMarkdown children={recommendation}></ReactMarkdown>
+                  </div>
+                </div>
+
+                {/* AI Generated Image Card */}
+                {(image || loadingImage) && (
+                  <div style={{
+                    background: "white",
+                    border: "1px solid #e5e7eb",
+                    borderRadius: "8px",
+                    overflow: "hidden",
+                    boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
+                  }}>
+                    <div style={{ padding: "16px", borderBottom: "1px solid #e5e7eb" }}>
+                      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                        <span style={{ fontSize: "20px" }}>🎨</span>
+                        <h4 style={{ margin: 0, fontSize: "16px", fontWeight: "600" }}>
+                          {currentTranslations['image_title']}
+                        </h4>
                       </div>
-                    ),
-                    height: "100%",
-                  }}
-                >
-                  {currentTranslations['image_title']}
-                </Container>
-
-                </ColumnLayout>
+                    </div>
+                    <div style={{ position: "relative", paddingTop: "56.25%" }}>
+                      <img
+                        src={image ? `${hostingDomain}${image}` : "image-placeholder.png"}
+                        alt={currentTranslations['image_title']}
+                        className={image ? "" : "pulsate"}
+                        style={{
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover"
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
               </SpaceBetween>
             </div>
           )}