Wireframe to Website Generator

Introduction

In the world of web development, the process of transforming a design concept into a functional website can be both time-consuming and complex. However, with the advent of generative AI models like Gemini, this process is becoming increasingly streamlined and accessible. This application specializes in converting hand-drawn wireframes into website code (HTML, CSS, JavaScript). It empowers designers and developers alike to bring their website visions to life with unprecedented ease and efficiency.

In this lab, we will build a web application that allows users to generate website code from wireframes and user-defined prompts using Vertex AI's Generative AI Models (such as Gemini 1.5 Flash and Gemini 1.5 Pro). The application is built using Flask, a popular Python web framework, and leverages the Vertex AI client library to interact with the Generative Models service.

---

Features

• Upload Hand-Drawn Wireframes: Users can upload an image of their hand-drawn wireframe.
• Select a Model: The app provides a selection of pre-trained Gemini models, optimized for different design styles.
• Provide a Prompt: Users can optionally provide a text prompt to guide the model's generation process.
• Generate Website Code: The app sends the wireframe and prompt to Gemini, which generates the corresponding website code (HTML, CSS, JavaScript).
• Display the Result: The generated code is displayed on the app's response page, allowing users to easily copy or download the code.

---

Tech Stack

• Backend: Python, Flask
• AI/ML Models: Vertex AI's Gemini models (Gemini 1.5 Flash, Gemini 1.5 Pro)
• Frontend: HTML, CSS, JavaScript (generated by the AI)
• Cloud Service: Google Cloud Platform (Vertex AI)

---

Setup and Installation

Prerequisites

• Python 3.8+
• Google Cloud Account with access to Vertex AI
• Flask and necessary libraries

Steps to Install and Run Locally

1. Clone the Repository:

   git clone https://github.com/your-username/wireframe-to-website-generator.git
   cd wireframe-to-website-generator

2. Create and Activate a Virtual Environment:

   python3 -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install Dependencies:

   pip install -r requirements.txt

4. Set Up Google Cloud Credentials:

   • Ensure that you have your Google Cloud credentials set up. Follow this guide to authenticate the app for Vertex AI usage.

5. Set Environment Variables: Add your Google Cloud Project ID and other required configurations in a .env file:

   GOOGLE_CLOUD_PROJECT=<your-project-id>

6. Run the Application:

   flask run

7. Access the App: Open your browser and navigate to http://127.0.0.1:5000.

---

How the App Works

1. Upload a Hand-Drawn Wireframe: Users upload an image of their hand-drawn wireframe.
2. Select a Model: The app provides a selection of Gemini models optimized for different design styles.
3. Provide a Prompt: Users can optionally enter a text prompt to refine the website code generation.
4. Generate Website Code: The app sends the wireframe and prompt to Gemini, which generates the website's HTML, CSS, and JavaScript.
5. Display the Result: The generated code is displayed on the app's response page, and users can copy or download the code.

---

Folder Structure