AI Di Web: Cara Memasukkan API key AI Studio ke dalam web Anda

AdaTV

Feb 5, 2025

www.ilov.eu.org | AI

Langsung saja iya. Berikut ini adalah skrip HTML dasar yang bisa Anda gunakan untuk memasukkan API key AI Studio ke dalam web Anda. Ada beberapa cara untuk melakukannya, tergantung bagaimana Anda ingin menggunakan kunci tersebut:

1. Menyimpan Kunci Langsung di HTML (TIDAK DISARANKAN untuk produksi):

      <!DOCTYPE html>
<html>
<head>
  <title>Halaman dengan API Key</title>
  <script>
    const apiKey = "YOUR_AI_STUDIO_API_KEY"; // Ganti dengan kunci Anda

    // Contoh penggunaan (misalnya, dalam sebuah fungsi):
    function fetchDataFromAIStudio() {
      // Gunakan apiKey di sini untuk membuat permintaan ke AI Studio API
      console.log("Menggunakan API Key:", apiKey);
      // ... kode Anda untuk berinteraksi dengan API ...
    }

    // Anda bisa memanggil fungsi ini saat tombol ditekan, halaman dimuat, dll.
    // Contoh:  <button onclick="fetchDataFromAIStudio()">Ambil Data</button>
  </script>
</head>
<body>
  <h1>Contoh Penggunaan API Key</h1>
  <p>Buka console (F12) untuk melihat output.</p>
</body>
</html>

PENTING: Menyimpan API key langsung di HTML sangat tidak disarankan untuk situs web yang di-deploy ke publik (produksi). Siapa pun yang melihat kode sumber halaman Anda bisa mendapatkan kunci tersebut. Ini hanya cocok untuk pengembangan lokal atau jika Anda sangat yakin dengan keamanannya.

2. Menggunakan Variabel Lingkungan (Environment Variable) (DISARANKAN):

Cara yang lebih aman adalah dengan menggunakan variabel lingkungan. Ini berarti Anda menyimpan kunci API di luar kode sumber Anda. Cara ini bervariasi tergantung pada:

Jika Anda menggunakan JavaScript sisi klien (seperti di atas) tanpa server:

Anda tidak bisa langsung mengakses variabel lingkungan di browser. Anda perlu perantara. Ada beberapa opsi:

Framework JavaScript (React, Vue, Angular, dll.): Framework ini sering memiliki cara untuk menangani variabel lingkungan saat build, tetapi kunci tersebut masih akan terekspos di sisi klien pada akhirnya.

Netlify/Vercel/Layanan serupa: Layanan hosting seperti Netlify dan Vercel memungkinkan Anda mengatur variabel lingkungan di pengaturan proyek mereka. Variabel-variabel ini kemudian dapat disuntikkan ke dalam kode Anda selama proses build (tetap terekspos di sisi klien).

Serverless Functions (Direkomendasikan untuk keamanan): Ini adalah cara terbaik untuk sisi klien murni. Anda membuat fungsi serverless (misalnya, dengan Netlify Functions, AWS Lambda, Google Cloud Functions, Azure Functions) yang menyimpan kunci API dengan aman. Kode JavaScript di halaman web Anda kemudian memanggil fungsi serverless ini, yang pada gilirannya membuat permintaan ke AI Studio API. Kunci API tidak pernah terekspos di browser.

Jika Anda menggunakan server (Node.js, Python, PHP, dll.):

Anda dapat menyimpan API key dalam variabel lingkungan di server Anda. Cara mengaturnya bervariasi tergantung sistem operasi server dan bahasa pemrograman yang Anda gunakan. Contoh:

Node.js:

      // Di server Node.js Anda
const apiKey = process.env.AI_STUDIO_API_KEY; // Ambil dari variabel lingkungan

// Gunakan apiKey untuk berinteraksi dengan AI Studio API

Anda perlu mengatur variabel lingkungan AI_STUDIO_API_KEY di server Anda (misalnya, menggunakan file .env, pengaturan sistem, atau pengaturan di platform hosting Anda).

Python (contoh dengan Flask):

      from flask import Flask, request, jsonify
import os

app = Flask(__name__)

# Dapatkan API key dari environment variable
api_key = os.environ.get("AI_STUDIO_API_KEY")

@app.route('/ai-request', methods=['POST'])
def ai_request():
    # Gunakan api_key di sini untuk berinteraksi dengan AI Studio API
    # ... kode Anda ...
    return jsonify({"message": "Permintaan AI berhasil"})

if __name__ == '__main__':
    app.run(debug=True)

Anda perlu mengatur variabel lingkungan AI_STUDIO_API_KEY di server tempat Anda menjalankan aplikasi Flask ini.

