Tạo nút Hỏi AI

Sử dụng Cloudflare Workers (gói Miễn phí vô cùng rộng rãi, cho phép 100.000 yêu cầu/ngày) làm "trạm trung chuyển" là giải pháp bảo mật tối ưu nhất.

Khi áp dụng phương pháp này, quy trình xử lý sẽ là: Blogger của bạn → Cloudflare Worker → Gemini API.

Người dùng xem bằng DevTools (F12) chỉ thấy URL của Cloudflare Worker chứ hoàn toàn không thấy Gemini API Key.

1. Bước 1: Tạo tài khoản & Worker trên Cloudflare: Miễn phí & không cần thẻ tín dụng.

1. Truy cập Cloudflare.com và đăng ký một tài khoản miễn phí.
2. Tại menu bên trái, chọn Workers & Pages > nhấn Create application > chọn Create Worker.
3. Đặt tên cho Worker (ví dụ: my-gemini-proxy) rồi nhấn Deploy.

2. Bước 2: Giấu API Key vào biến môi trường (Environment Variable):

Lưu trữ bảo mật.

1. Sau khi Deploy thành công, nhấn vào Settings của Worker đó.
2. Chọn mục Variables and Secrets (hoặc Variables) ở menu bên trái.
3. Tại phần Secrets, nhấn Add variable:
   • Variable name: GEMINI_API_KEY
   • Value: Dán Gemini API Key của bạn vào đây.
4. Nhấn Encrypt and Save (Mã hóa và Lưu). Lúc này Key đã được lưu an toàn phía Server của Cloudflare.

3. Bước 3: Viết mã xử lý cho Cloudflare Worker: Nhận Prompt & Gọi Gemini.

1. Quay lại trang quản lý Worker, chọn Edit code (hoặc nút Quick Edit ở góc trên bên phải).
2. Xóa toàn bộ đoạn mã mặc định và dán đoạn mã bên dưới vào:

export default {
  async fetch(request, env) {
    // Chỉ cho phép tên miền Blogger của bạn truy cập (Chống dùng chùa từ trang khác)
    const allowedOrigin = "https://ten-blog-cua-ban.blogspot.com"; // THAY TÊN MIỀN CỦA BẠN VÀO ĐÂY

    // Thiết lập Cors Headers
    const corsHeaders = {
      "Access-Control-Allow-Origin": allowedOrigin,
      "Access-Control-Allow-Methods": "POST, OPTIONS",
      "Access-Control-Allow-Headers": "Content-Type",
    };

    // Cấu hình phản hồi cho yêu cầu OPTIONS (Preflight)
    if (request.method === "OPTIONS") {
      return new Response(null, { headers: corsHeaders });
    }

    if (request.method !== "POST") {
      return new Response("Method Not Allowed", { status: 405 });
    }

    try {
      const body = await request.json();
      const userPrompt = body.prompt;

      if (!userPrompt) {
        return new Response(JSON.stringify({ error: "Thiếu nội dung prompt" }), {
          status: 400,
          headers: { ...corsHeaders, "Content-Type": "application/json" }
        });
      }

      // Lấy API Key từ Secret đã lưu ở Bước 2
      const apiKey = env.GEMINI_API_KEY;
      const geminiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${apiKey}`;

      // Gọi đến Gemini API phía Server
      const response = await fetch(geminiUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contents: [{ parts: [{ text: userPrompt }] }]
        })
      });

      const data = await response.json();

      // Trả kết quả về cho Blogger
      return new Response(JSON.stringify(data), {
        headers: { ...corsHeaders, "Content-Type": "application/json" }
      });

    } catch (err) {
      return new Response(JSON.stringify({ error: "Lỗi Server: " + err.message }), {
        status: 500,
        headers: { ...corsHeaders, "Content-Type": "application/json" }
      });
    }
  }
};

1. Nhấn Save and Deploy.
2. Copy lại đường dẫn Worker của bạn (ví dụ: [https://my-gemini-proxy.your-subdomain.workers.dev](https://my-gemini-proxy.your-subdomain.workers.dev))).

4. Bước 4: Cập nhật JavaScript trên giao diện Blogger: Cập nhật Front-end Blogger.

Thay thế đoạn mã JavaScript trong tiện ích HTML/JavaScript cũ trên Blogger thành mã mới dưới đây:

<div class="ai-search-container">
  <input type="text" id="ai-prompt-input" placeholder="Hỏi AI bất cứ điều gì..." />
  <button id="ai-submit-btn" onclick="sendPromptToAI()">Hỏi AI</button>
</div>

<div id="ai-response-box" style="margin-top: 15px; padding: 12px; border: 1px solid #ddd; background: #f9f9f9; display: none;">
  <strong style="color: #333;">Trả lời từ AI:</strong>
  <div id="ai-output" style="margin-top: 8px; white-space: pre-wrap;"></div>
</div>

<script>
async function sendPromptToAI() {
  const promptInput = document.getElementById('ai-prompt-input').value.trim();
  const outputBox = document.getElementById('ai-output');
  const responseContainer = document.getElementById('ai-response-box');
  const submitBtn = document.getElementById('ai-submit-btn');

  if (!promptInput) {
    alert('Vui lòng nhập nội dung câu hỏi!');
    return;
  }

  // ĐƯỜNG DẪN CLOUDFLARE WORKER CỦA BẠN (KHÔNG CÒN API KEY Ở ĐÂY NỮA)
  const WORKER_URL = "https://my-gemini-proxy.your-subdomain.workers.dev";

  responseContainer.style.display = 'block';
  outputBox.innerText = 'AI đang suy nghĩ, vui lòng đợi...';
  submitBtn.disabled = true;

  try {
    const response = await fetch(WORKER_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: promptInput })
    });

    const data = await response.json();

    if (data.candidates && data.candidates[0].content.parts[0].text) {
      outputBox.innerText = data.candidates[0].content.parts[0].text;
    } else {
      outputBox.innerText = 'Không nhận được phản hồi hợp lệ từ AI.';
    }
  } catch (error) {
    console.error('Lỗi kết nối:', error);
    outputBox.innerText = 'Đã xảy ra lỗi kết nối. Vui lòng thử lại!';
  } finally {
    submitBtn.disabled = false;
  }
}
</script>

Kết quả sau khi thiết lập:

• Khi người dùng mở DevTools (F12) trên trang Blogger của bạn, họ chỉ thấy duy nhất yêu cầu POST gửi tới WORKER_URL.
• API Key nằm an toàn trong Secrets của Cloudflare.
• Tên miền ngoài list allowedOrigin sẽ bị chặn ngay bởi cơ chế CORS của Worker, tránh tình trạng ai đó copy URL Worker của bạn đi dán vào trang của họ.