<?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>WHAT IS THIS RUBBER DUCK FOR?</title>
      <dc:creator>heric libong</dc:creator>
      <pubDate>Fri, 10 Apr 2026 09:08:09 +0000</pubDate>
      <link>https://dev.to/bongli/what-is-this-rubber-duck-for-5cok</link>
      <guid>https://dev.to/bongli/what-is-this-rubber-duck-for-5cok</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/aprilfools-2026"&gt;DEV April Fools Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

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

&lt;p&gt;The starting point was a brief moment in &lt;strong&gt;Harry Potter and the Chamber of Secrets&lt;/strong&gt;, when Arthur Weasley asks Harry: &lt;em&gt;"what exactly is the function of a rubber duck?"&lt;/em&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%2Fg55poml6vpvr5mwyzhhh.gif" 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%2Fg55poml6vpvr5mwyzhhh.gif" alt="arthur" width="640" height="284"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I took that very essential question as the basis for the project and turned it into a ministerial interface for the formal examination of a yellow plastic duck.&lt;br&gt;
So I built &lt;strong&gt;What Is This Duck For?&lt;/strong&gt;, a web app that treats a rubber duck as a matter of public administration, emotional uncertainty, procedural concern, and possible domestic surveillance.&lt;/p&gt;

&lt;p&gt;The app lets visitors submit the duck to five official interpretive modes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Analyze the Duck&lt;/strong&gt; — a mock-expert technical reading
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Request Deeper Interpretation&lt;/strong&gt; — overthinking, philosophical drift
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Escalate to Ministry&lt;/strong&gt; — paperwork, forms, bureaucratic misery
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Trust the Duck&lt;/strong&gt; — calm reassurance and quiet faith
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Do Not Trust the Duck&lt;/strong&gt; — bathroom paranoia and suspicious side-eye &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each mode generates a formal &lt;em&gt;“ministerial report”&lt;/em&gt; with a hypothesis, classification, threat level, confidence score, and conclusion. The result is mildly concerning, far more official than necessary, and hopefully funny.&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%2Flw9re05imehol6t9sxhc.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%2Flw9re05imehol6t9sxhc.png" alt="home page" width="800" height="464"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

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

&lt;p&gt;&lt;strong&gt;&lt;a href="https://ricolajazz-whatisduckfor.hf.space" rel="noopener noreferrer"&gt;Live Demo&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The interface is designed to feel strangely official for something that should never have required official attention in the first place.&lt;/p&gt;

&lt;p&gt;A typical session looks like this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;choose a mode&lt;/li&gt;
&lt;li&gt;trigger the inquiry&lt;/li&gt;
&lt;li&gt;watch the report compile itself&lt;/li&gt;
&lt;li&gt;leave with fewer answers than you started with&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Code
&lt;/h2&gt;

&lt;p&gt;Source code is available here:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/hericlibong/What_Is_This_Duck_For" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The project includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a &lt;code&gt;FastAPI backend&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;Gemini 2.5 Flash&lt;/li&gt;
&lt;li&gt;a custom &lt;code&gt;frontend&lt;/code&gt; with a ministry-style interface&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;prompt-based&lt;/code&gt; persona logic&lt;/li&gt;
&lt;li&gt;an About page explaining the investigation as if it were a real institutional service&lt;/li&gt;
&lt;li&gt;custom duck persona assets for each official mode&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  How I Built It
&lt;/h2&gt;

&lt;p&gt;I built the app with &lt;strong&gt;&lt;code&gt;FastAPI&lt;/code&gt;&lt;/strong&gt;, server-rendered templates, &lt;code&gt;custom CSS&lt;/code&gt;, and JavaScript for the interactive report flow.&lt;/p&gt;

&lt;p&gt;The biggest part of the work was not _“building a useful product,” _but overbuilding a completely useless one with as much conviction as possible.&lt;/p&gt;

