DEV Community: Amir Helali

My Latest Contribution to ChatCraft

Amir Helali — Tue, 12 Dec 2023 02:44:23 +0000

Latest Changes

So, to pick up where I left off from my previous post, I was able to stick to my plan of using the Strategy Pattern within the functional component paradigm structure instead of class component paradigm. Here are the changes I made to the code base to reflect my plan:

I created an interface function which defines the structure for my response handling functions:

interface ResponseHandlerStrategy {
  (response: any): Promise<any>;
}

I created a responseHandler which is in charge of selecting the right response handler function based on the boolean streaming flag:

  const responseHandler: ResponseHandlerStrategy = streaming
    ? handleStreamingResponse
    : handleNonStreamingResponse;

I created 2 different implementations for handling the responses. One is for handling an streaming response and the other is for handling a non-streaming response:

  const handleStreamingResponse: ResponseHandlerStrategy = async (
    streamResponse: Stream<ChatCompletionChunk>
  ) => {
    for await (const streamChunk of streamResponse) {
      const parsedData = parseOpenAIChunkResponse(streamChunk);
      await streamOpenAIResponse(
        parsedData.token,
        parsedData.functionName,
        parsedData.functionArgs
      );
    }

    const content = buffer.join("");
    return handleOpenAIResponse(content, functionName, functionArgs);
  };

  const handleNonStreamingResponse: ResponseHandlerStrategy = async (response: ChatCompletion) => {
    const { content, functionName, functionArgs } = parseOpenAIResponse(response);
    return handleOpenAIResponse(content, functionName, functionArgs);
  };

Implemented the above functions in the main chatWithLLM function and modified the code base to support these functions within a single code path:

[...]
 const responsePromise = openai.chat.completions
    .create(
      chatCompletionParams as OpenAI.Chat.ChatCompletionCreateParamsStreaming,
      chatCompletionReqOptions
    )
    .then(async (response) => {
      return responseHandler(response);
    })
    .catch((err) => {
      return handleError(err);
    })
    .finally(() => {
      removeEventListener("keydown", handleCancel);
    });

  return {
    promise: responsePromise,
    cancel,
    pause,
    resume,
    togglePause,
  };

Ran the application to make sure that these new functions were working correctly and didn't break the overall functionality of the program.
Formatted the code with Prettier via VSCode, committed my changes, and created a PR.

What I Leveraged

I used the OpenAI API chat documentation to familiarize myself with and understand different chat objects, types of responses, and the different return types.
I researched the strategy pattern and its application in Typescript from different sources online.
I used the comments and the feedbacks provided in a previous PR for the project that were related to the issue I worked on. I used these to understand what was needed for me to do and the overall logic and the structure of the code base.

Conclusion

At first I was a bit intimidated to contribute to a larger project. However, I am happy that I jumped into it with a plan which guided me throughout my contribution. I am happy that my original plan worked out, even though I had to change my approach to fit the functional structure of the code-base. I am glad that I got to work on a project which used OpenAI API so I could learn more about it. Also, I am happy that I got to use a design pattern that I had learned theoretically but never had the chance to apply it in Typescript. I am still waiting for my PR to be reviewed, and based on the feedback, if there are any changes needed, I will make sure to address them with appropriate adjustments.

Chatcraft Runtime Response Handling Progress

Amir Helali — Mon, 11 Dec 2023 00:22:44 +0000

Progress So Far

So, in my previous post I explained my plan to contribute to an issue for the Chatcraft project. As I explained, my plan was to use the Strategy Pattern for solving this issue. I created a response handler interface:

interface ResponseHandler {
  handleResponse(data: any): Promise<any>;
}

Then I created different response handlers:

class NonStreamingResponseHandler implements ResponseHandler {
  async handleResponse(response: OpenAI.Chat.ChatCompletion): Promise<any> {
    const { content, functionName, functionArgs } = parseOpenAIResponse(response);
    return handleOpenAIResponse(content, functionName, functionArgs);
  }
}
class StreamingResponseHandler implements ResponseHandler {
  async handleResponse(streamResponse: any): Promise<any> {
    const buffer = [];
    for await (const streamChunk of streamResponse) {
      const parsedData = parseOpenAIChunkResponse(streamChunk);
      await streamOpenAIResponse(
        parsedData.token,
        parsedData.functionName,
        parsedData.functionArgs
      );
      buffer.push(parsedData.chunkContent);
    }

    const content = buffer.join("");
    return handleOpenAIResponse(content);
  }
}

After that I had a function to create the correct response handler based on the streaming flag:

function createResponseHandler(streaming: boolean): ResponseHandler {
  return streaming ? new StreamingResponseHandler() : new NonStreamingResponseHandler();
}

The Problem & Readjustment

As it can be seen from the code I provided above, my plan was to use the class component pattern. However, the code base that I am contributing to uses functional components. So, I need to change my implementation plan to use the functional component pattern. To do this I plan to just define two separate functions for handling each type of response and use those functions appropriately based on the streaming flag.

To Be Continued

I plan to make another post about my final implementation for this issue.

Chatcraft Enhancement

Amir Helali — Tue, 05 Dec 2023 23:33:55 +0000

Issue

This is the first post that I am making about the work I will do on an open source project. The project that I've picked is called ChatCraft. It is an open source browser-based companion for coding with large language models. It also provides the option to choose between OpenAI and OpenRouter. The issue that I've picked to work on is about refactoring the response handling of OpenAI so that the right handler is picked at run-time based on two different response types: streaming response and non-streaming response.

Plan

My plan is to use the Strategy Pattern because it gives me the flexibility to encapsulate and dynamically change the behaviour of the object at run-time. I think that I will be able to have an abstract response handler with 2 different implementations for each response. One implementation will handle streaming response and the other will handle non-streaming response. The way I will handle choosing the response type will be based on a flag that identifies if a response is streaming or non-streaming. After the type of response is decided I will use a Factory Method to create the object based on the response flag.

To be Continued

I will be posting more as I progress towards solving this issue, so keep an eye out for future updates.

Server-side Pagination

Amir Helali — Mon, 04 Dec 2023 02:27:47 +0000

Pagination Feature

I've been trying to work more on implementing back-end functionalities. When I was searching Github to find an issue related to back-end functionality, I came across this issue that grabbed my attention. The issue was about implementing pagination for 2 api endpoints. Pagination is the functionality to divide up and organize the data in separate sequential pages. I was interested in working on this issue because my only experience implementing a pagination feature was done on the front-end side of a web application.

The Process

Setup

The setup to work on this project was straightforward. I forked and cloned the project. Then, I had to update my .NET SDK from version 6 to 7, and to update my Visual Studio 2022 to be able to build and run the application.

Changes

My main concern when implementing the pagination feature was to choose the right strategy with the most flexibility for future changes. I chose to add my implementation to the ListPosts() function for the GET posts api and the ListPages() for the GET pages api. I added 2 int parameters to each of these functions that handled the number of items for each page and the number of pages. The parameters allow for flexibility on how many items can be included for each page but they also had default values. Then I used Arithmetic calculations, Skip() and Take() functions, based on the provided values in the parameters to check which items to include and skip from the retrieved data, mapped the data and returned the results. The implementation for both functions can be found below:

public async Task<ActionResult<PagesDto>> ListPages(int pageNum = 1, int pageSize = 10)
    {
        int skipItem = (pageNum - 1) * pageSize;

        var pagesFromDb = await _dbContext.Pages.Skip(skipItem).Take(pageSize).ToListAsync();

        var pagesDto = new PagesDto();

        foreach (var page in pagesFromDb)
        {
            var pageDto = new PageDto
            {
                Id = page.Id,
                Author = page.Author,
                Body = page.Body,
                Title = page.Title
            };

            pagesDto.Pages.Add(pageDto);
        }

        return pagesDto;
    }

