<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: heric libong</title>
    <description>The latest articles on DEV Community by heric libong (@bongli).</description>
    <link>https://dev.to/bongli</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1063845%2F6764f68b-4d7a-4300-a0ea-c0d4bc737fb0.jpg</url>
      <title>DEV Community: heric libong</title>
      <link>https://dev.to/bongli</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/bongli"/>
    <language>en</language>
    <item>
      <title>Unlocking an African Mythology Archive with Gemini: From a Django API to a Living Archive</title>
      <dc:creator>heric libong</dc:creator>
      <pubDate>Wed, 04 Mar 2026 10:58:38 +0000</pubDate>
      <link>https://dev.to/bongli/from-the-django-api-to-the-lifestyle-archive-how-i-unlocked-my-project-on-african-mythology-fao</link>
      <guid>https://dev.to/bongli/from-the-django-api-to-the-lifestyle-archive-how-i-unlocked-my-project-on-african-mythology-fao</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/mlh-built-with-google-gemini-02-25-26"&gt;Built with Google Gemini: Writing Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built with Google Gemini
&lt;/h2&gt;

&lt;p&gt;What I Built with Google Gemini&lt;/p&gt;

&lt;p&gt;I built &lt;a href="https://ricolajazz-african-mythology-living-archive.hf.space/#" rel="noopener noreferrer"&gt;African Mythology: Living Archive,&lt;/a&gt; an application designed to structure and bring to life the mythological pantheons of Sub-Saharan Africa. Using AI, the project organizes mythological entities, their complex relationships, and their visual representations.&lt;/p&gt;

&lt;h3&gt;
  
  
  The problem: Oral traditions facing a structural challenge
&lt;/h3&gt;

&lt;p&gt;Unlike Greek, Egyptian, or Norse mythologies, the myths of Sub-Saharan Africa are primarily transmitted through oral tradition. Although some information exists online, it is often fragmented, scattered, and poorly structured.&lt;/p&gt;

&lt;p&gt;In 2024, I attempted to create a &lt;a href="https://github.com/hericlibong/AfricanPantheonAPI" rel="noopener noreferrer"&gt;Django API to organize this cultural heritage&lt;/a&gt;. The project remained at the “empty shell” stage: for a solo developer, the research effort and manual data entry required to transform oral narratives into structured data was simply too large.&lt;/p&gt;

&lt;h3&gt;
  
  
  The role of Gemini: Turning the idea into something real
&lt;/h3&gt;

&lt;p&gt;The &lt;a href="https://www.kaggle.com/competitions/gemini-3/overview" rel="noopener noreferrer"&gt;Google DeepMind – Vibe Code with Gemini 3 Pro hackathon&lt;/a&gt; on Kaggle helped revive the project. The central question — &lt;em&gt;“What can we do today with AI that was impossible before?”&lt;/em&gt; — became the turning point.&lt;/p&gt;

&lt;p&gt;The API architecture already existed, but I lacked a way to quickly explore relationships between entities and generate a coherent visual universe. Gemini allowed me to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Explore and test pantheon structures at scale&lt;/li&gt;
&lt;li&gt;Accelerate the structuring of entities and genealogies&lt;/li&gt;
&lt;li&gt;Generate the foundations of an iconography that respects cultural markers&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Phase 1 — Hackathon (Experimentation and Vibe Coding)
&lt;/h3&gt;

&lt;p&gt;The starting point was my original &lt;code&gt;models.py&lt;/code&gt; file from 2024. Instead of manually writing import scripts, I used this model as context for Gemini to explain the domain logic of the project.&lt;/p&gt;

&lt;p&gt;Excerpt from the initial data model:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# Divinities, Heroes and Creatures: base structure
&lt;/span&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Divinity&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Model&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;ethnicity&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;ArrayField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="n"&gt;domain&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;ArrayField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
    &lt;span class="n"&gt;story_description&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;TextField&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
 &lt;span class="p"&gt;[...]&lt;/span&gt;


&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Hero&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Model&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;story&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;TextField&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="n"&gt;country&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
 &lt;span class="p"&gt;[...]&lt;/span&gt;

&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;MythicalCreature&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;Model&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="n"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;description&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;TextField&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="n"&gt;habitat&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;models&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;CharField&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;max_length&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;255&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
 &lt;span class="p"&gt;[...]&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;From this base, Gemini helped formalize a consistent JSON structure. This workflow enabled the creation of the first functional prototype using the &lt;a href="https://aistudio.google.com/apps" rel="noopener noreferrer"&gt;Build tool in Google AI Studio&lt;/a&gt;, following a Vibe Coding approach. At this stage, navigation and structure were validated without requiring a full backend.&lt;/p&gt;

