Forem: Nayan Kaslikar

How I did chatting with Website using Langchain😎

Nayan Kaslikar — Sat, 14 Sep 2024 19:33:03 +0000

The internet is an ever-expanding ocean of information, and developers often need to make sense of this vast amount of data to power applications like chatbots, recommendation systems, and search engines. This is where LangChain's Web Loaders come in, offering a bridge between the web's raw data and your language models.

In this post, we’ll explore what Web Loaders are, name the types available in LangChain, and dive deep into how to use one of them to extract and process web content for your next big project. You can follow along with the official documentation here.

What Are Web Loaders?

Web Loaders in LangChain are tools designed to extract data from web and prepare it for natural language processing tasks. Instead of manually collecting and organizing content from different web pages, Web Loaders automate the process by fetching HTML data and turning it into structured documents that can be analyzed by your AI models.
LangChain's Web Loaders offer a convenient way to pull data from various sources across the web and streamline the process of building intelligent applications like question-answering systems, chatbots, or research assistants.

Types of Web Loaders in LangChain

LangChain supports several types of Web Loaders, each designed to handle specific types of web data. As of now, the following loaders are available:

WebBaseLoader: The most general-purpose loader for pulling raw HTML data from web pages.
CheerioWebBaseLoader: A specialized loader using the Cheerio library to parse HTML data and extract structured information.
BrowserLoader: A loader that fetches data by rendering web pages in a headless browser (like Puppeteer) for more complex, JavaScript-heavy sites.
PlaywrightURLLoader: Utilizes Playwright to load and interact with web pages that require JavaScript execution.

Spotlight on CheerioWebBaseLoader: Your Website's Data in a Snap

Let’s take a closer look at CheerioWebBaseLoader, one of the most powerful and flexible options for scraping structured content from web pages. CheerioWebBaseLoader leverages the Cheerio library, a fast and flexible tool that parses and manipulates HTML, similar to jQuery. It's perfect for sites where you need to extract specific data like blog posts, product descriptions, or headlines.
Why CheerioWebBaseLoader?

Structured Data Extraction: It’s excellent for grabbing specific HTML elements, like all <h1>or <p> tags.
Fast: It doesn't rely on a full headless browser, making it lighter and faster for scraping static pages.
Scalable: You can easily scale up to extract content from multiple pages by passing a list of URLs.

Example: Building a Blog Article Aggregator with CheerioWebBaseLoader

Imagine you want to create a bot that aggregates blog posts from a tech website. With CheerioWebBaseLoader, you can efficiently pull and process the content of each blog post to generate summaries, answer questions, or categorize articles.
Step 1: Install the Required Libraries
First, install the necessary packages for LangChain and Cheerio:
pip install langchain cheerio requests

Step 2: Set Up the Cheerio Loader
Here’s how you can set up CheerioWebBaseLoader to scrape data from a blog site:
from langchain.document_loaders import CheerioWebBaseLoader from langchain.text_splitter import RecursiveCharacterTextSplitter

Step 1: Define the blog URL to scrape

blog_url = "https://example-blog.com/latest-posts"

Step 2: Initialize the Cheerio loader

loader = CheerioWebBaseLoader(blog_url)

Step 3: Load the page content

blog_data = loader.load()

Step 4: Split the text into manageable chunks for processing

text_splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=50) docs = text_splitter.split_documents(blog_data)

Step 5: Display the fetched blog content

for doc in docs: print(doc.page_content)
Step 3: Analyze the Content
Once you've loaded the web content, you can plug it into any LangChain pipeline to perform tasks like question-answering, summarization, or even keyword extraction.
For instance, you can build a simple Q&A system on top of the scraped blog data:

from langchain.llms import OpenAI from langchain.chains.question_answering import load_qa_chain

Step 6: Initialize an LLM (like OpenAI GPT-3)

llm = OpenAI(temperature=0.7)

Step 7: Load the question-answering chain

qa_chain = load_qa_chain(llm)

Step 8: Ask a question

