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

1. Wstęp

W świecie programowania stron internetowych przekształcanie koncepcji projektu w funkcjonalną witrynę może być zarówno czasochłonne, jak i złożone. Jednak wraz z wprowadzeniem modeli generatywnej AI, takich jak Gemini, proces ten staje się coraz łatwiejszy i bardziej dostępny. Stworzymy rozwiązanie specjalizujące się w przekształcaniu odręcznych szkieletów w kod witryny. To zaawansowane narzędzie pozwala projektantom i deweloperom w łatwy i skuteczny sposób urzeczywistniać wizje swoich witryn.

W tym module stworzymy aplikację internetową, która umożliwi użytkownikom generowanie kodu witryny (HTML, CSS i JavaScript) na podstawie schematów i promptów wpisywanych przez użytkownika za pomocą modeli generatywnej AI w Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro itp.). Aplikacja zostanie skompilowana przy użyciu popularnej platformy internetowej w języku Python i będzie wykorzystywać bibliotekę 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 schematów i promptów. Zyskasz też większą wiedzę na temat korzystania z modeli generatywnej AI w Vertex AI.

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

Jak działa aplikacja

1. Prześlij odręcznie rysowaną strukturę: użytkownicy mogą przesłać do aplikacji obraz odręcznego schematu.
2. Wybierz model: aplikacja udostępnia wybór wytrenowanych modeli Gemini zoptymalizowanych pod kątem różnych stylów projektowania.
3. Prześlij prompt: użytkownicy mogą opcjonalnie wpisać prompt tekstowy, aby ułatwić generowanie modelu.
4. Wygeneruj kod witryny: aplikacja wysyła schemat i prompt do Gemini, aby wygenerować odpowiedni kod witryny.
5. Wyświetl wynik: wygenerowany kod jest wyświetlany na stronie odpowiedzi aplikacji.

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

2. Zanim zaczniesz

1. W konsoli Google Cloud na stronie selektora projektów wybierz lub utwórz projekt Google Cloud.
2. Sprawdź, czy w projekcie Google Cloud są włączone płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności.
3. Użyjesz Cloud Shell – środowiska wiersza poleceń działającego w Google Cloud. Aby uzyskać do niej dostęp, kliknij Aktywuj Cloud Shell u góry konsoli Google Cloud.

4. Po nawiązaniu połączenia z Cloud Shell możesz użyć tego polecenia, aby sprawdzić, czy użytkownik jest już uwierzytelniony i czy identyfikator projektu jest ustawiony na identyfikator Twojego projektu:

gcloud auth list

5. Uruchom to polecenie w Cloud Shell, aby sprawdzić, czy polecenie gcloud zna Twój projekt.

gcloud config list project

6. Jeśli Twój projekt nie jest skonfigurowany, ustaw go za pomocą tego polecenia:

gcloud config set project <YOUR_PROJECT_ID>

7. Sprawdź, czy te interfejsy API są włączone:

• Cloud Run
• Vertex AI

Zamiast używać polecenia gcloud, możesz użyć tego linku, korzystając z konsoli. Więcej informacji o poleceniach i sposobie korzystania z gcloud znajdziesz w dokumentacji.

3. Krok 1. Wczytywanie aplikacji internetowej Cloud Run w języku Python

Najpierw w Cloud Shell utworzymy szablon aplikacji internetowej w języku Python Cloud Run.

Przejdź do terminalu Cloud Shell i kliknij przycisk Otwórz edytor.

Sprawdź, czy projekt Cloud Code jest ustawiony w lewym dolnym rogu (pasek stanu) edytora Cloud Shell, jak widać na grafice poniżej, i jest ustawiony na aktywny projekt Google Cloud, w którym masz włączone płatności. Autoryzuj, jeśli pojawi się taka prośba.

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

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

Dla strony 2/2 wybierz szablon Python Flask:

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

Spowoduje to otwarcie szablonu nowego właśnie skonfigurowanego projektu.

Tak łatwo można uruchamiać aplikację internetową przy użyciu Google Cloud Shell.

4. Krok 2. Utwórz frontend