&lt;p&gt;A few highlights:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I designed the homepage as a fake bureaucratic dashboard&lt;/li&gt;
&lt;li&gt;I created five distinct &lt;strong&gt;duck-analysis personas&lt;/strong&gt; with different tones and behaviors&lt;/li&gt;
&lt;li&gt;I refined the generated writing so each mode felt readable, funny, and specific&lt;/li&gt;
&lt;li&gt;I added custom duck visuals for each persona on the About page&lt;/li&gt;
&lt;li&gt;I deployed the demo on &lt;strong&gt;Hugging Face Spaces&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For the AI side, I worked with &lt;code&gt;Gemini CLI&lt;/code&gt; from the beginning, using it throughout the project to build, refine, and steer the experience. On the generation side, I used Google Gemini to produce structured, persona-driven reports that stayed coherent, readable, and funny.&lt;/p&gt;

&lt;p&gt;One of the most interesting challenges was building the five analysis personas so they produced outputs that felt distinct, coherent, and consistently funny without becoming repetitive. That required a lot of prompt iteration — especially around the relationship between hypothesis and conclusion — and a gradual shift away from pure absurdity toward a more structured comic logic, all with &lt;code&gt;Gemini 2.5 Flash&lt;/code&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  Agents Sessions
&lt;/h2&gt;

&lt;p&gt;1 - This initial prompt defined the joke, the scope, and the rules of the project from the start.&lt;/p&gt;


&lt;div class="ltag-agent-session"&gt;
  &lt;div class="agent-session-header"&gt;
    
      
      
      
    
    &lt;span class="agent-session-tool-icon-badge" title="Gemini CLI"&gt;
  
    
      
      
      
      
    
  
  

&lt;/span&gt;
    &lt;span class="agent-session-title"&gt;what_is_the_duck_for  - initial prompt&lt;/span&gt;
      &lt;span class="agent-session-slice-label"&gt;initial prompt&lt;/span&gt;
  &lt;/div&gt;

  &lt;div class="agent-session-scroll"&gt;

      &lt;div class="agent-session-message agent-session-user"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-user"&gt;
          You
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div&gt;
                  &lt;div class="agent-session-text agent-session-text-collapse"&gt;
                    &lt;p&gt;You are my coding assistant. I am building a deliberately silly challenge project called "What Is This Duck For?".&lt;/p&gt;

&lt;p&gt;Context:&lt;br&gt;
- This project is for a challenge whose spirit is: build something intentionally useless, funny, light, absurd, and simple.&lt;br&gt;
- The concept: a very serious interface uses Google Gemini to analyze a yellow rubber duck, but never reaches a useful conclusion.&lt;br&gt;
- This is NOT a serious product, NOT an MVP, NOT a scalable app.&lt;br&gt;
- It must stay small, clean, readable, and fun.&lt;br&gt;
- No overengineering.&lt;/p&gt;

&lt;p&gt;Your role for this step:&lt;br&gt;
Bootstrap the project environment from scratch inside the current workspace.&lt;/p&gt;

&lt;p&gt;Current state:&lt;br&gt;
- Workspace already exists.&lt;br&gt;
- A Python virtual environment &lt;code&gt;.venv&lt;/code&gt; already exists.&lt;br&gt;
- Nothing else is installed yet.&lt;/p&gt;

&lt;p&gt;Technical direction:&lt;br&gt;
- Python backend with FastAPI&lt;br&gt;
- Simple frontend with HTML/CSS/vanilla JS&lt;br&gt;
- Gemini API integration later&lt;br&gt;
- No database&lt;br&gt;
- No authentication&lt;br&gt;
- No React&lt;br&gt;
- No Docker for now&lt;br&gt;
- No testing setup yet unless strictly necessary&lt;br&gt;
- Keep the architecture minimal&lt;/p&gt;

&lt;p&gt;What I want you to do now:&lt;br&gt;
1. Inspect the current workspace first.&lt;br&gt;
2. Activate/use the existing &lt;code&gt;.venv&lt;/code&gt;.&lt;br&gt;
3. Install only the minimal dependencies needed for the initial project skeleton:&lt;br&gt;
   - fastapi&lt;br&gt;
   - uvicorn&lt;br&gt;
   - jinja2&lt;br&gt;
   - python-dotenv&lt;br&gt;
   - google-genai&lt;br&gt;
