Forem: Farhad

Achieving Consistent Outputs in OpenAI API: Leveraging Zod and LangChain for Improved Results

Farhad — Mon, 05 Feb 2024 15:17:43 +0000

If you have struggled to get consistent output from the OpenAI API when dealing with structured data, this post is for you. As AI and machine learning continue to evolve, it can be both exciting and challenging to extract valuable insights from data using OpenAI's API. One of the biggest challenges developers face is ensuring consistency in the results obtained from the API. In this post, we will explore how to achieve consistent results by integrating OpenAI's API with structured output parsing. We will use a practical example that involves extracting meaningful words or groups of words along with their associated emojis.

Challenges of Direct Usage of OpenAI API

Inconsistent Formatting: OpenAI's API generates responses based on the input prompt, which can lead to varied formatting in the output. For instance, if you ask for a summary of a journal entry without specifying a structure, one response might list insights in complete sentences. At the same time, another might return a bullet-point list. This inconsistency complicates the process of extracting specific pieces of information from the responses.
Variable Detail Level: The level of detail in the responses can also vary significantly. For example, a prompt requesting an analysis of a journal entry's mood might return a simple "happy" in one instance and a more nuanced "generally content with moments of excitement" in another. Such variability makes it difficult to categorize and act upon the AI's insights systematically.
Lack of Standardization: Without a predefined schema, parsing the AI's output to fit into a database or other structured data storage system becomes challenging. For instance, if you're collecting weather information, you'd want each data point to have a consistent format like {"temperature": 72°F, "humidity": 50%}. If you make API calls without structured prompts, the responses might not align with this desired format, making it challenging to work with the data. Even if you defined the structure in the prompt it may give inconsistent results.

The Structured Approach with Zod and Langchain

Introducing Zod and Lanchain into the workflow allows us to define explicit schemas that describe the exact structure of the data they're working with. For instance, if the desired output is a list of product objects, each containing a name and a price, a Zod schema can enforce this structure.

We will provide a complete coding example, covering the entire process, to make it more accessible for you to implement on your own.

Define the Schema: We start by defining a Zod schema for our expected output, which includes an array of objects, each object representing a product with a name and price.

import { z } from 'zod';
import {
  StructuredOutputParser,
  OutputFixingParser,
} from 'langchain/output_parsers'

const moodSchema = {
    mood: z
      .string()
      .describe('the mood of the person who wrote the journal entry.'),
    subject: z.string().describe('the subject of the journal entry.')
  }

By modifying the Zod form, you can ensure that it perfectly aligns with your database structure.

Next, We are going to use StructuredOutputParser to enforce and validate a specific data structure defined in moodSchema. This ensures that the API response sticks to the expected format, maintains data consistency, and enables easier data processing and analysis.

const parser = StructuredOutputParser.fromZodSchema(moodSchema)

Crafting the Prompt: Next, we craft a prompt that guides Open AI to generate structured responses and it is crucial. By specifying the desired output format in the prompt, we can influence how OpenAI's model structures its response, making it easier to parse and use the data.

const getPrompt = async (content) => {
const format_instructions = parser.getFormatInstructions()

const prompt = new PromptTemplate({
template: 'Analyze the following journal entry. Follow the instructions and format your response to match the format instructions, no matter what! \n{format_instructions}\n{entry}',
inputVariables: ['entry'],
partialVariables: { format_instructions },
});

return await prompt.format({ entry: content });
};

This code creates a getPrompt function that generates a prompt for analyzing a journal entry. The "template" is a message structure, and "format instructions" are specific formatting rules provided by the parser. The function combines these elements with the input content to create a formatted prompt for analysis.

This approach ensures that the AI's response aligns closely with our predefined schema, significantly reducing the variability of the output format.

Analyzing the Entry and Parsing the Response

Once we have crafted our prompt, we invoke the OpenAI model and parse its output. Here, the structured approach reveals its full value, as we can directly parse and validate the AI-generated response against our Zod schema.

const analyzeEntry = async (entry) => {
const input = await getPrompt(entry.content);
const model = new OpenAI({ temperature: 0, modelName: 'gpt-3.5-turbo' });
const output = await model.call(input);

try {
return parser.parse(output);
} catch (e) {
// If parsing fails, attempt to fix the output
const fixParser = OutputFixingParser.fromLLM(model, parser);
return await fixParser.parse(output);
}
};

