Forem: Hasnain01-hub

Sentiment Analysis & Course Recommendation using Web Scraping

Hasnain01-hub — Sun, 22 Dec 2024 05:40:54 +0000

This is a submission for the Bright Data Web Scraping Challenge: Most Creative Use of Web Data for AI Models

What I Built

The "Sentiment Analysis for Course Recommendation" project leverages web scraping and a robust machine learning model, featuring a Random Forest Classifier trained on the Coursera dataset, to assess courses based on user comments and sentiments, offering a more nuanced rating system beyond conventional star ratings. Users simply input the URL of a course they wish to evaluate, and the system extracts and classifies comments as positive, negative, or neutral. The resultant course rating is computed from these sentiments, facilitating informed decision-making for prospective learners. Additionally, the application offers course comparison functionality, allowing users to evaluate courses based on diverse criteria. This innovative approach, built with Python, Flask, and the YouTube API, empowers individuals to make education choices tailored to their specific needs and preferences, enhancing the online learning experience.

Demo

https://res.cloudinary.com/dpwustwce/image/upload/v1734845594/qjlclhnfikf3lja9qk6t.gif

How I Used Bright Data

Collect real-time user reviews and comments from course platforms like Coursera. Preprocess the data to remove noise, label sentiments (positive, negative, neutral), and structure it into a training-ready format. Fine-tune a sentiment analysis model like Random Forest or a transformer-based model, integrating it into a Flask-based application for personalized course recommendations and comparisons.

Optimizing AI Conversations: A Deep Dive into Semantic Search and Multi-Modal Input

Hasnain01-hub — Sat, 05 Oct 2024 08:05:29 +0000

This is a submission for the The Pinata Challenge

What I Built

I developed an AI Chat Assistant platform that leverages advanced semantic search to analyze and retrieve relevant data from a diverse content. The platform intelligently processes user prompts through the LangGraph tool, which determines when to invoke the RAG (retrieval-augmented generation) tool only when necessary, optimizing performance. This ensures that relevant references are efficiently retrieved to enhance the accuracy and relevance of the language model's responses.

The system supports multiple input formats, including images, YouTube links, and PDFs. For videos, it retrieves metadata via the YouTube API and generates concise summaries using a large language model (LLM). Similarly, it summarizes content from images, providing a comprehensive and versatile user experience across different media types.

Additionally, the platform integrates Stable Diffusion to generate images based on textual prompts. These generated images are stored in Pinata (IPFS). The platform also maintains a complete chat history, ensuring smooth continuity in conversations and allowing users to reference previous interactions effortlessly.

LangGraph Flow:

Advanced Semantic Search:
- Efficiently analyzes and retrieves relevant data from a vector store.
- Utilizes the LangGraph tool to optimize workflows by invoking the RAG tool only when necessary.
Multi-Format Input Support:
- Processes images, YouTube links, PDFs, and text files.
- Retrieves video metadata via the YouTube API and generates concise summaries using LLMs.
- Summarizes content from images for seamless multi-media analysis.
Image Generation:
- Integrates Stable Diffusion to generate images based on user-provided text prompts.
- Stores generated images using Pinata (IPFS) for decentralized access.
Comprehensive Chat History:
- Allows users to select which chats to store and easily reference previous interactions.
Optimized Performance:
- LangGraph tool ensures that RAG is only called when necessary, enhancing response relevance and efficiency.

Demo

Demo Video: Link

My Code

Hasnain01-hub / ai_chat_assistant

AI Chat Assistant

Description

This platform utilizes advanced semantic search algorithms to analyze and retrieve relevant data from this diverse content repository. After processing the input prompt, the system performs a semantic search to fetch pertinent content, which is then used as references for the language model to enhance the accuracy and relevance of its outputs.

The platform is designed to handle inputs across a diverse formats including images, YouTube links, and pdf files. For videos, it fetches metadata through the YouTube API, which is then effectively summarized using a LLM to provide concise and relevant content overviews. Similarly, the system is equipped to summarize content from images, ensuring a comprehensive and versatile user experience that accommodates various types of media.

