Narysuj stronę internetową: przekształć wyobraźnię w stronę internetową, korzystając z modeli Gemini.

1. Wprowadzenie

W świecie tworzenia stron internetowych proces przekształcania koncepcji projektu w funkcjonalną witrynę może być czasochłonny i skomplikowany. Jednak dzięki pojawieniu się modeli generatywnej AI, takich jak Gemini, ten proces staje się coraz bardziej usprawniony i dostępny. Stworzymy rozwiązanie, które będzie specjalizować się w przekształcaniu odręcznych szkieletów w kod witryny. To potężne narzędzie umożliwia projektantom i deweloperom realizację wizji witryny z niespotykaną dotąd łatwością i wydajnością.

W tym module utworzymy aplikację internetową, która umożliwia generowanie kodu strony internetowej (HTML, CSS i JavaScript) na podstawie makiet i promptów wprowadzanych przez użytkownika za pomocą modeli generatywnej AI w Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro itp.). Aplikacja zostanie utworzona przy użyciu platformy Flask, popularnej platformy internetowej w języku Python, i będzie korzystać z biblioteki klienta Vertex AI do interakcji z usługą modeli generatywnych.

Co utworzysz

Po ukończeniu tego modułu będziesz mieć działającą aplikację internetową, która może generować obrazy na podstawie szkieletów i promptów. Dowiesz się też, jak korzystać z modeli generatywnej AI w Vertex AI.

Twoja aplikacja internetowa będzie wyglądać tak:

Przepływ w aplikacji

Prześlij odręczny szkielet:użytkownicy mogą przesłać do aplikacji obraz odręcznego szkieletu.
Wybierz model: aplikacja udostępnia wybór wstępnie wytrenowanych modeli Gemini zoptymalizowanych pod kątem różnych stylów projektowania.
Podaj prompt: użytkownicy mogą opcjonalnie podać prompt tekstowy, aby kierować generowaniem modelu.
Generowanie kodu witryny: aplikacja wysyła szkielet i prompt do Gemini, który generuje odpowiedni kod witryny.
Wyświetlanie wyniku: wygenerowany kod jest wyświetlany na stronie odpowiedzi aplikacji.

Zaczniemy od omówienia podstawowych informacji o szkicach i promptach oraz sposobów ich wykorzystania do generowania kodu witryny. Następnie omówimy kroki tworzenia aplikacji internetowej, w tym sposób obsługi danych wejściowych użytkownika, generowania odpowiedzi i wyświetlania wyników.

2. Zanim zaczniesz

W konsoli Google Cloud na stronie wyboru projektu wybierz lub utwórz projekt Google Cloud.
Sprawdź, czy w projekcie Google Cloud włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności.
Będziesz używać Cloud Shell, czyli środowiska wiersza poleceń działającego w Google Cloud. Aby uzyskać do niego dostęp, kliknij Aktywuj Cloud Shell u góry konsoli Google Cloud.

Po połączeniu z Cloud Shell sprawdź, czy uwierzytelnianie zostało już przeprowadzone, a projekt jest już ustawiony na Twój identyfikator projektu, używając tego polecenia:

gcloud auth list

Aby potwierdzić, że polecenie gcloud zna Twój projekt, uruchom w Cloud Shell to polecenie:

gcloud config list project

Jeśli projekt nie jest ustawiony, użyj tego polecenia, aby go ustawić:

gcloud config set project <YOUR_PROJECT_ID>

Upewnij się, że te interfejsy API są włączone:

Cloud Run
Vertex AI

Alternatywą dla użycia polecenia gcloud jest przejście przez konsolę za pomocą tego linku. Informacje o poleceniach gcloud i ich użyciu znajdziesz w dokumentacji.

3. Krok 1. Wczytaj aplikację internetową Cloud Run w Pythonie

Najpierw utworzymy szablon aplikacji internetowej Cloud Run w Pythonie w Cloud Shell.

Otwórz terminal Cloud Shell i kliknij przycisk Otwórz edytor.

Sprawdź, czy projekt Cloud Code jest ustawiony w lewym dolnym rogu (na pasku stanu) edytora Cloud Shell, jak pokazano na ilustracji poniżej, i czy jest ustawiony jako aktywny projekt Google Cloud, w którym masz włączone płatności. W razie potrzeby kliknij Autoryzuj.

Kliknij aktywny projekt na pasku stanu i poczekaj na otwarcie wyskakującego okienka Cloud Code. W wyskakującym okienku wybierz „Nowa aplikacja”.

Z listy aplikacji wybierz Cloud Run Application (Aplikacja Cloud Run):

Na stronie 2/2 wybierz szablon Python Flask:

Wpisz wybraną nazwę projektu (np. „amazing-gemini-app”) i kliknij OK:

Spowoduje to otwarcie szablonu nowego projektu, który właśnie został skonfigurowany.

W ten prosty sposób możesz uruchomić aplikację internetową za pomocą Google Cloud Shell.

4. Krok 2. Tworzenie interfejsu

Aby to zrobić, potrzebujemy strony HTML. Ta strona będzie zawierać kod, który definiuje interfejs użytkownika aplikacji internetowej. Zawiera formularz, który umożliwia użytkownikom przesłanie odręcznie narysowanego szkieletu strony, wybranie modelu generatywnego i wpisanie prompta tekstowego. Po przesłaniu formularza wynik pojawi się na innej karcie.