query = "What are the latest trends in AI from the blog?" answer = qa_chain.run(input_documents=docs, question=query)

print(f"Bot Answer: {answer}")
In this case, the CheerioWebBaseLoader extracts the latest blog posts, which are then processed by a text splitter and analyzed by an LLM to answer questions about current AI trends.

Real-World Use Case: Keeping Up with the Latest News

One real-world application of CheerioWebBaseLoader would be for a company that wants to keep track of the latest industry news. By using this loader to scrape a news website, the company can feed this data into an AI that summarizes the most important developments, giving their team an easy way to stay up-to-date.
You could take this even further by integrating the loader with a service that updates the database or generates daily reports automatically.

Conclusion: Powering the Web with LangChain Web Loaders

Web Loaders in LangChain provide a powerful, scalable way to pull data from websites, structure it, and integrate it into your AI models. From the lightweight CheerioWebBaseLoader for static content to the more complex BrowserLoader for dynamic pages, there's a tool for every use case.
With just a few lines of code, you can turn the web into a vast, interactive data source for your application. Whether you're building a news aggregator, a personalized content recommender, or a live data QA bot, LangChain’s Web Loaders have you covered.

So, what will you build with Web Loaders? Get started today by trying out one of LangChain’s loaders and let your AI tap into the wealth of knowledge available online.
Check out the official documentation for more details:

Web Loaders | 🦜️🔗 Langchain

These loaders are used to load web resources. They do not involve the local file system.

  <div class="color-secondary fs-s flex items-center">
      <img
        alt="favicon"
        class="c-embed__favicon m-0 mr-2 radius-0"
        src="https://js.langchain.com/v0.2/img/brand/favicon.png"
        loading="lazy" />
    js.langchain.com
  </div>
</div>

Happy scraping!

I Ate My Code!

Nayan Kaslikar — Thu, 11 Jul 2024 10:13:47 +0000

The Strange Rituals Behind My Programming Success🚀

The Step You’re Missing Before You Start Coding!⭐

In the rush to write code and bring ideas to life, developers often overlook a crucial step: drawing the flow of the application or code before diving into the actual coding. This blog post explores why this step is essential and provides an example to illustrate its importance.🖌️

Why Draw the Flow?

Clarity and Understanding: Visualizing the flow of your application helps you and your team understand the project better. It ensures that everyone is on the same page and has a clear picture of how different components interact with each other.
- It's often said that we should note down our ideas. Yes, it helps with better understanding, both for you and your team.
- But how about drawing your idea? No, you don’t need to be a painter for that. We have a wide variety of tools like Miro for it.
- Creating a diagram helps explain your ideas to the client effortlessly. Who doesn't like pictures?

Problem Identification: When you map out the flow, potential issues and bottlenecks become apparent early on. This allows you to address them before they become major problems, saving time and resources.
- When the entire team contributes to a diagram or flow, it's like the whole Indian Cricket Team leaving no stone unturned to win the World Cup!
Improved Communication: Diagrams serve as a common language between developers, designers, and stakeholders. They make it easier to explain complex logic and get feedback from non-technical team members.
- We get the opportunity to display multiple ideas.
- We also avoid being misled by incorrect ideas.
Efficient Development: A well-defined flow acts as a blueprint for your code, guiding you through the development process. This reduces the likelihood of errors and rework, leading to more efficient and streamlined development.
- As we progress, we have a map that helps us find our treasure.
- It shows us where we stand and what steps we need to take in which direction to find our treasure.
Scalability and Maintenance: With a clear flow diagram, it's easier to scale and maintain your application. Future developers can quickly grasp the structure and logic of the application, making onboarding and maintenance smoother.

Example: Developing a System for Retrieval-Augmented Generation with a Website

The provided diagram illustrates a complex workflow involving the crawling of a website, text-splitting, vectorization, and semantic search to generate meaningful answers using a Large Language Model (LLM). By visualizing this process, developers gain a comprehensive understanding of each component and their interactions, allowing for better planning and identification of potential issues. It ensures that all necessary steps are accounted for and facilitates clearer communication among team members. Ultimately, a well-crafted diagram acts as a roadmap, guiding the development process and reducing the likelihood of errors, thereby saving time and resources.

