Dessinez un site Web: transformez votre imagination en site Web à l'aide de modèles Gemini.

1. Introduction

Dans le monde du développement Web, la transformation d'un concept de conception en site Web fonctionnel peut être à la fois longue et complexe. Toutefois, avec l'avènement des modèles d'IA générative comme Gemini, ce processus devient de plus en plus simple et accessible. Nous allons créer une solution spécialisée dans la conversion de wireframes dessinés à la main en code de site Web. Cet outil puissant permet aux concepteurs et aux développeurs de donner vie à leurs visions de sites Web avec une facilité et une efficacité sans précédent.

Dans cet atelier, nous allons créer une application Web qui permet aux utilisateurs de générer du code de site Web (HTML, CSS et JavaScript) à partir de wireframes et d'invites qu'ils saisissent à l'aide des modèles d'IA générative de Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro, etc.). L'application sera créée à l'aide de Flask, un framework Web Python populaire, et utilisera la bibliothèque cliente Vertex AI pour interagir avec le service de modèles génératifs.

Objectifs de l'atelier

À la fin de cet atelier, vous disposerez d'une application Web fonctionnelle capable de générer des images à partir de wireframes et de requêtes. Vous comprendrez également mieux comment utiliser les modèles d'IA générative de Vertex AI.

Votre application Web se présentera comme suit :

5bccb261882c1bf0.png

Déroulement de l'application

  1. Importer une armature dessinée à la main : les utilisateurs peuvent importer une image de leur armature dessinée à la main dans l'application.
  2. Sélectionnez un modèle : l'application propose une sélection de modèles Gemini pré-entraînés et optimisés pour différents styles de conception.
  3. Fournir une requête : les utilisateurs peuvent éventuellement fournir une requête textuelle pour guider la génération du modèle.
  4. Génération du code du site Web : l'application envoie le wireframe et la requête à Gemini, qui génère le code du site Web correspondant.
  5. Afficher le résultat : le code généré s'affiche sur la page de réponse de l'application.

Nous commencerons par aborder les principes de base des wireframes et des requêtes, et la façon dont ils peuvent être utilisés pour générer du code de site Web. Nous allons ensuite passer en revue les étapes de création de l'application Web, y compris la façon de gérer les entrées utilisateur, de générer des réponses et d'afficher les résultats.

2. Avant de commencer

  1. Dans la console Google Cloud, sur la page du sélecteur de projet, sélectionnez ou créez un projet Google Cloud.
  2. Assurez-vous que la facturation est activée pour votre projet Google Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.
  3. Vous allez utiliser Cloud Shell, un environnement de ligne de commande exécuté dans Google Cloud. Pour y accéder, cliquez sur "Activer Cloud Shell" en haut de la console Google Cloud.

1829c3759227c19b.png

  1. Une fois connecté à Cloud Shell, vérifiez que vous êtes déjà authentifié et que le projet est défini sur votre ID de projet à l'aide de la commande suivante :
gcloud auth list
  1. Exécutez la commande suivante dans Cloud Shell pour vérifier que la commande gcloud connaît votre projet.
gcloud config list project
  1. Si votre projet n'est pas défini, utilisez la commande suivante pour le définir :
gcloud config set project <YOUR_PROJECT_ID>
  1. Assurez-vous que les API suivantes sont activées :
  • Cloud Run
  • Vertex AI

Vous pouvez également passer par la console en utilisant ce lien. Consultez la documentation pour connaître les commandes gcloud ainsi que leur utilisation.

3. Étape 1 : Amorcer une application Web Python Cloud Run

Nous allons d'abord créer le modèle d'application Web Python Cloud Run à partir de Cloud Shell.

Accédez au terminal Cloud Shell, puis cliquez sur le bouton "Ouvrir l'éditeur". b16d56e4979ec951.png