4. Create a clean minimal project structure for this app.&lt;br&gt;
5. Add a &lt;code&gt;.gitignore&lt;/code&gt;.&lt;br&gt;
6. Add a &lt;code&gt;.env.example&lt;/code&gt;.&lt;br&gt;
7. Add a minimal &lt;code&gt;README.md&lt;/code&gt; that presents the project in the spirit of the challenge.&lt;br&gt;
8. Add the minimal FastAPI app skeleton and the basic template/static folders, but do NOT build the full app yet.&lt;br&gt;
9. Make sure the structure is simple and easy to continue step by step.&lt;/p&gt;

&lt;p&gt;Recommended structure:&lt;br&gt;
- app/&lt;br&gt;
  - main.py&lt;br&gt;
  - gemini_service.py&lt;br&gt;
  - prompts.py&lt;br&gt;
  - templates/&lt;br&gt;
    - index.html&lt;br&gt;
  - static/&lt;br&gt;
    - css/&lt;br&gt;
      - style.css&lt;br&gt;
    - js/&lt;br&gt;
      - app.js&lt;br&gt;
    - img/&lt;br&gt;
- .gitignore&lt;br&gt;
- .env.example&lt;br&gt;
- README.md&lt;br&gt;
- requirements.txt&lt;/p&gt;

&lt;p&gt;Important constraints:&lt;br&gt;
- Do not invent extra features.&lt;br&gt;
- Do not add database, auth, admin panel, API complexity, or unnecessary abstractions.&lt;br&gt;
- Do not implement the real Gemini logic yet beyond placeholder structure.&lt;br&gt;
- Do not generate a complex UI yet.&lt;br&gt;
- Keep names explicit and readable.&lt;br&gt;
- Keep the codebase lightweight and hackathon-friendly.&lt;br&gt;
- Prefer clarity over cleverness.&lt;/p&gt;

&lt;p&gt;After you make the changes:&lt;br&gt;
1. Show me the final file tree.&lt;br&gt;
2. Explain briefly what you installed and created.&lt;br&gt;
3. Tell me exactly what command I should run next to start the app locally.&lt;br&gt;
4. Mention any point that still needs my manual input, especially the Gemini API key.&lt;/p&gt;

&lt;p&gt;If something is ambiguous, make a reasonable minimal choice and state it clearly.&lt;/p&gt;

                  &lt;/div&gt;
                  Show more
                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="agent-session-gap"&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
          &lt;span class="agent-session-gap-label"&gt;24 messages not shown&lt;/span&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
        &lt;/div&gt;

      &lt;div class="agent-session-message agent-session-assistant"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-assistant"&gt;
          Agent
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div class="agent-session-text"&gt;
                  &lt;p&gt;&lt;strong&gt;Providing the Final Response&lt;/strong&gt;&lt;/p&gt;

                &lt;/div&gt;
                &lt;div&gt;
                  &lt;div class="agent-session-text agent-session-text-collapse"&gt;
                    &lt;p&gt;The project "What Is This Duck For?" is now bootstrapped with a minimal FastAPI skeleton and a clean directory structure.&lt;/p&gt;

&lt;h3&gt;Final File Tree&lt;/h3&gt;

