استخدام Gemini API في مواقع الويب

  السلام عليكم .. 

عنوان الدرس/ استخدام Gemini API في مواقع الويب

الاختصاص/  الذكاء الاصطناعي

المستوى/ الكل

ملاحظة: اللغة المستخدمة في الدرس هي JavaScript باستخدام React JS

الخطوات:

1- نقوم بعمل مشروع React جديد من خلال الاسطر التالية:

npx create-react-app gemini-api 

cd my-app 

npm start

2- تنصيب حزمة google AI على المشروع كالتالي:

npm i @google/generative-ai

نحتاج إلى مفتاح API للمطور لاستخدام Gemini AI ولكي ننشيء مفتاح API للمطور، نذهب الى الرابط التالي https://aistudio.google.com/app/apikey

ثم نقوم بإنشاء المفتاح .. وبمجرد إنشائه، انسخه إلى موقع آمن داخل نظامك لاستخدامه لاحقًا في التطبيق.

3- نرجع الى مشروعنا في react ونفتح ملف App.js ونمسح الكود الذي بداخله ، ثم نقوم باستدعاء المكتبة الخاصة بالكوكل ai كالتالي:

import { GoogleGenerativeAI } from '@google/generative-ai';

4- نقوم بإنشاء كائن genAI من كلاس GoogleGenerativeAI من خلال تمرير مفتاح API لكي نتمكن من الوصول إلى جميع الدوال التي يقدمها. كالتالي:

  const API_KEY = "AIzaSyAAYmJ0_U61wa8toBUo_J_XXelgoNJz6-c";  // put your api key here

5- نستخدم useState من اجل ادخال الاسئلة الى gemini وكذلك لطبع الاجابة المتولدة ، من خلال الكود التالي

  const [geminisearchValue, setsearchValue] = useState('');
  const [geminiResponse, setgeminiResponse] = useState([]);

  const handlesearchInput = (e)=>{
    setsearchValue(e.target.value);
  }

          <input type="text" class="form-control"
          value={geminisearchValue} 
          onChange={handlesearchInput} 
          placeholder="type here" required 
          /> 

6- نأتي الان الى الكود الخاص بال gemini api ونشرحه بالتفصيل:

ننشئ دالة getResponseforGemini  ونضع بداخله الأسطر التالية:

- عمل model  خاص بال gemini api وهنا استخدمنا gemini-1.5-flash كالتالي:

const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" }); 

- عمل متغير result واسناده قيمة المدخل الى ال model من خلال model.generateContent كالتالي:

const result = await model.generateContent(geminisearchValue);

- عمل متغير response واسناده قيمة النتيجة الخارجة من ال model من خلال result.response كالتالي:

const response = result.response;

- وأخيراً تحويل قيمة استخراج الكتابة من ال response من خلال response.text  كالتالي:

const text = response.text();

حيث قمنا بهذا الدرس استخدام خاصية Generate text from text-only input وهي عملية توليد الكتابة من الكتابة فقط  

- نقوم الان بوضع النتيجة في المتغير geminiResponse من أجل اظهارها في الموقع كالتالي:

setgeminiResponse([...geminiResponse,text]);

وهنا الكود بالكامل :

import { useState } from 'react';
import './App.css';
import { GoogleGenerativeAI } from '@google/generative-ai';

function App() {
  const [geminisearchValue, setsearchValue] = useState('');
  const [geminiResponse, setgeminiResponse] = useState([]);

  const handlesearchInput = (e)=>{
    setsearchValue(e.target.value);
  }


  const API_KEY = "AIzaSyAAYmJ0_U61wa8toBUo_J_XXelgoNJz6-c";  // put your api key here
  const genAI = new GoogleGenerativeAI(API_KEY);
  const getResponseforGemini = async ()=>{
    try{
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" }); 
      const result = await model.generateContent(geminisearchValue);
      const response = result.response;
      const text = response.text();
      console.log(text);
      setgeminiResponse([...geminiResponse,text]);
    }
    catch (error) {
      console.log(error);
      console.log("Something Went Wrong");
    }
  };
 
  return (
    <div style={{height:'700px', backgroundColor: '#F2F3F4'}}>
        <div class="container" style={{padding:'70px'}}>
            <div style={{display:'flex', justifyContent: 'center'}}>
                <h1>
                    Hi Gemini!
                </h1>
            </div>
            <div style={{marginTop: "30px"}}>
 
                    <div class="col-md-4" style={{padding:'20px'}}>
                      <label for="validationCustom01" class="form-label">ask what you want</label>
                      <input type="text" class="form-control"
                      value={geminisearchValue} 
                      onChange={handlesearchInput} 
                      placeholder="type here" required 
                      /> 
                    </div>
                    <div class="col-12">
                      <button class="btn btn-primary"
                      onClick={getResponseforGemini}
                      >
                        GO
                      </button>
                    </div>
                    <div class="form-floating">
                      {
                        geminiResponse.map((geminiRes,index)=>(
                          <div key={index}>
                            <div className={`response-text ${index === geminiResponse.length - 1 ? 'fw-italic' : ''}`}>{geminiRes}</div>
                          </div>
                        ))
                      }
                        
                    </div>
            </div>
    </div>
    </div>
  );
}
export default App;

النتيجة النهائية في الصورة 

اضغط على الصورة للتكبير



واخيراً قم بمراجعة موقع https://ai.google.dev/gemini-api/docs وحاول ان تستخدم ميزات أخرى في gemini api في موقعك 

enjoy 😊