Crea un agregador de sitios web con ChatGPT, React y Node.js

Crea un agregador de sitios web con ChatGPT, React y Node.js – Codelivly

Un agregador de sitios web es una herramienta que permite a los usuarios recopilar información de varios sitios web y mostrarla en una única ubicación centralizada. Esto puede incluir artículos de noticias, publicaciones de blog, actualizaciones de redes sociales y otros tipos de contenido. Usando una combinación de tecnologías como ChatGPT, React y Node.js, es posible crear un agregador de sitios web capaz de extraer información relevante de varios sitios web y presentársela al usuario en un formato estructurado y fácil de usar. ChatGPT se puede usar para extraer información relevante, React se puede usar para crear la interfaz de la aplicación y proporcionar una interfaz fácil de usar para explorar contenido agregado, y Node.js se puede usar para administrar tareas del lado del servidor, como almacenamiento y datos. recuperación.

Es importante tener en cuenta que, si bien es posible crear un agregador de sitios web utilizando estas tecnologías, requeriría una buena comprensión de cada una y un esfuerzo de desarrollo significativo. Además, también puede necesitar un raspador web para recopilar los datos de varios sitios web.

En este artículo, aprenderá a crear un agregador de sitios web que obtenga contenido de un sitio web y determine el título y la descripción del sitio web mediante ChatGPT.

Índice
  1. ¿Qué es Chat GPT?
  2. Limitación con ChatGPT
  3. condiciones previas
  4. Implementación del proyecto
    1. Configurar el servidor Node.js
    2. Configuración de la aplicación Reaccionar
  5. Cómo obtener datos usando Puppeteer en Node.js
  6. Cómo comunicarse con ChatGPT en Node.js
  7. Conclusión

¿Qué es Chat GPT?

ChatGPT es un gran modelo de lenguaje desarrollado por OpenAI. Se basa en la arquitectura GPT (Transformador preentrenado generativo) y se entrena utilizando un conjunto de datos de texto masivo de Internet. Es capaz de generar texto similar al humano, realizar traducciones, responder preguntas y realizar otras tareas de procesamiento de lenguaje natural.

ChatGPT ha sido capacitado en una amplia gama de textos, por lo que ha adquirido una amplia gama de conocimientos sobre muchos temas diferentes. Se puede ajustar para realizar tareas específicas, como responder preguntas, resumir texto y generar texto en un estilo o tono particular.

Uno de los casos de uso de ChatGPT es usarlo como un extractor de información, al entrenarlo para extraer información específica y presentarla en un formato estructurado, puede usarse para extraer información de sitios web y presentársela al usuario en un formato estructurado. .

Limitación con ChatGPT

Como se mencionó anteriormente, no se puede acceder a ChatGPT a través de una API pública. En su lugar, podemos utilizar técnicas de web scraping para obtener acceso. Esto implica automatizar el proceso de inicio de sesión en el sitio web de OpenAI, resolver el captcha (puede usar 2captcha para esto) y enviar una solicitud de API con cookies de OpenAI. Afortunadamente, hay una biblioteca pública que puede encargarse de estas tareas por nosotros. Tenga en cuenta que esta no es una API formal, por lo que puede encontrar limitaciones si intenta realizar una gran cantidad de solicitudes. Además, no es adecuado para consultas en tiempo real. Si desea utilizarlo, considere implementar un sistema de colas para el procesamiento en segundo plano.

condiciones previas

Para usar ChatGPT, React y Node.js para crear un agregador de sitios web, se requieren los siguientes requisitos previos:

  1. Familiaridad con JavaScript: React y Node.js son tecnologías basadas en JavaScript, por lo que se requiere una buena comprensión de JavaScript para desarrollar el frontend y el backend de la aplicación.
  2. Experiencia con React: para crear la interfaz de la aplicación, se requiere experiencia con React y sus conceptos, como componentes, estado y accesorios.
  3. Experiencia con Node.js: para manejar tareas del lado del servidor, se requiere experiencia con Node.js y sus bibliotecas asociadas, como Express.
  4. Familiaridad con ChatGPT: para usar ChatGPT para extraer información de sitios web, es necesario comprender cómo interactuar con él y adaptarlo a una tarea específica.
  5. Comprender el web scraping: se necesitaría una biblioteca o herramienta de web scraping como Puppeteer para recopilar datos de varios sitios web.
  6. Comprender el dominio: comprender el dominio es importante para refinar el modelo y extraer información relevante del sitio web.
  7. Experiencia en almacenamiento de datos: Para almacenar los datos extraídos se requeriría conocimiento de un sistema de base de datos como MongoDB o MySQL.

