1. Introduction
Dans le monde du développement Web, le processus de transformation d'un concept de conception en un site Web fonctionnel peut être à la fois long et complexe. Cependant, avec l'arrivée des modèles d'IA générative comme Gemini, ce processus est de plus en plus simplifié et accessible. Nous créerons une solution spécialisée dans la conversion de maquettes dessinées à la main en code de site web. Cet outil puissant permet aux concepteurs comme aux développeurs de donner vie à leur vision de site Web avec une facilité et une efficacité sans précédent.
Dans cet atelier, vous allez créer une application Web permettant aux utilisateurs de générer du code de site Web (HTML, CSS et JavaScript) à partir de maquettes fonctionnelles et de requêtes saisies par l'utilisateur à l'aide des modèles d'IA générative de Vertex AI (Flash Gemini 1.5, 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 aurez une application Web fonctionnelle capable de générer des images à partir de maquettes fonctionnelles et de requêtes. Vous aurez également une meilleure compréhension de l'utilisation des modèles d'IA générative de Vertex AI.
Votre application Web doit se présenter comme suit:
Fonctionnement de l'application
- Importer une maquette fonctionnelle dessinée à la main:les utilisateurs peuvent importer dans l'application une image de leur maquette fonctionnelle dessinée à la main.
- Sélectionner un modèle:l'application fournit une sélection de modèles Gemini pré-entraînés et optimisés pour différents styles de conception.
- Fournir une requête:les utilisateurs peuvent éventuellement fournir une requête textuelle pour guider la génération du modèle.
- Générer le code du site Web:l'application envoie la maquette fonctionnelle et l'invite à Gemini, qui génère le code du site Web correspondant.
- Afficher le résultat:le code généré s'affiche sur la page de réponse de l'application.
Nous commencerons par discuter des bases des maquettes fonctionnelles et des invites, et comment elles peuvent être utilisées pour générer du code de site Web. Nous découvrirons ensuite les étapes de création de l'application Web, notamment la gestion des entrées utilisateur, la génération d'une réponse et l'affichage des résultats.
2. Avant de commencer
- Dans la console Google Cloud, sur la page du sélecteur de projet, sélectionnez ou créez un projet Google Cloud.
- 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.
- 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.
- 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
- Exécutez la commande suivante dans Cloud Shell pour vérifier que la commande gcloud connaît votre projet.
gcloud config list project
- Si votre projet n'est pas défini, utilisez la commande suivante pour le définir :
gcloud config set project <YOUR_PROJECT_ID>
- Assurez-vous que les API suivantes sont activées:
- Cloud Run
- Vertex AI
L'alternative à l'utilisation de la commande gcloud consiste à passer par la console à l'aide de ce lien. Consultez la documentation pour en savoir plus sur les commandes gcloud et 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 dans Cloud Shell.
Accédez au terminal Cloud Shell et cliquez sur le bouton "Ouvrir l'éditeur". 
Assurez-vous que le projet Cloud Code est défini dans l'angle inférieur 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. Autorisez si vous y êtes invité.
Cliquez sur le projet en cours dans la barre d'état et attendez que le pop-up Cloud Code s'ouvre. Dans le pop-up, sélectionnez "New Application" (Nouvelle application). 
Dans la liste des applications, choisissez Cloud Run Application (Application Cloud Run) :
Pour la page 2/2, sélectionnez le modèle Python Flask:
Indiquez le nom du projet que vous souhaitez (par exemple, "amazing-gemini-app"), puis cliquez sur OK:
Le modèle du nouveau projet que vous venez de configurer s'ouvre.
Voilà à quel point il est facile d'amorcer une application Web à l'aide de Google Cloud Shell.
4. Étape 2: Créer l'interface
Pour cela, nous avons besoin d'une page HTML. Cette page contient le code qui définit l'interface utilisateur de l'application Web. Elle comprend un formulaire qui permet aux utilisateurs d'importer une maquette fonctionnelle 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 le 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:
- L'utilisateur sélectionne une maquette, sélectionne un modèle et saisit une invite.
- Lorsque l'utilisateur clique sur le bouton "Submit" (Envoyer), les données du formulaire (image, modèle et invite) sont envoyées à l'URL /réponse à l'aide de la méthode HTTP POST.
- 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 de l'invite spécifiés.
- La réponse générée s'affiche dans le nouvel onglet.
La partie frontend de l'application Web est maintenant prête.
5. Étape 3: Créer le backend (IA générative)
Écrivons la partie principale de cette application Web. Fichier app.py qui convertit l'image de l'entrée utilisateur, le choix du modèle et la requête en code de site Web.
Copiez le code complet du fichier 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')
Le code est essentiellement basé sur les éléments suivants:
- 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.
aléatoire: pour générer des nombres aléatoires.
Vertex AI: bibliothèque cliente Vertex AI
GenerativeModel et image: classes de la bibliothèque de modèles génératifs de Vertex AI.
- Initialiser l'application Flask:
Ensuite, il initialise l'application Flask et définit la taille maximale autorisée pour les images importées sur 16 Mo.
- Initialiser le client Vertex AI
Il initialise la bibliothèque cliente Vertex AI avec l'ID de projet et l'emplacement spécifiés. Veillez à remplacer YOUR_PROJECT_ID par votre ID de projet.
- Définir la fonction "generate"
Cette fonction utilise comme entrées une maquette fonctionnelle, un modèle génératif et une requête. Il génère ensuite le code HTML du site Web à l'aide du modèle et de l'invite spécifiés. La réponse générée est renvoyée sous forme de chaîne.
- Définir l'itinéraire de la page d'accueil
Cette fonction définit l'itinéraire de la page d'accueil. Lorsqu'un utilisateur visite l'URL racine de l'application, cette fonction est appelée. Le modèle index.html s'affiche. Il s'agit de la page d'accueil de l'application.
- Définir la route de réponse
Cette fonction définit la route de réponse. Lorsqu'un utilisateur envoie le formulaire sur la page d'accueil, cette fonction est appelée. Il traite l'image importée, le modèle et la requête, puis génère le code du site Web. La réponse générée s'affiche dans le nouvel onglet.
- Exécuter l'application
Cette partie du code vérifie si le script est exécuté en tant que programme principal. Si tel est le cas, il obtient le port du serveur à partir des variables d'environnement et exécute l'application sur le port spécifié.
6. Étape 4: Préparer les dépendances et le fichier Dockerfile
Assurez-vous que le fichier requirements.txt contient les dépendances suivantes:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38
Remplacez le contenu du Dockerfile par ce qui suit:
# 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 les composants de l'application sont créés, déployons l'application.
Accédez au terminal Cloud Shell et vérifiez 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 cet ordre, une par une:
cd draw-a-website
gcloud run deploy --source .
Vous êtes alors invité à saisir le nom de 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 l'accès non authentifié ici, car il s'agit d'une application de démonstration. Il est recommandé d'utiliser l'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:
**https://draw-website-*****eua-uc.a.run.app/
Vous pouvez maintenant tester votre application:
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:
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
- Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez sur Arrêter pour supprimer le projet.
- Vous pouvez également accéder à Cloud Run dans la console, sélectionner le service que vous venez de déployer et supprimer.
9. Félicitations
Félicitations ! Vous venez de créer une application Web rapide dans Python Flask, déployée sur Cloud Run, qui convertit les dessins en sites Web. Le dépôt complet est disponible ici. Cette application illustre la puissance de transformation de Gemini pour simplifier le processus de développement Web. Grâce à l'IA, nous pouvons donner aux concepteurs et aux développeurs les moyens de créer des sites Web avec plus de rapidité, de précision et de créativité. À mesure que les modèles d'IA générative évoluent, nous pouvons nous attendre à des applications encore plus révolutionnaires.