Compila un asistente de escritura con IA con Wordcraft

Nos encantan las historias. Contar historias y hacer otras formas de escritura creativa puede ser desafiante y gratificante. Crear tus propias historias desde una página en blanco puede parecer abrumador e incluso abrumador a veces. Los modelos generativos de inteligencia artificial (IA) pueden ser una gran herramienta para ayudarte a superar la página en blanco y construir tu narrativa.

En este instructivo, se muestra cómo extender Wordcraft, una herramienta de escritura de historias potenciada por IA creada por el equipo de Investigación de Personas y IA de Google. Esta aplicación web usa la API de Gemini para ayudarte a crear historias, poco a poco, generando ideas, escribiendo partes de tus historias y revisando el contenido para agregar más detalles. Puedes modificar Wordcraft para que se adapte mejor a tu propio estilo de escritura y compilar nuevos controles de escritura para respaldar mejor tu flujo de trabajo.

Para obtener una descripción general en video del proyecto y cómo extenderlo, incluidas las estadísticas de los creadores, consulta Asistente de escritura con IA: Compila con la IA de Google. De lo contrario, puedes comenzar a extender el proyecto siguiendo las instrucciones que se indican a continuación.

Configuración del proyecto

Estas instrucciones te permitirán configurar el proyecto de Wordcraft para el desarrollo y las pruebas. Debes instalar el software de requisitos previos, clonar el proyecto desde el repositorio de código, ejecutar la instalación de la configuración y establecer algunas variables de entorno. Para probar la configuración, ejecuta el proyecto después de completar estos pasos.

Instala los requisitos previos

El proyecto Wordcraft utiliza Node y npm para administrar los paquetes y ejecutar la aplicación. Las siguientes instrucciones de instalación son para una máquina anfitrión de Linux.

Para instalar el software requerido, sigue estos pasos:

Clona y configura el proyecto

Descarga el código del proyecto y usa el comando de instalación npm para descargar las dependencias necesarias y configurar el proyecto. Necesitas el software de control de fuente git para recuperar el código fuente del proyecto.
Para descargar y configurar el código del proyecto, haz lo siguiente:

  1. Usa el siguiente comando para clonar el repositorio de Git.
    git clone https://github.com/PAIR-code/wordcraft
    
  2. Navega al directorio raíz del proyecto de Wordcraft.
    cd wordcraft/
    
  3. Ejecuta el comando de instalación para descargar dependencias y configurar el proyecto:
    npm install
    

Configura las variables de entorno

Configura las variables de entorno necesarias para permitir que se ejecute el proyecto de código de Wordcraft, específicamente una clave de API de Google Gemini. Las siguientes instrucciones de instalación son para una máquina anfitrión de Linux.

