DEV Community: Sanjay 🥷

WizSearch: 🏆 Winning My First AI Hackathon 🚀

Sanjay 🥷 — Tue, 11 Jun 2024 06:31:17 +0000

WizSearch: The Future of AI is Open 🚀

We are thrilled to announce that WizSearch has been awarded the winner of the hackathon THE FUTURE OF AI IS OPEN This event encouraged participants to push the boundaries of what can be achieved with open-source AI, using tools like Streamlit and Snowflake Arctic. Our creation, WizSearch, stood out for its innovation and practical application.

🌟 Check Out the Demo!

🌟 Inspiration

Inspired by the advanced capabilities of AI assistants like Perplexity, we aimed to create WizSearch, an open-source, customizable, and modular AI assistant. Our goal is to leverage open-source models and tools to develop a robust and intelligent search assistant that can seamlessly integrate internet searches with large language model (LLM) capabilities.

✨ What it Does

WizSearch is a super-smart AI assistant designed to retrieve and synthesize information from the internet. Users can ask questions, and WizSearch utilizes powerful LLMs to generate accurate and relevant answers, complete with summaries and links to sources. This makes finding information as easy and magical as simply asking.

🛠️ How We Built It

We built WizSearch using the following components:

LLM: Snowflakes Arctic LLM for natural language understanding and generation.
Embeddings: Snowflakes Arctic Embedding Model to enhance search relevance.
Intelligent Search: Tavily for advanced search capabilities.
Vector Databases: Qdrant for efficient data storage and retrieval.
Observability: Langfuse for monitoring and observability.
UI: Streamlit for creating an interactive and user-friendly interface.

📈 How It Works

Here's a diagram that explains the workflow of WizSearch:

🚧 Challenges We Ran Into

Unpredictable LLM Output: Ensuring consistency and accuracy in the responses generated by LLMs.
Retrieval Issues: Addressing the challenge of the retrieval process not always selecting the most relevant information, leading to potential hallucinations in responses.
Security: Implementing guardrails to prevent prompt injection and other security vulnerabilities.

🎉 Accomplishments That We're Proud Of

Successfully integrating multiple open-source tools to create a seamless and efficient search assistant.
Developing a modular and customizable workflow that allows for easy adjustments and enhancements.

📚 What We Learned

The importance of modular RAG (retrieval-augmented generation) and LLM routing for maintaining controlled and efficient agentic workflows.
Effective prompting techniques for open-source models to optimize performance.

🚀 What's Next for WizSearch

In the future, we aim to enhance WizSearch by incorporating more controlled agentic capabilities, such as running code and generating images. We also plan to develop a minimalistic, voice-interactive platform that responds in a human-like voice and displays only the most relevant visual information, such as images and graphs. Technically, we will integrate RAGAS for evaluation and Giskard for testing. This will further streamline the user experience and broaden the range of tasks WizSearch can perform.

🌐 Try It Out

GitHub Repo 🐙
wizsearch.streamlit.app 🌐

🤖 Building RAG chatbot with NeMo Guardrails !💡

Sanjay 🥷 — Mon, 25 Mar 2024 13:32:19 +0000

Discover how the power of NeMo Guardrails ensures safer and more controlled conversations chatbot !

🛠️ Tools Overview:

NeMo Guardrails 🛡️
LangChain 🔗
Gradio 🎛️
Chroma DB 🗃️

⚔️ NeMo Guardrails

Checkout more on why NeMo Guardrails ?

Here are some key components a config folder should be containing:

Config: Houses essential details such as models and high-level flow instructions.
Rails: Define dialogue flows using colang, including welcoming messages.
Actions: Specify actions for different dialogue scenarios, such as blocking certain words.

Explore more on configuring Nemo Guardrails here.

🔗 LangChain with NeMo Guardrails

LangChain gives developers a framework to construct LLM‑powered apps easily.

Integrate LangChain with Nemo Guardrails effortlessly:

# Initialization
llm = ChatOpenAI(openai_api_key=openai_api_key, model_name="gpt-3.5-turbo-16k")

# Loading configs
config = RailsConfig.from_path("config")
app = LLMRails(config=config, llm=llm)

# Generate response
response = await app.generate_async(messages="Here's our message")

🛢 Vector Database with NeMo Guardrails

NeMo Guardrails support knowledge base only in markdown format.

Is there any other way ? Yes, using vector database.

Lets use Chroma DB to:

Create a Vector Database: Ingest documents of any format to build a robust knowledge base.
Perform Similarity Search: Connect to Croma DB and retrieve relevant chunks for user messages.

Now you can generate response with message and relevant_chunks

relevant_chunks = vector_search(message)
response = await app.generate_async(messages=[{"role": "context", "content": {"relevant_chunks": relevant_chunks}}, {"role": "user", "content": message}])

🚀 Demo

AWS Guard Chatbot

Note: It has only minimal guards added from NeMo for demo,
So its possible to prompt injection

Without Guardrails

With Guardrails

💻 Explore the Source Code

Curious to explore further? Head over to the GitHub repository for the complete source code!

🚦 Stay Safe, Stay On Track: NeMo Guardrails ! 🔒

Sanjay 🥷 — Mon, 25 Mar 2024 12:05:15 +0000

