Upload 29 files

README.md

@@ -1,14 +1,56 @@
 ---
 title: WebpageCreator
-emoji: 🐨
-colorFrom: green
-colorTo: purple
+emoji: 👀
+colorFrom: gray
+colorTo: yellow
 sdk: gradio
-sdk_version: 5.33.0
+sdk_version: 5.32.1
 app_file: app.py
 pinned: false
-license: apache-2.0
-short_description: AI-based tool that generates a complete, responsive website.
+license: unknown
+short_description: Build and preview custom websites with agent.
+tags: [agent-demo-track]
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🌐 WebpageCreator – AI-Powered Website Generator
+
+**WebpageCreator** is an AI-based tool that generates a complete, responsive website from a simple text brief. Customize your brand colors, language, and company name — and the agent will generate professional HTML code section by section, live in your browser. ⚡
+
+## 🎥 Demo Video
+
+▶️ [Watch the demo](https://youtu.be/Hyovc5FYOYo)
+
+## ✨ Features
+
+- 🏷 **Company Name** input for personalized branding
+- 📝 **Brief field** to describe your business, product, or service
+- 🎨 **Primary & Secondary Colors** via Color Pickers
+- 🌍 **Multilingual Output**: French, English, Spanish, German
+- ⚡ **Real-time Preview** in an iframe while the site is building
+- 🧠 Powered by an autonomous agent (HektoreAgent)
+
+## 🧩 Sections Automatically Generated
+
+- Header with logo and gradient top bar
+- Hero section with headline and CTA
+- “Trusted by” logos section
+- Services cards (with icons, titles, and text)
+- About / Mission section
+- Testimonials carousel
+- Call-to-Action section
+- Newsletter subscription form
+- Footer with navigation, contact, and social links
+
+## 🔧 Tech Stack
+
+- **Gradio** – frontend UI
+- **smolagents** – lightweight agent orchestration
+- **Selenium** – for icon name scraping
+- **Tailwind CSS**, **Alpine.js**, **Swiper.js** – for responsive UI
+- **Phosphor Icons** – beautiful open-source icon set
+
+## 🖥️ Run Locally
+
+```bash
+pip install -r requirements.txt
+python app.py

agent.py

@@ -0,0 +1,283 @@
+from smolagents import CodeAgent, Tool
+import os
+import time
+import requests
+import re
+from typing import Dict, List, Optional, Any
+from smolagents.models import Model
+from smolagents.default_tools import DuckDuckGoSearchTool, FinalAnswerTool
+from dotenv import load_dotenv
+import os
+
+from myTools.ExtractWikipediaSection import ExtractWikipediaSection
+from myTools.ExtractWebContentWithSelenium import ExtractWebContentWithSelenium
+from myTools.GetPlaceholderImageTool import GetPlaceholderImageTool
+from myTools.GetSVG import GetSVG
+from myTools.GetSVGList import GetSVGList
+from myTools.GetLogo import GetLogo
+
+load_dotenv()
+api_key = os.getenv("MistralApiKey")
+
+
+
+class ChatMessage:
+    def __init__(self, role: str, content: str):
+        self.role = role
+        self.content = content
+        self.raw = None
+
+    @classmethod
+    def from_dict(cls, message_dict: Dict[str, str]) -> 'ChatMessage':
+        return cls(role=message_dict['role'], content=message_dict['content'])
+
+    def __repr__(self):
+        return f"ChatMessage(role={self.role}, content={self.content})"
+
+
+
+class MistralClient:
+    def __init__(self, api_key: str, api_base: str = "https://api.mistral.ai"):
+        self.api_key = api_key
+        self.api_base = api_base
+
+    def generate(self, model_id: str, messages: List[Dict[str, str]], **kwargs):
+        url = f"{self.api_base}/v1/chat/completions"
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json"
+        }
+        data = {
+            "model": model_id,
+            "messages": messages,
+            "temperature": 0.7,
+            "max_tokens": 4096,
+            **kwargs
+        }
+        retries = 5
+        backoff = 2.0
+        for attempt in range(1, retries + 1):
+            response = requests.post(url, headers=headers, json=data)
+
+            if response.status_code == 429:
+                print(f"[429] Trop de requêtes - tentative {attempt}/{retries}, attente {backoff}s...")
+                time.sleep(backoff)
+                backoff *= 2
+                continue
+
+            try:
+                response.raise_for_status()
+                return response.json()
+            except requests.exceptions.HTTPError as e:
+                print(f"[ERREUR] HTTP {response.status_code}: {e}")
+                raise e
+
+        raise RuntimeError(f"Échec après {retries} tentatives (429 ou autres erreurs)")
+
+
+
+class MistralApiModel(Model):
+    """A class to interact with Mistral's API for language model interaction."""
+
+    def __init__(
+        self,
+        model_id: str,
+        api_key: Optional[str] = None,
+        api_base: Optional[str] = None,
+        **kwargs,
+    ):
+        super().__init__(**kwargs)
+        self.model_id = model_id
+        self.api_key = api_key
+        self.api_base = api_base or "https://api.mistral.ai"
+        self.client = MistralClient(api_key=self.api_key, api_base=self.api_base)
+
+    def generate(
+        self,
+        messages: List[Dict[str, str]],
+        **kwargs,
+    ) -> ChatMessage:
+        return self.__call__(messages=messages, **kwargs)
+
+    def __call__(
+        self,
+        messages: List[Dict[str, str]],
+        stop_sequences: Optional[List[str]] = None,
+        **kwargs,
+    ) -> ChatMessage:
+        completion_kwargs = self._prepare_completion_kwargs(
+            messages=messages,
+            stop_sequences=stop_sequences,
+            **kwargs,
+        )
+
+        response = self.client.generate(model_id=self.model_id, **completion_kwargs)
+        
+
+        message = ChatMessage.from_dict(response['choices'][0]['message'])
+        message.raw = response
+        usage = response.get('usage', {})
+        message.token_usage = type('TokenUsage', (), {
+            "input_tokens": usage.get("prompt_tokens", 0),
+            "output_tokens": usage.get("completion_tokens", 0),
+            "total_tokens": usage.get("total_tokens", 0)
+        })()
+        return message
+
+class HektoreAgent:
+    def __init__(self):
+        print("Agent initialized.")
+
+    def __call__(self, section: str, brief: str, colorOne: str, colorTwo: str, language: str, company_name: str, current_html: str = "", additional_args: dict = {}) -> str:
+
+        print(f"Agent received brief : {brief}...")
+        print(f"Additional args received : {additional_args}...")
+
+        all_tools = [
+                    GetPlaceholderImageTool(),
+                    ExtractWebContentWithSelenium(),
+                    DuckDuckGoSearchTool(),
+                    GetSVG(),
+                    GetSVGList(),
+                    GetLogo(),
+                    FinalAnswerTool()
+                    ]
+        marketing_tools = [
+            ExtractWebContentWithSelenium(),
+            DuckDuckGoSearchTool(),
+            FinalAnswerTool()
+            ]
+
+        model = MistralApiModel(
+            model_id="codestral-2501",
+            api_base="https://api.mistral.ai",
+            api_key=api_key
+        )
+        
+        marketing_agent = CodeAgent(
+            model=model,
+            name="MarketingSEOExpert",
+            description="Specialist in marketing web and SEO, generate powerful content with impact. Can't generate HTML, juste generate raw text.",
+            tools=marketing_tools,
+            additional_authorized_imports=[
+                "geopandas",
+                "plotly",
+                "shapely",
+                "json",
+                "pandas",
+                "numpy",
+                "time",
+                "openpyxl",
+                "pdfminer",
+                "pdfminer.six",
+                "PyPDF2",
+                "io",
+                "open",
+                "librosa",
+                "bs4",
+                "os",
+                "builtins.open",
+                "builtins.write",
+                "PyGithub",
+                "requests"
+            ],
+            verbosity_level=2,
+            #final_answer_checks=[check_reasoning],
+            max_steps=15,
+)
+  
+        manager_agent = CodeAgent(
+            model=model,
+            tools=all_tools,
+            #managed_agents=[marketing_agent],
+            additional_authorized_imports=[
+                "geopandas",
+                "plotly",
+                "shapely",
+                "json",
+                "pandas",
+                "numpy",
+                "time",
+                "openpyxl",
+                "pdfminer",
+                "pdfminer.six",
+                "PyPDF2",
+                "io",
+                "open",
+                "librosa",
+                "bs4",
+                "os",
+                "builtins.open",
+                "builtins.write",
+                "PyGithub",
+                "requests"
+            ],
+            planning_interval=10,
+            verbosity_level=2,
+            #final_answer_checks=[check_reasoning],
+            max_steps=100,
+)
+        
+        
+
+        prompt = f"""
+        You are a professional AI website generator.
+        Your job is to build a rich, modern, and impressive  HTML + TailwindCSS, using semantic HTML5 and responsive design.
+        You will build the website section by section. Only output the HTML markup for the current section.
+        The content text must be awesome and very very rich.
+
+        ⚠️ Do not output any <html>, <head>, <body>, or <!DOCTYPE> tags.
+        ⚠️ Only write the core section content.
+        The name or the company is : {company_name}
+        The website is about : {brief}
+        Language of the website : {language}
+        You are encouraged to use advanced design elements and modern layout ideas.
+        We need a lot of text in each section. All text must be SEO compliant. We need Call to action.
+        Develop this section :
+
+        {section}
+        
+        
+        
+
+        **Styling and layout**:
+        - Use Tailwind utility classes
+        - Use Tailwind's `container`, `grid`, `flex`, `gap`, `rounded`, `shadow`, `text-*`, `bg-*` utilities
+        - Add responsive breakpoints (`sm:`, `md:`, `lg:`) where needed
+        - Add hover/focus/transition effects for buttons and cards
+        - Add a fixed header if relevant
+        - The CTA text must be impactful and very short
+        - Use these 2 colors : Primary : {colorOne} and secondary : {colorTwo}
+        - Don't use join in python to build multiple block in html section
+        - Use TailwindCSS via CDN:  
+            `<script src="https://cdn.tailwindcss.com"></script>`
+
+        **Extras (encouraged but optional)**:
+        - Use Alpine.js for interactions (mobile nav, carousel, etc.)
+        - Add animation classes (`transition`, `duration-300`, `ease-in-out`)
+        - Use SVG separators or background patterns
+        - Include meta tags for SEO, accessibility attributes, and semantic labels
+        - Use real picture, no lorem ipsum.
+        
+        You may use Alpine.js for dynamic UI behavior (e.g., toggles, mobile menus, tabs).  
+        Load it via CDN:  
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
+
+        You may use Swiper.js for testimonials or logo sliders:  
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />  
+        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+
+        You may use animate.css (Animatation) for smooth animations :  
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+        />
+
+        You may use Micromodal.js (Modal) for simple modal :  
+        <script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
+
+        The page should look ready to present to enterprise clients. Do not oversimplify. No `Lorem ipsum`. Write realistic, sharp content. Only output the HTML for this section. Do not include <html>, <head>, or <body>. Do not include DOCTYPE.
+            """
+
+        result = manager_agent.run(task=prompt, additional_args=additional_args)
+        return result

myTools/ExtractWebContentWithSelenium.py

@@ -0,0 +1,42 @@
+from smolagents import Tool
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.chrome.service import Service as ChromeService
+from webdriver_manager.chrome import ChromeDriverManager
+from markdownify import markdownify as md
+
+class ExtractWebContentWithSelenium(Tool):
+    name = "extract_web_content_selenium"
+    description = "Visit a webpage and extract the full HTML content of a web page."
+
+    inputs = {
+        "url": {
+            "type": "string",
+            "description": "URL of the page to load"
+        }
+    }
+
+    output_type = "string"
+
+    def forward(self, url: str) -> str:
+        chrome_options = Options()
+        chrome_options.add_argument("--headless")
+        chrome_options.add_argument("--no-sandbox")
+        chrome_options.add_argument("--disable-dev-shm-usage")
+        chrome_options.add_argument(
+            "user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+            "AppleWebKit/537.36 (KHTML, like Gecko) "
+            "Chrome/114.0.0.0 Safari/537.36"
+        )
+
+        # Installe automatiquement ChromeDriver
+        driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()), options=chrome_options)
+
+        try:
+            driver.get(url)
+            page_content = driver.page_source
+            markdown = md(page_content, heading_style="ATX")
+        finally:
+            driver.quit()
+
+        return markdown

myTools/ExtractWikipediaSection.py

@@ -0,0 +1,42 @@
+from smolagents import Tool
+import requests
+import re
+from markdownify import markdownify as md
+
+class ExtractWikipediaSection(Tool):
+    name = "extract_wikipedia_section"
+    description = "Extracts a specific section from a Wikipedia page in Markdown format."
+
+    inputs = {
+        "url": {
+            "type": "string",
+            "description": "URL of the Wikipedia page"
+        },
+        "section": {
+            "type": "string",
+            "description": "Title of the section to extract"
+        },
+    }
+
+    output_type = "string"
+
+    def forward(self, url: str, section: str) -> str:
+        headers = {
+            "User-Agent": "Mozilla/5.0 (compatible; WebScraper/1.0; +https://example.com/bot)"
+        }
+
+        try:
+            response = requests.get(url, headers=headers, timeout=10)
+            response.raise_for_status()
+        except Exception as e:
+            raise RuntimeError(f"Failed to fetch page: {e}")
+
+        markdown = md(response.text, heading_style="ATX")
+
+        # RegEx pour détecter la section markdown
+        pattern = rf"^##+\s*{re.escape(section)}\s*$(.*?)^##+"
+        match = re.search(pattern, markdown, re.DOTALL | re.MULTILINE)
+        if match:
+            return match.group(1).strip()
+        else:
+            return f"❌ Section '{section}' not found on page."

myTools/GetLogo.py

@@ -0,0 +1,51 @@
+from smolagents import Tool
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.chrome.service import Service as ChromeService
+from webdriver_manager.chrome import ChromeDriverManager
+from markdownify import markdownify as md
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.by import By
+import random
+
+class GetLogo(Tool):
+    name = "get_logo"
+    description = "Lookup and search for a logo and generate the SVG code"
+
+    inputs = {
+        
+    }
+
+    output_type = "string"
+
+    def forward(self) -> str:
+        chrome_options = Options()
+        chrome_options.add_argument("--headless")
+        chrome_options.add_argument("--no-sandbox")
+        chrome_options.add_argument("--disable-dev-shm-usage")
+        chrome_options.add_argument(
+            "user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+            "AppleWebKit/537.36 (KHTML, like Gecko) "
+            "Chrome/114.0.0.0 Safari/537.36"
+        )
+
+        driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()), options=chrome_options)
+
+        try:
+            url = f"https://logoipsum.com/"
+            driver.get(url)
+            wait = WebDriverWait(driver, 10)
+            buttons = wait.until(
+                EC.presence_of_all_elements_located((By.CSS_SELECTOR, "div.artwork"))
+            )
+            if not buttons:
+                return "Aucun résultat trouvé."
+
+            random_logo = random.choice(buttons)
+            svg_element = random_logo.find_element(By.TAG_NAME, "svg")
+            svg_code = svg_element.get_attribute("outerHTML")
+
+            return svg_code
+        finally:
+            driver.quit()

myTools/GetPlaceholderImageTool.py

@@ -0,0 +1,18 @@
+from smolagents import Tool
+import os
+import requests
+
+class GetPlaceholderImageTool(Tool):
+    name = "get_placeholder_image_tool"
+    description = "Get placeholder image for website with specific size"
+
+    inputs = {
+        "height": {"type": "integer", "description": "The height of the placeholder"},
+        "width": {"type": "integer", "description": "The width of the placeholder"},
+    }
+
+    output_type = "string"
+
+    def forward(self, height: int, width: int) -> str:
+        
+        return f"https://placehold.co/{width}x{height}"

myTools/GetSVG.py

@@ -0,0 +1,53 @@
+from smolagents import Tool
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.chrome.service import Service as ChromeService
+from webdriver_manager.chrome import ChromeDriverManager
+from markdownify import markdownify as md
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.by import By
+
+class GetSVG(Tool):
+    name = "get_svg"
+    description = "Lookup and search for an icon and generate the SVG code"
+
+    inputs = {
+        "request": {
+            "type": "string",
+            "description": "The description of the svg from GetSVGList Tool"
+        }
+    }
+
+    output_type = "string"
+
+    def forward(self, request: str) -> str:
+        chrome_options = Options()
+        chrome_options.add_argument("--headless")
+        chrome_options.add_argument("--no-sandbox")
+        chrome_options.add_argument("--disable-dev-shm-usage")
+        chrome_options.add_argument(
+            "user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+            "AppleWebKit/537.36 (KHTML, like Gecko) "
+            "Chrome/114.0.0.0 Safari/537.36"
+        )
+
+        driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()), options=chrome_options)
+
+        try:
+            url = f"https://phosphoricons.com/?q={request}"
+            driver.get(url)
+            wait = WebDriverWait(driver, 10)
+            buttons = wait.until(
+                EC.presence_of_all_elements_located((By.CSS_SELECTOR, "button.grid-item"))
+            )
+            if not buttons:
+                return "Aucun résultat trouvé."
+
+            first_icon = buttons[0]
+            svg_element = first_icon.find_element(By.TAG_NAME, "svg")
+            svg_code = svg_element.get_attribute("outerHTML")
+
+            return svg_code
+        finally:
+            driver.quit()

myTools/GetSVGList.py

@@ -0,0 +1,50 @@
+from smolagents import Tool
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.chrome.service import Service as ChromeService
+from webdriver_manager.chrome import ChromeDriverManager
+from markdownify import markdownify as md
+from selenium.webdriver.support.ui import WebDriverWait
+from selenium.webdriver.support import expected_conditions as EC
+from selenium.webdriver.common.by import By
+
+class GetSVGList(Tool):
+    name = "get_svg_list"
+    description = "Get list of svg available to generate it with GetSVG Tool"
+
+    inputs = {
+
+    }
+
+    output_type = "array"
+
+    def forward(self) -> str:
+        chrome_options = Options()
+        chrome_options.add_argument("--headless")
+        chrome_options.add_argument("--no-sandbox")
+        chrome_options.add_argument("--disable-dev-shm-usage")
+        chrome_options.add_argument(
+            "user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+            "AppleWebKit/537.36 (KHTML, like Gecko) "
+            "Chrome/114.0.0.0 Safari/537.36"
+        )
+
+        driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()), options=chrome_options)
+
+        try:
+            url = "https://phosphoricons.com/"
+            driver.get(url)
+
+            wait = WebDriverWait(driver, 10)
+            name_elements = wait.until(
+                EC.presence_of_all_elements_located((By.CSS_SELECTOR, "span.name"))
+            )
+
+            icon_names = [el.text.strip() for el in name_elements if el.text.strip()]
+            return icon_names
+            if not icon_names:
+                return "Aucun nom d'icône trouvé."
+
+            return "\n".join(icon_names)
+        finally:
+            driver.quit()

requirements.txt

@@ -0,0 +1,6 @@
+gradio
+smolagents
+markdownify
+selenium
+webdriver-manager
+duckduckgo-search