Нарисуйте веб-сайт: превратите свое воображение в веб-сайт с помощью моделей Gemini!

1. Введение

В мире веб-разработки процесс преобразования концепции дизайна в функциональный веб-сайт может быть как трудоемким, так и сложным. Однако с появлением генеративных моделей искусственного интеллекта, таких как Gemini, этот процесс становится все более оптимизированным и доступным. Мы разработаем решение, специализирующееся на преобразовании нарисованных от руки макетов в код веб-сайта. Этот мощный инструмент позволит дизайнерам и разработчикам воплощать свои идеи веб-сайтов в жизнь с беспрецедентной легкостью и эффективностью.

В этой лабораторной работе мы создадим веб-приложение, которое позволит пользователям генерировать код веб-сайта (HTML, CSS и JavaScript) на основе макетов и подсказок, вводимых пользователем, с помощью генеративных моделей искусственного интеллекта Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro и др.). Приложение будет создано с использованием Flask, популярного веб-фреймворка на Python, и будет использовать клиентскую библиотеку Vertex AI для взаимодействия со службой генеративных моделей.

Что вы построите

По завершении этой лабораторной работы у вас будет работающее веб-приложение, способное генерировать изображения на основе макетов и подсказок. Вы также лучше поймете, как использовать модели генеративного искусственного интеллекта Vertex AI.

Ваше веб-приложение будет выглядеть следующим образом:

Как работает приложение

1. Загрузите нарисованный от руки макет: пользователи могут загрузить в приложение изображение своего нарисованного от руки макета.
2. Выберите модель: приложение предоставляет выбор предварительно обученных моделей Gemini, оптимизированных для различных стилей дизайна.
3. Укажите подсказку: Пользователи могут по желанию указать текстовую подсказку, которая будет направлять процесс генерации модели.
4. Генерация кода веб-сайта: приложение отправляет макет и запрос в Gemini, которая генерирует соответствующий код веб-сайта.
5. Отображение результата: Сгенерированный код отображается на странице ответа приложения.

Мы начнём с обсуждения основ прототипирования и подсказок, а также того, как их можно использовать для генерации кода веб-сайта. Затем мы рассмотрим этапы создания веб-приложения, включая обработку пользовательского ввода, генерацию ответа и отображение результатов.

2. Прежде чем начать

1. В консоли Google Cloud на странице выбора проекта выберите или создайте проект Google Cloud.
2. Убедитесь, что для вашего проекта Google Cloud включена функция выставления счетов. Узнайте, как проверить, включена ли функция выставления счетов для проекта .
3. Вы будете использовать Cloud Shell — среду командной строки, работающую в Google Cloud. Чтобы получить к ней доступ, нажмите «Активировать Cloud Shell» в верхней части консоли Google Cloud.

4. После подключения к Cloud Shell необходимо проверить, прошли ли вы аутентификацию и установлен ли идентификатор вашего проекта, используя следующую команду:

gcloud auth list

5. Выполните следующую команду в Cloud Shell, чтобы убедиться, что команда gcloud знает о вашем проекте.

gcloud config list project

6. Если ваш проект не задан, используйте следующую команду для его установки:

gcloud config set project <YOUR_PROJECT_ID>

7. Убедитесь, что следующие API включены:

• Cloud Run
• Vertex AI

Альтернативой использованию команды gcloud является работа через консоль по этой ссылке . Для получения информации о командах и использовании gcloud обратитесь к документации .

3. Шаг 1: Инициализация веб-приложения Python для облачной среды.

Сначала мы создадим шаблон веб-приложения Python Cloud Run в Cloud Shell.

Перейдите в терминал Cloud Shell и нажмите кнопку «Открыть редактор».

Убедитесь, что в левом нижнем углу (строке состояния) редактора Cloud Shell указан проект Cloud Code, как показано на изображении ниже, и что он соответствует активному проекту Google Cloud, в котором включена оплата. При появлении запроса авторизуйтесь .

Щелкните по активному проекту в строке состояния и дождитесь открытия всплывающего окна Cloud Code. Во всплывающем окне выберите «Новое приложение».

Из списка приложений выберите Cloud Run Application :

На странице 2/2 выберите шаблон Python Flask:

Укажите желаемое название проекта (например, "amazing-gemini-app") и нажмите ОК :

Это откроет шаблон для только что созданного вами нового проекта.

Вот насколько просто запустить веб-приложение с помощью Google Cloud Shell.

4. Шаг 2: Разработка фронтенда

Для этого нам потребуется HTML-страница. Эта страница будет содержать код, определяющий пользовательский интерфейс веб-приложения. Она включает в себя форму, позволяющую пользователям загрузить нарисованное от руки изображение каркаса, выбрать генеративную модель и ввести текстовый запрос. После отправки формы результат будет отображен в другой вкладке.

Скопируйте приведенный ниже код и замените им файл index.html в папке 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>

