رسم موقع إلكتروني: يمكنك تحويل أفكارك إلى موقع إلكتروني باستخدام نماذج Gemini.

1. مقدمة

في عالم تطوير الويب، يمكن أن تكون عملية تحويل مفهوم التصميم إلى موقع إلكتروني عملي معقّدة وتستغرق وقتًا طويلاً. ومع ذلك، مع ظهور نماذج الذكاء الاصطناعي التوليدي مثل Gemini، أصبحت هذه العملية أكثر سلاسة وسهولة. سننشئ حلاً متخصصًا في تحويل الإطارات الشبكية المرسومة يدويًا إلى رموز برمجية للمواقع الإلكترونية. تتيح هذه الأداة الفعّالة للمصمّمين والمطوّرين على حد سواء تحويل رؤيتهم للمواقع الإلكترونية إلى واقع بسهولة وكفاءة غير مسبوقتَين.

في هذا المختبر، سننشئ تطبيق ويب يتيح للمستخدمين إنشاء رمز موقع إلكتروني (html وcss وjavascript) من المخططات الأولية والطلبات التي يدخلها المستخدم باستخدام "نماذج الذكاء الاصطناعي التوليدي" من Vertex AI (مثل Gemini 1.5 Flash وGemini 1.5 Pro وما إلى ذلك). سيتم إنشاء التطبيق باستخدام Flask، وهو إطار عمل شائع على الويب بلغة Python، وسيستخدم مكتبة عميل Vertex AI للتفاعل مع خدمة "النماذج التوليدية".

ما ستنشئه

بنهاية هذا الدرس التطبيقي، سيكون لديك تطبيق ويب يعمل ويمكنه إنشاء صور من الإطارات الشبكية والطلبات. ستفهم أيضًا بشكل أفضل كيفية استخدام نماذج الذكاء الاصطناعي التوليدي في Vertex AI.

سيظهر تطبيق الويب على النحو التالي:

طريقة عمل التطبيق

تحميل إطار شبكي مرسوم يدويًا: يمكن للمستخدمين تحميل صورة للإطار الشبكي المرسوم يدويًا إلى التطبيق.
اختيار نموذج: يوفّر التطبيق مجموعة من نماذج Gemini المُدرَّبة مسبقًا والمحسّنة لتناسب أساليب التصميم المختلفة.
تقديم طلب: يمكن للمستخدمين تقديم طلب نصي اختياري لتوجيه عملية إنشاء المحتوى في النموذج.
إنشاء رمز الموقع الإلكتروني: يرسل التطبيق الإطار الأوّلي والطلب إلى Gemini، الذي ينشئ رمز الموقع الإلكتروني المقابل.
عرض النتيجة: يتم عرض الرمز الذي تم إنشاؤه في صفحة رد التطبيق.

سنبدأ بمناقشة أساسيات الإطارات الشبكية والمطالبات، وكيفية استخدامها لإنشاء رمز الموقع الإلكتروني. بعد ذلك، سنشرح خطوات إنشاء تطبيق الويب، بما في ذلك كيفية التعامل مع بيانات المستخدم المدخلة، وإنشاء الردود، وعرض النتائج.

2. قبل البدء

في Google Cloud Console، في صفحة اختيار المشروع، اختَر أو أنشِئ مشروعًا على Google Cloud.
تأكَّد من تفعيل الفوترة لمشروعك على Google Cloud. تعرَّف على كيفية التحقّق مما إذا كانت الفوترة مفعَّلة في مشروع.
ستستخدم Cloud Shell، وهي بيئة سطر أوامر تعمل في Google Cloud. للوصول إليها، انقر على "تفعيل Cloud Shell" في أعلى "وحدة تحكّم Google Cloud".

بعد الاتصال بـ Cloud Shell، يمكنك التأكّد من أنّك قد تم التحقّق من هويتك وأنّه تم ضبط المشروع على رقم تعريف مشروعك باستخدام الأمر التالي:

gcloud auth list

نفِّذ الأمر التالي في Cloud Shell للتأكّد من أنّ أمر gcloud يعرف مشروعك.

gcloud config list project

إذا لم يتم ضبط مشروعك، استخدِم الأمر التالي لضبطه:

gcloud config set project <YOUR_PROJECT_ID>

تأكَّد من تفعيل واجهات برمجة التطبيقات التالية:

Cloud Run
Vertex AI

