Inicio » Charlas con Chatbots » Programación en HTML y Python con ChatGPT Vision (GUI para Batallas de Chatbots)

Programación en HTML y Python con ChatGPT Vision (GUI para Batallas de Chatbots)

💻 Temas: IA

🤖 Chatbots: ChatGPT

⚙️ Prompt engineering: Programación, Análisis de Imágenes

[Relacionado: ¿Es la filosofía una ciencia? Introducción a las batallas de chatbots SCBN ] [repositorio de GitHub]

Tabulación y formato de texto en HTML

Image displaying a comparison of three chatbots: #HuggingChat (Llama), #Bard, and #ChatGPT, with emojis rating each on Specificity, Coherency, Brevity, and Novelty. Each category has a scale of one to four robots, indicating performance level. The hashtags #ChatbotBattle and a question 'Is philosophy a science?' are also present. Links are provided beneath each chatbot’s name, presumably to view the conversations or results.
Puntuaciones de rendimiento comparativas de los chatbots HuggingChat, Bard y ChatGPT en una "ChatbotBattle", evaluadas en términos de especificidad, coherencia, brevedad y novedad (SCBN).

😎 Sugiere un formato de tabla HTML simple donde pueda incluir esta información de forma tabulada, eliminando los hashtags de redes sociales y convirtiendo los enlaces en texto (para que no se muestren las URL). La tabla debería titularse “Batalla de chatbots: ¿Es la filosofía una ciencia?“. Quiero mantener los emojis para el sistema de puntuación (🤖🕹️🕹️), pero la clasificación representada por las medallas emoji se puede representar de una manera más formal (ganador, retador, rezagado... sé creativo con eso)

🤖 [Código preliminar. Versión final disponible en GitHub]

Esta es una estructura HTML simple para la información proporcionada y presenta el rendimiento de los chatbots de forma tabulada. Los emojis se conservan para la puntuación y las clasificaciones se representan con títulos descriptivos como "Ganador", "Subcampeón" y "Contendiente".

😎 ¿Podemos cambiar la fuente a Josefin Sans y usar una paleta de colores similar a la de la captura de pantalla adjunta? Por ejemplo, podríamos usar #c9c1f2 para el fondo de los títulos, y los enlaces pueden ser #c171f4

A screenshot of the reddgr.com website showcasing a clean and organized layout. The main content area displays a blog post prompt with an associated date and tags. A sidebar on the right lists a variety of other blog topics. The color scheme is primarily soft purples and whites, giving the website a modern and elegant feel. Emojis are used within the blog post to add a touch of playfulness.

🤖 Captura de pantalla del sitio web reddgr.com que muestra un diseño limpio y organizado. El área de contenido principal muestra un post de blog con una fecha y etiquetas asociadas. Una barra lateral a la derecha enumera una otros posts. La combinación de colores es principalmente violetas suaves y blancos.

🤖… Entendido. Aquí tenéis el código HTML modificado con la fuente “Josefin Sans” y la paleta de colores especificada:

[Código preliminar. Versión final disponible en GitHub]

[Iteraciones rutinarias y corrección de errores]

😎 Haré dos pequeños cambios más. Estaría bien añadir una medalla emoji después del ganador, subcampeón, contendiente (oro, plata, bronce… queda bien). Además, llamo SCBN a la clasificación, por lo que en lugar de "Ranking", el encabezado de la columna sería "Ranking (SCBN)".

🤖 ¡Totalmente! Aquí está tu código actualizado:

[Código preliminar. Versión final disponible en GitHub]

😎 ¿Este gráfico HTML se vería bien en un dispositivo móvil? ¿Tienes alguna sugerencia si quiero que sea compatible con dispositivos móviles? [código preliminar]

🤖 Para asegurarse de que el gráfico HTML sea compatible con dispositivos móviles, considere las siguientes sugerencias:

  1. Tamaño de fuente sensible (responsive): Utiliza unidades relativas como em, rem, o unidades de ventana gráfica (VW, vh) en lugar de un número fijo de px (píxeles) para tamaños de fuente. Esto hará que el texto se escale según el tamaño del dispositivo.
  2. Desbordamiento de tabla: En pantallas más pequeñas, las tablas pueden desbordarse. Puedes encapsular la tabla dentro de un div con overflow-x: auto;, para que los usuarios puedan desplazarse horizontalmente si es necesario.
  3. Reducir el relleno para dispositivos móviles: Reduce el relleno y los márgenes en pantallas más pequeñas para utilizar el espacio de la pantalla de manera más eficiente.
  4. Romper palabras: Si el contenido de alguna celda de la tabla es demasiado largo y no encaja, utiliza word-wrap: break-word; para evitar el desbordamiento.
  5. Utiliza media queries: las media queries te permiten aplicar estilos según las características del dispositivo, especialmente su ancho.

