SSL-Zertifikat Localhost OpenAI

l101

Neues Mitglied
Hallo liebe Community,

ich melde mich mal zu Wort, da ich langsam ehrlich verzweifle und nicht weiterkomme. Ich habe eine sehr gute Idee für eine App, aber ich habe nur sehr begrenzte Kenntnis von Informatik und Coden. Es soll eine AI werden also ein ChatBot der auf OpenAi API basiert. Dafür gibt es ja einige Videos, in denen man parallel mitprogrammieren kann. Der Kollege im Video konnte seine Anwendung dann starten, es öffneten sich zwei seiten bei Chrome, eine localhost Seite, auf der der Nutzer mit dem Bot interagieren kann und eine Seite, die den Server darstellte und an sich nichts wirklich anzeigte. Ich hab ihm alles nachprogrammiert und ich konnte etwas eintippen, der Bot spuckte aber nichts aus. Ich schaute in der Konsole vom Browser nach und es kam folgendes raus:

1.) Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR
2.)Uncaught (in promise) TypeError: Failed to fetch at HTMLFormElement.handleSubmit (script.js:85:26)
-> Ausschnitt aus dem Code:
Javascript:
const response = await fetch('https://localhost:5000', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        prompt: data.get('prompt'),
    }),
});

Also zu erstens habe ich ewig recherchiert, weil ich davon echt nicht viel verstehe. Ich habe dann OpenSSL heruntergeladen und wollte es einrichten, was nicht funktioniert hat und dann Yet Another OpenSSL GUI, und ich war einfach überfordert weil ich keine Ahnung hatte was ich jetzt machen soll und wo ich es abspeichern soll und im Internet habe ich dazu nichts gefunden. Kennt sich jemand mit der Problematik aus?

Also das Programm ist in javascript und mit node.js, dotenv und express und allem, aber wie gesagt, weiter komme ich nicht

Vielen Dank schonmal im Voraus :) l101
 
Zuletzt bearbeitet von einem Moderator:
Brauchst du denn überhaupt HTTPS? Du rufst deinen localhost-Server ja aktuell über HTTPS auf, was i.d.R. nicht nötig ist.

Wenn du dir das Ganze sparen kannst, musst du auch nicht mit Zertifikaten und OpenSSL oder was auch immer rumhantieren.

Der Fehler besagt nämlich einfach, dass du eine über HTTPS verschlüsselte Seite aufrufst, die ein falsches oder nicht vorhandenes SSL-/TLS-Zertifikat hat.
 
Ja das habe ich auch überlegt, aber wie kann ich das als http ausgeben? Die Anleitungen im Web sind teilweise für Versionen von vor 5 Jahren für VS Code und da kam ich echt null zurecht. Kannst du mir da vielleicht weiterhelfen? LG

Und was besagt der "fetch" Fehler für jemanden, der neu auf dem Gebiet ist?
 
Rufst du den Server (localhost:5000) denn im Browser über HTTPS auf oder nicht?
Eigentlich würde ich erwarten, dass es ohne Änderungen über http funktioniert, wenn du einfach die URL im fetch änderst.


Die "fetch"-Fehlermeldung besagt grob gesagt, dass ein unbehandelter/unerwarteter Fehler des Typs TypeError in einer Promise aufgetreten ist. Konkret ist fetch fehlgeschlagen. Anschließend wird auf den Ursprung bzw. eine Position im Code verwiesen, der Stacktrace.

Die Funktion fetch gibt immer eine sogenannte Promise zurück, die letztendlich für asynchrone Abläufe genutzt wird. Bessere Erklärungen findest du sicher online, würde jetzt auch out-of-scope sein. In dem Fall wird asynchron eine HTTP-Anfrage mit fetch abgesendet und lässt sich dann mit der Promise verarbeiten. Da du den Fehlerfall hier nicht abdeckst, sondern mit await lediglich wartest, bis die Daten erfolgreich zurückgeliefert wurden, steht da "uncaught in promise".
 
Super, danke für die Antwort, ich hätte die URL natürlich auf http einfach umändern können. Das habe ich übersehen. Nun erhalte ich den http Error 429. Falls du mit open ai vertraut bist, funktioniert das nur, wenn ich einen Api Key kaufe? ich habe ihn zwar eingespeißt, aber erhalte keine Antworten vom Chatbot.

und Konsolenseitig kommt folgender Error: Failed to load resource: the server responded with a status of 500 (Internal Server Error). Nur wenn du darüber etwas weißt, will hier niemandem auf die Pelle rücken.
 
Ja, ohne deinen API key kommst du nicht weiter. Was hast du denn stattdessen eingespeist? Als ich es das letzte Mal versucht hatte, gab es keinen Demokey, sondern man musste einen echten API key erstellen und benutzen.

Und 429 heißt normalerweise, dass du zu viele Anfragen in kurzer Zeit sendest. Wenn dein lokaler Server an der Stelle eine andere Antwort erwartet, könnte das den 500er-Fehler auslösen. Aber das hängt davon ab, wo der Fehler erscheint.

Hast du sonst mal überlegt, deinen Code in ChatGPT rein zu schmeißen? Du arbeistest ja sowieso schon damit und zahlst dafür.
 