Additionally, the platform incorporates the capability to generate images using the Stable Diffusion algorithm, further enriching the user interaction experience by providing visual content generation based on textual prompts…

View on GitHub

More Details

This platform integrates Stable Diffusion to generate images based on user textual prompts. The generated images are stored in Pinata (IPFS), which also maintains the chat history, it utilizes CDN for efficient access to the images.

TechStack used:

NextJS
Langchain
LangGraph
Pinata
Huggingface API
Azure OpenAI LLM
Pinecone
Firebase
Redux

Firebase VS PocketBase VS Appwrite

Hasnain01-hub — Mon, 05 Jun 2023 10:12:18 +0000

What is Database?
(Database)=
A database is a structured and organised collection of information that is specifically designed to efficiently store and retrieve data related to an application. It provides a reliable and centralized storage solution where application-specific data, such as user information, product details, or transaction records, can be securely stored and accessed when needed.

Firebase
Firebase is a comprehensive mobile and web development platform provided by Google. It offers a variety of tools and services that enable developers to build high-quality applications quickly and efficiently. It uses NoSQL for the database for the storage of data. Firebase provides features such as real-time database, authentication, cloud storage, hosting, and analytics, among others, simplifying the development process and enhancing application functionality.

PocketBase
PocketBase is an open-source Backend-as-a-service (BaaS). It offers all necessary needed features like authentication, file storage, realtime database and web dashboard.
PocketBase uses an SQLite Database behind the scene and is written in Go. They offer an awesome JavaScript/Go SDK. You are able to configure permission rules, OAuth2, external file storage (S3) and mail (SMTP).

AppWrite
AppWrite is an open-source backend server and API platform that simplifies the development of web and mobile applications. It provides a comprehensive set of features and services that handle common backend tasks, allowing developers to focus on building frontend experiences. With AppWrite, developers can quickly set up user authentication, manage databases, handle file storage, and utilize real-time event handling, among other functionalities. It is designed to be flexible, secure, and scalable, making it an ideal choice for developers looking to streamline their backend development process.

Comparison between these three platform

Multi-Factor(MFA) Authentication in React JS using firebase

Hasnain01-hub — Sun, 01 Jan 2023 18:16:15 +0000

So, in July 2022 Firebase added a new segment in authentication: MFA(Multi-Factor Authentication) which adds one more layer to authenticate users.

What is MFA?
It is a secure Authentication method which is also known as two-step authentication, which first registers the user by taking his email id and password, and in the following step, the user will get the 6-digit OTP in his phone no. After passing this step user will be authenticated and redirected to the home page.Steps to integrate MFA in your React JS app:

1) First create your react app.

npx create-react-app mfaexample

2) Create a new firebase project and configure your firebase project with your react app.

3) In order to have two-step authentication, first enable any authentication provider from authentication>Sign-in-method
In this blog, I will cover sign-in with email and password option as the first authentication layer.

4) Enable the MFA option under authentication>Sign-in-method in the below Advanced section of your firebase project.

5) Create a Register page in which the first step is to create users using sign-in with email and password. The email needs to be verified for setting the 2-factor auth. After doing this a verification link will be sent to the email address of the newly created user. Then click on the share link the email will be verified the user data will be encrypted and stored in the local storage and will be redirected to the OTP page.
Also check the spam folder of your email address to get the verification link.

Register.js

import Cryptr from "cryptr";
const cryptr = new Cryptr("myTotallySecretKey");
const registerWithEmailAndPassword = async (e) => {
    e.preventDefault();
    try {
    //Form fields validation
      if (email !== "" && password !== "" && phone !== "") {
        if (phone.length < 10)
          return alert("Please enter a valid phone number");
         // Creating a new user with the email and password
        const res = await auth.createUserWithEmailAndPassword(email, password);
        const user = res.user;
        //encrypt the user data 
        const encryptedphone = cryptr.encrypt(`+91${phone}`);
        const encryptedpassword = cryptr.encrypt(password);

        const userdata = {
          email: email,
          password: encryptedpassword,
          phone: encryptedphone,
          user: user,
        };
        //Sending an verification link to user's email id
        await user
          .sendEmailVerification({ url: "http://localhost:3000/otp" })
          .then(async () => {
         //Store the users details in localStorage
            window.localStorage.setItem("user", JSON.stringify(userdata));
            setEmail("");
            setPassword("");
            setPhone("");
            alert("Email sent");
          });
      } else {
        alert("Please fill all the fields");
      }
    } catch (err) {
      console.error(err);
   }
  };