Let's talk about guardrails in general before diving into the world of NeMo Guardrails.

🛤️ Guardrails

Ensuring Smooth Sailing in LLM Applications

Guardrails act as safety barriers, guiding your applications and preventing them from veering off into dangerous territory. In the context of LLM applications, guardrails ensure trustworthiness, safety, and security, keeping your conversations on track and free from unwanted surprises.

🛡️ Introducing NeMo Guardrails

NeMo Guardrails is an open-source toolkit developed by NVIDIA, designed to make adding programmable guardrails to LLM-based conversational applications a breeze.

With NeMo Guardrails, developers can easily define rules and restrictions for their LLMs, ensuring they stay on topic, avoid sensitive subjects, and follow predefined conversation paths.

But that's not all! NeMo Guardrails also provides mechanisms to protect against common LLM vulnerabilities, such as jailbreaks and prompt injections, making your applications safer and more robust. 💪

⚔️ The Five Guardians in Action

Guardian	Description	Example
Input Rails	Inspect incoming messages, rejecting or altering them to ensure safety.	If a user sends sensitive information like a credit card number, Input Rails quickly mask it.
Dialog Rails	Orchestrate interactions, guiding conversations along predefined paths.	When a user asks about a topic, Dialog Rails direct the conversation to the appropriate response.
Retrieval Rails	Protect retrieved data, ensuring reliability and relevance.	In Retrieval Augmented Generation, mask the sensitive data in retrieved data to create the output.
Execution Rails	Oversee actions, maintaining compliance with standards.	When a custom action accesses external data, Execution Rails ensure input/output follows security protocols.
Output Rails	Safeguard final output, ensuring accuracy and appropriateness.	Output Rails review generated responses for sensitive content. If found, they modify or remove it before delivery.

💬 How Dialog Rails Drive NeMo Guardrails

Dialog Rails stand as pivotal architects, shaping the flow of conversations with finesse and precision. These rails, defined through the ingenious Colang language, hold the power to orchestrate interactions between users and LLMs, steering them along predefined paths of engagement.

🌀 Colang: The Language of Control

At the heart of NeMo Guardrails lies Colang, a specialized modeling language crafted for flexible dialogue flows. With its Python-like syntax, Colang empowers developers to design intricate conversation paths with ease and intuition.

Consider the simple yet impactful colang file which defines the dialog rails for greeting the user.

define user express greeting
  "Hello!"
  "Good afternoon!"

define flow
  user express greeting
  bot express greeting
  bot offer to help

define bot express greeting
  "Hello there!"

define bot offer to help
  "How can I help you today?"

Below is an additional example of Colang definitions for a dialog rail against insults:

define user express insult
  "You are stupid"

define flow
  user express insult
  bot express calmly willingness to help

🛠️ How It Works

NeMo Guardrails employs vector embeddings of all flow instructions to navigate dialogue paths efficiently. By searching with the input question, it can swiftly find the appropriate pathway without relying on the LLM. This enables it to seamlessly deliver default messages, execute specific actions like blocking messages, fetch information from PDFs using RAG, or call external APIs. Such precision ensures the bot stays aligned with the dialogue flow, enhancing its effectiveness and user experience.

🔗 Integrations

LangChain :
NeMo Guardrails seamlessly integrates with LangChain, enabling easy configuration wrapping around LangChain chains or any Runnable

AlignScore-based Fact-Checking:
NeMo Guardrails provides out-of-the-box support for the AlignScore, which uses a RoBERTa-based model for scoring factual consistency in model responses with respect to the knowledge base.

Llama Guard-based Content Moderation:
NeMo Guardrails provides out-of-the-box support for content moderation using Meta's Llama Guard model.

🌟 Conclusion

In the realm of LLM-based conversational applications, NeMo Guardrails distinguishes itself by offering a versatile toolkit that integrates various guardrail approaches seamlessly. It enables precise dialogue modeling, enhancing user engagement.

However, it's important to exercise caution as the beta release is still under development. NeMo Guardrails shows promise, but users should be mindful of potential instability and unexpected behavior.

Boosting Your Developer Workflow with AI Tools 👩‍💻🚀

Sanjay 🥷 — Thu, 12 Oct 2023 16:19:57 +0000

Introduction 🌟

As developers, our daily routines often involve working with complex codebases, researching solutions, and optimizing our workflows. Fortunately, there is a growing array of AI-powered tools that can help us streamline our tasks and boost productivity. In this article, we'll explore some essential AI tools that can enhance your development process.

Arc Browser - A User-Centric Web Browsing Experience 🌐

Arc is a web browser designed with developers and multitaskers in mind. While it's exclusively available for Mac and iPhone users at the moment, Windows support is on the horizon for winter 2023.

What sets Arc apart are its recent AI features, collectively known as MAX:

Ask on Page: Simply press Command + F on any webpage, ask a question, and watch Max retrieve answers in seconds.
5 Second Previews: Hover over a link and press Shift to generate a webpage preview without clicking, saving you valuable time.
Command Bar Integration: Typing "ChatGPT" in the Command Bar, followed by a press of the Tab key, enables quick access to answers, reducing clicks and search time.

A friend is sharing Arc with you!

Experience a calmer, more personal internet in this browser designed for you. Let go of the clicks, the clutter, the distractions.

