feat: Implemented AK prompting strategy

.gitignore

@@ -3,5 +3,9 @@
 node_modules/
 venv/
 dist/
+__pycache__/
 *.db
+*.png
+*.html
+*.css
 .env

server/api.py

@@ -34,6 +34,7 @@ def _register_routes(self):
     def generate(self):
         selector = request.args.get('selector')
         generation_strategy = request.args.get('strategy')
+        user_prompt = request.args.get('userPrompt')
 
         print(f"Selector: {selector}")
         print(f"Generation strategy: {generation_strategy}")
@@ -52,7 +53,10 @@ def generate(self):
         async def _generate_async():
 
             try:
-                await strategy.generate(self.target_url, selector)
+                if user_prompt != '':
+                    await strategy.generate(self.target_url, selector, user_prompt)
+                else:
+                    await strategy.generate(self.target_url, selector)
 
                 javascript_injections = strategy.get_javascript_injections()
                 css_injections = strategy.get_css_injections()

server/generation_strategies/ak_layout_strategy/ak_layout_strategy.py

@@ -0,0 +1,59 @@
+import os
+
+from server.generation_strategies.base_strategy import AbstractGenerationStrategy
+from server.llm import create_prompt_from_template, parse_markdown_output, parse_css, LlmClient
+from server.scraper import WebScraper
+
+
+class AKGenerationStrategy(AbstractGenerationStrategy):
+    def id(self):
+        return "ak-layout-generation"
+
+    def name(self):
+        return "AK Layout Generation"
+
+    async def generate(self, url, selector):
+        section_selector = 'div.section.columns-container'
+        scraper = WebScraper()
+
+        system_prompt = f"""
+            You are an expert UX designer known for creating stunning, high-impact web designs.
+            Based on the provided CSS, CSS variables, HTML and screenshot of a webpage section (highlighted with red 
+            rectangle), make bold, creative modifications that will significantly enhance the overall design and visual 
+            appeal of the website.
+        """
+        llm = LlmClient(system_prompt=system_prompt)
+        self.send_progress('Getting the HTML, CSS and screenshot of the original page...')
+        extracted_html = await scraper.get_block_html(url, selector)
+
+        # Save the extracted html
+        with open('extracted_markup.html', 'w') as f:
+            f.write(extracted_html)
+
+        block_css, root_css_vars = await scraper.get_raw_css(url, selector)
+        # full_page_screenshot = await scraper.get_full_page_screenshot(url)
+        full_page_screenshot = await scraper.get_full_page_screenshot_highlight(url, selector)
+
+        self.send_progress('Running the assessment...')
+
+        master_prompt = create_prompt_from_template(
+            os.path.dirname(__file__) + "/prompts/columns_layout.txt",
+            block_css=block_css,
+            root_css_vars=root_css_vars,
+            extracted_html=extracted_html
+        )
+
+        self.send_progress('Generating CSS variation...')
+
+        raw_output = llm.get_completions(master_prompt, [full_page_screenshot])
+        generated_css = parse_css(raw_output)[0]
+        # print(generated_css)
+
+        # Save the generated css
+        with open('generated_styles.css', 'w') as f:
+            f.write(generated_css)
+
+        self.add_css(generated_css)
+
+    def __init__(self):
+        super().__init__()

server/generation_strategies/ak_layout_strategy/prompts/cards_layout.txt

@@ -0,0 +1,12 @@
+Your main goal is to come up with a new layout to create a distinct looking design.
+Additional Requirements:
+- Output only the modified CSS with your innovative changes.
+- Add any new CSS variables and use them but do not modify any existing CSS variables.
+- Do not modify the font family.
+- Use !important on all the properties.
+---
+{{block_css}}
+---
+{{root_css_vars}}
+---
+{{extracted_html}}

server/generation_strategies/ak_layout_strategy/prompts/columns_layout.txt

@@ -0,0 +1,33 @@
+Your main goal is to come up with a brand new layout to create a distinct looking design.
+Additional Requirements:
+- Output only the modified CSS with your innovative changes.
+- Think deeply about layouts that spans across multiple rows and columns or combinations of both.
+- The image can be to the left or top of the text content.
+- Prioritize the readability of the text content.
+- Add any new CSS variables and use them but do not modify any existing CSS variables.
+- Do not modify the font family.
+- Do not change the position of the button.
+- Do not modify other properties unrelated to the main goal.
+- Do not add unnecessary background colors.
+- Use !important on all the properties.
+---
+{{block_css}}
+---
+main .section:is(.columns-container) {
+  margin-bottom: -3rem;
+}
+
+.columns-container h2 {
+  margin-top: 25px;
+  margin-bottom: 50px;
+  text-align: center;
+  font-weight: 800;
+}
+
+.columns-container {
+  margin-top: -2rem;
+}
+---
+{{root_css_vars}}
+---
+{{extracted_html}}