6) The user data will be fetched from local storage and, 6-digit OTP will be sent to the registered phone number.

OtpScreen.js

import {
  multiFactor,
  PhoneAuthProvider,
  PhoneMultiFactorGenerator,
  RecaptchaVerifier,
} from "firebase/auth";
import Cryptr from "cryptr";
React.useEffect(() => {
  //get the user data from localStorage
    const getdata = JSON.parse(window.localStorage.getItem("user"));
   //if the data is null than redirect back to registerd page
    if (getdata === null) {
      history.push("/register");
    }
    sentotp(getdata);
  }, []);
const sentotp = async (getdata) => {
  /* A listener that triggers whenever the authentication state changes. */
    auth.onAuthStateChanged(async (user) => {
/* Decrypting the phone number that was encrypted in the previous step. */
      const decryptedphone = cryptr.decrypt(getdata.phone);
  /* Creating a new recaptcha verifier. */
      const recaptchaVerifier = new RecaptchaVerifier(
        "2fa-captcha",
        { size: "invisible" },
        auth
      );
      recaptchaVerifier.render();
      await multiFactor(user)
        .getSession()
        .then(function (multiFactorSession) {
          // Specify the phone number and pass the MFA session.
          const phoneInfoOptions = {
            phoneNumber: decryptedphone,
            session: multiFactorSession,
          };

          const phoneAuthProvider = new PhoneAuthProvider(auth);

          // Send SMS verification code.
          return phoneAuthProvider.verifyPhoneNumber(
            phoneInfoOptions,
            recaptchaVerifier
          );
        })
        .then(function (verificationId) {
          setverification(verificationId);
        });
    });
  };

7) Add this function in OtpScreen.js, which will trigger after submitting the OTP. After the OTP is verified it will Enroll the user in the multi-factor authentication and remove the user data from the local storage.

verifyotp function

const verifyotp = async (e) => {
    e.preventDefault();
    try {
//get the OTP from user nad pass in PhoneAuthProvider
const cred = PhoneAuthProvider.credential(verification, otp);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

      const user = auth.currentUser;
/* Enrolling the user in the multi-factor authentication. */
      await user.multiFactor
        .enroll(multiFactorAssertion, "phone number")
        .then((enrollment) => {
          history.push("/home");
        });
/* Removing the user from localStorage. */
      localStorage.removeItem("user");
    } catch (err) {
      alert("Invalid OTP");
      console.log(err);
    }
  };

hurry! the signup part is completed.

8) For the login part, pass the user credentials in signInWithEmailAndPassword function and store a boolean after successful login in local storage.

Login.js

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
/* function that is provided by firebase to sign in a user with email and password. */
      await auth.signInWithEmailAndPassword(email, password);
    } catch (error) {
      if (error.code === "auth/multi-factor-auth-required") {
        // The user is enrolled in MFA, must be verified
        window.resolver = error.resolver;
      } else if (error.code === "auth/too-many-requests") {
        window.resolver = error.resolver;
      } else {
        console.log(error.code, error.message);
        alert("Invalid Credentials");
        return;
      }
    }
// store a true boolean after successfully login 
    window.localStorage.setItem("approvedsignin", JSON.stringify(true));
    history.push("/loginotp");
  };

9) Fetch the data from local storage to check if the user has already completed the initial login step, 6-digit OTP will be sent to the registered phone number. Then pass the user entered OTP in PhoneAuthProvider function to verify it.

VerifyUser.js

