Mini Trivia de Ajedrez – Resultados finales
This mini trivia game about chess presents final results—score, chosen answers, correct answers, and explanations—in a clean, web-based interface rendered with Tailwind CSS and custom HTML templates. The Raspberry Pi Pico W runs a MicroPython web server, while a Python FastAPI proxy relays requests to Google Apps Script, which securely calls the OpenAI GPT-4.1-mini API. The system builds questions through a local mini-RAG context selection and renders dynamic SVG-style UI elements within the browser.
AI-generated descriptionIntegración de ChatGPT vía API en MicroPython con Raspberry Pi Pico W (Mini-RAG + Web UI)
Auto-Práctica – Lenguajes de Interfaz
Alumno: Javier Ulises Cortes Aguilar Matrícula: 22211541 Microcontrolador: Raspberry Pi Pico W (RP2040) Lenguaje: MicroPython
1. Introducción
Esta práctica implementa una integración completa entre MicroPython, ChatGPT y un sistema web dinámico. El objetivo es crear una mini aplicación de trivia interactiva sobre ajedrez, donde la Raspberry Pi Pico W solicita preguntas generadas por ChatGPT y las presenta en un servidor web local accesible desde cualquier navegador.
La práctica original pedía mostrar las respuestas en un display OLED; sin embargo, tuve problemas técnicos con mi hardware (detallados más adelante), por lo que opté por una interfaz web completamente funcional, apoyada en HTML generado con Stitch by Google y una arquitectura segura para consumir la API de OpenAI sin exponer claves.
2. Problemática inicial y cambios necesarios
2.1 Problema con el hotspot del teléfono
No pude avanzar la práctica en clase debido a que mi punto de acceso móvil bloqueaba la comunicación entre dispositivos por medio de AP Isolation, lo cual impide que una Raspberry Pi Pico W se conecte al servidor desde el mismo hotspot. Según ChatGPT, el modelo CUBOT P90 no permite desactivar AP isolation.
<img width="706" height="401" alt="image" src="https://gist.github.com/user-attachments/assets/2396a087-1384-4896-a50a-fe1d38a1ff44" />Solución: Utilizar una red WiFi doméstica.
2.2 Problemas con el Display OLED
Intenté integrar un display OLED modelo ARD 384, siguiendo estas conexiones:
VCC → 3V3 OUT
GND → GND
SDA → GP4
SCL → GP5
Probé también GP0 y GP1.
El resultado fue que el OLED solo mostraba basura, por lo que sospecho incompatibilidad o fallo físico. <img width="242" height="293" alt="image" src="https://gist.github.com/user-attachments/assets/85219d2f-17c5-46d3-bc11-1dbe45ef40ab" />
Por este motivo, el OLED fue omitido. En su lugar, se usa la consola de Thonny y una interfaz web completa.
3. Arquitectura general del sistema
Para poder conectar la Rasbperry a la API de OpenAI, se implementaron tres capas, debido a que MicroPython solo soporta HTTP/1.0 y no HTTPS:
3.1 Capa 1 – Raspberry Pi Pico W (MicroPython)
- Corre un servidor web local (
main.py) - Se conecta por WiFi
- Genera UI dinámica con dos pantallas HTML:
- pregunta.html
- pantalla trivia.html
- Solicita a un servidor externo un JSON con preguntas de trivia
- Implementa un Mini-RAG local (selección de contexto local relevante)
- Muestra detalles de depuración en consola (sin OLED)
3.2 Capa 2 – Proxy en FastAPI (proxy.py)
La Pico W NO puede mandar HTTPS, y Google Apps Script solo acepta HTTPS. Además, Apps Script requiere HTTP/1.1 y JSON estándar.
Por eso se creó este proxy: <img width="952" height="263" alt="image" src="https://gist.github.com/user-attachments/assets/f05cec19-71df-47f5-8368-7a168eb06baa" />
- Recibe las peticiones HTTP/1.0 de la Pico
- Parsea manualmente el JSON
- Reenvía la petición a Apps Script mediante HTTPS
- Devuelve la respuesta a la Pico
3.3 Capa 3 – Google Apps Script (doPost)
Es la capa que realmente llama a OpenAI. <img width="1855" height="824" alt="image" src="https://gist.github.com/user-attachments/assets/b94c9be3-bb2f-42c1-8b76-6b71a656f62b" />
Funciones:
- Recibe
{pregunta, contexto} - Añade un prompt con Mini-RAG incorporado
- Llama a la API de ChatGPT
- <img width="916" height="390" alt="image" src="https://gist.github.com/user-attachments/assets/1b580fdc-71be-4b46-a9bb-4ecb83d0b170" />
- Devuelve solo el texto resultante
- Mantiene la clave privada segura
4. Flujo completo del sistema (Pico → Proxy → Apps Script → OpenAI → Pico)
La Pico solicita “genera 5 preguntas tipo trivia”.
Se selecciona automáticamente un contexto relevante (Mini-RAG).
Se envía un JSON al proxy FastAPI.
El proxy reenvía la petición a Google Apps Script.
Apps Script llama a OpenAI.
OpenAI devuelve un JSON con 5 preguntas, opciones, índice correcto y explicación.
La Pico construye dinámicamente las pantallas web.
El usuario responde las preguntas.
Se muestra la pantalla final con:
- puntaje
- respuestas elegidas
- respuestas correctas
- explicaciones
La consola de Thonny registra todo el proceso como diagnóstico.
5. Ejemplo real del log de Thonny
MPY: soft reboot
API_URL usado por la Pico:
http://192.168.100.16:8000/pico
Conectado a WiFi con IP: 192.168.100.25
Plantillas HTML cargadas correctamente.
Solicitando preguntas de trivia al LLM...
Contexto local seleccionado (Mini-RAG):
[1] Las reglas actuales del ajedrez...
[2] El ajedrez moderno se originó...
[3] Los campeonatos mundiales oficiales...
Enviando solicitud al proxy...
Respuesta cruda recibida del proxy:
Preguntas recibidas: 5
Servidor web disponible en: http://192.168.100.25
Cliente conectado desde: ('192.168.100.16', 60509)
Petición: GET / {}
Pregunta 1 de 5
Opciones: ['Chaturanga', 'Go', 'Backgammon', 'Damas']
Cliente conectado desde: ('192.168.100.16', 56923)
Petición: GET /respuesta {'opcion': '0'}
Pregunta 1 contestada.
...
Test finalizado. Resultado final: 2/5
La consola funciona como pantalla alternativa ante la falta de OLED.
6. Mini-RAG: Recuperación de contexto local
El sistema incluye 3–5 frases locales.
Ejemplo:
"Las reglas actuales del ajedrez, incluyendo el movimiento de la dama..."
"El ajedrez moderno se originó del chaturanga..."
"Wilhelm Steinitz fue el primer campeón mundial oficial..."
Se compara la consulta con estas frases.
Esto mejora notablemente la calidad de las preguntas generadas y demuestra integración con técnicas básicas de RAG.
7. Interfaz web generada
Se usaron dos archivos generados con Stitch by Google: <img width="908" height="532" alt="image" src="https://gist.github.com/user-attachments/assets/4ff56a3a-b969-4e64-8014-40bc833720ed" />
pregunta.html– UI de cada preguntapantalla trivia.html– resultados finales
Ambas pantallas son totalmente responsivas y se sirven desde la Raspberry Pico W.
8. Archivos incluidos en el proyecto
| Archivo | Función |
|---|---|
main.py |
Servidor MicroPython + Mini-RAG + HTML dinámico |
pregunta.html |
Pantalla de pregunta |
pantalla trivia.html |
Pantalla de resultados |
proxy.py |
Proxy HTTP/HTTPS para apps script |
Code.gs |
Llamada segura a OpenAI vía Google Apps Script |
README.md |
Documentación del proyecto |
9. Conclusiones
- A pesar de problemas con el hotspot y el display OLED, se logró una implementación completa funcional.
- Se integró una arquitectura robusta con 3 capas que permite consumir la API de OpenAI desde MicroPython de manera segura.
- Se logró implementar un sistema de Mini-RAG efectivo.
- Se mostró un caso real de interfaz web embebida en un microcontrolador.
- El proyecto supera la práctica original y demuestra manejo avanzado de APIs, servidores, y diseño frontend.