arc.net

Coding Assistant - GitHub Copilot & Codeium 💻

GitHub Copilot:

This AI pair programmer from GitHub, OpenAI, and Microsoft revolutionizes the way we write code. By analyzing code and comments, it suggests lines or even entire functions, significantly speeding up the coding process. GitHub Copilot is available at $10 per month or $100 per year for individuals.

Codeium:

Codeium is a free AI-powered toolkit designed for developers. Unlike other AI tools that rely on external APIs, Codeium's in-house models and infrastructure offer autocomplete, search functionality, and more across various IDEs. Plus, it's free to use, making it an excellent choice for developers on a budget.

Terminal - Warp: Your AI-Enhanced Command Line Companion ⌨️

Warp is a modern terminal built with Rust, featuring built-in AI capabilities to supercharge your development workflow. Some highlights of Warp include:

IDE-Style Editor: Write code in an IDE-style editor within your terminal, improving code readability and productivity.
Warp AI: Powered by OpenAI APIs, Warp AI can interpret natural language queries and convert them into executable shell commands. Use it for debugging, writing scripts, or getting guidance on your next steps.

Get Warp Now

app.warp.dev

Conclusion 🎉

In today's fast-paced development landscape, AI tools are pivotal in boosting your workflow and productivity. There are more exciting tools and platforms to explore:

OverflowAI: Stack Overflow's new venture into community-driven AI knowledge sharing, promising a future full of collaborative learning.

Don't forget about the power of conversational AI with tools like ChatGPT, Bard, and Bing Chat, which can help you learn, generate creative content, debug code, and more.

The world of AI tools for developers is ever-evolving. Share your favorites in the comment section below and let's keep pushing the boundaries of what AI can do for us in the realm of software development. 🚀👩‍💻

From Pixels to Art: Mastering Edges in CV 🌟

Sanjay 🥷 — Wed, 11 Oct 2023 13:10:25 +0000

The Magic of Edges in Computer Vision 🌟

Computer vision is the bridge between machines and the visual world. In this blog, we'll unravel the magic of Edges in computer vision using OpenCV.

Imagine teaching a computer to identify object edges or enhance image details – these are just a glimpse of what's possible. We'll guide you from basics to practical applications, equipping you to harness the power of computer vision. ✨

What are Edges? 🤔

Edges in images are like the outlines of objects in a coloring book 🖍️. They represent sudden changes in pixel intensity and help us distinguish one object from another. Imagine a photo of a cat against a white background: the edges of the cat's body define its shape and separate it from the background.

Types of Edges 📏

Edges come in various flavors, just like the diverse shapes they outline. Here are a few common types:

Step Edges	Ramp Edges	Roof Edges
These are sharp, sudden transitions, similar to a black object on a white background. The edge is crisp, like a distinct line. ⚡	Ramp edges depict a gradual and consistent change in intensity. They are like a gentle slope, where the transition is steady and continuous, resembling a ramp or incline. 🌄	Roof-like edges have a gradual slope, like the slope of a roof. They represent smoother transitions in intensity, such as the edge of a shadow. 🏠

Why Edges Matter 🌟

Edges are fundamental in computer vision for several reasons:

Object Detection	Image Segmentation	Feature Extraction
Edges help identify objects in images. For example, in self-driving cars, detecting edges can help recognize pedestrians or other vehicles on the road. 🚗	They assist in breaking down an image into smaller, manageable regions. In medical imaging, edges help separate organs or anomalies from the surrounding tissue. 🏥	Edges are rich sources of information. In facial recognition systems, detecting the edges of facial features aids in identifying individuals. 👤

🕵️‍♂️ Edge Detection: Sobel Operator 🌟

The Sobel operator is one of the simplest and widely used edge detection techniques. It relies on convolution with a pair of 3x3 kernels, one for detecting vertical edges and the other for horizontal edges. By calculating the gradient in both directions, it highlights the areas of the image where intensity changes are most significant.

Real-life Example: Imagine you're processing a medical X-ray image. The Sobel operator can help identify the edges of bones and organs, making it easier for doctors to diagnose and locate issues within the body.

Demo

Checkout the python code on how the algorithm works

colab.research.google.com

How does it work? 📐

The Sobel Operator uses two small grids (3x3 matrices) called kernels.

The horizontal kernel emphasizes changes in brightness from left to right.
The vertical kernel emphasizes changes in brightness from top to bottom.

It slides these kernels over each pixel in the image and calculates a new value for each pixel based on how much the colors change in these two directions.

Let's take an example

Here are what the intensity values might look like after the grayscale conversion.

Matrix and kernel are given (e.g., 3x3 kernel).
Position the kernel over the matrix, aligning the kernel's anchor with the target cell.
Multiply kernel (Both vertical & horizontal) values with overlapping matrix cells.
Sum the products and have the value as Gx and Gy
Get the magnitude(G) = square_root(Gx^2 + Gy^2) and direction of the gradient Ɵ = atan(Gy / Gx)

Slide the kernel, repeat steps 3 and 4 for the entire matrix.

Conclusion 🚀