Tools I Use & Recommend

My favorite one is Miro. Go check it out now!

Creating Animated Diagrams for LinkedIn

Nayan Kaslikar — Mon, 22 Apr 2024 19:34:35 +0000

Creating Animated Diagrams for LinkedIn Using draw.io

In today's digital age💻👩‍💻, visual content has become increasingly important for effectively communicating complex concepts and ideas. Animated diagrams, in particular, have gained popularity on professional platforms like LinkedIn, where they serve as engaging tools for showcasing expertise and knowledge.

Whether you're illustrating the architecture of a software system, outlining a business process, or presenting a project roadmap, animated diagrams can captivate your audience and leave a lasting impression.🖌️🎨

With draw.io, you can bring your diagrams to life by adding movement, transitions, and interactivity, making them more engaging and memorable.

Creating animated diagrams with draw.io is straightforward and intuitive.

Here's a simple guide to get you started: 🙋‍♀️✒️

Choose a Template: draw.io offers a variety of pre-designed templates for different types of diagrams, such as flowcharts, UML diagrams, network diagrams, and more. Select a template that best fits your needs or start from scratch with a blank canvas.
Add Shapes and Elements: Use draw.io's extensive library of shapes, icons, and symbols to build your diagram. Drag and drop elements onto the canvas and arrange them to create your desired layout.
Customize Your Diagram: Customize the appearance of your diagram by adjusting colors, fonts, sizes, and styles. draw.io provides a range of formatting options to help you achieve the look and feel you want for your diagram.
Add Animations: Once your diagram is complete, it's time to add animations.
Go to Edit -> Select All Edges -> Flow
Preview and Export: Preview your animated diagram to ensure everything looks and functions as intended. Once you're satisfied, export your diagram in a format compatible with LinkedIn, such as GIF or MP4, and upload it to your LinkedIn profile or post.

In conclusion, draw.io provides a simple yet powerful platform for creating animated diagrams that stand out on LinkedIn. With its intuitive interface, extensive library of shapes and icons, and robust animation features, draw.io empowers professionals to bring their ideas to life and make a lasting impression in the digital world.
So why wait? Start creating your own animated diagrams with draw.io today and take your LinkedIn content to the next level!

TOOL LINK -> https://app.diagrams.net/

Other Tools :

Mermaid - https://mermaid.js.org/
Markmap - https://markmap.brie.dev/
PlantUML - https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
ASCII editors - https://asciiflow.com/#/
Go-Diagrams - https://github.com/blushft/go-diagrams
ExcaliDraw - https://excalidraw.com/

Do not use
in React😎😯👩‍💻

Nayan Kaslikar — Sun, 21 Apr 2024 18:16:33 +0000

Howdy People,😍🙋‍♀️
I'm on this fantastic journey where I'm exploring new & fun concepts of React.
This concept of Fragments sounds like the perfect
SHORTCUT ever 🤣😂

We all use <div> everytime when we work in html to make containers or wrap elements inside one element.🥱😴

In React JSX,
To return multiple components or elements we have to wrap & group all the elements inside a wrapper like div.

But in most of the cases that div is not required at all & it takes an extra space in the DOM but still we have to use it because that's how React works.
So, react introduced a new feature in React 16.2 which are React Fragments 🤑🤑🤑

Now React Fragments works exactly like Div, you can wrap or group multiple elements with Fragments.

return(
    <React.Fragment>
        <MyComponent1 />
        <MyComponent2 />
        <MyComponent3 />
    </React.Fragment>
)

Also you can use Fragments shorthand (<> </>) instead of React.Fragment,
example :

return(
    <>
        <MyComponent1 />
        <MyComponent2 />
        <MyComponent3 />
    </>
)

But why to use Fragments?? 🤔🤔🤔

