Open Image APIs

Open-source directory for image model APIs. Browse providers, filter by features, and contribute.

Repo: https://github.com/swetha028-git/Openimage.api

Features

• Provider directory with search, categories, and free-tier filter
• Clean UI with Playfair Display headings and glass UI cards
• Pink/light‑pink/white gradient cards (glass-pink-mix) on Landing and Directory
• “Contribute” and “Submit a provider” buttons linked to this repo

Tech Stack

• Vite + React + TypeScript
• Tailwind CSS
• React Router

Getting Started

# Install deps
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Preview build
npm run preview

Customize

• Brand name: src/components/Header.tsx
• Header brand gradient: adjust Tailwind gradient classes on the brand <span>
• Card gradient: src/index.css class .glass-pink-mix
• Directory cards: src/components/ApiCard.tsx
• Landing feature cards: src/pages/Landing.tsx

Deploy

This is a static SPA (React Router). Ensure unknown routes rewrite to index.html.

• Netlify
  • Build: npm run build • Publish: dist
  • Add public/_redirects with: /* /index.html 200
• Vercel
  • Build: npm run build • Output: dist
  • Add vercel.json with: { "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }
• Cloudflare Pages
  • Build: npm run build • Output: dist
  • Enable “Single‑Page Application”
• GitHub Pages (project subpath)
  • Set base in vite.config.ts (e.g., '/Openimage.api/')
  • Add public/404.html copy of index.html as SPA fallback

Contributing

• Add or edit providers in src/data/apis.ts (type: ApiProvider)
• Keep UI tweaks consistent with Tailwind utility classes
• Submit PRs to the repo above

License

MIT