Tired of sorting through comments? Apexa's got your back! Get instant notifications on audience reactions and say goodbye to content creation confusion. Apexa doesn't just analyze; it helps you generate awesome ideas. Stay tuned as we reveal how Apexa's image generation adds a magical touch to your creative journey!
🚀 Team Details:
Hi, I'm Utsav Bhattarai 👋, and alongside my awesome friend's Rajesh Khadka 🤝 and Our Video Crafter friend Bishesh Marasini , we've teamed up to bring you Apexa - The Analyzer. As passionate developers and tech enthusiasts, we embarked on this hackathon journey to create a powerful open-source app that adds a dash of innovation to your online experience.
Feel Free to connect with us:
My handles:
Rajesh's handles:
Bishesh's handles:
💡 Project Overview:
Apexa is the MIT license open source web application where you can keep track of your YouTube videos and Hashnode blogpost to understand your audience's thoughts on your content. Also you can generate a summary of the tracked videos and blogspot. Perfect for sharing with those friends who prefer concise over comprehensive content
With Apexa, you can discover new content ideas tailored to your interests, providing you with a brainstorming companion right at your fingertips. Additionally, you have the ability to create stunning AI-powered images suitable for video thumbnails and blog covers.
🔥 Inspiration, idea, and problem :
During a casual audio call with my friend Rajesh Khadka , he mentioned that Hashnode and Mindsdb had launched a Hackathon. Intrigued by this, we delved into the details provided in the announcement blog post by Daniela Passos . After thoroughly considering the announcement, we decided to collaborate and work on this exciting idea.
Certainly, it tackles the manual process of analyzing audience responses and helps in connecting with the audience as a content creator. To some extent, it facilitates brainstorming for content ideas and generate the creative images with just words.
🔧 Tech Stack:
Let's break down the tools that bring Apexa to life:
1. ReactJs as Front-end
We used ReactJs to make Apexa look cool and feel super easy to use. It's like the artist behind the scenes.
2. MongoDB as database
MongoDB is like our organized filing cabinet. It keeps all our data safe and easy to find, making sure everything in Apexa runs smoothly.
3. Custom styling with Material UI
Imagine mixing your own unique style with a collection of sleek design elements. That's what happened with Material UI – it's our secret sauce for making Apexa look awesome.
4. MindsDB as Brain of the operation:
MindsDB is the smart brain of Apexa. It helps to create, train, and optimize models for making the better AI product . MindsDB also grabs YouTube comments for Apexa because it knows where to find lots of useful info. And here's the cool part – MindsDB is an open-source project! That means anyone can tweak it to fit their needs. Just jump into the official MindsDB Repo and start making it your own by adding different data sources, AI engine and lots of stuffs.
👁️Quick Look
1. Hero Page
The first impression! The Hero Page showcases Apexa's awesome features – YouTube comment analysis, blog insights, content recommendations, and more.
2. Youtube Analyzer Page
Dive into the world of YouTube insights! Paste your video link, hit search, and witness a visual breakdown of comments. Get summaries, turn on notifications, and stay connected with your audience effortlessly.
3. Blog Analyzer Page
For the bloggers out there! Analyze Hashnode blog comments with a click. Summarize, turn on notifications, and keep your blog community engaged and positive.
4. Content Recommender Page
Need content inspiration? Choose your field, share your thoughts, and hit the magic button. Apexa suggests creative content ideas for videos, reels, blogs, and social media.
5. Image Generation Page
Unleash your creativity! Describe an image in the text box, hit process, and watch Apexa turn your words into a visual masterpiece. Download and share your unique creations
✨ Key Features:
Our Comment Analysis feature in the blog and YouTube sections makes it easy for users to understand what people are saying without reading all the comments. We've optimized this feature by processing comments in batches of 5 for quicker responses. The analysis is showcased with simple and beautiful pie charts for better visualization.
2. Summary Generation 📝
With Summary Generation on YouTube and blog pages, users can get a quick summary of a video or blog with just one click. It shows up in a nice pop-up with a cool writing animation.
3. Notification System 🔔
The Notification System in both blog and YouTube sections can be turn on to get alerted when toxic and hate comments are detected. Crafted with the help of a background bot, it runs every 20 seconds, scanning for harsh and spam comments in our database and sending notifications to the tracked user.
4. Image Generator 🖼
The Image Generator turns your words into pictures. Just type a word, hit a button, and a cool image comes out. We use a smart model called OpenAI DALL-E 3 to do this.
5. Content Recommender 💡
The Content Recommender suggests ideas for blogs, videos, and social media posts based on what users like. It's like a helpful friend giving you cool ideas for what to create next.
6. User Authentication 🔒
In Apexa, Authentication is secured using JWT with refresh and access tokens, ensuring the safety of user data and other information.
7. Insightful Analytics 📊
At Apexa, we really care about insights. Our Insightful Analytics feature looks at comments, figures out what's useful, and shows you important stuff. We've tested it with over 500 comments to make sure it works well.
8. Text-to-Speech Functionality 🎤
Located in the Content Recommender Page, each text box has a handy text-to-speech button that converts written ideas into spoken words.
9. Continuous Tracking 🔄
If there are new comments in blogs and videos, they get processed again when the user tracks the same content, adding up to the previous insights. It keeps you continuously updated on audience interactions
🧠 Why MindsDB?
We chose MindsDB as it was a requirement for the hackathon organized by Hashnode in collaboration with MindsDB. While it might seem a bit challenging initially, once you get comfortable with MindsDB, you'll love its features. MindsDB offers a wide range of data sources, AI engines, and integration handlers that allow you to build your own AI applications. You can create your own models by training them with large datasets tailored to your specific needs. MindsDB also supports popular AI engines like OpenAI and Hugging Face.
A cool aspect of MindsDB is that it's an open-source project, meaning anyone can contribute by adding their data sources, handlers, or AI engines to the official MindsDB repository. This flexibility allows users to easily customize and create their AI applications.
🤖 How We Used MindsDB:
We use MindsDB for various tasks, such as extracting YouTube comments and optimizing OpenAI models for specific purposes. Initially, we perform all the necessary tasks and testing using MindsDB's GUI editor through SQL commands. The models trained and optimized in the GUI editor are then accessed and utilized in our web application through MindsDB's JavaScript SDK. This SDK acts as a connection system to link the models with our back-end server. Here are some of the secret codes we used to make all this happen:
-
CREATE DATABASE mindsdb_youtube
WITH ENGINE = 'youtube',
PARAMETERS = {
"youtube_api_token": '-Your Youtube Developer Api key-'
};
SELECT * FROM mindsdb_youtube.comments
WHERE video_id = "Video ID";
For Creating the ML engine of OpenAi
CREATE ML_ENGINE openai_engine
FROM openai
USING
api_key = 'Your OpenAi API key';
-
CREATE MODEL mindsdb.comment_analyzer
PREDICT sentiment
USING
engine = 'openai_engine',
model_name = 'gpt-4',
max_tokens=400,
prompt_template = 'Evaluate the sentiment of the following comment segments enclosed by {} and separated by &. Provide only one sentiment for each comment, strictly choosing one out of these sentiments: Appreciation, Hate, Neutral, Spam. Avoid offering any explanations. If {comment1}& {comment2}& is passed, the response should be sentiment1, sentiment2. If {comment1}& {comment2}& {comment3}& {comment4}& {comment5}$ is passed, the response should be sentiment1, sentiment2, sentiment3, sentiment4, sentiment5. Ensure that this format remains consistent for all comments, and the maximum number of comments to be passed is up to 5 - {{comment}}';
For extracting summary of blog and youtube
CREATE MODEL mindsdb.text_summary
PREDICT summary
USING
engine = 'openai_engine',
model_name = 'gpt-4',
max_tokens=400,
prompt_template = 'Summarize the content of the YouTube video using transcript in short and strictly donot give incomplete summary - transcript: {{transcript}}';
CREATE MODEL mindsdb.blog_summary
PREDICT summary
USING
engine = 'openai_engine',
model_name = 'gpt-4',
max_tokens=400,
prompt_template = 'Summarize the content of the blog using markdown in short and strictly donot give incomplete summary - markdown: {{markdown}}';
➕ Add on:
Knowledge Base: It is a repository of learned representations or embeddings, usually created by training an embedding model on relevant data. This knowledge can be used by the agent to understand and respond to user inputs.
Skills: These are specific capabilities or tasks associated with the AI agent. Skills define how the agent can use its knowledge to perform various tasks, and they are often linked to models or knowledge bases.
CREATE KNOWLEDGE BASE command is used to create a knowledge base from an embedding model, and the CREATE SKILL command is used to define specific skills that utilize knowledge bases or other resources for tasks like sentiment analysis or text summarization. The agent is then configured with these skills to enable it to respond intelligently to user input.
CREATE ML_ENGINE openai_engine
FROM openai
USING
api_key = 'sk-.................';
CREATE MODEL mindsdb.embedding_model
PREDICT embeddings
USING
engine = 'openai_engine',
mode='embedding',
model_name='text-embedding-ada-002',
question_column = 'content';
CREATE KNOWLEDGE BASE my_knowledge_base
USING
model = mindsdb.embedding_model;
INSERT INTO my_knowledge_base (content)
VALUES ("I really enjoyed reading about your experiences and lessons learned as a developer. It's clear that you have a passion for this field and a dedication to constantly improving your skills. Keep on coding!");
CREATE SKILL sentiment_analysis_skill
USING
type = 'knowledge_base',
source = 'my_knowledge_base',
description = 'Sentiment Analysis';
Above code structure introduces a knowledge base (my_knowledge_base) and a skill (sentiment_analysis_skill) that utilizes the knowledge base. The sentiment analysis model (comment_analyzer) is then associated with the skill in an agent (my_agent).
🛠 How We Tackled Challenges:
let's simplify the challenges and how we tackled them:
1. Installation Challenge :
Our first challenge was installing MindsDB because the cloud version was down. Docker and pip install didn't work well due to slow internet and low specs. Seeking help in the MindsDB community Discord, we got instant support. Though initial suggestions didn't work, a community member advised installing MindsDB through source by cloning the repo. This method worked for both Linux and Windows systems, overcoming the installation challenge.
This picture captures the moment when Tarun, a helpful community member, assisted us in solving the installation challenge. Although we couldn't capture our direct Zoom meeting with him, this image symbolizes the support and guidance he and other community member provided during the troubleshooting process.
In this picture, Zoran is helping to solve issue related to Mindsdb
2. Using GraphQL hashnode API :
MindsDB supported YouTube comments but not Hashnode. While exploring contributing to MindsDB for Hashnode integration, we decided to use Hashnode's GraphQL API due to time constraints. The GraphQL API was new to us, so we sought help in the Hashnode Discord channel. They provided us with a GraphQL query to fetch data, resolving our issue with using the Hashnode GraphQL API.
In this Picture, Community member of Hashnode is helping us to use GraphQL hashnode Api
Initially, processing comments one by one was time-consuming, leading to timeouts with the GPT-3.5 turbo model. We requested and received access to the GPT-4 model, but the problem persisted. To enhance efficiency, we decided to process comments in batches of 5. Designing the perfect prompt was crucial, and after testing in the MindsDB GUI editor, we created an effective prompt. This reduced processing time significantly, allowing us to analyze 100 to 200 comments in just 5-6 seconds.
🎥 Video Crafting and Presentation:
After a month of hard work on our app Apexa, we decided to push our limit and create an awesome video presentation. My friend and I didn't have powerful laptops, but luckily, our friends did, and also had great video editing skills. He even suggested a cool idea for the first part of the video, which you can check out on our YouTube channel.
We borrowed a tripod and a good mobile phone for video recording. Planning our presentation, we created simple scripts for the video. Since my friend and I lived in the same city, we met up at his house to record. It wasn't all smooth sailing; we had to do several re-shoots because our screen recorder crashed and didn't capture high-quality footage. After searching for another recorder, we finally got it right. It took us two days to record the video, and then we sent the clips to our friend Bishesh, who worked his magic to edit the video into a simple and creative masterpiece. 🚀
Now, the awesome video is ready for everyone to watch!
Let's view the some snapshot's during our video making:
This picture captures us during a late-night reshoot for our video. Behind those smiles, there's a bit of sadness due to the frustration caused by a crash.
This snapshot was taken during the editing process.
🔗 Important Links:
🚀 GitHub: Click Here
🎬 YouTube: Click Here
🌐 Website: Click Here (The MindsDB cloud version is currently unavailable, resulting the main part of website being offline.)
💻 Mindsdb GUI Editor Code: Click here
🎉 Conclusion:
Overall the hackathon was a great experience for learning. We got to learn about Minds-db, generating models, training models, got a kick start on handling GraphQL API and learned some better ways to google. And most important of all, we developed a new skill of being patient when our code doesn't work and we don't get any solutions at all. Taking help from the community on discord, Slack and shaping the app. The whole experience was great, and if you haven't tried a hackathon yet, give it a shot now!