Fast
Div element creates a node in DOM & occupy some space, but Fragments doesn't do any of this.

Less cluttered DOM
Having many nested div makes the DOM large & hard to read or debug but with Fragments, DOM becomes a little easy to look at and debug.

Okay Bye, Hope you liked this shortcut of mine!!
Feel free to add comments & hit likes.
🫡👌⭐💛👍

State Vs Prop in React [Tabular Difference]

Nayan Kaslikar — Thu, 18 Apr 2024 14:44:34 +0000

Feature	State	Props
Ownership	Owned and managed internally by component	Defined and passed by parent component
Mutability	Mutable; can be updated using `setState()`	Immutable; cannot be changed within component
Scope	Local to component	Passed from parent to child components
Initialization	Typically initialized within constructor for class components or using `useState()` hook for functional components	Passed as attributes from parent component
Component-Specific	Each component instance maintains its own state	Passed down from parent to child components
Control	Controlled and managed by the component	Controlled by parent component
Communication	Primarily for managing component-specific data	Used for communication between parent and child components
Updates	Can trigger re-renders within the component	Changes in props trigger re-renders in the child component
Usage	Managing internal component state	Configuring child components and facilitating communication between them

Let's illustrate each point with examples:

Ownership:

State:

 class Counter extends React.Component {
   constructor(props) {
     super(props);
     this.state = { count: 0 };
   }
   // ...
 }

Props:

 // ParentComponent.js
 import ChildComponent from './ChildComponent';

 function ParentComponent() {
   return <ChildComponent name="John" />;
 }

Mutability:

State:

 this.setState({ count: this.state.count + 1 });

Props: Props are immutable and cannot be changed within the component.

Scope:
- State: State is local to the component and not accessible outside of it.
- Props: Props are passed down from parent to child components and can be accessed within the child component.

Initialization:

State:

 const [count, setCount] = useState(0);

Props:

 // ParentComponent.js
 <ChildComponent name="John" />

Component-Specific:
- State: Each instance of a component maintains its own state.
- Props: Props are passed from parent components and can be different for each instance of the child component.
Control:
- State: Controlled and managed by the component itself.
- Props: Controlled by the parent component, and changes are propagated down to child components.
Communication:
- State: Used for managing component-specific data that can change over time.
- Props: Used for passing data and behavior from parent to child components.
Updates:
- State: Changes to state trigger re-renders within the component.
- Props: Changes in props trigger re-renders in the child component.
Usage:
- State: Used for managing internal component state, such as form inputs, toggle states, etc.
- Props: Used for configuring child components and facilitating communication between them.

Getting Started With React & Vite

Nayan Kaslikar — Wed, 17 Apr 2024 12:40:12 +0000

The perfect cheatsheet for you 📕🔖

Are you a developer ready to dive into the exciting world of React? Buckle up, because we're about to embark on a thrilling journey of building dynamic user interfaces, mastering component-based architecture, and unleashing the power of modern web development. But fear not, dear reader, for this won't be your typical blog post. Oh no, we're going to make learning React an interactive and enjoyable experience! So, grab your favorite beverage, fire up your code editor, and let's get started!

1. TypeScript: The Superhero of Static Typing

First things first, let's talk TypeScript. Imagine a world where bugs tremble in fear before they even dare to show themselves. That's the power of TypeScript! By adding static types to your JavaScript code, you'll catch errors before they wreak havoc in your application. So go ahead, sprinkle some TypeScript magic into your React project, and watch those bugs vanish into oblivion!

2. React: Your New Best Friend

Ah, React! The beating heart of modern web development. With its component-based architecture and declarative syntax, building interactive UIs has never been more delightful. Say goodbye to spaghetti code and hello to reusable components that make your codebase a joy to work with. Trust me, once you go React, you'll never look back!

3. Two Paths, One Destination

When it comes to setting up your React project, you've got options. Whether you prefer the simplicity of Create React App or the blazing fast performance of Vite, the choice is yours! Just pick your poison, follow a few simple commands, and voila, you're ready to start coding!