При взаимодействии пользователя с приложением происходят следующие действия:

1. Пользователь выбирает каркасное изображение, выбирает модель и вводит запрос.
2. Когда пользователь нажимает кнопку «Отправить», данные формы (изображение, модель и подсказка) отправляются на URL-адрес /response с использованием метода HTTP POST.
3. Серверный код (реализованный в файле app.py) обрабатывает данные формы и генерирует ответ, используя указанную модель и подсказку.
4. Полученный ответ отображается в новой вкладке.

Теперь мы готовы к разработке фронтенда веб-приложения.

5. Шаг 3: Создание бэкенда (генеративный ИИ)

Давайте напишем основную часть этого веб-приложения. Файл app.py, который принимает изображение, выбранную пользователем модель и подсказку, и преобразует это в код веб-сайта.

Скопируйте полный код файла 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')

По сути, код делает следующее:

1. Этот код импортирует необходимые библиотеки для приложения:

Flask: Легковесный веб-фреймворк для Python.

ОС: Для взаимодействия с операционной системой.

random: Для генерации случайных чисел.

vertexai: Клиентская библиотека Vertex AI.

GenerativeModel и Image: классы из библиотеки генеративных моделей Vertex AI.

2. Инициализация приложения Flask:

Далее, приложение Flask инициализируется и устанавливается максимально допустимый размер загружаемых изображений в 16 МБ.

3. Инициализация клиента Vertex AI

Эта команда инициализирует клиентскую библиотеку Vertex AI с указанным идентификатором проекта и местоположением. Обязательно замените YOUR_PROJECT_ID на идентификатор вашего проекта.

4. Определение функции генерации

Эта функция принимает в качестве входных данных изображение каркаса, генеративную модель и подсказку. Затем она генерирует HTML-код веб-сайта, используя указанную модель и подсказку. Сгенерированный ответ возвращается в виде строки.

5. Определение маршрута главной страницы

Эта функция определяет маршрут главной страницы. Когда пользователь переходит по корневому URL-адресу приложения, эта функция вызывается. Она отображает шаблон index.html, который является главной страницей приложения.

6. Определение маршрута реагирования

Эта функция определяет маршрут ответа. Когда пользователь отправляет форму на главной странице, вызывается эта функция. Она обрабатывает загруженное изображение, модель и подсказку, а затем генерирует код веб-сайта. Сгенерированный ответ отображается в новой вкладке.

7. Запуск приложения

Эта часть кода проверяет, запускается ли скрипт как основная программа. Если да, то она получает порт сервера из переменных окружения и запускает приложение на указанном порту.

6. Шаг 4: Подготовка зависимостей и Dockerfile

Убедитесь, что в файле requirements.txt указаны следующие зависимости:

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

Замените содержимое Dockerfile следующим кодом:

# 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. Шаг 5: Развертывание веб-приложения

Теперь, когда компоненты приложения созданы, давайте развернем его.

Перейдите в терминал Cloud Shell и убедитесь, что текущий проект настроен на ваш активный проект. Если это не так, используйте команду gcloud configure для установки идентификатора проекта:

gcloud config set project [PROJECT_ID]

Затем введите следующие команды в указанном порядке одну за другой:

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

Вам будет предложено ввести имя для вашего сервиса, например, « draw-website ». Выберите соответствующий номер региона « us-central1 ». Ответьте « y », когда система спросит, хотите ли вы разрешить неаутентифицированные вызовы . Обратите внимание, что мы разрешаем неаутентифицированный доступ, поскольку это демонстрационное приложение. Рекомендуется использовать соответствующую аутентификацию для ваших корпоративных и производственных приложений.

После завершения развертывания вы должны получить ссылку, похожую на приведенную ниже:

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

Протестируйте своё приложение:

8. Уборка

Чтобы избежать списания средств с вашего аккаунта Google Cloud за ресурсы, использованные в этом практическом задании, выполните следующие действия:

1. В консоли Google Cloud перейдите на страницу «Управление ресурсами» .
2. В списке проектов выберите проект, который хотите удалить, и нажмите кнопку «Удалить» .
3. В диалоговом окне введите идентификатор проекта, а затем нажмите «Завершить» , чтобы удалить проект.
4. В качестве альтернативы вы можете перейти в Cloud Run в консоли, выбрать только что развернутую службу и удалить ее.

9. Поздравляем!

Поздравляем! Вы успешно создали быстрое веб-приложение на Python Flask, развернутое на Cloud Run, которое преобразует рисунки в веб-сайты. Полный репозиторий находится здесь . Приложение для создания веб-сайтов демонстрирует преобразующую силу Gemini в оптимизации процесса веб-разработки. Используя ИИ, мы можем дать дизайнерам и разработчикам возможность создавать веб-сайты с большей скоростью, точностью и креативностью. По мере развития генеративных моделей ИИ мы можем ожидать еще больше революционных приложений в будущем.