Para configurar las variables de entorno, haz lo siguiente:

  1. Obtén una clave de API de Google Gemini y copia la cadena de clave.
  2. Navega al directorio raíz del proyecto de Wordcraft.`
    cd wordcraft/
    
  3. Configura la clave de API como una variable de entorno. En los hosts de Linux, usa los siguientes comandos.
    touch .env
    echo "API_KEY="<YOUR_API_KEY>"" > .env
    

Pruebe su configuración

Ahora, deberías poder probar la configuración de tu proyecto ejecutando Wordcraft en tu dispositivo. Este paso es opcional, pero se recomienda hacerlo.

Pantalla de inicio de Wordcraft

Para probar la instalación y configuración, haz lo siguiente:

  1. Navega al directorio raíz del proyecto de Wordcraft.
    cd wordcraft/
    
  2. Ejecución del proyecto en Modo de desarrollo:
    npm run dev
    
  3. En el navegador web, ve a la interfaz de usuario de Wordcraft. La dirección específica se muestra en el resultado del comando anterior, por ejemplo:
    http://localhost:3000/
    

Modificar texto de ejemplo de instrucción

Interfaz de usuario de comandos de Wordcraft Wordcraft crea instrucciones para el modelo generativo de IA con un conjunto de ejemplos destinados a cada operación de asistencia para la escritura, como los comandos iniciar nueva historia y generar texto. Los ejemplos guían el modelo generativo a la hora de generar texto para tu historia. Si modificas los ejemplos de una operación, puedes cambiar el resultado para que siga un patrón o estilo de escritura diferente. Este enfoque es una forma sencilla de hacer que Wordcraft escriba como quieres.

En el siguiente ejemplo, se muestra una modificación de los ejemplos de new_story en Wordcraft. El objetivo de esta modificación es dirigir al modelo generativo de IA para que escriba introducciones a la historia con un enfoque de monólogo interno y usar un estilo que sea más apropiado para una novela de misterio. Si escribes algunos ejemplos de este tipo de introducción de historia, puedes hacer que el modelo generativo siga el patrón general, pero que genere una introducción para un tema diferente.

Para modificar los ejemplos de historias nuevas en Wordcraft, sigue estos pasos:

  1. Abre el archivo wordcraft/app/context/json/new_story.json.
  2. Modifica los ejemplos y mantén la estructura general del archivo JSON. Aquí hay un ejemplo de modificación para la introducción de una historia de misterio con un estilo de monólogo interno.
    [
      {
        "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."
      }
    ]
  3. Guarda los cambios en el archivo `new_story.json`.

Para probar la operación modificada de la historia nueva, haz lo siguiente:

  1. Navega al directorio raíz del proyecto de Wordcraft.
    cd wordcraft/
    
  2. Ejecutar el proyecto en Modo de desarrollo Si ya se está ejecutando, es posible que debas detenerla y reiniciarla.
    npm run dev
    
  3. En el navegador web, ve a la interfaz de usuario de Wordcraft. La dirección específica se muestra en el resultado del comando anterior, por ejemplo:
    http://localhost:3000/
    
  4. Navega al menú principal de Wordcraft y selecciona Comenzar una historia nueva.
  5. Actualiza la instrucción de la historia nueva o cámbiala por lo que quieras y selecciona Comenzar nueva historia.

Con esta técnica, puedes modificar todos los controles de escritura de historias existentes en Wordcraft. Intenta cambiar otros controles de historias actualizando los ejemplos del directorio wordcraft/app/context/json/.

Crear un nuevo control de escritura

Wordcraft incluye la interfaz de usuario de personajes La app de Wordcraft se diseñó para ampliarse de modo que puedas agregar nuevos controles de escritura que te ayuden, de manera similar a los botones Generar texto o reescribir oración en la pestaña Controles del lado derecho de la app. Realizar estas modificaciones requiere un poco más de esfuerzo, pero te permite adaptar las funciones de Wordcraft a tu flujo de trabajo y objetivos.

En la siguiente modificación de ejemplo, se crea un nuevo control de caracteres para Wordcraft. Puedes usarlo para presentar a un nuevo personaje una historia con una descripción de los atributos de ese personaje. La base de este control es la misma que otros controles de Wordcraft, como el control de comenzar nueva historia que se analizó anteriormente. Creas un archivo JSON con algunos ejemplos de cómo deseas que se incluyan los caracteres. El resto de los cambios incluye la interfaz de usuario y funciones de administración de instrucciones de IA.

Crear ejemplos

Escribe algunos ejemplos de cómo quieres que el modelo generativo presente a los personajes. Por ejemplo, ¿quieres describirlo como un narrador o quieres presentarlos hablando de la experiencia de tu personaje principal? En los siguientes ejemplos, se usa el último enfoque, ya que se introducen nuevos personajes desde el punto de vista del personaje principal. Agrega estos ejemplos con un archivo JSON nuevo:

Para agregar ejemplos al control nuevo, haz lo siguiente:

  1. Crea un archivo wordcraft/app/context/json/new_character.json.
  2. Crea los ejemplos en el archivo JSON. Para este ejemplo, cada ejemplo tiene un campo de descripción character, que representa el texto del mensaje, y un campo target, que muestra el resultado esperado.
    [
      {
        "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."
      }
    ]
  3. Guarda los cambios en el archivo new_character.json.

Después de crear los ejemplos, modifica los archivos app/context/schema.ts y index.ts para que reflejen el contenido de la instrucción del control de caracteres nuevo.

Para agregar ejemplos al archivo schema.ts, haz lo siguiente:

  • Modifica el archivo wordcraft/app/context/schema.ts para incluir la nueva estructura de datos de ejemplo de caracteres.
    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(),
    });

Define un tipo de operación asociado con estos ejemplos nuevos. Este nuevo tipo ayuda a conectar los ejemplos de mensajes a la interfaz de usuario y al código de compilación de la instrucción, que modificarás en pasos posteriores.

Para crear un nuevo tipo de operación, haz lo siguiente:

  • Modifica el archivo wordcraft/app/core/shared/types.ts para agregar el nuevo tipo de operación de caracteres.
    export const enum OperationType {
      ...
      NEW_CHARACTER = 'NEW_CHARACTER', // add to list of types
      ...
    }

Para registrar los ejemplos en el archivo index.ts, haz lo siguiente:

  1. En el archivo wordcraft/app/context/index.ts, importa el esquema nuevo.
    import {
      continueSchema,
      ...
      newCharacterSchema // add new schema
    } from './schema';
    
  2. Importa el nuevo archivo JSON como newCharacterJson.
    import newCharacterJson from './json/new_character.json';
    
  3. Registra el contenido de ejemplo del nuevo personaje en el contexto de la aplicación.
    export class WordcraftContext {
      constructor() {
      ...
        this.registerExamples(
          OperationType.NEW_CHARACTER,
          newCharacterSchema,
          newCharacterJson
        );
      ...
    }
  4. Exporta un tipo NewCharacterExample.
    export type NewCharacterExample = z.infer<typeof newCharacterSchema>;
    

Compila la interfaz de usuario

Una vez que hayas creado y registrado los ejemplos de generación de contenido, puedes crear la interfaz de usuario para el control nuevo. La mayor parte del trabajo para esta fase consiste en crear una nueva clase de operación y, luego, registrarla con el código principal de la aplicación de Wordcraft.

Para crear una operación nueva, sigue estos pasos:

  1. En el directorio wordcraft/app/core/operations/, crea una clase de operación nueva con una de las clases de operaciones existentes como plantilla. Para el nuevo control de caracteres, puedes hacer una copia de la clase new_story_operation.ts y cambiarle el nombre a new_character_operation.ts.
  2. Otorga un nuevo nombre a la clase y especifica cuándo aparece el control en la interfaz de usuario. Para ello, define al menos un valor de OperationSite.
    export class NewCharacterOperation extends ChoiceOperation {
      static override isAvailable(operationSite: OperationSite) {
        return (
          operationSite === OperationSite.END_OF_SECTION ||
          operationSite === OperationSite.EMPTY_SECTION
        );
      }
    
  3. Configura el id para la operación.
      static override id = OperationType.NEW_CHARACTER;
    
  4. Actualiza las funciones get y run para reflejar los valores de los parámetros del esquema. Este código se encarga de obtener el texto de la instrucción de la interfaz de usuario para usarlo en la instrucción de IA.
      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);
      }
    
  5. Actualiza el texto y las descripciones de la interfaz de usuario.
      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.',
        }),
      };
    

Para registrar la nueva operación en la aplicación Wordcraft:

  1. En el archivo wordcraft/app/core/operations/index.ts, agrega una importación para la operación nueva.
    import {NewCharacterOperation} from './new_character_operation';
    
  2. En el mismo archivo index.ts, agrega una exportación para la clase NewCharacterOperation.
    export {
      ...
      NewCharacterOperation, // add this class
      ...
    };
  3. En el archivo wordcraft/app/main.ts, registra la operación nueva.
    const operationsService = wordcraftCore.getService(OperationsService);
    operationsService.registerOperations(
      ...
      Operations.NewCharacterOperation, // add new operation
      ...
    );
    

Crear manejo de instrucciones

Como fase final de la creación del nuevo control, crea el código que maneja la generación de instrucciones para el modelo generativo de IA y maneja la respuesta. La parte principal del trabajo consiste en compilar un controlador de instrucciones en el directorio wordcraft/app/models/gemini/prompts/ que reciba entradas de la interfaz de usuario y prepare un mensaje para pasarlo al modelo generativo.

Si quieres definir una interfaz para los parámetros del mensaje, haz lo siguiente:

  • En el archivo wordcraft/app/core/shared/interfaces.ts, agrega una interfaz para las operaciones nuevas que solicitan parámetros.
    export interface NewCharacterPromptParams {
      character: string;
    }
    

Si deseas definir un controlador de mensajes para la nueva operación, haz lo siguiente:

  1. En el directorio wordcraft/app/models/gemini/prompts/, crea una nueva clase de controlador de mensajes con una de las clases de operaciones existentes como plantilla. Para el nuevo control de caracteres, puedes hacer una copia de la clase new_story.ts y cambiarle el nombre a new_character.ts como punto de partida.
  2. Define una función de controlador de mensajes y, luego, importa la clase NewCharacterExample.
    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) {
      ...
    }
    
  3. Compila una función generatePrompt() para obtener la entrada de la interfaz de usuario para el mensaje del modelo de IA.
      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}`;
        }
      }
  4. Crea una función getPromptContext() para ensamblar la entrada de la interfaz de usuario con las respuestas de ejemplo y compilar la instrucción completa.
      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;
      }

