GenAI Stars Hackthon: GenAI Sports+

This web app uses Twleve Labs API to solve the ELTA Sports prize in the GenAI Stars Hackathon. Feel free to give us a star (❁´◡`❁). Your support is our energy to create better projects! Live demo: the link will be provided once the hackathon results are announced.

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🚀 Deploy
6. 📚 Reference
7. ⚠️ Disclaimer

🤖 Introduction

Our Idea

Twelve Labs' Advantages (ref)

Twelve Labs' Architecture Overview (ref)

⚙️ Tech Stack

• Next.js
• TypeScript
• Tailwind CSS
• ShadCN/UI
• Ant Design
• Convex
• Clerk
• Twelve Labs
• Disqus

🔋 Features

👉 Robust Authentication: Secure and reliable user login and registration system with Convex and Clerk.

👉 Video with AI: Use Twelve Labs two models: Marengo2.6 and Pegasus1.1 to generate videos' hastags, summary, highlights, and chapters and classify with predefined classes and store these data into Convex automatically with Twelve Labs Webhook. User can watch not only the main video but also its highlights, chapters instantly.

👉 Smartly Videos Recommendation: Use Twelve Labs API "search" to search videos with hashtags to recommend similar videos.

👉 Comment Section: Integrate Disqus into the web app that store comment in Disqus db.

👉 Discover Page: Dedicated page for users to explore videos.

👉 Responsive Design: Fully functional and visually appealing across all devices and screen sizes.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites Make sure you have the following installed on your machine:

• Git
• Node.js (node version higher than v20..)
• npm (Node Package Manager)

1. Cloning the Repository

git clone https://github.com/ChenBingWei1201/genai-stars.git
cd genai-stars

2. Install the project dependencies

# genai-stars
npm i

2. Set Up Environment Variables

# genai-stars
cp .env.development .env.local

in .env.local

# Convex
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"

# Twelve Labs
TWELVE_LABS_API_KEY=
TWELVE_LABS_WEBHOOK_SECRET=
NEXT_PUBLIC_INDEX_ID=

Replace the placeholder values with your actual Convex & Clerk credentials and Twelve Labs API key. You can obtain these credentials by signing up on the Convex, Clerk, and Twelve Labs websites. Remeber to paste clerk and twelve labs enviroment variables on convex project setting page

3. Running the project

npm run dev

Open http://localhost:3000 with your browser to see the result.

🚀 Deploy

Deploy on Vercel: The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.Check out our Next.js deployment documentation for more details.

📚 Reference

1. Twelve Labs API docs
2. Convex docs
3. Clerk docs
4. Disqus
5. podcastr
6. who-talk-about-us
7. summarize-youtube-video
8. file-drive

⚠️ Disclaimer

This project is for hackathon purposes only. Please mark the origin clearly if you want to cite the project.