We will choose Vite.

4. Node Version Check: Don't Get Left Behind

Before we dive any deeper, let's make sure you're running the right version of Node.js. After all, you don't want to be stuck in the Stone Age while the rest of the world is zooming ahead. So fire up your terminal, type in a simple command, and let's ensure you're rocking the latest and greatest Node.js has to offer!

node -v

5. Vite Commands: The Need for Speed

Speaking of speed, have you heard of Vite? It's like the Formula 1 car of front-end development tools. With just a handful of commands, you can spin up a lightning-fast development server, optimize your production build, and leave your competitors in the dust. So buckle up, because we're about to take Vite for a spin!

npm create vite@4.1.0

Select the following settings

Need to install the following packages:
create-vite@4.1.0
Ok to proceed? (y) y
√ Project name: ... react-app
√ Select a framework: » React
√ Select a variant: » TypeScript

6. VS Code: Your Coding Sanctuary

Ah, Visual Studio Code. The holy grail of code editors. With its sleek interface, powerful extensions, and built-in TypeScript support, VS Code is the perfect companion for your React journey. So go ahead, open up your favorite project, and let the coding adventures begin!

Now run:

  cd react-app
  npm install

7. NPM Run Dev: Let's Get Cooking

Time to fire up your development server and see your React masterpiece come to life! With just a simple npm command, you'll have your app up and running in no time. So sit back, relax, and marvel at the beauty of your creation as it dances across your screen!

npm run dev

8. Project Structure: Lay the Foundations

A well-organized project structure is the backbone of any successful React application. From components to styles to assets, everything has its place. So let's roll up our sleeves, create some folders, and lay the foundations for a project that's as sturdy as it is elegant!

9. Crafting Your First Message Component

Let's kick things off by crafting a simple yet delightful Message component. Whether it's a friendly greeting or a personalized message, this component will be the cornerstone of your React journey. So fire up your code editor, flex those coding muscles, and let's bring this message to life!

Message.tsx


function Message(){
    let name;
    if(name){
         return <h1>Hello {name}</h1>
    }
    return <h1>Hello User</h1>

}

export default Message;

App.tsx

import Message from "./Message";

function App(){
  return <Message></Message>
}

export default App;

10. Library vs. Framework: Know the Difference

Before we proceed, let's take a moment to clarify something. React is a library, not a framework. What's the difference, you ask? Well, a library is a tool to use as you see fit, while a framework imposes a structure upon your code using a collection of tools. So remember, with React, you're in control!

11. Fragments: Keeping It Clean

In the world of React, sometimes you need to render multiple elements without a parent wrapper. That's where fragments come in handy! With their invisible presence, fragments allow you to keep your JSX clean and clutter-free. So go ahead, embrace the power of fragments, and let your components breathe!

<> 
   //add your fantastic react-code here
</>

12. Mastering the Art of Rendering Lists

Ah, the humble list. A staple of web development since the dawn of time. But fear not, for React makes rendering lists a breeze! With just a sprinkle of JavaScript magic, you can turn an array of data into a beautiful list of elements. So grab your favorite array, map through it like a pro, and let's bring those lists to life!