&lt;pre class="highlight text"&gt;&lt;code&gt;.
├── app/
│   ├── static/
│   │   ├── css/
│   │   │   └── style.css
│   │   ├── img/
│   │   └── js/
│   │       └── app.js
│   ├── templates/
│   │   └── index.html
│   ├── gemini_service.py
│   ├── main.py
│   └── prompts.py
├── .env.example
├── .gitignore
├── README.md
└── requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;What was installed and created:&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Dependencies&lt;/strong&gt;: &lt;code&gt;fastapi&lt;/code&gt;, &lt;code&gt;uvicorn&lt;/code&gt;, &lt;code&gt;jinja2&lt;/code&gt;, &lt;code&gt;python-dotenv&lt;/code&gt;, and &lt;code&gt;google-genai&lt;/code&gt; were installed into your existing &lt;code&gt;.venv&lt;/code&gt;. A &lt;code&gt;requirements.txt&lt;/code&gt; was generated.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Backend Skeleton&lt;/strong&gt;: Created &lt;code&gt;app/main.py&lt;/code&gt; with basic routing and static file serving.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Gemini Service&lt;/strong&gt;: Added &lt;code&gt;app/gemini_service.py&lt;/code&gt; and &lt;code&gt;app/prompts.py&lt;/code&gt; as placeholders for the AI logic.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Frontend&lt;/strong&gt;: Built a minimalist "Advanced Rubber Duck Analytics" interface using vanilla HTML, CSS, and JS.&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Project Docs&lt;/strong&gt;: Added a &lt;code&gt;README.md&lt;/code&gt; in the spirit of the challenge and a &lt;code&gt;.env.example&lt;/code&gt; for configuration.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;How to start the app locally:&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt; &lt;strong&gt;Prepare Environment&lt;/strong&gt;:
&lt;code&gt;bash
cp .env.example .env
&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;Run the Server&lt;/strong&gt;:
&lt;code&gt;bash
.venv/bin/uvicorn app.main:app --reload
&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt; &lt;strong&gt;View the App&lt;/strong&gt;: Open your browser at &lt;code&gt;http://localhost:8000&lt;/code&gt;.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;Manual Input Needed:&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Gemini API Key&lt;/strong&gt;: You need to edit the &lt;code&gt;.env&lt;/code&gt; file and provide a valid &lt;code&gt;GEMINI_API_KEY&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Duck Image&lt;/strong&gt;: I've created the &lt;code&gt;app/static/img/&lt;/code&gt; folder. You might want to drop a picture of a rubber duck there later to replace the CSS placeholder.&lt;/li&gt;
&lt;/ul&gt;

                  &lt;/div&gt;
                  Show more
                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="agent-session-gap"&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
          &lt;span class="agent-session-gap-label"&gt;36 messages not shown&lt;/span&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
        &lt;/div&gt;

      &lt;div class="agent-session-message agent-session-user"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-user"&gt;
          You
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div&gt;
                  &lt;div class="agent-session-text agent-session-text-collapse"&gt;
                    &lt;p&gt;You are my coding assistant.&lt;/p&gt;

&lt;p&gt;We are continuing the project:&lt;br&gt;
WHAT IS THIS DUCK FOR?&lt;/p&gt;

&lt;p&gt;Important:&lt;br&gt;
Do not implement the Gemini engine yet.&lt;br&gt;
Do not redesign the UI.&lt;br&gt;
Do not add backend complexity.&lt;br&gt;
This step is about documentation, planning, and locking the behavior of the 5 buttons.&lt;/p&gt;

&lt;p&gt;PROJECT STATE&lt;/p&gt;

&lt;p&gt;The interface now includes the 5 final action buttons:&lt;br&gt;
1. ANALYZE THE DUCK&lt;br&gt;
2. REQUEST DEEPER INTERPRETATION&lt;br&gt;
3. ESCALATE TO MINISTRY&lt;br&gt;
4. TRUST THE DUCK&lt;br&gt;
5. DO NOT TRUST THE DUCK&lt;/p&gt;

&lt;p&gt;We want to keep the project simple and organized.&lt;br&gt;
So before implementing the engine, we want:&lt;br&gt;
- a small docs folder&lt;br&gt;
- a clear planning document&lt;br&gt;
- a task checklist we can follow and update&lt;br&gt;
- a mini-spec for the 5 button modes&lt;/p&gt;

&lt;p&gt;YOUR TASK&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Create a &lt;code&gt;docs/&lt;/code&gt; folder at the project root.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Inside &lt;code&gt;docs/&lt;/code&gt;, create these files:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;project_plan.md&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;task_checklist.md&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;button_modes.md&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ol&gt;
&lt;li&gt;Fill them with simple, practical, readable content.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;CONTENT REQUIREMENTS&lt;/p&gt;

&lt;p&gt;A) docs/project_plan.md&lt;br&gt;
Create a short project plan that reflects the real order of work:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;current state&lt;/li&gt;
&lt;li&gt;what is already done&lt;/li&gt;
&lt;li&gt;what comes next&lt;/li&gt;
&lt;li&gt;what should come later&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The order should be:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Environment bootstrap&lt;/li&gt;
&lt;li&gt;Basic app skeleton&lt;/li&gt;
&lt;li&gt;UI base&lt;/li&gt;
&lt;li&gt;Final button set in the interface&lt;/li&gt;
&lt;li&gt;Lock the behavior of each button&lt;/li&gt;
&lt;li&gt;Implement Gemini interaction&lt;/li&gt;
&lt;li&gt;Polish the UI and visual identity&lt;/li&gt;
&lt;li&gt;Final cleanup / submission preparation&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Keep it concise.&lt;br&gt;
Do not write corporate/project-management jargon.&lt;br&gt;
Write it like a practical internal roadmap.&lt;/p&gt;