&lt;h3&gt;
  
  
  Phase 2 — Development and Integration (Antigravity)
&lt;/h3&gt;

&lt;p&gt;After the hackathon, the project moved from prototype to a working engine. This development phase outside the competition made it possible to industrialize the workflow:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Antigravity&lt;/strong&gt;: Used to orchestrate the flows between Gemini model calls and the generation of structured content for the application (entities, relationships, and visual prompts).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Gemini 3 Pro Agent&lt;/strong&gt;: Used to design orchestration logic and progressively integrate it with the existing API.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Visualization&lt;/strong&gt;: Generation of precise prompts for &lt;strong&gt;_Imagen (Vertex AI) _&lt;/strong&gt;to avoid generic representations.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;The current demo represents the first functional stage of a larger roadmap. The long-term goal is to build a true interactive archive of Sub-Saharan African mythologies, enabling users to explore pantheons, their relationships, and their stories through a visual and conversational interface.&lt;/p&gt;

&lt;p&gt;You can explore the demo here:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Hugging Face Application (Live):&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://huggingface.co/spaces/ricolajazz/african-mythology-living-archive" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9y18msv6oat2tfvdpolp.png" alt="african archive picture" width="800" height="501"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub Repository (V2):&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://github.com/hericlibong/african_mythology_V2" rel="noopener noreferrer"&gt;https://github.com/hericlibong/african_mythology_V2&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  What I Learned
&lt;/h3&gt;

&lt;p&gt;Working on this project changed the way I think about using AI in a development workflow.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;** Giving the model** real structure makes a huge difference. Once Gemini had access to my Django &lt;code&gt;models.py&lt;/code&gt;, the responses became much more coherent because it could understand the logic of the project.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;LLMs are surprisingly&lt;/strong&gt; good at structuring narrative data. Gemini helped turn mythological stories into consistent JSON structures that the application could actually use.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cultural content&lt;/strong&gt; requires very precise prompting. Without strong constraints, image generation quickly drifts toward generic representations rather than culturally meaningful ones.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Google Gemini Feedback
&lt;/h3&gt;

&lt;p&gt;Working with Gemini was a key part of turning this project from an idea into a working prototype.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What worked well&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Gemini was very effective&lt;/strong&gt; at structuring narrative information into usable data. It helped transform mythological descriptions into consistent JSON structures that could be integrated into the application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Providing project context&lt;/strong&gt; (like my Django models) significantly improved the quality of the responses.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Google AI Studio&lt;/strong&gt; made it easy to iterate quickly during the experimentation phase.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Where I ran into friction&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Image generation required&lt;/strong&gt; many iterations to avoid generic or culturally inaccurate outputs, especially for mythological figures tied to specific traditions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Moving from experimentation&lt;/strong&gt; in AI Studio to a more production-ready workflow still requires some learning and tooling adjustments.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>devchallenge</category>
      <category>geminireflections</category>
      <category>gemini</category>
    </item>
    <item>
      <title>Infograph2Data: Unlocking the Data Trapped in Pixels 📊</title>
      <dc:creator>heric libong</dc:creator>
      <pubDate>Mon, 16 Feb 2026 07:31:03 +0000</pubDate>
      <link>https://dev.to/bongli/infograph2data-unlocking-the-data-trapped-in-pixels-47dk</link>
      <guid>https://dev.to/bongli/infograph2data-unlocking-the-data-trapped-in-pixels-47dk</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-01-21"&gt;GitHub Copilot CLI Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Infographics and charts are everywhere… but the numbers inside them are often &lt;em&gt;stuck&lt;/em&gt; 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).&lt;/p&gt;

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




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;Visual Data Extraction&lt;/strong&gt; pipeline with a clean “human-in-the-loop” workflow:&lt;/p&gt;

&lt;p&gt;1) &lt;strong&gt;Upload&lt;/strong&gt; an image or a PDF&lt;br&gt;&lt;br&gt;
2) &lt;strong&gt;Identify&lt;/strong&gt; chart type + structure (line/bar/pie/scatter, etc.)&lt;br&gt;&lt;br&gt;
3) &lt;strong&gt;Select&lt;/strong&gt; what to extract (series, axes, categories)&lt;br&gt;&lt;br&gt;
4) &lt;strong&gt;Review&lt;/strong&gt; and edit the extracted numbers in a spreadsheet-like UI&lt;br&gt;&lt;br&gt;
5) &lt;strong&gt;Export&lt;/strong&gt; to CSV / Excel / JSON&lt;/p&gt;

