Comment créer votre propre application ChatGPT

Je vais vous montrer comment créer une application web qui utiliserait le modèle ChatGPT-3.5-turbo sous le capot. Elle ressemblera à ce chat basé sur ChatGPT mais le code ci-dessous DOIT être exécuté localement et non déployé en ligne car il exposera vos clés API.

Vue d'ensemble des étapes de construction d'une application web :

Obtenez votre clé API à partir de platform.open.ai
Créez un nouveau dossier et créez un fichier index.txt
Copiez-collez le code ci-dessous (intitulé index.txt)
Créez dans le même dossier que index.txt le fichier app.txt et copiez-collez le code ci-dessous (intitulé app.txt)
Dans app.txt, remplacez YOUR_API_KEY (à deux endroits) par votre clé API.
Renommez vos fichiers index.txt et app.txt en index.html et app.js, respectivement.
Double-cliquez sur le fichier index et commencez à chatter

ALLER À : https://platform.open.ai

I. Obtenez votre clé API

Illustration sur la façon de créer des clés d'API OpenAI

II. Créez un nouveau dossier et créez-y un fichier index.txt (plus tard, vous devrez y placer le fichier app.js comme suit).

Image d'un dossier Window contenant les fichiers index.txt et app.txt qui contiennent le code du chatbot basé sur ChatGPT

III. Copier-coller le code ci-dessous

Code à copier dans index.txt for ChatGPT interface . Rechercher (CTRL+F) Code pour : copier dans index.txt

puis copier en commençant par : <!DOCTYPE html> et en terminant par </html>.

Enregistrer le fichier sous le nom index.txt

IV. Dans le même dossier, créez un fichier app.txt et copiez-collez le code ci-dessous:

Code pour le fichier app.txt

 
  document.addEventListener('DOMContentLoaded', () => {
    let past_conversations = [];

    document.getElementById('chat-form').addEventListener('submit', async (event) => {
        event.preventDefault();

        const userInput = document.getElementById('user-input').value;
        past_conversations.push({ role: 'user', content: userInput });

        const pleaseWait = document.getElementById('please-wait');
        const chatGPTResponseElement = document.getElementById('chatgpt-response');

        pleaseWait.style.display = 'block';
        chatGPTResponseElement.innerText = '';

        try {
            const chatGPTResponse = await getChatGPTResponse(past_conversations);
            past_conversations.push({ role: 'assistant', content: chatGPTResponse });
            chatGPTResponseElement.innerText = chatGPTResponse;
        } catch (error) {
            chatGPTResponseElement.innerText = 'Error: Could not fetch the response.';
        } finally {
            pleaseWait.style.display = 'none';
        }
    });
});

async function getChatGPTResponse(past_conversations) {
    const apiKey = 'YOUR_API_KEY';
    const url = 'https://api.openai.com/v1/chat/completions';

    const headers = new Headers({
        'Content-Type': 'application/json',
        'Authorization': `Bearer apiKey`,
    });

    const body = JSON.stringify({
        'model': 'gpt-3.5-turbo-0301',
        'messages': past_conversations,
        'temperature': 0.7,
    });

    const response = await fetch(url, {
        method: 'POST',
        headers: headers,
        body: body,
    });

    if (response.ok) {
        const data = await response.json();
        const assistantMessage = data.choices[0].message;
        return assistantMessage ? assistantMessage.content.trim() : '';
    } else {
        throw new Error(`Error: ${response.status}`);
    }
}

V. Dans le fichier app.txt, remplacez YOUR_API_KEY (à deux endroits) par votre clé API.

VII. Double-cliquez sur index.html et commencez à discuter avec GPT-3.5-turbo

Vous pouvez également faire un clic droit sur index.html et le lancer, par exemple dans Chrome.

Image d'un dossier Window contenant les fichiers index.html et app.js (après avoir renommé) qui contiennent le code du chatbot basé sur ChatGPT

Voilà, c'est fait. L'application est terminée.

Elle fonctionnera localement sur votre ordinateur. Pour la partager avec d'autres, l'application web doit être déployée sur un serveur, par exemple sur GitHub gratuitement. J'en parlerai dans un autre article

Le résultat ressemblerait à ce qui suit :

 
 
 

    
    
    ChatGPT App


    
    ChatGPT App
    
        Votre question (vous pouvez séparer les lignes de texte en appuyant sur la touche ENTER) :
        

        
        

        
    
    Réponse de ChatGPT
    
        
        Veuillez patienter...

Là encore, cette interface ChatGPT n'est destinée qu'à un usage local. Ne la déployez PAS sur un serveur public ou vos clés API seront exposées.

Search This Blog

datapublication