🚀 Turning Videos into Interactive Courses with AI

James Kingsley — Tue, 06 May 2025 17:06:31 +0000

How I built VidSabio.com by combining multiple LLMs into a robust processing pipeline

I recently launched VidSabio, a platform that transforms ordinary videos into structured, interactive learning experiences — automatically. 🎥➡️📚

But this didn’t come together overnight.

🧪 Trial, Error, and... More Trial

At first, I thought a single LLM could handle everything: analyze the video, transcribe it, generate quizzes, build a course. Easy, right?

Wrong.

It turned out the real breakthrough came when I stopped looking for one model to do it all — and instead built a pipeline of specialized steps, each powered by the best tool for that specific task.

🧠 The Flow

Here’s the high-level breakdown of how it works:

User uploads a video
Video is processed through a multi-step pipeline:

Frame extraction (FFmpeg)
Audio transcription (Google Speech-to-Text)
Visual analysis (Gemini / GPT-4 Vision)
Content summarization + topic generation (Gemini Pro)
Course structure generation (GPT-4)
Interactivity injection (quizzes, accordions, etc.)
1. Final course can be edited and exported as SCORM or HTML

This is all built using Vue 3, Firebase, and various LLMs (OpenAI + Gemini) stitched together through Cloud Functions.

✨ The Magic Was in the Combo

By distributing the heavy lifting across multiple LLMs and APIs, I was able to:

Improve accuracy
Scale more efficiently
Debug and retry isolated steps
Customize outputs based on step-level feedback

🔧 Stack

Frontend: Vue 3 + Tailwind
Backend: Firebase Functions + Firestore + Storage
AI: GPT-4.1, Gemini Pro, Whisper, Google Speech-to-Text
Analytics: PostHog
Export: SCORM, HTML

🔍 Visual Overview

Here's a stylized diagram of the flow:

(Insert your HappyAlien-styled image here)

💬 Final Thoughts

This was built with plenty of detours, dead ends, and "aha" moments. If you're building with LLMs, I encourage you to explore multi-model orchestration — it might be the key to your next breakthrough.

Check it out: https://vidsabio.com
Feel free to reach out if you’re curious or building something similar!

🎨 Introducing GitVisualize – Turn Any GitHub README into AI-Generated Art

James Kingsley — Tue, 06 May 2025 17:03:19 +0000

Hey DEV community!

I just launched a side project I’ve been tinkering with:
👉 GitVisualize

It lets you paste in any public GitHub repo URL, and it’ll generate a visual representation of that project using OpenAI’s gpt-image-1 model — all based on the repo’s README content.

✨ What it does

Takes a GitHub repo URL
Pulls the README
Feeds it to an AI image model
Displays the generated image alongside project metadata
Adds it to a public gallery

You can even choose the image style you want:

Conceptual & Techy
Infographic
Abstract & Minimalist
Direct & Clear

It’s built with Vue 3 + Tailwind, uses Supabase for storage and data, and everything runs through a lightweight backend on Render.

🧪 Why I made this

I love browsing GitHub, and I wondered:

“What would this project look like if it were a picture?”

So I built GitVisualize as a fun experiment in combining AI, dev culture, and a bit of creativity. Some of the results are surprisingly expressive.

🛠 Tech Stack

Frontend: Vue 3 + Tailwind
Backend: Node/Express (Render)
AI: OpenAI gpt-image-1
Storage/DB: Supabase
Design direction: Lighthearted “Happy Alien” aesthetic 🛸

🖼 Try it out

➡️ https://gitvisualize-web.onrender.com/

Paste a repo, pick a style, and see what AI dreams up!

I’d love feedback, ideas, or feature suggestions.
And if you try it, drop your favorite generated image in the comments! 👇

🙌 Built with curiosity by

James Kingsley – HappyAlien.ai

#buildinpublic #sideproject #ai #webdev #openai #supabase #vue #showdev

DEV Community: James Kingsley