Aquí hay una versión modificada que incorpora estas sugerencias:

[Código preliminar. Versión final disponible en GitHub]

😎 [iteraciones]

🤖 …Aquí está el código modificado:

Screenshot of a conversation in a chat interface with a dark mode theme. The chat includes two participants: a user and ChatGPT. The user asks if only the 'Chatbot' column in a table can be made 'breakable' to allow long text to wrap to the next line, suggesting a shorter name as an alternative. ChatGPT responds affirmatively, detailing a solution that involves assigning a class to the 'Chatbot' column and specifying the 'white-space' property. The code snippet provided shows HTML and CSS code, including a style import from Google Fonts and CSS rules for an h2 element and a table.
Diálogo con ChatGPT sobre la personalización del código HTML para ajustar el texto de una columna de tabla específica, mostrando el proceso de programación con la ayuda de ChatGPT.

[Proyecto SCBN Chatbot Battle en Github]

Diseño de interfaz gráfica de usuario con Tkinter

😎 Ahora me gustaría diseñar una sencilla interfaz de usuario en la que introducir los elementos principales de la tabla (chatbot, enlaces y una puntuación de 0 a 3 para cada parámetro). El código de la interfaz de usuario calcularía la clasificación en función de mis puntuaciones, convertiría las puntuaciones en forma de emoji con 🤖 y 🕹️ y crearía el código HTML completo. Obviamente, esto requiere algo más que HTML y WordPress. Me da igual qué tipo de aplicación usar para la interfaz de usuario, puede ser cualquier cosa que pueda ejecutar fácilmente en mi máquina con Windows (podría convertirla en una funcionalidad para la web en el futuro, pero todavía no). Para manejar el código que generes, me sentiría cómodo usando Python.

🤖 ¡Entendido! Creemos una aplicación Python simple con una interfaz gráfica de usuario (GUI) para esta tarea. Usaremos la librería Tkinter que se incluye con la mayoría de las instalaciones estándar de Python.

La idea básica es:

  1. Crear campos de entrada para el nombre, el enlace y las puntuaciones del Chatbot.
  2. Calcular el ranking en función de las puntuaciones.
  3. Convertir las puntuaciones en emojis.
  4. Generar el código HTML.

Aquí tienes un prototipo básico de la aplicación:

Screen capture of Python code in a chat interface with a dark background. The code is a prototype of a 'Chatbot Ranking Generator' application using the Tkinter library. It includes imports, a class definition with an initializer method, creation of GUI elements for chatbot name and link inputs, and a loop to create score categories with associated ComboBox widgets. A button to generate HTML is also coded
Visualización en ChatGPT del código Python para la GUI 'Chatbot Ranking Generator', que muestra la colaboración de programación con ChatGPT

[código preliminar. Versión final disponible en GitHub]

Instrucciones:

  1. Asegúrate de tener Python instalado en tu máquina Windows.
  2. Copia y pega el código anterior en un fichero ejecutable de Python, por ejemplo chatbot_ranking_app.py.
  3. Ejecuta el script: Python chatbot_ranking_app.py.

El script iniciará una GUI simple donde podrás ingresar los detalles y puntuaciones del chatbot. Cuando presionas el botón "Generar HTML", el HTML apropiado se mostrará en un cuadro de texto a continuación. Luego puedes copiar este HTML y usarlo en tu tabla.

Nota: La clasificación está marcada como "TBD" (por determinar) por ahora, ya que calcular las clasificaciones puede requerir lógica adicional basada en todas las puntuaciones del chatbot.

Screenshot of a computer screen displaying a graphical user interface for a Chatbot Ranking Generator application. The application window has input fields for 'Chatbot Name', 'Link', and drop-down menus for 'Specificity', 'Coherency', 'Brevity', and 'Novelty'. Below the input fields, there's a 'Generate HTML' button and a preview of the generated HTML code snippet showing inputted data for a chatbot named 'Bard'.
Diseño preliminar de la aplicación Chatbot Ranking Generator, mostrando la interfaz de entrada y la vista previa de salida HTML.

😎 Esto promete. El siguiente paso es actualizar el código Python para que, cuando le dé al botón "Generar HTML", se genere todo el código HTML, incluidas todas las filas de la tabla correctamente ordenadas y completadas (chatbots). A continuación te muestro el HTML original que creaste para tres filas:

[Código disponible en GitHub]

🤖¡Claro! voy a modificar el método generate_html para incluir los estilos CSS, el encabezado y la estructura de la tabla en el HTML generado. Además, los chatbots se insertarán en las filas de la tabla según su clasificación. Aquí está el código actualizado:

[Más iteraciones en el código]

