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 transformem suas ideias de sites em realidade 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) a partir de 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 do Python conhecido, 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 que pode gerar imagens de wireframes e comandos. Você também vai entender melhor como usar os modelos de IA generativa da Vertex AI.

Seu aplicativo da Web será assim:

5bccb261882c1bf0.png

Como o app funciona

  1. Fazer upload de um wireframe desenhado à mão:os usuários podem fazer upload de uma imagem do wireframe desenhado à mão no app.
  2. Selecionar um modelo:o app oferece uma seleção de modelos pré-treinados do Gemini otimizados para diferentes estilos de design.
  3. Fornecer um prompt: os usuários podem fornecer um prompt 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. Mostrar o resultado:o código gerado é mostrado 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 site. Em seguida, vamos explicar as etapas de criação do aplicativo da Web, incluindo como processar a entrada do usuário, gerar a resposta 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 na nuvem 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 de cima 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á definido como o ID do seu projeto usando o comando a seguir:
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 APIs a seguir 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 Python Cloud Run

Vamos criar o modelo de aplicativo da Web do Python Cloud Run primeiro no Cloud Shell.

Navegue até 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 está definido como o projeto ativo do Google Cloud em que o faturamento está ativado. Autorize , se 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

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

a78b3a0311403ad.png

Forneça o nome do projeto como quiser (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 inicializar um aplicativo da Web com o Google Cloud Shell.

4. Etapa 2: criar o front-end

Para fazer isso, vamos precisar de uma página HTML. Essa página vai conter o código que define a interface do usuário para o aplicativo da Web. Ela inclui um formulário que permite aos usuários fazer upload de 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á mostrado 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 insere 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 é mostrada 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 usa a imagem de entrada do usuário, a escolha do modelo e o comando e os converte em código de site.

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

A seguir, o que o código faz:

  1. Esse 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.

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. Definir a função de geração

Essa função usa uma imagem de wireframe, um modelo generativo e um comando como entradas. Em seguida, ela 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. Quando um usuário acessa o URL raiz do aplicativo, essa função é chamada. Ela renderiza o modelo index.html, que é a página inicial do aplicativo.

  1. Definir a rota de resposta

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

  1. Como executar o aplicativo

Essa parte do código verifica se o script está sendo executado como o programa principal. Em caso afirmativo, 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: implantar o aplicativo da Web

Agora que temos os componentes do aplicativo criados, vamos implantar o app.

Navegue até o terminal do Cloud Shell e verifique se o projeto atual está configurado para o 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 comandos a seguir nessa ordem, um por um:

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

Você vai receber uma solicitação para inserir um nome para o serviço, digamos "draw-website". Escolha o número correspondente para a região "us-central1". Diga "y" quando perguntar se você quer permitir invocações não autenticadas. Estamos permitindo o acesso não autenticado aqui porque este é um aplicativo de demonstração. A recomendação é 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 ao abaixo:

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

Teste seu aplicativo:

6ca7b67b7fce97de.png

8. Liberar espaço

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 Desligar para excluir o projeto.
  4. Como alternativa, acesse o 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 no 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 na simplificação do 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 continuam evoluindo, podemos esperar ainda mais aplicativos inovadores no futuro.