My HTML page with a request form for chatGPT-3 gets no answer

API
1

Hello,
I am all new to all of this (coding, AI, API…) so sorry for my ignorance and sillyness.
I would want to create an html page that would send request to chatGPT3 and that would display its answer. As it is a beginner project and that I only need to make it work for myself, everything is front end.
I got the result I want as for the page appearance but no display of any answer by chatGPT.
I created an APIkey and I still have the 5$ credit to test it.

What could be wrong, please ?

Here comes my code (I replaced the API key with some ???) :

Chat GPT-3 body { font-family: Arial, sans-serif; margin: 20px; background-color: #f4f4f4; } 
    .chat-container {
        border: 1px solid #ccc;
        padding: 10px;
        border-radius: 10px;
        max-width: 500px;
        margin: auto;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .user-message {
        background-color: #e6f7ff;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }

    .assistant-message {
        background-color: #d4edda;
        color: #155724;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
</style>
Enviar
2

Welcome to the forum. Looks like you’re missing some code.

If you haven’t yet, check out the Quick Start guide that should help.

1 Like
3

Sorry, I was asleep and did not post the right files.

10 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>ChatGPT Test</title>
</head>
<body>
 
<div>
    <h1>ChatGPT Test</h1>
    <div>
        <label for="userInput">Your message:</label>
        <input type="text" id="userInput">
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="chatDisplay"></div>
 
    <script src="script.js"></script>
</div>
 
</body>
</html>
11 
const apiKey = "???????????????????????"; // Remplacez par votre clé API
 
function sendMessage() {
    const userInput = document.getElementById("userInput").value;
    const chatDisplay = document.getElementById("chatDisplay");
 
    // Effectuer une requête API avec la clé
    fetch(`https://api.openai.com/v1/chat/completions`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
            messages: [{role: 'user', content: userInput}],
        }),
    })
    .then(response => response.json())
    .then(data => {
        // Afficher la réponse dans la fenêtre de chat
        const modelReply = data.choices[0].message.content;
        chatDisplay.innerHTML += `<p><strong>User:</strong> ${userInput}</p>`;
        chatDisplay.innerHTML += `<p><strong>ChatGPT:</strong> ${modelReply}</p>`;
    })
    .catch(error => console.error('Error:', error));
}
12 
body {
    font-family: Arial, sans-serif;
}
 
div {
    margin: 20px;
}
 
label {
    margin-right: 10px;
}
13

You have no model … here is some stand alone code,

<?php
$api_key='secret';
 $messages = [
        ["role" => "system", "content" => "You are a helpful assistant."],
        ["role" => "user", "content" => "Tell me an interesting fact in history for todays today"]
    ];

    $data = [
        'model' => 'gpt-3.5-turbo',
        'messages' => $messages,
        'max_tokens' => 300,
        'temperature' => 0.7,
    ];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://api.openai.com/v1/chat/completions");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "Content-Type: application/json",
        "Authorization: Bearer " . $api_key
    ]);

    $response = curl_exec($ch);
   print_r($response);
    if (!$response) {
        die('Error: "' . curl_error($ch) . '" - Code: ' . curl_error($ch));
    }
    curl_close($ch);
1 Like
14

Ok thank you very much.
This is Curl language, isn’t it ? I don’t know it at all.
3 questions please :
-where do I set this code ? A the root of the folder where I already wrote the other files ?
-do I wipe one of the three files I already have (html, css, js) ?
-in this curl file, if I need to write my API key, where do I type it, please ?
Thanks a lot for your interest and time !

15

Try editing your code, something like this

// Effectuer une requête API avec la clé
    fetch(`https://api.openai.com/v1/chat/completions`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
            model: "gpt-3.5-turbo", // <-- Add this
            messages: [{role: 'user', content: userInput}],
        }),
    })