1. Pengantar
Dalam dunia pengembangan web, proses transformasi konsep desain menjadi situs web yang fungsional bisa memakan waktu dan juga kompleks. Namun, dengan hadirnya model AI generatif seperti Gemini, proses ini menjadi semakin sederhana dan mudah diakses. Kita akan membangun solusi yang mengkhususkan diri dalam mengubah {i>wireframe<i} yang digambar di atas kertas menjadi kode {i>website<i}. Alat canggih ini memberdayakan desainer dan pengembang untuk mewujudkan visi situs web 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
Pada akhir lab ini, Anda akan memiliki aplikasi web yang berfungsi dan dapat menghasilkan gambar dari wireframe dan perintah. Anda juga akan memiliki pemahaman yang lebih baik tentang cara menggunakan model AI Generatif Vertex AI.
Aplikasi web Anda akan terlihat seperti ini:
Alur kerja Aplikasi
- Mengupload Wireframe yang Digambar dengan Tangan: Pengguna dapat mengupload gambar wireframe tulisan tangan ke aplikasi.
- Pilih Model: Aplikasi ini menyediakan pilihan model Gemini terlatih yang dioptimalkan untuk berbagai gaya desain.
- Berikan Prompt: Pengguna dapat menyediakan perintah teks untuk memandu pembuatan model.
- Buat Kode Situs: Aplikasi mengirimkan wireframe dan perintah ke Gemini, yang menghasilkan kode situs yang sesuai.
- Tampilkan Hasil: Kode yang dihasilkan akan ditampilkan di halaman respons aplikasi.
Kita akan mulai dengan membahas dasar-dasar {i>wireframe<i} dan {i>prompt<i}, dan bagaimana mereka dapat digunakan untuk menghasilkan kode {i>website<i}. Kemudian, kita akan memandu 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 diaktifkan untuk project Google Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project.
- Anda akan menggunakan Cloud Shell, yakni 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 harus memastikan bahwa Anda sudah diautentikasi dan project 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 sudah diaktifkan:
- Cloud Run
- Vertex AI
Alternatif untuk menggunakan perintah gcloud adalah melalui konsol menggunakan link ini. Lihat dokumentasi untuk mengetahui perintah dan penggunaannya gcloud.
3. Langkah 1: Melakukan bootstrap pada Aplikasi Web Python Cloud Run
Kita akan membuat template aplikasi web Cloud Run Python terlebih dahulu dari Cloud Shell.
Buka Cloud Shell Terminal dan klik tombol Open Editor. 
Pastikan project Cloud Code ditetapkan di pojok kiri bawah (status bar) editor Cloud Shell, seperti yang ditandai pada gambar di bawah, dan disetel ke project Google Cloud yang aktif tempat penagihan Anda diaktifkan. Authorize jika diminta.
Klik project aktif tersebut di status bar dan tunggu hingga Cloud Code muncul. Pada jendela pop-up, pilih "Aplikasi Baru". 
Dari daftar aplikasi, pilih Cloud Run Application:
Untuk halaman 2/2, pilih template Python Flask:
Masukkan nama project sesuai keinginan Anda (mis. "amazing-gemini-app") dan klik OK:
Langkah ini akan membuka {i>template<i} untuk proyek baru yang baru saja Anda siapkan.
Begitulah mudahnya 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. Langkah ini mencakup formulir yang memungkinkan pengguna mengupload gambar wireframe yang digambar tangan, memilih model generatif, dan menyediakan prompt 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) akan dikirim ke URL respons menggunakan metode POST HTTP.
- Kode sisi server (diterapkan 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 dari aplikasi web.
5. Langkah 3: Membangun Backend (AI Generatif)
Mari kita tulis bagian utama dari 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')
Intinya, berikut ini adalah fungsi kode tersebut:
- Kode ini mengimpor library yang diperlukan untuk aplikasi:
Flask: Framework web yang ringan untuk Python.
os: Untuk berinteraksi dengan sistem operasi.
acak: Untuk menghasilkan angka acak.
verteksai: Library klien Vertex AI.
GenerativeModel dan Image: Class dari library Generative Model Vertex AI.
- Memulai aplikasi flask:
Selanjutnya, menginisialisasi aplikasi Flask dan menyetel ukuran maksimum yang diizinkan untuk gambar yang diupload ke 16 MB.
- Melakukan inisialisasi Klien Vertex AI
Library ini menginisialisasi library klien Vertex AI dengan project ID dan lokasi yang ditentukan. Pastikan untuk mengganti ANDA_PROJECT_ID dengan ID project Anda.
- Menentukan Fungsi generate
Fungsi ini mengambil gambar wireframe, model generatif, dan prompt sebagai input. Proses ini kemudian membuat HTML situs menggunakan model dan perintah yang ditentukan. Respons yang dihasilkan ditampilkan sebagai string.
- Menentukan Rute Halaman Beranda
Fungsi ini menentukan rute halaman beranda. Saat pengguna mengunjungi URL root aplikasi, fungsi ini dipanggil. Fungsi 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. Proses ini akan 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 demikian, sistem akan mendapatkan port server dari variabel lingkungan dan menjalankan aplikasi pada 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 kode di bawah ini:
# 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 Terminal Cloud Shell dan pastikan project saat ini dikonfigurasi ke project aktif Anda. Jika belum, Anda dapat menggunakan perintah gcloud configurations untuk menetapkan ID project:
gcloud config set project [PROJECT_ID]
Lalu masukkan perintah berikut dalam urutan tersebut satu per satu:
cd draw-a-website
gcloud run deploy --source .
Anda akan diminta memasukkan nama untuk layanan Anda, 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 di sini kami mengizinkan akses yang tidak diautentikasi 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 resource.
- Dalam daftar project, pilih project yang ingin dihapus, 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 di-deploy dan dihapus.
9. Selamat
Selamat! Anda telah berhasil membangun aplikasi web cepat di Python Flask yang di-deploy di Cloud Run yang mengonversi gambar menjadi situs. Repositori lengkapnya ada di sini. Aplikasi gambar situs menunjukkan kekuatan 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 baik. Seiring model AI generatif terus berkembang, kami memperkirakan akan ada lebih banyak aplikasi inovatif di masa mendatang.