Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/valehernandezz/spookify
👻 Editor de fotos estilo Halloween para hackathon Midudev y Cloudinary 🎃
https://github.com/valehernandezz/spookify
cloudinary cloudinary-ai css3 html5 javascript midudev midudev-hackathon-cloudinary photo-editor react tailwindcss typescript
Last synced: about 2 months ago
JSON representation
👻 Editor de fotos estilo Halloween para hackathon Midudev y Cloudinary 🎃
- Host: GitHub
- URL: https://github.com/valehernandezz/spookify
- Owner: ValeHernandezz
- Created: 2024-10-11T23:03:39.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T22:17:27.000Z (3 months ago)
- Last Synced: 2024-10-26T10:24:03.067Z (2 months ago)
- Topics: cloudinary, cloudinary-ai, css3, html5, javascript, midudev, midudev-hackathon-cloudinary, photo-editor, react, tailwindcss, typescript
- Language: JavaScript
- Homepage: https://spookify-ai.vercel.app
- Size: 5.83 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 👻 Spookify
¡Convierte tus fotos en imágenes aterradoras con Spookify! Genera fondos espeluznantes, transforma personas en criaturas de miedo, añade disfraces o máscaras, y descarga tus creaciones para compartirlas con amigos. ¡Todo esto usando la magia de la inteligencia artificial!
## ✔ Funcionalidades
- **Generar fondos de terror**: Cambia el fondo de tus imágenes por escenarios espeluznantes como cementerios embrujados o paisajes apocalípticos.
- **Transformar las personas**: Aplica efectos terroríficos a las personas en tus fotos, como convertirlas en zombis o monstruos.
- **Poner máscaras**: Añade máscaras icónicas de personajes de películas de terror como Jason Voorhees o Freddy Krueger.
- **Rellenar fotos o recortarlas**: Ajusta el tamaño de tus imágenes, añade o recorta áreas para lograr el encuadre perfecto.
- **Ponerle disfraz a las personas**: Transforma la ropa de los personajes en disfraces aterradores, perfectos para la temática de Halloween.
- **Efectos personalizados con IA**: Si no te gustan los efectos predeterminados, puedes crear el efecto que se te ocurra mediante inteligencia artificial.
- **Descargar y compartir tus fotos**: Guarda y comparte tus creaciones terroríficas con amigos y familiares a través de redes sociales.
## 🔧 Configuración del entorno
Antes de ejecutar la aplicación, asegúrate de configurar las variables de entorno en un archivo `.env` en el directorio raíz del proyecto. A continuación, se muestran las variables requeridas:
```sh
NEXT_PUBLIC_CLOUDINARY_URL= #tu_cloudinary_url
CLOUDINARY_API_KEY= #tu_api_key
CLOUDINARY_API_SECRET= #tu_api_secret
CLOUDINARY_UPLOAD_PRESET= #tu_upload_preset
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME= #tu_cloud_name
PERPLEXITY_API_KEY= #tu_perplexity_api_key
NEXT_PUBLIC_URL_FRONTEND= #http://localhost:3000
```
### 📦 Instalación de dependencias
Para instalar los paquetes necesarios, puedes utilizar cualquiera de los siguientes gestores de paquetes:
- `pnpm` (recomendado por su eficiencia y rapidez)
```sh
pnpm i
```
- `npm`
```sh
npm i
```
### 🚀 Iniciar el proyecto
Una vez que hayas configurado tu archivo `.env`, puedes iniciar el proyecto usando uno de los siguientes comandos:
### ▶️ Ejecutar el proyecto
```sh
pnpm run dev
```
o
```sh
npm run dev
```
## 🛠️ Construido con
- [](https://next.cloudinary.dev/cldimage/examples) - Plataforma para gestionar, optimizar y transformar imágenes y videos a través de su API.
- [](https://docs.perplexity.ai/home) - Plataforma que ofrece modelos de lenguaje generativo a través de su API para desarrolladores.
- [](https://nextjs.org/) - Framework de React que permite construir sitios web.
- [](https://react.dev/) - Biblioteca para interfaces de usuario web y nativas.
- [](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - Lenguaje de programación para desarrollar funciones interactivas en páginas web.
- [](https://www.typescriptlang.org/es/) - Superconjunto de JavaScript que añade tipos estáticos y objetos basados en clases.
- [](https://tailwindcss.com/) - Framework de CSS para crear diseños web con clases predefinidas.
## 💻 Desarrollado por
| | | |
|--|--|--|
| **👨💻 [nicomelendez](https://github.com/nicomelendez)** | [](https://www.nicomelendez.dev/) | [](https://www.linkedin.com/in/nicolas-melendez/) |
| **👩💻 [ValeHernandezz](https://github.com/ValeHernandezz)** | [](https://valehernandez.com) | [](https://linkedin.com/in/valentina-hernandez-modino) |