Javier Campos .es https://javiercampos.es 👨‍💻 Fri, 25 Apr 2025 11:47:18 +0000 es hourly 1 https://wordpress.org/?v=6.5.8 https://i0.wp.com/javiercampos.es/wp-content/uploads/2018/03/cropped-iconfinder_icon-battery-charging_211627.png?fit=32%2C32&ssl=1 Javier Campos .es https://javiercampos.es 32 32 171701945 «Stones in a jar», Chrome extension y web de organización personal (desarrollo con Copilot) https://javiercampos.es/blog/2025/04/25/stones-in-a-jar-chrome-extension-y-web-de-organizacion-personal-desarrollo-con-copilot/ https://javiercampos.es/blog/2025/04/25/stones-in-a-jar-chrome-extension-y-web-de-organizacion-personal-desarrollo-con-copilot/#comments Fri, 25 Apr 2025 11:47:18 +0000 https://javiercampos.es/?p=73895 «Stones in a Jar» es un sencillo proyecto de Chrome Extension y página web sin backend, que permite a los usuarios gestionar y visualizar «piedras» dentro de un tarro virtual. Los usuarios pueden añadir piedras con diferentes tamaños y colores, representando tareas o elementos personalizados, y organizarlas dentro del tarro interactivo.

🤖+👨‍💻 La particularidad de este proyecto es que he documentado en el repositorio (https://github.com/javichur/jar-extension) todos los prompts que he utilizado. Cada commit especifica la contribución de humano y la contribución de Copilot Agent con GPT-4o en vscode. Se incluyen los Prompts en los commits, así como los bugs/tareas que no pude resolver con Copilot.

En la versión web, los usuarios pueden compartir en forma de link un snapshot de su tarro.

El tiempo total invertido, desde la idea hasta este post: ~3h. No pude resolver el 100% del proyecto con prompts (ver detalle en los commits), pero en este proyecto Copilot aceleró el desarrollo.

Puedes crear y compartir tu propio tarro aquí: https://javiercampos.es/projects/stonesinajar

Mi tarro pinchando aquí 😀

]]>
https://javiercampos.es/blog/2025/04/25/stones-in-a-jar-chrome-extension-y-web-de-organizacion-personal-desarrollo-con-copilot/feed/ 1 73895
Libros recomendados (VII) https://javiercampos.es/blog/2025/04/23/libros-recomendados-vii/ https://javiercampos.es/blog/2025/04/23/libros-recomendados-vii/#respond Wed, 23 Apr 2025 16:10:38 +0000 https://javiercampos.es/?p=73880 ¡Feliz Día del Libro 2025! Estos son algunos de los libros que he leído en los últimos meses y que me han gustado.

Como en los listados anteriores (libros recomendados I 🔗II 🔗III 🔗IV 🔗V 🔗 y VI 🔗), hay una mezcla de novelas, biografías, filosofía, libros técnicos de informática (deep learning, system design, software design pattern…), de gestión de equipos y otras disciplinas.

El valor de la atención: por qué nos la robaron y cómo recuperarla
De Johan Hari

Elon Musk
De Walter Isaacson

Viajes interestelares. Historia de las sondas Voyager
De Pedro León

Más libros y menos pantallas. Cómo acabar con los cretinos digitales
De Michel Desmurget

Ciudad clickbait: Cuando buscar casa en tu ciudad se volvió una pesadilla
De Vicent Molins

]]>
https://javiercampos.es/blog/2025/04/23/libros-recomendados-vii/feed/ 0 73880
«Clickbait fixer» chrome extension actualizada: ejecuta tus propios prompts antes de abrir un link https://javiercampos.es/blog/2025/04/01/clickbait-fixer-chrome-extension-actualizada-ejecuta-tus-propios-prompts-antes-de-abrir-un-link/ https://javiercampos.es/blog/2025/04/01/clickbait-fixer-chrome-extension-actualizada-ejecuta-tus-propios-prompts-antes-de-abrir-un-link/#respond Tue, 01 Apr 2025 13:48:43 +0000 https://javiercampos.es/?p=73863 He actualizado la extensión de Chrome «Clickbait Fixer» para que puedas añadir tus propios prompts. Esos prompts se ejecutarán sobre el contenido de la página de destino de un link sin tener que abrir tú dicho link.

La funcionalidad principal de esta extensión de Chrome es detectar y corregir Clickbaits, para ahorrarte clicks y evitar que pierdas tiempo en noticias que podían resumirse en un titular.

Ejemplos de custom prompts (puedes poner el prompt que tú quieras desde la página de Configuración de la chrome extension, o escribirlo en el momento al clicar en el Context Menu llamado «ask anything»):

  • Dime las 5 W’s del periodismos en un único titular sin clickbait.
  • Cuál fue el resultado final y qué jugadores marcaron.
  • En qué ciudad y cuándo pasó esto.
  • Quién escribió esto.

Para ejecutar tus custom prompts, símplemente actualiza la chrome extension, indica tu prompt en la pantalla de configuración, y pulsa el botón derecho sobre cualquier link de internet:

 

Además, también estará disponible el Context Menú item «ask anything» para escribir cualquier prompt al momento:

Aspecto de la pantalla de configuración de Clickbait Fixer, con la nueva sección para tu prompt personalizado repetitivo:

