TerrifAI is a web application that allows users to apply spooky AI-powered transformations to their images. This project was created for the Cloudinary CloudCreate: Spooky AI Hackathon, organized in collaboration with midudev.
- Upload and transform images using Cloudinary's AI capabilities
- Apply various spooky effects:
- Replace backgrounds with eerie scenes
- Remove or replace elements in the image
- Recolor objects with a Halloween-themed palette
- Interactive image comparison slider
- Responsive design for desktop and mobile devices
- Dark mode support
- Astro - Static Site Generator
- TypeScript - Programming Language
- Tailwind CSS - Utility-first CSS framework
- Cloudinary - Cloud-based image and video management
- astro-cloudinary - Cloudinary integration for Astro
-
Clone the repository:
git clone https://github.com/your-username/terrifai.git cd terrifai -
Install dependencies:
pnpm install -
Set up your Cloudinary credentials: Create a
.envfile in the root directory and add your Cloudinary credentials:CLOUDINARY_CLOUD_NAME=your_cloud_name CLOUDINARY_API_KEY=your_api_key CLOUDINARY_API_SECRET=your_api_secret -
Run the development server:
pnpm run dev -
Open your browser and navigate to
http://localhost:4321
To create a production-ready build:
pnpm run build
The built files will be in the dist directory.
src/pages/- Astro pagessrc/components/- Reusable Astro componentssrc/layouts/- Page layoutssrc/styles/- Global stylessrc/scripts/- TypeScript utility functionssrc/content/- Content collections for Astropublic/- Static assets
Contributions are welcome! Please feel free to submit a Pull Request.
Anthony Rovira - LinkedIn
- Cloudinary for hosting the hackathon and providing powerful image transformation capabilities
- midudev for organizing the hackathon and inspiring the developer community
This project is open source and available under the MIT License.