In a world of pixels, edges are like the secret agents of computer vision. They define the cool contours of objects, helping machines see and recognize stuff. So, whether it's spotting cats in photos or cruising in self-driving cars, edges are the VIPs of the visual world. Stay sharp! 😎👁️ #EdgeOfPossibility

🚀 React to the Clouds ☁️: A Guide to Effortless GCP Deployment

Sanjay 🥷 — Sun, 01 Oct 2023 08:45:31 +0000

So, you've built an amazing React app, and now it's time to deploy it to the Google Cloud Platform (GCP) using Docker and Cloud Build. This tutorial will guide you through the process step by step, and by the end of it, your React app will be up and running in the cloud.

📋 Prerequisites

Before we dive into the code, make sure you have the following prerequisites in place:

Google Cloud Platform Account: You'll need a GCP account. If you don't have one, you can sign up here.
GitHub Repository: Your working React js/ts project should be hosted on GitHub.

📂 Code Files

For this deployment, we'll use three essential files: Dockerfile, nginx.conf, and cloudbuild.yaml. Add these files in project root, these files are crucial for building, containerizing, and deploying your React app.

Dockerfile

The Dockerfile is used to build and package your React app into a Docker image. Here's a simplified version:

# Step 1: Build the application
FROM node:16 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install

COPY . .
# Customize the environment variables as needed for your project
ARG GENERIC_ENV_VARIABLE
ENV GENERIC_ENV_VARIABLE $GENERIC_ENV_VARIABLE
RUN npm run build

# Step 2: Set up the production environment
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

This Dockerfile consists of two stages. The first stage builds your React app, and you can customize the GENERIC_ENV_VARIABLE environment variable as needed for your project.

nginx.conf

Here's a basic nginx.conf file for configuring Nginx as a web server:

server {
    listen 8080;
    server_name localhost;
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

This configuration tells Nginx to serve your React app on port 8080.

cloudbuild.yaml

The cloudbuild.yaml file defines the build steps for Cloud Build, which will build the Docker image and deploy it to Cloud Run:

steps:
  # Build the Docker image
  - name: 'gcr.io/cloud-builders/docker'
    args:
      [
        'build',
        '.',
        '-t',
        'gcr.io/$PROJECT_ID/react-project:$SHORT_SHA', # Change "react-project" to your project name
        '-f',
        'Dockerfile',
        '--build-arg',
        'GENERIC_ENV_VARIABLE=${_GENERIC_ENV_VARIABLE}', # Customize this variable for your project
      ]

  # Push the Docker image to Container Registry
  - name: 'gcr.io/cloud-builders/docker'
    args: ['push', 'gcr.io/$PROJECT_ID/react-project:$SHORT_SHA'] # Change "react-project" to your project name

  # Deploy the Docker image to Cloud Run
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - 'react-project' # Change "react-project" to your project name
      - '--region=${_REGION}' # Customize the region as needed
      - '--platform=managed'
      - '--allow-unauthenticated'
      - '--image=gcr.io/${PROJECT_ID}/react-project:$SHORT_SHA' # Change "react-project" to your project name
      - '--port=8080'

options:
  logging: CLOUD_LOGGING_ONLY

This cloudbuild.yaml file defines three steps: building the Docker image, pushing it to Container Registry, and deploying it to Cloud Run. Customize the GENERIC_ENV_VARIABLE and the region as needed for your project.

🌐 Connecting Your Repository

To use Cloud Build, you'll need to connect your repository in GCP. Follow the GCP documentation to connect your Github Repository to your project.

🛠️ Creating a Cloud Build Trigger

A Cloud Build trigger automates the process of building and deploying your React app whenever changes are pushed to your connected repository. Follow these steps to create a Cloud Build trigger:

1. Click on "Triggers" in the Cloud Build section.

2. Click the "Create Trigger" button.

3. Configure your trigger as follows:

- Name: Give your trigger a descriptive name, such as "React App Build Trigger."

- Event: Select the event that triggers the build. Typically, you'd choose "Push to a branch."

- Source: Choose the repository connected before.

- Branch (optional): Specify the branch to trigger the build. For example, "main" or "master."

- Build Configuration: Select "cloudbuild.yaml" as the build configuration file.

4. Add Substitution variables mentioned in the cloudbuild.yaml

5. Scroll down and click on the "Save" button to create the trigger.

🚀 Triggering the Build

Now that you've created a Cloud Build trigger, any push to the specified branch in your repository will automatically trigger the build process. Here's how it works:

Make changes to your React app code.
Commit and push those changes to the branch specified in your trigger.
Cloud Build will detect the push event and start the build process using the cloudbuild.yaml configuration.
The build process will build your Docker image, push it to Container Registry, and deploy it to Cloud Run.
You can monitor the build progress in the Google Cloud Console under "Cloud Build."

✅ Testing the Deployment

Once the build and deployment process is complete, you can access your deployed React app. Here's how:

In the Google Cloud Console, go to "Cloud Run."
Find and select your deployed service (e.g., "react-project").
Access the URL provided in the "Service details" section.
Your React app should now be live and accessible via the URL

🎉 Conclusion

Congratulations! You've successfully set up Cloud Build to automate the deployment of your React app in GCP. With this workflow in place, your app will automatically update whenever you make changes to the connected repository.

🚀 Build UI faster with Mantine and React ⚡️

Sanjay 🥷 — Tue, 11 Jul 2023 16:04:26 +0000

Why Choose Mantine ?

Mantine is a Free and open source React components library focused on providing great user and developer experience. With its exceptional features and unmatched flexibility, Mantine empowers you to create stunning web apps with ease. Here's why you should give it a try:

✨ Easy Customization
🔥 Seamless Theming
♿ Accessibility by Design
💪 TypeScript based
🌐 Responsive and Adaptable

Here is a demo application i build 🚀

Demo: Building a Web App with Mantine and React

Mantine UI

Build even faster with Mantine UI. It offers a comprehensive collection of 134 responsive components. Designed to streamline and enhance your web development process

Mantine Hooks

Mantine offers a range of 50 powerful hooks that simplify common tasks and enhance your web development process. Here are my top five Mantine hooks:

use-idle: Detect user inactivity and trigger actions or notifications accordingly.
use-media-query: Respond to viewport changes and device orientation for seamless responsiveness.
use-clipboard: Copy text to the clipboard effortlessly with minimal code.
use-fullscreen: Allows to enter/exit fullscreen for given element
use-hotkeys: Easily handle keyboard shortcuts and hotkeys for intuitive user interactions.

Effortless Form Handling and Date Management

Mantine simplifies form handling with the use-form hook, providing built-in validation, error handling, and state management. Additionally, the Mantine date component offers seamless date management, including date pickers and formatting utilities. With MantineUI, creating and managing forms and dates in your web apps becomes a breeze.

Other Key Components

Rich text editor: Tiptap based rich text editor
Prism code highlight: Code highlight with Mantine theme colors and styles
Spotlight: Command center for your application
Dropzone: Capture files from user with drag and drop

Conclusion:

Considerations and Potential Drawbacks

Limited community support
Not comprehensive for all UI elements
Learning curve for customization
Dependency management complexities
Potential visual customization constraints

Evaluate these considerations against your project's requirements before choosing Mantine. Despite these drawbacks, Mantine remains a powerful tool for creating web applications with React.

Query Database using Langchain 🦜🔗‍💥

Sanjay 🥷 — Sat, 27 May 2023 15:07:41 +0000

Introduction

💡 Transforming Database Queries into Intuitive Conversations 💬

Welcome to the fascinating world of LangChain, a groundbreaking framework for developing language model-powered applications. In this blog post, we'll embark on an exciting journey into the realm of querying databases using LangChain. Brace yourself for an exploration of how this framework combines the immense capabilities of language models with data-awareness and agentic interaction, enabling us to create truly intelligent and user-friendly applications.

What is Langchain ?

Langchain is a software development framework designed to simplify the creation of applications using large language models (LLMs).

Getting Started 🚀

When it comes to developing a user-friendly and interactive application, Streamlit emerges as a powerful tool in our arsenal. In this section, we'll explore how to integrate the LangChain framework with Streamlit, enabling us to create a seamless and immersive experience for querying databases using natural language.

Here's a quick guide to get you started 🛠️:

Requirements

Make sure you have the following requirements in place:

OpenAI API Key 🔑: Obtain an API key from OpenAI to access their language models. You can sign up for an account and generate an API key from the OpenAI website. Make sure to keep your API key secure and avoid sharing it publicly.
Python Installation 🐍: Ensure that you have Python installed on your system.

1. Install Langchain and Streamlit 💻🚀:

Begin by installing Streamlit and Langchain using pip or pip3, the package installer for Python. Open your terminal or command prompt and run the following command:

pip install streamlit
pip install langchain
pip install openai

2. Create a Project Directory 📂🗂️:

Create a new directory for your project, and navigate to it in your terminal or command prompt:

mkdir langchain_app
cd langchain_app

3. Create a Python Script 🐍📝:

Inside your project directory, create a new Python script, for example, app.py. This will serve as the main entry point for your Streamlit application.

4. Add .env and database files 🔑🗄️:

Your .env file should look like this:

OPENAI_API_KEY=YOUR API KEY

You can add your own database file or link the database URL. Get the sample database chinook.db
Add these two files in the project root.
Note: Don't commit the .env file. ⚠️🔒

5. Import Streamlit and Create the App ⚙️📲:

Open app.py in your preferred text editor or integrated development environment (IDE), and start by importing Streamlit and langchain:

import streamlit as st
from langchain.chat_models import ChatOpenAI
from langchain import SQLDatabase, SQLDatabaseChain

6. Build the Application 🏗️📱:

Now you can start building our application. Define the structure and layout of your app using Streamlit's intuitive API.

import streamlit as st
from dotenv import load_dotenv
from langchain.chat_models import ChatOpenAI
from langchain import SQLDatabase, SQLDatabaseChain

# Storing the response
if 'generated' not in st.session_state:
    st.session_state['generated'] = []

def generate_response(message):
    # Connect to the database
    dburi = "sqlite:///chinook.db"
    db = SQLDatabase.from_uri(dburi)

    # Create an instance of LLM
    llm = ChatOpenAI()

    # Create an SQLDatabaseChain using the ChatOpenAI model and the database
    db_chain = SQLDatabaseChain.from_llm(llm=llm, db=db)
    ai_response = db_chain.run(message)

    return ai_response

def get_text():
    # Get user input from text input field
    input_text = st.text_input("You: ", "", key="input")
    return input_text  

def main():
    # Load environment variables
    load_dotenv()

    # Display header
    st.header('Query Database Like you Chat')

    # Get user input
    user_input = get_text()

    if user_input:
        # Generate response for the user input
        st.session_state["generated"] = generate_response(user_input)

    if st.session_state['generated']:
        # Display the generated response
        st.write(st.session_state['generated'])

if __name__ == '__main__':
    main()

7. Run the Application ▶️🔥:

To launch your Streamlit app, go back to your terminal or command prompt, navigate to your project directory, and execute the following command:

streamlit run app.py

8. Here is the output 🎯🖼️:

Congratulations! 🎉 You have successfully integrated LangChain with Streamlit, allowing you to build powerful applications that leverage the capabilities of language models to interact with databases in a conversational manner. Start exploring the possibilities and create your own intelligent and user-friendly applications today! 🚀💻💬

Building react component with styled-components

Sanjay 🥷 — Sat, 22 Apr 2023 07:42:53 +0000

Introduction

React has been an influential JavaScript library for developing interactive user interfaces(UIs) since its introduction. There are different ways to style React components, and one popular approach is using StyledComponents Official Site. This library allows developers to write actual CSS code to style your components.

Demo

In this blog post, we will:

Introduce StyledComponents and understand its advantages.
Provide a step-by-step guide to build a button using StyledComponent and React.

So, let's dive in!

What are StyledComponents?

StyledComponents is a CSS-in-JS library that enables developers to write encapsulated and reusable CSS code for their React components. It brings the best parts of CSS and JavaScript together, allowing you to style components with actual CSS while keeping the benefits of using React components.

Some advantages of using StyledComponents include:

💅 Styled Components allow you to use real CSS syntax directly in your JavaScript code.
🚀 Automatic generation of unique class names for each styled component, which helps avoid CSS class naming collisions.
🧠 Enables theming and dynamic styling based on component props and state.
📝 Easy to maintain, as the styling and component logic are all in the same place.
🏭 Scalable and modular, making it perfect for large applications with many components.

Building a Button using StyledComponent and React

Now that we have an overview of StyledComponents, let's create a simple button using this library and React.

Prerequisites

To follow along with this tutorial, you should have:

A basic understanding of React and how to create components.
Node.js and npm installed on your local development environment.

Let's get started!

Step 1: Set up a new React project

First, let's create a new React project using create-react-app:

npx create-react-app react-styled-button

After your project has finished setting up, navigate into the project folder:

cd react-styled-button
npm install

Step 2: Install Styled Components

Next, install the styled-components package:

npm install styled-components

Step 3: Create a new Button component

Now, let's create a new folder called components inside the src folder. Inside the components folder, create a new file called StyledButton.jsx. This will be our custom button component.

Open StyledButton.jsx and add the following code to import React and Styled Components:

import React from "react";
import styled from "styled-components";

// Define the styles for the button
const Button = styled.button`
  /* Basic styles */
  font-size: ${(props) =>
    props.size === "small" ? "12px" : props.size === "large" ? "24px" : "16px"};
  padding: ${(props) =>
    props.size === "small"
      ? "6px 12px"
      : props.size === "large"
      ? "16px 32px"
      : "10px 20px"};
  background-color: ${(props) =>
    props.disabled ? "gray" : props.color ? props.color : "SteelBlue"};
  color: white;
  border: none;
  border-radius: 4px;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  &:hover {
    opacity: 0.8;
  }
`;

function StyledButton(props) {
  const handleClick = () => {
    if (!props.disabled && props.onClick) {
      props.onClick();
    }
  };

  return (
    <Button
      onClick={handleClick}
      size={props.size}
      color={props.color}
      disabled={props.disabled}
    >
      {props.children}
    </Button>
  );
}

export default StyledButton;

Step 4: Use the Button Component

Finally, let's use our new button component in our React application. In a new file named App.js, add the following code:

import React from 'react';
import StyledButton from "./components/StyledButton";

function App() {
  return (
    <div>
      <StyledButton size="large" color="teal">
          Click me!
      </StyledButton>
    </div>
  );
}

export default App;

This code imports our Styled Button component and renders it with a label of "Click me!".

Step 5: Test it out!

That's it! Save your changes and start your React app by running npm start or yarn start. You should now see a teal button with white text and rounded corners that says "Click me!".

Conclusion

In this tutorial, we've shown you how to create a React button component using Styled Components. With this knowledge, you can now use Styled Components to style any React component you create. It simplifies the process of writing CSS for your React components and makes it easier to maintain and reuse your code.

Code available at :
Codesandbox

Visualizing Audio as a Waveform in React

Sanjay 🥷 — Sun, 16 Apr 2023 02:11:50 +0000

Audio visualization is a great way to add a new dimension to music, podcasts, or any other audio content. A common way to visualize audio is to display its waveform, which shows the amplitude of the sound wave at each point in time. In this tutorial, we'll learn how to generate a waveform for an audio file in React without using any libraries.

Demo

Prerequisites

Before we get started, make sure you have the following installed on your machine:

Node.js and npm (or yarn)

Setting up the Project

Let's start by creating a new React project. Open your terminal and run the following commands:

npx create-react-app audio-visualizer
cd audio-visualizer
npm install

Analyzing Audio Data

To create a waveform, we need to analyze the audio data. We can do this using the Web Audio API, which provides an AnalyserNode object that can be used to analyze the frequency and time-domain data of an audio source.

In our App.js file, we create an audioAnalyzer function that creates an AnalyserNode object and connects it to our audio source. We also create a dataArray to store the frequency data that we will use to draw the waveform.

// App.js

import { useRef, useState } from "react";
import "./styles.css";
import WaveForm from "./WaveForm";

export default function App() {
  const [audioUrl, setAudioUrl] = useState();
  const [analyzerData, setAnalyzerData] = useState(null);
  const audioElmRef = useRef(null);

  // audioAnalyzer function analyzes the audio and sets the analyzerData state
  const audioAnalyzer = () => {
    // create a new AudioContext
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    // create an analyzer node with a buffer size of 2048
    const analyzer = audioCtx.createAnalyser();
    analyzer.fftSize = 2048;

    const bufferLength = analyzer.frequencyBinCount;
    const dataArray = new Uint8Array(bufferLength);
    const source = audioCtx.createMediaElementSource(audioElmRef.current);
    source.connect(analyzer);
    source.connect(audioCtx.destination);
    source.onended = () => {
      source.disconnect();
    };

    // set the analyzerData state with the analyzer, bufferLength, and dataArray
    setAnalyzerData({ analyzer, bufferLength, dataArray });
  };

  // onFileChange function handles the file input and triggers the audio analysis
  const onFileChange = (e) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setAudioUrl(URL.createObjectURL(file));
    audioAnalyzer();
  };

  return (
    <div className="App">
      <h1>Audio Visualizer</h1>
      {analyzerData && <WaveForm analyzerData={analyzerData} />}
      <div
        style={{
          height: 80,
          display: "flex",
          justifyContent: "space-around",
          alignItems: "center"
        }}
      >
        <input type="file" accept="audio/*" onChange={onFileChange} />
        <audio src={audioUrl ?? ""} controls ref={audioElmRef} />
      </div>
    </div>
  );
}

Drawing the Waveform

Next, we will create a WaveForm component that takes the analyzerData as a prop and renders a canvas element. We use the useSize hook to set the size of the canvas based on the window dimensions.

// useSize.js

import { useCallback, useEffect, useState } from 'react';

// custom hook to get the width and height of the browser window
const useSize = () => {
  // initialize width and height to 0
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);

  // setSizes callback function to update width and height with current window dimensions
  const setSizes = useCallback(() => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }, [setWidth, setHeight]);

  // add event listener for window resize and call setSizes
  useEffect(() => {
    window.addEventListener('resize', setSizes);
    setSizes();
    return () => window.removeEventListener('resize', setSizes);
  }, [setSizes]);

  // return width and height
  return [width, height];
};

export default useSize;

In the WaveForm component, we create an animateBars function that uses the AnalyserNode to get the frequency data and draws the bars of the waveform. We then create a draw function that sets up the canvas context and calls animateBars on each animation frame.


// This function takes in the audio data, analyzes it, and generates a waveform
// that is visualized on a canvas element.
function animateBars(analyser, canvas, canvasCtx, dataArray, bufferLength) {
  // Analyze the audio data using the Web Audio API's `getByteFrequencyData` method.
  analyser.getByteFrequencyData(dataArray);

  // Set the canvas fill style to black.
  canvasCtx.fillStyle = '#000';

  // Calculate the height of the canvas.
  const HEIGHT = canvas.height / 2;

  // Calculate the width of each bar in the waveform based on the canvas width and the buffer length.
  var barWidth = Math.ceil(canvas.width / bufferLength) * 2.5;

  // Initialize variables for the bar height and x-position.
  let barHeight;
  let x = 0;

  // Loop through each element in the `dataArray`.
  for (var i = 0; i < bufferLength; i++) {
    // Calculate the height of the current bar based on the audio data and the canvas height.
    barHeight = (dataArray[i] / 255) * HEIGHT;

    // Generate random RGB values for each bar.
    const maximum = 10;
    const minimum = -10;
    var r = 242 + Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
    var g = 104 + Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
    var b = 65 + Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

    // Set the canvas fill style to the random RGB values.
    canvasCtx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';

    // Draw the bar on the canvas at the current x-position and with the calculated height and width.
    canvasCtx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);

    // Update the x-position for the next bar.
    x += barWidth + 1;
  }
}

