Disegna un sito web: trasforma la tua immaginazione in un sito web utilizzando i modelli Gemini.

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 sia complesso. Tuttavia, con l'avvento di modelli di AI generativa come Gemini, questo processo sta diventando sempre più semplificato e accessibile. Creeremo una soluzione specializzata nella conversione di wireframe disegnati a mano in codice di siti web. Questo potente strumento consente a designer e sviluppatori di dare vita alle loro visioni di siti web con una facilità ed efficienza senza precedenti.

In questo lab, creeremo un'applicazione web che consente agli utenti di generare codice di siti 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 framework web Python molto diffuso, e utilizzerà la libreria client di Vertex AI per interagire con il servizio Modelli generativi.

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 funziona l'app

1. Carica un wireframe disegnato a mano: gli utenti possono caricare un'immagine del wireframe disegnato a mano nell'app.
2. Seleziona un modello: l'app offre una selezione di modelli Gemini pre-addestrati ottimizzati per diversi stili di design.
3. Fornisci un prompt: gli utenti possono facoltativamente fornire un prompt di testo per guidare la generazione del modello.
4. Genera codice di siti web: l'app invia il wireframe e il prompt a Gemini, che genera il codice del sito web corrispondente.
5. Visualizza il risultato: il codice generato viene visualizzato nella pagina di risposta dell'app.

Inizieremo parlando delle nozioni di base di wireframe e prompt e di come possono essere utilizzati per generare codice di siti web. Poi, ti guideremo nei passaggi per creare l'applicazione web, inclusi la gestione dell'input dell'utente, la generazione della risposta e la visualizzazione dei risultati.

2. Prima di iniziare

1. Nella console Google Cloud, nella pagina di selezione del progetto, seleziona o crea un progetto Google Cloud.
2. Verifica che la fatturazione sia attivata per il tuo progetto Google Cloud. Scopri come verificare se la fatturazione è attivata per un progetto.
3. 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.

4. Una volta eseguita la connessione a Cloud Shell, verifica che il tuo account sia già autenticato e che il progetto sia impostato sul tuo ID progetto utilizzando il seguente comando:

gcloud auth list

5. Esegui il seguente comando in Cloud Shell per verificare che il comando gcloud conosca il tuo progetto.

gcloud config list project

6. Se il progetto non è impostato, utilizza il seguente comando per impostarlo:

gcloud config set project <YOUR_PROJECT_ID>

7. Assicurati che le seguenti API siano abilitate:

• Cloud Run
• Vertex AI

L'alternativa all'utilizzo del comando gcloud è passare alla console utilizzando questo link. Consulta la documentazione per i comandi e l'utilizzo di gcloud.

3. Passaggio 1: avvia 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 riportata di seguito, e che sia impostato sul progetto Google Cloud attivo in cui hai abilitato la fatturazione. Fai clic su 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.

È così 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 di wireframe disegnata a mano, selezionare un modello generativo e fornire un prompt di testo. Dopo l'invio del 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:

1. L'utente seleziona un'immagine di wireframe, un modello e inserisce un prompt.
2. 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.
3. Il codice lato server (implementato in app.py) elabora i dati del modulo e genera la risposta utilizzando il modello e il prompt specificati.
4. La risposta generata viene visualizzata nella nuova scheda.

Ora siamo pronti con la parte frontend dell'applicazione web.

5. Passaggio 3: crea il backend (AI 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 di siti 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 in sostanza il codice:

1. 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.

GenerativeModel e Image: classi della libreria Modelli generativi di Vertex AI.

2. Inizializzazione dell'app Flask:

Poi, inizializza l'applicazione Flask e imposta la dimensione massima consentita per le immagini caricate su 16 MB.

3. 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 progetto.

4. Definizione della funzione generate

Questa funzione accetta come input un'immagine di wireframe, un modello generativo e un prompt. Poi genera l'HTML del sito web utilizzando il modello e il prompt specificati. La risposta generata viene restituita come stringa.

5. Definizione della route della home page

Questa funzione definisce la route della home page. Quando un utente visita l'URL principale dell'applicazione, viene chiamata questa funzione. Esegue il rendering del modello index.html, che è la home page dell'applicazione.

6. 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.

7. Esecuzione dell'applicazione

Questa parte del codice verifica se lo script è in esecuzione come programma principale. In caso affermativo, 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 del 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 per il tuo progetto attivo. In caso contrario, utilizza il comando gcloud configure per impostare l'ID progetto:

gcloud config set project [PROJECT_ID]

Poi 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 per la regione "us-central1". Digita "y" quando ti viene chiesto se vuoi consentire chiamate non autenticate. Tieni presente che qui stiamo consentendo 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.

Al termine del deployment, dovresti ricevere un link simile al seguente:

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

Procedi e testa l'applicazione:

8. Libera spazio

Per evitare che al tuo account Google Cloud vengano addebitati costi relativi alle risorse utilizzate in questo codelab, segui questi passaggi:

1. Nella console Google Cloud, vai alla pagina Gestisci risorse.
2. Nell'elenco dei progetti, seleziona il progetto che vuoi eliminare, quindi fai clic su Elimina.
3. Nella finestra di dialogo, digita l'ID progetto, quindi fai clic su Chiudi per eliminare il progetto.
4. 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 un'applicazione web rapida 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 nella semplificazione del processo di sviluppo web. Sfruttando l'AI, possiamo consentire a designer e sviluppatori di creare siti web con maggiore velocità, accuratezza e creatività. Con il continuo sviluppo dei modelli di AI generativa, possiamo aspettarci applicazioni ancora più rivoluzionarie in futuro.