&lt;p&gt;This is designed for real-world usage: you don’t blindly trust the model—&lt;strong&gt;you validate and correct&lt;/strong&gt; before exporting.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why this exists (the genesis)
&lt;/h3&gt;

&lt;p&gt;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: &lt;strong&gt;“from pixels to data”&lt;/strong&gt; in minutes.&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;✅ Live demo (Hugging Face Space):  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://huggingface.co/spaces/ricolajazz/Infograph2Data-Demo" rel="noopener noreferrer"&gt;https://huggingface.co/spaces/ricolajazz/Infograph2Data-Demo&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ricolajazz-infograph2data-demo.hf.space/" rel="noopener noreferrer"&gt;https://ricolajazz-infograph2data-demo.hf.space/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;✅ GitHub repository:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/hericlibong/Infograph2Data" rel="noopener noreferrer"&gt;https://github.com/hericlibong/Infograph2Data&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No login required. Just upload a chart/PDF or screenshot PNG or JPG and run the flow.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh8ndde2osrnf8129tj0b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh8ndde2osrnf8129tj0b.png" alt="Infograph2Data landing page displaying the 5-step workflow: Upload, Identify, Select, Review, and Export" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fycd226p4gwfe9w16tpc6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fycd226p4gwfe9w16tpc6.png" alt="Upload interface with drag-and-drop area for PNG, JPG, and PDF files in Infograph2Data" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6s5ehb71l8hm6jyhimej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6s5ehb71l8hm6jyhimej.png" alt="Chart identification step showing detected visual elements ready for selection and extraction" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Demo assets for judges
&lt;/h3&gt;

&lt;p&gt;The repo includes a &lt;code&gt;demo_assets/&lt;/code&gt; folder with multiple chart styles (bar/line/pie + PDF).&lt;br&gt;&lt;br&gt;
This lets judges test quickly without hunting for files.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/hericlibong/Infograph2Data/tree/main/demo_assets" rel="noopener noreferrer"&gt;https://github.com/hericlibong/Infograph2Data/tree/main/demo_assets&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Tech Stack (high-level)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Backend&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;FastAPI (API + serving the built frontend)&lt;/li&gt;
&lt;li&gt;Vision-capable LLM extraction (OpenAI key-driven)&lt;/li&gt;
&lt;li&gt;PDF support (page rendering + multi-page flows)&lt;/li&gt;
&lt;li&gt;Structured schemas + validation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Frontend&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;React + Vite (TypeScript)&lt;/li&gt;
&lt;li&gt;5-step wizard UI&lt;/li&gt;
&lt;li&gt;Spreadsheet-like review/edit experience&lt;/li&gt;
&lt;li&gt;Clear API health indicator&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Deployment&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Docker-ready&lt;/li&gt;
&lt;li&gt;Hugging Face Spaces demo&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  The “Copilot CLI-first” part (this is the core of my submission)
&lt;/h2&gt;

&lt;p&gt;This project was built with &lt;strong&gt;GitHub Copilot CLI as my main sidekick in the terminal&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Every major step started as a prompt&lt;/strong&gt;, not as copy/paste from external code:&lt;/p&gt;

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

&lt;p&gt;I kept a full “prompt trail” inside the repository:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;/docs/prompts_history.md&lt;/code&gt; (the seed prompts + planning)&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/docs/devlog.md&lt;/code&gt; (the step-by-step build + decisions + fixes)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That means judges can audit the process: it’s &lt;strong&gt;prompted development end-to-end&lt;/strong&gt;, not repackaging code from elsewhere.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  A concrete example where Copilot CLI saved the day (deployment bug)
&lt;/h2&gt;