public async Task<ActionResult<PostsDto>> ListPosts(int postNumber = 1, int postSize = 10)
    {
        int skipItem = (postNumber - 1) * postSize;

        var postsFromDb = await _dbContext.Posts.Skip(skipItem).Take(postSize).ToListAsync();

        var postsDto = new PostsDto();

        foreach (var post in postsFromDb)
        {
            var postDto = new PostDto
            {
                Id = post.Id,
                Author = post.Author,
                Body = post.Body,
                Title = post.Title
            };

            postsDto.Posts.Add(postDto);
        }

        return postsDto;
    }

After I made my changes, I committed them, and made a PR to be reviewed.

What I learned

Even though I had experience with implementing pagination functionality before, it was still interesting to implement the same concept I had used on front-end but for the back-end this time. I think that if I want to implement a pagination functionality in the future, I will take the best of both worlds, and have a mixed implementation between the back-end and the front-end, because I believe it will offer the most flexibility. But, choosing an implementation strategy should be fluid and dependent on what is needed for the overall goal of the program.

Class Component vs Functional Component

Amir Helali — Mon, 04 Dec 2023 01:43:44 +0000

Mattermost

I recently contributed to the Mattermost project. Mattermost is an open source platform for collaboration across the software development life cycle, and it is written in React and Go. I chose this project because I wanted to work on a big React project with lots of contributors.

The Issue

The issue I chose was about converting a class component to a functional component in React without changing its core functionality, and updating the relevant test cases to reflect the conversion. The issue can be found here. The reason that they wanted to change their components from class to functional was based on React's recommendation and also functional components look to be cleaner, simpler, easier to write and maintain, and there is more support for them through the use of Hooks.

The Process

Setup

The most challenging part of the process for me was setting up the development environment. First, I had to install WSL on my machine which was done through the command wsl --install in Powershell. Then, I needed to install Docker Desktop to run the application. I followed the instructions from this link to install Docker Desktop, however I was getting errors running Docker Desktop and Ubuntu. After doing some research I realized that I had to enable virtualization in bios and enable WSL integration for Docker Desktop. I followed the instructions from this link to enable virtualization on my machine and the picture below shows where to enable WSL integration for Docker Desktop

Afterwards, I installed Go in my WSL environment, increased the number of available file descriptors by using the command ulimit -n 8096, installed "libpng" in the WSL, forked and cloned the project, installed NVM and used nvm install to install the correct version of Node.js for the Mattermost web app. After this I was able to run the server and the webapp.

Changes

First, I had to do a quick review on my React knowledge and the implementation of class components vs functional components, then I familiarized myself with the Jest testing framework. After that I implemented the conversion and updated the test file associated with that component. The changes that I made can be found in the screenshots below:

Finally, I completed the Mattermost's CLA, committed my changes, and created a PR to be reviewed.

What I learned

Like I said the most challenging part for me was setting up the development environment, since I have never worked with WSL and Docker before. I learned how to set up WSL on my machine, use Docker Desktop for containerized applications, and work with Jest framework. This was also a nice review on my React knowledge, which was very needed since I have been focused on working with C# lately.

Release Time

Amir Helali — Sat, 25 Nov 2023 04:22:51 +0000

Release 1.0.1

Today, I was able to package and publish my first NuGet package. Since my project used the .Net framework, I chose NuGet as my package registry.

Packaging Process

The process for packaging my project was very easy and straightforward. I found a great video from the .Net YouTube channel that helped me with this. The video can be found here.

Steps Using Visual Studio:

Select the project properties from the project menu
Fill in the details for the package like: Package ID, Title, Authors, Package Version, etc.

After the details are filled in, select Pack from the Build menu.
A new .nupkg will file will be created under bin/debug folder of the project (This is a default output folder when packing a project, a custom folder can be selected in the previous step).
Ready to be released.

Publishing Process

The publishing process was very straightforward as well. The steps are as follows:

Sign in to Nuget.org with a Microsoft account.
Select upload package from the menu.

Upload the newly created .nupkg.
Wait for the review to be finished.
The package is published and ready to be used.

Testing

