Spaces:

SmartFashion
/

smartrec

Sleeping

App Files Files Community

alessiodevoto commited on Dec 2, 2024

Commit

d87742b

1 Parent(s): 549e367

update template

Browse files

Files changed (3) hide show

app.py +2 -1
newsletter_examples/1.html +142 -158
src/utils_api.py +2 -0

app.py CHANGED Viewed

@@ -175,7 +175,8 @@ def main():
         newsletter_output = gr.HTML(
             label="Generated Newsletter",
             value="<br><br><br><br><br>",
-            min_height=500
         )
         # Event Binding

         newsletter_output = gr.HTML(
             label="Generated Newsletter",
             value="<br><br><br><br><br>",
+            min_height=500,
+            render=True
         )
         # Event Binding

newsletter_examples/1.html CHANGED Viewed

@@ -1,167 +1,151 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your Personalized Style Curation</title>
-    <style>
-        /* Elegant, sophisticated color palette with light brown background */
-        body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
-            line-height: 1.6;
-            color: #4A4A4A;
-            background-color: #F0E6D2; /* Light warm brown background */
-        }
-        .backgroundcontainer {
-            max-width: 600px;
-            margin: 0 auto;
-            padding: 30px;
-            background-color: #f5f0e6;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-            border: 1px solid #E0D3BA; /* Slight border to complement background */
-        }
-        .header {
-            text-align: center;
-            padding: 20px 0;
-            border-bottom: 1px solid #D4AD7A;
-            margin-bottom: 30px;
-        }
-        .header img {
-            max-width: 200px;
-            height: auto;
-        }
-        .section {
-            margin-bottom: 40px;
-        }
-        h1, h2, h3 {
-            font-family: 'Didot', serif;
-            color: #5D4037; /* Deep brown for headings */
-            margin-bottom: 15px;
-        }
-        /* New responsive section styles */
-        .section-row {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            gap: 20px;
-        }
-        .bought-item, .product {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            width: calc(50% - 10px); /* Adjust for gap */
-            margin: 10px 0;
-            text-align: center;
-            padding: 20px;
-            background-color: #FFF8E7;
-            border-radius: 8px;
-            border: 1px solid #E0D3BA;
-            transition: transform 0.3s ease;
-        }
-        /* Media query for smaller screens */
-        @media screen and (max-width: 600px) {
-            .section-row {
-                flex-direction: column;
             }
             .bought-item, .product {
-                width: 100%;
                 margin: 10px 0;
             }
-        }
-        .bought-item:hover, .product:hover {
-            transform: scale(1.02);
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        }
-        .deal-box {
-            background-color: #F5E6D3; /* Soft light brown */
-            color: black;  /* This will make the text black */
-            padding: 20px;
-            margin: 15px 0;
-            border-radius: 8px;
-            text-align: center;
-            border: 1px solid #D4AD7A;
-        }
-    .button {
-        display: inline-block;
-        padding: 12px 25px;
-        background-color: #8B6914; /* Rich brown */
-        color: #FFFFFF !important; /* Explicitly enforce white */
-        text-decoration: none;
-        border-radius: 5px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        transition: background-color 0.3s ease;
-    }
-    .button:link,
-    .button:visited,
-    .button:hover,
-    .button:active {
-        color: #FFFFFF; /* Ensure white for all link states */
-        text-decoration: none;
-    }
-        .button:hover {
-            background-color: #5D4037; /* Darker brown */
-        }
-        .footer {
-            text-align: center;
-            padding: 20px;
-            background-color: #F5E6D3; /* Soft light brown */
-            border-top: 1px solid #D4AD7A;
-            font-size: 0.9em;
-        }
-        .price {
-            font-size: 1.2em;
-            color: #8B6914; /* Rich brown */
-            font-weight: bold;
-        }
-        a {
-            color: #8B6914; /* Rich brown */
-            text-decoration: none;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-    </style>
-</head>
 <body>
-    <div class="backgroundcontainer">
-        <!-- Header Section -->
-        <div class="header" style="display: flex; justify-content: center; align-items: center;">
             <img src="${brand_logo}" alt="Brand Logo">
         </div>
         <!-- Personal Greeting -->
-        <div class="section">
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; line-height: 1.5; color: #333; letter-spacing: 0.5px; text-align: left;">
 ${greeting} </p>
         </div>
-        <!-- Previously Bought Items Section -->
-        <div class="section">
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> ${intro} </p>
-            <div class="section-row">
                 <div class="bought-item">
                     <img src= ${transaction_url} alt="Previous Product 1">
                     <h3> ${transaction_name} </h3>
@@ -176,23 +160,23 @@ ${greeting} </p>
         <!-- Recommended Items -->
         <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;">
 ${recommendations} </p>
-        <div class="section">
-            <div class="section-row">
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 1">
                     <h3>${recommendation_name}</h3>
-                    <a href="#" class="button" >Explore</a>
                 </div>
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 2">
                     <h3>${recommendation_name}</h3>
-                    <a href="#" class="button">Explore</a>
                 </div>
             </div>
         </div>
-        <!-- Deals Section -->
-        <div class="section">
             <h2 style="color: #8B6914;">Not Your Style?</h2>
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;">
 Well, I always try my best and recommend what I think would suit you well, but hey, we all make mistakes, right? </p>
@@ -211,14 +195,14 @@ ${closing} </p>
         </div>
         <!-- Call to Action -->
-        <div class="section" style="text-align: center;">
             <h2>Ready to Refine Your Wardrobe?</h2>
-            <a href="#" class="button">View New Arrivals</a>
-            <a href="#" class="button" style="background-color: #5D4037;">Book Styling Consultation</a>
         </div>
-        <!-- Footer -->
-        <div class="footer">
             <p style="font-weight: bold;">The ${brand_name} Team</p>
             <p>
                 <small>

 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Your Personalized Style Curation</title>
+        <style>
+            /* Adjusted colors for better visibility */
+            body {
+                margin: 0;
+                padding: 0;
+                width: 100%;
+                font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
+                line-height: 1.6;
+                color: #2C2C2C; /* Darker gray for better contrast */
+                background-color: #FAF9F6; /* Light neutral background */
+            }
+            .nlbackgroundcontainer {
+                max-width: 600px;
+                margin: 0 auto;
+                padding: 30px;
+                background-color: #FFFFFF;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+                border: 1px solid #DDDDDD; /* Neutral border */
+            }
+            .nlheader {
+                text-align: center;
+                padding: 20px 0;
+                border-bottom: 1px solid #CCCCCC;
+                margin-bottom: 30px;
+            }
+            .nlheader img {
+                max-width: 200px;
+                height: auto;
+            }
+            .nlsection {
+                margin-bottom: 40px;
+            }
+            h1, h2, h3 {
+                font-family: 'Didot', serif;
+                color: #333333; /* Dark neutral tone for headings */
+                margin-bottom: 15px;
+            }
+            .nlsection-row {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                gap: 20px;
             }
             .bought-item, .product {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                width: calc(50% - 10px);
                 margin: 10px 0;
+                text-align: center;
+                padding: 20px;
+                background-color: #F9F9F9;
+                border-radius: 8px;
+                border: 1px solid #DDDDDD;
+                transition: transform 0.3s ease;
             }
+            @media screen and (max-width: 600px) {
+                .nlsection-row {
+                    flex-direction: column;
+                }
+                .bought-item, .product {
+                    width: 100%;
+                    margin: 10px 0;
+                }
+            }
+            .bought-item:hover, .product:hover {
+                transform: scale(1.02);
+                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            }
+            .deal-box {
+                background-color: #F4F4F4;
+                color: #333333;
+                padding: 20px;
+                margin: 15px 0;
+                border-radius: 8px;
+                text-align: center;
+                border: 1px solid #CCCCCC;
+            }
+            .nlbutton {
+                display: inline-block;
+                padding: 12px 25px;
+                background-color: #5A5A5A; /* Neutral dark button */
+                color: #FFFFFF;
+                text-decoration: none;
+                border-radius: 5px;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                transition: background-color 0.3s ease;
+            }
+            .nlbutton:hover {
+                background-color: #333333; /* Slightly darker on hover */
+            }
+            .nlfooter {
+                text-align: center;
+                padding: 20px;
+                background-color: #F4F4F4;
+                border-top: 1px solid #CCCCCC;
+                font-size: 0.9em;
+            }
+            a {
+                color: #5A5A5A; /* Neutral dark links */
+                text-decoration: none;
+            }
+            a:hover {
+                text-decoration: underline;
+            }
+        </style>
+    </head>
 <body>
+    <div class="nlbackgroundcontainer">
+        <!-- nlheader nlsection -->
+        <div class="nlheader" style="display: flex; justify-content: center; align-items: center;">
             <img src="${brand_logo}" alt="Brand Logo">
         </div>
         <!-- Personal Greeting -->
+        <div class="nlsection">
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; line-height: 1.5; color: #333; letter-spacing: 0.5px; text-align: left;">
 ${greeting} </p>
         </div>
+        <!-- Previously Bought Items nlsection -->
+        <div class="nlsection">
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;"> ${intro} </p>
+            <div class="nlsection-row">
                 <div class="bought-item">
                     <img src= ${transaction_url} alt="Previous Product 1">
                     <h3> ${transaction_name} </h3>
         <!-- Recommended Items -->
         <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;">
 ${recommendations} </p>
+        <div class="nlsection">
+            <div class="nlsection-row">
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 1">
                     <h3>${recommendation_name}</h3>
+                    <a href="#" class="nlbutton" >Explore</a>
                 </div>
                 <div class="product">
                     <img src=${recommendation_url} alt="Recommended Product 2">
                     <h3>${recommendation_name}</h3>
+                    <a href="#" class="nlbutton">Explore</a>
                 </div>
             </div>
         </div>
+        <!-- Deals nlsection -->
+        <div class="nlsection">
             <h2 style="color: #8B6914;">Not Your Style?</h2>
             <p style="font-size: 18px; font-family: 'Georgia', 'Times New Roman', serif; font-style: italic; color: #333; line-height: 1.5; letter-spacing: 0.5px; text-align: left;">
 Well, I always try my best and recommend what I think would suit you well, but hey, we all make mistakes, right? </p>
         </div>
         <!-- Call to Action -->
+        <div class="nlsection" style="text-align: center;">
             <h2>Ready to Refine Your Wardrobe?</h2>
+            <a href="#" class="nlbutton">View New Arrivals</a>
+            <a href="#" class="nlbutton" style="background-color: #5D4037;">Book Styling Consultation</a>
         </div>
+        <!-- nlfooter -->
+        <div class="nlfooter">
             <p style="font-weight: bold;">The ${brand_name} Team</p>
             <p>
                 <small>

src/utils_api.py CHANGED Viewed

@@ -143,6 +143,8 @@ def get_recommendations(customer_ids, max_recs=4, max_transactions=2):
     recommendations = make_api_request("get-recommendations", customer_ids)
     if recommendations:
         return parse_recommendations(recommendations, max_recs, max_transactions)
     return None

     recommendations = make_api_request("get-recommendations", customer_ids)
     if recommendations:
         return parse_recommendations(recommendations, max_recs, max_transactions)
+    else:
+        raise ValueError("Error occurred while fetching recommendations.")
     return None