heric libong

Posted on Feb 16

Infograph2Data: Unlocking the Data Trapped in Pixels 📊

#devchallenge #githubchallenge #cli #githubcopilot

GitHub Copilot CLI Challenge Submission

This is a submission for the GitHub Copilot CLI Challenge

Infographics and charts are everywhere… but the numbers inside them are often stuck in images and PDFs. If you work in journalism, reporting, research, or data storytelling, you’ve probably retyped values by hand (slow), or avoided using a chart altogether (worse).

Infograph2Data is a web app that turns static charts (PNG/JPG) and PDF pages into structured data you can actually use: CSV / Excel / JSON.

What I Built

A Visual Data Extraction pipeline with a clean “human-in-the-loop” workflow:

1) Upload an image or a PDF

2) Identify chart type + structure (line/bar/pie/scatter, etc.)

3) Select what to extract (series, axes, categories)

4) Review and edit the extracted numbers in a spreadsheet-like UI

5) Export to CSV / Excel / JSON

This is designed for real-world usage: you don’t blindly trust the model—you validate and correct before exporting.

Why this exists (the genesis)

I’m building tools around data storytelling and journalism workflows. A lot of valuable information is published as visuals (reports, infographics, screenshots, press charts), but using that data in analysis or visuals requires manual work. Infograph2Data was built to bridge that gap: “from pixels to data” in minutes.

Demo

✅ Live demo (Hugging Face Space):

✅ GitHub repository:

https://github.com/hericlibong/Infograph2Data

No login required. Just upload a chart/PDF or screenshot PNG or JPG and run the flow.

Demo assets for judges

The repo includes a demo_assets/ folder with multiple chart styles (bar/line/pie + PDF).

This lets judges test quickly without hunting for files.

https://github.com/hericlibong/Infograph2Data/tree/main/demo_assets

Tech Stack (high-level)

Backend

FastAPI (API + serving the built frontend)
Vision-capable LLM extraction (OpenAI key-driven)
PDF support (page rendering + multi-page flows)
Structured schemas + validation

Frontend

React + Vite (TypeScript)
5-step wizard UI
Spreadsheet-like review/edit experience
Clear API health indicator

Deployment

Docker-ready
Hugging Face Spaces demo

The “Copilot CLI-first” part (this is the core of my submission)

This project was built with GitHub Copilot CLI as my main sidekick in the terminal.

Every major step started as a prompt, not as copy/paste from external code:

architecture & folder structure
FastAPI routers + services
frontend pages/components for the 5-step flow
debugging sessions (logs → hypothesis → patch)
deployment fixes and dev/prod parity adjustments

I kept a full “prompt trail” inside the repository:

/docs/prompts_history.md (the seed prompts + planning)
/docs/devlog.md (the step-by-step build + decisions + fixes)

That means judges can audit the process: it’s prompted development end-to-end, not repackaging code from elsewhere.

Important note: I intentionally avoided pulling in random snippets from the internet. The work here is original and built from scratch, with Copilot CLI assisting me as a terminal-native engineering copilot.

A concrete example where Copilot CLI saved the day (deployment bug)

Right before submission, the Hugging Face demo was “live” but uploads failed:

/api/health returning 404
POST /api/files returning 405

This was a classic frontend/backend routing mismatch:

the frontend called /api/*
the backend exposed routes at /health, /files, etc.
requests fell into the SPA catch-all route → 404/405

Using Copilot CLI in the terminal, I quickly:

diagnosed the mismatch from server logs
updated the backend routing to use a consistent /api prefix
ensured local dev matched production by keeping the /api prefix in the Vite proxy

Result: ✅ demo works again, and local dev stays aligned with prod.

Usability & UX choices (judging criteria)

To make this judge-friendly and actually usable:

5-step guided flow (no guessing)
Health indicator (you instantly know if the API is reachable)
Human-in-the-loop review (edit before export)
Instant export to formats people really use (CSV/Excel/JSON)
Demo assets included (fast testing)

If you want to run it locally (quick)

git clone https://github.com/hericlibong/Infograph2Data.git
cd Infograph2Data
cp .env.example .env   # add your OPENAI_API_KEY
docker build -t infograph2data .
docker run -p 7860:7860 --env-file .env infograph2data