Wie ich KI nutzte, um Alt-Text für meine Website zu generieren

Ich genieße das Schreiben, aber manchmal kann es mühsam werden. Wie etwa das Verfassen von Alt-Text für Bilder – wer möchte schon Zeit damit verschwenden, den Inhalt eines Bildes zu beschreiben? Nicht ich. Kürzlich wurde ich es leid, Alt-Text für die Bilder auf meinem Blog zu schreiben, und dachte, es muss einen besseren Weg geben. Das Schreiben von qualitativ hochwertigem Alt-Text ist oft eine Aufgabe, die auf die lange Bank geschoben wird. Warum ein Foto als „Ein futuristischer humanoider Roboter mit verschiedenen Displays und einem Mondmotiv im Hintergrund“ beschreiben, wenn man einfach „Roboter“ 🙃 schreiben könnte? Die gute Nachricht ist, dass unsere KI-Oberherrscher mehr als glücklich sind, diesen qualitativ hochwertigen Alt-Text für uns zu schreiben! Hier ist, wie ich OpenAIs neues GPT-4o-Modell auf meinem Blog implementiert habe, um automatisch Alt-Text für mich zu generieren.

Um zu beginnen, benötigen Sie ein OpenAI-Konto und einen API-Schlüssel. Sobald Sie diese eingerichtet haben, können Sie API-Anfragen starten und deren Modelle in Ihren Anwendungen nutzen.

Auf meiner Website wird jeder Blogbeitrag als mdx-Datei erstellt – im Wesentlichen eine Markdown-Datei, in der Sie React-Komponenten einfügen können. Bei fast allen meinen Blogbeiträgen habe ich oben auf der Seite ein Bannerbild, das ich normalerweise von unsplash.com beziehe. Hier ist meine React-Komponente für das Bannerbild:

import Image from "next/image";
const PostBannerImg = async ({ url, alt }) => {
  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        aspectRatio: "3 / 2",
        marginBottom: "2.5rem",
      }}
    >
      <Image
        src={url}
        alt={alt}
        priority
        fill
        quality={80}
        style={{ borderRadius: "4px", objectFit: "cover" }}
        sizes="800px"
      />
    </div>
  );
};
export default PostBannerImg;

Diese Komponente funktioniert großartig, aber wie Sie sehen können, erwartet sie eine Prop namens „alt“, was bedeutet, dass ich jedes Mal, wenn ich sie verwende, manuell einen Alt-Text bereitstellen muss.

Das ist es, was ich machen möchte:

const PostBannerImg = async ({ url }) => {
  const altText = await getAltText(url)
  return (...);
};

Da dies eine Server-Komponente ist, kann ich Netzwerkanfragen direkt in der Komponente durchführen und muss mir keine Sorgen um die Offenlegung von API-Schlüsseln machen. Ich werde einfach die Funktion zum Abrufen des Alt-Textes wie folgt hinzufügen:

import Image from "next/image";
import OpenAI from "openai";
const getAltText = async (url) => {
  //Verschwende mein Geld nicht mit OpenAI-Anfragen bei lokaler Ausführung
  if (process.env.NODE_ENV === "development") {
    return "DEV alt text hier";
  }
  let altText = "";
  try {
    const openai = new OpenAI();
    const chatCompletion = await openai.chat.completions.create({
      model: "gpt-4o",
      messages: [
        {
          role: "user",
          content: [
            {
              type: "text",
              text: "Beschreiben Sie in 20 Worten oder weniger, was auf diesem Bild zu sehen ist.",
            },
            { type: "image_url", image_url: { url, detail: "low" } },
          ],
        },
      ],
      max_tokens: 25,
    });
    altText = chatCompletion.choices[0].message.content;
  } catch (err) {
    altText = "wilsonstaley.dev blog post";
  }
  return altText;
};
const PostBannerImg = async ({ url }) => {
  const altText = await getAltText(url)
  return (...);
};

Lass uns das etwas genauer betrachten…

Das Erste, was Ihnen vielleicht auffällt, ist, dass ich die OpenAI-Node.js-Bibliothek verwende, um mit der API zu interagieren. Dies ist eine großartige Möglichkeit, mit OpenAIs Modellen in einer Node-Laufzeitumgebung zu interagieren. Wenn ich die OpenAI-Instanz mit const openai = new OpenAI() initialisiere, würde hier normalerweise Ihr API-Schlüssel angegeben werden. Diese Bibliothek sucht jedoch standardmäßig nach einer Umgebungsvariablen namens OPENAI_API_KEY und verwendet diese. Da ich diese Variable in meiner Umgebung eingerichtet habe, kann ich sie ganz weglassen.

Als Nächstes möchte ich den frühen Ausstieg erwähnen, wenn die Umgebung „development“ ist. Bei der lokalen Entwicklung verwenden Next.js und viele andere Frameworks Hot Module Reloading, sodass bei Änderungen am Code dieser automatisch in Ihrem Browser aktualisiert wird. Dies führt zu vielen Neuladeaktionen während der Entwicklung. Obwohl die OpenAI-API relativ kostengünstig ist, können durch das Auslösen einer Vielzahl von Anfragen während der Entwicklung die Kosten schnell steigen. Wenn Sie ein neues OpenAI-Konto erstellen, erhalten Sie normalerweise etwas Guthaben, um die API auszuprobieren, und das könnte Ihnen eine Weile reichen. Aber wenn Sie so sind wie ich, müssen Sie irgendwann Geld auf Ihr Konto einzahlen, um die API weiter nutzen zu können. Und wenn Sie nicht möchten, dass Ihr Guthaben schnell aufgebraucht wird, sollten Sie unnötige Anfragen reduzieren.

Es gibt noch ein paar andere Dinge, die ich tue, um Kosten zu sparen. Das neue GPT-4o-Modell ist tatsächlich günstiger als das vorherige GPT-4-Turbo. Ich verwende dieses Modell, aber Sie können sich die vollständige Liste ansehen, um zu bestimmen, welches am besten für Ihren Anwendungsfall geeignet ist.

Wenn ich die Bild-URL als Teil der Nachricht angebe, spezifiziere ich auch, dass die detail auf „low“ gesetzt werden soll.

low aktiviert den „Niedrigauflösungs“-Modus. Das Modell erhält eine niedrigaufgelöste 512px x 512px-Version des Bildes und repräsentiert das Bild mit einem Budget von 65 Tokens. Dies ermöglicht der API, schnellere Antworten zu geben und weniger Eingabe-Tokens für Anwendungsfälle zu verbrauchen, die keine hohen Details erfordern.

Außerdem sage ich dem Modell, mir eine Antwort in 20 Worten oder weniger zu geben, und setze den max_tokens-Parameter auf 25. Dies begrenzt im Wesentlichen die Größe der Antwort, die ich zurückbekomme. All diese Anpassungen dienen als Leitplanken, um zu verhindern, dass ich die API überlaste und das Modell mir eine riesige Antwort gibt. Natürlich ist es auch ratsam, den Aufruf von OpenAI in einem try/catch-Block zu umschließen. Falls OpenAI ausfallen oder das Guthaben auf meinem Konto aufgebraucht sein sollte, möchte ich nicht, dass der Seitenaufbau fehlschlägt. Ich ziehe es vor, stattdessen einen generischen Alt-Text zu erhalten. Sobald das Problem dann behoben ist, sollte ein nachfolgender Build wieder die korrekten Alt-Tags liefern!