Web Sitesi Çizin: Gemini modellerini kullanarak hayal gücünüzü web sitesine dönüştürün.

1. Giriş

Web geliştirme dünyasında, bir tasarım konseptini işlevsel bir web sitesine dönüştürme süreci hem zaman alıcı hem de karmaşık olabilir. Ancak Gemini gibi üretken yapay zeka modellerinin ortaya çıkmasıyla bu süreç giderek daha kolay ve erişilebilir hale geliyor. Elle çizilmiş tel kafesleri web sitesi koduna dönüştürme konusunda uzmanlaşmış bir çözüm geliştireceğiz. Bu güçlü araç, hem tasarımcıların hem de geliştiricilerin web sitesi vizyonlarını benzeri görülmemiş bir kolaylık ve verimlilikle hayata geçirmelerini sağlar.

Bu laboratuvarda, kullanıcıların Vertex AI'ın üretken yapay zeka modellerini (Gemini 1.5 Flash, Gemini 1.5 Pro vb.) kullanarak girdiği istemlerden ve tel kafeslerden web sitesi kodu (HTML, CSS ve JavaScript) oluşturmasına olanak tanıyan bir web uygulaması oluşturacağız. Uygulama, popüler bir Python web çerçevesi olan Flask kullanılarak oluşturulacak ve Üretken Modeller hizmetiyle etkileşim kurmak için Vertex AI istemci kitaplığını kullanacak.

Ne oluşturacaksınız?

Bu laboratuvarın sonunda, tel kafeslerden ve istemlerden görüntü oluşturabilen çalışan bir web uygulamanız olacak. Ayrıca, Vertex AI'ın üretken yapay zeka modellerini nasıl kullanacağınız konusunda daha iyi bir anlayışa sahip olacaksınız.

Web uygulamanız şöyle görünür:

Uygulama akışı

1. Elle Çizilmiş Bir Tel Çerçeve Yükleme: Kullanıcılar, elle çizilmiş tel çerçevelerinin resmini uygulamaya yükleyebilir.
2. Model Seçme: Uygulama, farklı tasarım stilleri için optimize edilmiş, önceden eğitilmiş Gemini modelleri sunar.
3. İstem Girme: Kullanıcılar, modelin üretimini yönlendirmek için isteğe bağlı olarak metin istemi girebilir.
4. Web sitesi kodu oluşturma: Uygulama, tel çerçeveyi ve istemi Gemini'a gönderir. Gemini, ilgili web sitesi kodunu oluşturur.
5. Sonucu Gösterme: Oluşturulan kod, uygulamanın yanıt sayfasında gösterilir.

Öncelikle tel kafesler ve istemlerle ilgili temel bilgileri ve bunların web sitesi kodu oluşturmak için nasıl kullanılabileceğini ele alacağız. Ardından, kullanıcı girişini işleme, yanıt oluşturma ve sonuçları görüntüleme dahil olmak üzere web uygulamasını oluşturma adımlarını inceleyeceğiz.

2. Başlamadan önce

1. Google Cloud Console'daki proje seçici sayfasında bir Google Cloud projesi seçin veya oluşturun.
2. Google Cloud projeniz için faturalandırmanın etkinleştirildiğinden emin olun. Bir projede faturalandırmanın etkin olup olmadığını kontrol etmeyi öğrenin.
3. Google Cloud'da çalışan bir komut satırı ortamı olan Cloud Shell'i kullanacaksınız. Bu araca erişmek için Google Cloud Console'un üst kısmındaki Cloud Shell'i etkinleştir'i tıklayın.

4. Cloud Shell'e bağlandıktan sonra aşağıdaki komutu kullanarak kimliğinizin doğrulandığını ve projenin proje kimliğinize ayarlandığını kontrol edin:

gcloud auth list

5. gcloud komutunun projeniz hakkında bilgi sahibi olduğunu onaylamak için Cloud Shell'de aşağıdaki komutu çalıştırın.

gcloud config list project

6. Projeniz ayarlanmamışsa ayarlamak için aşağıdaki komutu kullanın:

