Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/khaledsaeed18/image-captioning

✨A modern web application that generates captions for images using AI.
https://github.com/khaledsaeed18/image-captioning

ai huggingface nextjs server-actions shadcn-ui tailwindcss typescript

Last synced: about 17 hours ago
JSON representation

✨A modern web application that generates captions for images using AI.

Host: GitHub
URL: https://github.com/khaledsaeed18/image-captioning
Owner: KhaledSaeed18
License: mit
Created: 2025-02-08T22:08:23.000Z (3 days ago)
Default Branch: main
Last Pushed: 2025-02-09T21:45:22.000Z (1 day ago)
Last Synced: 2025-02-09T22:26:17.443Z (1 day ago)
Topics: ai, huggingface, nextjs, server-actions, shadcn-ui, tailwindcss, typescript
Language: TypeScript
Homepage: https://image-captioning-three-tau.vercel.app
Size: 181 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

# ✨ AI Image Captioning App

A modern web application that generates captions for images using AI.

## 🚀 Features

- **Instant Image Captioning**: Upload images and get AI-generated descriptions in seconds
- **Multiple Image Format Support**: Handles JPEG, PNG, WebP, and GIF formats
- **File Validation**: Automated checks for file size and type
- **History Management**: Keeps track of your recent image captions
- **Keyboard Shortcuts**:
- `Ctrl + O`: Open file upload dialog
- `Ctrl + G`: Generate caption
- `Ctrl + R`: Reset/clear image
- `Ctrl + C`: Copy caption to clipboard
- `Ctrl + I`: Toggle info popup
- `Ctrl + M`: Toggle theme
- `Ctrl + H`: Toggle history sidebar
- `Ctrl + K`: Show keyboard shortcuts
- **Responsive Design**: Works seamlessly on desktop and mobile devices
- **Dark/Light Mode**: Supports system theme preferences

## 🛠️ Technology Stack

- **Frontend**:
- Next.js (React Framework)
- TypeScript
- Tailwind CSS
- Radix UI Components (Shadcn/ui)
- Lucide React Icons

- **Backend**:
- Next.js API Routes
- Hugging Face Inference API
- BLIP Image Captioning Model

## 🤖 AI Model

This project uses the [BLIP Image Captioning Large Model](https://huggingface.co/Salesforce/blip-image-captioning-large) by Salesforce, hosted on Hugging Face. The model is capable of generating detailed and accurate captions for a wide variety of images.

## 🚀 Getting Started

1- Clone the repository

```bash
git clone https://github.com/KhaledSaeed18/image-captioning.git
```

2- Install dependencies

```bash
npm install
```

3- Set up environment variables

```env
HUGGINGFACE_API_KEY=your_api_key_here
```

4- Run the development server

```bash
npm run dev
```

5- Open [http://localhost:3000](http://localhost:3000) in your browser

## 🔒 Security & Limitations

- Maximum file size: 10MB
- Supported image formats: JPEG, PNG, WebP, GIF
- All processing is done server-side
- No images are stored permanently

## 📝 License

MIT License - feel free to use this project for personal or commercial purposes.

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 🙏 Acknowledgments

- [Salesforce BLIP Model](https://huggingface.co/Salesforce/blip-image-captioning-large)
- [Hugging Face](https://huggingface.co/)
- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Radix UI](https://www.radix-ui.com/)