server/generation_strategies/ak_strategy/ak_strategy.py

@@ -0,0 +1,59 @@
+import os
+
+from server.generation_strategies.base_strategy import AbstractGenerationStrategy
+from server.llm import create_prompt_from_template, parse_markdown_output, parse_css, LlmClient
+from server.scraper import WebScraper
+
+
+class AKGenerationStrategy(AbstractGenerationStrategy):
+    def id(self):
+        return "ak-generation"
+
+    def name(self):
+        return "AK Generation"
+
+    async def generate(self, url, selector):
+        scraper = WebScraper()
+
+        system_prompt = f"""
+            You are an expert UX designer known for creating stunning, high-impact web designs.
+            Based on the provided CSS, CSS variables, HTML and screenshot of a webpage section (highlighted with red 
+            rectangle), make bold, creative modifications that will significantly enhance the overall design and visual 
+            appeal of the website.
+        """
+        llm = LlmClient(system_prompt=system_prompt)
+        self.send_progress('Getting the HTML, CSS and screenshot of the original page...')
+        extracted_html = await scraper.get_block_html(url, selector)
+
+        # Save the extracted html
+        with open('extracted_markup.html', 'w') as f:
+            f.write(extracted_html)
+
+        block_css, root_css_vars = await scraper.get_raw_css(url, selector)
+        # full_page_screenshot = await scraper.get_full_page_screenshot(url)
+        full_page_screenshot = await scraper.get_full_page_screenshot_highlight(url, selector)
+
+        self.send_progress('Running the assessment...')
+
+        master_prompt = create_prompt_from_template(
+            # os.path.dirname(__file__) + "/prompts/off_brand.txt",
+            os.path.dirname(__file__) + "/prompts/on_brand.txt",
+            block_css=block_css,
+            root_css_vars=root_css_vars,
+            extracted_html=extracted_html
+        )
+
+        self.send_progress('Generating CSS variation...')
+
+        raw_output = llm.get_completions(master_prompt, [full_page_screenshot])
+        generated_css = parse_css(raw_output)[0]
+        # print(generated_css)
+
+        # Save the generated css
+        with open('generated_styles.css', 'w') as f:
+            f.write(generated_css)
+
+        self.add_css(generated_css)
+
+    def __init__(self):
+        super().__init__()

server/generation_strategies/ak_strategy/prompts/off_brand.txt

@@ -0,0 +1,9 @@
+Your main goal is to output all the provided CSS with your innovative changes.
+Additional Requirements:
+- Focus on elements that can drastically improve the design.
+- Add any new CSS variables and use them but do not modify any existing CSS variables.
+- Use !important only on properties where you made changes.
+---
+{{block_css}}
+---
+{{root_css_vars}}

server/generation_strategies/ak_strategy/prompts/on_brand.txt

@@ -0,0 +1,17 @@
+Your main goal is to output only the modified CSS with your innovative changes.
+Additional Requirements:
+- Focus on elements that can drastically improve the design as well as create distinct looking design.
+- Add any new CSS variables and use them but do not modify any existing CSS variables.
+- When choosing backgrounds, pay special attention to the brand's color scheme.
+- Try to honor the brand's color scheme as much as possible.
+- Infer the design language of the webpage and make sure your changes are in line with the brand's style.
+- Do not modify the font family.
+- Do not modify the font size of the text content.
+- Do not introduce additional text formatting.
+- Use !important on all the properties.
+---
+{{block_css}}
+---
+{{root_css_vars}}
+---
+{{extracted_html}}

server/generation_strategies/ak_strategy/prompts/test_instructions.txt

