Desenhar um site: transforme sua imaginação em um site usando os modelos do Gemini.

1. Introdução

No mundo do desenvolvimento da Web, o processo de transformar um conceito de design em um site funcional pode ser demorado e complexo. No entanto, com o surgimento de modelos de IA generativa como o Gemini, esse processo está se tornando cada vez mais simplificado e acessível. Vamos criar uma solução especializada em converter wireframes desenhados à mão em código de site. Essa ferramenta poderosa permite que designers e desenvolvedores criem sites com facilidade e eficiência sem precedentes.

Neste laboratório, vamos criar um aplicativo da Web que permite aos usuários gerar código de site (HTML, CSS e JavaScript) com base em wireframes e comandos inseridos pelo usuário usando os modelos de IA generativa da Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro etc.). O aplicativo será criado usando o Flask, um framework da Web Python muito usado, e vai usar a biblioteca de cliente da Vertex AI para interagir com o serviço de modelos generativos.

O que você vai criar

Ao final deste laboratório, você terá um aplicativo da Web funcional que pode gerar imagens de wireframes e comandos. Você também vai entender melhor como usar os modelos de IA generativa da Vertex AI.

O aplicativo da Web vai ficar assim:

5bccb261882c1bf0.png

Como o app funciona

  1. Fazer upload de um wireframe desenhado à mão:os usuários podem enviar uma imagem do wireframe desenhado à mão para o app.
  2. Selecione um modelo:o app oferece uma seleção de modelos pré-treinados do Gemini otimizados para diferentes estilos de design.
  3. Fornecer um comando:os usuários podem fornecer um comando de texto para orientar a geração do modelo.
  4. Gerar código do site:o app envia o wireframe e o comando para o Gemini, que gera o código correspondente do site.
  5. Mostrar o resultado:o código gerado é exibido na página de resposta do app.

Vamos começar discutindo os conceitos básicos de wireframes e comandos e como eles podem ser usados para gerar código de sites. Em seguida, vamos mostrar as etapas de criação do aplicativo da Web, incluindo como processar a entrada do usuário, gerar respostas e mostrar os resultados.

2. Antes de começar

  1. No console do Google Cloud, na página de seletor de projetos, selecione ou crie um projeto do Google Cloud.
  2. Verifique se o faturamento está ativado para o projeto do Google Cloud. Saiba como verificar se o faturamento está ativado em um projeto.
  3. Você vai usar o Cloud Shell, um ambiente de linha de comando executado no Google Cloud. Para acessar, clique em "Ativar Cloud Shell" na parte de cima do console do Google Cloud.

1829c3759227c19b.png

  1. Depois de se conectar ao Cloud Shell, verifique se sua conta já está autenticada e se o projeto está configurado com o ID do seu projeto usando o seguinte comando:
gcloud auth list
  1. Execute o comando a seguir no Cloud Shell para confirmar se o comando gcloud sabe sobre seu projeto.
gcloud config list project
  1. Se o projeto não estiver definido, use este comando:
gcloud config set project <YOUR_PROJECT_ID>
  1. Verifique se as seguintes APIs estão ativadas:
  • Cloud Run
  • Vertex AI

A alternativa ao uso do comando gcloud é acessar o console usando este link. Consulte a documentação para ver o uso e os comandos gcloud.

3. Etapa 1: inicializar um app da Web do Cloud Run em Python

Primeiro, vamos criar o modelo de aplicativo da Web Cloud Run em Python no Cloud Shell.

Acesse o terminal do Cloud Shell e clique no botão "Abrir editor". b16d56e4979ec951.png

Verifique se o projeto do Cloud Code está definido no canto inferior esquerdo (barra de status) do editor do Cloud Shell, conforme destacado na imagem abaixo, e se ele está definido como o projeto ativo do Google Cloud em que o faturamento está ativado. Autorize se for solicitado.

f5003b9c38b43262.png

Clique no projeto ativo na barra de status e aguarde a abertura do pop-up do Cloud Code. No pop-up, selecione "Novo aplicativo". 70f80078e01a02d8.png

Na lista de aplicativos, escolha Aplicativo do Cloud Run:

39abad102a72ae74.png

Na página 2/2, selecione o modelo Python Flask:

a78b3a0311403ad.png

Dê o nome que quiser ao projeto (por exemplo, "amazing-gemini-app") e clique em OK:

4d8f77279d9509cb.png

Isso vai abrir o modelo do novo projeto que você acabou de configurar.

e85a020a20d38e17.png

É assim que é simples fazer o bootstrap de um aplicativo da Web com o Google Cloud Shell.

4. Etapa 2: criar o front-end

