https://github.com/nicolasperez19/astro-image-autocaption

An Astro component that automatically generates image captions using the Replicate API if no alt text is provided. Perfect for accessible and SEO-friendly image handling!
https://github.com/nicolasperez19/astro-image-autocaption

accessibility astro component image image-captioning react replicate-api tailwindcss typescript

Last synced: about 2 months ago
JSON representation

An Astro component that automatically generates image captions using the Replicate API if no alt text is provided. Perfect for accessible and SEO-friendly image handling!

• Host: GitHub
• URL: https://github.com/nicolasperez19/astro-image-autocaption
• Owner: nicolasperez19
• Created: 2024-10-30T16:24:17.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-11-09T01:23:30.000Z (3 months ago)
• Last Synced: 2024-11-09T02:18:00.596Z (3 months ago)
• Topics: accessibility, astro, component, image, image-captioning, react, replicate-api, tailwindcss, typescript
• Language: Astro
• Homepage:
• Size: 2.19 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Astro Image Auto-Caption Component

![GitHub stars](https://img.shields.io/github/stars/nicolasperez19/astro-image-autocaption?style=for-the-badge)

[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub%20Sponsors-red?style=for-the-badge&logo=github-sponsors)](https://github.com/sponsors/nicolasperez19)

[![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20A%20Coffee-donate-yellow?style=for-the-badge&logo=buy-me-a-coffee)](https://buymeacoffee.com/nico_perez)

# Table of Contents

1. [Installation](#installation)

2. [Running the project](#running-the-project)

3. [Project structure](#project-structure)

## 💾 Install the Project

To install the project, clone the git repo and install the dependencies by running the following commands in your terminal:

```sh

git clone https://github.com/nicolasperez19/astro-image-autocaption.git

cd astro-image-autocaption

bun install

```

The image component uses the [Replicate API](https://replicate.com/) in order to auto-caption the image. To use the Replicate API, you need an API token for authentication. You must place your API token in a `.env` file with the variable name `REPLICATE_API_TOKEN`, like so: 

```sh

REPLICATE_API_TOKEN=""

```

## 🏃‍♂️💨 Run the Project

To run the project locally in developer mode, running the following commands in your terminal:

```sh

bun run dev

```

## 🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

```text

/

├── public/

│   └── favicon.svg

├── src/

│   ├── components/

│   │   └── Card.astro

│   ├── layouts/

│   │   └── Layout.astro

│   └── pages/

│       └── index.astro

└── package.json

```

Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.

There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the `public/` directory.

## 🤝 Acknowledgments

Hats off to [Kavish Soam](https://github.com/kavishsoam) for making valuable contributions to the documentation!

## 📝 Citation

If you would like to cite this project, please use the following BibTeX entry:

```bibtex

@misc{astro_image_autocaption,

  author = {Nicolas Perez},

  title = {Astro Image Autocaption},

  year = {2024},

  publisher = {GitHub},

  journal = {GitHub repository},

  howpublished = {\url{https://github.com/nicolasperez19/astro-image-autocaption}},

  note = {Version 1.1.0},

}

```