@@ -0,0 +1,29 @@
+Your task is to come up with brand guidelines from the provided image that will inform your ability to generate new CSS subsequently.
+Your main goal is to output all the provided CSS with your innovative changes.
+Additional Requirements:
+- Focus on elements that can drastically improve the design as well as create distinct looking design.
+- Focus on elements that can create distinct looking design.
+- Focus on elements that can drastically improve the design and add any new CSS variables but do not modify any existing CSS variables.
+- Focus on elements that can drastically change the layout to create distinct looking design.
+- Interpret the design language of the website and make sure your changes are in line with the brand's style.
+- You may change the layout if necessary to make the styles look distinctive.
+- When choosing backgrounds, pay special attention to the brand's color scheme.
+- Try to honor the brand's color scheme as much as possible.
+- Make sure the button or link text is legible and has a good contrast with the background on both normal and hover state.
+- When adding background color on a button or link, make sure to add a darker shade on hover state.
+- Do not modify the font family.
+- Do not use rounded corners if the brand uses sharp corners.
+- Use !important only on properties where you made changes.
+- Add subtle background gradients to make the design look more modern.
+- Center all the text.
+- Center all the buttons.
+- Add borders to the elements to make them stand out.
+- The color of '#nav .menu-item' has to change to white or black to have good contrast with the background color of '#nav .nav-meganav'.
+- The hover and active state of '#nav .menu-item' with buttons should change to black.
+- The color of '#nav .collapsible::after' has to change to white or black to have good contrast with the background color of ''#nav .nav-meganav'.
+- The hover and active state of '#nav .collapsible::after' with buttons should change to black.
+- The color of '.home-page .panel-cards-container .default-content-wrapper h2' has to change to white or black to have good contrast with the background color of '.home-banner-bg'.
+---
+{{block_css}}
+---
+{{root_css_vars}}

server/generation_strategies/ak_strategy/prompts/think_brand.txt

@@ -0,0 +1,14 @@
+First, come up with brand guidelines from the provided screenshot of the webpage that will inform your ability to generate new CSS subsequently.
+Your main goal is to output all the provided CSS with your innovative changes.
+Additional Requirements:
+- Focus on elements that can drastically improve the design and add any new CSS variables but do not modify any existing CSS variables.
+- Reference the brand guidelines that you came up with and make sure your changes are in line with the brand's style.
+- You may change the layout if necessary to make the styles look distinctive.
+- When choosing backgrounds, pay special attention to the brand's color scheme.
+- Try to honor the brand's color scheme as much as possible.
+- Do not modify the font family.
+- Use !important only on properties where you made changes.
+---
+{{block_css}}
+---
+{{root_css_vars}}

server/generation_strategies/ak_theme_strategy/ak_theme_strategy.py

@@ -0,0 +1,64 @@
+import os
+
+from server.generation_strategies.base_strategy import AbstractGenerationStrategy
+from server.llm import create_prompt_from_template, parse_markdown_output, parse_css, LlmClient
+from server.scraper import WebScraper
+
+
+class AKGenerationStrategy(AbstractGenerationStrategy):
+    def id(self):
+        return "ak-theme-generation"
+
+    def name(self):
+        return "AK Theme Generation"
+
+    async def generate(self, url, selector):
+        main_selector = 'div.home-banner-bg'
+        header_selector = 'div.header.block'
+        scraper = WebScraper()
+
+        system_prompt = f"""
+            You are an expert UX designer known for creating stunning, high-impact web designs.
+            Based on the provided CSS, CSS variables, HTML and screenshot of a webpage section (highlighted with red 
+            rectangle), make bold, creative modifications that will significantly enhance the overall design and visual 
+            appeal of the website.
+        """
+        llm = LlmClient(system_prompt=system_prompt)
+        self.send_progress('Getting the HTML, CSS and screenshot of the original page...')
+        extracted_html = await scraper.get_block_html(url, main_selector)
+        header_html = await scraper.get_block_html(url, header_selector)
+
+        # Save the extracted html
+        with open('extracted_markup.html', 'w') as f:
+            f.write(extracted_html)
+
+        block_css, root_css_vars = await scraper.get_raw_css(url, selector)
+        header_css, _ = await scraper.get_raw_css(url, header_selector)
+        # full_page_screenshot = await scraper.get_full_page_screenshot(url)
+        full_page_screenshot = await scraper.get_full_page_screenshot_highlight(url, main_selector)
+
+        self.send_progress('Running the assessment...')
+
+        master_prompt = create_prompt_from_template(
+            os.path.dirname(__file__) + "/prompts/theme_brand.txt",
+            header_css=header_css,
+            block_css=block_css,
+            root_css_vars=root_css_vars,
+            header_html=header_html,
+            extracted_html=extracted_html
+        )
+
+        self.send_progress('Generating CSS variation...')
+
+        raw_output = llm.get_completions(master_prompt, [full_page_screenshot])
+        generated_css = parse_css(raw_output)[0]
+        # print(generated_css)
+
+        # Save the generated css
+        with open('generated_styles.css', 'w') as f:
+            f.write(generated_css)
+
+        self.add_css(generated_css)
+
+    def __init__(self):
+        super().__init__()