Introducción
Como algunos ya sabrán, amo la personalización bastante. Soy fiel creyente de que la mejor herramienta es la que nosotros desarrollamos para nosotros mismos; y partiendo de esto, me gustaría presentarles una pequeña personalización que le he dado a ChatGPT creada con dos extensiones de Firefox, que si no lo sabían, es el navegador preferido en La Cueva del NeanderTech.
Hago hincapié en lo que menciono casi siempre en mis posts, quizá no a todos les sea útil, pero nunca está de más el compartirlo; quizá a alguno le motive a crear sus propias herramientas, y eso es lo que busco al crear estas aportaciones.
Motivación para hacerlo
A estas alturas no debería de ser un secreto el hecho de que me gustan las cosas personalizadas; sin embargo, también lo hice para poder practicar un poco y principalmente para no oxidarme, porque en esta carrera es mantenerse o quedarse atrás; y de momento prefiero mantenerme, aunque sea con cosas pequeñas como estas.
ChatGPT se ha vuelto un aliado a la hora de sacarme de apuros de cualquier tipo y por eso mismo decidí darle un toque más personal; y porque no, darle un giro a la funcionalidad para que se adapte mejor a mis necesidades.
Debido al gran uso que le doy a la plataforma, a veces necesito sacarle más provecho durante mis flujos de trabajo, y sí, existen muchas, muchas extensiones que ya me permiten eso, pero todas ellas solicitan un registro previo, y siendo sincero, ya no estoy para andar regando mis datos por aquí y por allá. Entiendo la razón por la cual lo hacen, y es que obviamente una extensión o cualquier aplicación o incluso funcionalidad requiere de un backend (eso lo vi durante el desarrollo de la mía).
Por eso decidí hacer mi propia herramienta gestora de prompts con juegos de azar y mujerzuelas... si, jamás me hartaré de ese chiste.
Herramientas utilizadas
De acuerdo, lo admito, utilicé extensiones de navegador para poder llevar a cabo esta implementación, pero ninguna de ellas necesita de un previo registro, por lo que no me causó ningún tipo de problema.
Stylish
Esta extensión es una de las clásicas, actualmente disponible para la mayoría de los navegadores, Stylish nos permite aplicar hojas de estilo CSS personalizadas a sitios web y a la interfaz del navegador. Básicamente, te da el poder de reescribir las reglas de diseño de cualquier página web, permitiéndote cambiar colores, fuentes, diseños y mucho más, definitivamente nuestra imaginación es el límite.
Lo que hace a Stylish especial es su enfoque en la personalización, actúa como un lienzo en blanco el cual está esperando a que nuestros tintes pintorescos y retorcidos diseños se mezclen con su esencia. Lo que en automático la convierte en una herramienta inestimable para los desarrolladores y cualquier persona que desee una experiencia en la web más personalizada.
Otra de las tantas fortalezas de Stylish es la comunidad activa, incluso ahora, a 18 años de su lanzamiento, siguen existiendo personas que no solo crean y comparten sus diseños, sino que también colaboran y se inspiran mutuamente, lo que ha dado lugar a una ENORME biblioteca de estilos predefinidos que podemos aplicar con un solo clic, abarcando desde pequeños ajustes hasta transformaciones completas de sitios populares.
Utilizar Stylish es sorprendentemente sencillo. Una vez instalada la extensión, puedes explorar y aplicar estilos creados por otros usuarios o incluso (como es mi caso) crear los propios. Si se conoce CSS, las posibilidades son prácticamente ilimitadas. Pero incluso si no eres un experto en CSS, siempre podemos disponer de los tantos y tantos diseños existentes.
Un clásico, la verdad. Lo he utilizado desde que comencé a navegar por la red, hace aproximadamente 15 años, empecé descargando temas de la propia comunidad para mi Firefox, pero hoy orgullosamente le puedo decir a mi yo niño de 10 años, que hemos creado nuestro propio estilo.
Tampermonkey
Otra de las clásicas, esta extensión actúa como un gestor de scripts de usuario. Esencialmente, nos permite ejecutar pequeños fragmentos de código JavaScript en páginas web específicas para modificar su comportamiento o incluso el diseño. Es más popular entre los usuarios de Google Chrome, o como le decimos en La Cueva del NeanderTech "RAMSnacker", aunque también está disponible para Firefox.
Se podría decir que esta extensión es para las personas que disfrutamos de tener control total sobre cómo interactuamos con los sitios web; ya que podemos alterar funcionalidades e incluso introducir nuevas características (como es el caso de hoy) de las páginas que deseemos.
Al igual que Stylish TamperMonkey cuenta con una comunidad bastante amplia y sobre todo activa, día tras día se van agregando nuevos scripts que los usuarios deciden compartir para que hagan uso de ellos, esto se puede traducir a que hay una gran cantidad de funcionalidades ya disponibles para que las pruebes.
Al ser JS, tampermonkey puede ser utilizado para automatizar tareas que se vuelven tediosas por lo repetitivas que son. Aunque debo de admitir que si no se tienen conocimientos básicos de JS es posible que se complique al principio, pero si sabemos lo mínimo, será suficiente para poder adentrarse en la creación de user_scripts.
Apariencia ChatGPT
No solamente me enfoqué a jugar con los colores de la interfaz de ChatGPT, sino que también le di un poco más de legibilidad (al menos para mí) a toda la página. Si recuerdan, la página original de ChatGPT es un poco estrecha en cuanto a su contenido. Como se puede ver en la parte de abajo.
Lo único que tuve que hacer es buscar la clase adecuada para aplicarle los estilos necesarios, en este caso fue la clase .xl\:max-w-3xl, .md\:max-w-3xl a la cual solo se le agregó un width: 100%;
Pero siento que se desperdicia un gran porcentaje de la pantalla, así que lo primero que hice fue hacer más ancho el contenedor principal, para que se adapte mejor a todas las pantallas y no desaprovechar ningún pixel.
Además de que cambié el diseño de cuando nos da un bloque de código, ya que el original no me gustaba mucho, así que lo cambié por uno que me pareció más atractivo. Este es el original.
Y este es el que yo hice.
No es nada del otro mundo, pero me gusta más que el original, le quite el contraste oscuro y le agregué un border.
Pero eso no era todo, quería que ChatGPT tuviera los colores representativos del Blog, así que me puse manos a la obra buscando los selectores css de los elementos a los que quería cambiarles el color. además de que decidí ocultar los botones de sugerencias al iniciar un nuevo chat. Una vez finalizado y con todos los estilos creados, el resultado es el siguiente
Pueden ver que ha cambiado también la imagen del logo, pero eso no lo hice con Stylish. Aquí es donde entra el scripting de TamperMonkey.
Funcionalidad de ChatGPT
Ok. Lo admito, la imagen no agrega funcionalidad alguna, pero queda bastante bien.
Realmente quería hacerlo con Stylish pero no pude lograrlo, así que utilicé TamperMonkey para manipular el elemento del DOM que contenía la imagen y simplemente cambié el src para obtener el resultado esperado.
Y una vez que vi que podía manipular directamente el contenido html de la página, decidí jugar también con el textarea del promp; cambiándole el placeholder para darle un toque más personal, al igual que el texto de advertencia de la parte de abajo.
Una vez modificada la pantalla del nuevo chat, pude continuar con una idea que tenía desde hace tiempo atrás; poder tener a la mano varias instrucciones de ChatGPT en un mismo lugar.
Multi-Instruction for ChatGPT
Esta fue la parte más emocionante. Ya que pasó por distintas etapas hasta llegar a ser lo que es ahora.
Inicié este proyecto con una idea simple: quería una forma de tener múltiples instrucciones para ChatGPT al alcance de mi mano, sin tener que cambiar entre pestañas o documentos. La inspiración me llegó con un plugin de Neovim, el cual básicamente permite escoger entre distintas instrucciones para darle a la IA.
Entonces, me puse manos a la obra. Comencé por experimentar con JavaScript directamente en un sandbox de CodePen, creando un panel desplegable que pudiera contener varias instrucciones predefinidas. Al principio, era algo rudimentario: un simple botón que, al hacer clic, revelaba un conjunto de instrucciones. Pero sabía que podía mejorar.
Con el tiempo, el proyecto evolucionó. Empecé a añadir más funcionalidades, como la posibilidad de agregar, editar y eliminar instrucciones. También integré una función para guardar estas instrucciones en un archivo de texto, lo que facilitaba su uso posterior. La salida quería que fuera basada en XML para que fuera fácil de leer.
Así se ve la interfaz de usuario:
Y esta es la estructura de un archivo de instrucciones:
<instruction>
<name> Nombre-Instrucción </name>
<textfield> Instrucción </textfield>
</instruction>
Si exportamos el archivo de la imagen anterior, el resultado sería el siguiente:
<instruction>
<name> Neovim-experto </name>
<textfield> Eres un experto en configuraciones de Neovim, el gestor de plugins que debes de tener en mente cada que te haga una petición es "vim plug" y son configuraciones nativas.
</textfield>
</instruction>
<instruction>
<name> Profesor de Python </name>
<textfield> Eres un profesor especializado en Python, impartiendo cursos en una universidad avanzada. Tu enfoque es claro: combinar teoría sólida con ejemplos prácticos para resolver preguntas comunes sobre Python. En cada clase, primero explicas un concepto teórico, como la gestión de memoria en Python o el uso de decoradores, y luego lo ilustras con un ejemplo sencillo pero revelador.
Por ejemplo, al enseñar sobre listas y tuplas, muestras cómo cada tipo de dato maneja la asignación de memoria, seguido de un código breve que demuestra su uso práctico. Esta metodología permite a los estudiantes, tanto humanos como androides, comprender no solo el "cómo" sino también el "por qué" detrás de cada aspecto de Python, preparándolos para aplicar estos conocimientos en situaciones del mundo real.
</textfield>
</instruction>
<instruction>
<name> JsonProject-Generator </name>
<textfield> Funciona como un generador de objetos JSON interactivos, donde yo te proporcionaré el título("title"), el problema("issue") y la solución("solution") para cada objeto. Guíame a través del proceso, preguntándome cada detalle necesario para completar cada sección del objeto JSON. Comenzaremos con el título, después definiremos el problema o desafío que se aborda, y finalmente detallaremos la solución propuesta. En el proceso, si hay imágenes("images") asociadas con cada objeto, me preguntarás sobre ellas("src" y "caption"), aunque puedo elegir omitir esos detalles si lo prefiero. Tu tarea es asegurarte de que cada objeto JSON quede bien estructurado y listo para ser utilizado en mis desarrollos de software.
</textfield>
</instruction>
<instruction>
<name> MetaBuilder </name>
<textfield> Te voy a pasar el nombre de un articulo y de que trata y tu tarea sea devolverme los siguientes metadatos:
- Descripción
- Palabras clave del artículo (separadas por coma)
- Etiquetas del artículo (separadas por comas)
Me devolveras solo esa estructura, no darás explicaciones innecesarias.
</textfield>
</instruction>
Esta característica resultó ser particularmente útil, ya que me puede permitir compartir instruciones con colegas y amigos que también estén interesados en optimizar su experiencia con ChatGPT.
Yo sé lo convencional es utilizar un JSON para mayor estructuración, y se como hacerlo, sin embargo, no me gusta lo convencional. Además siento que le da un toque retro el hecho que esté estructurado de esa manera. También sé, que no es lo más óptimo estar trabajando con archivos de texto. Una decisión crucial fue enfocarme en la implementacióndel lado del cliente, evitando así la necesidad de interacturar con bases de datos y servidores remotos.
Y no malinterpreten, si quisiera, en un día me monto una BD en Mongo y un servidor en Flask para gestionar los usuarios, pero no es mi filosofía. La idea de tener que entregar mis datos para una funcionalidad que, en teoría, podría manejarse localmente, no me resultaba atractiva en lo absoluto. Por lo que diseñé la herramienta para que funcionara enteramente en el navegador del usuario, sin la necesidad de almacenar información en servidores remotos. Esta decisión no fue solo una cuestión de conveniencia técnica, sino también una cuestión de privacidad y seguridad.
Además, al evitar inicios de sesión y almacenamiento de datos en servidores, la herramienta se volvía más accesible y fácil de usar. No había barreras de entrada, como crear cuentas o recordar contraseñas. Cualquiera que usara la herramienta podía hacerlo de manera segura y privada, confiando en que sus instrucciones y datos se quedaban en su propio dispositivo.
Este enfoque refleja mi filosofía personal de respeto a la privacidad del usuario y mi compromiso con la creación de herramientas tecnológicas responsables y seguras.
La implementación de un sistema de almacenamiento local fue otro gran avance. Con esto, las instrucciones permanecían disponibles incluso después de cerrar el navegador, eliminando la necesidad de cargarlas manualmente cada vez. Esto no solo ahorró tiempo sino que también hizo el proceso mucho más fluido y agradable.
A medida que el proyecto crecía, decidí darle un toque más estético. Utilicé CSS para mejorar la apariencia del panel y de los botones, optando por un esquema de colores que complementara la interfaz de usuario de ChatGPT. Quería que el panel no solo fuera funcional sino también visualmente atractivo, algo que pudiera mirar con orgullo.
El resultado final fue "Multi-Instruction for ChatGPT": una herramienta completa, elegante y extremadamente útil que mejoró significativamente mi flujo de trabajo con ChatGPT. No sólo facilitó mis interacciones con el modelo de lenguaje, sino que también me proporcionó un sentido de logro y satisfacción. Al mirar hacia atrás, me siento orgulloso de cómo una pequeña idea se transformó en algo tan valioso y práctico.
Ventajas
Personalización Integral: Stylish permite ajustes visuales detallados a través de CSS, mientras que TamperMonkey puede alterar la funcionalidad y estructura de la página mediante JavaScript. Juntos, proporcionan un control completo sobre la apariencia y el comportamiento de la interfaz de ChatGPT, permitiendo una personalización mucho más profunda que cualquiera de los dos por separado.
Mejora de la Experiencia de Usuario: La personalización con Stylish y TamperMonkey puede mejorar significativamente la experiencia del usuario. Esto incluye mejorar la estética visual, optimizar el uso del espacio en la pantalla y agregar, modificar o eliminar funciones para adaptar la herramienta a las necesidades específicas del usuario.
Automatización y Eficiencia Mejoradas: TamperMonkey permite automatizar ciertas tareas y procesos dentro de ChatGPT, como la gestión de múltiples instrucciones o la personalización de ciertos comportamientos, lo que puede aumentar significativamente la eficiencia del usuario.
Desventajas
Dependencia de la Estructura de la Página Actual: Ambas herramientas dependen de la estructura y el código fuente actuales de ChatGPT. Las actualizaciones en el sitio web de ChatGPT pueden romper las personalizaciones, requiriendo mantenimiento y ajustes constantes para mantener la funcionalidad.
Potencial Impacto Negativo en la Usabilidad: Las personalizaciones, especialmente si son extensas o mal implementadas, pueden afectar negativamente la legibilidad, la navegabilidad y la usabilidad general de la página. Esto puede resultar en una experiencia de usuario confusa o frustrante.
Curva de Aprendizaje y Mantenimiento: Implementar y mantener personalizaciones a través de Stylish y TamperMonkey requiere un conocimiento técnico considerable. Los usuarios que no están familiarizados con CSS y JavaScript pueden encontrar difícil crear y mantener estas personalizaciones, y los usuarios experimentados pueden necesitar dedicar tiempo significativo para ajustar y actualizar sus scripts y estilos regularmente.
Conclusión
Mi viaje personalizando ChatGPT ha sido un verdadero testimonio de mi pasión por la personalización y el desarrollo de herramientas propias. Desde mis primeros días navegando por la red hace cerca de 15 años, siempre he estado fascinado por la personalización y hoy, con orgullo, puedo decirle a mi yo de 10 años que hemos creado un estilo y funcionalidades propias a una página web.
Miro hacia atrás en este proyecto con una sensación de logro y satisfacción. He logrado crear algo que no solo es funcional sino también personal, reflejando mi viaje y crecimiento tanto en el ámbito personal como profesional. Y lo más importante, he demostrado que con creatividad y habilidades técnicas, podemos transformar incluso las herramientas más estándar en algo único y perfectamente adaptado a nuestras necesidades. Este es el poder de la personalización y la autoexpresión a través de la tecnología.
Al conectar a tu niño interior con tu ser interno, sacas a relucir al héroe que está dentro de ti.
— Kim Ha Campbell