Assurez-vous que le projet Cloud Code est défini en bas à gauche (barre d'état) de l'éditeur Cloud Shell, comme indiqué dans l'image ci-dessous, et qu'il est défini sur le projet Google Cloud actif pour lequel la facturation est activée. Cliquez sur Autoriser si vous y êtes invité.

f5003b9c38b43262.png

Cliquez sur le projet actif dans la barre d'état et attendez que le pop-up Cloud Code s'ouvre. Dans le pop-up qui s'affiche, sélectionnez "Nouvelle application". 70f80078e01a02d8.png

Dans la liste des applications, sélectionnez Application Cloud Run :

39abad102a72ae74.png

Sur la page 2/2, sélectionnez le modèle Python Flask :

a78b3a0311403ad.png

Donnez le nom de votre choix au projet (par exemple, "amazing-gemini-app"), puis cliquez sur OK :

4d8f77279d9509cb.png

Le modèle du nouveau projet que vous venez de configurer s'ouvre.

e85a020a20d38e17.png

Il est très simple d'amorcer une application Web avec Google Cloud Shell.

4. Étape 2 : Créez l'interface

Pour ce faire, nous aurons besoin d'une page HTML. Cette page contiendra le code qui définit l'interface utilisateur de l'application Web. Il inclut un formulaire permettant aux utilisateurs d'importer une image de wireframe dessinée à la main, de sélectionner un modèle génératif et de fournir une requête textuelle. Une fois le formulaire envoyé, le résultat s'affiche dans un autre onglet.

Copiez le code ci-dessous et remplacez votre fichier index.html dans le dossier templates :

<!DOCTYPE html>
<html>
<head>
   <title>Draw a Website</title>
   <style>
       body {
           font-family: sans-serif;
           display: flex;
           justify-content: center;
           align-items: center;
           min-height: 100vh; /* Ensure form is centered vertically */
           background-color: #f4f4f4;
       }
       .container {
           background-color: white;
           padding: 30px;
           border-radius: 8px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
           text-align: center;
       }
       h2 {
           text-align: center;
           margin-bottom: 20px;
       }
       input[type="file"], textarea, select {
           width: 100%;
           padding:10px;
           margin-bottom: 15px;
           border: 1px solid #ccc;
           border-radius: 4px;
           box-sizing: border-box;
       }
       button {
           background-color: #4CAF50;
           color: white;
           padding: 12px 20px;
           border: none;
           border-radius: 4px;
           cursor: pointer;
       }
   </style>
</head>
<body>
   <div class="container">
       <h2>Draw a Website</h2>
       <form action="/response" target="_blank" method="post" enctype="multipart/form-data">
           <input type="file" id="image-upload" name="image-upload" accept=".png, .jpg, .jpeg">
           <select name="model">
               <option value="gemini-1.5-flash-001">Gemini 1.5 Flash</option>
               <option value="gemini-1.5-pro-001">Gemini 1.5 Pro</option>
               <option value="gemini-1.0-pro-vision-001">Gemini 1.0 Pro Vision</option>
               </select>
           <textarea name="prompt" placeholder="Write your prompt here. For example: 'Convert this drawing into an html page'">Convert this drawing into an html page</textarea>
           <button type="submit">Submit</button>
       </form>
   </div>
</body>
</html>

Lorsqu'un utilisateur interagit avec l'application, les actions suivantes se produisent :

  1. L'utilisateur sélectionne une image filaire, un modèle et saisit une requête.
  2. Lorsque l'utilisateur clique sur le bouton "Envoyer", les données du formulaire (image, modèle et requête) sont envoyées à l'URL /response à l'aide de la méthode HTTP POST.
  3. Le code côté serveur (implémenté dans app.py) traite les données du formulaire et génère la réponse à l'aide du modèle et du prompt spécifiés.
  4. La réponse générée s'affiche dans le nouvel onglet.

Nous avons terminé la partie frontend de l'application Web.

5. Étape 3 : Créer le backend (IA générative)

Écrivons la partie principale de cette application Web. Le fichier app.py qui prend en entrée l'image de l'utilisateur, le choix du modèle et le prompt, et le convertit en code de site Web.

Copiez le code complet pour app.py :

# Import the necessary libraries.
import os
import random
from flask import (
    Flask,
    render_template,
    request,
    redirect
)

import vertexai
from vertexai.generative_models import (
    GenerativeModel,
    Image
)

# Initialize the Flask app.
app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB per image

# TODO: Replace "YOUR_PROJECT_ID" before running
# Initialize the Vertex AI client library.
vertexai.init(project="YOUR_PROJECT_ID", location="us-central1")

# Define a function to generate response from a wireframe and a prompt.
def generate(wireframe, model, prompt):
    '''Generates a response from a wireframe and a prompt.
    Args:
    wireframe: The wireframe image.
    model: The generative model to use.
    prompt: The prompt to use.
    Returns:The generated response.
    '''
    # Create a GenerativeModel object.
    model = GenerativeModel(model)

    # Create a list of contents to pass to the model.
    contents = [
        wireframe,
        prompt
    ]
   
    # Generate the response.
    responses = model.generate_content(
        contents=contents,
        stream=True,
    )

    # Concatenate the response text.
    response = ""
    for res in responses:
        response += res.text.strip()
   
    # Return the generated response.
    return response

# Define the home page route.
@app.route('/', methods=['GET'])
def index():
    '''Renders the home page.
    Returns:The rendered template.
    '''
    return render_template('index.html')

# Define the response route.
@app.route('/response', methods=['GET', 'POST'])
def response():
    '''Handles the response to the user's input.
    Returns:The rendered template.
    '''
    # If the request is a POST request, process the form data.
    if request.method == 'POST':
        # Get the uploaded image from the request.
        uploaded_image = request.files['image-upload']
       
        # Convert the uploaded image to a wireframe image.
        wireframe = Image.from_bytes(uploaded_image.read())

        # Get the model and prompt from the request.
        model = request.form['model']
        prompt = request.form['prompt']
       
        # Generate the response and render the response.
        try:
            response = generate(wireframe, model, prompt)
            response = response.replace("```html", "").replace("```", "").strip()
            return response
        except ValueError as e:
            raise e
   
    # If the request is a GET request, redirect to the home page.
    else:
        return redirect('/')

# Run the app.
if __name__ == '__main__':
    # Get the server port from the environment variables.
    server_port = os.environ.get('PORT', '8080')

    # Run the app.
    app.run(debug=False, port=server_port, host='0.0.0.0')

Voici ce que fait le code, en substance :

  1. Ce code importe les bibliothèques nécessaires à l'application :

Flask : framework Web léger pour Python.

os : pour interagir avec le système d'exploitation.

random : pour générer des nombres aléatoires.

vertexai : bibliothèque cliente Vertex AI.

GenerativeModel et Image : classes de la bibliothèque Vertex AI Generative Models.

  1. Initialisation de l'application Flask :

Il initialise ensuite l'application Flask et définit la taille maximale autorisée pour les images importées sur 16 Mo.

  1. Initialiser le client Vertex AI

Elle initialise la bibliothèque cliente Vertex AI avec l'ID de projet et l'emplacement spécifiés. Veillez à remplacer YOUR_PROJECT_ID par l'ID de votre projet.

  1. Définir la fonction de génération

Cette fonction prend en entrée une image filaire, un modèle génératif et un prompt. Il génère ensuite le code HTML du site Web à l'aide du modèle et de la requête spécifiés. La réponse générée est renvoyée sous forme de chaîne.

  1. Définir la route de la page d'accueil

Cette fonction définit la route de la page d'accueil. Cette fonction est appelée lorsqu'un utilisateur visite l'URL racine de l'application. Il affiche le modèle index.html, qui correspond à la page d'accueil de l'application.

  1. Définir la route de réponse

Cette fonction définit la route de réponse. Cette fonction est appelée lorsqu'un utilisateur envoie le formulaire sur la page d'accueil. Il traite l'image, le modèle et la requête importés, puis génère le code du site Web. La réponse générée s'affiche dans le nouvel onglet.

  1. Exécuter l'application

Cette partie du code vérifie si le script est exécuté en tant que programme principal. Si c'est le cas, il récupère le port du serveur à partir des variables d'environnement et exécute l'application sur le port spécifié.

6. Étape 4 : Préparez les dépendances et le fichier Dockerfile

Assurez-vous d'avoir les dépendances suivantes dans le fichier requirements.txt :

Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38

Remplacez le contenu du fichier Dockerfile par le code ci-dessous :

# Python image to use.
FROM python:3.11-slim

# Set the working directory to /app
WORKDIR /app

# copy the requirements file used for dependencies
COPY requirements.txt .

# Install any needed packages specified in requirements.txt
RUN pip install -r requirements.txt

# Copy the rest of the working directory contents into the container at /app
COPY . .

# Run app.py when the container launches
ENTRYPOINT ["python", "app.py"]

7. Étape 5 : Déployer l'application Web

Maintenant que nous avons créé les composants de l'application, déployons-la.

Accédez au terminal Cloud Shell et assurez-vous que le projet actuel est configuré sur votre projet actif. Si ce n'est pas le cas, utilisez la commande gcloud configure pour définir l'ID du projet :

gcloud config set project [PROJECT_ID]

Saisissez ensuite les commandes suivantes dans l'ordre, une par une :

cd draw-a-website
gcloud run deploy --source .

Vous serez invité à saisir un nom pour votre service, par exemple draw-website. Choisissez le numéro correspondant à la région us-central1. Dites y lorsque vous êtes invité à autoriser les appels non authentifiés. Notez que nous autorisons ici l'accès non authentifié, car il s'agit d'une application de démonstration. Nous vous recommandons d'utiliser une authentification appropriée pour vos applications d'entreprise et de production.

Une fois le déploiement terminé, vous devriez obtenir un lien semblable à celui ci-dessous :

**https://draw-website-*****eua-uc.a.run.app/

Testez votre application :

6ca7b67b7fce97de.png

8. Effectuer un nettoyage

Pour éviter que les ressources utilisées dans cet atelier de programmation soient facturées sur votre compte Google Cloud, procédez comme suit :

  1. Dans la console Google Cloud, accédez à la page Gérer les ressources.
  2. Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
  3. Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.
  4. Vous pouvez également accéder à Cloud Run dans la console, sélectionner le service que vous venez de déployer, puis le supprimer.

9. Félicitations

Félicitations ! Vous avez créé une application Web rapide en Python Flask déployée sur Cloud Run qui convertit des dessins en sites Web. Le dépôt complet est disponible sur cette page. L'application Draw-a-Website illustre le pouvoir transformateur de Gemini pour simplifier le processus de développement Web. En tirant parti de l'IA, nous pouvons permettre aux concepteurs et aux développeurs de créer des sites Web plus rapidement, avec plus de précision et de créativité. À mesure que les modèles d'IA générative continuent d'évoluer, nous pouvons nous attendre à voir apparaître encore plus d'applications révolutionnaires à l'avenir.