Diese Seite wurde von der Cloud Translation API übersetzt.

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

1. Einleitung

In der Welt der Webentwicklung kann die Umwandlung eines Designkonzepts in eine funktionale Website sowohl zeitaufwendig als auch komplex sein. Mit dem Aufkommen von generativen KI-Modellen wie Gemini wird dieser Prozess jedoch zunehmend optimiert und zugänglicher. Wir entwickeln eine Lösung, die darauf spezialisiert ist, handgezeichnete Wireframes in Website-Code umzuwandeln. Dieses leistungsstarke Tool ermöglicht es Designern und Entwicklern, ihre Website-Visionen auf nie dagewesene Weise einfach und effizient zum Leben zu erwecken.

In diesem Lab erstellen wir eine Webanwendung, mit der Nutzer Website-Code (HTML, CSS und JavaScript) aus Wireframes und Prompts generieren können, die der Nutzer mit generativen KI-Modellen von Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro usw.) eingibt. Die Anwendung wird mit Flask erstellt, einem beliebten Python-Web-Framework, und verwendet die Vertex AI-Clientbibliothek, um mit dem Dienst für generative Modelle zu interagieren.

Inhalt

Am Ende dieses Labs haben Sie eine funktionierende Webanwendung, mit der Sie Bilder aus Wireframes und Prompts generieren können. Außerdem erfahren Sie, wie Sie die generativen KI-Modelle von Vertex AI verwenden.

Ihre Webanwendung sieht dann so aus:

So funktioniert die App

Hand-Drawn-Wireframe 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 bereitstellen: Nutzer können optional einen Text-Prompt eingeben, um das Modell zu generieren.
Websitecode generieren:Die App sendet den Wireframe und den Prompt an Gemini, wodurch der entsprechende Websitecode generiert wird.
Zeigen Sie das Ergebnis an:Der generierte Code wird auf der Antwortseite der App angezeigt.

Wir beginnen mit der Erläuterung der Grundlagen von Wireframes und Prompts und wie sie zum Generieren von Website-Code verwendet werden können. Anschließend gehen wir die Schritte zum Erstellen der Webanwendung durch, einschließlich der Verarbeitung von Nutzereingaben, der Generierung einer Antwort und der Anzeige der Ergebnisse.

2. Hinweis

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

Sobald Sie eine Verbindung zu Cloud Shell hergestellt haben, prüfen Sie mit dem folgenden Befehl, ob Sie bereits authentifiziert sind und ob das Projekt auf Ihre Projekt-ID eingestellt ist:

gcloud auth list

Führen Sie in Cloud Shell den folgenden Befehl aus, um zu prüfen, ob der gcloud-Befehl Ihr Projekt kennt.

gcloud config list project

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

gcloud config set project <YOUR_PROJECT_ID>

Die folgenden APIs müssen aktiviert sein:

Cloud Run
Vertex AI

Alternativ zur Verwendung des gcloud-Befehls 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 Bootstrapping ausführen

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

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

Das Cloud Code-Projekt muss in der linken unteren Ecke (Statusleiste) des Cloud Shell-Editors festgelegt sein, wie in der Abbildung unten hervorgehoben. Außerdem muss es auf das aktive Google Cloud-Projekt festgelegt sein, für das die Abrechnung aktiviert ist. Autorisieren Sie, wenn Sie dazu aufgefordert werden.

Klicken Sie in der Statusleiste auf das aktive Projekt und warten Sie, bis sich das Cloud Code-Pop-up öffnet. Wähle im Pop-up-Fenster „New Application“ (Neue Anwendung) aus.

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

Wählen Sie für Seite 2/2 die Python Flask-Vorlage aus:

