feat: Implement AI-powered web scraper and redesign application with Gradio UI and updated README.

README.md

@@ -1,13 +1,32 @@
 ---
-title: WEB UIux
-emoji: 📉
-colorFrom: yellow
-colorTo: blue
+title: AI Web Redesigner
+emoji: 🎨
+colorFrom: purple
+colorTo: pink
 sdk: gradio
-sdk_version: 6.2.0
+sdk_version: 4.0.0
 app_file: app.py
 pinned: false
-short_description: Redesiner
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🎨 AI Web Scraper & Redesigner
+
+This Space allows you to input any URL, scrape its content, and use an Advanced AI Model (Qwen2.5-Coder-32B) to redesign it into a modern, stunning webpage.
+
+## How to Use
+1. Enter a URL (e.g., `https://example.com`)
+2. Select a Design Style (e.g., "Cyberpunk", "Minimalist")
+3. Select an Output Format (HTML/CSS/JS or Frameworks)
+4. (Optional) Enter your Hugging Face Token if you want to use your own quota, otherwise it uses the Space's secret.
+5. Click **Redesign**!
+
+## Features
+- **Smart Scraping**: Extracts text and images from the target site.
+- **AI Redesign**: Uses Large Language Models to write clean, modern code.
+- **Live Preview**: See the generated website immediately in the browser.
+
+## Setup
+To use the AI generation, you must set a `HF_TOKEN` in the Space's **Settings > Repository secrets**.
+1. Go to your HF Profile > Settings > Access Tokens.
+2. Create a generic token.
+3. In this Space, go to Settings and add `HF_TOKEN` with your key.

app.py

@@ -0,0 +1,79 @@
+import gradio as gr
+from scraper import scrape_webpage
+from generator import generate_redesigned_code
+import os
+
+# Get token from environment variable or user input
+# In Hugging Face Spaces, set HF_TOKEN in Settings > Secrets
+DEFAULT_HF_TOKEN = os.getenv("HF_TOKEN")
+
+def process_pipeline(url, style, framework, custom_token):
+    token = custom_token if custom_token else DEFAULT_HF_TOKEN
+    
+    if not token and not DEFAULT_HF_TOKEN:
+        return "Please provide a Hugging Face Token to use the API.", ""
+
+    # 1. Scrape
+    scraped_data = scrape_webpage(url)
+    if "error" in scraped_data:
+        return f"Scraping Error: {scraped_data['error']}", ""
+    
+    # 2. Generate
+    generated_code = generate_redesigned_code(scraped_data, style, framework, hf_token=token)
+    
+    # 3. Extract HTML for preview (Simplistic approach: assumes the model returns a markdown code block)
+    # We strip ```html and ``` to get raw code for the preview iframe
+    clean_code = generated_code
+    if "```html" in generated_code:
+        parts = generated_code.split("```html")
+        if len(parts) > 1:
+            clean_code = parts[1].split("```")[0]
+    elif "```" in generated_code: # Generic block
+         parts = generated_code.split("```")
+         if len(parts) > 1:
+            clean_code = parts[1]
+
+    return generated_code, clean_code
+
+# Define the UI
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    gr.Markdown("# 🎨 AI Web Scraper & Redesigner")
+    gr.Markdown("Turn any URL into a Modern, Stunning Website Design using AI.")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            url_input = gr.Textbox(label="Website URL", placeholder="https://example.com")
+            style_dropdown = gr.Dropdown(
+                ["Modern & Clean", "Dark & Cyberpunk", "Vibrant & Playful", "Minimalist"], 
+                label="Design Style", 
+                value="Modern & Clean"
+            )
+            framework_dropdown = gr.Dropdown(
+                ["HTML/CSS/JS (Single File)", "React (Component)", "Angular (Component)"], 
+                label="Output Format", 
+                value="HTML/CSS/JS (Single File)"
+            )
+            token_input = gr.Textbox(
+                label="HF API Token (Optional if set in Space Secrets)", 
+                type="password",
+                placeholder="hf_..."
+            )
+            generate_btn = gr.Button("🚀 Redesign Website", variant="primary")
+        
+        with gr.Column(scale=2):
+            # Output Display
+            with gr.Tabs():
+                with gr.TabItem("Preview"):
+                    # The iframe preview
+                    preview_html = gr.HTML(label="Live Preview")
+                with gr.TabItem("Code"):
+                    code_output = gr.Code(language="html", label="Generated Code")
+
+    generate_btn.click(
+        fn=process_pipeline,
+        inputs=[url_input, style_dropdown, framework_dropdown, token_input],
+        outputs=[code_output, preview_html]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

generator.py

@@ -0,0 +1,72 @@
+import os
+from huggingface_hub import InferenceClient
+
+# You can change the model here. 
+# "Qwen/Qwen2.5-Coder-32B-Instruct" is excellent for coding.
+# "deepseek-ai/DeepSeek-R1-Distill-Llama-70B" is also great if available via API.
+MODEL_ID = "Qwen/Qwen2.5-Coder-32B-Instruct" 
+
+def generate_redesigned_code(scraped_data, style_preference, framework, hf_token=None):
+    """
+    Generates modern web component code based on scraping data.
+    """
+    
+    if "error" in scraped_data:
+        return f"Error in scraping: {scraped_data['error']}", "", ""
+
+    client = InferenceClient(model=MODEL_ID, token=hf_token)
+    
+    content_summary = f"""
+    Website Title: {scraped_data.get('title')}
+    Key Content: {scraped_data.get('summary')}
+    Main Image: {scraped_data.get('top_image')}
+    Other Images: {', '.join(scraped_data.get('other_images', []))}
+    """
+
+    system_prompt = """You are an expert Frontend Developer and UI/UX Designer. 
+    Your task is to REDESIGN a website content into a STUNNING, MODERN, PREMIUM web interface.
+    
+    Rules:
+    1. Focus entirely on UI/UX, Typography, Colors, and Layout.
+    2. Make it look expensive (glassmorphism, subtle shadows, gradients, modern sans-serif fonts).
+    3. Use the provided content and images.
+    4. Return valid, working code.
+    5. If the user asks for a Framework (React/Angular), output components. 
+       If they ask for HTML/CSS, output a single HTML file with embedded CSS/JS.
+    
+    IMPORTANT: Provide the code in a single code block if it's HTML, or clearly separated if it's a framework.
+    For this request, please output a SINGLE HTML file containing everything (HTML, CSS in <style>, JS in <script>) so it can be previewed easily, unless strictly impossible.
+    """
+
+    user_prompt = f"""
+    Redesign this content:
+    {content_summary}
+
+    Style Preference: {style_preference}
+    Target Framework: {framework} (If 'HTML/CSS/JS', keep it in one file).
+
+    The design must be responsive, use a modern color palette, and include hover effects.
+    Ensure the images provided are used if they exist.
+    """
+
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": user_prompt}
+    ]
+
+    try:
+        # Streaming is cool but for simplicity we'll just wait for the response
+        response = client.chat_completion(
+            messages=messages, 
+            max_tokens=4000, 
+            temperature=0.7
+        )
+        
+        generated_text = response.choices[0].message.content
+        
+        # Simple extraction of code block
+        # In a real app, we might want more robust parsing
+        return generated_text
+        
+    except Exception as e:
+        return f"Error generating code: {str(e)}"

