1. Introduzione
Nel mondo dello sviluppo web, il processo di trasformazione di un concetto di design in un sito web funzionale può essere complesso e dispendioso in termini di tempo. Tuttavia, con l'avvento dei modelli di IA generativa come Gemini, questo processo sta diventando sempre più semplice e accessibile. Creeremo una soluzione specializzata nella conversione di frame di filati disegnati a mano in codice di un sito web. Questo potente strumento consente a designer e sviluppatori di dare vita alle visioni dei loro siti web con una facilità ed efficienza senza precedenti.
In questo lab creeremo un'applicazione web che consente agli utenti di generare codice di un sito web (html, CSS e JavaScript) da frame e prompt che l'utente inserisce utilizzando i modelli di IA 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 Modelli generativi.
Cosa creerai
Alla fine del lab avrai a disposizione un'applicazione web funzionante in grado di generare immagini da Wireframe e prompt. Capirai inoltre meglio come utilizzare i modelli di IA generativa di Vertex AI.
La tua applicazione web sarà simile a questa:
Flusso dell'app
- Carica un Wireframe disegnato a mano:gli utenti possono caricare nell'app un'immagine del Wireframe disegnato a mano.
- Seleziona un modello:l'app fornisce una selezione di modelli Gemini preaddestrati, ottimizzati per diversi stili di progettazione.
- Fornisci un prompt:gli utenti possono facoltativamente fornire un prompt di testo come guida per la generazione del modello.
- Genera il codice del sito web: l'app invia il mesh 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 nozioni di base di spoke e prompt e di come possono essere utilizzati per generare il codice di un sito web. Quindi, analizzeremo in dettaglio i passaggi per la creazione dell'applicazione web, incluse le modalità di gestione dell'input dell'utente, generazione della risposta e visualizzazione dei risultati.
2. Prima di iniziare
- Nella pagina del selettore dei progetti della console Google Cloud, seleziona o crea un progetto Google Cloud.
- Assicurati che la fatturazione sia abilitata per il tuo progetto Google Cloud. Scopri come controllare se la fatturazione è abilitata per un progetto.
- Utilizzerai Cloud Shell, un ambiente a riga di comando in esecuzione su Google Cloud. Per accedervi, fai clic su Attiva Cloud Shell nella parte superiore della console Google Cloud.
- Una volta stabilita la connessione a Cloud Shell, potrai verificare di avere già eseguito l'autenticazione e che il progetto sia impostato sul tuo ID progetto utilizzando questo comando:
gcloud auth list
- Esegui questo comando in Cloud Shell per confermare che il comando gcloud è a conoscenza del tuo progetto.
gcloud config list project
- Se il progetto non è configurato, utilizza il comando seguente per impostarlo:
gcloud config set project <YOUR_PROJECT_ID>
- Assicurati che siano abilitate le seguenti API:
- Cloud Run
- Vertex AI
L'alternativa all'utilizzo del comando gcloud è attraverso la console utilizzando questo link. Per informazioni sui comandi e sull'utilizzo di gcloud, consulta la documentazione.
3. Passaggio 1: avvia il bootstrap di un'app web Cloud Run Python
Per prima cosa creeremo il modello di applicazione web Cloud Run in Python 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 di seguito, e che sia impostato sul progetto Google Cloud attivo in cui hai abilitato la fatturazione. Autorizza, se richiesto.
Fai clic sul progetto attivo nella barra di stato e attendi che si apra il popup di Cloud Code. Nel popup, seleziona "New Application". 
Dall'elenco delle applicazioni, scegli Cloud Run Application:
Per la pagina 2/2, seleziona il modello Python Flask:
Fornisci il nome del progetto come preferisci (ad es. "amazing-gemini-app") e fai clic su OK:
Si aprirà il modello per il nuovo progetto che hai appena configurato.
Ecco quanto è semplice eseguire il bootstrap di un'applicazione web con Google Cloud Shell.
4. Passaggio 2: crea il frontend
Per farlo, sarà necessaria 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 POST HTTP.
- 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 in una nuova scheda.
Ora siamo pronti con la parte front-end dell'applicazione web.
5. Passaggio 3: crea il backend (IA generativa)
Scriviamo la parte principale di questa applicazione web. Il file app.py che prende l'immagine di input dell'utente, la scelta del modello e il prompt e lo converte in codice del sito web.
Copia il codice completo del file 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')
La seguente funzione è 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 di Vertex AI.
Modello generativo e immagine: classi della libreria di modelli generativi di Vertex AI.
- Inizializzazione dell'app Flask:
Quindi inizializza l'applicazione Flask e imposta la dimensione massima consentita per le immagini caricate su 16 MB.
- Inizializzazione del client Vertex AI
Inizializza la libreria client di Vertex AI con l'ID progetto e la località specificati. Assicurati di sostituire YOUR_PROJECT_ID con l'ID del tuo progetto.
- definisci la funzione generate
Questa funzione prende come input un'immagine Wireframe, un modello generativo e un prompt. Quindi genera il codice HTML del sito web utilizzando il modello e il prompt specificati. La risposta generata viene restituita come stringa.
- Definizione del percorso della home page
Questa funzione definisce la route della home page. Questa funzione viene chiamata quando un utente visita l'URL principale dell'applicazione. Visualizza il modello index.html, che è la home page dell'applicazione.
- Definizione della route di risposta
Questa funzione definisce la route di risposta. Questa funzione viene richiamata quando un utente invia il modulo sulla home page. Elabora l'immagine, il modello e il prompt caricati e poi genera il codice del sito web. La risposta generata viene visualizzata in una nuova scheda.
- Esecuzione dell'applicazione
Questa parte del codice controlla se lo script è in esecuzione come programma principale. In questo caso, ottiene 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 che il file requirements.txt includa le seguenti dipendenze:
Flask==2.3.3
requests==2.31.0
debugpy # Required for debugging.
google-cloud-aiplatform>=1.38
Sostituisci il contenuto del Dockerfile con quanto segue:
# 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 di Cloud Shell e assicurati che il progetto corrente sia configurato sul progetto attivo. In caso contrario, utilizza il comando gcloud configure per impostare l'ID del progetto:
gcloud config set project [PROJECT_ID]
Quindi inserisci i seguenti comandi uno alla volta in quell'ordine:
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 per la regione "us-central1". Di' "y" quando ti chiede se vuoi consentire le chiamate non autenticate. Tieni presente che consentiamo l'accesso non autenticato qui perché questa è un'applicazione demo. Il consiglio è di utilizzare un'autenticazione appropriata per le applicazioni aziendali e di produzione.
Una volta completato il deployment, dovresti ricevere un link simile al seguente:
**https://draw-website-*****eua-uc.a.run.app/
Procedi e testa la tua 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 eliminare il servizio.
9. Complimenti
Complimenti Hai creato una rapida applicazione web in Python Flask di cui è stato eseguito il deployment in Cloud Run che converte i disegni in siti web. Il repository completo è disponibile qui. L'app draw-a-website mostra il potere trasformativo di Gemini nel semplificare il processo di sviluppo web. Sfruttando l'IA, possiamo consentire a designer e sviluppatori di creare siti web con maggiore velocità, precisione e creatività. Con la continua evoluzione dei modelli di IA generativa, possiamo aspettarci altre applicazioni innovative in futuro.