Dibuja un sitio web: Transforma tu imaginación en un sitio web con los modelos de Gemini

1. Introducción

En el mundo del desarrollo web, el proceso de transformar un concepto de diseño en un sitio web funcional puede llevar mucho tiempo y ser complejo. Sin embargo, con la llegada de modelos de IA generativa como Gemini, este proceso es cada vez más sencillo y accesible. Crearemos una solución que se especialice en convertir esquemas de página dibujados a mano en código de sitio web. Esta poderosa herramienta permite a los diseñadores y desarrolladores dar vida a las visiones de sus sitios web con una facilidad y eficiencia sin precedentes.

En este lab, compilaremos una aplicación web que permita a los usuarios generar código de sitio web (html, CSS y JavaScript) a partir de esquemas de página y de instrucciones que el usuario ingresa con los modelos de IA generativa de Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro, etcétera). La aplicación se compilará con Flask, un framework web popular de Python, y usará la biblioteca cliente de Vertex AI para interactuar con el servicio de modelos generativos.

Qué compilarás

Al final de este lab, tendrás una aplicación web funcional que puede generar imágenes a partir de esquemas de página e indicaciones. También comprenderás mejor cómo usar los modelos de IA generativa de Vertex AI.

Tu aplicación web se verá de la siguiente manera:

Cómo fluye la app

1. Sube un esquema de página dibujado a mano: los usuarios pueden subir a la aplicación una imagen de su esquema de página dibujado a mano.
2. Selecciona un modelo: La app proporciona una selección de modelos de Gemini previamente entrenados que están optimizados para diferentes estilos de diseño.
3. Proporciona una instrucción: De manera opcional, los usuarios pueden proporcionar una instrucción de texto para guiar la generación del modelo.
4. Genera código de sitio web: La app envía el esquema de página y la instrucción a Gemini, que genera el código del sitio web correspondiente.
5. Muestra el resultado: El código generado se muestra en la página de respuesta de la app.

Comenzaremos analizando los conceptos básicos de los esquemas de página y las indicaciones, y cómo se pueden usar para generar código de sitio web. Luego, analizaremos los pasos para compilar la aplicación web, incluido cómo controlar las entradas del usuario, generar respuestas y mostrar los resultados.

2. Antes de comenzar

1. En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.
2. Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud. Obtén información sobre cómo verificar si la facturación está habilitada en un proyecto.
3. Usarás Cloud Shell, un entorno de línea de comandos que se ejecuta en Google Cloud. Para acceder, haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.

4. Cuando te conectes a Cloud Shell, usa el siguiente comando para comprobar que ya estés autenticado y que el proyecto esté configurado con tu ID del proyecto:

gcloud auth list

5. Ejecuta el siguiente comando en Cloud Shell para confirmar que el comando de gcloud conoce tu proyecto.

gcloud config list project

6. Si tu proyecto no está configurado, usa el siguiente comando para hacerlo:

gcloud config set project <YOUR_PROJECT_ID>

7. Asegúrate de que estén habilitadas las siguientes APIs:

• Cloud Run
• Vertex AI

La alternativa al uso del comando de gcloud es utilizar la consola mediante este vínculo. Consulta la documentación para ver los comandos de gcloud y su uso.

3. Paso 1: Inicia una app web de Cloud Run en Python

Primero, crearemos la plantilla de aplicación web Cloud Run de Python desde Cloud Shell.

Navega a la Terminal de Cloud Shell y haz clic en el botón Abrir editor.

Asegúrate de que el proyecto de Cloud Code esté configurado en la esquina inferior izquierda (barra de estado) del editor de Cloud Shell, como se destaca en la imagen a continuación, y que esté configurado en el proyecto activo de Google Cloud en el que tienes habilitada la facturación. Autoriza si se te solicita.

Haz clic en ese proyecto activo en la barra de estado y espera a que aparezca la ventana emergente de Cloud Code. En la ventana emergente, selecciona "New Application".

En la lista de aplicaciones, elige Cloud Run Application:

Para la página 2/2, selecciona la plantilla Python Flask:

Proporciona el nombre del proyecto como desees (por ejemplo, "amazing-gemini-app") y haz clic en OK:

Esto abrirá la plantilla del proyecto nuevo que acabas de configurar.

Así de simple es iniciar una aplicación web con Google Cloud Shell.

4. Paso 2: Compila el frontend

Para hacerlo, necesitaremos una página HTML. Esa página contendrá el código que define la interfaz de usuario para la aplicación web. Incluye un formulario que permite a los usuarios subir una imagen de esquema de página dibujada a mano, seleccionar un modelo generativo y proporcionar una instrucción de texto. Una vez enviado el formulario, el resultado se mostrará en otra pestaña.

Copia el siguiente código y reemplaza tu archivo index.html en la carpeta 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>

Cuando un usuario interactúa con la app, se producen las siguientes acciones:

1. El usuario elige una imagen de esquema de página, selecciona un modelo e ingresa una instrucción.
2. Cuando el usuario hace clic en el botón "Enviar" , los datos del formulario (imagen, modelo y mensaje) se envían a la URL /response con el método HTTP POST.
3. El código del servidor (implementado en app.py) procesa los datos del formulario y genera la respuesta usando el modelo y la instrucción especificados.
4. La respuesta generada se muestra en la pestaña nueva.

Ya estamos listos con la parte del frontend de la aplicación web.

5. Paso 3: Compila el backend (IA generativa)

Escribamos la parte principal de esta aplicación web. El archivo app.py que toma la imagen de entrada del usuario, la elección del modelo y la instrucción, y los convierte en código del sitio web

Copia el código completo de 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')

Lo siguiente es, en esencia, lo que hace el código:

1. Este código importa las bibliotecas necesarias para la aplicación:

Flask: Un framework web ligero para Python.

os: Para interactuar con el sistema operativo.

aleatorio: Para generar números al azar.

vertexai: La biblioteca cliente de Vertex AI.

Imagen y modelo GenerativeModel: Clases de la biblioteca de modelos generativos de Vertex AI.

2. Inicializa la aplicación de flask:

A continuación, inicializa la aplicación Flask y establece el tamaño máximo permitido para las imágenes subidas en 16 MB.

3. Inicializa el cliente de Vertex AI

Inicializa la biblioteca cliente de Vertex AI con la ubicación y el ID del proyecto especificados. Asegúrate de reemplazar YOUR_PROJECT_ID con tu ID del proyecto.

4. Define la función generate

Esta función toma una imagen de esquema de página, un modelo generativo y una instrucción como entradas. Luego, genera el código HTML del sitio web usando el modelo y la instrucción especificados. La respuesta generada se muestra como una cadena.

5. Definición de la ruta de la página principal

Esta función define la ruta de la página principal. Cuando un usuario visita la URL raíz de la aplicación, se llama a esta función. Renderiza la plantilla index.html, que es la página principal de la aplicación.

6. Definición de la ruta de respuesta

Esta función define la ruta de respuesta. Cuando un usuario envía el formulario en la página principal, se llama a esta función. Procesa la imagen, el modelo y la instrucción que se subieron y, luego, genera el código del sitio web. La respuesta generada se muestra en la pestaña nueva.

7. Ejecuta la aplicación

Esta parte del código verifica si la secuencia de comandos se está ejecutando como programa principal. Si es así, obtiene el puerto del servidor de las variables de entorno y ejecuta la app en el puerto especificado.

6. Paso 4: Prepara las dependencias y el Dockerfile

Asegúrate de tener las siguientes dependencias en el archivo requirements.txt:

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

Reemplaza el contenido del Dockerfile por lo siguiente:

# 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. Paso 5: Implementa la aplicación web

Ahora que creamos los componentes de la aplicación, implementemos la aplicación.

Navega a la terminal de Cloud Shell y asegúrate de que el proyecto actual esté configurado como tu proyecto activo. De lo contrario, usa el comando gcloud configure para establecer el ID del proyecto:

gcloud config set project [PROJECT_ID]

Luego, ingresa los siguientes comandos en ese orden, uno por uno:

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

Se te pedirá que ingreses un nombre para tu servicio, por ejemplo, "draw-website". Elige el número correspondiente para la región “us-central1”. Di "y". cuando te pregunte si quieres permitir invocaciones no autenticadas. Ten en cuenta que permitimos el acceso no autenticado porque esta es una aplicación de demostración. Se recomienda usar la autenticación adecuada para tu empresa y tus aplicaciones de producción.

Cuando se complete la implementación, deberías obtener un vínculo similar al siguiente:

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

Prueba tu aplicación:

8. Limpia

Sigue estos pasos para evitar que se apliquen cargos a tu cuenta de Google Cloud por los recursos que usaste en este codelab:

1. En la consola de Google Cloud, ve a la página Administrar recursos.
2. En la lista de proyectos, elige el proyecto que deseas borrar y haz clic en Borrar.
3. En el diálogo, escribe el ID del proyecto y, luego, haz clic en Cerrar para borrarlo.
4. Como alternativa, puedes ir a Cloud Run en la consola, seleccionar el servicio que acabas de implementar y borrarlo.

9. Felicitaciones

¡Felicitaciones! Compilaste correctamente una aplicación web rápida en Python Flask implementada en Cloud Run que convierte dibujos en sitios web. Aquí encontrarás el repo completo. La app de dibujar un sitio web muestra el poder transformador de Gemini para optimizar el proceso de desarrollo web. Si aprovechamos la IA, podemos capacitar a los diseñadores y desarrolladores para que creen sitios web con mayor velocidad, precisión y creatividad. A medida que los modelos de IA generativa continúan evolucionando, podemos esperar aplicaciones aún más innovadoras en el futuro.