Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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 zeitaufwendig und komplex sein. Mit dem Aufkommen generativer KI-Modelle wie Gemini wird dieser Prozess jedoch immer effizienter und zugänglicher. Wir entwickeln eine Lösung, die sich auf die Umwandlung von handgezeichneten Wireframes in Websitecode spezialisiert hat. Mit diesem leistungsstarken Tool können Designer und Entwickler ihre Website-Visionen mit beispielloser Leichtigkeit und Effizienz verwirklichen.

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 erstellt, einem beliebten Python-Web-Framework. Die Vertex AI-Clientbibliothek wird verwendet, um mit dem Dienst für generative Modelle zu interagieren.

Was Sie erstellen

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

Ihre Webanwendung sieht so aus:

Ablauf der App

Handgezeichnetes 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 angeben:Nutzer können optional einen Text-Prompt angeben, um die Generierung des Modells zu steuern.
Websitecode generieren:Die App sendet das Wireframe und den Prompt an Gemini, das den entsprechenden Websitecode generiert.
Ergebnis anzeigen:Der generierte Code wird auf der Antwortseite der App angezeigt.

Zuerst besprechen wir die Grundlagen von Wireframes und Prompts und wie sie zum Generieren von Websitecode verwendet werden können. Anschließend führen wir Sie durch die Schritte zum Erstellen der Webanwendung, 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 der 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 die 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, prüfen Sie mit dem folgenden Befehl, ob Sie bereits authentifiziert sind und für das Projekt schon Ihre Projekt-ID eingestellt ist:

gcloud auth list

Führen Sie in der Cloud Shell den folgenden Befehl aus, um zu prüfen, ob 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>

Achten Sie darauf, dass die folgenden APIs aktiviert sind:

Cloud Run
Vertex AI

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

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

Wir erstellen zuerst die Vorlage für die Python- Cloud Run Webanwendung in der 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 unten links (Statusleiste) des Cloud Shell-Editors festgelegt ist, wie im Bild unten hervorgehoben. Es muss auf das aktive Google Cloud-Projekt festgelegt sein, für das die Abrechnung aktiviert ist. Klicken Sie bei Aufforderung auf Autorisieren.

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 „Neue Anwendung“ aus.

Wählen Sie in 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 ist es, eine Webanwendung mit der Google Cloud Shell zu erstellen.

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. Sie enthält ein Formular, mit dem Nutzer ein Bild eines handgezeichneten Wireframes hochladen, ein generatives Modell auswählen und einen Text-Prompt angeben können. Nach dem Senden des Formulars wird das Ergebnis auf einem anderen Tab angezeigt.

Kopieren Sie den folgenden Code und ersetzen Sie die Datei „index.html“ im Ordner templates durch diesen Code:

<!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, geschieht Folgendes:

Der Nutzer wählt ein Wireframe-Bild, ein Modell 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)

Jetzt schreiben wir den Hauptteil dieser Webanwendung. Die Datei „app.py“ nimmt das vom Nutzer eingegebene Bild, die Modellauswahl und den Prompt entgegen und wandelt sie in Websitecode um.

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 macht der Code Folgendes:

Dieser Code importiert die erforderlichen Bibliotheken für die Anwendung:

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-Bibliothek für generative Modelle.

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

Die Vertex AI-Clientbibliothek wird 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 Eingabe. Anschließend wird mit dem angegebenen Modell und Prompt das Website-HTML generiert. Die generierte Antwort wird als String zurückgegeben.

Route für die Startseite definieren

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

Route für die Antwort definieren

Diese Funktion definiert die Route für die Antwort. Wenn ein Nutzer das Formular auf der Startseite sendet, wird diese Funktion aufgerufen. Sie 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

Dieser Teil des Codes prüft, ob das Skript als Hauptprogramm ausgeführt wird. Wenn ja, ruft er 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 auf Ihr aktives Projekt konfiguriert ist. Wenn nicht, verwenden Sie den Befehl „gcloud configure“, um die Projekt-ID festzulegen:

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. Geben Sie "y" ein, wenn Sie gefragt werden, ob Sie nicht authentifizierte Aufrufe zulassen möchten. Hinweis: Wir lassen hier nicht authentifizierte Zugriffe zu, da es sich um eine Demoanwendung handelt. Für Ihre Unternehmens- und Produktionsanwendungen empfehlen wir, 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 schnelle 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 „draw-a-website“ zeigt die transformative Kraft von Gemini bei der Optimierung des Webentwicklungsprozesses. 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 noch mehr bahnbrechende Anwendungen erwarten.