😎 Esto tiene muy buena pinta. Hay algunos detalles más que olvidé explicarte o qué es mejor agregarlos ahora que estamos cerca de completar el trabajo:

1. También deberíamos agregar un cuadro de texto para personalizar el título del HTML. El título HTML siempre tendrá el formato “Chatbot Battle:…”, y el espacio se llenará con lo que el usuario introduce como “Título de Chatbot Battle” en la interfaz de usuario. Este cuadro de texto puede estar por encima de todos los demás, teniendo en cuenta que no debe borrarse cuando hacemos clic en "Agregar Chatbot".

2. Cuando hay un empate de dos o más chatbots con la misma puntuación, se les debe otorgar el mismo título de medalla a todos ellos. Por ejemplo, si la puntuación máxima es 12 y tres chatbots tienen la misma puntuación, los tres obtendrían la etiqueta "🥇 Ganador". Si dos chatbots están empatados en el tercer lugar, los dos obtendrían 🥉 Contendiente…

3. Finalmente, sería conveniente tener un botón para copiar el código HTML al portapapeles y otro para borrar la pantalla.

🤖 Claro, haré esas mejoras […]

Screenshot of an evolved graphical user interface for the Chatbot Ranking Generator. The window displays fields for 'Chatbot Battle Title', 'Chatbot Name', 'Link', and drop-down menus for 'Specificity', 'Coherency', 'Brevity', and 'Novelty'. Below are buttons labeled 'Add Chatbot', 'Generate HTML', 'Copy to Clipboard', and 'Clear Screen'. The lower part of the window shows a section of the generated HTML code with emoji ratings and hyperlinks for chatbot entries.
Versión mejorada de la interfaz del Chatbot Ranking Generator, que ahora presenta funcionalidad adicional para ingresar un título de batalla, clasificar chatbots, resolver empates y administrar el código HTML generado.

[Más iteraciones y correcciones. Versión final disponible en GitHub]

😎 Esto tiene una pinta estupenda. Gracias. Ojalá podamos evolucionarlo en el futuro. Pregunta: ¿podríamos también agregar fácilmente una función que convierta el código HTML en una imagen PNG, incluyendo una marca de agua con el nombre de mi sitio web?

🤖 Sí, convertir el HTML generado en una imagen PNG es factible usando Python, pero el proceso implica algunos pasos:

  1. Renderizar HTML a una imagen: puedes utilizar una biblioteca llamada Selenium para abrir el HTML en un navegador web y tomar una captura de pantalla.
  2. Agregar una marca de agua: Una vez que tengas la imagen, puedes usar la biblioteca PIL (o Pillow) para superponer una marca de agua.

He aquí un enfoque aproximado:

A computer interface showing a conversation with ChatGPT, displaying Python code examples. The code snippets illustrate two functions: one for rendering HTML to an image using Selenium WebDriver and another for adding a watermark using the PIL library. The left panel shows a list of topics previously discussed with ChatGPT, such as 'Philosophers' McDonald's Response', 'Meme: Philosophers at Party', and 'Twitter Conversation about Aliens'
Sesión de programación con ChatGPT, en la que el usuario aprende cómo convertir contenido HTML en un archivo de imagen y cómo aplicarle una marca de agua usando Python.

✍️ El código para convertir el HTML en una imagen aún no está desarrollado, pero agregaré código al repositorio de GitHub a medida que se agreguen más funcionalidades, siempre con la ayuda de algún chatbot. A continuación dejo un ejemplo de Batalla de chatbot SCBN con la funcionalidad actual. Las puntuaciones y los chatbots son ficticios por el momento, pero estamos trabajando en el tema elegido:

Batalla de chatbot: la realidad es aquello que hay detrás nuestras creencias cuando dejamos de creer

ChatbotRanking (SCBN)EspecificidadCoherenciaBrevedadNovedadEnlace
Chat Reddgr🥇 Ganador🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖Ver chat
TalkingToChatBots.com🥇 Ganador🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖Ver chat
😘Chat (Alpaca)🥈 Subcampeón🤖🤖🤖🤖🤖🤖🤖🤖🕹️🤖🤖🕹️Ver chat
Bardo🥉 Contendiente🤖🤖🤖🤖🤖🕹️🤖🤖🕹️🤖🤖🕹️Ver chat
ChatCCCP🤖🤖🕹️🤖🤖🕹️🤖🤖🕹️🤖🤖🕹️Ver chat
Claudio🤖🤖🤖🤖🕹️🕹️🕹️🕹️🕹️🤖🤖🤖Ver chat
Casper🤖🤖🕹️🤖🤖🕹️🕹️🕹️🕹️🤖🤖🤖Ver chat

More AI soon

Deja una respuesta

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

*