Para isso, vamos precisar de uma página HTML. Essa página vai conter o código que define a interface do usuário do aplicativo da Web. Ele inclui um formulário que permite aos usuários enviar uma imagem de wireframe desenhada à mão, selecionar um modelo generativo e fornecer um comando de texto. Ao enviar o formulário, o resultado será exibido em outra guia.

Copie o código abaixo e substitua o arquivo index.html na pasta 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 um usuário interage com o app, as seguintes ações ocorrem:

  1. O usuário seleciona uma imagem de wireframe, um modelo e digita um comando.
  2. Quando o usuário clica no botão "Enviar", os dados do formulário (imagem, modelo e comando) são enviados para o URL /response usando o método HTTP POST.
  3. O código do lado do servidor (implementado em app.py) processa os dados do formulário e gera a resposta usando o modelo e o comando especificados.
  4. A resposta gerada é exibida na nova guia.

Agora estamos prontos com a parte de front-end do aplicativo da Web.

5. Etapa 3: criar o back-end (IA generativa)

Vamos escrever a parte principal desse aplicativo da Web. O arquivo app.py que recebe a imagem de entrada do usuário, a escolha do modelo e o comando e os converte em código do site.

Copie o 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')

O código faz o seguinte:

  1. Esse código importa as bibliotecas necessárias para o aplicativo:

Flask: uma biblioteca da Web leve para Python.

os: para interagir com o sistema operacional.

random: para gerar números aleatórios.

vertexai: a biblioteca de cliente da Vertex AI.

GenerativeModel e Image: classes da biblioteca de modelos generativos da Vertex AI.

  1. Inicializar o app Flask:

Em seguida, ele inicializa o aplicativo Flask e define o tamanho máximo permitido para imagens enviadas como 16 MB.

  1. Inicializar o cliente da Vertex AI

Ele inicializa a biblioteca de cliente da Vertex AI com o ID do projeto e o local especificados. Substitua YOUR_PROJECT_ID pelo ID do projeto.

  1. Como definir a função "generate"

Essa função usa uma imagem de wireframe, um modelo generativo e um comando como entradas. Em seguida, ele gera o HTML do site usando o modelo e o comando especificados. A resposta gerada é retornada como uma string.

  1. Definir a rota da página inicial

Essa função define a rota da página inicial. Essa função é chamada quando um usuário visita o URL raiz do aplicativo. Ele renderiza o modelo index.html, que é a página inicial do aplicativo.

  1. Como definir a rota de resposta

Essa função define a rota de resposta. Essa função é chamada quando um usuário envia o formulário na página inicial. Ele processa a imagem, o modelo e o comando enviados e gera o código do site. A resposta gerada é exibida na nova guia.

  1. Como executar o aplicativo

Essa parte do código verifica se o script está sendo executado como o programa principal. Se sim, ele recebe a porta do servidor das variáveis de ambiente e executa o app na porta especificada.

6. Etapa 4: preparar dependências e Dockerfile

Verifique se você tem as seguintes dependências no arquivo requirements.txt:

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

Substitua o conteúdo do Dockerfile pelo seguinte:

# 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. Etapa 5: implante o aplicativo da Web

Agora que criamos os componentes do aplicativo, vamos implantá-lo.

Acesse o terminal do Cloud Shell e verifique se o projeto atual está configurado para seu projeto ativo. Caso contrário, use o comando gcloud configure para definir o ID do projeto:

gcloud config set project [PROJECT_ID]

Em seguida, insira os seguintes comandos nessa ordem, um por um:

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

Ele vai pedir que você insira um nome para o serviço, por exemplo, "draw-website". Escolha o número correspondente à região "us-central1". Diga y quando perguntar se você quer permitir invocações não autenticadas. Estamos permitindo o acesso não autenticado porque este é um aplicativo de demonstração. Recomendamos usar a autenticação adequada para seus aplicativos empresariais e de produção.

Quando a implantação for concluída, você vai receber um link semelhante a este:

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

Teste o aplicativo:

6ca7b67b7fce97de.png

8. Limpar

Para evitar cobranças na sua conta do Google Cloud pelos recursos usados neste codelab, siga estas etapas:

  1. No console do Google Cloud, acesse a página Gerenciar recursos.
  2. Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir.
  3. Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.
  4. Ou acesse Cloud Run no console do Google Cloud, selecione o serviço que você acabou de implantar e exclua.

9. Parabéns

Parabéns! Você criou um aplicativo da Web rápido em Python Flask implantado no Cloud Run que converte desenhos em sites. O repositório completo está aqui. O app Draw-a-Website mostra o poder transformador do Gemini ao simplificar o processo de desenvolvimento da Web. Ao aproveitar a IA, podemos capacitar designers e desenvolvedores a criar sites com mais velocidade, precisão e criatividade. À medida que os modelos de IA generativa evoluem, podemos esperar aplicações ainda mais inovadoras no futuro.