Nehmen Sie am Gemini API-Entwicklerwettbewerb teil! Weitere Informationen

Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Wordcraft einen KI-Schreibassistenten erstellen

Wir lieben Geschichten. Geschichten zu erzählen und andere kreative Formen zu schreiben, kann eine Herausforderung sein. Eigene Geschichten von einer leeren Seite aus zu erstellen, kann manchmal einschüchternd und manchmal auch überwältigend erscheinen. Generative Modelle mit künstlicher Intelligenz (KI) können ein großartiges Tool sein, um über die leere Seite hinauszugehen und eine Geschichte zu erzählen.

In dieser Anleitung erfahren Sie, wie Sie Wordcraft erweitern, ein KI-gestütztes Tool zum Schreiben von Geschichten, das vom Google People and AI Research-Team entwickelt wurde. Diese Webanwendung verwendet die Gemini API, um Ihnen dabei zu helfen, Geschichten zu erstellen, indem sie nach und nach Ideen entwickelt, Teile Ihrer Geschichten schreibt und Inhalte überarbeiten, um mehr Details hinzuzufügen. Sie können Wordcraft besser an Ihren eigenen Schreibstil anpassen und neue Schreibsteuerelemente erstellen, die Ihren Workflow besser unterstützen.

Ein Video mit einem Überblick über das Projekt und wie es erweitert werden kann, einschließlich der Erkenntnisse der Entwickler, finden Sie unter AI Writing Assistant – Build with Google AI. Alternativ können Sie mit dem Erweitern des Projekts beginnen, indem Sie der Anleitung unten folgen.

Projekt einrichten

In dieser Anleitung erfahren Sie, wie Sie das Wordcraft-Projekt für Entwicklung und Tests einrichten. Sie müssen die erforderliche Software installieren, das Projekt aus dem Code-Repository klonen, die Konfigurationsinstallation ausführen und einige Umgebungsvariablen festlegen. Sie können Ihre Einrichtung testen, indem Sie das Projekt ausführen, nachdem Sie diese Schritte abgeschlossen haben.

Erforderliche Komponenten installieren

Das Wordcraft-Projekt verwendet Node und npm zum Verwalten von Paketen und zum Ausführen der Anwendung. Die folgende Installationsanleitung bezieht sich auf einen Linux-Hostcomputer.

So installieren Sie die erforderliche Software:

Installieren Sie node und npm. Folgen Sie dazu der Installationsanleitung für Ihre Plattform.

Projekt klonen und konfigurieren

Laden Sie den Projektcode herunter und verwenden Sie den Installationsbefehl npm, um die erforderlichen Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren. Sie benötigen die git-Versionsverwaltungssoftware, um den Projektquellcode abzurufen.
So laden Sie den Projektcode herunter und konfigurieren ihn:

Klonen Sie das Git-Repository mit dem folgenden Befehl.
```
git clone https://github.com/PAIR-code/wordcraft
```
Rufen Sie das Stammverzeichnis des Wordcraft-Projekts auf.
```
cd wordcraft/
```
Führen Sie den Installationsbefehl aus, um Abhängigkeiten herunterzuladen und das Projekt zu konfigurieren:
```
npm install
```

Umgebungsvariablen festlegen

Legen Sie die Umgebungsvariablen fest, die zum Ausführen des Wordcraft-Codeprojekts erforderlich sind, insbesondere einen Google Gemini API-Schlüssel. Die folgende Installationsanleitung gilt für einen Linux-Hostcomputer.

So legen Sie die Umgebungsvariablen fest:

Rufen Sie einen Google Gemini API-Schlüssel ab und kopieren Sie den Schlüsselstring.
Rufen Sie das Stammverzeichnis des Wordcraft-Projekts auf.“
```
cd wordcraft/
```
Legen Sie den API-Schlüssel als Umgebungsvariable fest. Verwenden Sie auf Linux-Hosts die folgenden Befehle.
```
touch .env
echo "API_KEY="<YOUR_API_KEY>"" > .env
```

Einrichtung testen

