InnoNinja AI

Overview

A single static page, branded InnoNinja AI, built for the TechTrix web development event. You type a prompt and it fetches a generated image from a fine-tuned text-to-image model on the Hugging Face Inference API.

What I built

• Plain index.html, style.css and ai.js, no build step.
• Letter-by-letter animated title built by wrapping each character in a span with a staggered animation delay.
• query() posts the prompt to the Hugging Face inference endpoint, reads the response as a blob and renders it as an image.
• Loader shown while the request is in flight and hidden on success or error.

Architecture

A browser-only page talking directly to a hosted model.

flowchart LR
  subgraph client["Browser"]
    page["index.html and ai.js"]
    img["Image element"]
  end
  subgraph ext["External"]
    hf["Hugging Face Inference API"]
  end
  page -->|"POST prompt"| hf
  hf -->|"image blob"| page
  page --> img

System design

What happens when you click generate.

sequenceDiagram
  participant U as User
  participant P as Page script
  participant H as Hugging Face API
  U->>P: enter prompt and click
  P->>P: show loader
  P->>H: POST inputs with bearer token
  H-->>P: image blob
  P->>P: hide loader
  P-->>U: render image

Learnings

• The API token sits in client-side JavaScript, which is fine for an event demo but belongs behind a server function in anything real.
• Cold starts on the inference API made a visible loading state necessary.