Geben Sie den gewünschten Namen des Projekts an (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 ist das Bootstrapping einer Webanwendung mit Google Cloud Shell.

4. Schritt 2: Front-End 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, über das Nutzende ein handgezeichnetes Wireframe-Bild hochladen, ein generatives Modell auswählen und einen Text-Prompt eingeben können. Nach dem Senden des Formulars wird das Ergebnis auf einem anderen Tab angezeigt.

Kopieren Sie den folgenden Code und ersetzen Sie Ihre 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:

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

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

5. Schritt 3: Back-End erstellen (generative KI)

Schreiben wir nun den Hauptteil dieser Webanwendung. Die Datei „app.py“, die das Eingabebild des Nutzers, die Modellauswahl und den Prompt nimmt und diese in Websitecode konvertiert.

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')

Im Wesentlichen funktioniert der Code wie folgt:

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

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

os: Zum Interagieren mit dem Betriebssystem.

random: Zum Erzeugen von Zufallszahlen verwenden.

Vertex AI: Die Vertex AI-Clientbibliothek.

„GenerativeModel“ und „Bild“: Klassen aus der Vertex AI-Bibliothek für generative Modelle.

Initialisieren der Flask-App:

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

Sie initialisiert die Vertex AI-Clientbibliothek mit der angegebenen Projekt-ID und dem angegebenen Standort. 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 mithilfe des angegebenen Modells und der angegebenen Eingabe der HTML-Code der Website generiert. Die generierte Antwort wird als String zurückgegeben.

Startseitenroute definieren

Diese Funktion definiert die Route der Startseite. Wenn ein Nutzer die Stamm-URL der Anwendung aufruft, wird diese Funktion aufgerufen. Sie rendert die Vorlage "index.html", also die Startseite der Anwendung.

Antwortroute definieren

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

Anwendung ausführen

Dieser Teil des Codes prüft, ob das Skript als Hauptprogramm ausgeführt wird. In diesem Fall ruft er den Serverport aus den Umgebungsvariablen ab und führt die Anwendung auf dem angegebenen Port aus.

6. Schritt 4: Abhängigkeiten und Dockerfile vorbereiten

Die Datei „requirements.txt“ muss die folgenden Abhängigkeiten enthalten:

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

Ersetzen Sie den Dockerfile-Inhalt 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 Sie nun die Anwendungskomponenten erstellt haben, können Sie die Anwendung bereitstellen.

Rufen Sie das Cloud Shell-Terminal auf und prüfen Sie, ob das aktuelle Projekt für Ihr aktives Projekt konfiguriert ist. Falls nicht, verwenden Sie den Befehl „gcloud config“, um die Projekt-ID festzulegen:

gcloud config set project [PROJECT_ID]

Geben Sie dann nacheinander die folgenden Befehle in der angegebenen 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. Beachten Sie, dass der nicht authentifizierte Zugriff hier zulässig ist, da es sich um eine Demoanwendung handelt. Es wird empfohlen, eine geeignete Authentifizierung für Ihre Unternehmens- und Produktionsanwendungen zu verwenden.

Sobald die Bereitstellung abgeschlossen ist, sollten Sie einen Link wie den folgenden erhalten:

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

Testen Sie nun Ihre Anwendung:

8. Bereinigen

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

Rufen Sie in der Google Cloud Console die Seite Ressourcen verwalten auf.
Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann 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 Cloud Run in der Console aufrufen, den gerade bereitgestellten Dienst auswählen und löschen.

9. Glückwunsch

Glückwunsch! Sie haben erfolgreich eine schnelle Webanwendung in Python Flask erstellt, die in Cloud Run bereitgestellt wird und Zeichnungen in Websites konvertiert. Das vollständige Repository finden Sie hier. Die Zeichen-a-Website-App zeigt, wie vielfältig die Gemini-Funktionen bei der Optimierung der Webentwicklung sind. Durch den Einsatz von KI können wir Designern und Entwicklern die Möglichkeit geben, Websites schneller, präziser und kreativer zu erstellen. Da sich generative KI-Modelle ständig weiterentwickeln, können wir in Zukunft noch weitere bahnbrechende Anwendungen erwarten.