import {
  PhoneAuthProvider,
  PhoneMultiFactorGenerator,
  RecaptchaVerifier,
} from "firebase/auth";
React.useEffect(() => {
  //check if the user has completed the first login step 
    const verfifer = JSON.parse(window.localStorage.getItem("approvedsignin"));
    if (verfifer === true) {
      sendOtp();
    } else {
      history.push("/");
    }
  }, []);

const sendOtp = async () => {
    const recaptchaVerifier = new RecaptchaVerifier(
      "2fa-captcha",
      { size: "invisible" },
      auth
    );
    recaptchaVerifier.render();
    const phoneOpts = {
      multiFactorHint: window.resolver.hints[0],
      session: window.resolver.session,
    };

    const phoneAuthProvider = new PhoneAuthProvider(auth);

    await phoneAuthProvider
      .verifyPhoneNumber(phoneOpts, recaptchaVerifier)
      .then((verificationId) => {
        setverification(verificationId);
      });
  };

  //verify otp 
const verify = async (e) => {
    e.preventDefault();
    try {
      //pass the user endtered otp
      const cred = PhoneAuthProvider.credential(verification, otp);

      const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);

      const credential = await window.resolver
        .resolveSignIn(multiFactorAssertion)
        .then((enrollment) => {
          auth.onAuthStateChanged(async (users) => {
            if (users) {
              //Remove boolean from localStorage
              window.localStorage.removeItem("approvedsignin");
              history.push("/home");
            }
          });
        });
    } catch (err) {
      alert("Invalid OTP");
      console.log(err);
    }
  };

Note: Add this code in OtpScreen.js and VerifyUser.js file in JSX part

<div id="2fa-captcha" style={{ display: "flex", justifyContent: "center" }}></div>

Congratulations, the two-factor authentication is set up for your react js app 😎.

Connect Me!
Linkedin: linkedin.com/in/hasnain-sayyed-537164177/
GitHub: https://github.com/Hasnain01-hub
Source Code: https://github.com/Hasnain01-hub/MultiFactorAuthentication-React

Buy me a Coffee: https://www.buymeacoffee.com/hasnainsayyed

If this post finds you helpful, plz like and follow me for more such amazing upcoming content 😊

Refs in React

Hasnain01-hub — Sun, 18 Sep 2022 18:42:00 +0000

What are Refs?? anyone??

Don't know, I am here to help you. if You know how to manipulate the DOM(Document Object Model) using Vanilla Javascript. Then understanding this concept would be easier.
So the ref's concept is same as using document.getElementById, document.getElementByClassName or document.getElementByTagName in javascript. This method is used to get access of the current element or component in the DOM structure were we can manipulate it or change its CSS attribute, delete or add an element. Same in React.js the Refs hook is used to get the access of the current element, Where it passes the current element object. We can manipulate it by calling the current attribute of that object. It doesn't re-render while the element is manipulated.

Lets understand it with an example:-



function CustomTextInput(props) {
  const Input = useRef();

  function handleClick() {
Input.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={Input} />
      <input
        type="button"
        value="Focus the input"
        onClick={handleClick}
      />
    </div>
  );
}

Css Web-kit property

Hasnain01-hub — Wed, 21 Apr 2021 08:12:36 +0000

What is WebKit?

The word ‘webkit’ has become more popular in recent times when talking about CSS and web design. However, there is still quite a bit of confusion relating to the term ‘webkit’ in terms of what it means and how it is used when coding CSS. Webkit refers to the browser rendering engine used for Apple’s Safari and Google’s Chrome browsers. It is also the CSS syntax used for CSS3 modules

For example, in the CSS3 code below the green square widens horizontally over a period of 2 seconds when the mouse hovers over it:



.div { 
width: 100px;
height: 100px; 
background: green;
/*Start transition effect*/ 
transition-property: width;
transition-duration: 2s; 
}
.div:hover { 
width: 300px; 
}

In order for the same transition effect to render on browsers using the WebKit engine, the CSS code will be as follows:



-webkit-transition-property: width; -webkit-transition-duration: 2s;

The –webkit- code will be ignored by other web browser rendering engines
Explore more on this topic...