The animateBars function is responsible for generating a waveform based on the audio data passed in. It uses the Web Audio API's getByteFrequencyData method to analyze the audio data and then loops through each element in the dataArray to generate a bar for each frequency. The height of each bar is calculated based on the audio data and the canvas height, and the width of each bar is calculated based on the canvas width and the buffer length. The function also generates random RGB values for each bar and sets the canvas fill style accordingly before drawing each bar on the canvas.


// WaveForm.jsx

import { useRef, useEffect } from "react";

// Function to animate the bars
function animateBars(analyser, canvas, canvasCtx, dataArray, bufferLength) {
  // ...
}

// Component to render the waveform
const WaveForm = ({ analyzerData }) => {
  // Ref for the canvas element
  const canvasRef = useRef(null);
  const { dataArray, analyzer, bufferLength } = analyzerData;

  // Function to draw the waveform
  const draw = (dataArray, analyzer, bufferLength) => {
    const canvas = canvasRef.current;
    if (!canvas || !analyzer) return;
    const canvasCtx = canvas.getContext("2d");

    const animate = () => {
      requestAnimationFrame(animate);
      canvas.width = canvas.width;
      animateBars(analyzer, canvas, canvasCtx, dataArray, bufferLength);
    };

    animate();
  };

  // Effect to draw the waveform on mount and update
  useEffect(() => {
    draw(dataArray, analyzer, bufferLength);
  }, [dataArray, analyzer, bufferLength]);

  // Return the canvas element
  return (
    <canvas
      style={{
        position: "absolute",
        top: "0",
        left: "0",
        zIndex: "-10"
      }}
      ref={canvasRef}
      width={window.innerWidth}
      height={window.innerHeight}
    />
  );
};