W tym celu będzie nam potrzebna strona HTML. Będzie ona zawierać kod definiujący interfejs użytkownika aplikacji internetowej. Zawiera on formularz, który pozwala użytkownikom przesłać odręcznie rysowany schemat, wybrać model generatywny i podać prompt tekstowy. Po przesłaniu formularza wynik wyświetli się na innej karcie.

Skopiuj poniższy kod i zastąp 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ą, wykonywane są te działania:

1. Użytkownik wybiera schemat, wybiera model i wpisuje prompt.
2. Gdy użytkownik kliknie przycisk „Prześlij”, dane z formularza (obraz, model i prompt) zostaną wysłane na adres URL /response przy użyciu metody HTTP POST.
3. Kod po stronie serwera (zaimplementowany w pliku app.py) przetwarza dane formularza i generuje odpowiedź, korzystając z określonego modelu i promptu.
4. Wygenerowana odpowiedź zostanie wyświetlona w nowej karcie.

Mamy już gotową część interfejsu aplikacji internetowej.

5. Krok 3. Utwórz backend (generatywna AI)

Napiszmy główną część tej aplikacji internetowej. Plik app.py, który pobiera obraz wejściowy użytkownika, wybór modelu i prompt, a następnie konwertuje je na kod witryny.

Skopiuj pełny 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')

Zasadniczo kod służy do:

1. Ten kod importuje biblioteki niezbędne dla aplikacji:

Flask: lekka platforma internetowa dla Pythona.

OS: umożliwia interakcję z systemem operacyjnym.

Losowe: służy do generowania liczb losowych.

vertexai: biblioteka klienta Vertex AI.

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

2. Inicjowanie aplikacji kolby:

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

3. Inicjowanie klienta Vertex AI

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

4. Definiowanie funkcji generowania

Ta funkcja wykorzystuje jako dane wejściowe schematy, model generatywny i prompt. Następnie generuje kod HTML witryny przy użyciu określonego modelu i promptu. Wygenerowana odpowiedź jest zwracana jako ciąg znaków.

5. Definiowanie trasy strony głównej

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

6. Definiowanie trasy odpowiedzi

Ta funkcja definiuje trasę odpowiedzi. Funkcja ta jest wywoływana, gdy użytkownik przesyła formularz na stronie głównej. Przetwarza on przesłany obraz, model i prompt, a potem generuje kod witryny. Wygenerowana odpowiedź zostanie wyświetlona w nowej karcie.

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

Plik requirements.txt musi zawierać te zależności:

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

Zastąp zawartość Dockerfile poniższym:

# 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ą

Masz już komponenty aplikacji, więc możemy je wdrożyć.

Przejdź do terminalu Cloud Shell i sprawdź, czy bieżący projekt jest skonfigurowany pod kątem aktywnego projektu. W przeciwnym razie identyfikator projektu ustawiasz za pomocą polecenia gcloud Configure:

gcloud config set project [PROJECT_ID]

Następnie wpisz po kolei te polecenia:

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

Pojawi się prośba o wpisanie nazwy usługi, np. „draw-website”. Wybierz odpowiedni numer regionu „us-central1”. Gdy pojawi się pytanie, czy chcesz zezwolić na nieuwierzytelnione wywołania, powiedz „y”. Pamiętaj, że jest to aplikacja w wersji demonstracyjnej, dlatego zezwalamy na nieuwierzytelniony dostęp. Zalecamy stosowanie odpowiedniego uwierzytelniania w aplikacjach firmowych i produkcyjnych.

Po zakończeniu wdrażania powinien wyświetlić się link podobny do tego:

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

Możesz teraz przetestować swoją aplikację:

8. Czyszczenie danych

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

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

9. Gratulacje

Gratulacje! Udało Ci się utworzyć szybką aplikację internetową w Python Flask wdrożoną w Cloud Run, która konwertuje rysunki na strony internetowe. Pełne repozytorium znajdziesz tutaj. Aplikacja do tworzenia stron internetowych pokazuje możliwości transformacji Gemini w zakresie usprawniania procesu tworzenia stron internetowych. Dzięki wykorzystaniu AI umożliwiamy projektantom i deweloperom tworzenie szybszych, bardziej precyzyjnych i kreatywnych stron internetowych. W miarę rozwoju modeli generatywnej AI w przyszłości możemy się spodziewać kolejnych przełomowych zastosowań.