Sie sollten jetzt die Einrichtung Ihres Projekts testen können, indem Sie Wordcraft auf Ihrem Gerät ausführen. Dieser Schritt ist optional, wird aber empfohlen.

Wordcraft-Startbildschirm

So testen Sie Ihre Installation und Einrichtung:

Rufen Sie das Stammverzeichnis des Wordcraft-Projekts auf.
```
cd wordcraft/
```
Projekt wird im Entwicklungsmodus ausgeführt:
```
npm run dev
```
Öffnen Sie in Ihrem Webbrowser die Wordcraft-Benutzeroberfläche. Die spezifische Adresse wird in der Ausgabe des vorherigen Befehls angezeigt. Beispiel:
```
http://localhost:3000/
```

Beispieltext für Prompt ändern

Benutzeroberfläche von Wordcraft-Befehlen Wordcraft erstellt Prompts für das generative KI-Modell anhand einer Reihe von Beispielen für jeden Schreibhilfevorgang, z. B. den Befehlen Neue Story starten und Text generieren. Die Beispiele dienen dem generativen Modell beim Generieren von Text für Ihre Story. Wenn Sie die Beispiele für einen Vorgang ändern, können Sie die Ausgabe an ein anderes Muster oder einen anderen Schreibstil anpassen. Dieser Ansatz ist eine einfache Möglichkeit, um Wordcraft nach Ihren Wünschen zu schreiben.

Das folgende Beispiel zeigt eine Änderung der new_story-Beispiele in Wordcraft. Ziel dieser Änderung ist es, das generative KI-Modell dazu zu bringen, mit einem internen Monolog Einleitungen zu Geschichten zu schreiben und einen Stil zu verwenden, der besser für einen Mystery-Roman geeignet ist. Wenn Sie einige Beispiele für diese Art von Story-Einführung schreiben, können Sie das generative Modell dem allgemeinen Muster folgen lassen, aber eine Einleitung für ein anderes Thema generieren.

So ändern Sie die Beispiele für neue Geschichten in Wordcraft:

Öffnen Sie die Datei wordcraft/app/context/json/new_story.json.

Die Beispiele ändern und die Gesamtstruktur der JSON-Datei beibehalten. Hier ist eine Beispielmodifikation für die Einführung einer Mysterygeschichte, bei der ein interner Monologstil verwendet wird.

[
{
"topic": "scientist disappears and their research into a new technology is gone",
"target": "I got the call from the chief early Tuesday morning, before I'd even had a second sip of coffee. Terrible timing. Something about a researcher disappearing from the local university. Unusual for the research lab to ask for assistance, so I headed over to main lab building."
},
{
"topic": "a young woman wakes up with no memory",
"target": "An unfamiliar ceiling with harsh, white lights greeted my eyes as I opened them. I looked around. White walls, medical equipment, a hospital? Wait. Where am I? How did I get here?!"
},
{
"topic": "old man tries to recall an important task as his memories gradually fade away",
"target": "What was I supposed to do today? Feels like it was important. I stared into the kitchen cabinet full of mismatched mugs, mirroring my own confusion. What was it? Like someone is...in danger? A chill shot down my spine, but the details skittered off and hid in some dark corner of my head."
},
{
"topic": "billionaire is found dead in a hotel room",
"target": "People meet their end every day, some naturally, some unnaturally. After 17 years of working as a homicide detective in Seattle, I'd seen a lot more of the unnatural variety than most. Comes with the job, along with a hard-learned sense of what side of the line any given incident sat on. This...was murder."
},
{
"topic": "retired covert operative gets dragged back into an old mission",
"target": "Steam rose gently off the cup of Earl Grey sitting in front of me as I sat at the cafe, pedestrians and light traffic rolling by. The city was slowly waking up around me and my perfect Paris morning routine was shaping up nicely. Then I noticed that old familiar and unwelcome tingling on the back of my neck. I was being watched."
}
]

Speichern Sie die Änderungen an der Datei „new_story.json“.

So testen Sie den geänderten Vorgang der neuen Story:

Rufen Sie das Stammverzeichnis des Wordcraft-Projekts auf.
```
cd wordcraft/
```
Führen Sie das Projekt im Entwicklungsmodus aus. Wenn sie bereits ausgeführt wird, müssen Sie die Anwendung möglicherweise beenden und neu starten.
```
npm run dev
```
Öffnen Sie in Ihrem Webbrowser die Wordcraft-Benutzeroberfläche. Die spezifische Adresse wird in der Ausgabe des vorherigen Befehls angezeigt. Beispiel:
```
http://localhost:3000/
```
Gehen Sie zum Hauptmenü von Wordcraft und wählen Sie Neue Geschichte starten aus.
Aktualisieren Sie den Prompt für die neue Story oder ändern Sie ihn wie gewünscht und wählen Sie dann Neue Story starten aus.

Mit dieser Methode können Sie alle vorhandenen Steuerelemente zum Schreiben von Geschichten in Wordcraft ändern. Versuchen Sie, andere Story-Steuerelemente zu ändern, indem Sie die Beispiele im Verzeichnis wordcraft/app/context/json/ aktualisieren.

Neue Schreibsteuerung erstellen

Wordcraft führt Benutzeroberfläche ein Die Wordcraft-App wurde erweitert, sodass Sie neue Schreibsteuerelemente hinzufügen können, die Ihnen helfen, ähnlich wie die Schaltflächen zum Erstellen von Text oder Umschreiben auf dem Tab „Steuerelemente“ auf der rechten Seite der App. Diese Änderungen sind etwas aufwendiger, ermöglichen es Ihnen jedoch, die Funktionen von Wordcraft an Ihren Workflow und Ihre Ziele anzupassen.

Mit der folgenden Beispieländerung wird ein neues Zeichensteuerelement für Wordcraft erstellt. Sie können es verwenden, um eine neue Figur mit einer Beschreibung der Attribute dieser Figur in eine Geschichte einzuführen. Dieses Steuerelement basiert auf anderen Wordcraft-Steuerelementen, z. B. das oben beschriebene Steuerelement Neue Geschichte starten. Sie erstellen eine JSON-Datei mit einigen Beispielen dafür, wie Zeichen eingefügt werden sollen. Mit den restlichen Änderungen werden die Benutzeroberfläche und Verwaltungsfunktionen für KI-Prompts hinzugefügt.

Beispiele erstellen

Schreiben Sie einige Beispiele dafür, wie das generative Modell Charaktere einführen soll. Möchten Sie sie z. B. wie eine Erzählerin oder möchten Sie sie durch die Erfahrung der Hauptfigur vorstellen? In den folgenden Beispielen wird der zweite Ansatz verwendet, bei dem neue Zeichen aus der Sicht der Hauptfigur eingeführt werden. Sie fügen diese Beispiele mit einer neuen JSON-Datei hinzu:

So fügen Sie Beispiele für das neue Steuerelement hinzu:

Erstellen Sie eine wordcraft/app/context/json/new_character.json-Datei.

Erstellen Sie die Beispiele in der JSON-Datei. In diesem Beispiel gibt es in jedem Beispiel das Beschreibungsfeld character, das den Text der Aufforderung darstellt, und das Feld target, das die erwartete Ausgabe anzeigt.

