Heute experimentieren wir mit einem nützlichen KI-Feature, das die Bildklassifikation betrifft, d.h. ein KI-Modell, das speziell erstellt wurde, um eine schriftliche Erklärung eines Bildes über die Bild-URL zurückzugeben. Wofür kann es nützlich sein? Als erste Anwendung, zu wissen, was in einem Bild, ohne es zu öffnen; dies öffnet die Türen zu einer Reihe von anderen Anwendungen wie das Erkennen von Missbrauch oder unangemessenes Verhalten durch das Scannen einer Liste von Text-Transkriptionen von Bildern. Es ist auch nützlich, um automatisch eine Beschreibung des Bildes zu haben und es in einer Datenbank zu speichern. Was brauchen wir?
1) Ein Konto in Cloudflare (auch frei)
2) A Arbeitnehmer in Ihrem Cloudflare-Konto (auch frei)
In Cloudflare-Arbeitern gibt es bereits ein voreingestelltes Skript zur Erstellung von Text-Transkriptionen aus Bildern, aber die voreingestellten Skripte sind in einer Produktionsumgebung überhaupt nicht sicher zu verwenden; in diesem Beitrag werden wir sehen, wie wir das Skript anpassen können, um es sicherer zu machen und es in einer PHP-Umgebung zu verwenden.
Was wollen wir tun? Das Hauptziel ist es, ein Skript zu erstellen, das, ausgehend von einer Bild-URL, die mit der POST-Methode gesendet wird, die Beschreibung des Bildes durch das künstliche Intelligenz-Modell mit dem Namen "Resnet-50" zurückgibt. ResNet ist ein sehr tiefes konvolutionales neuronales Netzwerk (CNN), bestehend aus 152 Schichten, das mit Hilfe einer sogenannten Skip-Verbindung den Weg für Restnetzwerke geebnet hat.
Was müssen wir generieren? Für die Anfrage an unseren Mitarbeiter verwenden wir eine PHP-Datei; während das Skript in unseren Arbeiter einfügt, verwenden wir eine anpassbare, die sicherer ist als die Standarddatei.
Arbeitsskript
Exportstandard {
async request(request, env) {
// Überprüfen Sie, ob der Autorisation Header ein gültiges Token enthält
const authHeader = request.headers.get("Autorisierung";
const gültig Token = "YOUR_AUTHENTICATION_TOKEN";
== Weblinks ==* Offizielle Website {validToken} {
// Wenn das Token fehlt oder ungültig ist, geben Sie einen 401 Unberechtigten Fehler zurück
Return New Response(
JSON.stringify({Fehler: "Ungültiges oder fehlendes Authentifizierungstoken." }),
{ Status: 401, Kopfzeile: { "Inhaltstyp": "Anwendung/Json" } }
);
}
// Nur gültige POST-Anfragen verarbeiten
falls (bitte). Methode !== "POST") {
// Wenn die Methode nicht POST ist, geben Sie eine 405 Methode nicht erlaubt Fehler zurück
"Ungültige Anfragemethode. Verwenden Sie POST mit den erforderlichen Daten." {
Status: 405,
Kopfzeilen: { "Inhaltstyp": "text/plain" },
});
}
{
// Validierung des Inhalts der Anfrage
Inhalt Typ = request.headers.get("Content-Type") ."
if (!contentType.includes("application/json")) {
// Wenn Content-Type nicht JSON ist, geben Sie einen Fehler zurück
Return New Response(
JSON.stringify({Fehler: "Invalider Content-Typ. Erwartete Anwendung/Json." }),
{ Status: 400, Kopfzeile: { "Inhaltstyp": "Anwendung/Json" } }
);
}
// Lesen Sie die Stelle des Antrags
Konstkörper = warten auf Nachfrage.text();
wenn (!body) {
// Wenn der Request Body leer ist, geben Sie einen Fehler zurück
Return New Response(
JSON.stringify({Fehler: "Der Anfragekörper ist leer." }),
{ Status: 400, Kopfzeile: { "Inhaltstyp": "Anwendung/Json" } }
);
}
const { image Url } = JSON.parse(Körper);
wenn (!imageURL) {
// Wenn die Bild-URL nicht im Körper zur Verfügung gestellt wird, geben Sie einen Fehler zurück
Return New Response(
JSON.stringify({Fehler: "Keine Bild-URL zur Verfügung gestellt." }),
{ Status: 400, Kopfzeile: { "Inhaltstyp": "Anwendung/Json" } }
);
}
// Holen Sie das Bild von der angegebenen URL
const imageResponse = warten holen(imageURL),
const blob = warten imageResponse.arrayBuffer();
// Vorbereiten der Eingänge für das AI-Modell
const-Eingänge = {
Bild: [...neu Uint8Array(blob)],
};
// Führen Sie das KI-Modell und erhalten Sie die Antwort
const response = warten env.AI.run("@cf/microsoft/resnet-50", Eingänge);
// Antwort des KI-Modells zurückgeben
Return New Response(
JSON.stringify({ Antwort}),
{ Kopfzeile: { "Inhaltstyp": "Anwendung/Json" } }
);
} Fang (Error) {
// Erwartete Fehler beheben und einen 500 internen Server Fehler zurückgeben
Return New Response(
JSON.stringify({Fehler: error.message }),
{ Status: 500, Kopfzeile: { "Inhaltstyp": "Anwendung/Json" } }
);
}
},
};Was ist bei der Anpassung dieses Skripts zu beachten? Die Konstante gültig Token muss Ihr benutzerdefiniertes Token enthalten, um zum Zeitpunkt der Anfrage zu passieren, fügen Sie ein Passwort ein und erinnern Sie sich daran, es in die PHP-Datei weiter unten einzugeben; wenn die Token nicht gleich sind, wird das Skript einen 401-Fehler zurückgeben und weitere CPU-Arbeiten speichern (diese Konstante kann geändert werden, muss aber die gleiche im PHP-Skript sein); außerdem, wenn die Anfrage nicht von einer POST-Methode stammt, wird das Skript einen 405-Fehler zurückgeben, der auch verwendet wird, um CPU-Arbeit zu speichern; es gibt auch eine Überprüfung, um zu überprüfen, ob die empfangene Anfrage im JSON-Format, dem einzigen akzeptablen Format, liegt; an diesem Punkt eine Überprüfung, ob die gesendete URL existiert. Wenn alles korrekt ist, dann können wir weiter gehen, um die Bilddatei an die künstliche Intelligenz zu senden, die ihre Beschreibung im JSON-Format zurückgibt, um vom PHP-Skript erfasst zu werden, das wir bauen werden.
PHP-Skript
Nennen Sie dieses Skript imai.php und speichern Sie es in einem geschützten Verzeichnis
'Image URL fehlt']);
Ausgang;
}
// Überprüfen Sie, ob die URL auf ein tatsächliches Bild zeigt, indem Sie ihren Header vom Typ Content überprüfen
$headers = get_headers($imageUrl, 1);
if (!isset($headers['Content-Type']) srpos($headers['Content-Type'], 'image/') === false) {
// Wenn die URL nicht auf ein Bild zeigt, melde einen Fehler
echo json_encode(['error' => 'Die URL enthält kein gültiges Bild.']);
Ausgang;
}
// Bereiten Sie die JSON Nutzlast für die Anfrage vor
$data = json_encode ("['imageUrl' => $imageUrl]);
// Stellen Sie die Anfrageoptionen ein, einschließlich des Autorisierungs-Headers mit dem Token
$options = [
"http" => [
'header' => "Content-Type: application/json\r\n" .
"Autorisierung: Bearer $authToken\r\n,"
// Schließen Sie das Token in die Autorisierung Kopfzeile ein
"Methode" => "POST,"
"Inhalt" => $data,
]
];
// Senden Sie die Anfrage an den Arbeiter und erhalten Sie die Antwort
$context = stream_context_create($options);
$response = file_get_contents($cloudflare Url, false, $context);
wenn ($response === FALSE) {
// Wenn der Arbeiter nicht erreichbar ist, geben Sie einen Fehler zurück
echo json_encode(['error' => "Der Arbeiter kann nicht kontaktiert werden."
Ausgang;
}
// Entschlüsseln Sie die JSON-Antwort vom Worker
$decodedResponse = json_decode($response, true);
if ($decodedResponse === null) {
// Wenn die Antwort nicht gültig ist JSON, einen Fehler zurückgeben
echo json_encode(['error' => "Die Antwort ist nicht gültig JSON."
Ausgang;
}
// Ausgabe der dekodierten Antwort
echo json_encode($decodedResponse);
}
?>Was ist bei der Anpassung dieses Skripts zu beachten? Die Variable $authToken enthält die Authentifizierungs-Token, die wir im Worker-Skript (vorher) gesetzt haben; der Wert muss in beiden Skripten gleich sein. Die Variable $Cloudflare Url enthält die gesamte URL, in der das Worker-Skript gespeichert wird (vorher gespeichert), normalerweise beginnt es mit https:// und endet mit Arbeitern. dev aber Sie können auch eine benutzerdefinierte Subdomain (zu Ihrer Wahl) assoziieren. Das Skript kann von einem
in html und muss das Bild url von einem Feld mit id Ã1⁄4bergeben werden, offensichtlich kann es auch über POST aus einem anderen Skript in Javascript (wie Sie es vorziehen) aufgerufen werden; das PHP-Skript an dieser Stelle prüft, dass die url über POST übergeben ist und prüft, ob es tatsächlich ein Bild ist; sobald die Kontrollen übergeben haben, ruft es das Worker-Skript, prüft, ob der Dienst verfügbar und erreichbar ist, und gibt die Antwort zurück, die im JSON-Format sein muss.
HTML Formular
Nein! DOCTYPE html>
== Weblinks ==
== Weblinks ==== Einzelnachweise ==
== Weblinks ==
Körper {
Schriftfamilie: Arial, Sans-Serif;
Marge: 20px;
Polsterung: 0;
Hintergrundfarbe: #f4f4f9;
Farbe: #333;
}
Form {
max-Breite: 400px;
Marge: 0 Auto;
Polsterung: 20px;
Hintergrund: #fff;
Grenze: 1px solide #ddd;
Grenzradius: 5px;
Box-shadow: 0 2px 5px rgba(0, 0, 0, 0,1);
}
input[type="text"] {
Breite: 100%;
Polsterung: 10px;
Marge: 10px 0;
Grenze: 1px fest #ccc;
Grenz-Radius: 3px;
}
Taste {
Breite: 100%;
Polsterung: 10px;
Hintergrundfarbe: #007bff;
Farbe: weiß;
Grenze: keine;
Grenz-Radius: 3px;
Cursor: Zeiger;
}
button:hover {
Hintergrundfarbe: #0056b3;
}
Beschreibung {
Abstand: 20px;
Schriftgröße: 16px;
text-align: center;
Polsterung: 10px;
Grenzradius: 5px;
}
.Beschreibung.Erfolg {
Hintergrundfarbe: #d4edda;
Farbe: #155724;
}
.description.error {
Hintergrundfarbe: #f8d7da;
Farbe: #721c24;
}
== Einzelnachweise ==
Geben Sie die URL eines Bildes ein, um es zu klassifizieren:
== Weblinks ==
== Weblinks ==
document.getElementById('ClassificationForm').addEventListener('submit', async function (event) {
event.preventDefault(); // Formular einreichen und Seite neu laden verhindern
const image Url = document.getElementById(imageURl').value;
const BeschreibungContainer = document.getElementById("BeschreibungContainer");
{
// Senden Sie die Bild-URL per POST an das PHP-Skript
const response = warten holf('imageai.php', {
Methode: "POST,"
Kopfzeilen: {
"Inhaltstyp": "Anwendung/x-www-form-urlencoded,"
},
Körper: 'imageURL='+encodeURIComponent(imageURL)
});
const result = warten response.json();
wenn (response.ok) {
// Anzeige der vom PHP-Skript erhaltenen Beschreibung
BeschreibungContainer.textInhalt = 'Beschreibung: '+result.response;
BeschreibungContainer.className = "Beschreibungserfolg";
} sonst {
// Eine Fehlermeldung anzeigen
BeschreibungContainer.textInhalt = 'Fehler: '+result.error+' Ein unerwarteter Fehler ist aufgetreten."
BeschreibungContainer.className = "Beschreibungsfehler";
}
BeschreibungContainer.style.display = 'block'; // Den Behälter sichtbar machen
} Fang (Error) {
// Netzwerk- oder Serverfehler beheben
BeschreibungContainer.textContent = Fehler: '+error.message;
BeschreibungContainer.className = "Beschreibungsfehler";
BeschreibungContainer.style.display = 'block';
}
});
Schlussfolgerung
Dieses Skript kann über ein HTML-Formular (wie hier dargestellt) oder sogar über ein Javascript-Skript verwendet werden, das sich um den Versand der POST-Anfrage kümmert, aber es kann auch vollständig über PHP verwendet werden, um möglicherweise sicherzustellen, dass das Ergebnis direkt in eine Datenbank gespeichert wird, die zu einem späteren Zeitpunkt zurückgegeben werden soll (wenn gewünscht). Die Anwendung kann unterschiedliche Funktionen haben, abhängig von der Notwendigkeit; denken Sie daran, dass es immer besser ist, weniger komplizierte Anfragen an Arbeitnehmer zu machen, weil, obwohl sie hohe Grenzen auch mit einem kostenlosen Konto haben, sie immer noch Grenzen haben. Es ist eine gute Praxis, die in einer Datenbank erhaltenen Informationen zu speichern, und für denselben URL (oder dasselbe Bild) und die Informationen über die Datenbank (Caching) abzurufen, um den Arbeiter nicht mit zu vielen Anfragen zu verstopfen. Die implementierten Kontrollen (Token und Host-Verifikation) werden genau verwendet, um nicht zu viele Anfragen zu senden, die die Arbeitnehmergrenzen erreichen könnten. Darüber hinaus können Sie in Cloudflare auch Ihre Application Firewall (WAF) einstellen, um sicherzustellen, dass Anfragen an diesen Arbeiter vom angegebenen Host stammen müssen (um die Worker Limits Zähler nicht zu erhöhen). Denken Sie daran, dass für eine bessere Leistung das resnet-50 Modell erwarten die Bildgröße 224×224 Pixel, so ist es ratsam, die Größe des Bildes auf diese Dimensionen, bevor es zu senden.
