Mengintegrasikan Gemini AI dalam Angular: Membina Aplikasi Sembang

Mengintegrasikan Gemini AI dalam Angular: Membina Aplikasi Sembang

Kecerdasan buatan (AI) sedang merevolusikan cara kita berinteraksi dengan teknologi, dan pembangunan bahagian hadapan tidak terkecuali. Memahami dokumentasi AI dan API telah menjadi penting untuk pembangun bahagian hadapan moden. Artikel ini meneroka cara menggunakan Gemini Pro dalam Angular dengan mencipta aplikasi sembang. Anda akan belajar cara mengintegrasikan keupayaan Gemini dan membina bot tersuai yang disesuaikan dengan keperluan khusus menggunakan gesaan.

Gambaran keseluruhan

Dalam contoh permohonan, saya mencipta bot yang dilatih tentang konsep Angular dan resume peribadi saya. Resume diekstrak sebagai teks daripada LinkedIn, ditukar kepada pelbagai objek melalui Google AI Studio dan ditambah dengan gesaan. Selain itu, borang tetapan telah digabungkan untuk pengguna melaraskan konfigurasi bot secara dinamik.

Tutorial ini menganggap biasa dengan ChatGPT dan konsep penyepaduannya. Untuk pemula, AI Studio Google (https://aistudio.google.com) memudahkan penyepaduan API dalam JavaScript dan bahasa lain.

Mengapa Pilih Gemini Daripada ChatGPT?

Walaupun ChatGPT OpenAI berkuasa, akses APInya melibatkan kos dan boleh menjadi rumit untuk dilaksanakan. Gemini, disokong oleh kepakaran AI Google yang meluas, menawarkan pendekatan yang lebih mesra pengguna dengan dokumentasi yang mantap dan ciri yang disesuaikan untuk pembangun.

Sejarah Ringkas Google AI

Google mempunyai sejarah lama dalam inovasi AI:

• 2001: Pembelajaran mesin telah digunakan untuk meningkatkan ketepatan carian.
• 2006: Terjemahan Google muncul, kemudian maju dengan TensorFlow dan DeepMind.
• 2016: AlphaGo mengalahkan pemain Go terbaik dunia.
• 2023: AI Generatif mencapai tahap yang lebih tinggi dengan Gemini.

Dengan menggabungkan rangka kerja mantap Angular dengan keupayaan AI Gemini, anda boleh mencipta aplikasi pintar yang menyepadukan interaksi dipacu AI dengan lancar.

---

Langkah Pembangunan

1. Integrasi API Gemini

• Dapatkan Kunci API: Daftar untuk akaun pembangun Google Cloud.
• Pasang SDK: Gunakan Node.js (versi >= 18) untuk memasang pakej Gemini:

  npm install @google/generative-ai

• Buat Perkhidmatan: Laksanakan perkhidmatan untuk mengendalikan panggilan API, pengendalian ralat dan pemformatan respons.

2. Reka Bentuk Antara Muka Sembang

Sertakan UI yang menarik dengan ciri seperti buih sembang, medan input dan tema. Tingkatkan UX menggunakan animasi Sudut dan pemutar untuk kelewatan.

3. Pelaksanaan Logik Sembang

Manfaatkan pengaturcaraan reaktif Angular untuk menyegerakkan input pengguna, respons AI dan sejarah sembang. Gunakan API Gemini untuk mengurus mesej dengan cekap.

4. Meningkatkan Pengalaman Pengguna

• Soalan Pratakrif: Tambahkan pilihan pantas untuk pengguna memulakan perbualan.
• Pemilihan Peribadi: Benarkan pengguna melaraskan tetapan nada, model dan API melalui borang.

---

Contoh Perkhidmatan: DataService

Kod berikut menunjukkan cara berinteraksi dengan Gemini Pro untuk menghantar mesej pengguna dan menerima respons AI:

  npm install @google/generative-ai

---

Mengubah Respons Gemini kepada HTML

Respons Gemini mungkin mengandungi aksara khas seperti Markdown. Paip Sudut berikut menukarnya kepada HTML yang bermakna:

import { Injectable } from "@angular/core";
import { GoogleGenerativeAI, HarmBlockThreshold, HarmCategory } from "@google/generative-ai";
import { from } from "rxjs";
import { GeminiConfig } from "./chat-form";
import { API_KEY_CONF } from "../config";

@Injectable({
  providedIn: "root",
})
export class DataService {
  generateContentWithGeminiPro(
    message: string,
    history: { role: string; parts: string }[],
    geminiConfig: GeminiConfig
  ) {
    const MODEL_NAME = geminiConfig.model;
    const API_KEY = geminiConfig.apiKey || API_KEY_CONF;

    async function response() {
      const genAI = new GoogleGenerativeAI(API_KEY);
      const model = genAI.getGenerativeModel({ model: MODEL_NAME });

      const generationConfig = {
        temperature: geminiConfig.temperature,
        maxOutputTokens: 2048,
      };

      const safetySettings = [
        {
          category: HarmCategory.HARM_CATEGORY_HARASSMENT,
          threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
        },
      ];

      const chat = model.startChat({ generationConfig, safetySettings, history });
      const result = await chat.sendMessage(message);
      return result.response.text();
    }

    return from(response());
  }
}

Gunakan paip ini dalam templat anda:

<span>




<hr>

<p>Untuk maklumat lanjut tentang AI dan Gemini: </p>

• Blog Google AI
• Platform AI Google
• Web Gemini

---

Artikel ini menyerlahkan potensi Gemini untuk pembangun dan kemudahan menyepadukan AI ke dalam projek bahagian hadapan. Kongsi pengalaman atau pertanyaan anda dalam ulasan!

Atas ialah kandungan terperinci Mengintegrasikan Gemini AI dalam Angular: Membina Aplikasi Sembang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!