This approach not only ensures that the output aligns with our expectations, but also simplifies the integration of AI-generated data into various applications, databases, and analytical processes.

The GitHub Gist contains the entire code: Code
Documentation:
Langchain Javascript
Lanchain Python

Thank you for taking the time to read till the end. I hope this post was helpful. If you want more content like this, you can follow me in dev. Happy Coding!

The Evolution of Asynchronicity in JavaScript: From Callbacks to Promises

Farhad — Sat, 03 Feb 2024 03:08:40 +0000

JavaScript is single-threaded (one command runs at a time) and Synchronously executed(each line is run in the order the code appears). In ES6, one of the most notable enhancements was the introduction of Promises. However, to fully appreciate the significance of Promises, it's crucial to take a step back and explore the mechanisms JavaScript relied on for managing asynchronous behavior before ES6.

Let's take a simple code for example to understand javascript single-threaded synchronous behavior.

This simple diagram describes the Global Memory, Execution Context, and Call Stack of JavaScript. Let's see how this code is being executed

Global Memory

The code starts with declaring a constant named num with the value 3. This is stored in memory for later use.
Next, a function named multiplyBy2 is declared. This function takes a single argument, inputNumber.

Execution Context

The function multiplyBy2 is then invoked with num (which is 3) as the argument. The function calculates 3 * 2, which equals 6, and this value is returned from the function. The returned value, 6, is then assigned to a new constant named output.
The function multiplyBy2 is invoked again, this time with the literal value 10 as the argument. The function calculates 10 * 2, resulting in 20. This new result, 20, is assigned to another constant named newOutput.

Call Stack

Start - Call stack is empty.(Global Function is running behind the scenes)
const output = multiplyBy2(num);
- multiplyBy2 is added to call stack.
- multiplyBy2 is executed and removed from the call stack.
const newOutput = multiplyBy2(10);
- multiplyBy2 is added to the call stack again.
- multiplyBy2 is executed and removed from the call stack.
End - The call stack is empty again.

This describes the synchronous behavior of JavaScript, but what happens when we put an asynchronous code like calling an API using fetch or using setTimeout to delay some functionality inside the program, How does JavaScript manage these operations alongside its regular, line-by-line execution?

Let's take another coding example but we will add a setTimeout inside the code

In this example, we have used setTimeout.setTimeout is a built-in JavaScript function that delays a specified function's execution by a given number of milliseconds.

From what we have understood so far is JavaScript works synchronously means each line is run in the order the code appears and as Javascript is single-threaded,it runs one command runs at a time, so from this, we can say that the output should be:

”Hello”
“Me first”

while executing the code, setTimout will delay for 1000 seconds and execute printHello and then it will print “Me first”. At least from our understanding so far that's how it should be.

Let's see The output of this code:

“Me First” is printed at first and then “Hello” is printed. It's quite a surprise, right? Isn't it breaking the rule of JavaScript?

Before I answer this question, let's talk about what are the challenges if we abide by the rules of JavaScript, let's take a real-life example

what if we are Accessing Twitter’s server to get new tweets that take a long time and then Code we want to run using those tweets

Challenge: We want to wait for the tweets to be stored in tweets so that they’re there
to run displayTweets - but no code can run in the meantime

So that's the problem we are facing here, the code can be stuck for some time before it starts executing, but as we saw from the output the previous code JavaScript is not working in this way, so what going on inside?

To grasp this concept, let's simplify our understanding of JavaScript and its relationship with the browser,

Think of JavaScript as a chef who's great at making dishes but relies on the kitchen's appliances to cook anything. Similarly, JavaScript can't do much on its own; it depends on the browser to handle tasks like logging messages to the console or making requests to APIs. In essence, a lot of what we do in JavaScript involves using the browser's capabilities, which means we're not just working with JavaScript alone.

