Rechtschreibprüfung mit chatGPT in Website einbauen
Hier zeige ich dir, wie du ChatGPT dazu nutzen kannst, deine Formulare in deiner Website auf Rechtschreibfehler zu korrigieren.
PS: Hier gibt es das ganze zum Download. Darf gerne weiter verteilt werden: Download ZIP.
Was wir dafür brauchen
- Ein input Feld in einem Formular -> index.php
- eine JavaScript Datei ->index.js
- eine PHP Datei die Kontakt zur chatGPT API aufnimmt -> chatgpt.php
Zuerst erstellen wir uns ein Formular, in dem wir einen falschgeschriebenen Titel einfügen. Dort binden wir natürlich die index.js ein, damit wir die JavaScript Funktion mit dem Button aufrufen können.
<script src="index.js"></script>
<form>
<div class="mb-3">
<label for="beitragstitel" class="form-label">Beitragstitel</label>
<input type="text"
class="form-control"
name="beitragstitel"
id="beitragstitel"
value="ich bin ien falsh geschrieben title" required>
</div>
<button class="btn btn-primary btn-sm mb-2"
onclick="rechtschreibung(event, 'beitragstitel')">
Rechtschreibprüfung
</button>
</form>Hier ist die JavaScript Funktion
async function rechtschreibung(event, elementId) {
event.preventDefault(); // Verhindert das Neuladen der Seite
const element = document.getElementById(elementId);
const content = element.value;
const requestData = {
message: `Lasse den Text im Original und prüfe nur die Rechtschreibung.
Auch Leerzeilen sollen bestehen bleiben bei folgenden Text: ${content}`
};
try {
const response = await fetch("chatgpt.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(requestData)
});
if (!response.ok) {
console.error(`Server Fehler: ${response.status}`);
return;
}
const data = await response.json();
if (data.reply) {
element.value = data.reply;
} else {
console.error("Keine Antwort vom Server");
}
} catch (error) {
console.error(`Fetch Fehler: ${error}`);
}
}Und zum Schluss die chatgpt.php Um die Api abzufragen benötigst Du einen API KEY von openai. Wie du dir den erstellst, erkläre ich hier nicht extra.
<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");
$input_data = json_decode(file_get_contents("php://input"), true);
$message = $input_data['message'];
$api_key = "DEIN API KEY";
$api_url = "https://api.openai.com/v1/completions";
$headers = array(
"Content-Type: application/json",
"Authorization: Bearer $api_key"
);
$api_data = array(
"model" => "text-davinci-003",
"prompt" => $message,
"temperature" => 0,
"max_tokens" => 1000,
"top_p" => 0.9,
"frequency_penalty" => 0,
"presence_penalty" => 0.6
);
$ch = curl_init($api_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($api_data));
$response = curl_exec($ch);
if (curl_errno($ch)) {
echo json_encode(['error' => 'Curl error: ' . curl_error($ch)]);
curl_close($ch);
exit();
}
$responseData = json_decode($response, true);
curl_close($ch);
if (isset($responseData['choices'][0]['text'])) {
echo json_encode(['reply' => trim($responseData['choices'][0]['text'])]);
} else {
echo json_encode(['error' => 'Keine Antwort vom Modell']);
}Du kannst dir den Code zum testen bei den Downloads runterladen. Füge deinen API KEY in die chatgpt.php ein und teste das Ganze. Es ist bereits ein falscher Titel per Value in das Feld eingetragen. Mit Klick auf den Button, korrigiert chatGPT den Titel. PS: Der Code hat kein Anspruch auf Vollständigkeit oder Sicherheit. Benutze ihn nur, wenn du weißt, was du tust.