Contoh Lengkap dengan Serverless Function (Netlify):

www.ilov.eu.org - ai

Ini adalah contoh konseptual bagaimana Anda bisa menggunakan Netlify Functions. Detail implementasinya mungkin berbeda.

1. Struktur Folder:

      my-project/
├── index.html
└── netlify/
    └── functions/
        └── ai-studio-request.js

2. index.html (Sisi Klien):

      <!DOCTYPE html>
<html>
<head>
  <title>AI Studio Request</title>
  <script>
    async function makeAIRequest(data) {
      const response = await fetch('/.netlify/functions/ai-studio-request', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ data: data }), // Kirim data ke fungsi
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const result = await response.json();
      console.log("Hasil dari AI Studio:", result);
      // Lakukan sesuatu dengan hasil...
    }

    // Contoh penggunaan:
    document.addEventListener('DOMContentLoaded', () => {
        const button = document.createElement('button');
        button.textContent = "Buat Permintaan ke AI Studio";
        button.addEventListener('click', () => {
             makeAIRequest({ prompt: "Buat puisi tentang kucing" });
        });
        document.body.appendChild(button);

    });

  </script>
</head>
<body>
  <h1>Contoh dengan Netlify Functions</h1>
</body>
</html>

3. netlify/functions/ai-studio-request.js (Serverless Function):

      // netlify/functions/ai-studio-request.js
const apiKey = process.env.AI_STUDIO_API_KEY; // Ambil dari variabel lingkungan Netlify

exports.handler = async (event, context) => {
  try {
    const { data } = JSON.parse(event.body); // Ambil data dari klien

    // Buat permintaan ke AI Studio API di sini, menggunakan apiKey dan data
    // Contoh (Anda perlu menyesuaikan ini dengan API AI Studio):
    const aiStudioResponse = await fetch("https://api.aistudio.google.com/...", {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data), // Gunakan data yang dikirim dari klien
    });


     if (!aiStudioResponse.ok) {
      const errorData = await aiStudioResponse.json();
      console.error("Error from AI Studio:", errorData); // Log error
      return {
        statusCode: aiStudioResponse.status,
        body: JSON.stringify({ error: "Error from AI Studio", details: errorData }),
      };
    }

    const aiStudioResult = await aiStudioResponse.json();


    return {
      statusCode: 200,
      body: JSON.stringify(aiStudioResult), // Kirim hasil kembali ke klien
    };
  } catch (error) {
    console.error("Error dalam fungsi:", error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: 'Internal Server Error', details: error.message }),
    };
  }
};

4. Pengaturan di Netlify:

Di dashboard Netlify, buka pengaturan situs Anda.

Buka bagian "Build & deploy" -> "Environment".

Tambahkan variabel lingkungan baru dengan nama AI_STUDIO_API_KEY dan isi nilainya dengan kunci API Anda.

Deploy situs Anda.

Penjelasan:

index.html: Kode JavaScript ini membuat permintaan ke /.netlify/functions/ai-studio-request. Ini adalah endpoint dari serverless function kita.

ai-studio-request.js: Ini adalah kode serverless function. Netlify akan menjalankan kode ini setiap kali ada permintaan ke endpoint tersebut. Fungsi ini:

Mengambil API key dari variabel lingkungan (process.env.AI_STUDIO_API_KEY). Kunci ini tidak terekspos ke browser.

Menerima data dari klien (melalui event.body).

Membuat permintaan ke AI Studio API (Anda perlu menyesuaikan bagian ini sesuai dengan dokumentasi AI Studio API).

Mengirimkan kembali hasil dari AI Studio ke klien.

Ringkasan:

Pilihan teraman adalah menggunakan serverless functions atau server backend yang tepat.

Jangan pernah menyimpan API key langsung di HTML yang akan di-deploy ke publik.

Sesuaikan kode di atas agar sesuai dengan struktur API AI Studio dan kebutuhan aplikasi Anda.

Pastikan untuk membaca dokumentasi resmi AI Studio untuk detail tentang cara menggunakan API mereka.

Semoga ini membantu!

AI Di Web: Cara Memasukkan API key AI Studio ke dalam web Anda

www.ilov.eu.org

AI Di Web: Cara Memasukkan API key AI Studio ke dalam web Anda

AI Di Web: Cara Memasukkan API key AI Studio ke dalam web Anda

IP perangkat Dan Kota anda saat ini terdeteksi

Donasi AdaTV

AI Di Web: Cara Memasukkan API key AI Studio ke dalam web Anda

IP perangkat Dan Kota anda saat ini terdeteksi

Tool Encrypt HTML - Layanan Gratis Untuk Para Blogger

Donasi AdaTV