Skopiuj poniższy kod i zastąp nim plik index.html w folderze 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>

Gdy użytkownik wchodzi w interakcję z aplikacją, wykonuje te działania:

Użytkownik wybiera obraz szkieletowy, model i wpisuje prompt.
Gdy użytkownik kliknie przycisk „Prześlij”, dane formularza (obraz, model i prompt) zostaną wysłane na adres URL /response za pomocą metody HTTP POST.
Kod po stronie serwera (zastosowany w pliku app.py) przetwarza dane z formularza i generuje odpowiedź przy użyciu określonego modelu i promptu.
Wygenerowana odpowiedź pojawi się na nowej karcie.

Mamy już gotową część front-endową aplikacji internetowej.

5. Krok 3. Tworzenie backendu (generatywna AI)

Napiszmy główną część tej aplikacji internetowej. Plik app.py, który przyjmuje dane wejściowe użytkownika w postaci obrazu, wybór modelu i prompta oraz przekształca je w kod witryny.

Skopiuj cały kod pliku 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')

Poniżej znajdziesz opis działania tego kodu:

Ten kod importuje biblioteki niezbędne do działania aplikacji:

Flask: lekkie środowisko do tworzenia aplikacji internetowych w Pythonie.

os: do interakcji z systemem operacyjnym;

random: do generowania liczb losowych.

vertexai: biblioteka klienta Vertex AI.

GenerativeModel i Image: klasy z biblioteki modeli generatywnych Vertex AI.

Inicjowanie aplikacji Flask:

Następnie inicjuje aplikację Flask i ustawia maksymalny dozwolony rozmiar przesyłanych obrazów na 16 MB.

Inicjowanie klienta Vertex AI

Inicjuje bibliotekę klienta Vertex AI z określonym identyfikatorem projektu i lokalizacją. Pamiętaj, aby zastąpić YOUR_PROJECT_ID identyfikatorem projektu.

Definiowanie funkcji generowania

Ta funkcja przyjmuje jako dane wejściowe obraz szkieletowy, model generatywny i prompta. Następnie generuje kod HTML witryny za pomocą określonego modelu i promptu. Wygenerowana odpowiedź jest zwracana jako ciąg tekstowy.

Określanie trasy strony głównej

Ta funkcja określa trasę strony głównej. Ta funkcja jest wywoływana, gdy użytkownik odwiedza główny adres URL aplikacji. Renderuje szablon index.html, który jest stroną główną aplikacji.

Określanie trasy odpowiedzi

Ta funkcja definiuje ścieżkę odpowiedzi. Gdy użytkownik prześle formularz na stronie głównej, ta funkcja zostanie wywołana. Przetwarza przesłany obraz, model i prompt, a następnie generuje kod strony internetowej. Wygenerowana odpowiedź pojawi się na nowej karcie.

Uruchamianie aplikacji

Ta część kodu sprawdza, czy skrypt jest uruchamiany jako program główny. Jeśli tak, pobiera port serwera ze zmiennych środowiskowych i uruchamia aplikację na określonym porcie.

6. Krok 4. Przygotuj zależności i plik Dockerfile

Upewnij się, że w pliku requirements.txt znajdują się te zależności:

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

Zastąp zawartość pliku Dockerfile poniższym kodem:

# 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. Krok 5. Wdróż aplikację internetową

Po utworzeniu komponentów aplikacji możemy ją wdrożyć.

Otwórz terminal Cloud Shell i sprawdź, czy bieżący projekt jest skonfigurowany jako aktywny. Jeśli nie, użyj polecenia gcloud configure, aby ustawić identyfikator projektu:

gcloud config set project [PROJECT_ID]

Następnie wpisz kolejno te polecenia:

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

Pojawi się prośba o wpisanie nazwy usługi, np. „draw-website”. Wybierz numer odpowiadający regionowi „us-central1”. Gdy pojawi się pytanie, czy chcesz zezwolić na nieuwierzytelnione wywołania, powiedz „tak”. Pamiętaj, że w tym przypadku zezwalamy na nieuwierzytelniony dostęp, ponieważ jest to aplikacja demonstracyjna. Zalecamy stosowanie odpowiedniego uwierzytelniania w przypadku aplikacji firmowych i produkcyjnych.

Po zakończeniu wdrażania powinien pojawić się link podobny do tego poniżej:

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

Przetestuj aplikację:

8. Czyszczenie danych

Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby użyte w tym laboratorium, wykonaj te czynności:

W konsoli Google Cloud otwórz stronę Zarządzanie zasobami.
Z listy projektów wybierz projekt do usunięcia, a potem kliknij Usuń.
W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.
Możesz też otworzyć Cloud Run w konsoli, wybrać wdrożoną usługę i ją usunąć.

9. Gratulacje

Gratulacje! Udało Ci się utworzyć prostą aplikację internetową w języku Python Flask wdrożoną w Cloud Run, która przekształca rysunki w witryny. Pełne repozytorium znajdziesz tutaj. Aplikacja do rysowania stron internetowych pokazuje, jak Gemini może usprawnić proces tworzenia stron internetowych. Dzięki wykorzystaniu AI możemy umożliwić projektantom i programistom tworzenie stron internetowych szybciej, dokładniej i bardziej kreatywnie. Wraz z rozwojem modeli generatywnej AI możemy spodziewać się w przyszłości jeszcze bardziej przełomowych zastosowań.