Cabe señalar que, si bien estos son los requisitos previos, crear un agregador de sitios web es una tarea compleja que requiere una buena comprensión de cada una de estas tecnologías y un esfuerzo de desarrollo significativo.

Implementación del proyecto

Aquí lo guiaré a través de la creación del entorno del proyecto para la aplicación web. Usaremos React.js para el servidor front-end y Node.js para el servidor back-end.

Cree la carpeta del proyecto para la aplicación web ejecutando el siguiente código:

mkdir website-aggregator
cd website-aggregator
mkdir client server

Configurar el servidor Node.js

Navegue a la carpeta del servidor y cree un package.json carpetas.

cd server & npm init -y

Instale Express, Nodemon y la biblioteca CORS.

npm install express cors nodemon

ExpressJS es un marco rápido y minimalista que proporciona varias funciones para crear aplicaciones web en Node.js, CORS es un paquete de Node.js que permite la comunicación entre diferentes dominios y Nodemon es una herramienta de Node.js que reinicia automáticamente el servidor después de detectar el expediente. cambios.

Creo un index.js archivo: el punto de entrada del servidor web.

touch index.js

Configure un servidor Node.js usando ExpressJS. El fragmento de código a continuación devuelve un objeto JSON cuando visita el http://localhost:4000/api en tu navegador.

//👇🏻index.js
const express = require("express");
const cors = require("cors");
const app = express();
const PORT = 4000;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(cors());

app.get("/api", (req, res) => {
    res.json({
        message: "Hello world",
    });
});

app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

Instale la biblioteca API no oficial de ChatGPT y Puppeteer. La API de ChatGPT usa Puppeteer como una dependencia de pares opcional para automatizar la omisión de las protecciones de Cloudflare.

npm install chatgpt puppeteer

Para utilizar la API de ChatGPT en el server/index.js archivo, debe configurar el archivo para utilizar tanto el require y import palabras clave para importar bibliotecas.

Por lo tanto, actualice la server/package.json archivo que contenga la palabra clave type.

{ "type": "module" }

Agregue el fragmento de código a continuación en la parte superior de la server/index.js carpetas.

import { createRequire } from "module";
const require = createRequire(import.meta.url);
//...other code statements

Una vez que haya completado los dos últimos pasos, ahora puede usar ChatGPT en el index.js carpetas.

Configure Nodemon agregando el comando de inicio a la lista de scripts en el package.json carpetas. El fragmento de código a continuación inicia el servidor usando Nodemon.

//In server/package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },

¡Felicidades! Ahora puede iniciar el servidor usando el siguiente comando.

npm start

Configuración de la aplicación Reaccionar

Navegue a la carpeta del cliente a través de su terminal y cree un nuevo proyecto React.js.

cd client
npx create-react-app ./

Elimine archivos redundantes, como el logotipo de la aplicación React y los archivos de prueba, y actualice la App.js archivo para mostrar "Hello World" como se muestra a continuación.

function App() {
    return (
        <div>
            <p>Hello World!</p>
        </div>
    );
}
export default App;

Explorar el src/index.css archivo y copie el código a continuación. Contiene todo el CSS necesario para diseñar este proyecto.

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Space Grotesk", sans-serif;
}
input {
    padding: 10px;
    width: 70%;
    margin: 10px 0;
    outline: none;
}
button {
    width: 200px;
    cursor: pointer;
    padding: 10px 20px;
    outline: none;
    border: none;
    background-color: #6d9886;
}
.home,
.home__form,
.website__item,
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.home__form > h2,
.home__form {
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}
.home {
    min-height: 100vh;
    padding: 20px;
    width: 100%;
}
.website__container {
    width: 100%;
    min-height: 50vh;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 15px;
}
.website__item {
    width: 80%;
    margin: 10px;
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 30px;
    box-shadow: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}
.website__item > img {
    width: 70%;
    border-radius: 5px;
}
.website__item > h3 {
    margin: 10px 0;
}
.website__item > p {
    text-align: center;
    opacity: 0.7;
}
.loading {
    height: 100vh;
    background-color: #f2e7d5;
}

Actualizar el App.js archivo para mostrar un campo de entrada que le permite proporcionar la URL del sitio web.

import React, { useState } from "react";

const App = () => {
    const [url, setURL] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log({ url });
        setURL("");
    };

    return (
        <div className="home">
            <form className="home__form">
                <h2>Website Aggregator</h2>
                <label htmlFor="url">Provide the website URL</label>
                <input
                    type="url"
                    name="url"
                    id='url'
                    value={url}
                    onChange={(e) => setURL(e.target.value)}
                />
                <button onClick={handleSubmit}>ADD WEBSITE</button>
            </form>
        </div>
    );
};