Let's go back to our previous example involving the setTimeout function. You can think of setTimeout as a kind of request form that JavaScript fills out to ask the browser's timer to wait a specified amount of time before doing something. Once JavaScript submits this request, its job is done, and it moves on to the next task. This is why, when we used setTimeout to display a message after a delay, our code continued running and displayed other messages first. The setTimeout function is essentially just a way for JavaScript to ask the browser to handle timing, while JavaScript itself keeps moving forward.

Consider the scenario where we used setTimeout(printHello, 1000). Here, JavaScript's only role was to hand off the timing task to the browser's timer using the setTimeout function. Once that's done, JavaScript moves on, which is why “Me first!” was printed at first, and then “Hello” was printed. Take a look at this diagram, you will have a better understanding.

Now Let us take another example and trust me it will boggle your mind,

what do you think is the output of the code? Let's take a look at it,

Again! But we set setTimeout to 0ms, so shouldn't it execute the right way and print "Hello", what's happening here?

To understand this we have to know about another concept called “Event Loop”. we will understand it as simply as possible.

We’re interacting with a world outside of JavaScript now - so
we need rules. rules that will help us clearly understand what is happening while JavaScript is trying to interact with a web browser.

So let's take a look at another code

Now let's make a diagram of the executed code:

After executing setTimout at 0ms, it should go to the callstack instantly but as we can see callstack is empty! and in the next execution, it will execute the function blockFor1Sec() and put it into call Stack. In the previous example, we saw something similar that setTimeout was set to 0ms but it didn’t print out print hello instantly but executed the next line first,
so this raises two questions,

Why even after completing in 0 ms didn’t go to the callStack instantly?
After how many times it will go to the callStack and get executed?

I have a task for you to try out. In the previous code, there is an empty function called blockfor1Sec. Now put a for loop that will run for say 3 million times “Blocker”, and observe how many seconds later the printHello function gets executed, it will give you an intuition on the second question. I would highly suggest doing this before reading the next part.

So, there is another part of the puzzle that we need to know about, it’s a queue, a queue of callbacks, so the function printHello put into setTimeout was a callBack function, (Don’t compare this callBack function with the one that are put into Higher Order Function)

So in 0ms, our printHello function is in the callBack queue, ready to run. So as we complete the setTimeout, we will go to our next line which is in 1 ms, we are gonna call the blockFor1Sec function.

So blockFor1Sec is going to the execution context and runs say for 1000ms, but printHello is waiting in the callBack queue from the 0ms so is it going to execute any time between those 1000ms? If you have completed the task you know that it didn't run between that time, so when our little function that is waiting in the callBack function would run?

So after the blockFor1Sec is done after 1001ms is the printHello function allowed to go out of the queue and allowed to execute? NO!! it’s still not allowed to do so.. Sad little function, isn't it?
after blockFor1Sec is run it will execute the next line and log “Me first!” in 10001ms, Now in 1002ms when all the code has been executed, printHello is allowed to run and put into the callStack.Yes! Finally, at 1002ms our little printHello function is grabbed out of the queue and put into the call Stack. and print Hello”!

so the question arises who is controlling the queue and deciding when to put the callback function from the queue to the call stack? and what is the strict rule it follows to do so?
So the rule is all regular code and all synchronous code has to be completed before it calls the callback function from the queue, and who is doing that is the “Event Loop”!!!
Event Loop is constantly checking if is there any callBack function in the queue and if the global() execution context is finished meaning all the regular synchronous code has done its work. If there is any function inside the queue and the global function is executed it will put the function from the queue to the callback and the function will be executed. So it allows us to be certain when our code will run, we don’t know when but we know the order of the execution.

So folk that was before EC6, the entire modal, of how asynchronous code runs inside javascript, but after ES6 came with promises, it changed everything and gave us a much more meaningful way to handle the asynchronous behavior of javascript. we will talk about it in our next post.

Thanks for reading, see you in another thought-provoking JavaScript concept! This post is inspired by Will Sentance's course JavaScript: The Hard Parts, v2. If you have any questions you can ask me in the comment section below

Understanding REST APIs: Principles of Design and Implementation Part 01

Farhad — Sun, 10 Sep 2023 19:03:16 +0000

