Tutorial de Cohere: Creando tu extensión de Chrome para la resumación de artículos

¡Aumenta Tu Lectura: Tutorial de la Extensión de Chrome de Cohere para Resumir Artículos!

¡Saludos! ¿Alguna vez te has sentido presionado por el tiempo pero absolutamente necesitas leer un artículo extenso? ¡No te preocupes! En este distintivo tutorial de la Aplicación Coherente, descubre los secretos de crear una extensión personalizada de Google Chrome para condensar cualquier artículo, reduciendo significativamente el tiempo de lectura. ¡Así que deja que la magia se desarrolle!

Por favor, ten en cuenta que se requiere un conocimiento básico de HTML, CSS y JavaScript, ¡pero nada demasiado complicado de aprender rápidamente!

¿Cómo Crear una Extensión de Chrome?

Comenzaremos a crear una extensión configurando los archivos apropiados. Mi estructura de archivos se ve así:

• popup El directorio contiene un archivo .html para el popup de la extensión; no lo utilizaremos mucho, solo pondré el nombre de la extensión aquí.
• scripts El directorio tiene un archivo .js para la lógica de la extensión - generando botones y resúmenes.
• styles El directorio incluye un archivo .css para el estilo de la extensión.
• manifest.json es un archivo que contiene toda la información sobre la extensión. Empezaremos con él.

Archivo de Manifiesto

Como se mencionó, manifest.json contiene todos los detalles vitales sobre la extensión en un formato JSON. Los siguientes elementos son cruciales:

• css - Ruta a nuestro archivo css
• js - Ruta a nuestro archivo js
• matches - Lista de dominios donde queremos usar nuestra extensión (por ejemplo: medium.com, towardsai.net, towardsdatascience.com, levelup.gitconnected.com, pero siéntete libre de agregar más dominios según sea necesario).

Cargar Extensión en el Navegador

Para cargar la extensión, navega a la configuración de tu navegador > extensiones. Activa el modo desarrollador y haz clic en el botón "Cargar sin empaquetar" en la esquina superior izquierda. Selecciona tu carpeta de extensión, ¡y listo!

¡Vamos a Programar!

En el archivo index.html, agregaré una plantilla HTML básica con el nombre de la extensión.

index.css

Aquí, agregaré estilos para los botones utilizados para resumir. Si bien pueden no ser estéticamente agradables en este momento, son funcionales. Explicaré las clases necesarias en la siguiente sección.

index.js

En esta parte, implementaremos la lógica principal de la extensión. Inicialmente, crearemos una función para generar botones para resumir. Utilizaremos document.createElement para crear los botones y document.body.appendChild para agregarlos a la página web. Se agregarán oyentes de eventos a estos botones para que, cuando los hagamos clic, se active la función de resumen.

Necesitamos posicionar el botón junto a la foto del usuario. Esto requiere agregar el botón a dos ubicaciones: la barra lateral para la vista de escritorio y la barra inferior para móvil. Utilizaremos las herramientas de desarrollo para obtener los selectores de elementos para estos componentes. Dependiendo de si accedemos a la página principal o a un artículo directamente, los selectores diferirán ligeramente, lo que detallaremos en la guía.

Crearemos tres funciones esenciales para nuestro tutorial: loadButtons, prediction, y cohereReq.

Cargando Botones

Los botones deben cargarse cuando la página se carga correctamente, excepto en la página de inicio. Para la página principal, tiene más sentido cargarlos al interactuar con el usuario, como un clic o un evento de desplazamiento, ya que el evento onload no se activa aquí. Vamos a implementar eso:

window.onload = function() {
    // Tu lógica para cargar botones aquí...
};

Lógica de Resumir

A continuación, implementaremos las funciones para resumir. Usaremos la función cohereReq para obtener el resumen de la API de Cohere.

Ahora, extraigamos datos de la página e invoquemos la función cohereReq. Esto se ejecutará dentro de la función prediction.

¡Pruébalo!

Ahora, exploremos Medium y probemos nuestra extensión!

Actualmente, nuestra salida está restringida a la consola. Esto está diseñado intencionalmente para dejar espacio para tus mejoras. ¡Desafíate a mejorar el rendimiento del modelo revisando el prompt! Crea un popup visualmente atractivo en popup.html, y muestra los resultados en el popup con un spinner de carga mientras esperas la respuesta. Incluso puedes modificar el botón principal para mejorar la experiencia del usuario. Muestra tus resultados en nuestro servidor de Discord en el canal de texto del tutorial. ¡Espero ansiosamente ver tus increíbles creaciones!

¡Transforma Tu Experiencia de Navegación!

Elabora sin esfuerzo una extensión de Chrome para resumir de CoHERE que mejore tu experiencia de lectura. Descubre el emocionante mundo de los tutoriales de CoHERE y aprende cómo crear una extensión de Chrome para resumir impulsada por IA como un profesional. Emprende un viaje a través de los hackatones de IA de lablab.ai, transformando tus brillantes ideas de aplicaciones en realidad en solo 7 días. Sumérgete en un reino de aplicaciones ricas e innovadoras de Cohere para llevar aún más lejos tus habilidades.