function ListGroup() {
  const items = ["India", "London", "France", "Mexico", "USA"];

  return (
    <>
      <ul className="list-group">
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

13. Handling Special Cases with &&

What do you do when your list is as empty as a desert? Fear not, for React has your back with the power of conditional rendering! With the mighty && operator, you can gracefully handle those special cases and ensure a seamless user experience. So sit back, relax, and let React do the heavy lifting for you!

function ListGroup() {
  let items = ["India", "London", "France", "Mexico", "USA"];

  items = [];
  return (
    <>
      <h1>List group </h1>
      {items.length === 0 && <p>No items found</p>}
      <ul className="list-group">
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

And there you have it, dear reader! A whirlwind tour of React, sprinkled with fun, interactivity, and plenty of coding adventures. So what are you waiting for? Fire up your code editor, unleash your creativity, and let's build some amazing things together!

Let me know in comments how interesting you found this cheat sheet.
Leave a rating below for fun ! ⭐⭐⭐⭐⭐

Chart.js implementation with Lightning Web Components💻👩‍💻

Nayan Kaslikar — Mon, 08 Apr 2024 19:21:41 +0000

In today's data-driven world, effective visualization is key to understanding complex information and making informed decisions. Salesforce Lightning Web Components (LWC) provide a powerful framework for building dynamic user interfaces within the Salesforce ecosystem. When paired with Chart.js, a versatile JavaScript library for creating interactive charts, LWC becomes even more potent, enabling developers to create visually compelling data visualizations seamlessly integrated into their applications.

In this blog post, we'll walk through the process of integrating Chart.js with Lightning Web Components, unlocking a world of possibilities for data visualization within Salesforce.

Step 1: Installing Chart.js 🪛

To kickstart our integration, we need to install/download the Chart.js library into our LWC project. Use the below link to download Chart.js.

cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js

Now add this file in static resource for further use.

Step 2: Importing Chart.js 🎯

Once Chart.js is installed, we import it into our Lightning Web Component.

import { loadScript } from 'lightning/platformResourceLoader';
import ChartJs from '@salesforce/resourceUrl/ChartJs';

Step 3: Loading Chart.js Script 🚀

We then load the Chart.js script within the connectedCallback() lifecycle hook of our LWC component.

@track isChartJsInitialized = false;
    renderedCallback() {
        if (this.isChartJsInitialized) {
            return;
        }
        this.isChartJsInitialized = true;
        Promise.all([
            loadScript(this, ChartJs)
        ])
        .then(() => {
            // Chart.js library loaded
            this.initializePieChart();
        })
        .catch(error => {
            console.log('Error loading Chart.js');
            console.error(error);
        });
    }

Step 4: Creating the Canvas Element 🖼️

In the HTML template of our LWC component, we create a canvas element to render the chart.

<div>
        <canvas id="pieChart" width="400" height="400"></canvas>
 </div>

Step 5: Initializing the Chart 🪄

Within the JavaScript file of our LWC component, we initialize and render the chart using Chart.js.

import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import ChartJs from '@salesforce/resourceUrl/ChartJs'; 
export default class PieChart extends LightningElement {
    @track isChartJsInitialized = false;
    renderedCallback() {
        if (this.isChartJsInitialized) {
            return;
        }
        this.isChartJsInitialized = true;
        Promise.all([
            loadScript(this, ChartJs)
        ])
        .then(() => {
            // Chart.js library loaded
            this.initializePieChart();
        })
        .catch(error => {
            console.log('Error loading Chart.js');
            console.error(error);
        });
    }
    initializePieChart() {
        const ctx = this.template.querySelector('canvas').getContext('2d');
        new window.Chart(ctx, {
            type: 'pie',
            data: {

                labels: ['Website Forms', 'Social Media ', 'Email Marketing Campaigns', 'Referrals', 'Partner Channels', 'Networking'],
            datasets: [{

                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.5)',
                    'rgba(54, 162, 235, 0.5)',
                    'rgba(255, 206, 86, 0.5)',
                    'rgba(75, 192, 192, 0.5)',
                    'rgba(153, 102, 255, 0.5)',
                    'rgba(255, 159, 64, 0.5)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: true,
                text: "Lead Sources"
              }
        },

        });
    }
}

Output

Conclusion 💡

By integrating Chart.js with Lightning Web Components, developers can create stunning data visualizations seamlessly integrated into Salesforce applications. This powerful combination empowers users to gain insights, make informed decisions, and unlock the full potential of their data.

References

Chart.js Documentation - (https://www.chartjs.org/docs/latest/)

Lightning Web Components Developer Guide - (https://developer.salesforce.com/docs/component-library/documentation/en/lwc)

Salesforce #LWC #ChartJS #DataVisualization #ExperienceCloud 📈💼