Eine Website zeichnen: Verwandeln Sie Ihre Vorstellungskraft mit Gemini-Modellen in eine Website!

1. Einführung

In der Webentwicklung kann die Umwandlung eines Designkonzepts in eine funktionale Website sowohl zeitaufwendig als auch komplex sein. Mit dem Aufkommen generativer KI-Modelle wie Gemini wird dieser Prozess jedoch immer einfacher und zugänglicher. Wir entwickeln eine Lösung, die darauf spezialisiert ist, handgezeichnete Wireframes in Website-Code zu konvertieren. Mit diesem leistungsstarken Tool können Designer und Entwickler ihre Website-Visionen mit beispielloser Leichtigkeit und Effizienz umsetzen.

In diesem Lab erstellen wir eine Webanwendung, mit der Nutzer Websitecode (HTML, CSS und JavaScript) aus Wireframes und Prompts generieren können, die sie mit den generativen KI-Modellen von Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro usw.) eingeben. Die Anwendung wird mit Flask, einem beliebten Python-Webframework, erstellt und verwendet die Vertex AI-Clientbibliothek für die Interaktion mit dem Dienst für generative Modelle.

Umfang

Am Ende dieses Labs haben Sie eine funktionierende Webanwendung, die Bilder aus Wireframes und Prompts generieren kann. Außerdem erhalten Sie ein besseres Verständnis dafür, wie Sie die generativen KI-Modelle von Vertex AI verwenden.

Ihre Webanwendung sieht dann so aus:

Ablauf der App

Handgezeichnete Wireframes hochladen:Nutzer können ein Bild ihres handgezeichneten Wireframes in die App hochladen.
Modell auswählen:Die App bietet eine Auswahl vortrainierter Gemini-Modelle, die für verschiedene Designstile optimiert sind.
Prompt eingeben:Nutzer können optional einen Text-Prompt eingeben, um die Generierung des Modells zu steuern.
Website-Code generieren:Die App sendet das Wireframe und den Prompt an Gemini, das den entsprechenden Website-Code generiert.
Ergebnis anzeigen:Der generierte Code wird auf der Antwortseite der App angezeigt.

Zuerst werden wir die Grundlagen von Wireframes und Prompts besprechen und erläutern, wie sie zum Generieren von Website-Code verwendet werden können. Anschließend werden wir die Schritte zum Erstellen der Webanwendung durchgehen, einschließlich der Verarbeitung von Nutzereingaben, der Generierung von Antworten und der Anzeige der Ergebnisse.

2. Hinweis

Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist.
Sie verwenden Cloud Shell, eine Befehlszeilenumgebung, die in Google Cloud ausgeführt wird. Klicken Sie oben in der Google Cloud Console auf „Cloud Shell aktivieren“, um darauf zuzugreifen.

Sobald die Verbindung mit der Cloud Shell hergestellt ist, können Sie mit dem folgenden Befehl prüfen, ob Sie bereits authentifiziert sind und für das Projekt schon Ihre Projekt-ID eingestellt ist:

gcloud auth list

Führen Sie den folgenden Befehl in Cloud Shell aus, um zu bestätigen, dass der gcloud-Befehl Ihr Projekt kennt.

gcloud config list project

Wenn Ihr Projekt nicht festgelegt ist, verwenden Sie den folgenden Befehl, um es festzulegen:

gcloud config set project <YOUR_PROJECT_ID>

Prüfen Sie, ob die folgenden APIs aktiviert sind:

Cloud Run
Vertex AI

Alternativ zum gcloud-Befehl können Sie die Konsole über diesen Link verwenden. Informationen zu gcloud-Befehlen und deren Verwendung finden Sie in der Dokumentation.

3. Schritt 1: Python-Cloud Run-Webanwendung booten

Wir erstellen zuerst die Python-Webanwendungsvorlage für Cloud Run in Cloud Shell.

Rufen Sie das Cloud Shell-Terminal auf und klicken Sie auf die Schaltfläche „Editor öffnen“.

Achten Sie darauf, dass das Cloud Code-Projekt in der Statusleiste unten links im Cloud Shell-Editor festgelegt ist, wie im Bild unten dargestellt, und auf das aktive Google Cloud-Projekt festgelegt ist, in dem die Abrechnung aktiviert ist. Autorisieren, wenn Sie dazu aufgefordert werden.

Klicken Sie in der Statusleiste auf das aktive Projekt und warten Sie, bis das Cloud Code-Pop-up geöffnet wird. Wählen Sie im Pop-up-Fenster „Neue Anwendung“ aus.

Wählen Sie aus der Liste der Anwendungen Cloud Run-Anwendung aus:

Wählen Sie auf Seite 2/2 die Python Flask-Vorlage aus:

Geben Sie den gewünschten Namen für das Projekt ein (z.B. „amazing-gemini-app“) und klicken Sie auf OK:

Dadurch wird die Vorlage für das neue Projekt geöffnet, das Sie gerade eingerichtet haben.

So einfach lässt sich eine Webanwendung mit Google Cloud Shell starten.

4. Schritt 2: Frontend erstellen

Dazu benötigen wir eine HTML-Seite. Diese Seite enthält den Code, der die Benutzeroberfläche für die Webanwendung definiert. Es enthält ein Formular, in dem Nutzer ein handgezeichnetes Wireframe-Bild hochladen, ein generatives Modell auswählen und einen Text-Prompt eingeben können. Nach dem Einreichen des Formulars wird das Ergebnis auf einem anderen Tab angezeigt.

Kopieren Sie den folgenden Code und ersetzen Sie damit die Datei „index.html“ im Ordner 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>