export default App;
URL

¡Felicidades! Ha creado correctamente la interfaz de usuario de la aplicación. En las siguientes secciones, lo guiaré a través de cómo recuperar datos de sitios web usando Puppeteer y obtener la descripción y el título de un sitio web a través de ChatGPT.

Cómo obtener datos usando Puppeteer en Node.js

Puppeteer es una biblioteca de Node.js que automatiza varias acciones del navegador, como el envío de formularios, el rastreo de aplicaciones de una sola página, las pruebas de interfaz de usuario y, en particular, el raspado web y la generación de capturas de pantalla de páginas web.

Aquí lo guiaré a través del raspado del contenido del sitio web a través de Puppeteer en Node.js. Enviaremos la URL del sitio web proporcionada por el usuario al servidor Node.js y buscaremos el contenido del sitio web a través de su URL.

Cree un punto final en el servidor que acepte la URL del sitio web de la aplicación React.

app.post("/api/url", (req, res) => {
    const { url } = req.body;

    //👇🏻 The URL from the React app
    console.log(url);
});

Importe la biblioteca Puppeteer y obtenga el contenido del sitio web como se muestra a continuación:

//👇🏻 Import Puppeteer at the top
const puppeteer = require("puppeteer");

app.post("/api/url", (req, res) => {
    const { url } = req.body;

    //👇🏻 Puppeteer webscraping function
    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto(url);

        //👇🏻 returns all the website content
        const websiteContent = await page.evaluate(() => {
            return document.documentElement.innerText.trim();
        });

        //👇🏻 returns the website meta image
        const websiteOgImage = await page.evaluate(() => {
            const metas = document.getElementsByTagName("meta");
            for (let i = 0; i < metas.length; i++) {
                if (metas[i].getAttribute("property") === "og:image") {
                    return metas[i].getAttribute("content");
                }
            }
        });

        console.log({ websiteContent, websiteOgImage })
        await browser.close();
    })();
});

Agregue una función en la aplicación React que envíe la URL al api/url/ punto final.

const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setURL("");
    //👇🏻 Calls the function.
    sendURL();
};

async function sendURL() {
    try {
        const request = await fetch("http://localhost:4000/api/url", {
            method: "POST",
            body: JSON.stringify({
                url,
            }),
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
        });
        const data = await request.json();
        //👇🏻 toggles the loading state if the request is successful
        if (data.message) {
            setLoading(false);
        }
    } catch (err) {
        console.error(err);
    }
}

Del fragmento de código anterior, agregamos un estado de carga que describe el estado de la solicitud de la API.

const [loading, setLoading] = useState(false);

Para crear un Loading componente que se muestra a los usuarios cuando la solicitud está pendiente.

import React from "react";

const Loading = () => {
    return (
        <div className="loading">
            <h1>Loading, please wait...</h1>
        </div>
    );
};

export default Loading;

Mostrar la Loading componente siempre que el contenido aún no esté disponible.

import Loading from "./Loading";
//👇🏻 Add this code within the App.js component

if (loading) {
    return <Loading />;
}

¡Felicidades! Ha aprendido a obtener contenido de sitios web mediante Puppeteer. En la siguiente sección, aprenderá cómo comunicarse con ChatGPT en Node.js generando descripciones de sitios web y nombres de marca.

Cómo comunicarse con ChatGPT en Node.js

ChatGPT aún no está disponible como API pública. Por lo tanto, para usarlo, tenemos que abrirnos camino, lo que significa que haremos una automatización completa del navegador que se conecta al sitio web de OpenAI, resuelve el captcha y envía una solicitud de API con las cookies de OpenAI.

Afortunadamente, una biblioteca pública que hace esto está disponible y se ha instalado como parte de los requisitos del proyecto.

Importe la biblioteca API de ChatGPT y cree una función que envíe una solicitud a ChatGPT.

import { ChatGPTAPIBrowser } from "chatgpt";

async function chatgptFunction(content) {
    // use puppeteer to bypass cloudflare (headful because of captchas)
    const api = new ChatGPTAPIBrowser({
        email: "<CHATGPT_EMAIL_ADDRESS>",
        password: "<CHATGPT_PASSWORD>",
    });
    await api.initSession();
    //👇🏻 Extracts the brand name from the website content
    const getBrandName = await api.sendMessage(
        `I have a raw text of a website, what is the brand name in a single word? ${content}`
    );
    //👇🏻 Extracts the brand description from the website content
    const getBrandDescription = await api.sendMessage(
        `I have a raw text of a website, can you extract the description of the website from the raw text. I need only the description and nothing else. ${content}`
    );
    //👇🏻 Returns the response from ChatGPT
    return {
        brandName: getBrandName.response,
        brandDescription: getBrandDescription.response,
    };
}

