Menggambar Situs: Ubah imajinasi Anda menjadi situs menggunakan model Gemini.

1. Pengantar

Dalam dunia pengembangan web, proses mengubah konsep desain menjadi situs web yang berfungsi dapat memakan waktu dan rumit. Namun, dengan munculnya model AI generatif seperti Gemini, proses ini menjadi semakin efisien dan mudah diakses. Kita akan membuat solusi yang khusus mengonversi wireframe yang digambar tangan menjadi kode situs. Alat canggih ini memungkinkan desainer dan developer mewujudkan visi situs mereka dengan kemudahan dan efisiensi yang belum pernah ada sebelumnya.

Di lab ini, kita akan membangun aplikasi web yang memungkinkan pengguna membuat kode situs (html, css, dan javascript) dari wireframe dan perintah yang dimasukkan pengguna menggunakan Model AI Generatif Vertex AI (Gemini 1.5 Flash, Gemini 1.5 Pro, dll.). Aplikasi ini akan dibangun menggunakan Flask, framework web Python yang populer, dan akan menggunakan library klien Vertex AI untuk berinteraksi dengan layanan Model Generatif.

Yang akan Anda bangun

Di akhir lab ini, Anda akan memiliki aplikasi web yang berfungsi dan dapat membuat gambar dari wireframe dan perintah. Anda juga akan lebih memahami cara menggunakan model AI Generatif Vertex AI.

Aplikasi web Anda akan terlihat seperti ini:

Cara kerja Aplikasi

Mengupload Wireframe yang Digambar Tangan: Pengguna dapat mengupload gambar wireframe yang digambar tangan ke aplikasi.
Pilih Model: Aplikasi ini menyediakan pilihan model Gemini terlatih yang dioptimalkan untuk berbagai gaya desain.
Memberikan Perintah: Pengguna dapat secara opsional memberikan perintah teks untuk memandu pembuatan model.
Membuat Kode Situs: Aplikasi mengirimkan wireframe dan perintah ke Gemini, yang akan membuat kode situs yang sesuai.
Menampilkan Hasil: Kode yang dihasilkan ditampilkan di halaman respons aplikasi.

Kita akan mulai dengan membahas dasar-dasar wireframe dan perintah, serta cara menggunakannya untuk membuat kode situs. Kemudian, kita akan membahas langkah-langkah membangun aplikasi web, termasuk cara menangani input pengguna, membuat respons, dan menampilkan hasilnya.

2. Sebelum memulai

Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
Pastikan penagihan telah diaktifkan untuk project Google Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project.
Anda akan menggunakan Cloud Shell, lingkungan command line yang berjalan di Google Cloud. Untuk mengaksesnya, klik Activate Cloud Shell di bagian atas Konsol Google Cloud.

Setelah terhubung ke Cloud Shell, Anda dapat memeriksa bahwa Anda sudah diautentikasi dan project sudah ditetapkan ke project ID Anda menggunakan perintah berikut:

gcloud auth list

Jalankan perintah berikut di Cloud Shell untuk mengonfirmasi bahwa perintah gcloud mengetahui project Anda.

gcloud config list project

Jika project Anda belum ditetapkan, gunakan perintah berikut untuk menetapkannya:

gcloud config set project <YOUR_PROJECT_ID>

Pastikan API berikut diaktifkan:

Cloud Run
Vertex AI

Alternatif untuk menggunakan perintah gcloud adalah membuka konsol menggunakan link ini. Baca dokumentasi untuk mempelajari perintah gcloud dan penggunaannya.

3. Langkah 1: Lakukan Bootstrap Aplikasi Web Python Cloud Run

Kita akan membuat template aplikasi web Cloud Run Python terlebih dahulu dari Cloud Shell.

Buka Cloud Shell Terminal, lalu klik tombol Open Editor.

Pastikan project Cloud Code ditetapkan di pojok kiri bawah (status bar) editor Cloud Shell, seperti yang ditandai dalam gambar di bawah dan ditetapkan ke project Google Cloud aktif tempat Anda mengaktifkan penagihan. Authorize jika diminta.

Klik project aktif tersebut di status bar dan tunggu hingga pop-up Cloud Code terbuka. Di pop-up, pilih "Aplikasi Baru".

Dari daftar aplikasi, pilih Cloud Run Application:

Untuk halaman 2/2, pilih template Python Flask:

Berikan nama project sesuai keinginan Anda (misalnya, "amazing-gemini-app"), lalu klik OK:

Tindakan ini akan membuka template untuk project baru yang baru saja Anda siapkan.

Semudah itulah cara mem-bootstrap aplikasi web dengan Google Cloud Shell.

4. Langkah 2: Bangun Frontend

Untuk melakukannya, kita memerlukan halaman HTML. Halaman tersebut akan berisi kode yang menentukan antarmuka pengguna untuk aplikasi web. Fitur ini mencakup formulir yang memungkinkan pengguna mengupload gambar wireframe yang digambar tangan, memilih model generatif, dan memberikan perintah teks. Setelah mengirimkan formulir, hasilnya akan ditampilkan di tab lain.

Salin kode di bawah dan ganti file index.html Anda di folder 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>