In order to test out that users were able to use my package, I asked one of my developer friends to test it out for me. Since this is a NuGet package we were not able to run it from the command line. But, he was able to install the package from the NuGet package manager in Visual Studio and add it as a dependency to a test project he had created. From the test project he was able to run the converter and test out all the functionalities that I had implemented.

Code Alteration

Luckily I didn't have to make big changes to my code base. I simply added a new public class called "Converter" which was in charge of running the program, so that it'll be accessible when users add the package to their project.

Package Installation and Usage

This package can be installed from the NuGet package manager by searching for "Amir.Txt2StaticHtml"

Or by going to this page and using any of the commands provided. After the package is added to the project simply run the Converter.Run(string[] args) function from the Text2StaticHtml namespace with the valid arguments that can be found in the Readme.

Github Actions & CI

Amir Helali — Sat, 18 Nov 2023 03:41:33 +0000

CI Workflow

This week I worked on adding a CI workflow to my project through Github actions. The set up was easy:

I selected a new workflow from the "Actions" section in my repo:
Searched for and selected the .NET workflow:
I edited the template YAML file to work with my project files:

# This workflow will build a .NET project
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-net

name: .NET

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: windows-latest

    steps:
    - uses: actions/checkout@v3
    - name: Setup .NET
      uses: actions/setup-dotnet@v3
      with:
        dotnet-version: 6.0.x
    - name: Restore dependencies
      run: dotnet restore ./Text2StaticHtml/Text2StaticHtml.sln
    - name: Build
      run: dotnet build ./Text2StaticHtml/Text2StaticHtml.sln --no-restore
    - name: Test
      run: dotnet test ./Text2StaticHtml/Text2StaticHtmlNunitTest/Text2StaticHtmlNunitTest.csproj --no-build --verbosity normal

Committed the YAML file to my repo.

Testing CI Workflow

After adding the CI workflow, I added new test cases for my project to make sure that the workflow got triggered on push and pull request. Then, I made a faulty logic change to intentionally fail a test during the workflow and fixed the faulty logic after I saw that the CI action failed as a result of the faulty logic.

So, after I was satisfied that the workflow worked, I merged the changes.

Adding To a Friend's Project

I also added a new test case to my friend's project to make sure that his CI workflow worked as well. Since, his project is written in Python he is using Pytest as a testing framework. Because his testing setup is similar to mine, adding a new test case was very simple. I implemented a new test case to check for non-existent file inputs after I asked my friend if there was a specific test case that he wanted me to add to improve his test coverage. The PR for the changes I made can be found here.

What I Learned

I learned how to setup a CI workflow through Github actions. I can see why a CI workflow is so important, it allows for the automatic building and testing of the project whenever changes are made. I will definitely add CI workflows to my future projects to make my life easier specially with automatic testing.

Late Hacktoberfest Part V

Amir Helali — Sun, 12 Nov 2023 19:08:35 +0000

Recap

I made 4 contributions to open source projects during my "Late Hacktoberfest" series. My contributions covered a variety of different areas like: creating documentation for repositories, providing efficiency improvements to a codes base, backe-end implementation, and rekindling my old C++ knowledge. Here are the infomration for all the contributions that I made:

Part l post, the issue, and the PR
Part 2 post, the issue, and the PR
Part 3 post, the issue, and the PR
Part 4 post, the issue, and the PR

The most challenging part of this experience was finding the right issues to work on. But, thankfully I was able to find things to work on by narrowing my focus and looking for things I wanted to learn and improve on.

What I Learned

I covered a variety of different areas with my contributions. My first contribution, helped me understand the value of CONTRIBUTING documentation and how to create one for repositories, and I learned about CODE_OF_CONDUCT documentation for open source repos. My second contribution, added more tools to my C# tool set and and improved my understanding about using a String vs StringBuilder. My third contribution, rekindled my sleeping C++ knowledge and it was a great review on how to use that programming language again. And my fourth contribution, was a good review on back-end implementation and it also thought me about using custom PR template forms. Overall, I am happy with my experience and it helped me take my first steps in getting involved with open source communities. I am walking away from this experience as a more knowledgeable developer and more excited to continue contributing to open source projects.

Late Hacktoberfest Part lV

Amir Helali — Sun, 12 Nov 2023 18:35:23 +0000

Final Contribution

This is a post about my fourth and final contribution for this series. I am happy that I reached the goal of 4 contributions at the end. For my final contribution I wanted to work on a web application. First, I chose an issue that was about creating code syntax highlighting for a code translator application, when I started to work on this project I was having a lot of issues trying to get it to work because of the libraries I was trying to use and since I had spent a couple of days trying to get it to work and did not have enough time, I had to move on and choose a simpler web app issue to work on. But, I plan on going back to that project to keep working on it. So, I chose this issue. For this issue, the project owner wanted to implement a back-end functionality for his web application that was in charge of getting and sending a random quote from a data set and responding to the route associated with it. So, for the fourth time I reached out to be assigned the issue and started to work on it after I forked the repo.

Implementation

The implementation for this issue was easy. I created a function that located and read the json data file filled with quotes and I used "fs" and "path" modules to achieve that. After I read the file I parsed the json data and used the Math library to get a random index, then returned a random quote out of all the parsed quotes based on the random index that I had generated. Afterwards, I set up the app.get() method with the correct route for it, called the function I had created to retrieve a random quote inside it and returned it as a json response. I tested everything and made sure that everytime the route was called a new random quote was generated. After I was satisfied that everything was working and I did not break anything I committed my changes and created a PR.

What I learned

Even though I didn't get to fix the original issue that I had picked for my final contribution due to time constraints, I still plan on going back and working on it on my own time, because it piqued my interest. As for the issue I worked on, it was a nice review on express and back-end implementation. A new thing I learned though was not code related, it was Github related. When I was submitting my PR I saw that the project owner had set up their own PR form as a template, which was very interesting. This was the first time I had encountered a custom PR template when submitting one. I will consider using a custom PR template for my own projects, since it allows for more customization and organization of the PR details.

Late Hacktoberfest Part lll

Amir Helali — Sun, 12 Nov 2023 17:51:43 +0000

Third Contribution

C++ was the first coding language I learned and it has been some time since the last time I used it for any of my projects. So, for my third contribution I decided to contribute to a C++ project just to see if I am still capable of utilizing the language and the tools it offers. I searched for a C++ issue on Github and decided to work on this issue. The project owner wanted to create a functionality for his expenditure tracking console application that went though a spendings csv file for a day and calculated the total amount spent for that day. So I reached out to the owner to assign me the issue and began to work after I was assigned to it.

Implementation

I forked the the repository, created a new branch for the issue and started to work on it. For the implementation I decided to create 3 different functions:

A function that was in charge of reading a CSV file and retrieving the data in it as a vector type. This function took a reference to a file path as a parameter and returned a vector of data from the file. The screenshot of the function can be found below:
A function that was in charge of going through the data returned from the previous function and took a reference to that data and a column name reference as parameters. This function went through the vector of data and looked for the index of a specific column based on its name. After finding it's index it went through all the values associated with that column based on the index found, saved all the values in a vector and returned them. This screenshot shows this function:
A function that took a reference of all the values returned from the previous function and calculated the sum of all of them. Since I have used vectors to store all my data, I decided to use the Algorithm library and utilize transform() and accumulate() functions from it. I used transform and lambda expression to change the type of the values from string to double and used accumulate to get the sum of all the double values. This screenshot shows the implementation:

After I implemented all the functions and tested them out to make sure everything worked. I committed my changes and created a PR.

What I Learned

I learned that I can still code in C++ even though it has been a few years since the last time I used it. I had to go over the documentation for the algorithm library again to review how transform() and accumulate() functions worked. So, overall this was a nice review on a language I haven't used in a long time and it rekindled some old knowledge for me.

NUnit Testing

Amir Helali — Sun, 12 Nov 2023 02:16:29 +0000

Testing Framework

This week I added a testing framework to my text to html coverter project. I decided to go with NUnit. NUnit initially ported from JUnit and it is an open source unit-testing framework for all .Net languages. I decided to go with this framework because I use C# for my project and NUnit is integrated with Visual Studio and Visual Studio Code which makes it easily accessible for me.