requirements.txt

@@ -0,0 +1,6 @@
+gradio
+huggingface_hub
+requests
+beautifulsoup4
+newspaper3k
+lxml

scraper.py

@@ -0,0 +1,57 @@
+import requests
+from bs4 import BeautifulSoup
+from newspaper import Article
+import logging
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+def scrape_webpage(url):
+    """
+    Scrapes a webpage to extract title, text content, and image URLs.
+    Uses 'newspaper3k' for article text and 'BeautifulSoup' for structure/images.
+    """
+    try:
+        logger.info(f"Scraping URL: {url}")
+        
+        # Method 1: Newspaper3k for clean text extraction
+        article = Article(url)
+        article.download()
+        article.parse()
+        
+        title = article.title
+        text_content = article.text
+        top_image = article.top_image
+        
+        # Method 2: BeautifulSoup for more structural details (colors, fonts - strictly heuristic)
+        headers = {'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (HTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'}
+        response = requests.get(url, headers=headers, timeout=10)
+        response.raise_for_status()
+        
+        soup = BeautifulSoup(response.content, 'html.parser')
+        
+        # Extract basic color palette if possible (checking meta theme-color or style tags is hard, so we skip complex analysis for now)
+        # We just get all image sources to give the AI some assets to work with
+        images = [img['src'] for img in soup.find_all('img', src=True) if img['src'].startswith('http')]
+        
+        # Limit text content to avoid token overflow
+        summary_text = text_content[:4000] if len(text_content) > 4000 else text_content
+        
+        data = {
+            "title": title,
+            "summary": summary_text,
+            "top_image": top_image,
+            "other_images": images[:5], # top 5 images
+            "url": url
+        }
+        
+        return data
+
+    except Exception as e:
+        logger.error(f"Error scraping {url}: {e}")
+        return {"error": str(e)}
+
+if __name__ == "__main__":
+    # Test
+    print(scrape_webpage("https://huggingface.co/"))