&lt;p&gt;Right before submission, the Hugging Face demo was “live” but uploads failed:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;/api/health&lt;/code&gt; returning 404&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;POST /api/files&lt;/code&gt; returning 405&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This was a classic &lt;strong&gt;frontend/backend routing mismatch&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the frontend called &lt;code&gt;/api/*&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;the backend exposed routes at &lt;code&gt;/health&lt;/code&gt;, &lt;code&gt;/files&lt;/code&gt;, etc.&lt;/li&gt;
&lt;li&gt;requests fell into the SPA catch-all route → 404/405&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using Copilot CLI in the terminal, I quickly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;diagnosed the mismatch from server logs&lt;/li&gt;
&lt;li&gt;updated the backend routing to use a consistent &lt;code&gt;/api&lt;/code&gt; prefix&lt;/li&gt;
&lt;li&gt;ensured local dev matched production by keeping the &lt;code&gt;/api&lt;/code&gt; prefix in the Vite proxy&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Result: ✅ demo works again, and local dev stays aligned with prod.&lt;/p&gt;




&lt;h2&gt;
  
  
  Usability &amp;amp; UX choices (judging criteria)
&lt;/h2&gt;

&lt;p&gt;To make this judge-friendly and actually usable:&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F84hanpuu3b7txmwmtpyg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F84hanpuu3b7txmwmtpyg.png" alt="Spreadsheet-style review interface displaying extracted data for validation and editing before export" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F64cy3kvbxehvu02kjq1v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F64cy3kvbxehvu02kjq1v.png" alt="Export options allowing users to download extracted data as CSV, Excel, or JSON" width="800" height="415"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  If you want to run it locally (quick)
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/hericlibong/Infograph2Data.git
&lt;span class="nb"&gt;cd &lt;/span&gt;Infograph2Data
&lt;span class="nb"&gt;cp&lt;/span&gt; .env.example .env   &lt;span class="c"&gt;# add your OPENAI_API_KEY&lt;/span&gt;
docker build &lt;span class="nt"&gt;-t&lt;/span&gt; infograph2data &lt;span class="nb"&gt;.&lt;/span&gt;
docker run &lt;span class="nt"&gt;-p&lt;/span&gt; 7860:7860 &lt;span class="nt"&gt;--env-file&lt;/span&gt; .env infograph2data

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;My Experience with GitHub Copilot CLI&lt;/p&gt;

&lt;p&gt;Copilot CLI was most valuable when:&lt;/p&gt;

&lt;p&gt;turning vague requirements into a clean architecture fast&lt;/p&gt;

&lt;p&gt;generating consistent scaffolding across backend + frontend&lt;/p&gt;

&lt;p&gt;debugging from real logs under time pressure&lt;/p&gt;

&lt;p&gt;keeping momentum without leaving the terminal&lt;/p&gt;

&lt;p&gt;This challenge theme is spot-on: Copilot in the terminal isn’t just autocomplete—used well, it becomes a workflow accelerator.&lt;/p&gt;

&lt;h2&gt;
  
  
  Connect &amp;amp; Repositories
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/hericlibong" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FGitHub-hericlibong-181717%3Flogo%3Dgithub%26logoColor%3Dwhite" alt="GitHub" width="135" height="20"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://huggingface.co/ricolajazz" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fimg.shields.io%2Fbadge%2FHuggingFace-ricolajazz-FFD21E%3Flogo%3Dhuggingface%26logoColor%3Dblack" alt="Hugging Face" width="159" height="20"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>cli</category>
      <category>githubcopilot</category>
    </item>
    <item>
      <title>SassyAI: The Sarcastic AI Assistant</title>
      <dc:creator>heric libong</dc:creator>
      <pubDate>Sun, 11 May 2025 23:33:48 +0000</pubDate>
      <link>https://dev.to/bongli/sassyai-the-sarcastic-ai-assistant-4mfh</link>
      <guid>https://dev.to/bongli/sassyai-the-sarcastic-ai-assistant-4mfh</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/aws-amazon-q-v2025-04-30"&gt;Amazon Q Developer "Quack The Code" Challenge&lt;/a&gt;: That's Entertainment!&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;SassyAI: The Judgy Assistant&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;SassyAI&lt;/strong&gt; is an interactive, sarcastic AI assistant that never fails to roast users with witty, snarky, and sometimes outright rude responses. Designed for developers and tech enthusiasts looking for a humorous break, SassyAI doesn’t just provide answers—it provides attitude.&lt;/p&gt;




&lt;blockquote&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Update (V2 is live 🚀)&lt;/strong&gt;
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;A new version is available as a &lt;strong&gt;web chatbot powered by an LLM&lt;/strong&gt;, with a fresh UI and a versioned persona.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Repo (V2)&lt;/strong&gt;: &lt;a href="https://github.com/hericlibong/SassyAI" rel="noopener noreferrer"&gt;https://github.com/hericlibong/SassyAI&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Live demo (Hugging Face)&lt;/strong&gt;: &lt;a href="https://ricolajazz-sassy-ai.hf.space" rel="noopener noreferrer"&gt;https://ricolajazz-sassy-ai.hf.space&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;




&lt;h3&gt;
  
  
  &lt;strong&gt;Features:&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Dynamic Theme Switching: Choose between several sarcasm-infused themes (e.g., general knowledge, coding, philosophy, food debates, rogue AI fears).&lt;/li&gt;
&lt;li&gt;    Customizable Contexts: Easily add new sarcastic themes by sending prompts to Amazon Q.&lt;/li&gt;
&lt;li&gt;    One-Session Interactivity: No need to restart the app—switch themes and continue bantering seamlessly.&lt;/li&gt;
&lt;li&gt;    Personalized Experience: The user can set a nickname to make interactions more engaging.&lt;/li&gt;
&lt;li&gt;    Visual Flair: Thanks to the integration of Rich, SassyAI’s responses are not only witty but also visually appealing.&lt;/li&gt;
&lt;li&gt;    Command Guide: Interactive help and theme selection directly from the chat.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;SassyAI is not just an AI assistant; it’s an AI that doesn’t care about your trivial questions—and isn’t afraid to say it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/OYcGW34V-7M"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Code Repository
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/hericlibong/SassyAI-v1" rel="noopener noreferrer"&gt;Repo github&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How I Used Amazon Q Developer
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Amazon Q Developer played&lt;/strong&gt; a crucial role in generating sarcastic responses for different contexts. Here’s how we leveraged it:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1.   Automated Sarcasm Generation:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We crafted context-specific prompts to elicit humorous and ironic replies.&lt;/li&gt;
&lt;li&gt;For instance, for the "general knowledge" theme:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Act as a sarcastic AI assistant who refuses to answer simple factual questions.
Generate 5 different humorous responses for the question: "What is the capital of France?"
The tone should be mocking, but clever. 

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Amazon Q delivered varied responses, which we integrated seamlessly into the &lt;code&gt;engine.py&lt;/code&gt; file.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Theme Expansion:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt; We used Amazon Q to quickly prototype new contexts like "sports" or "nerd culture" by generating sarcastic replies based on custom prompts.&lt;/li&gt;
&lt;li&gt; The responses were automatically structured and added to the engine for fluid integration.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Customization:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The modular nature of the responses allows for quick addition of new themes.
&lt;/li&gt;
&lt;li&gt;Users can extend the list by simply sending a prompt in the correct format to Amazon Q.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Installation and Usage
&lt;/h2&gt;

&lt;p&gt;Prerequisites:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Python 3.12&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Installation Steps:&lt;/strong&gt;&lt;br&gt;
1 - Clone the repository:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/hericlibong/SassyAI-v1
&lt;span class="nb"&gt;cd &lt;/span&gt;SassyAI
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2 - Create and activate the virtual environment:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python3.12 &lt;span class="nt"&gt;-m&lt;/span&gt; venv venv
&lt;span class="nb"&gt;source &lt;/span&gt;venv/bin/activate
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;3 - Install dependencies:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pip &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-r&lt;/span&gt; requirements.txt

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;4 - Run the CLI:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;python sassy_ai/main_cli.py 
or &lt;span class="nb"&gt;cd &lt;/span&gt;sassy_ai
python main_cli.py

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Log File
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;SassyAI&lt;/strong&gt; generates a log file (&lt;code&gt;amazon_q_log.md&lt;/code&gt;) that documents each prompt sent to Amazon Q and the corresponding responses. This log provides transparency regarding which contexts were generated automatically and helps in tracking future improvements.&lt;/p&gt;




&lt;h3&gt;
  
  
  Customization: Adding Your Own Themes
&lt;/h3&gt;

&lt;p&gt;&lt;strong&gt;SassyAI&lt;/strong&gt; is designed to be extensible. You can easily add your own sarcastic themes using Amazon Q.&lt;/p&gt;

&lt;p&gt;Example: Adding a "sports" theme&lt;/p&gt;

&lt;p&gt;1 - Generate responses with Amazon Q:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Act as a sarcastic AI assistant who dislikes sports discussions.  
Generate 5 different humorous responses for the question on sport events, sport practice, or sport personality.  
The tone should be mocking, as if the AI finds sports debates boring or trivial.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2 - Amazon Q Integration:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The responses will be automatically placed in the &lt;code&gt;engine.py&lt;/code&gt; file under &lt;code&gt;custom_responses&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;The corresponding regex will be added to &lt;code&gt;custom_patterns.&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;3 - Update the theme list:&lt;br&gt;
Modify &lt;code&gt;main_cli.py&lt;/code&gt; to include the new theme&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;sports&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;prompt&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Who is the best football player?&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;color&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;blue&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;emoji&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;⚽&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h3&gt;
  
  
  Feedback and Contribution
&lt;/h3&gt;

&lt;p&gt;Your feedback is welcome!&lt;br&gt;
Feel free to contribute by creating pull requests or submitting issues on GitHub.&lt;br&gt;
Let’s make SassyAI even sassier!&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>awschallenge</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
