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 alan hem de karmaşık bir süreç olabilir. Ancak Gemini gibi üretken yapay zeka modellerinin ortaya çıkmasıyla birlikte bu süreç giderek daha kolay ve erişilebilir hale geliyor. Elle çizilmiş şablonları web sitesi koduna dönüştürme konusunda uzman bir çözüm geliştireceğiz. Bu güçlü araç, tasarımcılara ve geliştiricilere web sitesi vizyonlarını benzersiz bir kolay ve verimlilikle hayata geçirme konusunda yardımcı olur.

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 telefon çerçevelerinden ve istemlerden web sitesi kodu (html, css ve JavaScript) oluşturmasına olanak tanıyan bir web uygulaması geliştireceğiz. Uygulama, popüler bir Python web çerçevesi olan Flask kullanılarak derlenecek ve üretken modellerle etkileşime geçmek için Vertex AI istemci kitaplığını kullanacak.

Oluşturacaklarınız

Bu laboratuvarın sonunda, elektronik çerçevelerden ve istemlerden resim oluşturabilen, çalışan bir web uygulamanız olacak. Ayrıca, Vertex AI'ın üretken yapay zeka modellerini nasıl kullanacağınızı daha iyi anlarsınız.

Web uygulamanız aşağıdaki gibi görünür:

Uygulamanın akışı

1. Elle Çizilmiş Tel Çerçeve Yükleme: Kullanıcılar, elle çizilmiş tel çerçevenin bir resmini uygulamaya yükleyebilirler.
2. Model seçme: Uygulama, farklı tasarım stilleri için optimize edilmiş, önceden eğitilmiş Gemini modelleri sunar.
3. İstem Sağlama: Kullanıcılar isterlerse model oluşturma sürecinde yol gösterecek bir metin istemi sağlayabilirler.
4. Web sitesi kodu oluştur: Uygulama, şablonu ve istemi Gemini'a gönderir ve Gemini, ilgili web sitesinin kodunu oluşturur.
5. Sonucu Görüntüle: Oluşturulan kod, uygulamanın yanıt sayfasında görüntülenir.

Modeller ve istemlerin temellerini ve bunların web sitesi kodunu oluşturmak için nasıl kullanılabileceklerini açıklayarak başlayacağız. Ardından, kullanıcı girişinin nasıl işleneceği, yanıt oluşturulması ve sonuçların nasıl görüntülenebileceği de 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ı nasıl kontrol edeceğinizi öğ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ğrulanıp doğrulanmadığını ve projenin proje kimliğinize ayarlandığından emin olmak için aşağıdaki komutu kullanın:

gcloud auth list

5. gcloud komutunun projenizi bildiğini onaylamak için Cloud Shell'de aşağıdaki komutu çalıştırın.

gcloud config list project

6. Projeniz ayarlanmadıysa 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 kullanmanın alternatifi, bu bağlantıyı kullanarak konsoldan yararlanmaktır. gcloud komutları ve kullanımı için belgelere bakın.

3. 1. Adım: Python Cloud Run Web Uygulaması'nı önyükleyin

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

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

Cloud Code projesinin, aşağıdaki resimde vurgulandığı gibi Cloud Shell düzenleyicisinin sol alt köşesinde (durum çubuğu) ve faturalandırmayı etkinleştirdiğiniz etkin Google Cloud projesine ayarlandığından emin olun. İstenirse yetki verin.

Durum çubuğundan ilgili etkin projeyi tıklayın ve Cloud Code pop-up'ının açılmasını bekleyin. Pop-up pencerede "New Application"ı (Yeni Uygulama) seçin.

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

2/2. sayfa için Python Flask şablonunu seçin:

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

Bu, oluşturduğunuz yeni projenin şablonunu açar.

Google Cloud Shell ile bir web uygulamasını önyüklemek işte bu kadar basit.

4. 2. Adım: Ön Uç Oluşturun

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

Aşağıdaki kodu kopyalayıp templates klasöründeki index.html dosyanızı 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 çerçeve resmi seçer, bir model seçer ve bir 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ı kod (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.

Web uygulamasının kullanıcı arabirimi ile artık hazırız.

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

Bu web uygulamasının ana kısmı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 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')

Temelde kodun ne yaptığı aşağıda açıklanmıştır:

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.

rastgele: Rastgele sayılar oluşturmak için kullanılır.

vertexai: Vertex AI istemci kitaplığı.

GenerativeModel ve Image: Vertex AI Üretken Modeller kitaplığındaki sınıflar.

2. Flask uygulaması başlatılıyor:

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

3. Vertex AI istemcisini başlatma

Belirtilen proje kimliği ve konumuyla Vertex AI istemci kitaplığını başlatır. YOUR_PROJECT_ID yerine proje kimliğinizi yazmayı unutmayın.

4. Oluşturma işlevini tanımlama

Bu işlev giriş olarak bir tel çerçeve resmi, üretken model ve istem alır. Daha sonra, 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. Bir 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şleyip web sitesinin kodunu oluşturur. Oluşturulan yanıt yeni sekmede gösterilir.

7. Uygulamayı çalıştırma

Kodun bu bölümü, komut dosyasının ana program olarak çalıştırılıp çalıştırılmadığını kontrol eder. Bu durumda, sunucu bağlantı noktasını ortam değişkenlerinden 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

Gereklilikler.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ğıdakiyle 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 uygulamayı dağıtalım.

Cloud Shell Terminal'e gidin ve geçerli projenin etkin projenize göre yapılandırıldığından emin olun. Etkin projeniz yoksa proje kimliğini ayarlamak için gcloud configuration komutunu kullanın:

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 .

Sizden hizmetiniz için bir ad girmeniz istenir (ör. "draw-website"). "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. Bu bir demo uygulama olduğu için burada kimliği doğrulanmamış erişime izin verdiğimizi unutmayın. Kurumsal ve üretim uygulamalarınız için uygun kimlik doğrulamasını kullanmanız önerilir.

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

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

Devam edin ve uygulamanızı test edin:

8. Temizleme

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

1. Google Cloud konsolunda Kaynakları yönetin sayfasına gidin.
2. Proje listesinden silmek istediğiniz projeyi seçin ve ardından Sil'i tıklayın.
3. İletişim kutusuna proje kimliğini yazın ve projeyi silmek için Kapat'ı tıklayın.
4. Alternatif olarak konsolda Cloud Run'a gidip az önce dağıttığınız hizmeti seçip silebilirsiniz.

9. Tebrikler

Tebrikler! Cloud Run'da dağıtılan Python Flask'ta çizimleri web sitelerine dönüştüren hızlı web uygulamasını başarıyla oluşturdunuz. Deponun tamamına buradan ulaşabilirsiniz. Web sitesi çizme uygulaması, Gemini'ın web geliştirme sürecini kolaylaştırmadaki dönüştürücü gücünü gösteriyor. Yapay zekadan yararlanarak tasarımcıları ve geliştiricileri daha hızlı, tutarlı ve yaratıcı web siteleri oluşturma konusunda destekleyebiliriz. Üretken yapay zeka modelleri gelişmeye devam ederken gelecekte daha da çığır açacak uygulamalar olmasını bekleyebiliriz.