[
{
"character": "A character who is helpful and modest.",
"target": "\"You lost, buddy?\" came a voice from behind me. Turning, I discovered a man dressed in a simple but presentable outfit. Small signs of age and loose threads hinted that these clothes, and the man himself, had seen better days."
},
{
"character": "A character who is attractive and devious.",
"target": "Stepping out of the alley a little too quickly, I collided with something solidly muscular and surprisingly delicately scented. \"Sorry.\" I managed, regaining my balance. \"Easy there, buddy, you're gonna hurt yourself,\" came the reply from a man with an almost feline grace, further reinforced by a stare that reminded me of a hunting cat assessing its potential prey."
},
{
"character": "A character who is old and hesitant.",
"target": "\"Excuse me. Do you know the way to the train station from here?\" I looked up from my phone to see a elderly woman in a threadbare coat, purse clutched with two hands in front of her. \"I-I'm supposed to meet my nephew there. Do... do you think you can help me?\""
},
{
"character": "A character who is intelligent and aloof.",
"target": "Bookish. That was my immediate reaction to this person I now saw in front of me. \"You're finally here. Did you read the notes I sent you?\" The voice sat squarely in between feminine and masculine intonation. \"No, of course you didn't.\" Dismissing my answer before I'd even formulated one. Annoyance immediately flushed through me."
},
{
"character": "A character who is clumsy and energetic.",
"target": "\"Whoa!\" was the only warning I had before someone slammed into my back, almost knocking me off my feet. \"I'm so sorry! WOOO! These skates are a RUSH!\" The apology came from a rather loud redhead wearing rollerblades, dark glasses and a very beefy-looking pair of headphones. That explained the volume of the apology."
}
]

Speichern Sie die Änderungen in der Datei new_character.json.

Nachdem Sie die Beispiele erstellt haben, ändern Sie die Dateien app/context/schema.ts und index.ts, um den Inhalt der Eingabeaufforderung dieser neuen Zeichensteuerung widerzuspiegeln.

So fügen Sie der Datei schema.ts die Beispiele hinzu:

Ändern Sie die Datei wordcraft/app/context/schema.ts so, dass sie die neue Datenstruktur für Zeichenbeispiele enthält.

export const newStorySchema = z.object({
  topic: z.string(),
  target: z.string(),
});

// add the following:
export const newCharacterSchema = z.object({
  character: z.string(),
  target: z.string(),
});

Definieren Sie einen Vorgangstyp, der mit diesen neuen Beispielen verknüpft ist. Mit diesem neuen Typ können Sie die Beispiele für Aufforderungen mit der Benutzeroberfläche und dem Build-Code der Aufforderung verbinden, den Sie in späteren Schritten ändern.

So erstellen Sie einen neuen Vorgangstyp:

Ändern Sie die Datei wordcraft/app/core/shared/types.ts, um den neuen Zeichenvorgangstyp hinzuzufügen.

export const enum OperationType {
  ...
  NEW_CHARACTER = 'NEW_CHARACTER', // add to list of types
  ...
}

So registrieren Sie die Beispiele in der Datei index.ts:

Importieren Sie das neue Schema in die Datei wordcraft/app/context/index.ts.

import {
  continueSchema,
  ...
  newCharacterSchema // add new schema
} from './schema';

Importieren Sie die neue JSON-Datei als newCharacterJson.

import newCharacterJson from './json/new_character.json';

Registriert den neuen Beispielinhalt der Zeichen im Anwendungskontext.

export class WordcraftContext {
  constructor() {
  ...
    this.registerExamples(
      OperationType.NEW_CHARACTER,
      newCharacterSchema,
      newCharacterJson
    );
  ...
}

Exportieren Sie einen NewCharacterExample-Typ.

export type NewCharacterExample = z.infer<typeof newCharacterSchema>;

Benutzeroberfläche erstellen

Nachdem Sie die Beispiele zur Inhaltsgenerierung erstellt und registriert haben, können Sie die Benutzeroberfläche für das neue Steuerelement erstellen. Der Großteil der Arbeit in dieser Phase besteht darin, eine neue Vorgangsklasse zu erstellen und diese dann im Hauptcode der Wordcraft-Anwendung zu registrieren.

So erstellen Sie einen neuen Vorgang:

Erstellen Sie im Verzeichnis wordcraft/app/core/operations/ eine neue Vorgangsklasse. Verwenden Sie dazu eine der vorhandenen Vorgangsklassen als Vorlage. Für die neue Zeichensteuerung können Sie eine Kopie der Klasse new_story_operation.ts erstellen und sie in new_character_operation.ts umbenennen.

Geben Sie der Klasse einen neuen Namen und legen Sie fest, wann das Steuerelement in der Benutzeroberfläche angezeigt wird. Definieren Sie dazu mindestens einen OperationSite-Wert.

export class NewCharacterOperation extends ChoiceOperation {
  static override isAvailable(operationSite: OperationSite) {
    return (
      operationSite === OperationSite.END_OF_SECTION ||
      operationSite === OperationSite.EMPTY_SECTION
    );
  }

Legen Sie die id für den Vorgang fest.