&lt;p&gt;B) docs/task_checklist.md&lt;br&gt;
Create a checklist with markdown checkboxes.&lt;/p&gt;

&lt;p&gt;Include:&lt;br&gt;
- completed tasks&lt;br&gt;
- current tasks&lt;br&gt;
- upcoming tasks&lt;/p&gt;

&lt;p&gt;Use clear checkboxes like:&lt;br&gt;
- [x] ...&lt;br&gt;
- [ ] ...&lt;/p&gt;

&lt;p&gt;Include at least:&lt;br&gt;
- project bootstrapped&lt;br&gt;
- FastAPI skeleton created&lt;br&gt;
- single-page UI created&lt;br&gt;
- 5 final buttons added&lt;br&gt;
- button behavior spec pending&lt;br&gt;
- Gemini backend pending&lt;br&gt;
- report panel dynamic update pending&lt;br&gt;
- rubber duck visual improvement pending&lt;br&gt;
- aesthetic polish pending&lt;br&gt;
- README/submission refinement pending&lt;/p&gt;

&lt;p&gt;C) docs/button_modes.md&lt;br&gt;
This is the most important file for this step.&lt;/p&gt;

&lt;p&gt;Write a mini-spec for the 5 buttons.&lt;/p&gt;

&lt;p&gt;For each button, define clearly:&lt;br&gt;
- button label&lt;br&gt;
- internal mode name suggestion&lt;br&gt;
- role&lt;br&gt;
- tone&lt;br&gt;
- type of absurdity / angle of error&lt;br&gt;
- expected response style&lt;br&gt;
- what kind of conclusion it should tend to produce&lt;/p&gt;

&lt;p&gt;Use these 5 buttons exactly:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Analyze the Duck&lt;/li&gt;
&lt;li&gt;&lt;p&gt;base pseudo-scientific analysis&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Request Deeper Interpretation&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;over-interpretation / intellectual overreach&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Escalate to Ministry&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;absurd bureaucracy / official classification&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Trust the Duck&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;confident mystic reading / symbolic authority&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Do Not Trust the Duck&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;suspicious administrative paranoia&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;IMPORTANT RULES&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Keep all docs short and useful.&lt;/li&gt;
&lt;li&gt;Do not overengineer.&lt;/li&gt;
&lt;li&gt;Do not add product language.&lt;/li&gt;
&lt;li&gt;Do not implement code logic yet unless absolutely necessary.&lt;/li&gt;
&lt;li&gt;Do not change the backend or Gemini integration in this step.&lt;/li&gt;
&lt;li&gt;If you need to make a very small frontend text adjustment for consistency, keep it minimal and list it explicitly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;OUTPUT REQUIRED&lt;/p&gt;

&lt;p&gt;After making the changes, show me:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;the final file tree for the new &lt;code&gt;docs/&lt;/code&gt; folder&lt;/li&gt;
&lt;li&gt;the full contents of:&lt;/li&gt;
&lt;li&gt;docs/project_plan.md&lt;/li&gt;
&lt;li&gt;docs/task_checklist.md&lt;/li&gt;
&lt;li&gt;docs/button_modes.md&lt;/li&gt;
&lt;li&gt;a short explanation of how these docs will help the next implementation step&lt;/li&gt;
&lt;li&gt;if you changed any file outside &lt;code&gt;docs/&lt;/code&gt;, list it explicitly&lt;/li&gt;
&lt;/ol&gt;

                  &lt;/div&gt;
                  Show more
                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="agent-session-message agent-session-assistant"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-assistant"&gt;
          Agent
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div class="agent-session-text"&gt;
                  &lt;p&gt;&lt;strong&gt;Structuring Project Documentation&lt;/strong&gt; / &lt;strong&gt;Outlining the Button Spec&lt;/strong&gt; / &lt;strong&gt;Formulating Button Mode Details&lt;/strong&gt; / &lt;strong&gt;Executing the Plan's Steps&lt;/strong&gt;&lt;/p&gt;

                &lt;/div&gt;
                &lt;div class="agent-session-text"&gt;
                  &lt;p&gt;I will create the &lt;code&gt;docs/&lt;/code&gt; directory and populate it with the project plan, task checklist, and button mode specifications.&lt;/p&gt;

                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="agent-session-gap"&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
          &lt;span class="agent-session-gap-label"&gt;7 messages not shown&lt;/span&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
        &lt;/div&gt;

      &lt;div class="agent-session-message agent-session-assistant"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-assistant"&gt;
          Agent
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div&gt;
                  &lt;div class="agent-session-text agent-session-text-collapse"&gt;
                    &lt;p&gt;I have created the requested documentation and planning folder.&lt;/p&gt;

