What I built
For this hackathon, I built a lightweight image background remover that can be installed as a PWA. It comes as part of a suite of media editing mini apps.
Category Submission:
Phone Friendly: Projects built for Mobile (PWA readiness, iOS/Android)
App Link
ClipCraft - Clip, Create, Share
Clip out interesting bits of your photo and remove the background
clipcraft.studio
Screenshots
Description
This app is a handy tool that focuses on simplifying various aspects of media editing. With its U2net-powered background removal feature, users can remove backgrounds from their images, making them more versatile and visually appealing. The app's backend is built using Python Flask, ensuring a smooth and reliable user experience.
In addition to the background removal feature, the app also offers multiple mini apps to enhance your media editing capabilities. Soon, you can expect the addition of a photo filter mini app, which will allow you to add creative filters to your images. Furthermore, the app will introduce a photo dump video creator, enabling you to compile your photos into engaging videos. Another exciting feature in the pipeline is the Podclip mini app, which utilizes the OpenAI Whisper model to generate transcriptions and create short videos from podcast audio clips. Lastly, the app will include a convenient Clipshare mini app that simplifies media sharing across devices through the use of QR codes.
Link to Source Code
Permissive License
MIT
Background (What made you decide to build this particular app? What inspired you?)
It all started when I began researching and playing around with AI tools. As I delved deeper into the world of artificial intelligence, I discovered the incredible potential and versatility of different types of models and their various use cases. One area that particularly caught my attention was media editing. I stumbled upon some fascinating models that could perform tasks like background removal seamlessly. The possibilities seemed endless, and I was inspired to build an app that could harness this power and make media editing more accessible and user-friendly. That's how the idea took shape.
How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)
When it came to utilizing GitHub Actions and GitHub Codespaces for my project, I found them to be invaluable tools in streamlining the development and deployment process. With GitHub Actions, I was able to create a multi-architecture container build effortlessly, ensuring compatibility across different environments. Moreover, GitHub Actions also facilitated pushing the container to GitHub Container Registry (ghcr) smoothly, making it readily accessible for deployment. Speaking of deployment, I relied on GitHub Actions once again to deploy the container to my server seamlessly. These powerful features provided an efficient and automated workflow, saving me time and effort.
Throughout this journey, I learned a great deal. One notable aspect was working with the U2NET model for salient object detection, specifically for background removal. It was fascinating to explore the capabilities of this model and see how well it performs. Additionally, I picked up a new skill in utilizing Onnxruntime, which allowed me to easily deploy the U2NET model in different environments. However, it wasn't without its challenges. I encountered numerous obstacles when deploying the model, and the experience taught me a valuable lesson about the intricacies and potential pitfalls involved in deploying AI models. Nevertheless, this entire process has been incredibly enriching, from exporting models to ONNX format to setting up Onnxruntime in Python, and it has deepened my understanding of deploying models effectively. Ultimately, my aim remains to move everything client-side, and with the skills and knowledge gained, I'm optimistic about achieving that goal.
Top comments (0)