El chat de GPT es súper inteligente y responderá cualquier pregunta que le hagamos. Entonces, básicamente, lo enviaremos para que nos escriba el nombre de la marca y la descripción en función del HTML completo del sitio web.
El nombre de la marca generalmente se encuentra en "og:site_name", pero para mostrarle lo genial que es, dejaremos que ChatGPT lo extraiga. En cuanto a la descripción, es bastante loca. ¡Nos dirá de qué se trata el sitio y lo resumirá todo!

Próximo,
Actualizar el api/url ruta a como se muestra a continuación:

//👇🏻 holds all the ChatGPT result
const database = [];
//👇🏻 generates a random string as ID
const generateID = () => Math.random().toString(36).substring(2, 10);

app.post("/api/url", (req, res) => {
    const { url } = req.body;

    (async () => {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto(url);
        const websiteContent = await page.evaluate(() => {
            return document.documentElement.innerText.trim();
        });
        const websiteOgImage = await page.evaluate(() => {
            const metas = document.getElementsByTagName("meta");
            for (let i = 0; i < metas.length; i++) {
                if (metas[i].getAttribute("property") === "og:image") {
                    return metas[i].getAttribute("content");
                }
            }
        });
        //👇🏻 accepts the website content as a parameter
        let result = await chatgptFunction(websiteContent);
        //👇🏻 adds the brand image and ID to the result
        result.brandImage = websiteOgImage;
        result.id = generateID();
    //👇🏻 adds the result to the array
        database.push(result);
    //👇🏻 returns the results
        return res.json({
            message: "Request successful!",
            database,
        });

        await browser.close();
    })();
});

Para mostrar la respuesta en la aplicación React, cree un informe que contenga la respuesta del servidor.

const [websiteContent, setWebsiteContent] = useState([]);

async function sendURL() {
    try {
        const request = await fetch("http://localhost:4000/api/url", {
            method: "POST",
            body: JSON.stringify({
                url,
            }),
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json",
            },
        });
        const data = await request.json();
        if (data.message) {
            setLoading(false);
            //👇🏻 update the state with the server response
            setWebsiteContent(data.database);
        }
    } catch (err) {
        console.error(err);
    }
}

Por último, actualice la App.js diseño para mostrar la respuesta del servidor al usuario.

const App = () => {
    //...other code statements
//👇🏻 remove the quotation marks around the description
const trimDescription = (content) =>
        content.match(/(?:"[^"]*"|^[^"]*$)/)[0].replace(/"/g, "");

    return (
        <div className="home">
            <form className="home__form">
                <h2>Website Aggregator</h2>
                <label htmlFor="url">Provide the website URL</label>
                <input
                    type="url"
                    name="url"
                    id='url'
                    value={url}
                    onChange={(e) => setURL(e.target.value)}
                />
                <button onClick={handleSubmit}>ADD WEBSITE</button>
            </form>
            <main className="website__container ">
                {websiteContent.map((item) => (
                    <div className="website__item" key={item.id}>
                        <img src={item?.brandImage} alt={item?.brandName} />
                        <h3>{item?.brandName}</h3>
                        <p>{trimDescription(item?.brandDescription)}</p>
                    </div>
                ))}
            </main>
        </div>
    );
};

¡Felicitaciones! 🎉 Has completado el proyecto de este tutorial.

A continuación se muestra un ejemplo del resultado obtenido de la aplicación:

resultados

Conclusión

Hasta ahora hemos cubierto,

  • ¿Qué es Chat GPT?
  • cómo obtener contenido de un sitio web usando Titiritero, y
  • cómo comunicarse con ChatGPT en una aplicación Node.js

Este tutorial lo guía a través de una aplicación de muestra que puede crear con Puppeteer y ChatGPT. ChatGPT puede considerarse como el asistente personal definitivo que es muy útil en varios campos para permitirnos trabajar de manera más inteligente y mejor.

El código fuente de este tutorial está disponible aquí:

https://github.com/novuhq/blog/tree/main/website-aggregator-with-chatgpt-react

¡Gracias por la lectura!

Si quieres conocer otros artículos parecidos a Crea un agregador de sitios web con ChatGPT, React y Node.js puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas