Intégration directe d'une page web simple

Déposez une balise script sur n'importe quelle page — aucune étape de build, aucun framework — et appelez l'API depuis une page HTML statique ou générée côté serveur.

Ceci concerne une page HTML simple — générée côté serveur, statique, ou une balise <script> déposée sur n’importe quel site, sans étape de build, sans framework. Vous utilisez React à la place ? Voir Intégration React SPA. Vous ne savez pas quel guide correspond à votre stack ? Voir Choisissez votre parcours d’intégration.

La démo la plus rapide possible

Une balise script et quelques lignes de JavaScript — le moyen le plus rapide de voir un vrai appel réussir. Il vous faut d’abord une vraie x-api-key (voir plus bas d’où elle vient — c’est une clé différente de la paire client_id/client_secret d’Obtenez votre clé API).

1. Ajoutez la balise script

<script src="https://js.quravin.com/v1.js"></script>

2. Créez le client et appelez ai.run()

<button id="go">Translate</button>
<div id="out"></div>

<script>
  const ai = new Quravin.Quravin({
    endpoint: "https://api.quravin.com",
    apiKey:   "YOUR_API_KEY",
  });

  document.getElementById("go").onclick = async () => {
    const out = await ai.run({
      pipeline: "translate-string",
      inputs: { text: "Hello", target_language: "de" },
    });
    document.getElementById("out").textContent = out.translation;
  };
</script>

Cliquez sur le bouton — out contient { translation: "Hallo" }. C’est un aller-retour complet : soumission, polling, terminé. endpoint est l’URL de base de votre API sans chemin supplémentaire — n’ajoutez rien après le domaine.

Où obtenir une clé API ?

Une x-api-key statique est un identifiant distinct, en libre-service, par rapport à la paire client_id/client_secret — ouvrez la page de détail de votre application dans la Console et cliquez sur Regenerate API Key. Voir la section « Qu’en est-il d’une x-api-key statique ? » d’Obtenez votre clé API pour plus de détails.

Cet extrait n’est utile que pour des tests locaux rapides — ne mettez jamais une vraie apiKey dans du code exécuté dans le navigateur. Passez à la section suivante pour la version sûre, prête pour la production.

En production : utilisez plutôt un session token

Ne mettez jamais une x-api-key statique dans une page téléchargée par le navigateur de vos utilisateurs. N’importe qui peut la lire dans le code source de la page et l’utiliser comme si elle était vous. Le schéma sûr pour la production : votre propre backend crée un session JWT de courte durée, propre à chaque utilisateur, et le transmet à la page — la page ne voit jamais un secret qui survit à une seule visite.

Construire cet endpoint backend est identique quel que soit le langage dans lequel il est écrit — Intégration serveur Node.js montre un exemple complet et fonctionnel (la requête POST /auth/token qu’il effectue est du simple HTTP, donc n’importe quel langage backend fait la même chose). Une fois que vous avez un endpoint de token, le côté navigateur ressemble à ceci :

<input id="text" />
<button id="go">Translate</button>
<span id="result"></span>

<script src="https://js.quravin.com/v1.js"></script>
<script>
  const fetchToken = async () => {
    const r = await fetch("/ai-token", { credentials: "include" });
    if (!r.ok) throw new Error("Token fetch failed");
    return (await r.json()).token;
  };

  const ai = new Quravin.Quravin({
    endpoint: "https://api.quravin.com",
    sessionToken: await fetchToken(),
    onTokenExpired: fetchToken,   // auto-refreshes when the API returns 401
  });

  document.getElementById("go").onclick = async () => {
    const out = await ai.run({
      pipeline: "translate-string",
      inputs: { text: document.getElementById("text").value, target_language: "de" },
    });
    document.getElementById("result").textContent = out.translation;
  };
</script>

fetch("/ai-token", { credentials: "include" }) est un appel de même origine vers votre propre backend — aucun CORS impliqué, juste votre session habituelle basée sur les cookies. Voir Choisissez votre mode d’authentification pour la comparaison complète apiKey/sessionToken, et Référence des outils pour les entrées de chaque outil et les erreurs que chaque chemin peut retourner.