1. Introduzione
Nel mondo dello sviluppo web, il processo di trasformazione di un concetto di design in un sito web funzionale può essere sia dispendioso in termini di tempo che complesso. Tuttavia, con l'avvento di modelli di AI generativa come Gemini, questo processo sta diventando sempre più semplice e accessibile. Creeremo una soluzione specializzata nella conversione di wireframe disegnati a mano in codice del sito web. Questo potente strumento consente a designer e sviluppatori di dare vita alle loro visioni del sito web con facilità ed efficienza senza precedenti.
In questo lab creeremo un'applicazione web che consente agli utenti di generare codice del sito web (html, css e javascript) da wireframe e prompt inseriti dall'utente utilizzando i modelli di AI generativa di Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro e così via). L'applicazione verrà creata utilizzando Flask, un popolare framework web Python, e utilizzerà la libreria client Vertex AI per interagire con il servizio Generative Models.
Cosa creerai
Al termine di questo lab, avrai un'applicazione web funzionante in grado di generare immagini da wireframe e prompt. Avrai anche una migliore comprensione di come utilizzare i modelli di AI generativa di Vertex AI.
La tua applicazione web avrà questo aspetto:
Come funzionano i flussi dell'app
- Carica un wireframe disegnato a mano:gli utenti possono caricare un'immagine del wireframe disegnato a mano nell'app.
- Seleziona un modello:l'app offre una selezione di modelli Gemini pre-addestrati ottimizzati per diversi stili di design.
- Fornisci un prompt: gli utenti possono fornire un prompt di testo facoltativo per guidare la generazione del modello.
- Genera codice del sito web: l'app invia il wireframe e il prompt a Gemini, che genera il codice del sito web corrispondente.
- Visualizza il risultato:il codice generato viene visualizzato nella pagina di risposta dell'app.
Inizieremo parlando delle basi di wireframe e prompt e di come possono essere utilizzati per generare il codice del sito web. Poi, esamineremo i passaggi per creare l'applicazione web, incluso come gestire l'input dell'utente, generare la risposta e visualizzare i risultati.
2. Prima di iniziare
- Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
- Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud. Scopri come verificare se la fatturazione è abilitata per un progetto.
- Utilizzerai Cloud Shell, un ambiente a riga di comando in esecuzione in Google Cloud. Per accedervi, fai clic su Attiva Cloud Shell nella parte superiore della console Google Cloud.
- Una volta eseguita la connessione a Cloud Shell, verifica di essere già autenticato e che il progetto sia impostato sul tuo ID progetto utilizzando il seguente comando:
gcloud auth list
- Esegui questo comando in Cloud Shell per verificare che il comando gcloud conosca il tuo progetto.
gcloud config list project
- Se il progetto non è impostato, utilizza il seguente comando per impostarlo:
gcloud config set project <YOUR_PROJECT_ID>
- Assicurati che le seguenti API siano abilitate:
- Cloud Run
- Vertex AI
L'alternativa all'utilizzo del comando gcloud è la console, utilizzando questo link. Per i comandi e l'utilizzo di gcloud, consulta la documentazione.
3. Passaggio 1: esegui il bootstrap di un'app web Python Cloud Run
Creeremo prima il modello di applicazione web Python Cloud Run da Cloud Shell.
Vai al terminale Cloud Shell e fai clic sul pulsante Apri editor. 
Assicurati che il progetto Cloud Code sia impostato nell'angolo in basso a sinistra (barra di stato) dell'editor di Cloud Shell, come evidenziato nell'immagine seguente, e che sia impostato sul progetto Google Cloud attivo in cui hai attivato la fatturazione. Autorizza, se richiesto.
Fai clic sul progetto attivo nella barra di stato e attendi l'apertura del popup di Cloud Code. Nel popup, seleziona "Nuova applicazione". 
Dall'elenco delle applicazioni, scegli Applicazione Cloud Run:
Per la pagina 2/2, seleziona il modello Python Flask:
Fornisci il nome del progetto che preferisci (ad es. "amazing-gemini-app") e fai clic su Ok:
Si aprirà il modello per il nuovo progetto appena configurato.
Ecco quanto è semplice avviare un'applicazione web con Google Cloud Shell.
4. Passaggio 2: crea il frontend
Per farlo, avremo bisogno di una pagina HTML. Questa pagina conterrà il codice che definisce l'interfaccia utente dell'applicazione web. Include un modulo che consente agli utenti di caricare un'immagine wireframe disegnata a mano, selezionare un modello generativo e fornire un prompt di testo. Una volta inviato il modulo, il risultato verrà visualizzato in un'altra scheda.
Copia il codice riportato di seguito e sostituisci il file index.html nella cartella 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>
Quando un utente interagisce con l'app, si verificano le seguenti azioni:
- L'utente seleziona un'immagine wireframe, seleziona un modello e inserisce un prompt.
- Quando l'utente fa clic sul pulsante "Invia", i dati del modulo (immagine, modello e prompt) vengono inviati all'URL /response utilizzando il metodo HTTP POST.
- Il codice lato server (implementato in app.py) elabora i dati del modulo e genera la risposta utilizzando il modello e il prompt specificati.
- La risposta generata viene visualizzata nella nuova scheda.
Ora la parte front-end dell'applicazione web è pronta.
5. Passaggio 3: crea il backend (IA generativa)
Scriviamo la parte principale di questa applicazione web. Il file app.py che prende l'immagine inserita dall'utente, la scelta del modello e il prompt e lo converte in codice del sito web.
Copia il codice completo per 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')
Di seguito è riportato essenzialmente ciò che fa il codice:
- Questo codice importa le librerie necessarie per l'applicazione:
Flask: un framework web leggero per Python.
os: per interagire con il sistema operativo.
random: per generare numeri casuali.
vertexai: la libreria client Vertex AI.
GenerativeModel e Image: classi della libreria Vertex AI Generative Models.
- Inizializzazione dell'app Flask:
Successivamente, inizializza l'applicazione Flask e imposta le dimensioni massime consentite per le immagini caricate su 16 MB.
- Inizializzazione del client Vertex AI
Inizializza la libreria client Vertex AI con l'ID progetto e la località specificati. Assicurati di sostituire YOUR_PROJECT_ID con l'ID del tuo progetto.
- Definizione della funzione generate
Questa funzione accetta come input un'immagine wireframe, un modello generativo e un prompt. Quindi genera l'HTML del sito web utilizzando il modello e il prompt specificati. La risposta generata viene restituita come stringa.
- Definizione della route della home page
Questa funzione definisce la route della home page. Questa funzione viene chiamata quando un utente visita l'URL radice dell'applicazione. Viene eseguito il rendering del modello index.html, che è la home page dell'applicazione.
- Definizione della route di risposta
Questa funzione definisce la route di risposta. Quando un utente invia il modulo nella home page, viene chiamata questa funzione. Elabora l'immagine, il modello e il prompt caricati, quindi genera il codice del sito web. La risposta generata viene visualizzata nella nuova scheda.
- Esecuzione dell'applicazione
Questa parte del codice verifica se lo script viene eseguito come programma principale. In questo caso, recupera la porta del server dalle variabili di ambiente ed esegue l'app sulla porta specificata.
6. Passaggio 4: prepara le dipendenze e il Dockerfile
Assicurati di avere le seguenti dipendenze nel file requirements.txt:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38
Sostituisci i contenuti di Dockerfile con i seguenti:
# 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. Passaggio 5: esegui il deployment dell'applicazione web
Ora che abbiamo creato i componenti dell'applicazione, eseguiamo il deployment dell'app.
Vai al terminale Cloud Shell e assicurati che il progetto attuale sia configurato sul tuo progetto attivo. In caso contrario, devi utilizzare il comando gcloud configure per impostare l'ID progetto:
gcloud config set project [PROJECT_ID]
Quindi, inserisci i seguenti comandi in ordine uno alla volta:
cd draw-a-website
gcloud run deploy --source .
Ti verrà chiesto di inserire un nome per il servizio, ad esempio "draw-website". Scegli il numero corrispondente alla regione "us-central1". Di' "sì" quando ti viene chiesto se vuoi consentire chiamate non autenticate. Tieni presente che qui consentiamo l'accesso non autenticato perché si tratta di un'applicazione demo. Ti consigliamo di utilizzare l'autenticazione appropriata per le applicazioni aziendali e di produzione.
Una volta completato il deployment, dovresti ricevere un link simile a quello riportato di seguito:
**https://draw-website-*****eua-uc.a.run.app/
Procedi con il test dell'applicazione:
8. Esegui la pulizia
Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, segui questi passaggi:
- Nella console Google Cloud, vai alla pagina Gestisci risorse.
- Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
- Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.
- In alternativa, puoi andare a Cloud Run nella console, selezionare il servizio di cui hai appena eseguito il deployment ed eliminarlo.
9. Complimenti
Complimenti! Hai creato correttamente una rapida applicazione web in Python Flask di cui è stato eseguito il deployment su Cloud Run e che converte i disegni in siti web. Il repository completo è disponibile qui. L'app Disegna un sito web mostra il potere trasformativo di Gemini nella semplificazione del processo di sviluppo web. Sfruttando l'AI, possiamo consentire a designer e sviluppatori di creare siti web con maggiore velocità, precisione e creatività. Con il continuo sviluppo dei modelli di AI generativa, possiamo aspettarci applicazioni ancora più rivoluzionarie in futuro.