CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

Javascript entre 2 sites

Ass2Trefle
Ass2Trefle
Niveau 70
04 janvier 2023 à 22:33:19

Bonsoir,

Tout d'abord, je n'ai presque aucune connaissance en programmation (on va partir de ce principe là)

Je sais qu'il existe des scripts codés en javascript permettant la création d'extensions sur chrome.

je souhaitais savoir, s'il était possible qu'un script face des requêtes directement sur un autre site.

Par exemple :

J'écris un message sur ce forum et je veux créer une touche qui

1) sélectionne mon message
2) copie mon message sur https://www.deepl.com/fr/translator
3) efface mon message et le remplace par le texte traduit en anglais

(ceci n'est qu'un exemple, ce n'est pas ce que je souhaite faire)

Cela vous semble-t-il réalisable ?

lokilok
lokilok
Niveau 16
04 janvier 2023 à 22:35:03

Oui.

Ass2Trefle
Ass2Trefle
Niveau 70
04 janvier 2023 à 22:37:38

Le 04 janvier 2023 à 22:35:03 lokilok a écrit :
Oui.

Dans ce cas là, je vais me renseigner plus à ce sujet.

Au final, ce n'est qu'un échange de "string"

Juste, je n'étais pas sur qu'un script puisse agir sur un autre site en tâche de fond quoi.

Laplace7CD
Laplace7CD
Niveau 27
04 janvier 2023 à 22:38:36

Ça me semble réalisable,

Après plutôt qu’un site pour la traduction il faudrait utiliser une api, c’est à dire une url auquel tu fournis une information comme le texte à traduire et qui te retourne une réponse le texte traduit.

Bien sûr ici je prend en exemple ton exemple mais c’est transposable à n’importe quoi, il existe des api pour tout.

Question de facilité j’écrirai le script dans l’extension chrome Tampermonkey. Il permet d’appliquer du JavaScript sur une page précise.

Ass2Trefle
Ass2Trefle
Niveau 70
04 janvier 2023 à 22:41:26

Le 04 janvier 2023 à 22:38:36 Laplace7CD a écrit :
Ça me semble réalisable,

Après plutôt qu’un site pour la traduction il faudrait utiliser une api, c’est à dire une url auquel tu fournis une information comme le texte à traduire et qui te retourne une réponse le texte traduit.

Bien sûr ici je prend en exemple ton exemple mais c’est transposable à n’importe quoi, il existe des api pour tout.

Question de facilité j’écrirai le script dans l’extension chrome Tampermonkey. Il permet d’appliquer du JavaScript sur une page précise.

Je pensais justement à tampermonkey, donc c'est parfait.

Et donc une api, ça me semble être la réponse.

Cependant, si je n'ai pas l'api, je vais devoir me débrouiller autrement.

Merci.

Impaloupa
Impaloupa
Niveau 11
05 janvier 2023 à 09:29:53

Salut !

Oui c'est possible mais ton script ne va pas "visiter" un autre site. Il contacte une API mise à disposition par les éditeurs du service pour pouvoir faire communiquer deux applications.

Par exemple, tu as pris comme exemple DeepL. Les éditeurs de DeepL ont mis à disposition une API à destination des développeurs d'autres produits afin qu'ils puissent intégrer les fonctionnalités de DeepL à leur application. Les API sont spécifiées par l'éditeur et sont souvent accompagnées de documentation permettant de comprendre comment interagir avec. Exemple pour DeepL: https://www.deepl.com/docs-api

Comment intégrer une API? En général, dans le monde du Web, ça se traduit souvent par une requête HTTP contenant des arguments (dans l'exemple DeepL, les arguments seront certainement la langue de sortie souhaitée et le texte à traduire). La réponse contiendra le texte traduit. Il suffit donc de comprendre comment transmettre une requête HTTP et traiter la réponse via ton code JavaScript. Attention, il peut exister des contraintes à exécuter des requêtes "cross-site" (voir CORS).

Ass2Trefle
Ass2Trefle
Niveau 70
05 janvier 2023 à 13:49:31

Ok, merci pour cette réponse.

Je me suis pas encore vraiment plongé dedans. Mais, visiblement, ça va pas trop être possible car il n'y a pas vraiment une API pour ce que je voulais faire.

Ce n'est pas grave de toute façon.

Impaloupa
Impaloupa
Niveau 11
05 janvier 2023 à 14:30:39

Le 05 janvier 2023 à 13:49:31 :
Ok, merci pour cette réponse.

Je me suis pas encore vraiment plongé dedans. Mais, visiblement, ça va pas trop être possible car il n'y a pas vraiment une API pour ce que je voulais faire.

Ce n'est pas grave de toute façon.

Je t'en prie. J'ajoute quand même un complément d'information:

Le fait que la webapp à laquelle tu veux t'intégrer propose une API documentée c'est un moyen sûr et flexible d'interagir avec elle. Après, ce n'est pas l'unique solution. En inspectant et en comprenant le fonctionnement des requêtes générées par le site avec lequel tu veux communiquer, tu pourrais trouver un moyen d'interagir avec lui (vu que dans le monde du web, pratiquement tout transite par des requêtes HTTP destinées aux serveurs). Mais ta solution sera probablement "bancale" et le moindre changement dans l'application de l'éditeur fera que ton intégration ne fonctionnera plus. De plus, il peut y avoir, si le site demande une authentification, des aspects de gestion de session qui seront pénibles voir impossibles à gérer.

Par contre, sans connaissance en programmation Web, cet exercice sera probablement trop compliqué.

A+

Message édité le 05 janvier 2023 à 14:34:20 par Impaloupa
Pseudo supprimé
Pseudo supprimé 06 janvier 2023 à 20:24:19

Attention, il peut exister des contraintes à exécuter des requêtes "cross-site" (voir CORS).

Dans le cadre d’une extension ça peut s’outrepasser.

Ass2Trefle
Ass2Trefle
Niveau 70
10 janvier 2023 à 23:56:10

Bon bah, j'ai bcp avancé dans mon mini projet mais je crois que je suis tombé sur une impasse https://image.noelshack.com/fichiers/2016/38/1474490235-risitas434.png

A la base, je voulais juste envoyer des messages à une IA (de type chatbot) et avoir en retour sa réponse.

Naïvement, je pensais que je pouvais faire simplement ça, alors j'ai voulu tester avec le site https://beta.character.ai/ , ça aurait été l'idéal. En me renseignant un peu, il s'avère qu'il n'y a toujours pas d'API disponible. (voir bas de page : https://beta.character.ai/community )

J'ai donc recherché un peu ailleurs ( https://replika.com/ ; https://chai.ml/ ), mais voilà, ce que j'ai compris au final c'est que je dois utiliser la méthode fetch() mais je n'ai pas d'url API https://image.noelshack.com/fichiers/2017/07/1487382298-risitasdepressif.png

lokilok
lokilok
Niveau 16
11 janvier 2023 à 12:32:01

L'API c'est le plus simple mais c'est pas obligatoire. S'il y en a pas de public tu dois faire du reverse engineering sur la partie client du site pour comprendre comment il fonctionne, puis simuler ce client de ton côté. Tant qu'il y a pas de captcha en général c'est pas trop trop compliqué.

Impaloupa
Impaloupa
Niveau 11
11 janvier 2023 à 17:24:05

En prenant https://beta.character.ai/ j'ai réussi à établir la communication via une requête HTTP POST.

Voici la marche à suivre:

1) Comprendre le fonctionnement. Pour ce faire, j'ai démarré un chat avec Mario (Nintendo). Je lui ai envoyé un message en ayant ouvert au préalable l'inspection des appels transmis par le navigateur pour comprendre comment était composée la requête HTTP. Ce que j'ai appris:

  • On voit que la requête exécutée est un POST vers https://beta.character.ai/chat/streaming/
  • On voit que le corps de la requête contient, entre autres, les informations permettant de définir quel est le personnage choisi, l'identifiant vers l'historique de conversation et, surtout, le texte que tu envoies à l'IA. Voici le modèle:
{
    "history_external_id": "-",
    "character_external_id": "OYYf4iM6fjt9eZ72oXRsY3UGPeXd9Y-uJwfAjF5JAwk",
    "text": "goodmorning",
    "tgt": "-",
    "ranking_method": "random",
    "staging": false,
    "model_server_address": null,
    "override_prefix": null,
    "override_rank": null,
    "rank_candidates": null,
    "filter_candidates": null,
    "prefix_limit": null,
    "prefix_token_limit": null,
    "livetune_coeff": null,
    "stream_params": null,
    "enable_tti": true,
    "initial_timeout": null,
    "insert_beginning": null,
    "translate_candidates": null,
    "stream_every_n_steps": 16,
    "chunks_to_pad": 8,
    "is_proactive": false,
    "image_rel_path": "",
    "image_description": "",
    "image_description_type": "",
    "image_origin_type": "",
    "voice_enabled": false,
    "parent_msg_id": null,
    "seen_msg_ids": []
}

Tu vois dans l'attribut "text" que j'ai envoyé "goodmorning". L'attribut "character_external_id" défini qui est le personnage avec qui je communique. Le reste ça sert principalement à paramétrer les réponses et comment tu les reçois. J'ai caché certaines informations qui sont liées à ma session avec le site (history_external_id et tgt).

  • J'ai aussi remarqué qu'il y avait un header Authorization. Je pense qu'une session anonyme est créée quand tu rentres sur le site. Et là c'est un peu plus embêtant du coup parce que sans token d'authentification, ta requête est rejetée (erreur 401). Il faudrait créer cette session via un autre appel. Pour ce faire il faut investiguer un peu plus, mais je n'irai pas plus loin.

2) Ensuite, avec toutes les informations recueillies, j'ai transmis l'appel HTTP, comme c'est fait sur le navigateur, mais depuis un client Postman. Si tu peux le faire depuis Postman, tu peux le faire depuis n'importe où. C'est juste un outil qui permet d'envoyer des requêtes HTTP. J'ai reçu le genre de réponse suivant:

{
    "replies": [
        {
            "text": "Good morning! How are you doing? I am doing great! I love greeting"
        },
        {
            "text": "Good morning to you too! What\u2019s up this morning? I have a"
        }
    ],
    "src_char": {
        "participant": {
            "name": "Mario from SM64"
        },
        "avatar_file_name": "uploaded/OdmDFvLBUFuixbo7nhSrf3y4YYsQWU7WWeA5feaHKOI.webp"
    },
    "is_final_chunk": false,
    "last_user_msg_id": 0
}

On voit qu'il y a deux possibilités de réponses, ils t'en donnent une des deux. On voit que les réponses sont incomplètes dans mon exemple car fournies en plusieurs parties (ajustable avec le paramètre chunks_to_pad je suppose).

Pour info: la réponse je l'ai récupérée du navigateur parce que je me suis fait bloquer par leur reverse proxy pendant mes tests et pas pu récupérer une réponse de mes test Postman :(. Ils sont protégés par CloudFare. Donc, de toute façon exploiter leur backend ne sera pas possible. Mais j'ai bien réussi à faire quelques appels en dehors de leur site, via Postman.

CONCLUSION: Donc techniquement possible mais en pratique tu vas buter sur trop de contraintes et même potentiellement te faire bloquer par leur système de sécurité. Quand l'éditeur ne fournit pas d'API, ça ne vaut souvent pas le coup d'intégrer leur programme à ton programme.

Message édité le 11 janvier 2023 à 17:26:52 par Impaloupa
MisterPhanax
MisterPhanax
Niveau 9
13 janvier 2023 à 22:58:52

Le 11 janvier 2023 à 17:24:05 :
En prenant https://beta.character.ai/ j'ai réussi à établir la communication via une requête HTTP POST.

Voici la marche à suivre:

1) Comprendre le fonctionnement. Pour ce faire, j'ai démarré un chat avec Mario (Nintendo). Je lui ai envoyé un message en ayant ouvert au préalable l'inspection des appels transmis par le navigateur pour comprendre comment était composée la requête HTTP. Ce que j'ai appris:

  • On voit que la requête exécutée est un POST vers https://beta.character.ai/chat/streaming/
  • On voit que le corps de la requête contient, entre autres, les informations permettant de définir quel est le personnage choisi, l'identifiant vers l'historique de conversation et, surtout, le texte que tu envoies à l'IA. Voici le modèle:
{
    "history_external_id": "-",
    "character_external_id": "OYYf4iM6fjt9eZ72oXRsY3UGPeXd9Y-uJwfAjF5JAwk",
    "text": "goodmorning",
    "tgt": "-",
    "ranking_method": "random",
    "staging": false,
    "model_server_address": null,
    "override_prefix": null,
    "override_rank": null,
    "rank_candidates": null,
    "filter_candidates": null,
    "prefix_limit": null,
    "prefix_token_limit": null,
    "livetune_coeff": null,
    "stream_params": null,
    "enable_tti": true,
    "initial_timeout": null,
    "insert_beginning": null,
    "translate_candidates": null,
    "stream_every_n_steps": 16,
    "chunks_to_pad": 8,
    "is_proactive": false,
    "image_rel_path": "",
    "image_description": "",
    "image_description_type": "",
    "image_origin_type": "",
    "voice_enabled": false,
    "parent_msg_id": null,
    "seen_msg_ids": []
}

