Étape 6 : structurer la demande pour gemini

Dans la méthode submit de la classe ContentForm, nous allons préparer notre demande pou Gemini :

Nous allons lui demander de calculer un score SEO sur 20 pour le contenu que nous lui envoyons au format Markdown. Ce score SEO sera calculé pour une phrase de requête que nous récupérons dans le formulaire.

Version avec NPM

form.js

import { GoogleGenAI } from "@google/genai";    
  
const ai = new GoogleGenAI({apiKey: "votre-clé-api"});

export class ContentForm {
    #searchInput;
    #contentInput;
    #form;

    constructor() {
	    // mapping the class attributes to the HTML form input
        this.#form = document.querySelector("#content-form");
        this.#searchInput = document.querySelector("#seo-search");
        this.#contentInput = document.querySelector("#content");

		// listening to the form submit event
        this.#form.addEventListener("submit", (event) => this.#submit(event, this));
    }

/* JavaScript often loses the this reference when you use an event inside the class, which is why we use the that parameter */
    #submit(event, that)
    {
	    // prevent the form from reloading the page
        event.preventDefault();
        
        // display the loader modal
        let modal = document.querySelector("div.modal");
        modal.style.display = "grid";
        
        // get the key search value
        let search = that.#searchInput.value;
        
        // get the content value
        let content = that.#contentInput.value;

		// build the gemini request from the inputs
        let terms = `Bonjour, pourrais-tu me calculer un score SEO pour un contenu que je vais 
        t'envoyer en format Markdown. Les termes de recherches pour lesquels calculer sont les suivants : ${search}.
        Le contenu est le suivant : ${content}. J'aurais besoin d'une réponse synthétique au format Markdown avec un score sur 20. Merci !`;
    }
}

Version sans NPM

form.js

import { GoogleGenerativeAI as GoogleGenAI } from "https://cdn.jsdelivr.net/npm/@google/generative-ai/+esm";
  
const ai = new GoogleGenAI("votre-clé-api");

export class ContentForm {
    #searchInput;
    #contentInput;
    #form;

    constructor() {
	    // mapping the class attributes to the HTML form input
        this.#form = document.querySelector("#content-form");
        this.#searchInput = document.querySelector("#seo-search");
        this.#contentInput = document.querySelector("#content");

		// listening to the form submit event
        this.#form.addEventListener("submit", (event) => this.#submit(event, this));
    }

/* JavaScript often loses the this reference when you use an event inside the class, which is why we use the that parameter */
    #submit(event, that)
    {
	    // prevent the form from reloading the page
        event.preventDefault();
        
        // display the loader modal
        let modal = document.querySelector("div.modal");
        modal.style.display = "grid";
        
        // get the key search value
        let search = that.#searchInput.value;
        
        // get the content value
        let content = that.#contentInput.value;

		// build the gemini request from the inputs
        let terms = `Bonjour, pourrais-tu me calculer un score SEO pour un contenu que je vais 
        t'envoyer en format Markdown. Les termes de recherches pour lesquels calculer sont les suivants : ${search}.
        Le contenu est le suivant : ${content}. J'aurais besoin d'une réponse synthétique au format Markdown avec un score sur 20. Merci !`;
    }
}

21 January 2026