When you travel abroad and use a translation app, you simply speak into your phone, and like magic, the app translates your words into the local language, making communication with locals effortless.
Similarly, when you're hungry and open a food delivery app, you can peruse menus, select your favorite dishes, and place an order. The app works its magic by providing you with an estimated delivery time, and you can even track your food's journey from the restaurant to your doorstep in real-time.
Behind the scenes, there's a powerful server doing all the heavy lifting, but what connects you to this server is known as an API (Application Programming Interface). The history of APIs is rich, and over time, they have evolved into one of the most critical components for facilitating communication between your device, such as your phone, and a remote server located at a distant place.

APIs act as the intermediary between users and service providers, facilitating the exchange of services. They establish a contract where the service provider offers specific services that benefit the client. This interface enables users to access and utilize the services provided by the server. For example if users want to login, they have to give proper credentials, and after verification and validation from the server type user get to login into the system and get the services provided by the server.

In the ever-evolving world of APIs, we've seen a transition from traditional REST APIs to more flexible solutions like GraphQL. Once, REST APIs were the standard, offering predefined endpoints for specific data retrieval. However, as our needs grew more complex, GraphQL emerged as a game-changer. It allowed users to request precisely the data they needed, reducing over-fetching and under-fetching of information. This shift in API technology mirrors our desire for more tailored and efficient interactions with servers, enabling developers to craft even more magical experiences for users around the world.

We will talk about GraphQL some other day, but let's take a dive into how Rest APIs came, how it became so popular among the developers and little bit of how it works. RESTful APIs gained popularity among developers due to its simplicity and scalability. It provides predefined endpoints for specific data retrieval, making it easier for developers to interact with servers. REST APIs work by sending HTTP requests to the server, which then responds with the requested data. This approach allows for efficient and standardized communication between clients and servers, enabling developers to build robust applications. REST APIs have played a crucial role in the evolution of the API landscape and continue to be widely used in various industries.

REST, short for Representational State Transfer, constitutes a set of architectural principles designed for creating user-friendly, scalable, and maintainable web services. These principles encompass:
🔸 Uniform Interface: The uniform interface principle stipulates that all resources should be accessible using consistent HTTP methods (GET, POST, PUT, DELETE). This standardization simplifies API usage. For instance, retrieving a list of users involves a GET request to the URL /users, creating a new user entails a POST request to /users, updating an existing user employs a PUT request to /users/123, and deleting an existing user utilizes a DELETE request to /users/12x.
Do you know that you can do all the functionality of GET, POST, PUT, DELETE by only using GET? Think a little bit how we can do that, we will talk about it in our next post.
🔸 Client-Server: According to the client-server principle, clients and servers should operate independently. Clients need not possess knowledge about the server's internal workings to use the API effectively. For instance, a client utilizing a RESTful API to retrieve a list of users only needs to know the resource's URL (e.g., /users).
🔸 Stateless: In the stateless approach, each client-to-server request must contain all required information for the server to comprehend and fulfil the request. The server refrains from retaining client state between requests. For instance, in an e-commerce API for shopping carts, every request to add or remove items includes vital information, such as product ID and quantity. The server does not store details about the client's cart between requests.
🔸 Cacheability: This principle highlights that resources can be cached by clients or intermediary systems. Caching enhances performance by diminishing the necessity for repeated server requests. For example, a client using a RESTful API to obtain a list of users can cache this list, reducing the need for frequent server requests.
🔸 Layered System: The layered system principle allows APIs to be structured as a series of independent layers. Each layer has a specific function and interfaces with the layers above and below it. For instance, in a social media application's RESTful API, one layer may manage authentication and authorization, another might oversee resource management, and a third could handle data access.
🔸 Code on Demand (Optional): This optional principal grant server the capability to send executable code to clients for specialized tasks, such as running client-side scripts or applets. However, this feature is seldom used in RESTful APIs and is considered non-essential.
These principles together form the foundation of RESTful APIs, providing a structured and effective approach to designing web services.

So yeah, that was all about today's blog, in our next blog we will talk a little bit more in depth about the http methods, step by step method on designing a RESTful API. Until then, happy coding. 🙌

Setting up a Domain and Subdomain on Vercel: A Step-by-Step Guide

Farhad — Thu, 22 Jun 2023 03:47:02 +0000