Setup

The setup was very easy. It was done by simply adding the NUnit Test Project to my solution, which can be seen in the screen shots below:

After the framework was added, I began to familiarize myself with the steps required to create tests for my program. I learned about the Assert class to check the results of my test actions, the Setup() method to call functions before each test function is called and TearDown() method to call functions after each test function is called, which I used to clean up what was done in Setup(). I also learned that each test function can be divided into 3 parts to make things organized, which are:

Arrange: This is where I prepared variables that I was going to pass to the function I was testing.
Act: This is where I called the function I was testing.
Assert: This is where I mostly used Assert.IsTrue() and Assert.DoesNotThrow() functions to decide if the function call passed or failed depending on its objective.

Testing & Results

To begin I started with the most basic function in my program which handles directory creation based on a path parameter. I tested it with a valid directory string and an empty string. The valid directory string test passed and the empty string test failed. So, I had to go and add a try-catch block to that function so that if an empty string was passed as an argument it'd handle the error properly. Then, I decided to add test cases for the core of my program which was in charge of converting a text or a markdown file to html. I wrote around 15 test cases for it with different scenarios like: checking if an html file was created after converting from text/markdown, checking the content of the converted html file to make sure paragraphs, language, horizontal rule, headings, links, and style-sheet were correctly included based on the input files. All the tests for the core of the program passed except for 1, which was converting a "#" markdown identifier to h1 html tag. The issue was that after converting the Heading1 from markdown to h1 in html, the text for the h1 was being repeated in the body. So, I made changes to my code-base to address this issue.

What I learned

This was my first time using a testing framework, and I learned about the value that testing provides, specially when there is a big project with contributors, and a code base that is changing all the time. I learned that when creating a test function I can divide up the logic into: Arrange, Act, and Assert sections to make it easier. Now that I understand how helpful testing can be, I will continue to use it for my projects.

Late Hacktoberfest Part ll

Amir Helali — Sun, 05 Nov 2023 03:29:48 +0000

Second Contribution

This is the second post in my multi-part Late Hacktober series. This post is about my second contribution to an open source project during the 2023 Hacktoberfest. Lately, I've been focused on learning and improving my C#. So, I wanted to work on a project using C# and something that was connected to game engines. Luckily I found a "good first issue" here, which is about using StringBuilder class instead of String.

String vs Stringbuilder

One of the project members had made the observation that one of the custom classes in the code base which was in charge of code generation was using the String class with += operators, and string interpolation, for string concatenation. He recommended that it is more efficient to use a StringBuilder class instead of using String, because the StringBuilder is a mutable item compared to the immutable String. This was interesting to me because first of all, I had never used the StringBuilder class and it was an opportunity to learn something new, and secondly, because it made sense to me that if the string value is not fixed and it will be constantly changing, to use a mutable class in order to avoid memory duplication. So, I went over the StringBuilder documentation to understand how it works and what methods I can use to fix this issue.

Working on the Issue

After going over the issue requirements and understanding what and where I needed to implement the fix, I asked the project owner to assign me the issue, which he happily did. Like my first contribution I forked the repo and created a new branch to work on. The implementation was not complicated at all, I just had to replace the String class with the StringBuilder, use StringBuilder methods for string concatenation and override one of the functions with a custom logic. After I implemented the logic, I tested my changes to make sure that it did not break anything in the code base and that it did what was needed. When I was satisfied that everything worked fine, I commited my changes, pushed them, and made a pull request. Afterwards, one of the project members reviewed my code, approved it, and the project owner thanked me for my contribution, and merged the code, which will be included in his next release.

What I Learned

I really liked how appreciative the project owner was of my contribution, even though it was nothing complicated or huge. This made me feel good about contributing to other people's projects, and made me want to do more contributions even after I finish college. It was also a great learning opportunity which allowed me to learn the difference between StringBuilder and String and when to use each one. I will have to go over some of my own C# personal projects and update them, to use StringBuilder instead of String where I have a mutable object.