Récemment, ChatGPT est devenu extrêmement populaire. Les gens demandent à ChatGPT de les aider avec leurs essais, leurs devoirs ou même comment ils peuvent gagner de l’argent. Avec une idée similaire, je pense qu’il serait intéressant de construire une application de salon de discussion en consultant ChatGPT.
Pour commencer avec quelque chose de simple, je prévois de créer une application Web de chat qui permet aux utilisateurs de saisir leurs messages et d’avoir une conversation avec ChatGPT. L’application résultante ressemblera à ceci :
Je vais d’abord comprendre comment je peux intégrer ChatGPT, car c’est nouveau pour moi. Ensuite, je construirai l’interface utilisateur et implémenterai la logique et les actions pour terminer l’ensemble de l’application.
Vous ne savez pas comment appeler ChatGPT ? Demandez-le simplement
Je suis nouveau sur ChatGPT et je ne sais pas comment appeler ChatGPT, alors une idée m’est venue à l’esprit. Pourquoi ne pas simplement demander à ChatGPT ?
Alors je pose ma première question :
Pouvez-vous me donner un exemple de code en java pour envoyer une requête HTTP à ChatGPT pour envoyer un message ?
Ensuite, ChatGPT m’a répondu avec un exemple de classe Java qui se connecte à https://api.openai.com/v1/engines/davinci-codex/completions et m’a rappelé de remplacer YOUR_API_KEY avec ma propre clé API.
C’était utile. Un bon début!
Alors je demande :
Où puis-je obtenir la clé API ?
ChatGPT m’a fourni des informations connexes, que je résume ici :
- Allez sur le site Web d’OpenAI.
- Créez un compte ou connectez-vous si vous en avez déjà un.
- Une fois connecté, accédez à la section Clés API de la console.
- Cliquez sur le bouton « Créer une clé ».
- Donnez un nom à votre clé API et spécifiez les projets avec lesquels vous souhaitez l’utiliser.
- Cliquez sur « Créer » pour générer la clé API.
- Enregistrez la clé API dans un endroit sûr, car elle ne sera affichée qu’une seule fois.
Cela semble prometteur. Mais lorsque j’ai exécuté l’exemple de code Java, l’API a renvoyé le code 429, ce qui n’était pas ce à quoi je m’attendais. Après vérification de la doc, il semble l’URL était erronée.
Alors je reformule ma question :
Comment appeler le modèle OpenAI GPT-3 en Java ?
Il m’a répondu avec un autre code qui se connecte ici.
Après avoir cliqué sur le lien donné, j’ai trouvé que l’URL est obsolète. J’ai donc gentiment dit à ChatGPT :
Le document Open AI sur https://beta.openai.com/docs/api-reference/engines mentionne que les points de terminaison Engines sont obsolètes.
ChatGPT a dit « Vous avez raison » et m’a donné un autre code avec l’URL correcte. Leçon apprise! Ne faites pas toujours confiance à la réponse de ChatGPT.
En exécutant le code cette fois, j’ai finalement obtenu la réponse JSON attendue.
Comme j’étais trop paresseux pour vérifier le champ JSON pour obtenir la réponse textuelle réelle, j’ai posé une autre question :
Comment extraire le « texte » de la réponse de l’API OpenAI en Java ?
Et encore une fois, j’ai obtenu quelque chose d’utile de ChatGPT.
Avec toute l’aide de ChatGPT et en refactorisant la classe Java en plusieurs méthodes, je termine ChatService qui appelle l’API OpenAI pour recevoir des suggestions d’achèvement de chat. L’idée de base est de créer un HttpURLConnection par exemple, envoyez un POST demande au point de terminaison de l’API OpenAI (https://api.openai.com/v1/completions) avec un corps de demande JSON qui inclut l’invite de chat et d’autres paramètres pertinents et reçoit la réponse de l’API au format JSON. J’ai inclus les détails techniques ici.
public class ChatService {
static final String API_KEY = loadApiKey();
private HttpURLConnection con;
private URL url;
public ChatService() {
try {
url = new URL("<https://api.openai.com/v1/completions>");
}catch (MalformedURLException e){
throw new IllegalStateException(e);
}
}
public String prompt(String message) {
try {
sendRequest(message);
return readResponse().trim().replace("\\n\\n", "\\n");
} catch (IOException e) {
e.printStackTrace();
return e.toString();
}
}
private void sendRequest(String prompt) throws IOException {
initHttpURLConnection();
String requestBody = "{\\"model\\": \\"text-davinci-003\\", \\"prompt\\": \\"" + prompt + "\\", \\"temperature\\": 0.5, \\"max_tokens\\": 2048}";
con.setDoOutput(true);
DataOutputStream wr = new DataOutputStream(this.con.getOutputStream());
wr.writeBytes(requestBody);
wr.flush();
wr.close();
}Le prompt() envoie une invite de chat à l’API et reçoit une suggestion d’achèvement.
Le sendRequest() met en place HttpURLConnection et envoie le corps de la requête JSON à l’API.
private String readResponse() throws IOException {
int responseCode = this.con.getResponseCode();
BufferedReader in = new BufferedReader(new InputStreamReader(this.con.getInputStream()));
String inputLine;
StringBuffer response = new StringBuffer();
while ((inputLine = in.readLine()) != null) {
response.append(inputLine);
}
JsonParser parser = new JsonParser();
JsonElement jsonElement = parser.parse(response.toString());
JsonObject jsonObject = jsonElement.getAsJsonObject();
JsonArray jsonArray = jsonObject.getAsJsonArray("choices");
JsonObject firstChoice = jsonArray.get(0).getAsJsonObject();
in.close();
con.disconnect();
return firstChoice.get("text").getAsString();
}Le readResponse() lit la réponse JSON de l’API et récupère la suggestion d’achèvement de l’objet JSON.
Vous trouverez plus d’informations sur l’API d’OpenAI et le point de terminaison d’achèvement dans la documentation officielle de l’API OpenAI.
Après avoir découvert la plus grande inconnue – l’intégration ChatGPT, en demandant GPT, je suis prêt à l’intégrer dans mon application Web.
Avec ChatService prêt, j’ai maintenant besoin d’une interface utilisateur pour permettre aux utilisateurs finaux de saisir leur message. Depuis que je travaille avec ZK Framework depuis longtemps, j’ai décidé d’utiliser ZK et zul pour créer l’interface utilisateur.
Construire une interface utilisateur avec des composants ZK
Si vous n’avez jamais entendu parler de ZK, il s’agit d’un framework d’interface utilisateur qui vous permet de créer des applications Web en Java. ZK fournit un langage ZUL qui apporte une large gamme de composants pour la construction de l’interface utilisateur, des éléments de base comme les étiquettes, les boutons et les zones de texte, aux composants avancés comme une grille, un arbre et un graphique. En plus de ces composants, ZUL fournit également un ensemble d’attributs qui peuvent être utilisés pour personnaliser le comportement et l’apparence des composants.
L’application de salon de discussion que je vais créer ressemble à ceci :
Cette interface utilisateur peut être réalisée avec le zul ci-dessous :
<zk xmlns:h="native">
<style src="https://dzone.com/articles/style.css"></style>
<window vflex="1" sclass="container">
<h:h1 style="text-align: center;">Chat with AI</h:h1>
<checkbox label="fast response"></checkbox>
<hlayout vflex="1">
<div hflex="7" vflex="1">
<div vflex="1" sclass="messageBox" style="overflow-y: auto">
</div>
<hlayout>
<textbox id="myMessage" focus="true" hflex="1" placeholder="type your messages here"></textbox>
<button id="send" iconSclass="z-icon-send" width="100px"></button>
</hlayout>
</div>
</hlayout>
</div>
</zk>hflex et vflex
Dans le code ZUL ci-dessus, j’utilise <hlayout> pour définir la disposition horizontale de ma salle de discussion. Le <hlayout> a 2 attributs, hflex et vflex, qui détermine la taille relative des composants. La valeur de hflex détermine la hauteur, tandis que la valeur de vflex détermine la largeur. Dans ce cas, j’utilise hflex="1" préciser que le premier <div> doit occuper une unité de l’espace horizontal et hflex="7" préciser que la seconde <div> devrait occuper 7 unités de l’espace horizontal. Cela peut rendre la disposition de la salle de discussion réactive pour la plupart des largeurs d’écran car elle n’a pas de largeur fixe.
zone de texte
Le <textbox>est utilisé pour créer le champ de saisie de texte dans la salle de discussion. Je utilise l id pour lui donner un identifiant unique, qui peut être utilisé pour référencer la zone de texte dans ma classe composer (expliquez dans le dernier paragraphe). Le focus l’attribut est défini sur true pour forcer la zone de texte à recevoir le focus lorsque la page est chargée. Le placeholder L’attribut est utilisé pour fournir un indice aux utilisateurs finaux sur l’objectif de la zone de texte.
Mélanger les balises HTML
Dans un fichier ZUL, les balises HTML peuvent être utilisées dans l’espace de noms ZUL, spécifié comme xmlns:h="native". Ensuite, la balise <h:h1> indique une balise d’en-tête HTML. Avec l’espace de noms, vous pouvez utiliser des balises HTML, telles que des titres, des liens et des images, dans leurs pages ZUL pour ajouter de la structure et du style à leurs applications Web. Cela vous donne la possibilité d’inclure un extrait de code HTML créé par un concepteur de page Web et de créer votre propre partie personnalisée dans un fichier zul.
Diverses façons de créer une interface utilisateur
En plus d’écrire zul, vous pouvez également créer votre interface utilisateur en ZK de 2 autres manières : 1. créer une interface utilisateur en Java dans un style Swing 2. appeler des méthodes Java avec un extrait de code ZUL. J’expliquerai plus dans la section contrôleur.
Créer une expérience utilisateur unique avec CSS
Dans la section précédente, j’ai fait la mise en page de l’interface utilisateur. Maintenant, pour le rendre plus agréable, j’ai différencié mon message et la réponse de l’IA en utilisant des couleurs contrastées et des arrière-plans différents. Cela améliore non seulement l’application visuellement, mais ajoute également à la lisibilité globale de la conversation. J’ai également ajouté des marges et un rembourrage appropriés à la boîte de message pour créer une mise en page visuellement attrayante et bien organisée. Tout cela peut être réalisé en utilisant CSS.
Dans cette section, je parlerai un peu des bases du style d’une page ZUL avec CSS, y compris l’utilisation du <style> étiquette, la sclass et style attributs, et les iconSclass attribut.
Le <style> permet de définir les styles CSS pour une page ZUL. Vous pouvez inclure un fichier CSS directement dans votre ZUL avec le src attribut, comme dans l’extrait de code ci-dessus. Les styles définis dans ce fichier peuvent ensuite être appliqués aux composants de votre ZUL à l’aide de la sclass .
Le sclass L’attribut est utilisé pour appliquer la classe CSS aux composants. Dans le zul ci-dessus, le container classe s’applique au <div> composant avec le sclass="container"…