&lt;h3&gt;Final File Tree for &lt;code&gt;docs/&lt;/code&gt;:&lt;/h3&gt;

&lt;pre class="highlight text"&gt;&lt;code&gt;docs/
├── button_modes.md
├── project_plan.md
└── task_checklist.md
&lt;/code&gt;&lt;/pre&gt;

&lt;h3&gt;Contents Summary:&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;project_plan.md&lt;/code&gt;&lt;/strong&gt;: Provides a concise, practical roadmap from project bootstrap to final cleanup, focusing on building a "serious, useless" application.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;task_checklist.md&lt;/code&gt;&lt;/strong&gt;: Lists all completed, current, and upcoming tasks with markdown checkboxes, covering infrastructure, interface, and AI integration phases.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;button_modes.md&lt;/code&gt;&lt;/strong&gt;: A detailed specification for the five analysis buttons, defining their internal mode names, tones, absurdity angles, and expected response styles.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;How these docs will help:&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Consistency&lt;/strong&gt;: &lt;code&gt;button_modes.md&lt;/code&gt; ensures that as we implement the AI prompts, each mode remains distinct and follows its intended "absurdity angle" (e.g., dry science vs. mystic prophecy).&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Focus&lt;/strong&gt;: &lt;code&gt;project_plan.md&lt;/code&gt; keeps the project scope narrow, preventing feature creep and maintaining the simple, single-page concept.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Organization&lt;/strong&gt;: &lt;code&gt;task_checklist.md&lt;/code&gt; allows us to track our progress accurately and ensures we don't skip the crucial "polish" steps at the end.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No files were changed outside of the &lt;code&gt;docs/&lt;/code&gt; folder in this step. We are now ready to implement the backend logic to handle these specific modes.&lt;/p&gt;

                  &lt;/div&gt;
                  Show more
                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="agent-session-footer"&gt;
    &lt;span class="agent-session-meta"&gt;
        Slice: &lt;em&gt;initial prompt&lt;/em&gt; · 5 of 102 messages
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;p&gt;2 - Persona Refinement | Making “Ministry” Funnier and More Concrete&lt;/p&gt;


&lt;div class="ltag-agent-session"&gt;
  &lt;div class="agent-session-header"&gt;
    
      
      
      
    
    &lt;span class="agent-session-tool-icon-badge" title="Gemini CLI"&gt;
  
    
      
      
      
      
    
  
  

&lt;/span&gt;
    &lt;span class="agent-session-title"&gt;Persona building | what is duck for&lt;/span&gt;
      &lt;span class="agent-session-slice-label"&gt;persona_building&lt;/span&gt;
  &lt;/div&gt;

  &lt;div class="agent-session-scroll"&gt;

      &lt;div class="agent-session-message agent-session-user"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-user"&gt;
          You
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div&gt;
                  &lt;div class="agent-session-text agent-session-text-collapse"&gt;
                    &lt;p&gt;We are doing a targeted correction pass on the "ministry" persona only.&lt;/p&gt;

&lt;p&gt;Do not change frontend.&lt;br&gt;
Do not change backend flow.&lt;br&gt;
Do not change logging.&lt;br&gt;
Do not change JSON schema.&lt;br&gt;
Do not modify the other personas unless strictly necessary.&lt;/p&gt;

&lt;p&gt;DIAGNOSIS&lt;/p&gt;

&lt;p&gt;The other personas are now much closer to the desired result.&lt;br&gt;
The main remaining failure is "ministry".&lt;/p&gt;

&lt;p&gt;Current problem:&lt;br&gt;
"ministry" still tends to generate bureaucratic worldbuilding instead of a clear comic theory of function.&lt;/p&gt;

