Нарисуйте веб-сайт: превратите свое воображение в веб-сайт, используя модели 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 Console на странице выбора проекта выберите или создайте проект 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:

• Облачный бег
• Вертексный ИИ

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

3. Шаг 1. Загрузите веб-приложение Python Cloud Run

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

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

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

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

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

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

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

Откроется шаблон нового проекта, который вы только что настроили.

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

4. Шаг 2. Создайте внешний интерфейс

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

Скопируйте приведенный ниже код и замените файл index.html в папке шаблонов :

<!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.

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

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

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.

Убедитесь, что в файле require.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 в оптимизации процесса веб-разработки. Используя искусственный интеллект, мы можем дать дизайнерам и разработчикам возможность создавать веб-сайты с большей скоростью, точностью и креативностью. Поскольку генеративные модели искусственного интеллекта продолжают развиваться, мы можем ожидать еще больше революционных приложений в будущем.