export default WaveForm;

Conclusion

We have explored the process of visualizing an audio waveform in a React application without the use of any external library. We began by analyzing the audio using the Web Audio API and extracting the frequency data using an AnalyserNode. We then used the Canvas API to draw the waveform on a canvas element. Finally, we implemented a function to animate the bars of the waveform by generating random colors and heights for each bar. This project is a great example of the power and versatility of React and the Web Audio API.

To see the full code for this project, please visit Codesandbox here. Thank you for reading!

Getting Started with ElevenLabs Text-to-Speech API

Sanjay 🥷 — Sun, 09 Apr 2023 15:49:05 +0000

ElevenLabs: Advanced AI Speech Tool

ElevenLabs is an advanced AI speech tool that allows you to generate high-quality spoken audio in any voice and style. Their text-to-speech API is a service that developers can use to convert written text into speech in a variety of voices, including both pre-existing and custom voices.

With ElevenLabs, you can train your own voice model using your own recorded speech to create a custom voice for your application. The API is capable of rendering human-like intonation and inflections with unprecedented fidelity, resulting in speech that sounds natural and lifelike.

Getting Started with ElevenLabs API

To get started with the ElevenLabs API, you'll need to sign up for an API key on their website https://beta.elevenlabs.io/. Once you've created an account click on your profile icon and go to profile settings there you can obtained an API key, you can start using their text-to-speech service.

Making a Basic Request

To make a basic request to the API, you'll need to send a POST request to their endpoint with your API key and the text you want to convert to speech. Here's an example of how to do this in javascript using the axios:



import axios from 'axios';

// Define a function called textToSpeech that takes in a string called inputText as its argument.
const textToSpeech = async (inputText) => {
  // Set the API key for ElevenLabs API. 
  // Do not use directly. Use environment variables.
  const API_KEY = ELEVEN_LABS_API_KEY;
  // Set the ID of the voice to be used.
  const VOICE_ID = '21m00Tcm4TlvDq8ikWAM';

  // Set options for the API request.
  const options = {
    method: 'POST',
    url: `https://api.elevenlabs.io/v1/text-to-speech/${VOICE_ID}`,
    headers: {
      accept: 'audio/mpeg', // Set the expected response type to audio/mpeg.
      'content-type': 'application/json', // Set the content type to application/json.
      'xi-api-key': `${API_KEY}`, // Set the API key in the headers.
    },
    data: {
      text: inputText, // Pass in the inputText as the text to be converted to speech.
    },
    responseType: 'arraybuffer', // Set the responseType to arraybuffer to receive binary data as response.
  };

  // Send the API request using Axios and wait for the response.
  const speechDetails = await axios.request(options);

  // Return the binary audio data received from the API response.
  return speechDetails.data;
};

// Export the textToSpeech function as the default export of this module.
export default textToSpeech;

Convert to audio file

Once you have received the audio data in the form of an ArrayBuffer from the ElevenLabs API, you can convert it into an MP3 blob file that can be played or saved. Here's how to do it in React js:



import { useState, useEffect } from 'react';

const AudioPlayer = () => {
  // Define a state variable to hold the audio URL
  const [audioURL, setAudioURL] = useState(null);

  // Define a function to fetch the audio data and set the URL state variable
  const handleAudioFetch = async () => {
    // Call the textToSpeech function to generate the audio data for the text "Hello welcome"
    const data = await textToSpeech("Hello welcome")
    // Create a new Blob object from the audio data with MIME type 'audio/mpeg'
    const blob = new Blob([data], { type: 'audio/mpeg' });
    // Create a URL for the blob object
    const url = URL.createObjectURL(blob);
    // Set the audio URL state variable to the newly created URL
    setAudioURL(url);
  };

  // Use the useEffect hook to call the handleAudioFetch function once when the component mounts
  useEffect(() => {
    handleAudioFetch()
  }, []);

  // Render an audio element with the URL if it is not null
  return (
    <div>
      {audioURL && (
        <audio autoPlay controls>
          <source src={audioURL} type="audio/mpeg" />
        </audio>
      )}
    </div>
  );
};

export default AudioPlayer;

For more detailed documentation on how to use ElevenLabs' API, you can visit their API documentation page at https://api.elevenlabs.io/docs#/ where you can try it out the API.