Acceder a la API de OpenAI con node

https://www.sitepoint.com/ai-javascript-research-assistant/

const { OpenAI } = require("openai");

const openai = new OpenAI({
      apiKey: "YOUR_OPENAI_API_KEY",
      dangerouslyAllowBrowser: true,
});

async function queryAIModel(question) {
  try {
    const completion = await openai.chat.completions.create({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a helpful research assistant." },
        { role: "user", content: question }
      ],
    });
    return completion.choices[0].message.content.trim();
  } catch (error) {
    console.error("An error occurred while querying GPT-4:", error);
    return "Sorry, an error occurred. Please try again.";
  }
}

async function queryResearchAssistant() {
  const query = "What is the role of JavaScript in building AI Applications?";
  const answer = await queryAIModel(query);
  console.log(`Question: ${query}\nAnswer: ${answer}`);
}

queryResearchAssistant();

Truco para eliminar listeners de funciones flechas

Básicamente cambiar el prototype para que internamente guarde un Symbol (id única) y nos permita eliminarlas:

(function()
{
    let target = EventTarget.prototype;
    let functionName = 'addEventListener';
    let func = target[functionName];

    let symbolHidden = Symbol('hidden');

    function hidden(instance)
    {
        if(instance[symbolHidden] === undefined)
        {
            let area = {};
            instance[symbolHidden] = area;
            return area;
        }

        return instance[symbolHidden];
    }

    function listenersFrom(instance)
    {
        let area = hidden(instance);
        if(!area.listeners) { area.listeners = []; }
        return area.listeners;
    }

    target[functionName] = function(type, listener)
    {
        let listeners = listenersFrom(this);

        listeners.push({ type, listener });

        func.apply(this, [type, listener]);
    };

    target['removeEventListeners'] = function(targetType)
    {
        let self = this;

        let listeners = listenersFrom(this);
        let removed = [];

        listeners.forEach(item =>
        {
            let type = item.type;
            let listener = item.listener;

            if(type == targetType)
            {
                self.removeEventListener(type, listener);
            }
        });
    };
})();

document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); });
document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); });
document.addEventListener("click", event => { console.log('click event'); });

document.dispatchEvent(new Event('DOMContentLoaded'));
document.removeEventListeners('DOMContentLoaded');
document.dispatchEvent(new Event('DOMContentLoaded'));

React, the beginning

Para empezar:

https://www.w3schools.com/react/default.asp

https://ibaslogic.com/react-tutorial-for-beginners/

https://leanpub.com/reactjsforthevisuallearner/read#leanpub-auto-chapter-1–what-is-this-all-about

Para seguir:

https://fullstackopen.com/es/about

Hooks:

https://css-tricks.com/react-hooks-the-deep-cuts/

https://usehooks.com/

https://www.freecodecamp.org/news/react-hooks-fundamentals/

Ebook:

Reactjs_Succinctly

Ejercicio typicode

Con la web https://jsonplaceholder.typicode.com/guide/ vamos a mostrar un selector de usuarios (con sus nombres) cuando seleccionemos uno nos mostrarán todos los ‘todos’ que tiene, cada uno tendrá a su lado un botón de editar y otro de borrar. También tendremos un botón de añadir un ‘todo’ a ese usuario.

Await vs then

async function showAvatar() {
			let img;
			// leer nuestro JSON
			fetch('https://es.javascript.info/article/promise-chaining/user.json')
				.then((response) => response.json())
				.then(res => {
					fetch(`https://api.github.com/users/${res.name}`)
						.then((response) => response.json())
						.then(result => {
							img=document.createElement('img');
							img.src=result.avatar_url;
							img.className="promise-avatar-example";
							document.body.append(img);
						});
				})


			// espera 3 segundos
			await new Promise((resolve, reject) => setTimeout(resolve, 3000));

			img.remove();

			//return githubUser;
		}
async function showAvatar() {

  // leer nuestro JSON
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();

  // leer usuario github
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();

  // muestra el avatar
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);

  // espera 3 segundos
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));

  img.remove();

  return githubUser;
}