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 advento dos modelos de IA generativa como o Gemini, esse processo está se tornando cada vez mais simples e acessível. Vamos criar uma solução especializada em converter wireframes desenhados à mão em código de site. Essa poderosa ferramenta capacita designers e desenvolvedores a dar vida às ideias de seus 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 sites (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 com o Flask, um conhecido framework da Web em Python, e 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 capaz de gerar imagens a partir de wireframes e comandos. Você também vai entender melhor como usar os modelos de IA generativa da Vertex AI.

Seu aplicativo da Web ficará assim:

5bccb261882c1bf0.png

Como o app flui

  1. Fazer upload de um wireframe desenhado à mão:os usuários podem fazer upload de uma imagem do wireframe desenhado à mão para o app.
  2. Selecionar um modelo:o app oferece uma seleção de modelos do Gemini pré-treinados e otimizados para diferentes estilos de design.
  3. Fornecer um comando:os usuários podem incluir 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 do site correspondente.
  5. Exibir 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 o código do site. Em seguida, vamos analisar as etapas da criação do aplicativo da Web, incluindo como lidar com a entrada do usuário, gerar respostas e exibir 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 seu 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 em execução no Google Cloud. Para acessá-lo, clique em "Ativar o Cloud Shell" na parte superior do console do Google Cloud.

1829c3759227c19b.png

  1. Depois de se conectar ao Cloud Shell, verifique se você já está autenticado 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 que o comando gcloud conhece 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 comando gcloud é passar pelo console usando este link. Consulte a documentação para saber mais sobre os comandos e o uso da gcloud.

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

Vamos primeiro criar o modelo de aplicativo da Web em Python do Cloud Run 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, como destacado na imagem abaixo, e definido como o projeto ativo do Google Cloud em que o faturamento está ativado. Autorizar, se solicitado.

f5003b9c38b43262.png

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

Na lista de aplicativos, escolha Aplicativo do Cloud Run:

39abad102a72ae74.png

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

a78b3a0311403ad.png

Forneça o nome do projeto como quiser (por exemplo, "amazing-gemini-app") e clique em OK:

4d8f77279d9509cb.png

O modelo será aberto para o novo projeto que você acabou de configurar.

e85a020a20d38e17.png

É assim que é simples inicializar 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 contém o código que define a interface de usuário do aplicativo da Web. Ele inclui um formulário que permite que os usuários façam upload de uma imagem de wireframe desenhada à mão, selecionem um modelo generativo e forneçam um comando de texto. Após o envio do formulário, o resultado será exibido em outra guia.

Copie o código abaixo e substitua seu 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, escolhe um modelo e insere um comando.
  2. Quando o usuário clica no botão "Enviar" , os dados do formulário (imagem, modelo e comando) serão enviados ao 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 do front-end do aplicativo da Web.

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

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

Copie o código completo do 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')

Basicamente, esta é a função do código:

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

Flask: um framework da Web leve para Python.

os: para interagir com o sistema operacional.

aleatório: 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. Inicializando o app do frasco:

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

  1. Como 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. Como definir a rota da página inicial

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

  1. Definição da rota de resposta

Esta função define a rota de resposta. Quando um usuário envia o formulário na página inicial, essa função é chamada. Ele processa a imagem, o modelo e o comando enviados e, em seguida, 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. Nesse caso, 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 o 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: implantar o aplicativo da Web

Agora que já criamos os componentes do aplicativo, é hora de implantá-lo.

Navegue até o terminal do Cloud Shell e verifique se o projeto atual está configurado para o projeto ativo. Caso não esteja, use o comando "gcloud configure" para definir o ID do projeto:

gcloud config set project [PROJECT_ID]

Em seguida, digite os comandos abaixo nessa ordem, um por um:

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

Será necessário inserir um nome para o serviço. Por exemplo, "draw-website". Escolha o número correspondente para a região "us-central1". Diga "y" quando ele perguntar se você quer permitir invocações não autenticadas. Como este é um aplicativo de demonstração, o acesso não autenticado é permitido. A recomendação é usar a autenticação apropriada para sua empresa e seus aplicativos de produção.

Quando a implantação estiver concluída, você receberá um link semelhante ao seguinte:

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

Teste seu 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. Outra opção é acessar o Cloud Run no console, selecionar o serviço que você acabou de implantar e excluir.

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-Site mostra o poder transformador do Gemini para simplificar o processo de desenvolvimento da Web. Com a IA, designers e desenvolvedores podem criar sites com mais velocidade, precisão e criatividade. À medida que os modelos de IA generativa continuam evoluindo, podemos esperar ainda mais aplicações inovadoras no futuro.