  static override id = OperationType.NEW_CHARACTER;

Aktualisieren Sie die Funktionen get und run, um die Werte der Schemaparameter widerzuspiegeln. Mit diesem Code wird der Prompt-Text von der Benutzeroberfläche zur Verwendung in der KI-Prompt abgerufen.

  private get character(): string {
    return NewCharacterOperation.controls.character.value;
  }

  async run() {
    const params = { character: this.character };
    const choices = await this.getModel().newCharacter(params);

    this.setChoices(choices);
  }

Aktualisieren Sie den Text und die Beschreibungen der Benutzeroberfläche.

  static override getButtonLabel() {
    return 'introduce character';
  }

  static override getDescription() {
    return 'Introduce a new character at the cursor.';
  }

  static override controls = {
    character: new TextareaControl({
      prefix: 'prompt',
      description: 'A prompt to introduce a new character.',
      value: 'A new character.',
    }),
  };

So registrieren Sie den neuen Vorgang in der Wordcraft-Anwendung:

Fügen Sie in der Datei wordcraft/app/core/operations/index.ts einen Import für den neuen Vorgang hinzu.
```
import {NewCharacterOperation} from './new_character_operation';
```
Fügen Sie in derselben index.ts-Datei einen Export für die Klasse NewCharacterOperation hinzu.
```
export {
  ...
  NewCharacterOperation, // add this class
  ...
};
```

Registrieren Sie den neuen Vorgang in der Datei wordcraft/app/main.ts.

const operationsService = wordcraftCore.getService(OperationsService);
operationsService.registerOperations(
  ...
  Operations.NewCharacterOperation, // add new operation
  ...
);

Prompt-Verarbeitung erstellen

In der letzten Phase der Erstellung des neuen Steuerelements erstellen Sie den Code, der das Generieren von Eingabeaufforderungen für das generative KI-Modell und die Antwort verarbeitet. Der Hauptteil der Arbeit besteht darin, im Verzeichnis wordcraft/app/models/gemini/prompts/ einen Prompt-Handler zu erstellen, der Eingaben von der Benutzeroberfläche annimmt und einen Prompt zusammenstellt, der an das generative Modell übergeben wird.

So definieren Sie eine Schnittstelle für die Eingabeaufforderungsparameter:

Fügen Sie der Datei wordcraft/app/core/shared/interfaces.ts eine Schnittstelle für die neuen Parameter für die Eingabeaufforderung für Vorgänge hinzu.
```
export interface NewCharacterPromptParams {
  character: string;
}
```

So definieren Sie einen Aufforderungs-Handler für den neuen Vorgang:

Erstellen Sie im Verzeichnis wordcraft/app/models/gemini/prompts/ eine neue Eingabeaufforderungs-Handler-Klasse. Verwenden Sie dazu eine der vorhandenen Vorgangsklassen als Vorlage. Für die neue Zeichensteuerung können Sie eine Kopie der new_story.ts-Klasse erstellen und sie in new_character.ts als Ausgangspunkt umbenennen.

Definieren Sie eine Prompt-Handler-Funktion und importieren Sie die NewCharacterExample-Klasse.

import { NewCharacterPromptParams } from '@core/shared/interfaces';
import { NewCharacterExample, WordcraftContext } from '../../../context';
import { OperationType } from '@core/shared/types';
import { GeminiModel } from '..';

export function makePromptHandler(model: GeminiModel, context: WordcraftContext) {
  ...
}

Erstellen Sie eine generatePrompt()-Funktion, um die Eingabe der Benutzeroberfläche für die Eingabeaufforderung des KI-Modells abzurufen.

