├── public ├── demo.png ├── favicon.ico ├── example.webp ├── imagealt.png ├── vercel.svg ├── thirteen.svg └── next.svg ├── jsconfig.json ├── postcss.config.js ├── next.config.js ├── tailwind.config.js ├── src ├── styles │ └── globals.css ├── pages │ ├── api │ │ └── generate.js │ ├── _app.js │ ├── _document.js │ └── index.js └── components │ ├── Hero.js │ ├── Output.js │ ├── Navbar.js │ └── Footer.js ├── README.md ├── .gitignore ├── package.json └── yarn.lock /public/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sujjeee/imagealt/HEAD/public/demo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sujjeee/imagealt/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/example.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sujjeee/imagealt/HEAD/public/example.webp -------------------------------------------------------------------------------- /public/imagealt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sujjeee/imagealt/HEAD/public/imagealt.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./src/**/*.{js,ts,jsx,tsx}",], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | body{ 6 | background-color: #03001C; 7 | } 8 | 9 | body::-webkit-scrollbar { 10 | display: none; 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ImageAlt : (https://imagealt.vercel.app/) 2 | ![Demo of ImageAlt Website](https://imagealt.vercel.app/demo.png) 3 | 4 | ImageAlt is a website that lets you generate alt text for any image. Alt text is a description of an image that helps people with visual impairments or low bandwidth to understand the content of the image. Alt text also improves the SEO and accessibility of your website. Image Alt uses Replicate API to generate alt text using a deep learning model. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/api/generate.js: -------------------------------------------------------------------------------- 1 | import { NextResponse } from 'next/server' 2 | import Replicate from 'replicate' 3 | 4 | export const config = { 5 | runtime: 'edge', 6 | } 7 | 8 | const replicate = new Replicate({ 9 | auth: process.env.REPLICATE_API_TOKEN, 10 | }) 11 | 12 | export default async function handler(req) { 13 | const image = 14 | req.nextUrl.searchParams.get('imageUrl') 15 | 16 | const output = await replicate.run( 17 | 'salesforce/blip:2e1dddc8621f72155f24cf2e0adbde548458d3cab9f00c0139eea840d0ac4746', 18 | { 19 | input: { 20 | image, 21 | }, 22 | } 23 | ) 24 | return NextResponse.json(output) 25 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "alt-text", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "axios": "^1.3.4", 13 | "next": "13.2.4", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0", 16 | "react-icons": "^4.8.0", 17 | "react-spinners": "^0.13.8", 18 | "react-uploader": "^3.10.0", 19 | "replicate": "^0.12.3", 20 | "uploader": "^3.9.0" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^10.4.14", 24 | "postcss": "^8.4.21", 25 | "tailwindcss": "^3.2.7" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Hero.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Hero = () => { 4 | return ( 5 |
6 |

7 | Generate {" "} 8 | 9 | Alt Text 10 | {" "} 11 | for any Image. 12 |

13 |

14 | Create alt text for any image in a few clicks with this free and open-source tool. Improve the accessibility and SEO of your content with this simple and effective tool! 15 |

16 |
17 | ) 18 | } 19 | 20 | export default Hero -------------------------------------------------------------------------------- /src/pages/_app.js: -------------------------------------------------------------------------------- 1 | import Footer from '@/components/Footer' 2 | import Navbar from '@/components/Navbar' 3 | import '@/styles/globals.css' 4 | import Script from 'next/script' 5 | 6 | export default function App({ Component, pageProps }) { 7 | return ( 8 | <> 9 | 24 |
25 |
26 | 27 |
28 | 29 |
33 | 34 | ) 35 | } 36 | -------------------------------------------------------------------------------- /src/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | let description = "Upload any image and generate alt text in seconds."; 5 | let ogimage = "https://imagealt.vercel.app/imagealt.png"; 6 | let sitename = "ImageAlt"; 7 | let title = "ImageAlt - Image to Text"; 8 | return ( 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | ) 30 | } 31 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Output.js: -------------------------------------------------------------------------------- 1 | 2 | import Image from 'next/image' 3 | import React from 'react' 4 | 5 | const Output = ({ data }) => { 6 | return ( 7 |
8 |
9 |
10 |
11 |

Uploaded Image

12 | Your uploaded image 16 |
17 |
18 |

Image Alt Text

19 |