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 ser complejo y llevar mucho tiempo. Sin embargo, con la llegada de los modelos de IA generativa, como Gemini, este proceso se está volviendo cada vez más eficiente y accesible. Crearemos una solución especializada en convertir esquemas dibujados a mano en código de sitios web. Esta potente herramienta permite a diseñadores y desarrolladores dar vida a sus visiones de sitios web con una facilidad y eficiencia sin precedentes.

En este lab, compilaremos una aplicación web que permitirá a los usuarios generar código de sitios web (HTML, CSS y JavaScript) a partir de wireframes y mensajes que ingresen con los modelos de IA generativa de Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro, etc.). 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 y mensajes. 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:

5bccb261882c1bf0.png

Cómo fluye la app

  1. Subir un esquema dibujado a mano: Los usuarios pueden subir una imagen de su esquema dibujado a mano a la app.
  2. Selecciona un modelo: La app proporciona una selección de modelos de Gemini entrenados previamente y optimizados para diferentes estilos de diseño.
  3. Proporciona una instrucción: Los usuarios pueden proporcionar, de forma opcional, una instrucción de texto para guiar la generación del modelo.
  4. Generar código del sitio web: La app envía el wireframe y la instrucción a Gemini, que genera el código del sitio web correspondiente.
  5. Mostrar 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 wireframes y las instrucciones, y cómo se pueden usar para generar código de sitios web. Luego, analizaremos los pasos para compilar la aplicación web, incluido cómo controlar la entrada 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 a ella, haz clic en Activar Cloud Shell en la parte superior de la consola de Google Cloud.

1829c3759227c19b.png

  1. Una vez que te conectes a Cloud Shell, verifica que ya te autenticaste y que el proyecto se configuró con tu ID del proyecto con el siguiente comando:
gcloud auth list
  1. En Cloud Shell, ejecuta el siguiente comando para confirmar que el comando gcloud conoce tu proyecto.
gcloud config list project
  1. Si tu proyecto no está configurado, usa el siguiente comando para hacerlo:
gcloud config set project <YOUR_PROJECT_ID>
  1. Asegúrate de que las siguientes APIs estén habilitadas:
  • Cloud Run
  • Vertex AI

La alternativa a usar el comando de gcloud es acceder a la consola a través de este vínculo. Consulta la documentación para ver los comandos y el uso de gcloud.

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

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

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

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 siguiente imagen, y que esté configurado en el proyecto activo de Google Cloud en el que tienes habilitada la facturación. Haz clic en Autorizar si se te solicita.

f5003b9c38b43262.png

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

En la lista de aplicaciones, elige Cloud Run Application:

39abad102a72ae74.png

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

a78b3a0311403ad.png

Proporciona el nombre del proyecto como quieras (p.ej., "amazing-gemini-app") y haz clic en Aceptar:

4d8f77279d9509cb.png

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

e85a020a20d38e17.png

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

4. Paso 2: Compila el frontend

Para ello, necesitaremos una página HTML. Esa página contendrá el código que define la interfaz de usuario de la aplicación web. Incluye un formulario que permite a los usuarios subir una imagen de un wireframe dibujado a mano, seleccionar un modelo generativo y proporcionar una instrucción de texto. Cuando envíes 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, ocurren las siguientes acciones:

  1. El usuario selecciona una imagen de estructura alámbrica, elige un modelo y, luego, 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 con el modelo y la instrucción especificados.
  4. La respuesta generada se muestra en la pestaña nueva.

Ya terminamos 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 de 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')

En esencia, el código hace lo siguiente:

  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.

random: Para generar números aleatorios.

vertexai: Es la biblioteca cliente de Vertex AI.

GenerativeModel y Image: Clases de la biblioteca de Vertex AI Generative Models.

  1. Inicializa la app de Flask:

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

  1. Inicializa el cliente de Vertex AI

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

  1. Cómo definir la función de generación

Esta función toma una imagen de estructura alámbrica, un modelo generativo y una instrucción como entradas. Luego, genera el código HTML del sitio web con el modelo y la instrucción especificados. La respuesta generada se devuelve como una cadena.

  1. Cómo definir la ruta de la página principal

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

  1. Cómo definir 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 cargados, y, luego, genera el código del sitio web. La respuesta generada se muestra en la pestaña nueva.

  1. Ejecuta la aplicación

Esta parte del código verifica si la secuencia de comandos se ejecuta como el 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 archivo 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, implementémosla.

Navega a la terminal de Cloud Shell y asegúrate de que el proyecto actual esté configurado en tu proyecto activo. De lo contrario, deberás usar el comando gcloud config 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 a la región "us-central1". Di "y" cuando se te pregunte si quieres permitir invocaciones no autenticadas. Ten en cuenta que permitimos el acceso no autenticado aquí porque se trata de una aplicación de demostración. Se recomienda usar la autenticación adecuada para tus aplicaciones empresariales y de producción.

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

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

Ahora prueba tu aplicación:

6ca7b67b7fce97de.png

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. El repositorio completo está aquí. La app de dibujar un sitio web muestra el poder transformador de Gemini para optimizar el proceso de desarrollo web. Con la IA, podemos ayudar a los diseñadores y desarrolladores a crear sitios web con mayor velocidad, precisión y creatividad. A medida que los modelos de IA generativa sigan evolucionando, podemos esperar aplicaciones aún más innovadoras en el futuro.