  function generatePrompt(character: string) {
    const prefix = "Here's a character description: ";
    const suffix = "Introduce this character in the story.";

    if (character.trim() === '') {
      return 'Introduce a new character to the story.';
    } else {
      return `${prefix}${model.wrap(character)}\n${suffix}`;
    }
  }

Erstellen Sie eine getPromptContext()-Funktion, um die Eingabe der Benutzeroberfläche aus den Beispielantworten zusammenzustellen, und erstellen Sie dann den vollständigen Prompt.

  function getPromptContext() {
    const examples = context.getExampleData(
      OperationType.NEW_CHARACTER
    );
    let promptContext = model.getPromptPreamble();
    examples.forEach((example) => {
      const { character, target } = example;
      const prompt = generatePrompt(character);
      promptContext += `${prompt} ${model.wrap(target)}\n\n`;
    });
    return promptContext;
  }

So integrieren Sie den neuen Zeichen-Prompt-Handler:

Importieren Sie den Eingabeaufforderungs-Handler für den neuen Zeichenvorgang in die Datei wordcraft/app/models/gemini/index.ts.
```
import {makePromptHandler as newCharacter} from './prompts/new_character';
```
Fügen Sie eine Überschreibungsdefinition für den Eingabeaufforderung-Handler newCharacter hinzu.
```
  override newCharacter = this.makePromptHandler(newCharacter);
```

So registrieren Sie die Eingabeaufforderungsparameter mit der Modelldefinition:

Fügen Sie in der Datei wordcraft/app/models/model.ts einen Import für die neue NewCharacterPromptParams-Schnittstelle hinzu.
```
import {
  ...
  NewCharacterPromptParams,
  ...
} from '@core/shared/interfaces';
```

Fügen Sie der Modellklasse newCharacter-Prompt-Parameter hinzu.

  async newCharacter(params: NewCharacterPromptParams): Promise<ModelResults> {
    throw new Error('Not yet implemented');
  }

Neues Schreibsteuerelement testen

Das neue Steuerelement sollte jetzt in der Wordcraft-Oberfläche getestet werden können. Prüfen Sie Ihren Code auf Kompilierungsfehler, bevor Sie fortfahren.

So testen Sie die neue Zeichenkontrolle:

Rufen Sie das Stammverzeichnis des Wordcraft-Projekts auf.“
```
cd wordcraft/
```
Führen Sie das Projekt im Entwicklungsmodus aus:
```
npm run dev
```
Öffnen Sie in Ihrem Webbrowser die Wordcraft-Benutzeroberfläche. Die spezifische Adresse wird in der Ausgabe des vorherigen Befehls angezeigt. Beispiel:
```
http://localhost:3000/
```
Erstellen Sie in der Wordcraft App eine neue Geschichte oder öffnen Sie eine vorhandene.
Bewegen Sie den Cursor im Bearbeitungsbereich der Geschichte an das Ende der Geschichte. Auf dem Tab „Steuerelemente“ auf der rechten Seite sollte das Steuerelement Einführende Zeichen angezeigt werden.
Geben Sie im Feld Einführungszeichen eine kurze Beschreibung des neuen Zeichens ein und klicken Sie dann auf die Schaltfläche Einführungszeichen.

Zusätzliche Ressourcen

Weitere Informationen zum Wordcraft-Projekt findest du im Code-Repository. Sie können die in dieser Anleitung beschriebenen Änderungen in dieser Pull-Anfrage ansehen.

Produktionsanwendungen

Wenn Sie eine benutzerdefinierte Version von Wordcraft für eine große Zielgruppe bereitstellen möchten, müssen Sie beachten, dass die Verwendung der Google Gemini API möglicherweise Ratenbegrenzungen und anderen Nutzungsbeschränkungen unterliegt. Wenn Sie mit der Gemini API wie Docs Agent eine Produktionsanwendung erstellen möchten, sollten Sie sich die Google Cloud Vertex AI-Dienste ansehen, die die Skalierbarkeit und Zuverlässigkeit Ihrer Anwendung verbessern.