Introduction:
If you have purchased a domain from Namecheap and want to use them with Vercel, this step-by-step guide will walk you through the process. By connecting your domain to vercel and creating subdomain there, you can easily host your website or application on Vercel's powerful platform. Let's get started!

Step 1: Sign in to Namecheap.
Go to the Namecheap website and sign into your account using your credentials. Once logged in, you'll be able to manage your domain and subdomain settings.

Step 2: Access Domain Management.
In the Namecheap dashboard, locate the domain you want to connect to Vercel and click on the "Manage" button next to it. This will take you to the domain management page.

Step 3: Update DNS Settings.
On the domain management page, navigate to the "Nameserver. Select the "Custom DNS" option. Here, you need to add or modify the DNS records to point your domain and subdomain to Vercel's servers.

Now we will go to vercel and collect our custom DNS for our project.

For main domain
Step 1: Open a new tab or window and visit the Vercel website. Sign in to your Vercel account using your credentials.
Once logged in, click on the "Import Project" or "Add" button to add your website or application to Vercel.
After adding your project, you'll be redirected to the project dashboard. Here, click on the "Settings" or "Project Settings" option to access the configuration settings.

Under the "Domains" or "Custom Domains" section, click on the "Add" button. Enter your main domain and click "Add Domain."

Step 2: After attempting to add the domain to Vercel, you may encounter an "Invalid Configuration" message. To resolve this issue, you need to edit the nameservers for your domain. By modifying the nameservers, you can ensure a proper configuration and enable seamless integration between your domain from Namecheap and Vercel's hosting platform.

Step 3: Choose the nameservers provided by Vercel and copy them to a text editor or notepad for later use. These nameservers will need to be added to the Namecheap domain settings in order to establish the connection between your domain and Vercel's hosting platform.

Step 4: Next, navigate to the "Custom DNS" section within the Namecheap domain management page. Here, you will find an option to add custom nameservers. Paste the nameservers obtained from Vercel into the designated fields. This step allows you to configure the DNS settings of your domain to point to Vercel's servers. Once you have added the nameservers, save the changes. This ensures that the domain is correctly linked to Vercel, establishing a seamless connection between Namecheap and Vercel for hosting your website or application.

Step 5: Once you have successfully added the nameservers provided by Vercel to the custom DNS settings in Namecheap, your domain should be functional and ready to use.

Moving on to the subdomain aspect

Step 1: Navigate to the main domain where you wish to add a subdomain. Click on the 'Edit' option and then select 'View DNS Records & More' for the respective 'Domain Name.'

Step 2: To add a subdomain, create a new DNS record and choose the appropriate record type, which is typically "CNAME." Enter your desired subdomain as the "Host" or "Name" for this record. In the "Value" or "Points To" field, specify Vercel's subdomain, which is commonly "cname.vercel-dns.com" (without quotation marks).

After making these changes, save the updated DNS records to ensure the proper configuration of your subdomain.

Step 3: In a new tab or window, open the Vercel website and log in to your Vercel account using your login credentials. After successfully logging in, locate the "Import Project" or "Add" button and click on it to include your website or application in Vercel.

Once you have added your project, you will be redirected to the project dashboard. From there, navigate to the "Settings" or "Project Settings" option to access the configuration settings.

In the configuration settings, find the "Domains" or "Custom Domains" section and click on the "Add" button. To add the subdomain, click on the "Add" button once again and enter your desired subdomain. Vercel will automatically verify the domain if the DNS records were set up correctly. After successfully adding the subdomain, Vercel will proceed with the verification process for the subdomain as well.

Step 7: Verify and Deploy
Vercel will verify your domain and subdomain settings. Once verification is complete, you can deploy your project to the domain and subdomain you added. Vercel will handle the deployment process and make your website or application accessible through your custom domain and subdomain.

Conclusion:
By following these step-by-step instructions, you can seamlessly connect your domain and subdomain from Namecheap to Vercel, enabling you to take advantage of Vercel's robust hosting capabilities. However, it's important to note that when adding a subdomain to a project, both the main domain and the subdomain should be under the same Vercel account. If you have added the main domain to a project using your personal account and want to add a subdomain to a team project, you'll need to use a different approach.

Thank you for reading this guide, and happy coding!