Tu vois dans l'attribut "text" que j'ai envoyé "goodmorning". L'attribut "character_external_id" défini qui est le personnage avec qui je communique. Le reste ça sert principalement à paramétrer les réponses et comment tu les reçois. J'ai caché certaines informations qui sont liées à ma session avec le site (history_external_id et tgt).

  • J'ai aussi remarqué qu'il y avait un header Authorization. Je pense qu'une session anonyme est créée quand tu rentres sur le site. Et là c'est un peu plus embêtant du coup parce que sans token d'authentification, ta requête est rejetée (erreur 401). Il faudrait créer cette session via un autre appel. Pour ce faire il faut investiguer un peu plus, mais je n'irai pas plus loin.

2) Ensuite, avec toutes les informations recueillies, j'ai transmis l'appel HTTP, comme c'est fait sur le navigateur, mais depuis un client Postman. Si tu peux le faire depuis Postman, tu peux le faire depuis n'importe où. C'est juste un outil qui permet d'envoyer des requêtes HTTP. J'ai reçu le genre de réponse suivant:

{
    "replies": [
        {
            "text": "Good morning! How are you doing? I am doing great! I love greeting"
        },
        {
            "text": "Good morning to you too! What\u2019s up this morning? I have a"
        }
    ],
    "src_char": {
        "participant": {
            "name": "Mario from SM64"
        },
        "avatar_file_name": "uploaded/OdmDFvLBUFuixbo7nhSrf3y4YYsQWU7WWeA5feaHKOI.webp"
    },
    "is_final_chunk": false,
    "last_user_msg_id": 0
}

On voit qu'il y a deux possibilités de réponses, ils t'en donnent une des deux. On voit que les réponses sont incomplètes dans mon exemple car fournies en plusieurs parties (ajustable avec le paramètre chunks_to_pad je suppose).

Pour info: la réponse je l'ai récupérée du navigateur parce que je me suis fait bloquer par leur reverse proxy pendant mes tests et pas pu récupérer une réponse de mes test Postman :(. Ils sont protégés par CloudFare. Donc, de toute façon exploiter leur backend ne sera pas possible. Mais j'ai bien réussi à faire quelques appels en dehors de leur site, via Postman.

CONCLUSION: Donc techniquement possible mais en pratique tu vas buter sur trop de contraintes et même potentiellement te faire bloquer par leur système de sécurité. Quand l'éditeur ne fournit pas d'API, ça ne vaut souvent pas le coup d'intégrer leur programme à ton programme.

Ceci

Sous forums
  • Aide à l'achat Mac
  • Macintosh
  • Création de Jeux
  • Programmation
  • Création de sites web
  • Linux
  • Internet
  • Steam Deck
  • Hardware
La vidéo du moment