Este proyecto es open source, gratis, se ejecuta en local en tu ordenador, y nació gracias a un hackathon. La info sobre la primera versión de esta chrome extension la tienes aquí: https://javiercampos.es/blog/2025/02/05/ai-project-clickbait-fixer-the-chrome-extension-that-detects-and-fixes-clickbait-links-in-any-website-with-ai-locally/

Esta versión también es ligeramente mejor que la original porque ahora utiliza @mozilla/readability para limpiar el código HTML de las páginas de destino y quedarse solo con la información imprimible (en lugar de utilizar un limpiador de HTLM sencillo ad-hoc que implementé en el pasado). Esa información imprimible es la que se analiza en local para obtener con IA el resumen (y para contestar con IA a tus custom prompts).

Puedes descargar directamente el fichero zip de la chrome extension aquí: https://github.com/javichur/clickbait-fixer-chrome-extension/releases/download/v.0.3.0/clickbait-fixer-chrome-extension-v0.3.0.zip . Recuerda que esta extensión utiliza funcionalidad experimental de Chrome para ejecutar LLMs en local (mira los pre-requisitos y activa los flags necesarios, aquí: https://javiercampos.es/blog/2025/02/05/ai-project-clickbait-fixer-the-chrome-extension-that-detects-and-fixes-clickbait-links-in-any-website-with-ai-locally/).

Bonus: esta versión también incluye la detección del patrón adictivo «scroll infinito» en las páginas que visitas, y te ayuda a salir de él con un mensaje de alerta (puedes deshabilitarlo desde la sección Configuración de la extensión chrome):

 

]]>
https://javiercampos.es/blog/2025/04/01/clickbait-fixer-chrome-extension-actualizada-ejecuta-tus-propios-prompts-antes-de-abrir-un-link/feed/ 0 73863
Cómo creé con IA una marca de camisetas, tazas, carcasas… (AI Agents y más) https://javiercampos.es/blog/2025/03/27/como-cree-con-ia-una-marca-de-camisetas-tazas-carcasas-ai-agents-y-mas/ https://javiercampos.es/blog/2025/03/27/como-cree-con-ia-una-marca-de-camisetas-tazas-carcasas-ai-agents-y-mas/#comments Thu, 27 Mar 2025 12:44:18 +0000 https://javiercampos.es/?p=73832 Disclaimer: Sin la IA generativa actual, esta idea de side project habría sido solo 1 idea abandonada en un cajón (por falta de tiempo y por mi falta de skills de diseño, por ejemplo). Pero gracias a la IA generativa fue una realidad en un fin de semana (MVP). The LP Brand (thelpbrand.com) fue un 1-person-side-project y algunos amigos me compraron camisetas. Esto no significa que vayan a desaparecer ya por culpa de la IA todos los roles de diseño, programación, investigación o gestión, pero desde ya hay cosas que antes no podías hacer y ahora sí (con IA); y desde ya hay cosas que con IA puedes hacer más rápido.

En este artículo te cuento lo que aprendí y cómo usé la IA (librerías, servicios, etc). Comparto el código de los AI Agents en github. Espero que te sirva. Si aún no estás jugando con AI Agents, espero que te motive a hacer alguna prueba de concepto.

Si tienes cualquier duda o sugerencia, escríbeme en comentarios, Linkedin o al email.

🤔 El problema que quería resolver

Contexto: Los Principios de Liderazgo son los valores, creencias y comportamientos que guían a líderes y organizaciones. Puedes descubrir principios de liderazgo escuchando entrevistas a CEOs de algunas organizaciones o en la Cultura de cada empresa.

Algunos ejemplos de Principios de Liderezgo son: «Think Big» (Amazon); «Las cosas de largo se financian a largo» (José Elías); «Move faster. Slowness anywhere justifies slowness everywhere» (Sam Altman, CEO OpenAI).

A veces, cuando escuchas un principio de liderazgo por primera vez, piensas: «Vaya! Estoy de acuerdo! Este princpio me sirve para mi vida/trabajo, ojalá haberlo conocido antes».

El problema es que los Principios de Liderazgo no son mainstream.

💡La idea

La idea: convertir los Principios de Liderazgo en algo visual, unirlo a otros conceptos trending, y que el resultado pueda llevarse en una camiseta o carcasa de móvil.

Por ejemplo, el principio «Think Big» tiene sentido en Amazon, pero «Think Big» también es lo que pensaron en Valencia (España) en 1992, cuando construyeron una paella 🥘 gigante de 20 metros para dar de comer a 100.000 personas y que fue Récord Guinness. Desde entonces, las paellas gigantes que quieren superar el récord se cocinan con grúas amarillas.

Foto real de paella valenciana gigante, Valencia 1992.
Foto real de otra paella valenciana de récord.

¡La paella gigante, la grúa amarilla y «Think Big» serían los ingredientes del primer diseño en este proyecto! Podrás verlo más abajo.

 

🏗 La solución

Después de pensar un nombre (The LP Brand), pedí en febrero de 2024 a ChatGPT que generara un logo con DALL·E 3. Después de muchos (muchos) intentos, estoy muy contento con el resultado:

El prompt que utilicé para el logo:

Imagina que eres un experto diseñador de logotipos para marcas. Te voy a pagar por hacer el siguiente trabajo, pero tienes que hacerlo de forma excelente. Respira hondo y diseña un logotipo para la marca llamada “the LP brand”. Su página web es “thelpbrand.com”, por lo que podrías añadir “.com” en el logotipo. El logotipo tiene que ser en color negro sobre blanco. La marca se dedica a transmitir los principios de liderazgo de las principales organizaciones del planeta. El logotipo debe ser fácil de leer incluso en tamaño pequeño, ya que se usará en diseño de camisetas, donde ocupará una superficie aproximada de 3×3 cm.

No hace falta que generes el logotipo ya. Es decir, si piensas que necesitas hacerme más preguntas para poder diseñar el logotipo adecuado, hazme las preguntas antes de generar el logotipo.

Ten mucho cuidado con las letras, específicamente:
– no cometas faltas de ortografía. Ya te he dicho el nombre de la marca, respeta ese nombre.
– no dupliques letras de forma consecutiva.
– el logotipo debería poder ser leído sin dificultad por un niño de 6 años.

 

A continuación utilicé también ChatGPT con DALL·E 3 para crear el diseño de Think Big y la paella. Aún tengo decenas de intentos guardados en la galería del teléfono. Los principales problemas fueron: faltas de ortografía, ingredientes extraños en la paella, o que el diseño salía cortado e iba a quedar muy mal en una camiseta o carcasa móvil. Para carcasa móvil funcionó muy bien añadir en el prompt «diseña un sticker».

Uno de los prompts que utilicé para la paella:

Diseña una ilustración para una pegatina, de una paella valenciana gigante, que esté siendo cocinada por una excavadora amarilla. Los ingredientes de esa paella son arroz amarillo, pollo y verdura verde. Integra en la ilustración la frase “Think Big”. Que no haya un corte brusco de la imagen en los 4 bordes de la imagen cuadrada; sino que yo pueda imprimir la imagen en una pegatina de contorno irregular, sin que se noten los 4 bordes.

Y el resultado que más me gustó para camiseta:

Think Big y paella gigante con excavadora. Imagen generada con IA. TheLPbrand.com

 

«Think Big», diseño para camiseta de paella gigante y grúa voladora.

En carcasa de móvil utilicé otro resultado, más estilo pegatina:

«Think Big», diseño para carcasa de móvil de paella gigante y grúa.

Para imprimir los diseños en camisetas, tazas, carcasas de móvil etc… te recomiendo probar:

… y mandarte algunos productos de prueba a casa a ver cómo quedan las impresiones. Depende del tamaño al que vayas a colocar tu diseño en el soporte, pero la resolución es importante. Se recomienda mínimo 200-300 Puntos por Pulgada (DPI) en impresión, te avisan en la plataforma online.

Luego seguí con otros Principios de Liderazgo, como «Bias for Action» (Amazon). Me imaginaba a un gato empujando algo de la mesa:

Bias for action, gato. Imagen generada con IA. TheLPbrand.com

O «Move faster» (Sam Altman, OpenAI), con un diseño de runner y montañas al fondo:

«Move faster», runner. Imagen generada con IA. TheLPbrand.com

 

Cuando ya tenía unos cuantos diseños, le pedí a ChatGPT que crease la web para mostrar el catálogo, no para vender (abril 2024). El resultado es este: https://www.thelpbrand.com . Es exactamente como la imaginaba, pero 1) requirió darle los requisitos poco a poco en cada iteración; 2) hubo errores en el código que cuando ChatGPT los intentaba arreglar, simplemente rompía otra cosa. Aún así, usar ChatGPT aquí fue más rápido que hacerla a mano. Lección aprendida: hoy usaría otra tool integrada en el IDE, en lugar de ChatGPT.

La web generada con IA (no es un e-commerce; es una web estática).

Para validar la idea, publiqué los diseños en instagram (https://www.instagram.com/thelpbrand_com), y aprendí cómo vender a través de:

Y vendí algunas camisetas a amigos la primera semana. ¡Un éxito! Y aparqué el proyecto. Pero creo que es un proyecto bonito y con potencial, escríbeme si quieres conversar sobre esto.

 

🤖 AI Agents

En los diseños explicados arriba, había un trabajo humano 🙋‍♀️ de escoger un Principio de Liderazgo, relacionarlo de alguna manera con algo más mainstream (ie: un gato, una paella), y escribir un prompt para generar una imagen (que junte el Principio de Liderazgo y el concepto trending en algo que quieras llevar en una camiseta, taza o carcasa de móvil).

¿Y si esa parte humana la pudiera hacer también la IA 🤖?

Y aquí es donde he aprendido a usar AI Agents. He usado el framework open source CrewAI y LM Studio para ejecutar modelos pequeños en local. Como alternativa para la ejecución de los modelos en local se puede usar ollama en lugar de LM Studio.

LM Studio permite probar con interfaz amigable múltiples LLM en local (siempre que quepan en tu hardware), y servirlos a tus aplicaciones en local.

En el ejemplo de abajo he usado el modelo en local meta-llama-3.1-8b-instruct.

La siguiente imagen muestra el flujo de agentes IA, desde los que eligen autónomamente una lista de Principios de Liderazgo y una lista de tendencias de diseño en moda; hasta el agente que genera el prompt para DALL·E 3, pasando por el agente que «junta» un Principio de Liderazgo con algo trending; o el agente que simula al usuario potencial:

En el diagrama de arriba, los agentes escogen un principio de liderazgo de Richard Branson «You don’t learn to walk by following rules. You learn by doing, and by falling over», y lo juntan con el diseño trending para moda «cactus», para crear el concepto de un cactus feliz andando.

La imagen resultante está generada con DALL·E 3 a partir del prompt. Es una imagen que da un poco de miedo y tiene alguna errata en la cita, pero fue el primer disparo. Para resolver esto, se permite introducir «human input» para dar feedback a algunos de los agentes y a DALL·E 3.

A futuro, para obtener mejores resultados, los siguientes pasos que recomendaría son:

1) Ajustar los prompts (es decir, la descripción de los agentes y sus tareas);

2) Conectar los 2 primeros agentes a tools para evitar alucinaciones y para que devuelvan información más fresca (ie: trending fashion designs de 2026; o nuevos Principios de Liderazgo). He comprobado que modelos pequeños como DeepSeek R1 Distil Qwen 7B generan muchas alucinaciones en los Principios de Liderazgo. Estas tools para buscar en internet pueden ser, por ejemplo: Brave Search API .

3) Utilizar modelos más grandes que actualmente no caben en mi hardware, posiblemente ejecutados en un servicio en la nube.

 

Aquí algunos ejemplos de los agentes en ejecución:

AI Agent – Fashion researcher

 

AI Agent – Leadership Principles researcher. Cuidado con las alucinaciones en este agente si no se utiliza un modelo grande o si no se usa tool de internet search.

 

AI Agent – Creative Director

 

AI Agent – Usuario potencial (para saber si el diseño para la camiseta le gusta o no).

 

AI Agent – Prompt designer.

 

Completado!

 

¿Qué te ha parecido? ¿Estás incorporando IA o AI agents en tus proyectos? ¿Tienes alguna sugerencia de mejora? Te leo!

]]>
https://javiercampos.es/blog/2025/03/27/como-cree-con-ia-una-marca-de-camisetas-tazas-carcasas-ai-agents-y-mas/feed/ 1 73832
«Salerificar» playas de Valencia para protegerse del calor https://javiercampos.es/blog/2025/03/26/salerificar-playas-de-valencia-para-protegerse-del-calor/ https://javiercampos.es/blog/2025/03/26/salerificar-playas-de-valencia-para-protegerse-del-calor/#comments Wed, 26 Mar 2025 17:57:08 +0000 https://javiercampos.es/?p=73823 «Salerificar» es una palabra que me acabo de inventar para explicar la siguiente idea: plantar algunos árboles autóctonos en las playas urbanas de Valencia, para proporcionar sombra, pero sin molestar a los que actualmente van a la playa para tomar el sol, pasear o hacer deporte. Como de forma natural sucede ya en La Dehesa del Saler, al sur de Valencia, dentro del Parque Natural de la Albufera.

Las playas urbanas de Las Arenas y la Malvarrosa en Valencia ciudad tienen una anchura, desde el paseo marítimo hasta el agua, de hasta 200 metros.

Playa de Las Arenas, Valencia.

Esta profundidad de arena ha crecido durante los últimos años. Hace un siglo había casi cero metros de arena, como se observa en las fotos antiguas del Balneario de las Arenas (ubicado donde el actual Hotel Las Arenas). La poca arena que se ve en esa postal es hoy prácticamente el actual paseo marítimo.

Foto antigua del Balneario de Las Arenas (fuente: postalesdevalencia).

 

En la zona de la playa de las Arenas próxima a los restaurantes del paseo Neptuno, hay actualmente un grupo de palmeras dentro de la arena, quizá a modo de MVP 😀

Foto real de palmeras en Las Arenas.

Lo siguiente son unos ejemplos de la idea «Salerificar», generados rápidamente con IA (herramienta: Google AI Studio):

Árboles puestos con IA en playa de Las Arenas de Valencia.
Árboles y gente puestos con IA en playa de Las Arenas de Valencia.

No sé si «reforestación costera» sería un sinónimo válido aquí para el término «salerificar», ya que en esas playas no hubo antes vegetación.

¿Qué opinas? ¿Crees que la falta de sombra y el calor es un problema en la zona? ¿Te gusta la idea? ¿Es viable? ¿Has probado ya Google AI Studio para generación de imágenes?

 

]]>
https://javiercampos.es/blog/2025/03/26/salerificar-playas-de-valencia-para-protegerse-del-calor/feed/ 1 73823
Cosas que no pude dibujar con IA en 2025 https://javiercampos.es/blog/2025/03/10/cosas-que-no-pude-dibujar-con-ia-en-2025/ https://javiercampos.es/blog/2025/03/10/cosas-que-no-pude-dibujar-con-ia-en-2025/#comments Mon, 10 Mar 2025 18:22:40 +0000 https://javiercampos.es/?p=73803 Aquí recopilo las imágenes que no he podido crear con IA generativa en 2025. En estos ejemplos no conseguí que el resultado se ajustara a la descripción del prompt.

Prompt: «crea una imagen de un surfista surfeando una ola subido en una puerta en lugar de en una tabla de surf. En la puerta pone ‘frugality'».
Resultados:

Prompt: «dibuja la silueta de una serpiente que se ha comido una bicicleta sin masticarla. Es decir, como la famosa silueta de El Principito, en la que una serpiente se ha comido un elefante y el resultado parece un sombrero, pero sustituyendo al elefante por una bicicleta».
Resultados:

Bonus: Otro famoso prompt que no suele funcionar aún (no es mío sino visto en twitter), es «horse riding an astronaut in space».

Resultados:

Los productos de IA generativa text-to-image que he probado sin éxito para estos prompts son: DALL-E 3, Copilot, Leonardo AI y Freepik. Las imágenes de arriba son solo una muestra, probé muchas veces sin éxito con pequeñas variaciones en los prompts.

¿Qué opinas? ¿Has sido capaz de obtener con IA el resultado esperado para estos prompts? ¿Lo has conseguido ajustando los prompts? ¿Qué modelo de IA generativa es el que mejor te ha funcionado? ¿Hay algún otro prompt que se te resiste? ¡Te leo! 👇

]]>
https://javiercampos.es/blog/2025/03/10/cosas-que-no-pude-dibujar-con-ia-en-2025/feed/ 1 73803
Esta mascletá no existe (IA generativa no-code) https://javiercampos.es/blog/2025/03/07/esta-mascleta-no-existe-ia-generativa-no-code/ https://javiercampos.es/blog/2025/03/07/esta-mascleta-no-existe-ia-generativa-no-code/#respond Fri, 07 Mar 2025 16:30:56 +0000 https://javiercampos.es/?p=73791 Esta prueba de concepto es de hace un tiempo, pero como ahora estamos en Fallas, me ha parecido buen momento para explicarlo.

TL;DR: si quieres saber rápidamente cómo generar el sonido de una mascletá (mascletà en valenciano) sin escribir código, mira el vídeo del final.

Pensé en la idea de generar sonidos de mascletá con IA a mediados de 2020. Un año antes habían empezado a ponerse de moda páginas como ThisPersonDoesNotExist.com, que utilizaban redes generativas adversarias (GAN) para crear imágenes de caras.

Así, durante el confinamiento entrené en Google Colab una GAN con fotos de paellas de instagram para crear imágenes de paellas que no existían. El resultado no estaba mal para un primer proyecto de GAN en python, pero es horrible si se compara con las imágenes que hoy generamos con DALL-E 3, Leonardo AI, Freepik AI, etc… 😂 . Las herramientas actuales son capaces de crear imágenes de muchas cosas a partir de un prompt, mientras que las GAN se entrenan con un único tipo de imagen (ie: fotos de paellas), no reciben un prompt pero solo pueden crear un tipo de imágenes (las paellas).

En 2020, las Fallas se cancelaron debido a la pandemia y no hubieron Mascletás. Después del experimento de paellas con IA, pensé que estaría guay tener una página tipo ThisMascletaDoesNotExist.com (no lo compré xD) para generar las mascletás que no sonaron en 2020. Busqué si alguien estaba ya entrenando GANs con audio en lugar de imágenes, pero no encontré ningún notebook ni script python al respecto. Mientras descargué sonidos de mascletás de 2019 de la radio. Encontré este post que explicaba cómo obtener el espectrograma de una pista de audio con python.

En este punto, la idea que quería implementar consistía en entrenar una GAN con imágenes de espectrogramas de mascletás, que la red fuera capaz de generar nuevos espectrogramas de mascletás y finalmente convertir en audio dichos espectrogramas, para ver si sonaban o no a mascletá.

Pero no seguí este proyecto y acabó en un cajón…

… hasta 3 años después (2023). Ese año escuché nuevas tools de generación de audio (ie: https://www.stableaudio.com/; https://audiobox.metademolab.com/; https://www.jenmusic.ai/research) y quise probarlas para generar mascletás. Algunas de estas tools estaban entrenadas solo para generar voz o música, por lo que no servían para crear mascletás. Pero la tool Audiobox de Meta está entrenada para generar sonidos a partir de texto.

Lo primero que probé en Audiobox fue un prompt similar a «crea el sonido de una mascletá», lo cual no funcionó. Audibox no sabía lo que era una mascletá. Entonces utilicé ChatGPT para crear un prompt que describiera el sonido de una mascletá:

Y al pasarle el prompt resultante a Audiobox, escuchamos lo que posiblemente sea la primera mascletá generada con IA 🧨🧨🧨 . Sube el volumen del siguiente vídeo:

]]>
https://javiercampos.es/blog/2025/03/07/esta-mascleta-no-existe-ia-generativa-no-code/feed/ 0 73791
AI project: Clickbait Fixer, the Chrome Extension that detects and fixes clickbait links in any website with AI locally https://javiercampos.es/blog/2025/02/05/ai-project-clickbait-fixer-the-chrome-extension-that-detects-and-fixes-clickbait-links-in-any-website-with-ai-locally/ https://javiercampos.es/blog/2025/02/05/ai-project-clickbait-fixer-the-chrome-extension-that-detects-and-fixes-clickbait-links-in-any-website-with-ai-locally/#comments Wed, 05 Feb 2025 13:30:23 +0000 https://javiercampos.es/?p=73778 This project was created originally during the Google Chrome Built-in AI Challenge. More info and code source below.

Clickbait Fixer is the Chrome Extension that detects and fixes clickbait links in any website with AI locally!

💡 Inspiration

Clickbait is everywhere online these days. It’s those over-the-top or misleading headlines that make you want to click, but the content rarely lives up to the hype. Sure, it can get tons of views, but it’s super frustrating because it wastes your time and sometimes spreads misinformation. Plus, it makes people trust online content less and less. It’s something we need to call out and avoid if we want the internet to be a better, more honest space.

Could a Large Language Model (LLM) detect from a headline whether it is clickbait or not? And if it can do so, could it be run locally to 1) have minimal latency that does not affect our speed while reading news; 2) not involve additional costs for the user; 3) not impact privacy?

✨ What it does

«Clickbait Fixer» is a Chrome Extension that detects and fixes clickbait links in any website with AI locally! You can choose between a specific link (right click on it to detect clickbait and fix it); or analyze an entire website in 1 click to get the «Clickbait score» of that website. Built with Chrome Built-in AI: Prompt API and Summarization API.

Key features

  1. Scans the links of any website, and marks the clickbaits in red and the headlines that are not clickbait in green. To do this, it uses a local AI API (Prompt API).
  2. Based on the number of clickbaits on the website, it generates a clickbait score for that website. The score will be a value between 0 (all links are clickbaits) and 100 (no clickbaits).
  3. It adds an awesome tooltip to each link, with the following information: why it is or is not clickbait; and a non-clickbait alternative headline suggestion.
  4. You read that right! The non-clickbait alternative title suggestion is generated by automatically downloading the link destination and summarizing it locally (Summarization API).
  5. You can use the Extension icon (popup) to scan all the links in the current web; or just click right over a link and select the Clickbait fixer option in the context menu to analyze only that link.

🏗 How we built it

This Chrome extension uses Built-in AI APIs to detect whether any link is clickbait or not (PromptAPI) and suggests non-clickbait links by downloading the link destination and summarizing it (SummarizationAPI).

To easily indicate whether a link is clickbait or not, content is injected into the page to mark each headline in red or green; and a tooltip is also injected when customer hovers those links.

As for the Chrome Extension, it is worth noting that: it has a popup from which you can perform an analysis of an entire web page and obtain its «Clickbait score» (from 0 to 100; 100 is the best). From the popup you can also see if your web browser is compatible or if the AI ​​model is being downloaded. There is also a configuration section to indicate the maximum number of links that will be analyzed in full scans.

When a link is clickbait and the user hovers over it again, a tooltip is displayed with the explanation and an alternative non-clickbait headline. To generate this alternative title, the link destination is first fetched with Ajax, its content is filtered (ie: prioritize «p» tags) and summarized with SummarizationAPI.

Last but not least, the Chrome Extension has a ContextMenu to analyze any specific link (right click on any link) without full scan required.

This Chrome Extension uses messages for communicating between components: sending messages from Content to Popup; and messages from Background to Content.

Prerequisites

This project uses experimental Chrome APIs to leverage AI locally. You have to enable these features in your Chrome browser before using this Chrome extension:

  1. Open a new tab in Chrome, go to 
    chrome://flags/#optimization-guide-on-device-model

    . Select there 

    Enabled BypassPerfRequirement

    .

  2. For Prompt API 
    chrome://flags/#prompt-api-for-gemini-nano

     (Prompt API is available, behind an experimental flag, from Chrome 127+ on desktop platforms). Select there 

    Enabled

    .

  3. For Summarization API 
    chrome://flags/#summarization-api-for-gemini-nano

     (Summarization API is available behind an experimental flag, from Chrome 129+ on desktop platforms).

🤯 Challenges we ran into

  • To get the suggested non-clickbait headline, my first attempt was to also use «PromptAPI», but I eventually discarded it and got good results with «SummarizationAPI».
  • Prompt API works well in the role of identifying whether a headline is clickbait or not, even with a simple prompt. But I wanted the PromptAPI output to be directly in JSON format and that made development a bit longer. As a lesson learned, I think I would have stopped sooner by asking PrompAPI for a simpler output format (ie: «isClickbait (separator) explanation»).
  • Detecting all the links on any website that are eligible for analysis was also a challenge. Detecting these links is done using filters in the DOM of the page.
  • Debugging Chrome Extension was a bit of a challenge too, compared to regular web debugging, since the web dev console and the extension dev console (ie: extension popup) are 2 different consoles.

🙌 Accomplishments that we’re proud of

I’m very proud of the purpose and UX of this Chrome extension. It’s solving a real problem and doing it in a user-friendly way, without limiting how the user usually navigates news pages, but empowering the user with the red/green highlighting of clickbai/non-clickbait headlines and with the useful tooltip in each link.

The user can do a full scan of a page to get the score of the page and know if it’s a media that promotes clickbait or not. But users can also navigate without scanning a page and simply use the right click to analyze specific links. This solution is very non-intrusive and very easy to learn.

🧑‍🎓 What we learned

I learned a lot about:

  • Built-in AI in Chrome (specifically about the APIs I used and the others; how to manage errors and how to download the model if they are not downloaded),
  • Chrome Extensions (ie: sending messages from Content to Popup; and messages from Background to Content; Context Menu; etc).
  • Prompting, since I iterated the prompt to get if a given link is clickbait or not.
  • Filters in the DOM to find links;
  • Sanitizing the Prompt API response to convert it to JSON.

🔜 What’s next for Clickbait Fixer

  • Multilingual UI to reach more users. I’ve found that Built AI APIs work well with multiple languages, so this next step would focus on translating the UI only.
  • Sometimes the non-clickbait headline suggested by AI is very long, even if I use the «headline» and «short» parameters. As next steps I want to try more parameter combinations or even use PromptAPI with the output of SummarizationAPI.

Instructions

  1. Go to any online newspaper (ie: https://apnews.com/ (English) or https://lasprovincias.es (Spanish)).
  2. Hover over any link in the newspaper, right-click and choose the option «Check if the link is clickbait».
  3. The link text will instantly be marked red or green (clickbait or not; classification made with Prompt API locally).
  4. Hover over the link again to see the tooltip.
  5. If the link was marked as clickbait, then in the tooltip you will also see a suggestion for a non-clickbait headline (headline obtained by downloading the target page and summarizing it with Summatization API).
  6. Also use the Chrome Extension button (in the browser bar), to 1) do a full scan of the page and get its «clickbait score»; 2) access the extension settings.

🔗 Links

]]>
https://javiercampos.es/blog/2025/02/05/ai-project-clickbait-fixer-the-chrome-extension-that-detects-and-fixes-clickbait-links-in-any-website-with-ai-locally/feed/ 2 73778
3er Premio en Hackathon de AWS & Intel: Ayudando a luchar contra la desinformación, utilizando ML y noticias de meneame.net https://javiercampos.es/blog/2022/04/03/tercer-premio-en-hackathon-de-aws-intel-luchar-contra-desinformacion-modelo-predictivo-entrenado-noticias-meneame-net/ https://javiercampos.es/blog/2022/04/03/tercer-premio-en-hackathon-de-aws-intel-luchar-contra-desinformacion-modelo-predictivo-entrenado-noticias-meneame-net/#respond Sun, 03 Apr 2022 09:35:33 +0000 https://javiercampos.es/?p=73750 Hace unos días participé en el Hackathon Iberia, organizado por AWS e Intel. Este es el proyecto con el que quedé en tercera posición 🥉.

Objetivo del Hackathon:

Es un Hackathon for Good, en concreto se buscaban soluciones (apps o análisis de datos) que resolvieran problemas relacionados con Sostenibilidad y Medioambiente, Inclusión y Accesibilidad, o Colectivos Desfavorecidos. Más info en la web oficial 🔗.

 

Proyecto presentado:

El código fuente del proyecto y el dataset creado los he dejado disponibles en este repositorio de github 🔗.

 

❓ Problema que se quiere resolver

La desinformación (o fake news) es la información errónea que se da, generalmente de manera intencionada.

Esta desinformación perjudica frecuentemente a colectivos desfavorecidos, como inmigrantes, refugiados, pobres, niños, adolescentes, ancianos, mujeres víctimas de violencia de género, personas con discapacidad…

🏋️‍♀️ Impacto Social

 

💡 Solución propuesta

Nuestro objetivo es, a partir de una secuencia de entrada (ejemplo: el título de una noticia), ayudar a identificar si es potencialmente:

  • a) 🥸 Desinformación,
  • b) ⚠ Una noticia relevante,
  • c) 💤 Una noticia no interesante.

Para ello, primero generaremos un Dataset de noticias de Meneame.net, las cuales están accesibles de forma pública a través de internet. Meneame.net es un portal donde los usuarios envían noticias y los usuarios votan las más interesantes (con «meneos» positivos o votos negativos).

En Meneame.net hay casi 4 Millones de noticias, cada una de las cuales puede estar en 1 de estos estados:

  • «Publicada», es una noticia que ha recibido muchos votos positivos y pocos votos negativos en proporción, por tanto se considera una noticia con probabilidad muy alta de ser veraz y relevante. Un ejemplo:

ejemplo-noticia-publicada.png

  • «Descartada»: es una noticia que ha recibido muchos votos negativos y ya no aparece en la web ni puede recibir más votos. Suele ser una noticia falsa, clickbait (que solo busca el click) o duplicada. Un ejemplo:

ejemplo-noticia-descartada.png

  • Encolada (pendiente de publicarse en portada): es una noticia que aún no ha sido publicada en la portada porque no ha recibido suficientes votos positivos en comparación con el nº de votos negativos. En este estado pueden haber noticias de 2 tipos: noticias poco interesantes (sin casi votos) o noticias polémicas (muchos votos positivos y muchos votos negativos). Los 2 ejemplos:

ejemplo-noticia-encolada-con-pocos-votos.png

ejemplo-noticia-encolada-con-muchos-votos-negativos-y-meneos.png

  • «Abuse»: son las noticias que incumplen las normas de uso de Meneame (ejemplo: spam). Existen muy pocas noticias en esta categoría, omitiremos esta categoría en el entrenamiento de la red neuronal.

  • Auto descartadas: noticias que el propio usuario que las ha enviado las ha descartado después (normalmente, al darse cuenta que otro usuario la había publicado antes). Hay muy pocas noticias en esta categoría, omitiremos esta categoría en el entrenamiento de la red neuronal.

En este proyecto se propone utilizar Natural language processing (NLP), en concreto una red neuronal de tipo Transformer, para la clasificación de futuras noticias.

Como Dataset de entrenamiento se utilizarán las noticias de Meneame.net, las cuales son públicas. Se ha generado un Dataset con las noticias, y han sido automáticamente clasificadas en categorías (categorías: relevante, no relevante, polémica, descartada) a partir de las columnas del dataset (votos, votos negativos, estado).

Un esquema resumen:

meneame-predictions-small.png

En el repositorio de github encontrarás el cuarderno jupyter que puedes ejecutar paso a paso para generar el dataset, para entrenar el modelo y para evaluarlo.

 

⏭ Trabajo futuro y mejoras

Estas son algunas de las tareas que me gustaría hacer a futuro, ya que el Hackathon tiene duración limitada y no da tiempo a todo:

  • Ampliar el Dataset de meneame. Aunque eldataset que se ha generado durante el hackathon incluye deceneas de miles de noticias (etiquetadas como Relevante, no interesante, descartada o polémica), aún se puede ampliar dicho dataset hasta llegar a los 4 millones de noticias que hay registradas en Meneame.net.
  • El dataset puede limpiarse para probar si el modelo entrena mejor y genera mejores predicciones. Por ejemplo, se puede quitar de los titulares los caracteres extraños, pasar a minúscula, etc…
  • Probar a concatenar el titular de la noticia y su entradilla, antes del entrenamiento.
  • Probar diferentes arquitecturas de Transformers y diferentes tamaños (ejemplos: BERT base, BERT large, RoBERTa base, RoBERTa large, etc…).
  • Ajustar los hiperparámetros del modelo. Este es uno de los pasos que más tiempo puede llevar hasta dar con la combinación óptima.
  • La parte de publicar la inferencia en SageMaker no me ha terminado de funcionar, posiblemente porque estoy creando mal el Docker. Sí que está funcionando la inferencia desde este cuaderno Jupyter.

 

Vídeo del anuncio de los ganadores:

]]>
https://javiercampos.es/blog/2022/04/03/tercer-premio-en-hackathon-de-aws-intel-luchar-contra-desinformacion-modelo-predictivo-entrenado-noticias-meneame-net/feed/ 0 73750
Probando a predecir incendios con Vision Transformer (ViT), imágenes de satélite (Sentinel) y SageMaker Studio Lab https://javiercampos.es/blog/2022/02/13/probando-a-predecir-incendios-con-vision-transformer-vit-imagenes-de-satelite-sentinel-y-sagemaker-studio-lab/ https://javiercampos.es/blog/2022/02/13/probando-a-predecir-incendios-con-vision-transformer-vit-imagenes-de-satelite-sentinel-y-sagemaker-studio-lab/#comments Sun, 13 Feb 2022 21:48:43 +0000 https://javiercampos.es/?p=73721 Idea desarrollada para el AWS Disaster Response Hackathon, donde había que proponer soluciones basadas en inteligencia artificial para mejorar la respuesta ante desastres naturales. El proyecto hay que compartirlo como open source y ejecutarlo en Amazon SageMaker Studio Lab (los cuadernos jupyter gratuitos de AWS con GPU).

👉 Descripción más detallada de la idea aquí 🔗.

👉 Código fuente listo para probarlo en Jupyter Notebook aquí 🔗.

La idea que he presentado consiste en leer un dataset de incendios geolocalizados, descartar las zonas urbanas/industriales para quedarse con los incendios forestales. A continuación descargamos automáticamente las imágenes de satélite Sentinel-2 de los instantes previos al inicio del incendio, y las recortamos para quedarnos solo con el trozo que se quemará. Después, utilizamos una red neuronal (Vision Transformer, ViT), para intentar entrenarla para que clasifique entre «zonas que potencialmente se quemarán en el futuro» y «zonas que potencialmente no se quemarán».

Tras el entrenamiento, podemos hacer predicciones subiendo una foto o bien seleccionando una latitud/longitud sobre el mapa.

El objetivo final de esta prueba de concepto es ayudar a anticiparse al inicio de un incendio.

A futuro, el modelo se puede entrenar con un dataset mucho mayor (para el ejemplo, lo he entrenado con muy pocos incendios, el dataset contiene millones más). También se puede trabajar en una red multimodal, que reciba como input, además de las imágenes, otros datos como temperatura, época del año, si es festivo o no, localidad cercana a la imagen, etc…

Qué he aprendido en este hackathon (y por qué animo a todo el mundo a participar en hackathones 🔗 para aprender):

    • ✅ Investigar los diferentes datasets disponibles de imágenes de satélite, comparar su frecuencia de actualización, precisión, sensores…
    • ✅ Utilizar mapas en jupyter notebook, concretamente Leaflet Maps, y otros widgets.
    • ✅ Trabajar con imágenes de satélite (recortar, transformar, convertir formato…)
    • ✅ Primer contacto con Vision Transformers (ViT), en lugar de usar una red Convolucional para la clasificación de imágenes.
    • ✅ Utilizar Amazon SageMaker Studio Lab, más allá de los ejemplos.
    • ✅ Programar algo nuevo en python 😀
    • ✅ Trabajar en un ejemplo de deep learning.

Cualquier feedback es bienvenido 🙂

]]>
https://javiercampos.es/blog/2022/02/13/probando-a-predecir-incendios-con-vision-transformer-vit-imagenes-de-satelite-sentinel-y-sagemaker-studio-lab/feed/ 1 73721