البديل عن استخدام أمر gcloud هو الانتقال إلى وحدة التحكّم باستخدام هذا الرابط. يُرجى الرجوع إلى المستندات لمعرفة أوامر gcloud وطريقة استخدامها.

3- الخطوة 1: إنشاء تطبيق ويب Python Cloud Run

سننشئ أولاً نموذج تطبيق الويب Cloud Run بلغة Python من Cloud Shell.

انتقِل إلى وحدة طرفية Cloud Shell وانقر على الزر "فتح المحرّر".

تأكَّد من ضبط مشروع Cloud Code في أسفل يمين (شريط الحالة) محرر Cloud Shell، كما هو موضّح في الصورة أدناه، ومن ضبطه على مشروع Google Cloud النشط الذي تم تفعيل الفوترة فيه. انقر على تفويض إذا طُلب منك ذلك.

انقر على هذا المشروع النشط في شريط الحالة وانتظِر إلى أن تفتح النافذة المنبثقة Cloud Code. في النافذة المنبثقة، اختَر "تطبيق جديد".

من قائمة التطبيقات، اختَر تطبيق Cloud Run:

في الصفحة 2/2، اختَر نموذج Python Flask:

أدخِل اسم المشروع الذي تريده (مثل amazing-gemini-app) وانقر على حسنًا:

سيؤدي ذلك إلى فتح نموذج المشروع الجديد الذي أعددته للتو.

هذه هي الطريقة البسيطة لتشغيل تطبيق ويب باستخدام Google Cloud Shell.

4. الخطوة 2: إنشاء الواجهة الأمامية

لإجراء ذلك، سنحتاج إلى صفحة HTML. ستحتوي هذه الصفحة على الرمز الذي يحدّد واجهة المستخدم لتطبيق الويب. تتضمّن هذه الأداة نموذجًا يتيح للمستخدمين تحميل صورة إطار تصويري مرسومة يدويًا واختيار نموذج توليدي وتقديم طلب نصي. بعد إرسال النموذج، ستظهر النتيجة في علامة تبويب أخرى.

انسخ الرمز أدناه واستبدِل ملف index.html في مجلد 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>

عندما يتفاعل المستخدم مع التطبيق، تحدث الإجراءات التالية:

يختار المستخدم صورة هيكلية، ثم يختار نموذجًا، ويدخل طلبًا.
عندما ينقر المستخدم على الزر "إرسال"، يتم إرسال بيانات النموذج (الصورة والنموذج والطلب) إلى عنوان URL الخاص بالاستجابة باستخدام طريقة HTTP POST.
يعالج الرمز البرمجي من جهة الخادم (الذي تم تنفيذه في app.py) بيانات النموذج وينشئ الردّ باستخدام النموذج والطلب المحدّدين.
يظهر الردّ الذي تم إنشاؤه في علامة التبويب الجديدة.

أصبحنا الآن جاهزين للجزء الأمامي من تطبيق الويب.

5- الخطوة 3: إنشاء الخلفية (الذكاء الاصطناعي التوليدي)

لنكتب الجزء الرئيسي من تطبيق الويب هذا. ملف app.py الذي يتلقّى صورة من المستخدم وخيار النموذج والطلب ويحوّلها إلى رمز موقع إلكتروني

انسخ الرمز الكامل لملف 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')

في ما يلي جوهر ما تفعله التعليمة البرمجية:

يستورد هذا الرمز المكتبات اللازمة للتطبيق:

‫Flask: إطار عمل خفيف الوزن للويب في Python

os: للتفاعل مع نظام التشغيل

random: لإنشاء أرقام عشوائية

‫vertexai: مكتبة عميل Vertex AI

‫GenerativeModel وImage: فئتان من مكتبة "النماذج التوليدية" في Vertex AI

جارٍ إعداد تطبيق Flask:

بعد ذلك، يتم تهيئة تطبيق Flask وتحديد الحد الأقصى المسموح به لحجم الصور التي يتم تحميلها وهو 16 ميغابايت.

إعداد برنامج Vertex AI

تعمل هذه الدالة على تهيئة مكتبة عميل Vertex AI باستخدام رقم تعريف المشروع والموقع الجغرافي المحدّدَين. تأكَّد من استبدال YOUR_PROJECT_ID برقم تعريف مشروعك.

تحديد الدالة generate

