Maximierung der Benutzererfahrung mit KI-gestützten Tools

Um zu beginnen, müssen Sie sich bei OpenAI anmelden und einen Schlüssel generieren .

Als Nächstes richten wir ein einfaches Nuxt-Projekt ein. Verwenden Sie einfach den folgenden Befehl , um ein Starterprojekt zu erstellen und das openaiPaket hinzuzufügen (nuxt-Dokumente bevorzugen die Verwendung , können aber auch die Schritte oder yarnbefolgen ):npmpnpm

npx nuxi init openai.moderation
cd openai.moderation
yarn install
yarn add openai
yarn dev -o

Öffnen Sie nun das Projekt in Ihrer bevorzugten IDE und legen Sie los!

Konfigurieren Sie den Schlüssel

.envErstellen Sie im Stammverzeichnis des Projekts eine Datei mit dieser Zeile (ersetzen Sie sie durch Ihren persönlichen Schlüssel):

OPENAI_API_KEY=ALWAYSKEEPSECRETSTOYOURSELF

export default defineNuxtConfig({
    runtimeConfig: {
        OPENAI_API_KEY: process.env.OPENAI_API_KEY,
    },
})

Um mit dem OpenAI-Endpunkt zu kommunizieren, benötigen wir einen eigenen Server.

In Nuxt ist das Hinzufügen eines API-Endpunkts genauso einfach wie das Hinzufügen einer Datei in einem server/apiOrdner.

Erstellen Sie also zunächst diese Ordnerstruktur und platzieren Sie Folgendes in einer Datei mit dem Namen moderate.post.ts:

export default defineEventHandler(event => {
    const body = await readBody(event)
    return body?.message
})

Die Eingabekomponente

Wir werden eine kleine Komponente erstellen, die lediglich Texteingaben aufnimmt und beim Senden den von uns eingerichteten Endpunkt erreicht, damit wir die Antwort validieren können.

Erstellen Sie eine Moderate.vueKomponente in einem componentsOrdner im Stammverzeichnis des Projekts.

Beginnen wir mit der Definition der Skripte mithilfe der Skript-Setup-Notation :

<script setup lang="ts">
const input = ref("");
const result = ref([]);

const onSubmit = async () => {
  const response = await $fetch("/api/moderate", {
    method: "post",
    body: { message: input.value },
  });
  result.value.unshift(response);
  input.value = "";
};
</script>

Jetzt fügen wir eine Vorlage hinzu mit:

• Ein kleines Formular, das eine Eingabe enthält;
• Eine Schaltfläche zum Senden, die den Handler aufruft onSubmit;
• Ein Ort, an dem die Ausgabe des Endpunkts angezeigt wird

<template>
  <div>
    <div class="input">
      <input type="text" v-model="input" />
      <button type="submit" @click="onSubmit">Validate moderation</button>
    </div>
    <div class="output">
      <ul>
        <li :key="i.id" v-for="i in result">
          {{ i.results }}
        </li>
      </ul>
    </div>
  </div>
</template>

<template>
  <div>
    <Moderate />
  </div>
</template>

Intelligenz hinzufügen

Abschließend aktualisieren wir die moderate.post.tsDatei, um die OpenAI-Funktionen zu nutzen. Die Moderations-API ist eine der unkomplizierteren und eignet sich daher gut für den Einstieg.

Anstatt das body.messagesofort zurückzugeben, konfigurieren wir zunächst den OpenAI-Client, indem wir ihn mit dem Schlüssel instanziieren. Anschließend fragen wir den Endpunkt mit dem Inhalt der Nachricht ab. Das bedeutet, dass wir auch den Handler in eine Funktion ändern müssen async!

Die Datei sollte so aussehen:

import { Configuration, OpenAIApi } from 'openai';

// it's an async function now!
export default defineEventHandler(async (event) => {
    const body = await readBody(event)
// setup the configuration
    const configuration = new Configuration({
        apiKey: process.env.OPENAI_API_KEY,
    });
// instantiate the openaiClient
    const openaiClient = new OpenAIApi(configuration);

// Make the call to the moderation endpoint
    const res = await openaiClient.createModeration({
        input: body?.message,
      });

// return the result
    return res.data
})

{
  "id": "modr-XXXXX",
  "model": "text-moderation-001",
  "results": [
    {
      "categories": {
        "hate": false,
        "hate/threatening": false,
        "self-harm": false,
        "sexual": false,
        "sexual/minors": false,
        "violence": false,
        "violence/graphic": false
      },
      "category_scores": {
        "hate": 0.18805529177188873,
        "hate/threatening": 0.0001250059431185946,
        "self-harm": 0.0003706029092427343,
        "sexual": 0.0008735615410842001,
        "sexual/minors": 0.0007470346172340214,
        "violence": 0.0041268812492489815,
        "violence/graphic": 0.00023186142789199948
      },
      "flagged": false
    }
  ]
}

Mit der von uns gelegten Grundlage sollten Sie in der Lage sein, entweder den vorhandenen Code zu ändern oder Ihre eigene Integration in ein von Ihnen bevorzugtes Framework vorzunehmen.

Die Verwendung dieser Art von Tools kann Ihnen bei der Veröffentlichung benutzergenerierter Inhalte sehr hilfreich sein. Bedenken Sie jedoch, dass es sich hierbei lediglich um ein Beispiel und nicht um eine reale Umsetzung handelt. Wie OpenAI empfiehlt , sollten Sie bei der Bewältigung solcher Dinge immer ein menschliches Auge zur Hand haben. Ein gültiger Anwendungsfall für dieses Beispiel wäre die präventive Kennzeichnung von Einreichungen vor der Veröffentlichung.

Der Einsatz von KI, um den Menschen zu entlasten, ohne ihn vollständig zu entfernen, wäre eine sinnvolle und gute Nutzung der aktuellen Fähigkeiten. KI hat, genau wie Menschen, immer noch Mängel, aber wir können sie nutzen, um uns bei einfachen Aufgaben zu unterstützen.