Digital Transformation - AI-Powered Website Generator

A Multi-Agent System for Automated Website Development

This project is a comprehensive AI-powered system that enables inexperienced users to create professional websites through natural language descriptions. Built as part of the DIGITAL TRANSFORMATION university project, it leverages multi-agent collaboration to generate, iterate, and refine web applications.

🚀 Features

• Natural Language Input: Describe your website in plain language
• Multi-Agent Architecture: Specialized AI agents for different development phases
• Real-Time Editing: Interactive web editor for live modifications
• Multi-LLM Support: Compatible with OpenAI, local LLMs, and external APIs
• Responsive Design: Generates mobile-friendly websites
• Template System: Pre-built templates for common website types
• Image Integration: Support for custom images and AI-generated visuals
• Export Functionality: Download complete website packages

🏗️ Architecture

The system consists of three main components:

1. Data Collection Interface (sito.py) - Gathers user requirements
2. Website Generation Engine (script_chatdev.py) - Multi-agent website creation
3. Interactive Editor (interactive_editor.py) - Real-time modifications

Multi-Agent Workflow

The system employs specialized AI agents:

• Chief Executive Officer: Project coordination and oversight
• Product Designer: UI/UX design decisions
• Programmer: Code generation and implementation
• Code Reviewer: Quality assurance and debugging
• Creative Officer: Visual design and branding

📋 Prerequisites

• Python 3.8 or higher
• Modern web browser (Chrome, Firefox, Safari, Edge)
• Internet connection for external LLM APIs (optional for local models)

🔧 Installation

1. Clone the repository:

   git clone https://github.com/IlBuonTommy/digitaltransformation.git
   cd digitaltransformation

2. Install dependencies:

   pip install -r requirements.txt

3. Configure LLM Settings (First-time setup):

   • The system will prompt you to configure your LLM preferences on first run
   • Choose between external APIs (OpenAI, OpenRouter) or local models
   • API keys are stored securely in llm_config.json

🚀 Quick Start

Step 1: Collect User Requirements

Start by running the data collection interface to gather project specifications:

python sito.py

This will:

• Open a web interface at http://localhost:5000
• Guide you through specifying your website requirements
• Allow you to configure LLM settings
• Save your preferences to dati_utente.txt

Step 2: Generate the Website

Execute the multi-agent website generation process:

python script_chatdev.py

This will:

• Load your requirements from dati_utente.txt
• Generate a technical prompt using your chosen LLM
• Launch the multi-agent system to create your website
• Output the generated site to the WareHouse directory

Step 3: Edit and Refine (Optional)

For real-time modifications, use the interactive editor:

python interactive_editor.py <path_to_generated_site>

This provides:

• Live chat interface for modifications
• Real-time preview of changes
• Image upload and replacement
• Instant code generation and application

📁 Project Structure

digitaltransformation/
├── sito.py                 # User requirements collection interface
├── script_chatdev.py       # Main website generation script
├── interactive_editor.py   # Real-time editing interface
├── run.py                  # ChatDev framework entry point
├── requirements.txt        # Python dependencies
├── llm_config.json        # LLM configuration (auto-generated)
├── dati_utente.txt        # User requirements (auto-generated)
├── prompt_chatdev.txt     # Technical prompt (auto-generated)
├── templates/             # HTML templates for the editor
├── static/               # CSS, JS, and assets for the editor
├── WareHouse/           # Generated websites storage
├── Template/            # Base templates for generation
├── chatdev/            # Multi-agent framework
├── camel/              # Agent communication system
└── misc/               # Documentation and examples

🤖 LLM Configuration

The system supports multiple LLM providers:

External APIs

• OpenAI: GPT-4, GPT-3.5-turbo
• OpenRouter: Access to various models
• Custom APIs: Any OpenAI-compatible endpoint

Local Models

• LM Studio: Local model hosting
• Ollama: Local LLM management
• Custom local servers: Any compatible local endpoint

Configuration is handled through the web interface on first run, or by editing llm_config.json:

{
    "type": "external",
    "url": "https://api.openai.com/v1/chat/completions",
    "model": "gpt-4",
    "api_key": "your-api-key-here"
}

💡 Usage Examples

Basic Website Generation

1. Run python sito.py
2. Fill in the form with your website details:
   • Site name: "My Restaurant"
   • Target audience: "Food lovers"
   • Theme: "Italian restaurant with cozy atmosphere"
   • Pages: Home, Menu, Contact
3. Run python script_chatdev.py
4. Find your generated website in WareHouse/

Advanced Customization

1. After generation, run python interactive_editor.py <site_path>
2. Use natural language to request changes:
   • "Change the header color to blue"
   • "Add a photo gallery section"
   • "Make the font more readable"
3. Upload custom images and integrate them seamlessly

🔧 Configuration Options

Website Generation Settings

• Single vs Multi-page: Choose between single-page or multi-page websites
• Design Styles: Generic, Creative, Professional, Minimalist
• Color Schemes: Custom or AI-generated palettes
• Image Integration: Enable/disable AI-generated images

Technical Settings

• Model Selection: Choose optimal LLM for your needs
• Agent Behavior: Customize multi-agent interactions
• Output Format: HTML/CSS/JS structure preferences

📊 Generated Website Features

All generated websites include:

• Responsive Design: Mobile-first approach
• Modern CSS: Flexbox/Grid layouts
• Interactive Elements: JavaScript functionality
• SEO Optimization: Meta tags and semantic HTML
• Accessibility: ARIA labels and keyboard navigation
• Performance: Optimized assets and loading

🛠️ Development

Running Tests

python -m pytest tests/

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

Extending the System

• Add new agent types in chatdev/agents/
• Create custom templates in Template/
• Extend the editor with new features in interactive_editor.py

📝 License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

🔍 Troubleshooting

Common Issues

"LLM configuration not found"

• Run python sito.py first to configure your LLM settings

"Generated website is empty"

• Check your LLM API key and endpoint configuration
• Ensure your requirements in dati_utente.txt are detailed enough

"Interactive editor won't start"

• Verify the website path exists and contains index.html
• Check that all dependencies are installed correctly

Debug Mode

Enable detailed logging by setting the environment variable:

export CHATDEV_DEBUG=1
python script_chatdev.py

🙏 Acknowledgments

• Built on the ChatDev framework
• Utilizes CAMEL for agent communication
• Inspired by advances in AI-powered software development