Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1 @@
+test**

README.md

@@ -1,12 +1,10 @@
 ---
-title: Smartrec
-emoji: 📉
-colorFrom: purple
-colorTo: gray
+title: smartrec
+app_file: app.py
 sdk: gradio
 sdk_version: 5.6.0
-app_file: app.py
-pinned: false
 ---
+# smartrec
+
+AI-powered personalized newsletters.
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,139 @@
+import openai
+import gradio as gr
+import json
+from openai import OpenAI
+from src.utils import LLMHandler, format_prompt
+from src.utils_api import get_recommendations
+import yaml
+import logging
+import time
+import argparse
+import os
+import tempfile
+
+
+# logging.basicConfig(filename='logs/app.log', encoding='utf-8', level=logging.DEBUG)
+logging.basicConfig(level=logging.DEBUG)
+
+
+def main():
+
+    # get arguments with argparse
+    parser = argparse.ArgumentParser(description='Newsletter Generator')
+    parser.add_argument('--config-file', type=str, default='./config/config.yaml', help='Path to the configuration file.')
+    args = parser.parse_args()
+
+    logging.info("Starting the Newsletter Generator app...")
+
+    # Load configuration from YAML file
+    logging.debug("Loading configuration from config.yaml...")
+    with open(args.config_file, "r") as file:
+        config = yaml.safe_load(file)
+
+        # set environment variables for the recommender API
+        os.environ["RECOMMENDER_URL"] = config['recommender_api']['base_url']
+        os.environ["RECOMMENDER_KEY"] = config['recommender_api']['key']
+
+        # LLM settings
+        os.environ["OPENAI_KEY"] = config['llm']['api_key']
+        llm_settings = config['llm']
+
+        newsletter_meta_info = config['newsletter']
+        
+    logging.debug(f"Configuration loaded: {config}")
+
+    # Initialize the LLM handler
+    logging.debug("Initializing the LLM handler...")
+    llm_handler = LLMHandler(**llm_settings)
+    logging.debug(f"LLM handler initialized with the following settings: {config['llm']}")
+
+
+    # Define the function to generate the newsletter using the OpenAI API
+    def generate_newsletter(
+            customer_id,  
+            model_name,
+            temperature,
+            max_tokens,
+            system_message, 
+            newsletter_preferences
+            ):
+
+
+        # get recommendations
+        logging.debug("Getting recommendations...")
+        customer_info, recommendations, transactions = get_recommendations(customer_id, max_recs=newsletter_meta_info['max_recommendations'], max_transactions=newsletter_meta_info['max_recents_items']) 
+        logging.debug(f"Recommendations: {recommendations}")
+
+        logging.debug(f"Transactions: {transactions}")
+
+        # create the prompt
+        logging.debug("Formatting the prompt...")
+        prompt = format_prompt(
+            customer_info,
+            recommendations, 
+            transactions,
+            newsletter_preferences,
+            newsletter_meta_info
+            )
+        
+        # generate the newsletter text and images using llm_handler
+        logging.debug("Generating the newsletter text...")
+        newsletter_text = llm_handler.generate_text(
+            prompt, 
+            model_name=model_name, 
+            temperature=temperature, 
+            max_tokens=max_tokens,
+            system_message=system_message
+            )
+        
+        # Save HTML to a temporary file
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as temp_file:
+            temp_file.write(newsletter_text.encode("utf-8"))
+            temp_file_path = temp_file.name
+
+
+        return newsletter_text, temp_file_path
+
+    # Gradio interface for the app
+    logging.debug("Creating interface...")
+    with gr.Blocks() as demo:
+        gr.Markdown("### Newsletter Generator")
+        
+        customer_id = gr.Textbox(label="Client ID", value="04a183a27a6877e560e1025216d0a3b40d88668c68366da17edfb18ed89c574c")
+        newsletter_preferences = gr.Textbox(label="Newsletter preferences", placeholder="The newsletter should be catchy.")
+        
+        # llm_preferences = gr.Textbox(label="LLM Preferences", placeholder="Enter LLM preferences.", visible=False)
+        # create an openable block for the llm preferences
+        with gr.Accordion("LLM Preferences", open=False):
+            model_name = gr.Dropdown(label="Model Name", choices=["gpt-3.5-turbo", "gpt-4-turbo"], value='gpt-3.5-turbo')
+            temperature = gr.Slider(label="Temperature", minimum=0.0, maximum=1.0, step=0.05, value=llm_handler.default_temperature)
+            max_tokens = gr.Number(label="Max Tokens", value=llm_handler.default_max_tokens)
+            system_message = gr.Textbox(label="System Message", placeholder="Enter the system message or Leave Blank.", value=llm_handler.default_system_message)
+        
+        generate_button = gr.Button("Generate Newsletter")
+        
+        # create a button to open the  newsletter in a new tab
+        download = gr.DownloadButton(label="Download Newsletter")
+ 
+        with gr.Accordion("Newsletter", open=False):
+            newsletter_output = gr.HTML(label="Generated Newsletter")
+        
+        generate_button.click(
+            fn=generate_newsletter, 
+            inputs=[
+                customer_id, 
+                model_name,
+                temperature,
+                max_tokens,
+                system_message, 
+                newsletter_preferences], 
+            outputs=[newsletter_output, download]
+        )
+    
+    demo.launch(
+        share=True,
+    )
+
+
+if __name__ == "__main__":
+    main()

config/config.yaml