Para integrar el nuevo controlador de mensajes de caracteres, haz lo siguiente:

  1. En el archivo wordcraft/app/models/gemini/index.ts, importa el controlador del mensaje para la nueva operación de caracteres.
    import {makePromptHandler as newCharacter} from './prompts/new_character';
  2. Agrega una definición de anulación para el controlador de mensajes newCharacter.
      override newCharacter = this.makePromptHandler(newCharacter);

Para registrar los parámetros del mensaje con la definición del modelo, haz lo siguiente:

  1. En el archivo wordcraft/app/models/model.ts, agrega una importación para la nueva interfaz NewCharacterPromptParams.
    import {
      ...
      NewCharacterPromptParams,
      ...
    } from '@core/shared/interfaces';
  2. Agrega parámetros de instrucción newCharacter a la clase de modelo.
      async newCharacter(params: NewCharacterPromptParams): Promise<ModelResults> {
        throw new Error('Not yet implemented');
      }

Prueba el nuevo control de escritura

El control nuevo debería estar listo para probar en la interfaz de Wordcraft. Antes de continuar, asegúrate de que tu código no tenga errores de compilación.

Para probar el nuevo control de personajes, haz lo siguiente:

  1. Navega al directorio raíz del proyecto de Wordcraft.`
    cd wordcraft/
    
  2. Ejecuta el proyecto en Modo de desarrollo:
    npm run dev
    
  3. En el navegador web, ve a la interfaz de usuario de Wordcraft. La dirección específica se muestra en el resultado del comando anterior, por ejemplo:
    http://localhost:3000/
    
  4. En la aplicación Wordcraft, crea una historia nueva o abre una existente.
  5. En el área de edición de la historia, mueve el cursor al final de la historia. En la pestaña Controls de la derecha, debería aparecer el control insert character.
  6. En el campo present character, escribe una breve descripción del nuevo personaje y, luego, selecciona el botón present character.

Recursos adicionales

Para obtener más información sobre el proyecto Wordcraft, consulta el repositorio de códigos. Puedes ver los cambios descritos en este instructivo en esta solicitud de extracción.

Aplicaciones de producción

Si planeas implementar una versión personalizada de Wordcraft para un público amplio, ten en cuenta que el uso de la API de Google Gemini puede estar sujeto a límites de frecuencia y otras restricciones de uso. Si estás considerando compilar una aplicación de producción con la API de Gemini, como el Agente de Documentos, consulta los servicios de Vertex AI de Google Cloud para aumentar la escalabilidad y la confiabilidad de tu app.