&lt;p&gt;It produces:&lt;br&gt;
- too much administrative texture&lt;br&gt;
- too many clauses, sections, and procedural layers&lt;br&gt;
- too much fake-ministry prose&lt;br&gt;
- not enough immediate sense&lt;/p&gt;

&lt;p&gt;The result is coherent in tone, but not funny enough and not clear enough.&lt;/p&gt;

&lt;p&gt;CORRECTION GOAL&lt;/p&gt;

&lt;p&gt;The ministry persona must no longer feel like:&lt;br&gt;
"a generic bureaucratic monologue"&lt;/p&gt;

&lt;p&gt;It must feel like:&lt;br&gt;
"a civil servant calmly explaining the duck’s specific administrative function and the ridiculous procedural consequences attached to it"&lt;/p&gt;

&lt;p&gt;NEW RULES FOR MINISTRY&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;The hypothesis must clearly state what the duck is administratively FOR.&lt;br&gt;
It must describe a concrete official or semi-official function.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The function must be simple, specific, and readable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The conclusion must comment on the administrative implications of that function.&lt;br&gt;
It must not spiral into ministry lore.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Keep the bureaucracy petty, local, and humiliating.&lt;br&gt;
Not epic, not sprawling.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Prefer:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;one form&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;one permit&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;one missing signature&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;one wrong classification&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;one absurd office rule&lt;br&gt;
over:&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;multiple clauses&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;layered subcommittees&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;long directive chains&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;abstract grievance systems&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The joke should be understandable even on first read.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The duck must remain central.&lt;br&gt;
The bureaucracy must exist because of the duck’s function, not the other way around.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;GOOD DIRECTION EXAMPLES&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The duck serves as a floating compliance marker for baths already in progress.&lt;/li&gt;
&lt;li&gt;The duck functions as an informal complaint receiver for minor bath-related grievances.&lt;/li&gt;
&lt;li&gt;The duck is required as a witness object before a splash incident can be officially recorded.&lt;/li&gt;
&lt;li&gt;The duck temporarily certifies that a bather is still emotionally eligible for continued soaking.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;BAD DIRECTION EXAMPLES&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;abstract grievance manifestation object&lt;/li&gt;
&lt;li&gt;sprawling directive chains&lt;/li&gt;
&lt;li&gt;excessive clause stacking&lt;/li&gt;
&lt;li&gt;vague ministry lore&lt;/li&gt;
&lt;li&gt;classification replacing function&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;TONE TARGET&lt;/p&gt;

&lt;p&gt;The humor should come from:&lt;br&gt;
- procedural seriousness&lt;br&gt;
- ridiculous administrative logic&lt;br&gt;
- calm official language applied to a bath toy&lt;/p&gt;

&lt;p&gt;It should be funny because it sounds annoyingly plausible,&lt;br&gt;
not because it sounds huge or overbuilt.&lt;/p&gt;

&lt;p&gt;TASK&lt;/p&gt;

&lt;p&gt;Update only the ministry persona instructions in app/prompts.py.&lt;br&gt;
Update docs only if needed for consistency.&lt;br&gt;
Do not touch the other persona instructions unless required.&lt;/p&gt;