Saat pengguna berinteraksi dengan aplikasi, tindakan berikut akan terjadi:

Pengguna memilih gambar wireframe, memilih model, dan memasukkan perintah.
Saat pengguna mengklik tombol "Kirim", data formulir (gambar, model, dan perintah) dikirim ke URL /response menggunakan metode HTTP POST.
Kode sisi server (diimplementasikan di app.py) memproses data formulir dan menghasilkan respons menggunakan model dan perintah yang ditentukan.
Respons yang dihasilkan akan ditampilkan di tab baru.

Sekarang kita siap dengan bagian front-end aplikasi web.

5. Langkah 3: Bangun Backend (AI Generatif)

Mari kita tulis bagian utama aplikasi web ini. File app.py yang mengambil gambar input pengguna, pilihan model, dan perintah, lalu mengonversinya menjadi kode situs.

Salin kode lengkap untuk 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')

Pada dasarnya, kode tersebut melakukan hal berikut:

Kode ini mengimpor library yang diperlukan untuk aplikasi:

Flask: Framework web ringan untuk Python.

os: Untuk berinteraksi dengan sistem operasi.

random: Untuk membuat angka acak.

vertexai: Library klien Vertex AI.

GenerativeModel dan Image: Class dari library Model Generatif Vertex AI.

Menginisialisasi aplikasi flask:

Selanjutnya, aplikasi ini akan menginisialisasi aplikasi Flask dan menetapkan ukuran maksimum yang diizinkan untuk gambar yang diupload menjadi 16 MB.

Melakukan Inisialisasi Klien Vertex AI

Fungsi ini melakukan inisialisasi library klien Vertex AI dengan project ID dan lokasi yang ditentukan. Pastikan untuk mengganti YOUR_PROJECT_ID dengan project ID Anda.

Menentukan Fungsi generate

Fungsi ini mengambil gambar wireframe, model generatif, dan perintah sebagai input. Kemudian, kode HTML situs dibuat menggunakan model dan perintah yang ditentukan. Respons yang dihasilkan ditampilkan sebagai string.

Menentukan Rute Halaman Beranda

Fungsi ini menentukan rute halaman beranda. Saat pengguna membuka URL root aplikasi, fungsi ini akan dipanggil. Ini merender template index.html, yang merupakan halaman beranda aplikasi.

Menentukan Rute Respons

Fungsi ini menentukan rute respons. Saat pengguna mengirimkan formulir di halaman beranda, fungsi ini dipanggil. Alat ini memproses gambar, model, dan perintah yang diupload, lalu menghasilkan kode situs. Respons yang dihasilkan akan ditampilkan di tab baru.

Menjalankan aplikasi

Bagian kode ini memeriksa apakah skrip sedang dijalankan sebagai program utama. Jika ya, aplikasi akan mendapatkan port server dari variabel lingkungan dan menjalankan aplikasi di port yang ditentukan.

6. Langkah 4: Siapkan Dependensi dan Dockerfile

Pastikan Anda memiliki dependensi berikut dalam file requirements.txt:

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

Ganti konten Dockerfile dengan konten di bawah:

# 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. Langkah 5: Deploy Aplikasi Web

Setelah komponen aplikasi dibuat, mari kita deploy aplikasi.

Buka Cloud Shell Terminal dan pastikan project saat ini dikonfigurasi ke project aktif Anda. Jika tidak, Anda harus menggunakan perintah gcloud configure untuk menyetel project ID:

gcloud config set project [PROJECT_ID]

Kemudian, masukkan perintah berikut dalam urutan tersebut satu per satu:

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

Anda akan diminta untuk memasukkan nama layanan, misalnya "draw-website". Pilih nomor yang sesuai untuk region "us-central1". Ucapkan "y" saat ditanya apakah Anda ingin mengizinkan pemanggilan yang tidak diautentikasi. Perhatikan bahwa kami mengizinkan akses tanpa autentikasi di sini karena ini adalah aplikasi demo. Sebaiknya gunakan autentikasi yang sesuai untuk aplikasi perusahaan dan produksi Anda.

Setelah deployment selesai, Anda akan mendapatkan link yang mirip dengan di bawah ini:

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

Lanjutkan dan uji aplikasi Anda:

8. Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam codelab ini, ikuti langkah-langkah berikut:

Di konsol Google Cloud, buka halaman Manage resources.
Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Delete.
Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
Atau, Anda dapat membuka Cloud Run di konsol, memilih layanan yang baru saja Anda deploy, lalu menghapusnya.

9. Selamat

Selamat! Anda telah berhasil membuat aplikasi web cepat di Python Flask yang di-deploy di Cloud Run yang mengonversi gambar menjadi situs. Repo lengkapnya ada di sini. Aplikasi draw-a-website menunjukkan kemampuan transformatif Gemini dalam menyederhanakan proses pengembangan web. Dengan memanfaatkan AI, kami dapat memberdayakan desainer dan developer untuk membuat situs dengan kecepatan, akurasi, dan kreativitas yang lebih tinggi. Seiring dengan terus berkembangnya model AI generatif, kita dapat mengharapkan aplikasi yang lebih inovatif pada masa mendatang.