gcloud config set project <YOUR_PROJECT_ID>

7. Aşağıdaki API'lerin etkinleştirildiğinden emin olun:

• Cloud Run
• Vertex AI

gcloud komutunu kullanmak yerine bu bağlantıyı kullanarak konsolu da kullanabilirsiniz. gcloud komutları ve kullanımı için belgelere bakın.

3. 1. adım: Python Cloud Run web uygulaması başlatma

Öncelikle Cloud Shell'den Python Cloud Run web uygulaması şablonunu oluşturacağız.

Cloud Shell Terminali'ne gidin ve Düzenleyiciyi Aç düğmesini tıklayın.

Cloud Shell düzenleyicisinin sol alt köşesinde (durum çubuğu) Cloud Code projesinin ayarlandığından emin olun. Bu proje, aşağıdaki resimde vurgulandığı gibi faturalandırmanın etkinleştirildiği etkin Google Cloud projesi olarak ayarlanmalıdır. İstenirse Yetkilendir'i tıklayın.

Durum çubuğunda etkin projeyi tıklayın ve Cloud Code pop-up'ının açılmasını bekleyin. Pop-up pencerede "Yeni Uygulama"yı seçin.

Uygulama listesinden Cloud Run Uygulaması'nı seçin:

2/2 sayfasında Python Flask şablonunu seçin:

Projeye istediğiniz adı verin (ör. "amazing-gemini-app") ve Tamam'ı tıklayın:

Bu işlem, yeni kurduğunuz projenin şablonunu açar.

Google Cloud Shell ile web uygulaması başlatmak bu kadar kolaydır.

4. 2. adım: Ön ucu oluşturun

Bunun için bir HTML sayfası gerekir. Bu sayfada, web uygulamasının kullanıcı arayüzünü tanımlayan kod bulunur. Bu araçta, kullanıcıların elle çizilmiş bir tel kafes resmi yüklemesine, üretken bir model seçmesine ve metin istemi sağlamasına olanak tanıyan bir form bulunur. Form gönderildikten sonra sonuç başka bir sekmede gösterilir.

Aşağıdaki kodu kopyalayın ve templates klasöründeki index.html dosyanızla değiştirin:

<!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>

Kullanıcı uygulamayla etkileşimde bulunduğunda aşağıdaki işlemler gerçekleşir:

1. Kullanıcı bir tel kafes resmi seçer, bir model seçer ve istem girer.
2. Kullanıcı "Gönder" düğmesini tıkladığında form verileri (resim, model ve istem) HTTP POST yöntemi kullanılarak /response URL'sine gönderilir.
3. Sunucu tarafı kodu (app.py'de uygulanır), form verilerini işler ve belirtilen modeli ve istemi kullanarak yanıtı oluşturur.
4. Oluşturulan yanıt, yeni sekmede gösterilir.

Artık web uygulamasının ön uç bölümüyle ilgili hazırlıklarımızı tamamladık.

5. 3. adım: Arka ucu oluşturun (üretken yapay zeka)

Bu web uygulamasının ana bölümünü yazalım. Kullanıcı giriş resmini, model seçimini ve istemi alıp web sitesi koduna dönüştüren app.py dosyası.

app.py dosyasının kodunun tamamını kopyalayın:

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

Kodun yaptığı işlemlerin özeti aşağıda verilmiştir:

1. Bu kod, uygulama için gerekli kitaplıkları içe aktarır:

Flask: Python için hafif bir web çerçevesi.

os: İşletim sistemiyle etkileşim için.

random: Rastgele sayılar oluşturmak için.

vertexai: Vertex AI istemci kitaplığı.

GenerativeModel ve Image: Vertex AI Generative Models kitaplığındaki sınıflar.

2. Flask uygulamasını başlatma:

Ardından, Flask uygulamasını başlatır ve yüklenen resimler için izin verilen maksimum boyutu 16 MB olarak ayarlar.

3. Vertex AI istemcisini başlatma

Vertex AI istemci kitaplığını belirtilen proje kimliği ve konumla başlatır. YOUR_PROJECT_ID kısmını proje kimliğinizle değiştirdiğinizden emin olun.

4. generate işlevini tanımlama

Bu işlev, giriş olarak tel kafes görüntüsü, üretken model ve istem alır. Ardından, belirtilen modeli ve istemi kullanarak web sitesi HTML'sini oluşturur. Oluşturulan yanıt dize olarak döndürülür.

5. Ana Sayfa Rotasını Tanımlama

Bu işlev, ana sayfa rotasını tanımlar. Kullanıcı uygulamanın kök URL'sini ziyaret ettiğinde bu işlev çağrılır. Uygulamanın ana sayfası olan index.html şablonunu oluşturur.

6. Yanıt rotasını tanımlama

Bu işlev, yanıt rotasını tanımlar. Kullanıcı ana sayfadaki formu gönderdiğinde bu işlev çağrılır. Yüklenen resmi, modeli ve istemi işler, ardından web sitesi kodunu oluşturur. Oluşturulan yanıt, yeni sekmede gösterilir.

7. Uygulamayı çalıştırma

Kodun bu kısmı, komut dosyasının ana program olarak çalıştırılıp çalıştırılmadığını kontrol eder. Bu durumda, ortam değişkenlerinden sunucu bağlantı noktasını alır ve uygulamayı belirtilen bağlantı noktasında çalıştırır.

6. 4. adım: Bağımlılıkları ve Dockerfile'ı hazırlayın

requirements.txt dosyasında aşağıdaki bağımlılıkların bulunduğundan emin olun:

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

Dockerfile içeriğini aşağıdakilerle değiştirin:

# 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. 5. adım: Web uygulamasını dağıtın

Uygulama bileşenlerini oluşturduğumuza göre şimdi uygulamayı dağıtalım.

Cloud Shell Terminali'ne gidin ve mevcut projenin etkin projeniz olarak yapılandırıldığından emin olun. Aksi takdirde, proje kimliğini ayarlamak için gcloud configure komutunu kullanmanız gerekir:

gcloud config set project [PROJECT_ID]

Ardından aşağıdaki komutları sırayla tek tek girin:

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

Hizmetiniz için bir ad girmeniz istenir. Örneğin, "draw-website" adını girebilirsiniz. "us-central1" bölgesi için ilgili numarayı seçin. Kimliği doğrulanmamış çağrılara izin vermek isteyip istemediğiniz sorulduğunda "y" deyin. Bunun bir demo uygulaması olması nedeniyle burada kimliği doğrulanmamış erişime izin verildiğini unutmayın. Kurumsal ve üretim uygulamalarınız için uygun kimlik doğrulama yöntemini kullanmanız önerilir.

Dağıtım tamamlandığında aşağıdakine benzer bir bağlantı alırsınız:

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

Uygulamanızı test edin:

8. Temizleme

Bu codelab'de kullanılan kaynaklar için Google Cloud hesabınızın ücretlendirilmesini istemiyorsanız şu adımları uygulayın:

1. Google Cloud Console'da Kaynakları yönetin sayfasına gidin.
2. Proje listesinde silmek istediğiniz projeyi seçin ve Sil'i tıklayın.
3. İletişim kutusunda proje kimliğini yazın ve projeyi silmek için Kapat'ı tıklayın.
4. Alternatif olarak, konsolda Cloud Run'a gidebilir, yeni dağıttığınız hizmeti seçip silebilirsiniz.

9. Tebrikler

Tebrikler! Çizimleri web sitelerine dönüştüren, Cloud Run'da dağıtılan Python Flask ile hızlı bir web uygulaması oluşturmayı başarıyla tamamladınız. Deponun tamamı burada. Draw-a-website uygulaması, web geliştirme sürecini kolaylaştırmada Gemini'ın dönüştürücü gücünü gösteriyor. Yapay zekadan yararlanarak tasarımcıların ve geliştiricilerin daha hızlı, doğru ve yaratıcı web siteleri oluşturmasını sağlayabiliriz. Üretken yapay zeka modelleri gelişmeye devam ettikçe gelecekte daha da çığır açan uygulamalar görebiliriz.