@@ -0,0 +1,32 @@
+
+# llm configs 
+llm:
+  api_key: "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"
+  model_name: "gpt-4o"
+  default_temperature: 0.8
+  default_max_tokens: 3000
+  default_system_message: null
+
+
+recommender_api:
+  base_url: "https://urfjxlnyxlehjqlucvuu.functions.supabase.co"
+  key: "CFSekdHEW2EPasoqjWTuPpvVHYQukD3ootXhd3JVUXdpuEea5d"
+
+# app frontend
+app:
+  server_port: 7860
+
+# templates for newsletters and prompts
+newsletter:
+  newsletter_example_path: "./newsletter_examples/2.txt"
+  prompt_template_path: "./prompt_templates/1.txt"
+  brand_logo: "https://seeklogo.com/images/L/luisa-spagnoli-logo-EF482BEE89-seeklogo.com.png"
+  brand_name: "AI x Fashion"
+  max_recommendations: 4
+  max_recents_items: 2
+
+  #personalised_text_example_path:  "./newsletter_examples/1.txt"
+  #personalised_text_prompt_template_path:  "./prompt_templates/1.txt"
+
+  # logo luisa spagnoli https://seeklogo.com/images/L/luisa-spagnoli-logo-EF482BEE89-seeklogo.com.png
+  # logo h&m https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/H%26M-Logo.svg/709px-H%26M-Logo.svg.png

logs/app.log

@@ -0,0 +1,3 @@
+INFO:root:Starting the Newsletter Generator app...
+INFO:root:Loading configuration from config.yaml...
+INFO:root:Initializing the LLM handler...

newsletter_examples/0.txt

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Personal Style Update</title>
+    <style>
+        /* Reset styles for email clients */
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            color: #000000;
+        }
+
+        /* Container styles */
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #ffffff;
+            border: 1px solid #cccccc;
+        }
+
+        /* Header styles */
+        .header {
+            text-align: center;
+            padding: 20px 0;
+            border-bottom: 2px solid #000000;
+        }
+
+        .header img {
+            max-width: 150px;
+            height: auto;
+        }
+
+        /* Section styles */
+        .section {
+            margin: 30px 0;
+        }
+
+        /* Deal styles */
+        .deal-box {
+            background-color: #e6e6e6;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 5px;
+            border: 2px solid #000000;
+        }
+
+        /* Product and bought item styles */
+        .product, .bought-item {
+            display: inline-block;
+            width: 45%;
+            margin: 10px;
+            text-align: center;
+            vertical-align: top;
+            border: 1px solid #cccccc;
+            padding: 10px;
+        }
+
+        .product img, .bought-item img {
+            width: 100%;
+            max-width: 200px;
+            max-height: 250px;
+            height: auto;
+        }
+
+        /* Button styles */
+        .button {
+            display: inline-block;
+            padding: 12px 25px;
+            background-color: #000000;
+            color: #ffffff;
+            text-decoration: none;
+            border-radius: 3px;
+            margin: 10px;
+            font-weight: bold;
+        }
+
+        /* Footer styles */
+        .footer {
+            text-align: center;
+            padding: 20px;
+            background-color: #e6e6e6;
+            margin-top: 30px;
+            border-top: 2px solid #000000;
+        }
+
+        /* Enhanced text styles */
+        h1, h2, h3 {
+            color: #000000;
+            font-weight: bold;
+        }
+
+        /* Link styles */
+        a {
+            color: #0066cc;
+            text-decoration: underline;
+        }
+
+        /* Price style */
+        .price {
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #cc0000;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header Section -->
+        <div class="header">
+            <img src="${brand_logo}" alt="Brand Logo">
+        </div>
+
+        <!-- Personal Greeting -->
+        <div class="section">
+            <h1>Hello [Customer_Name],</h1>
+            <p style="font-size: 16px;">We've curated some special picks just for you based on your style preferences.</p>
+            <p style="font-size: 16px;">[Personalized text based on preferences]</p>
+        </div>
+
+        <!-- Previously Bought Items Section -->
+        <div class="section">
+            <h2>Items You Recently Loved</h2>
+            <p style="font-size: 16px;">Here are a few items you've purchased recently. We thought you might like similar pieces!</p>
+            <div class="bought-item">
+                <img src="/api/placeholder/200/250" alt="Previous Product 1">
+                <h3>Casual Linen Shirt</h3>
+                <p class="price">$49.99</p>
+                <p style="font-size: 14px; color: #666666;">Perfect for casual outings, pair it with your favorite jeans!</p>
+            </div>
+            <div class="bought-item">
+                <img src="/api/placeholder/200/250" alt="Previous Product 2">
+                <h3>Classic Denim Jacket</h3>
+                <p class="price">$89.99</p>
+                <p style="font-size: 14px; color: #666666;">A staple in every wardrobe, layer it over a T-shirt or dress.</p>
+            </div>
+        </div>
+
+        <!-- Deals Section -->
+        <div class="section">
+            <h2 style="color: #cc0000;">This Week's Exclusive Deals</h2>
+            <div class="deal-box">
+                <h3>🌟 30% OFF ALL DRESSES</h3>
+                <p style="font-weight: bold;">Use code: SUMMER30</p>
+            </div>
+            <div class="deal-box">
+                <h3>👠 BUY 2 GET 1 FREE</h3>
+                <p style="font-weight: bold;">On all accessories</p>
+            </div>
+        </div>
+
+        <!-- Recommended Items -->
+        <div class="section">
+            <h2>Picked Just For You</h2>
+            <div class="product">
+                <img src="/api/placeholder/200/250" alt="Product 1">
+                <h3>Silk Midi Dress</h3>
+                <p class="price">$129.99</p>
+                <a href="#" class="button">Shop Now</a>
+            </div>
+            <div class="product">
+                <img src="/api/placeholder/200/250" alt="Product 2">
+                <h3>Classic Blazer</h3>
+                <p class="price">$189.99</p>
+                <a href="#" class="button">Shop Now</a>
+            </div>
+        </div>
+
+        <!-- Call to Action -->
+        <div class="section" style="text-align: center;">
+            <h2>Ready to Refresh Your Wardrobe?</h2>
+            <a href="#" class="button">View All New Arrivals</a>
+            <a href="#" class="button" style="background-color: #006600;">Book Styling Session</a>
+        </div>
+
+        <!-- Footer -->
+        <div class="footer">
+            <p style="font-weight: bold;">Stay stylish,<br>The ${brand_name} Team</p>
+            <p>
+                <small style="color: #000000;">
+                    You received this email because you subscribed to our newsletter.
+                    <a href="#">Unsubscribe</a> | <a href="#">View in browser</a>
+                </small>
+            </p>
+        </div>
+    </div>
+</body>
+</html>

newsletter_examples/1.txt

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Personal Style Update</title>
+    <style>
+        /* Reset styles for email clients */
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            color: #000000;
+        }
+        
+        /* Container styles */
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #ffffff;
+            border: 1px solid #cccccc;
+        }
+        
+        /* Header styles */
+        .header {
+            text-align: center;
+            padding: 20px 0;
+            border-bottom: 2px solid #000000;
+        }
+        
+        /* Section styles */
+        .section {
+            margin: 30px 0;
+        }
+        
+        /* Deal styles */
+        .deal-box {
+            background-color: #e6e6e6;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 5px;
+            border: 2px solid #000000;
+        }
+        
+        /* Product styles */
+        .product, .bought-item {
+            display: inline-block;
+            width: 45%;
+            margin: 10px;
+            text-align: center;
+            vertical-align: top;
+            border: 1px solid #cccccc;
+            padding: 10px;
+        }
+        
+        /* Button styles */
+        .button {
+            display: inline-block;
+            padding: 12px 25px;
+            background-color: #000000;
+            color: #ffffff;
+            text-decoration: none;
+            border-radius: 3px;
+            margin: 10px;
+            font-weight: bold;
+        }
+        
+        /* Footer styles */
+        .footer {
+            text-align: center;
+            padding: 20px;
+            background-color: #e6e6e6;
+            margin-top: 30px;
+            border-top: 2px solid #000000;
+        }
+
+        /* Enhanced text styles */
+        h1, h2, h3 {
+            color: #000000;
+            font-weight: bold;
+        }
+
+        /* Link styles */
+        a {
+            color: #0066cc;
+            text-decoration: underline;
+        }
+
+        /* Price style */
+        .price {
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #cc0000;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header Section -->
+        <div class="header">
+            <img src="${brand_logo}" alt="Brand Logo">
+        </div>
+
+        <!-- Personal Greeting -->
+        <div class="section">
+            <h1>Hello [Customer_Name],</h1>
+            <p style="font-size: 16px;"> It's Paolo again, your personal fashion assistant! How is everything going there? [PERSONALIZED TEXT BASED ON USER TASTE AND PREFERENCES] </p>
+        </div>
+
+        <!-- Previously Bought Items Section -->
+        <div class="section">
+            <p style="font-size: 16px;"> I hope you are enjoying your latest purchased items! You recently bought:</p>
+            <div class="bought-item">
+                <img src="/api/placeholder/200/250" alt="Previous Product 1">
+                <h3>Casual Linen Shirt</h3>
+                <p class="price">$49.99</p>
+                <p style="font-size: 14px; color: #666666;">Perfect for casual outings, pair it with your favorite jeans!</p>
+            </div>
+            <div class="bought-item">
+                <img src="/api/placeholder/200/250" alt="Previous Product 2">
+                <h3>Classic Denim Jacket</h3>
+                <p class="price">$89.99</p>
+                <p style="font-size: 14px; color: #666666;">A staple in every wardrobe, layer it over a T-shirt or dress.</p>
+            </div>
+            <!-- Add a third item if desired -->
+        </div>
+
+
+        <!-- Recommended Items -->
+        <div class="section">
+        <p style="font-size: 16px;"> I hope you are enjoying your latest purchased items! Based on those, I would recommend the following: </p>
+
+            <h2>Picked Just For You</h2>
+            <div class="product">
+                <img src="/api/placeholder/200/250" alt="Product 1">
+                <h3>Silk Midi Dress</h3>
+                <p class="price">$129.99</p>
+                <a href="#" class="button">Shop Now</a>
+            </div>
+            <div class="product">
+                <img src="/api/placeholder/200/250" alt="Product 2">
+                <h3>Classic Blazer</h3>
+                <p class="price">$189.99</p>
+                <a href="#" class="button">Shop Now</a>
+            </div>
+        </div>
+
+        
+        <!-- Deals Section -->
+        <div class="section">
+            <h2 style="color: #cc0000;">Nothing you like here ?</h2>
+            <p style="font-size: 16px;"> Well, I always try our best and recommend what we think would suit you well, but hey, we all make mistakes, right? </p>
+            <p style="font-size: 16px;"> No worries though, I still have a lot of stuff for you! Take a look at these weekly deals! </p>
+            <div class="deal-box">
+                <h3>🌟 30% OFF ALL DRESSES</h3>
+                <p style="font-weight: bold;">Use code: SUMMER30</p>
+            </div>
+            <div class="deal-box">
+                <h3>👠 BUY 2 GET 1 FREE</h3>
+                <p style="font-weight: bold;">On all accessories</p>
+            </div>
+        </div>
+
+        <!-- Call to Action -->
+        <div class="section" style="text-align: center;">
+            <h2>Ready to Refresh Your Wardrobe?</h2>
+            <a href="#" class="button">View All New Arrivals</a>
+            <a href="#" class="button" style="background-color: #006600;">Book Styling Session</a>
+        </div>
+
+        <!-- Footer -->
+        <div class="footer">
+            <p style="font-weight: bold;">Stay stylish,<br>The ${brand_name} Team</p>
+            <p>
+                <small style="color: #000000;">
+                    You received this email because you subscribed to our newsletter.
+                    <a href="#">Unsubscribe</a> | <a href="#">View in browser</a>
+                </small>
+            </p>
+        </div>
+    </div>
+</body>
+</html>

newsletter_examples/2.txt

@@ -0,0 +1,200 @@
+<!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 */
+        }
+        
+        .container {
+            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 #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;
+        }
+        
+        .bought-item, .product {
+            display: inline-block;
+            width: 45%;
+            margin: 10px;
+            text-align: center;
+            vertical-align: top;
+            padding: 20px;
+            background-color: #FFF8E7; /* Very light cream background */
+            border-radius: 8px;
+            border: 1px solid #E0D3BA;
+            transition: transform 0.3s ease;
+        }
+        
+        .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 */
+            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;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: background-color 0.3s ease;
+        }
+        
+        .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="container">
+        <!-- Header Section -->
+        <div class="header">
+            <img src="${brand_logo}" alt="Brand Logo">
+        </div>
+
+        <!-- Personal Greeting -->
+        <div class="section">
+            <h1>Hello [Customer_Name],</h1>
+            <p> I wanted to take a moment to highlight some of the great pieces you've recently added to your wardrobe. We've curated some items that I think you'll love looking back on - each one tells a bit of your style story.
+Here's a fresh look at the items you brought home recently: [LONG PERSONALIZED TEXT BASED ON USER TASTE AND PREFERENCES] </p>
+        </div>
+
+        <!-- Previously Bought Items Section -->
+        <div class="section">
+
+            <div class="bought-item">
+                <img src=[IMAGE LINK] alt="Previous Product 1">
+                <h3>Casual Linen Shirt</h3>
+                <p class="price">$49.99</p>
+                <p>Perfect for refined casual moments, effortlessly paired with tailored pieces.</p>
+            </div>
+            <div class="bought-item">
+                <img src=[IMAGE LINK] alt="Previous Product 2">
+                <h3>Classic Denim Jacket</h3>
+                <p class="price">$89.99</p>
+                <p>A versatile staple that elevates any ensemble with understated sophistication.</p>
+            </div>
+        </div>
+
+        <!-- Recommended Items -->
+        <p style="font-size: 16px;"> I've been looking through your recent data and noticed some really interesting patterns in your recent fashion choices. I wanted to share some new recommendations based on your previous purchases that I think will continue to elevate your personal style. These suggestions aren't just random picks, but carefully curated pieces that connect with the aesthetic you've been developing.  [PERSONALIZED TEXT TO RECOMMEND NEW ITEMS BASED ON PREVIOUSLY BOUGHT ONES] </p>
+        <div class="section">
+            <div class="product">
+                <img src=[IMAGE LINK] alt="Product 1">
+                <h3>Silk Midi Dress</h3>
+                <p class="price">$129.99</p>
+                <a href="#" class="button">Explore</a>
+            </div>
+            <div class="product">
+                <img src=[IMAGE LINK] alt="Product 2">
+                <h3>Classic Blazer</h3>
+                <p class="price">$189.99</p>
+                <a href="#" class="button">Discover</a>
+            </div>
+        </div>
+        
+        <!-- Deals Section -->
+        <div class="section">
+            <h2 style="color: #8B6914;">Not Quite Your Style?</h2>
+            <p style="font-size: 16px;"> Well, I always try our best and recommend what we think would suit you well, but hey, we all make mistakes, right? </p>
+            <p style="font-size: 16px;"> No worries though, I still have a lot of stuff for you! Take a look at these weekly deals! </p>
+            <div class="deal-box">
+                <h3>🌟 30% OFF ALL DRESSES</h3>
+                <p>Exclusive Code: LSF30</p>
+            </div>
+            <div class="deal-box">
+                <h3>👠 BUY 2 GET 1 FREE</h3>
+                <p>On our curated accessories collection</p>
+            </div>
+        </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>
+                    You're receiving this curated selection because you're part of our stylish community.
+                    <a href="#">Unsubscribe</a> | <a href="#">View in Browser</a>
+                </small>
+            </p>
+        </div>
+    </div>
+</body>
+</html>