Danke für die Antworten an alle. Für OpenAPI zahle ich nichts, sondern nutze die GPT 3.5 Version, die kostenlos zur Verfügung steht. Ich konnte auch den API-Key kostenlos erstellen und habe es durch eine externe .env-Datei meinem Script zur Verfügung gestellt. Man kann sich aber eine Version von GPT kaufen und dann weiß ich aber nicht, ob man erst ab diesem Kaufmoment einen Zugriff auf die OpenAI-Library Zugriff hat. Und ja, ChatGPT war mir leider keine große Hilfe, manchmal ist es doch der bessere Weg, sich noch an echte Menschen zu wenden :D

Der Quellcode für server.js:

Server.js:
import express from 'express';
import * as dotenv from 'dotenv';
import cors from 'cors';
import { Configuration, OpenAIApi } from 'openai';
dotenv.config();
const app = express();
app.use(cors());
app.use(express.json());
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
app.get('/', (req, res) => {
    res.status(200).send({
        message: 'Hello from AI',
    });
});
app.post('/', async (req, res) => {
    try {
        const prompt = req.body.prompt;
        const response = await openai.createCompletion({
            model: 'text-davinci-003',
            prompt: `${prompt}`,
            temperature: 0.8,
            max_tokens: 256,
            top_p: 1,
            frequency_penalty: 0.5,
            presence_penalty: 0,
        });
        const botResponse = response.data.choices[0].text;
        res.status(200).send({
            bot: botResponse,
        });
    } catch (error) {
        console.log(error);
        res.status(500).send({ error });
    }
});
app.listen(5000, () => console.log('Server is running on port http://localhost:5000'));

Ausschnitt-Code für script.js ist:


Script.js:
function generateUniqueId() {
    const timestamp = Date.now();
    const randomNumber = Math.random();
    const hexadecimalString = randomNumber.toString(16);
    return `id-${timestamp}-${hexadecimalString}`;
}
function chatStripe(isAi, value, uniqueId) {
    return `
        <div class = "wrapper ${isAi && 'ai'}">
          <div class="chat">
            <div class="profile">
              <img
                src="${isAi ? bot : user}"
                alt="${isAi ? 'bot' : 'user'}"
                />
            </div>
            <div class="message" id=${uniqueId}>${value}</div>
           </div>
          </div>
    `;
}
const handleSubmit = async (e) => {
    e.preventDefault();
    const data = new FormData(form);

    //users chatstripe
    chatContainer.innerHTML += chatStripe(false, data.get('prompt'));
    form.reset();

    // Bots Chatstripe
    const uniqueId = generateUniqueId();
    chatContainer.innerHTML += chatStripe(true, ' ', uniqueId); // Korrigierter Ausdruck
    chatContainer.scrollTop = chatContainer.scrollHeight;
    const messageDiv = document.getElementById(uniqueId);
    loader(messageDiv);
    // ...

    //fetch data from server -> bot's response
    const response = await fetch('http://localhost:5000', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            prompt: data.get('prompt'),
        }),
    });
    clearInterval(loadInterval);
    messageDiv.innerHTML = '';
    if (response.ok) {
        const data = await response.json();
        const parsedData = data.bot.trim();
        console.log({ parsedData });
        typeText(messageDiv, parsedData);
    } else {
        const err = await response.text();
        messageDiv.innerHTML = 'Something went wrong';
        alert(err);
    }
};

form.addEventListener('submit', handleSubmit);
form.addEventListener('keyup', (e) => {
    if (e.keycode === 13) {
        handleSubmit(e);
    }
});


Danke euch! Meint ihr es liegt am Syntax oder API_KEY?
 
Zuletzt bearbeitet von einem Moderator:
Ich würde mal auf Folgendes tippen, im Prinzip das, was Mat schon gesagt hat:

Der OpenAI Client gibt einen Fehler von HTTP 429 (too many requests) zurück, da du irgendein Limit überschritten hast.

Anschließend landest du im catch-Block deines Servers, der Fehler wird ausgegeben und dein Server gibt entsprechend den Fehler HTTP 500 zurück.

Beim Fetch deines Clients tritt dieser Fehler dort in Erscheinung, da ja keine richtige Response zurückgeliefert wird (failed to load resource ...).

Es wäre empfehlenswert, diesen Fehler auch beim Client mittels try catch abzufangen.

Ansonsten erkenne ich aber erstmal keine Fehler und würde sagen, du müsstest dich auf das Problem konzentrieren, warum OpenAI 429 zurück gibt.
 
Was sagt denn GPT dazu:
Ich > I want to use your API. I can create an API key, I found that page. Do I have to set up my billing in my account
if I'm using GPT v3.5? The API responds with HTTPException 429 (too many requests).


GPT > Yes, you will need to set up billing in your account to use the GPT-3.5 API. The HTTPException 429 error code
you are receiving indicates that you have exceeded the rate limit for your account. By default, new accounts are given
a free quota of API requests, but this quota is limited and may not be sufficient for your needs.
To avoid this error and continue using the API, you will need to upgrade your billing plan to increase your API quota.
You can do this by logging into your OpenAI account, navigating to the billing page, and selecting a plan that fits
your needs. Once you have upgraded your plan, you should be able to use the API without encountering the 429
error code.

Ich bin mir relativ sicher, dass du deine Abrechnungsdaten in deinem Account hinterlegen musst. Hatte vor kurzem versucht, ein GPT Plugin in meinem VSCode zu installieren, dort stand aber auch beschrieben, dass man das bezahlen muss. Die Browserversion ist zwar kostenlos, die Nutzung der API ist aber soweit ich weiß kostenpflichtig und wird pro Wort oder so abgerechnet glaub ich.
 
Zurück
Oben Unten