&lt;p&gt;After changes, show:&lt;br&gt;
1. the updated ministry prompt section&lt;br&gt;
2. any doc changes if made&lt;br&gt;
3. a short explanation of how you made ministry clearer, more concrete, and less lore-heavy&lt;br&gt;
4. confirmation that JSON schema, frontend, backend flow, and logging were unchanged&lt;/p&gt;

                  &lt;/div&gt;
                  Show more
                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;

      &lt;div class="agent-session-message agent-session-assistant"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-assistant"&gt;
          Agent
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div class="agent-session-text"&gt;
                  &lt;p&gt;&lt;strong&gt;Refining the Persona&lt;/strong&gt; / &lt;strong&gt;Prioritizing Functionality&lt;/strong&gt;&lt;/p&gt;

                &lt;/div&gt;
                &lt;div class="agent-session-text"&gt;
                  &lt;p&gt;I will update the "ministry" persona in &lt;code&gt;app/prompts.py&lt;/code&gt; to ensure it focuses on a clear, concrete administrative function for the duck, followed by a humorous interpretation of its procedural consequences. I'll then review and adjust &lt;code&gt;docs/tone_charter.md&lt;/code&gt; and &lt;code&gt;docs/button_modes.md&lt;/code&gt; to ensure they remain consistent with this more targeted, petty bureaucratic tone.&lt;/p&gt;

                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;div class="agent-session-gap"&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
          &lt;span class="agent-session-gap-label"&gt;1 message not shown&lt;/span&gt;
          &lt;span class="agent-session-gap-line"&gt;&lt;/span&gt;
        &lt;/div&gt;

      &lt;div class="agent-session-message agent-session-assistant"&gt;
        &lt;div class="agent-session-role-badge agent-session-role-assistant"&gt;
          Agent
        &lt;/div&gt;
        &lt;div class="agent-session-content"&gt;
                &lt;div&gt;
                  &lt;div class="agent-session-text agent-session-text-collapse"&gt;
                    &lt;p&gt;I have updated the "ministry" persona in &lt;code&gt;app/prompts.py&lt;/code&gt; to be more concrete and petty.&lt;/p&gt;

&lt;h3&gt;1. Updated Ministry Prompt Section&lt;/h3&gt;

&lt;pre class="highlight python"&gt;&lt;code&gt;    &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;ministry&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;
    PERSONA: THE PETTY CIVIL SERVANT
    Function Claim: Propose a simple, concrete administrative role for the duck (e.g., a witness for splash-claims, a floating compliance marker, a receiver for bath-grievances).
    Style: Calm, official, and annoyingly procedural. Focus on one specific hurdle: one missing permit, one wrong signature, or an expired bather-eligibility form.
    Avoid: Sprawling lore, multiple clauses, or epic bureaucracy. Keep it local, petty, and understandable.
    Conclusion: Explain the specific administrative consequences or jurisdictional headache caused by the hypothesis.
    &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;h3&gt;2. Documentation Changes&lt;/h3&gt;

&lt;p&gt;I have verified &lt;code&gt;docs/tone_charter.md&lt;/code&gt; and &lt;code&gt;docs/button_modes.md&lt;/code&gt;. They already align with this "petty bureaucrat" direction, so no further changes were required there.&lt;/p&gt;

&lt;h3&gt;3. Explanation of Changes&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Concrete Function&lt;/strong&gt;: The model is now explicitly told to propose a &lt;em&gt;simple&lt;/em&gt; administrative role (e.g., "witness for splash-claims") instead of generating abstract "grievance manifestation" lore.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Petty Hurdles&lt;/strong&gt;: I replaced the instruction for "rigid legalistic style" with a focus on specific, relatable administrative failures like "one missing permit" or "one wrong signature."&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Reduced Lore&lt;/strong&gt;: I banned "sprawling lore" and "epic bureaucracy" to ensure the joke remains grounded in the bathroom context and is immediately understandable.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;4. Confirmations&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;JSON schema&lt;/strong&gt; remains unchanged.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Frontend&lt;/strong&gt; was not modified.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Backend flow&lt;/strong&gt; remains exactly the same.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Logging&lt;/strong&gt; is still active and unchanged.&lt;/li&gt;
&lt;/ul&gt;

                  &lt;/div&gt;
                  Show more
                &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="agent-session-footer"&gt;
    &lt;span class="agent-session-meta"&gt;
        Slice: &lt;em&gt;persona_building&lt;/em&gt; · 3 of 234 messages
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Prize Category
&lt;/h2&gt;

&lt;p&gt;I’m primarily submitting this for &lt;strong&gt;Best Google AI Usage&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Gemini was a core part of the project, both in the building process and in the app itself. It helped turn a simple joke into a system of distinct personas, structured reports, and consistently readable comic outputs rather than generic AI text.&lt;/p&gt;

&lt;p&gt;And if the Ministry happens to win over the public, I would gladly accept the consequences under &lt;strong&gt;Community Favorite&lt;/strong&gt;.&lt;/p&gt;




&lt;p&gt;Thanks for reading, and please proceed with caution.&lt;br&gt;
In matters involving the yellow rubber duck, certainty remains premature.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>418challenge</category>
      <category>showdev</category>
    </item>
    <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>
