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.
O aplicativo da Web ficará assim:
Como o app flui
- 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.
- Selecionar um modelo:o app oferece uma seleção de modelos do Gemini pré-treinados e otimizados para diferentes estilos de design.
- Fornecer um comando:os usuários podem incluir um comando de texto para orientar a geração do modelo.
- Gerar código do site:o app envia o wireframe e o comando para o Gemini, que gera o código do site correspondente.
- 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
- No console do Google Cloud, na página de seletor de projetos, selecione ou crie um projeto do Google Cloud.
- Verifique se o faturamento está ativado para seu projeto do Google Cloud. Saiba como verificar se o faturamento está ativado em um projeto.
- 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.
- 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
- Execute o comando a seguir no Cloud Shell para confirmar que o comando gcloud conhece seu projeto.
gcloud config list project
- Se o projeto não estiver definido, use este comando:
gcloud config set project <YOUR_PROJECT_ID>
- 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". 
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.
Clique nesse projeto ativo na barra de status e aguarde o pop-up do Cloud Code abrir. No pop-up, selecione "Novo aplicativo". 
Na lista de aplicativos, escolha Aplicativo do Cloud Run:
Para a página 2/2, selecione o modelo Python Flask:
Forneça o nome do projeto como quiser (por exemplo, "amazing-gemini-app") e clique em OK:
O modelo será aberto para o novo projeto que você acabou de configurar.
É 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:
- O usuário seleciona uma imagem de wireframe, escolhe um modelo e insere um comando.
- 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.
- 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.
- 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:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Acesse 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:
8. Limpar
Para evitar cobranças dos recursos usados neste codelab na conta do Google Cloud, siga estas etapas:
- No console do Google Cloud, acesse a página Gerenciar recursos.
- Na lista de projetos, selecione o projeto que você quer excluir e clique em Excluir.
- Na caixa de diálogo, digite o ID do projeto e clique em Encerrar para excluí-lo.
- 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.