Wenn ein Nutzer mit der App interagiert, werden die folgenden Aktionen ausgeführt:

Der Nutzer wählt ein Wireframe-Bild und ein Modell aus und gibt einen Prompt ein.
Wenn der Nutzer auf die Schaltfläche „Senden“ klickt, werden die Formulardaten (Bild, Modell und Prompt) mit der HTTP-POST-Methode an die URL „/response“ gesendet.
Der serverseitige Code (in app.py implementiert) verarbeitet die Formulardaten und generiert die Antwort mit dem angegebenen Modell und Prompt.
Die generierte Antwort wird auf dem neuen Tab angezeigt.

Wir sind jetzt mit dem Frontend-Teil der Webanwendung fertig.

5. Schritt 3: Backend erstellen (generative KI)

Schreiben wir den Hauptteil dieser Webanwendung. Die Datei „app.py“, die das vom Nutzer eingegebene Bild, die Auswahl des Modells und den Prompt entgegennimmt und in Website-Code umwandelt.

Kopieren Sie den vollständigen Code für 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')

Der Code führt im Wesentlichen Folgendes aus:

Mit diesem Code werden die erforderlichen Bibliotheken für die Anwendung importiert:

Flask: Ein einfaches Web-Framework für Python.

os: Für die Interaktion mit dem Betriebssystem.

random: Zum Generieren von Zufallszahlen.

vertexai: Die Vertex AI-Clientbibliothek.

GenerativeModel und Image: Klassen aus der Vertex AI Generative Models-Bibliothek.

Flask-App initialisieren:

Als Nächstes wird die Flask-Anwendung initialisiert und die maximal zulässige Größe für hochgeladene Bilder auf 16 MB festgelegt.

Vertex AI-Client initialisieren

Damit wird die Vertex AI-Clientbibliothek mit der angegebenen Projekt-ID und dem angegebenen Standort initialisiert. Ersetzen Sie YOUR_PROJECT_ID durch Ihre Projekt-ID.

Funktion „generate“ definieren

Diese Funktion verwendet ein Wireframe-Bild, ein generatives Modell und einen Prompt als Eingaben. Anschließend wird der HTML-Code für die Website mit dem angegebenen Modell und Prompt generiert. Die generierte Antwort wird als String zurückgegeben.

Startseitenroute definieren

Diese Funktion definiert die Route der Startseite. Diese Funktion wird aufgerufen, wenn ein Nutzer die Stamm-URL der Anwendung aufruft. Sie rendert die Vorlage „index.html“, die die Startseite der Anwendung ist.

Die Antwortroute definieren

Diese Funktion definiert die Antwortroute. Wenn ein Nutzer das Formular auf der Startseite einreicht, wird diese Funktion aufgerufen. Es verarbeitet das hochgeladene Bild, das Modell und den Prompt und generiert dann den Websitecode. Die generierte Antwort wird auf dem neuen Tab angezeigt.

Anwendung ausführen

In diesem Teil des Codes wird geprüft, ob das Skript als Hauptprogramm ausgeführt wird. Wenn ja, ruft sie den Serverport aus den Umgebungsvariablen ab und führt die App auf dem angegebenen Port aus.

6. Schritt 4: Abhängigkeiten und Dockerfile vorbereiten

Achten Sie darauf, dass die Datei „requirements.txt“ die folgenden Abhängigkeiten enthält:

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

Ersetzen Sie den Inhalt des Dockerfile durch Folgendes:

# 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. Schritt 5: Webanwendung bereitstellen

Nachdem wir die Anwendungskomponenten erstellt haben, stellen wir die App bereit.

Rufen Sie das Cloud Shell-Terminal auf und prüfen Sie, ob das aktuelle Projekt für Ihr aktives Projekt konfiguriert ist. Falls nicht, müssen Sie die Projekt-ID mit dem Befehl „gcloud configure“ festlegen:

gcloud config set project [PROJECT_ID]

Geben Sie dann die folgenden Befehle in dieser Reihenfolge ein:

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

Sie werden aufgefordert, einen Namen für Ihren Dienst einzugeben, z. B. draw-website. Wählen Sie die entsprechende Nummer für die Region us-central1 aus. Sagen Sie y, wenn Sie gefragt werden, ob Sie nicht authentifizierte Aufrufe zulassen möchten. Hinweis: Wir erlauben hier den nicht authentifizierten Zugriff, da es sich um eine Demoanwendung handelt. Wir empfehlen, für Ihre Unternehmens- und Produktionsanwendungen eine geeignete Authentifizierung zu verwenden.

Nach Abschluss der Bereitstellung sollten Sie einen Link ähnlich dem folgenden erhalten:

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

Testen Sie Ihre Anwendung:

8. Bereinigen

So vermeiden Sie, dass Ihrem Google Cloud-Konto die in diesem Codelab verwendeten Ressourcen in Rechnung gestellt werden:

Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie auf Löschen.
Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Beenden, um das Projekt zu löschen.
Alternativ können Sie in der Console zu Cloud Run wechseln, den gerade bereitgestellten Dienst auswählen und löschen.

9. Glückwunsch

Glückwunsch! Sie haben erfolgreich eine einfache Webanwendung in Python Flask erstellt, die in Cloud Run bereitgestellt wird und Zeichnungen in Websites umwandelt. Das vollständige Repository finden Sie hier. Die App „Website zeichnen“ zeigt, wie Gemini den Webentwicklungsprozess optimieren kann. Durch den Einsatz von KI können Designer und Entwickler Websites schneller, genauer und kreativer erstellen. Da sich generative KI-Modelle ständig weiterentwickeln, können wir in Zukunft mit noch mehr bahnbrechenden Anwendungen rechnen.