Cómo crear un Text Prompt con la librería generative-ai en React

Imagen creada por DALL E

En la era digital actual, donde la inteligencia artificial (IA) se ha integrado profundamente en nuestra vida cotidiana, la generación de contenido mediante IA se ha convertido en una herramienta poderosa y accesible para todos, por igual.

Este artículo pretende ser una mini guía, para iniciar a sumergirnos en el fascinante mundo de la generación de contenido asistida por IA, específicamente a través del uso de una biblioteca de IA de vanguardia.

El enfoque será crear una aplicación en React que utilice esta tecnología para generar texto basado en prompts proporcionados por el usuario.

Acompáñame en este viaje paso a paso para desvelar cómo puedes aprovechar el poder de la IA en tus proyectos, transformando simples ideas en creaciones complejas y cautivadoras con solo unas pocas líneas de código.

Configuración del Proyecto

1. Vamos a crear un proyecto de React con Vite, usando el siguiente codigo:

npm create vite@latest mi-app-generativa -- --template react

2. Accede al directorio del proyecto:

cd mi-app-generativa

3. Instala las dependencias:

 npm install

4. Agreguemos la librería

npm install @google/generative-ai

5. Ejecutamos nuestra app

npm run dev

Configuración de la Aplicación React

1. Crearemos un componente en una carpeta components en el src de nuestro proyecto que llamaremos TextPrompt.jsx .
2. Importa React y los hooks necesarios:

import React, { useState } from 'react';

3. Define el componente TextPrompt:

const TextPrompt = () => {
  const [input, setInput] = useState('');
  const [output, setOutput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleSubmit = async () => {
    // Aquí invocarás la API de generación de texto
  };

  return (
    <div>
      <input type="text" value={input} placeholder="Enter your prompt here..." onChange={handleInputChange} />
      <button onClick={handleSubmit}>Generar</button>
      {output && <p>{output}</p>}
    </div>
  );
};

export default TextPrompt;

Integración de la api @google/generative-ai

Previo a la integración te recomiendo que accedas a https://aistudio.google.com/ y generes un API key.

Si ya tienes uno que hayas generado, puedes usarlo o crear una nueva.

Lo ideal es que no compartas tu API key en proyectos públicos.

AI studio

Crear un Api key

1. Importa la librería@google/generative-ai.

import { GoogleGenerativeAI } from "@google/generative-ai";

2. Incluye una constante con tu APi key.

const apiKey = import.meta.env.VITE_API_KEY;

Crea u archivo en la raiz de tu proyecto llamado .env en el crea la variable de ambiente que debe iniciar con la palabra VITE, seguida del nombre que le pongas a tu API Key, en este caso API_KEY.

3. Crea una constante instanciando de la librería GoogleGenerativeAI, pasándole tu API key.

const genAI = new GoogleGenerativeAI(apiKey);

4. Crea una constante modelo, asignándole el nombre de tu modelo si ya tienes un previamente creado o añade el modelo de gemini.

const model = genAI.getGenerativeModel({ model: "gemini-pro" });

5. En el handleSubmit vamos a hacer una petición al modelo para obtener el texto generado por el prompt que estamos ingresando.

 const handleSubmit = async (event) => {
    event.preventDefault();
    const result = await model.generateContent(output);
    const response = await result.response;
    setOutput(response.text());
  };

Nota: Este paso puede tener muchas variaciones dependiendo del modelo a usar, si es uno creado personalizado o uno por defecto del https://aistudio.google.com/.

Incluir el componente en el App

Incluye el componente TextPrompt en App.js.

import TextPrompt from './components/TextPrompt.jsx'

function App() {

  return (
    <>
      <h1>Text Prompt Demo</h1>
      <TextPrompt />
    </>
  );
}

Probar la Aplicación

Abre tu navegador y ve a ka url que te genera Vite, para ver tu aplicación en acción.

Application

Próximos Pasos: Considera agregar más características, como personalización del modelo de IA, ajustes de longitud de respuesta, o la incorporación de otras APIs de IA para tener respuestas más acertadas en tu prompt.

Repositorio

GitHub - vanessamarely/text-prompt-gemini

Conclusión

Esta guía es una forma simple y solo un caso de uso, para integrar la inteligencia artificial en nuestras aplicaciones con React.

Lo que hoy en día comenzó como una exploración de cómo utilizar una biblioteca de IA para generar texto a partir de prompts, se ha transformado en una comprensión más profunda de las posibilidades ilimitadas que la tecnología de IA nos ofrece.

Podemos ver cómo, con solo unas pocas líneas de código, podemos abrir un nuevo mundo de innovación y personalización en el contenido que creamos.

Espero empieces explorando y aprovechando el potencial de la IA en tus futuros proyectos.