تتلقّى هذه الدالة صورة هيكلية ونموذجًا توليديًا وطلبًا كمدخلات. بعد ذلك، ينشئ رمز html للموقع الإلكتروني باستخدام النموذج والطلب المحدّدَين. يتم عرض الردّ الذي تم إنشاؤه كسلسلة.

تحديد مسار الصفحة الرئيسية

تحدّد هذه الدالة مسار الصفحة الرئيسية. يتم استدعاء هذه الدالة عندما ينتقل المستخدم إلى عنوان URL الأساسي للتطبيق. تعرض هذه الدالة نموذج index.html، وهو الصفحة الرئيسية للتطبيق.

تحديد مسار الرد

تحدّد هذه الدالة مسار الرد. عندما يرسل المستخدم النموذج على الصفحة الرئيسية، يتم استدعاء هذه الدالة. ويعالج الصورة والنموذج والطلب الذي تم تحميله، ثم ينشئ رمز موقع الويب. يظهر الردّ الذي تم إنشاؤه في علامة التبويب الجديدة.

تشغيل التطبيق

يتحقّق هذا الجزء من الرمز ممّا إذا كان النص البرمجي يتم تنفيذه كبرنامج رئيسي. في هذه الحالة، يتم الحصول على منفذ الخادم من متغيّرات البيئة وتشغيل التطبيق على المنفذ المحدّد.

6. الخطوة 4: إعداد التبعيات وملف Dockerfile

تأكَّد من توفّر التبعيات التالية في ملف requirements.txt:

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

استبدِل محتوى Dockerfile بما يلي:

# 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: نشر تطبيق الويب

بعد إنشاء مكونات التطبيق، لننفّذ عملية نشر التطبيق.

انتقِل إلى وحدة طرفية Cloud Shell وتأكَّد من ضبط المشروع الحالي على مشروعك النشط. وإذا لم يكن كذلك، عليك استخدام الأمر gcloud configure لضبط رقم تعريف المشروع:

gcloud config set project [PROJECT_ID]

بعد ذلك، أدخِل الأوامر التالية بالترتيب واحدًا تلو الآخر:

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

سيُطلب منك إدخال اسم لخدمتك، مثلاً "draw-website". اختَر الرقم المناسب للمنطقة "us-central1". قُل "نعم" عندما يُطلب منك تحديد ما إذا كنت تريد السماح بالاستدعاءات غير المصادق عليها. يُرجى العِلم أنّنا نسمح بالوصول غير المصادَق عليه هنا لأنّ هذا التطبيق هو تطبيق تجريبي. ننصحك باستخدام المصادقة المناسبة لتطبيقات المؤسسة والإنتاج.

بعد اكتمال عملية النشر، من المفترض أن تحصل على رابط مشابه لما يلي:

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

يمكنك الآن اختبار تطبيقك باتّباع الخطوات التالية:

8. تَنظيم

لتجنُّب تحمّل رسوم في حسابك على Google Cloud مقابل الموارد المستخدَمة في هذا الدرس التطبيقي حول الترميز، اتّبِع الخطوات التالية:

في Google Cloud Console، انتقِل إلى صفحة إدارة الموارد.
في قائمة المشاريع، اختَر المشروع الذي تريد حذفه، ثم انقر على حذف.
في مربّع الحوار، اكتب رقم تعريف المشروع، ثم انقر على إيقاف لحذف المشروع.
بدلاً من ذلك، يمكنك الانتقال إلى Cloud Run في وحدة التحكّم، واختيار الخدمة التي نشرتها للتو وحذفها.

9- تهانينا

تهانينا! لقد أنشأت بنجاح تطبيق ويب سريعًا بلغة Python Flask وتم نشره على Cloud Run، وهو يحوّل الرسومات إلى مواقع إلكترونية. يمكنك الاطّلاع على المستودع الكامل هنا. يعرض تطبيق "ارسم موقعًا إلكترونيًا" الإمكانات التحويلية التي يقدّمها Gemini في تبسيط عملية تطوير الويب. من خلال الاستفادة من الذكاء الاصطناعي، يمكننا مساعدة المصمّمين والمطوّرين على إنشاء مواقع إلكترونية بسرعة ودقة وإبداع أكبر. مع استمرار تطوّر نماذج الذكاء الاصطناعي التوليدي، يمكننا توقّع المزيد من التطبيقات الرائدة في المستقبل.