newsletter_examples/personalised_text_1.txt

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Style Update for Sophia</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+            color: #333;
+        }
+        .container {
+            max-width: 600px;
+            margin: 20px auto;
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+        }
+        .header {
+            background-color: #fddde6;
+            color: #d63384;
+            padding: 20px;
+            text-align: center;
+        }
+        .header h1 {
+            font-size: 24px;
+            margin: 0;
+        }
+        .body {
+            padding: 20px;
+        }
+        .body h2 {
+            font-size: 20px;
+            margin-bottom: 10px;
+            color: #d63384;
+        }
+        .highlight {
+            background-color: #ffeef2;
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        .highlight h3 {
+            margin: 0 0 10px;
+            color: #333;
+        }
+        .button {
+            display: inline-block;
+            background-color: #d63384;
+            color: #fff;
+            text-decoration: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            font-weight: bold;
+            text-align: center;
+        }
+        .footer {
+            text-align: center;
+            padding: 20px;
+            background-color: #f9f9f9;
+            font-size: 12px;
+            color: #777;
+        }
+        .footer a {
+            color: #d63384;
+            text-decoration: none;
+        }
+        @media (max-width: 600px) {
+            .container {
+                margin: 10px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header Section -->
+        <div class="header">
+            <img src="${brand_logo}" alt="Brand Logo">
+            <h1>Style Update Just for You, Sophia! 💖</h1>
+        </div>
+
+        <!-- Body Section -->
+        <div class="body">
+            <h2>Hi Sophia, 🌸</h2>
+            <p>Your New York style just got a glow-up! Here’s what’s trending and totally YOU:</p>
+            
+            <!-- Highlight Section -->
+            <div class="highlight">
+                <h3>✨ Trending Now:</h3>
+                <ul>
+                    <li><b>Oversized Chic:</b> Pair your hoodie with chunky sneakers (we know it’s on your wishlist 😉).</li>
+                    <li><b>Floral Fantasy:</b> Pastel pink and sage green are making waves—just like your boho maxi dress!</li>
+                </ul>
+            </div>
+
+            <!-- Recommendations Section -->
+            <h3>🛍️ This Week’s Picks for You:</h3>
+            <ul>
+                <li>🌸 <b>Dreamy Wide-Leg Jeans</b> (Pastel Pink Edition)</li>
+                <li>🌿 <b>Eco-Friendly Tote Bag</b> to match your sustainable vibe</li>
+                <li>🎀 <b>Vintage-Inspired Jacket</b> for the perfect streetwear look</li>
+            </ul>
+
+            <!-- Subscription Perks Section -->
+            <h3>💡 Your VIP Perks:</h3>
+            <p>
+                As a VIP, you get:
+                <ul>
+                    <li>Early access to new collections</li>
+                    <li>Exclusive discounts (hint: wide-leg jeans are on sale!)</li>
+                    <li>Free style consultations tailored to your fav styles 💌</li>
+                </ul>
+            </p>
+
+            <!-- Call-to-Action -->
+            <a href="#" class="button">Shop Now</a>
+        </div>
+
+        <!-- Footer Section -->
+        <div class="footer">
+            <p>Thanks for being part of our style squad, Sophia! 💖</p>
+            <p><a href="#">Unsubscribe</a> | <a href="#">Update Preferences</a></p>
+        </div>
+    </div>
+</body>
+</html>

personalised_text.py

@@ -0,0 +1,139 @@
+import openai
+import gradio as gr
+import json
+from openai import OpenAI
+from src.utils import LLMHandler, format_prompt_personalsed_text
+from src.utils_api import get_recommendations
+import yaml
+import logging
+import time
+import argparse
+import os
+import tempfile
+
+
+# logging.basicConfig(filename='logs/app.log', encoding='utf-8', level=logging.DEBUG)
+logging.basicConfig(level=logging.DEBUG)
+
+
+def main():
+
+    # get arguments with argparse
+    parser = argparse.ArgumentParser(description='Newsletter Generator')
+    parser.add_argument('--config-file', type=str, default='./config/config.yaml', help='Path to the configuration file.')
+    args = parser.parse_args()
+
+    logging.info("Starting the Newsletter Generator app...")
+
+    # Load configuration from YAML file
+    logging.debug("Loading configuration from config.yaml...")
+    with open(args.config_file, "r") as file:
+        config = yaml.safe_load(file)
+
+        # set environment variables for the recommender API
+        os.environ["RECOMMENDER_URL"] = config['recommender_api']['base_url']
+        os.environ["RECOMMENDER_KEY"] = config['recommender_api']['key']
+
+        # LLM settings
+        os.environ["OPENAI_KEY"] = config['llm']['api_key']
+        llm_settings = config['llm']
+
+        newsletter_meta_info = config['newsletter']
+        
+    logging.debug(f"Configuration loaded: {config}")
+
+    # Initialize the LLM handler
+    logging.debug("Initializing the LLM handler...")
+    llm_handler = LLMHandler(**llm_settings)
+    logging.debug(f"LLM handler initialized with the following settings: {config['llm']}")
+
+
+    # Define the function to generate the newsletter using the OpenAI API
+    def generate_newsletter(
+            customer_id,  
+            model_name,
+            temperature,
+            max_tokens,
+            system_message, 
+            newsletter_preferences
+            ):
+
+
+        # get recommendations
+        logging.debug("Getting recommendations...")
+        customer_info, recommendations, transactions = get_recommendations(customer_id) 
+        logging.debug(f"Recommendations: {recommendations}")
+
+        logging.debug(f"Transactions: {transactions}")
+
+        
+        # create the prompt
+        logging.debug("Formatting the prompt...")
+        prompt = format_prompt_personalsed_text(
+            customer_info,
+            recommendations, 
+            transactions,
+            newsletter_preferences,
+            newsletter_meta_info
+            )
+        
+        # generate the newsletter text and images using llm_handler
+        logging.debug("Generating the newsletter text...")
+        newsletter_text = llm_handler.generate_text(
+            prompt, 
+            model_name=model_name, 
+            temperature=temperature, 
+            max_tokens=max_tokens,
+            system_message=system_message
+            )
+        
+        # Save HTML to a temporary file
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".html") as temp_file:
+            temp_file.write(newsletter_text.encode("utf-8"))
+            temp_file_path = temp_file.name
+
+
+        return newsletter_text, temp_file_path
+
+    # Gradio interface for the app
+    logging.debug("Creating interface...")
+    with gr.Blocks() as demo:
+        gr.Markdown("### Newsletter Generator")
+        
+        customer_id = gr.Textbox(label="Client ID", value="04a183a27a6877e560e1025216d0a3b40d88668c68366da17edfb18ed89c574c")
+        newsletter_preferences = gr.Textbox(label="Newsletter preferences", placeholder="The newsletter should be catchy.")
+        
+        # llm_preferences = gr.Textbox(label="LLM Preferences", placeholder="Enter LLM preferences.", visible=False)
+        # create an openable block for the llm preferences
+        with gr.Accordion("LLM Preferences", open=False):
+            model_name = gr.Dropdown(label="Model Name", choices=["gpt-3.5-turbo", "gpt-4-turbo"], value='gpt-3.5-turbo')
+            temperature = gr.Slider(label="Temperature", minimum=0.0, maximum=1.0, step=0.05, value=llm_handler.default_temperature)
+            max_tokens = gr.Number(label="Max Tokens", value=llm_handler.default_max_tokens)
+            system_message = gr.Textbox(label="System Message", placeholder="Enter the system message or Leave Blank.", value=llm_handler.default_system_message)
+        
+        generate_button = gr.Button("Generate Newsletter")
+        
+        # create a button to open the  newsletter in a new tab
+        download = gr.DownloadButton(label="Download Newsletter")
+ 
+        with gr.Accordion("Newsletter", open=False):
+            newsletter_output = gr.HTML(label="Generated Newsletter", value=open(config["newsletter"]["personalised_text_example_path"]).read())
+        
+        generate_button.click(
+            fn=generate_newsletter, 
+            inputs=[
+                customer_id, 
+                model_name,
+                temperature,
+                max_tokens,
+                system_message, 
+                newsletter_preferences], 
+            outputs=[newsletter_output, download]
+        )
+    
+    demo.launch(
+        server_port=config['app']['server_port'],
+    )
+
+if __name__ == "__main__":
+    main()

prompt_templates/0.txt

@@ -0,0 +1,18 @@
+
+### Instructions:
+Write the newsletter using the provided template, making it engaging and personalized for the client. Incorporate the recommended items naturally within the body of the newsletter, keeping a ${intonation} tone throughout. Adhere to the specified length and include relevant call-to-action phrases for each recommended item to increase client engagement.
+
+Ensure the overall layout follows the template loosely. Make sure each recommended item has a brief but engaging introduction, highlighting why it suits the customer’s interests based on their history.
+
+### Newsletter template
+${newsletter_template}
+
+### Customer Information
+${customer_history}. 
+
+### Previous Transactions
+${transactions}
+
+### Recommended Items
+${recommended_items}
+

prompt_templates/1.txt

@@ -0,0 +1,38 @@
+
+Create a personalized HTML newsletter. Start from the provided newsletter template and use the following specifications.
+
+
+### Preferences
+Make it engaging and informal. 
+Add some personal lines that create a connection with the reader.
+Highlight the connection between previously bought items and recommended ones.
+Don't be afraid of adding textual content!
+Do not change the prices of the items.
+${newsletter_settings}
+
+
+### Newsletter template
+Use the provided HTML structure below as the template. Integrate the provided content, following the layout as closely as possible. 
+${newsletter_template}
+
+
+### Customer Information
+${customer_info}. 
+
+
+### Previously Bought Items
+${transactions}
+
+
+### Recommended Items
+List the following recommended items with descriptions, images, and links:
+${recommended_items}
+
+
+### Additional Features
+Add a [GREETING, DISCOUNT CODE, CTA (e.g., "Shop Now" or "Learn More"), UPCOMING EVENT], if specified:
+- Greeting: Use a personalized greeting, such as “Hello, [CUSTOMER NAME]!”
+- Discount Code (if any): [DISCOUNT CODE or DISCOUNT DETAILS]
+- Call to Action : Use a button or link with text like "[CTA TEXT]" that leads to [CTA URL]
+
+

prompt_templates/personalised_text_1.txt

@@ -0,0 +1,28 @@
+You are an AI writing a personalized newsletter for a user based on their profile data. Here is the user's information:
+
+Name: ${name}
+Email: ${email}
+Preferences:
+  - Topics of interest: ${topics}
+  - Products they viewed: ${products_viewed}
+Interaction frequency: ${interaction_frequency}
+Subscription:
+  - Plan: ${plan}
+Location: ${location}
+
+Write a warm, engaging, and personalized newsletter for this user. Include:
+1. A personalized greeting.
+2. Highlights based on their preferences.
+3. Recommendations for products, articles, or upcoming events they might like.
+4. A reminder of their subscription benefits.
+5. A closing call-to-action encouraging further interaction.
+
+Ensure the tone is friendly, professional, and resonates with their interests.
+
+### Preferences
+${newsletter_settings}
+
+### Newsletter template
+Use the provided HTML structure below as the template. Integrate the provided content, following the layout and formatting as closely as possible. 
+${newsletter_template}
+

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+pyyaml
+openai

src/utils.py

@@ -0,0 +1,169 @@
+from openai import OpenAI
+import os
+from string import Template 
+import logging
+
+
+class LLMHandler:
+    def __init__(self, api_key, model_name, default_temperature, default_max_tokens, default_system_message=None):
+
+        self.client = OpenAI(api_key=api_key)
+        self.model_name = model_name
+        self.default_temperature = default_temperature
+        self.default_max_tokens = default_max_tokens
+        self.default_system_message = default_system_message
+
+        
+    def generate_text(self, prompt, model_name, temperature=None, max_tokens=None, system_message=None):
+        # prompt must be built outside
+
+        # optional parameters
+        model_name = model_name or self.model_name
+        temperature = temperature or self.default_temperature
+        max_tokens = max_tokens or self.default_max_tokens
+        system_message = system_message or self.default_system_message
+
+        # prepare messages
+        messages = [{"role": "user", "content": prompt}]
+        if system_message:
+            messages.insert(0, {"role": "system", "content": system_message}) 
+
+        # get response
+        logging.debug(f"Generating text with model {model_name}, temperature {temperature}, and max tokens {max_tokens}...")
+        logging.debug(f"Prompt: {messages}")
+        response = self.client.chat.completions.create(
+            model=model_name,
+            messages=messages,
+            temperature=temperature,
+            max_tokens=max_tokens
+        )
+        return response.choices[0].message.content
+
+
+def format_prompt_personalsed_text(
+        customer_info,
+        recommendations,
+        transactions,
+        newsletter_settings, 
+        newsletter_meta_info
+        ):
+    
+    # get the paths to the template files
+    personalised_text_prompt_template_path = newsletter_meta_info['personalised_text_prompt_template_path']
+    personalised_text_example_path = newsletter_meta_info['personalised_text_example_path']
+    
+
+    # load the template from file
+    logging.debug(f"Loading example from {personalised_text_example_path}...")
+    with open(personalised_text_example_path, "r") as f:
+        example = Template(f.read())
+
+    # load the template from file
+    logging.debug(f"Loading prompt template from {personalised_text_prompt_template_path}...")
+    with open(personalised_text_prompt_template_path, "r") as f:
+        template = Template(f.read())
+        example = example.safe_substitute(
+            brand_logo=newsletter_meta_info.get("brand_logo", ""),
+            brand_name=newsletter_meta_info.get("brand_name", ""),
+            
+        )
+
+
+    # Sample JSON object
+    user_data = {
+        "user": {
+            "name": "Sophia",
+            "email": "[email protected]",
+            "preferences": {
+                "favorite_styles": ["streetwear", "boho", "vintage"],
+                "colors": ["pastel pink", "sage green", "cream"],
+                "recent_buys": ["oversized hoodie", "floral maxi dress"],
+                "wishlist_items": ["chunky sneakers", "wide-leg jeans"],
+                "interests": ["seasonal trends", "sustainable fashion"]
+            },
+            "interaction_frequency": "bi-weekly",
+            "subscription": {
+                "plan": "VIP",
+                "signup_date": "2024-03-10"
+            },
+            "location": "New York, NY",
+            "age_group": "18-24"
+        }
+    }
+    
+    logging.debug("Formatting the prompt...")
+
+    user = user_data["user"]
+    preferences = user["preferences"]
+
+    prompt = template.safe_substitute(
+        name=user["name"],
+        email=user["email"],
+        topics=", ".join(preferences["interests"]),
+        plan=user["subscription"]["plan"],
+        interaction_frequency=user["interaction_frequency"],
+        products_viewed=", ".join(preferences["wishlist_items"]),
+        location=user["location"],
+        newsletter_settings=newsletter_settings,
+        newsletter_template=example
+        ) 
+
+    logging.debug(f"Formatted prompt: {prompt}")
+    
+    return prompt
+
+
+def format_prompt(
+        customer_info,
+        recommendations,
+        transactions,
+        newsletter_settings, 
+        newsletter_meta_info
+        ):
+    
+    # get the paths to the template files
+    prompt_template_path = newsletter_meta_info['prompt_template_path']
+    newsletter_example_path = newsletter_meta_info['newsletter_example_path']
+    
+
+    # load the template from file
+    logging.debug(f"Loading example from {newsletter_example_path}...")
+    with open(newsletter_example_path, "r") as f:
+        example = Template(f.read())
+        example = example.safe_substitute(
+            brand_logo=newsletter_meta_info.get("brand_logo", ""),
+            brand_name=newsletter_meta_info.get("brand_name", ""),
+            )
+
+    # load the template from file
+    logging.debug(f"Loading prompt template from {prompt_template_path}...")
+    with open(prompt_template_path, "r") as f:
+        template = Template(f.read()) 
+    
+    logging.debug("Formatting the prompt...")
+    prompt = template.safe_substitute(
+        customer_info=customer_info,
+        recommended_items=recommendations,
+        transactions=transactions,
+        newsletter_settings=newsletter_settings,
+        newsletter_template=example,
+        ) 
+    logging.debug(f"Formatted prompt: {prompt}")
+    
+    return prompt
+
+
+def load_newsletter_templates(templates_dir, num_examples=1):
+    
+    # iterate over the files in the templates directory and load each template, then concatenate them into a single string
+    templates = []
+    for i, file in enumerate(os.listdir(templates_dir)):
+        with open(os.path.join(templates_dir, file), "r") as f:
+            templates.append(f.read())
+        if i == num_examples - 1:
+            break
+        
+    # concatenate the templates into a single string, adding a newline and " Example numebr "
+    newsletter_template = "\n".join([f"Example {i+1}\n{template}\n\n\n\n" for i, template in enumerate(templates)])
+
+    return newsletter_template

src/utils_api.py

@@ -0,0 +1,154 @@
+import requests
+import json
+import os
+
+
+def make_api_request(endpoint, ids):
+    """
+    Generic function to make API requests with error handling
+    
+    :param endpoint: The specific API endpoint (e.g. 'get-images-from-id')
+    :param ids: List of IDs to query
+    :return: JSON response or None if error occurs
+    """
+    api_key = os.environ.get("RECOMMENDER_KEY")
+    if not api_key:
+        raise ValueError("API key is not set")
+    headers = {
+        "x-api-key": api_key,
+        "Content-Type": "application/json"
+    }
+    
+    payload = {"ids": ids}
+    
+    try:
+        recommender_url = os.environ.get("RECOMMENDER_URL")
+        if not recommender_url: 
+            raise ValueError("Recommender URL is not set")
+        response = requests.post(f"{recommender_url}/{endpoint}", 
+                                 headers=headers, 
+                                 data=json.dumps(payload))
+        
+        response.raise_for_status()  # Raise an exception for bad status codes
+        return response.json()
+    
+    except requests.exceptions.RequestException as e:
+        print(f"Error occurred while calling {endpoint}: {e}")
+        return None
+
+def get_images_from_id(ids):
+    """Get images for specific product IDs"""
+    return make_api_request("get-images-from-id", ids)
+
+
+def parse_article_data(article_data):
+    """Parse the article data and return a dictionary"""
+    
+    # get the article information
+    article_info = article_data['article']
+    aricle_id = article_info.get('article_id', 'Unknown')
+    article_name = article_info.get('prod_name', 'Unknown')
+    article_type = article_info.get('department_name', 'Unknown')
+    article_color = article_info.get('perceived_colour_master_name', 'Unknown')
+    
+    # get the article images
+    article_images = get_images_from_id([aricle_id])
+    img_url = 'no image'
+    if len(article_images) > 0:
+        img_url = article_images[0].get('url', 'no image')
+    
+    return {
+        "product_name": article_name,
+        "product_type": article_type,
+        "product_color": article_color,
+        "product_image_url": img_url
+    }
+
+def parse_transaction_data(transaction_data):
+    """Parse the transaction data and return a dictionary with article information."""
+    
+    # Retrieve general transaction details
+    transaction_date = transaction_data.get('t_dat', 'Unknown')
+    sales_channel_id = transaction_data.get('sales_channel_id', 'Unknown')
+    price = transaction_data.get('price', 'Unknown')
+    
+    # Get the article information
+    article_info = transaction_data.get('article', {})
+    article_id = article_info.get('article_id', 'Unknown')
+    article_name = article_info.get('prod_name', 'Unknown')
+    article_type = article_info.get('department_name', 'Unknown')
+    article_color = article_info.get('perceived_colour_master_name', 'Unknown')
+    article_detail = article_info.get('detail_desc', 'Unknown') 
+
+    # Get the article images
+    article_images = get_images_from_id([article_id])
+    img_url = 'no image'
+    if article_images:
+        img_url = article_images[0].get('url', 'no image')
+    
+    return {
+        "transaction_date": transaction_date,
+        "sales_channel_id": sales_channel_id,
+        "price": price,
+        "product_name": article_name,
+        "product_type": article_type,
+        "product_color": article_color,
+        "product_image_url": img_url,
+        "article_id": article_id
+    }
+
+
+
+def parse_recommendations(recommendations, max_recs=4, max_transactions=2, only_with_images=True):
+    """Parse the recommendations and return a list of product IDs"""
+    
+    # get the client information
+    customer_info = recommendations[0]['customer'][0]
+    customer_id = customer_info.get('customer_id', 'Unknown')
+    customer_name = customer_info.get('name', customer_id[:8]) # TODO change to real customer name
+    customer_age = customer_info.get('age', 'Unknown')
+
+    customer_info = {
+        "customer name": customer_name,
+        "customer age": customer_age
+    }
+
+    # get the recommendations
+    formatted_recommendations = [parse_article_data(article) for article in recommendations[0]['prediction']]
+
+    formatted_transactions = [parse_transaction_data(transaction) for transaction in recommendations[0]['transactions']]
+
+    if only_with_images:
+        formatted_recommendations = [rec for rec in formatted_recommendations if rec['product_image_url'] != 'no image']
+        formatted_transactions = [t for t in formatted_transactions if t['product_image_url'] != 'no image']
+
+    if len(formatted_recommendations) > max_recs:
+        formatted_recommendations = formatted_recommendations[:max_recs]
+    
+    if len(formatted_transactions) > max_transactions:
+        formatted_transactions = formatted_transactions[:max_transactions]
+
+    return customer_info, formatted_recommendations, formatted_transactions
+
+def get_recommendations(customer_ids, max_recs=4, max_transactions=2):
+    """Get product recommendations for specific customer IDs"""
+    if isinstance(customer_ids, str):
+        customer_ids = [customer_ids]
+    recommendations = make_api_request("get-recommendations", customer_ids)
+    if recommendations:
+        return parse_recommendations(recommendations, max_recs, max_transactions)
+    return None
+
+
+if __name__ == "__main__":
+    # Example product IDs
+    product_ids = ["0110065002", "0111609001"]
+
+    # Example customer ID
+    customer_id = ["04a183a27a6877e560e1025216d0a3b40d88668c68366da17edfb18ed89c574c"]
+
+    # Demonstrate different API calls
+    print("Images:", get_images_from_id(product_ids))
+    print("Recommendations:", get_recommendations(customer_id))
+
+