DEV Community: Hyunjin Shin (Jin)

Project Chronicles - Release 0.4 - Final

Hyunjin Shin (Jin) — Tue, 10 Dec 2024 01:48:38 +0000

Links

Issue : https://github.com/tarasglek/chatcraft.org/issues/626
Pull Request : https://github.com/tarasglek/chatcraft.org/pull/759

Description

This post continues the blog post about Project Release 0.4

Progress

I finialized my design and applied it. It looks like the following screenshots

ModelsSettings Page after change on Desktop

Newly Added DataControls Page on Desktop

ModelsSettings Page after change on Mobile Device(iPhone 15 Pro)

Newly Added DataControls Page on Mobile Device(iPhone 15 Pro)

Reflection

For this project, I mostly worked on Chatcraft. I think this project is really helpful to learn and understand React and how to utilize AI API. If I am being honest, I didn't go out of my comfort zone as much as I could, compared to other fellow stdudents. They made really awesome contributions to a really large project such as mattermost and hugginface. However, compared to what I was at the begining of this semester, I am a totally different person as a developer. I got confidence.

The true scope of the programming world and the level of skills required in the industry have always been unclear to me. I could never quite see where I stood or how far I needed to go.

There's a significant difference between knowing your goals and blindly pushing forward without direction. Through this project and course, however, I’ve gained a clearer understanding of my objective position and the actual standards demanded in the field.

This newfound clarity has helped to ease some of the vague anxieties I carried. While recognizing the immense heights of the programming world and realizing how far I still have to climb is somewhat furstrating, it has also provided me with a tangible sense of direction. Knowing the gap between where I am and where I need to be has given me a clearer vision and renewed determination.

I am trying to and will keep trying to believe, although I am often swayed by my anxiety and concerns that I may never be able to become a developer, that I can do this and that I can become a developer if I keep going without giving up.

Project Chronicles - Release 0.4 - part 2

Hyunjin Shin (Jin) — Fri, 29 Nov 2024 06:52:15 +0000

Links

Issue : https://github.com/tarasglek/chatcraft.org/issues/626
Pull Request : https://github.com/tarasglek/chatcraft.org/pull/759

Description

This post continues the blog post about Project Release 0.4

Progress

I started to write codes for this issue. Since a lot of changes were needed to be changed in codes, I tried my best to follow the original code style. Especially when I am changing CSS; I spent quite a bit of time on making my new code as similar to original codes as I can, and also I tried to make as less changes in code.

The second thing that was challenging was the design. I've never thought I have a good sense of aesthetics, so I had no idea of what the desgin for the new page should look like. Moreover, in the issue there was no specific guide about what kind of design the maintainers want. It was good in a sense that I have a freedom to make it in my style and apply my creativity. However, it was also a bit confusing.
So I went to the ChatGPT, looked at the settings page, and refered to that design.

ChatGPT Settings page

The third thing that I think about was the namings of the page. I considered among "Data", "Storage", "Data Controls", and "Database". Then, since the most popular and most used AI Chat is ChatGPT, I thought that if we follow the naming styles, it would be beneficial to users and less confusing to the users.

The last thing that I considered was extra fix. There was duplicate declarations of interface; however, this wasn't directly related to the issue. So, I wasn't sure that if I should fix this or make a new issue for this. This was a really easy and simple problem, I thought that there was no need to open a new issue for this. So I just fixed it(removed one of them).

Project Chronicles - Release 0.4

Hyunjin Shin (Jin) — Fri, 29 Nov 2024 06:20:33 +0000

Description

This post is about a Project-release 0.4 for OSD600 course at Seneca College. For release 0.4, the students were required to push themselves further into Open Source Development World out of our comfort zone. I decided to work on a bit more complex issues on the Chatcraft project. Then, I found an issue that looked interesting and more difficult than the ones that I worked on before.

Progress

Since this issue requires moving a substantial amount of code in a page(or component) into another, I first needed to fully understand the code inside the page, which is ModelsSetting.tsx. Especially, I needed to understand the specific part that I am supposed to move. It was persist option, import option, and export option.

I first started to study persist option. It uses Dexie library. What it does is using indexed DB feature of browser. It stores data in indexedDB on browser, and some browsers can make it persist.

This part confused me a lot. At first, I understood persist option as something like even after I close the tab or window, the data is not deleted and when I open Chatcraft later, I can still retrieve the chat histroy. However, persist here doesn't mean that. Whether the persist option is turned on or not, the chat data is stored in IndexedDB. However, sometimes browsers delete the indexed data when it has not enough space or for some other reasons. persist here means preventing the browser from deleting the indexed data arbitrarily.

After I understand what persist option means, I encountered the second problem. Some of the browsers didn't work for persist option such as Safari. The option didn't work at all. On Chrome, it worked sometimes, but it didn't work for some other times. I researched about it, and then find out that it depends on the browser's behavior and decision. For example, the following factors can affect the availability of persist option of Indexed DB.

Reasons for Inconsistent Behavior of navigator.storage.persist() in Chrome are as follows:

User Interaction Requirement:

For Chrome to grant persistent storage, it usually requires a user gesture (e.g., a click or a form submission). If the persist() method is called outside of such a gesture, Chrome might reject the request.
For example, if you call navigator.storage.persist() inside a background task or an event that wasn't directly triggered by the user, Chrome may not grant the storage permission.

Engagement and Usage Frequency:

Chrome may also base its decision on how frequently the user interacts with your app. For apps that the user doesn't interact with often, Chrome may decide not to grant persistent storage.
Frequent user interaction (like daily usage) or installing your app as a PWA can improve your app’s chances of being granted persistent storage.

PWA Installation:

If your app is installed as a Progressive Web App (PWA) or added to the user’s home screen, it has a higher chance of being granted persistent storage. Non-PWA websites might not be as likely to get persistent storage, especially if the user has not engaged much with your site.

Quota and Storage Policies:

Chrome, like other browsers, has a quota management system to ensure that a site doesn’t take up too much local storage. Even if you request persistent storage, Chrome might deny it if the site has exceeded its storage limits or if the system is running low on space.

Device-Specific Factors:

On some devices, particularly mobile or low-storage devices, Chrome may be more conservative about granting persistent storage to avoid using too much disk space.

Browser Updates and Features:

Chrome might change how it handles persistent storage with new versions, and certain flags or experimental features could also affect the availability of navigator.storage.persist(). Occasionally, new browser features or settings might temporarily disable or restrict storage persistence.

In the next post, I write about implementing the solution.

OSD600 - Lab09

Hyunjin Shin (Jin) — Fri, 22 Nov 2024 18:55:21 +0000

Link to the package that I released

Description

This post is about lab 09 for OSD600 course at Seneca College. This week, we learned how to package our project and release it to public. And also we learned about git tag

Reflection

- Q1. Which release tool and package registry did you choose? Provide links to everything you mention.

I used Poetry. In the first week, I started my project without package manager. Since it was my first python project, I didn't know that python has package managers. Then, I learned that there is package manager similar to npm, and recreated my project. This package manager also provides a way to release the project easily.

- Q2. What was the process for creating a release? Be detailed so that other developers could read your blog and get some idea how to do the same.

Step 1. Create PyPI account and generate api key for PyPI publish

Step 2. Set up the API_KEY in config.toml file for poetry.
Poetry config.toml for mac is located in ~/Library/Application Support/pypoetry

[pypi]
username = "__token__"
password = "pypi-<your-token>"

you may need to set up the key as following:

poetry config pypi-token.pypi <your-token>

Step 3. Build your poetry project in the root dir of your project

poetry build

Step 4. Run the following commend to publish it

poetry publish

- Q3. What did you learn while doing your release? Did you have any "aha!" moments or get stuck?

Poetry Package manager is so easy and kind that I didn't have a huge problem with publishing it. However, I had some problem using the tool that I published. I downloaded the tool with the following command

pip3 install code-mage
codemage test.js -s

Some of the features didn't work although it worked when I ran it from my project directory using poetry run codemage command. I think when it builds the project for release, it mangles file structure or doesn't include some files. There was one function that reads version info from pyproject.toml file. It correctly reads when I use it in project directory. However, it didn't work in my published version. So I had to change the logic.

- Q4. How much did you have to alter your code, files, build, etc. to use the chosen package format and registry?

Fortunately, I started with package manager, I didn't have to change a lot. I only fixed some logics or some functions that only works in local environment(e.g. cloning the repo and running it).

- Q5. How did the User Testing session with your partner go? Describe what it was like, where they got stuck, and how you corrected the problems.

I asked my seneca colleague. She was very confused by the Doc. She said it would be really tough or impossible to use the tool just by reading the Doc. I made a lot of changes in my Doc and made it as kind and easy as I can. I think I subconsciously assumed that they would know the steps that I didn't write about in the Doc such as how to make .toml file, the syntax of .toml file. And also, I didn't consider the users have different environment; some users use Linux, Some use Window, and Some use Mac. So I added instructions for different environments.

- Q6. How do users install and use your project now that it has been released? Provide links and some instructions.

Code-Mage.

This is the published version of my tool. User first needs to have Python 3.12 or later version installed on their machine.

And then, users can downloade the tool using the following comands.

pip install code-mage # Window user
pip3 install code-mage # Mac user

Then, they need to create their api_key at openrouter Or Groq

They can set up their key with commands as follows:

export GROQ_API_KEY=your-api-key
export OPENROUTER_API_KEY=your-api-key

or they can create .toml file in their home directory. They can set other options in the file.

vi ~/.codemage-config.toml

Then, add the following environment settings in the file:

# the double quotes for string values are necessary.

model="groq" # if you wish to use OPEN ROUTER you can just delete this line
GROQ_API_KEY="<YOUR-GROQ-API-KEY>"
OPENROUTER_API_KEY="<YOUR-OPEN-ROUTER-API-KEY>"
language="java" # you can use any of the supported languages
stream=false # if you wish to get the output streamed, set it `true`
token_usage=false # if you wish to get token_usage info, set it `true`
output="result" # type any name for the output file without the extension

Now, they can use the tool.

codemage -v
codemage -h
codemage test.js # assume there as test.js file in your current dir.

Project Chronicles - Release 0.3

Hyunjin Shin (Jin) — Sun, 17 Nov 2024 04:29:22 +0000

Description

This post is about a Project-release 0.3 for OSD600 course at Seneca College. For release 0.3, students were required to contribute to Open Source Project. This time, we were asked to contribute to a larger project, compared to what we worked on for Hacktoberfast, and make larger contributions.

Progress

For release 0.3, I decided to work on the project that I worked on for my last commit during Hacktoberfast. Instead of finding a new repository, I wanted to work on a project that I already have some knowledge. I thought that this would be more helpful for understanding a larger Project and how larger projects are structured and what tech stacks they use and how they work. And more importantly, I really like Chatcraft. I am very interested in React and Typescript, which are used in the project. So I continued working on this project.

Issue 1

I looked at the issues on the repository and found this issue. The issue was that for some of the llm models, it didn't provide proper icon.

How I fixed

First, I had to figure out what the cause of this problem. My gut feeling told me that there must be some part where it handles the logic for which icon they should use. I started to find the part using git grep by searching keywords such as icon, model, and avatar. Then, I found where this logic is implemented. The problem is that when it decides the icon, it checks the name of the model. However, some of the model names include uppercases, but the logic didn't check the uppercase, so I made it case-sensitive.

Issue 2

Since I worked on UI-related issues for the last couple contributions, I was getting more confedient with that, and I found another issue that's related to UI, which is about an unnecessary overflow in PreferencesModal.

How I fixed

It was much quicker to find where the problem is occuring as I have already made two contributions. However, fixing the problem wasn't that easy. I knew that I needed to fix css but didn't know how. The approach that I adopted was trial and error. I tried all the solutions that I could come up with. For example, I tried adding some padding, margin, height, or width, and changed some css attributes such as display or overflow-x. Finally, I figured out one of the flex boxes need weight specified so that it doesn't overflow its parent.

Issue 3

While I was working on the previous issues. I found out that there were some bugs when I opened PreferencesModal. For iPhone, when you touch input element in PrefeencesModal, it automatically zooms-in(Android phone doesn't automatically zoom-in). However, for some reason, you cannot zoom-out to normal size(zoom-in and zoom-out is prevented in any environment, whether it's mobile or ios or desktop). This was actually bothering me a lot while I was playing with Chatcraft and when I was testing the app. Therefore, I opened an issue for this.

How I fixed

Now it didn't take that long time to figure out where the code for this UI element is located since I've been working on this project for two weeks. Although I knew which page is responsible for this, but I wasn't sure about which element I should fix. Nonetheless, I felt that it must be Modal component, and I tried to look at it. However, I wasn't very confident with Chakra-UI, and some components of Chakra-UI looked deprecated. There was no offical docs for some components such as Modal. Since there was no official docs and also ChatGPT didn't know well about Chakra-UI, I was frustrated a bit. Actually ChatGPT is so bad at Chakra-UI. I just started to follow the code and go deeper into the code. I did ctrl + click on Modal component in VS Code, and it opened the library code for that. I did ctrl + click on everywhere inside the library code, and finally found the prop interfaces that show what options you can send as a prop to the Modal component. Some of them was about scroll-block and zoom. I tried those options, and it worked exactly the way I want.

Reflection

I am getting more confident with this project and more interested and fascinated by it. Now it takes less time to figure out problems and fixs it. I personally prefer to work on one project longer and deeper (vs. working on many different projects). I think there are pros and cons, but for now I think I need to stick to one project and go deeper so that I can get an understanding of a whole project.
And also, I am overcoming the fear for a larger project. Chatcraft is not a huge project, but for me it is large enough, considering my programming skill level. I feel that I am growing and improving, which makes me really happy.

OSD600 - Lab08

Hyunjin Shin (Jin) — Thu, 14 Nov 2024 05:44:17 +0000

Link to Action
Link to PR I opened for testing to my partner's repo

Description

This post is about lab 08 for OSD600 course at Seneca College. This week, we learned CI(Continuous Integration). We integrated our testing into github workflow by setting them in .yml file.

Reflection

Q. How did you set up your GitHub Actions CI Workflow? What did the YAML for this workflow look like?

This is my .yml file:


name: codemage - ci

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

jobs:
  build:

    runs-on: ubuntu-latest
    strategy:
      matrix:
        python-version: ["3.12"]

    steps:
    - uses: actions/checkout@v4
    - name: Set up Python ${{ matrix.python-version }}
      uses: actions/setup-python@v3
      with:
        python-version: ${{ matrix.python-version }}
    - name: Install Poetry
      run: |
        curl -sSL https://install.python-poetry.org | python3 -
        export PATH="$HOME/.local/bin:$PATH"
    - name: Install dependencies
      run: |
        poetry install
    - name: Test with pytest
      run: |
        poetry run pytest

When writing a letter, it's always difficut to start the fisrt sentence. Your brain go blank like "how should I start?", but after that, it's not too hard. Likewise, when I start writing a setting file or setting up an app, the first set-up is always harder. However, github provides the templates so I used them. With the template, it was not too hard.

yaml file looks to me like a json file without curly brakets and double-quotes. the foramt of yaml is intuitive and easy to understand, but the github action commands(or options) are not familiar yet.

Q.How did your partner's repo and testing setup differ from yours? What was it like writing tests for a project you didn't create?

She and I both used pytest; however, the testing code style was very different.
For example:

# Partner's Test code
def test_generate_comments_no_api_key(test_parameters):
    """
    Test that the function raises an error if no API key is provided or found
    """
    file_path, content = test_parameters

    with pytest.raises(RuntimeError, match="API key must be provided"):
        generate_comments(file_path, content, None, None, None, None, False)

This is her test code style

# my test code.
class TestLoadConfig:
    @patch("os.path.exists")
    @patch("toml.load")
    def test_load_config_file_exists(self, mock_toml_load, mock_os_exists):
        # Simulate that the file exists
        mock_os_exists.return_value = True

        # Simulate the contents of the file
        mock_toml_load.return_value = {
            "language": "Python",
            "OPENROUTER_API_KEY": "mock_openrouter_api_key",
        }

        # Call load_config function
        config = load_config()

        # Assertions
        mock_os_exists.assert_called_once_with(os.path.expanduser("~/.codemage-config.toml"))
        mock_toml_load.assert_called_once_with(os.path.expanduser("~/.codemage-config.toml"))
        assert config == {"language": "Python", "OPENROUTER_API_KEY": "mock_openrouter_api_key"}

    @patch("os.path.exists")
    def test_load_config_file_not_exists(self, mock_os_exists):
        # Simulate that the file does not exist
        mock_os_exists.return_value = False

        # Call the function under test
        config = load_config()

        # Assertions
        mock_os_exists.assert_called_once_with(os.path.expanduser("~/.codemage-config.toml"))
        assert config == {}

There are some parts that have the same style, but some of them are very different although we use the same test framework. So I asked ChatGPT, and it says there are a few different styles to support flexibility for various test cases.

function-based tests
class-based tests

I used class-based tests and she used function-based tests.

Q. What do you think of CI now that you've set it up for yourself?

My first impression is that it's so cool. Second, I think it's really good safety step. What often happens while working on a project is you fix one part and you are so happy and want to go to bed asap and have a good sleep, so you forget to test the code, and just push it to the repo. If you are working with others, this could be a disaster. And this CI prevents this mistake.

OSD600 - lab 07

Hyunjin Shin (Jin) — Fri, 08 Nov 2024 17:00:31 +0000

Link to Repo
Link to commit

Description

This post is about lab 07 for OSD600 course at Seneca College. This week we learned how to test our project. We learned about unit test, e2e(end to end), and integration test.

Progress

First, I needed to decide which test framewokr I am going to use. I asked chatGPT which one is most popular and also googled it and read some people's opinion. Then, I decided to use pytest framework.
Second, I started writing test code with each class that is called on top of the function call stacks. I chose the easist one, which is load_config.py. It only contained one function.

import os
import toml
def load_config():
    # Load config file from the project's root directory
    config_path = os.path.expanduser("~/.codemage-config.toml")  # Adjust path to project root
    if os.path.exists(config_path):
        config = toml.load(config_path)
    else:
        config = {}

    return config

This function opens .toml file, and read key-value pairs. I had to mock the config file and its content.

class TestLoadConfig:
    @patch("os.path.exists")
    @patch("toml.load")
    def test_load_config_file_exists(self, mock_toml_load, mock_os_exists):
        # Simulate that the file exists
        mock_os_exists.return_value = True

        # Simulate the contents of the file
        mock_toml_load.return_value = {
            "language": "Python",
            "OPENROUTER_API_KEY": "mock_openrouter_api_key",
        }

        # Call load_config function
        config = load_config()

        # Assertions
        mock_os_exists.assert_called_once_with(os.path.expanduser("~/.codemage-config.toml"))
        mock_toml_load.assert_called_once_with(os.path.expanduser("~/.codemage-config.toml"))
        assert config == {"language": "Python", "OPENROUTER_API_KEY": "mock_openrouter_api_key"}

I used @patch to mock the file, file status(exists or not), and the content. Then I checked if the file is called with the path and if file content is correct.

Third, I tested Api class. Since this is also independent and called on the top of the function stack.


class Api:
    def __init__(self, model, config):
        self.supported_model = ["groq", "openrouter"]
        self.model = model if model is not None else "openrouter"

        if self.model not in self.supported_model:
            sys.exit(f"{self.model} is not suppored. Model Supported: {self.supported_model}")

        # default api_url and api_model
        self.api_url = "https://openrouter.ai/api/v1"
        self.api_model = "sao10k/l3-euryale-70b"
        self.api_key = os.getenv("OPENROUTER_API_KEY") or config.get("OPENROUTER_API_KEY")

        # api_url and api_model when the provider is groq
        if self.model == "groq":
            self.api_url = "https://api.groq.com/openai/v1"
            self.api_model = "llama3-8b-8192"
            self.api_key = os.getenv("GROQ_API_KEY") or config.get("GROQ_API_KEY")

    def call_api(self, target_lang, code, stream_flag=False):
        client = OpenAI(
            base_url=self.api_url,
            api_key=self.api_key,
        )

        completion = client.chat.completions.create(
            extra_headers={},
            model=self.api_model,
            messages=[
                {
                    "role": "system",
                    "content": "only display the code without any explanation",
                },
                {
                    "role": "user",
                    "content": f"translate this to {target_lang} language: {code}",
                },
            ],
            stream=stream_flag,
        )

        return completion

I tested the constructor first and then I tested the method call_api. Testing constructor was not difficult. I just needed to make a mock_config, and mock_args. Testing the method was pretty tough. I had to mock the response object.

class TestApiWithEnv:
    @pytest.fixture
    def mock_config(self):
        return {
            "OPENROUTER_API_KEY": "fake_openrouter_api_key_from_toml",
            "GROQ_API_KEY": "fake_groq_api_key",
        }

    # Mock OpenAI response
    def mock_api_call(self, *args, **kwargs):
        # Return a mock response object with a `choices` attribute
        mock_response = MagicMock()
        mock_response.choices = [{"message": {"content": "Translated code"}}]
        return mock_response

    # Test when model is supported
    @patch.dict(
        os.environ,
        {
            "OPENROUTER_API_KEY": "fake_api_key_from_env",
            "GROQ_API_KEY": "fake_groq_api_key_from_env",
        },
    )
    @patch("code_mage.api.OpenAI")
    def test_api_with_openrouter(self, mock_openai_class):
        # Mock the OpenAI client and its methods
        mock_client = MagicMock()

        # When the code create OpenAI class inside call_api(), it's replaced by mock_openai_class
        mock_openai_class.return_value = mock_client
        mock_client.chat.completions.create = MagicMock(return_value=self.mock_api_call())

        # Create an instance of the Api with a supported model
        api = Api(model="openrouter", config={})

        # Simulate an API call
        response = api.call_api(target_lang="python", code="some_code")

        # Check if the API call was made with the expected arguments
        mock_client.chat.completions.create.assert_called_once_with(
            extra_headers={},
            model="sao10k/l3-euryale-70b",
            messages=[
                {"role": "system", "content": "only display the code without any explanation"},
                {"role": "user", "content": "translate this to python language: some_code"},
            ],
            stream=False,
        )

        # Assert the response content
        assert response.choices[0]["message"]["content"] == "Translated code"

Fortunately, there is a way to mock api call provided. I used

@patch("code_mage.api.OpenAI")

This is one of my Test codes for Api Class.

class TestApiWithEnv:
    @pytest.fixture
    def mock_config(self):
        return {
            "OPENROUTER_API_KEY": "fake_openrouter_api_key_from_toml",
            "GROQ_API_KEY": "fake_groq_api_key",
        }

    # Mock OpenAI response
    def mock_api_call(self, *args, **kwargs):
        # Return a mock response object with a `choices` attribute
        mock_response = MagicMock()
        mock_response.choices = [{"message": {"content": "Translated code"}}]
        return mock_response

    # Test when model is supported
    @patch.dict(
        os.environ,
        {
            "OPENROUTER_API_KEY": "fake_api_key_from_env",
            "GROQ_API_KEY": "fake_groq_api_key_from_env",
        },
    )
    @patch("code_mage.api.OpenAI")
    def test_api_with_openrouter(self, mock_openai_class):
        # Mock the OpenAI client and its methods
        mock_client = MagicMock()

        # When the code create OpenAI class inside call_api(), it's replaced by mock_openai_class
        mock_openai_class.return_value = mock_client
        mock_client.chat.completions.create = MagicMock(return_value=self.mock_api_call())

        # Create an instance of the Api with a supported model
        api = Api(model="openrouter", config={})

        # Simulate an API call
        response = api.call_api(target_lang="python", code="some_code")

        # Check if the API call was made with the expected arguments
        mock_client.chat.completions.create.assert_called_once_with(
            extra_headers={},
            model="sao10k/l3-euryale-70b",
            messages=[
                {"role": "system", "content": "only display the code without any explanation"},
                {"role": "user", "content": "translate this to python language: some_code"},
            ],
            stream=False,
        )

        # Assert the response content
        assert response.choices[0]["message"]["content"] == "Translated code"

I used ChatGPT; it gave me good hints, but didn't work well, I had to make some changes and it worked. If I am being honest, I am still confused how it works, but it looks like it tests the code as it should. I think I need to study more to fully understand and write test code.

Fourth, the most difficult part was testing Translator class. It calls other functions that requires mock environments such as openeing a file from file system and calling api.

This is my test code for translate() function in Translator class:

class TestTranslator:
    @pytest.fixture
    def mock_args(self):
        """Fixture for simulating command-line arguments."""
        return Mock(language=None, model=None, stream=False, token_usage=False, output=None)

    def mock_api_call(self, *args, **kwargs):
        mock_response = MagicMock()
        mock_response.choices = [{"message": {"content": "Translated code"}}]
        return mock_response

    @patch("builtins.open", new_callable=MagicMock)  # Mock open
    @patch("code_mage.translator.Api")  # Mock Api class
    @patch.object(Translator, "_Translator__get_output_filename", return_value="translated_test.py")
    def test_translate(self, mock_get_output_filename, mock_api, mock_open, mock_args):
        mock_config = {"api_key": "fake_api_key"}

        # Initialize Translator instance
        translator = Translator(mock_args, mock_config)

        mock_file = MagicMock()
        mock_open.return_value = mock_file

        # Mock the Api's call_api method
        mock_api_instance = MagicMock()
        mock_api.return_value = mock_api_instance
        mock_api_instance.chat.completions.create = MagicMock(return_value=self.mock_api_call())

        translator.translate("./example/test.js")

        assert mock_api_instance.chat.completions.create.return_value.choices == [
            {"message": {"content": "Translated code"}}
        ]

        mock_open.assert_any_call("./example/test.js", "r")
        mock_open.assert_any_call("translated_test.py", "w")

What was challenging was that I didn't understand how it knows which mock is for api_call() and which mock is for open() when I made two Mock objects. I tested it by changing the order of arguments, and the name of arguments. I think it maps @patch result to the arguments by order and name. I don't understand how exactly it works, but I learned that the order and name matters and I should make sure that they followes the order in which @patch is called and the name.

Lastly, I couldn't test main function as it calls many other functions which require mock enviornment.

Testing the whole main function would make test too complicated. However, I've already tested all the other functions except for arguments parser. Therefore, I refactored the argument-parsing logic. I made a new function for parsing arguements and imported it in the main function. I believe this can to some degree ensure that all the logics of the tool covered, although testing for everything together from start to end is not covered.

This is a part of my testing code for argument parser.


@pytest.fixture
def mock_config():
    # A mock configuration that mimics the structure of the actual config dictionary.
    return {
        "language": "python",
        "output": "result",
        "token_usage": False,
        "model": "groq",
        "stream": False,
    }


# Test with no arguments
def test_arg_parser_no_args(mock_config):
    with patch("sys.argv", ["code_mage.py"]):
        args = arg_parser(mock_config)
        assert args.source_files == []
        assert args.language == "python"  # default from mock_config
        assert args.output == "result"  # default from mock_config
        assert args.token_usage is False
        assert args.model == "groq"
        assert args.stream is False


# Test with source file
def test_arg_parser_with_source_file(mock_config):
    with patch("sys.argv", ["code_mage.py", "example.js"]):
        args = arg_parser(mock_config)
        assert args.source_files == ["example.js"]
        assert args.language == "python"
        assert args.output == "result"

Reflection

At first, I thought that it is going to be easy. However, it was really tough, especially for mocking object, .env, file open(), http request, and http response. It also was kind of fun. From this lab, I learned how to test code thoroughly and how important it is to modulize the code so that I can test the code in a isolated environment. It's not perfect but at least it guarantees a certain level of robustness.

Q1. Which testing framework/tools did you choose? Why did you choose them? Provide links to each tool and briefly introduce them.

I chose pytest; but I also used some of the methods provided by unittest, which is provided by python as a default.

How did you set them up in your project? Be detailed so that other developers could read your blog and get some idea how to do the same.

install `pytest` if not installed yet.

poetry add --dev pytest

Running `pytest`

This command will run files named test_*.py or *_test.py

poetry run pytest

For more detailed test result, you can use -v option

poetry run pytest -v

for more detailed test information

poetry run pytest -vv

Writing TestCode

You should name your test class and method as follows:

Class name starts with `Test`

Method name starts with `test_`

class TestMyFeature: # class name
    def test_feature_functionality: # method name

Q3. How did you handle LLM response mocking?

In the progress section, I explained about this, so I will skip here.

Q4. What did you learn while writing your test cases? Did you have any "aha!" moments or get stuck?

What I learned is how important it is to design the code strutures. I learend that good design pattern is not just for making code look better and reusability but also for testing.

Q5. Did your tests uncover any interesting bugs or edge cases?

My test doesn't cover some parts such as streaming out response object and testing from start to zero like total integration test.

Q6. What did you learn from this process? Had you ever done testing before? Do you think you'll do testing on projects in the future?

My first experience with testing was in my second semester. I took the software testing course that was newly introduced. I was the first student in seneca who took the course. At first, I really didn't like it. I thought that it was a waste of time. test code was 4~5 times larger and took 4~5 times more than writing the logic of the program. It was grinding. However, now I kind of like it. When I see the green colored results pass, I feel really good. Making mock environment is still hard and somewhat stressful, but thinking about edge cases is actually really fun. It is kind of similar to Probability and Statistics in Math like thinking about all the possible cases and cover it.

OSD600 - lab06

Hyunjin Shin (Jin) — Fri, 01 Nov 2024 04:31:44 +0000

Link to repo
Link to commit

Description

This post is about lab 06 for OSD600 course at Seneca College. This week we learned Static Analysis Tooling such as Formatter(prettier, Ruff) and Linter(Black, Ruff, ESLint). Using those tools, we made our code more consistent regardless of where it is written or who writes it. And also, we practiced git commands such as git merge and git rebase

Tasks

Q1. Which tools did you choose? Why did you choose them? Provide links to each tool and briefly introduce them.

I use Ruff for both formatter and linter. When I was reading the instruction for this lab, I found that Ruff can be used for both formatter and linter. I thought that I would be more conveninent and efficient to use one tool for the people who would work on this project as well as for myself. Ruff is orginally maded for formatter, but then its features expanded to Linter. The upside to this tool is that it's really faster and also compatable with other linters such as Black.

Q2. How did you set them up in your project? Be detailed so that other developers could read your blog and get some idea how to do the same.

I've created my own organized notes on GitHub to document what I've learned, as the content is quite extensive. I will also share the link.

Install Ruff

Include the following codes:

// pyproject.toml file
[tool.poetry.group.dev.dependencies]
ruff = "^0.7.1"

Run the following command:

poetry install

Ruff Formatter

Formatter Configuration

In the pyproject.toml file, configure the Ruff formatter as the following example:

[tool.ruff]
line-length = 100
exclude = [
    "tests/*",          # Ignore all files in the tests directory
    "docs/*",           # Ignore all files in the docs directory
    "*.pyc",            # Ignore all compiled Python files
    "migrations/*",     # Ignore all files in the migrations directory
    "example/*",
    "__pycache__/*",
    "*.env",
    "**/*.md",
]

[tool.ruff.format]
quote-style = "double"
indent-style = "tab"
docstring-code-format = true
docstring-code-line-length = 20

docstring-code-format = true : This will format code that starts with >>> inside """ ... """

For example, If docstring-code-format = true option is applied to the following code,

def calculate_square(n):
    """
    Calculate the square of a number.

    Example:
        >>> result = calculate_square(5)
        >>> print(result)  # Outputs 25
        >>> long_calculation = calculate_square(10) + calculate_square(20) + calculate_square(30)
        >>> print(long_calculation)  # Outputs 1300
    """
    return n ** 2

It will become formatted as follows:

def calculate_square(n):
    """
    Calculate the square of a number.

    Example:
        >>> result = calculate_square(5)
        >>> print(result)  # Outputs 25
        >>> long_calculation = (
        ...     calculate_square(10)
        ...     + calculate_square(20)
        ...     + calculate_square(30)
        ... )
        >>> print(long_calculation)  # Outputs 1300
    """
    return n ** 2

Docstring code can be executed. Refer to doctest Docs

Run the `Ruff formatter`

poetry run ruff format .

Ruff Linter

Linter Configuration

Since I am using ruff formatter together, I only need a bit more configuration settings.

[tool.ruff.lint]
select = ["E4", "E7", "E9", "F", "F841"]

I asekd ChatGPT what those are for.

E4: This code typically corresponds to various syntax errors or issues related to the structure of your code. It may include checks for problems such as unclosed parentheses, braces, or other syntax-related issues.

E7: This code is generally related to type errors or issues involving type annotations. It may indicate that there are inconsistencies or issues with type hints in your code, which can lead to confusion or runtime errors.

E9: This error code often relates to import errors or issues with the organization of your import statements. It can flag problems such as unused imports or circular imports that can complicate module loading.

F: This category usually encompasses formatting issues. It can include a variety of stylistic checks, such as line length, whitespace usage, and general adherence to PEP 8 (the Python style guide).

F841: This code specifically checks for assigned variables that are never used.

We could also do:

[tool.ruff.lint.per-file-ignores]
"__init__.py" = ["E402"]
"**/{tests,docs,tools}/*" = ["E402"]

I asked ChatGPT what those configurations are for:

ChatGPT => The E402 error, which means "module level import not at top of file," occurs when import statements are not placed at the top of a Python file. According to PEP 8, the Python style guide, all imports should be at the top of the file, right after any module comments and docstrings but before any other code.

Here are common scenarios where E402 might happen:

1. Conditional Imports:

if some_condition:
    import os  # E402 error: Import is not at the top level of the file

2. Delayed Imports for Performance Reasons:

Sometimes, you might place an import further down in the file to avoid unnecessary imports until they are actually needed, such as in a function:

def some_function():
    import numpy as np  # E402 error: Import is inside a function
    return np.array([1, 2, 3])

In those scenarios, you can use the configuration for the files that need to ingore the rules.

How to skip linting some pieces of code in a file

1. Ignore Specific Lines

You can add an # noqa comment at the end of a line to ignore linting on that specific line. To ignore specific rules, specify the rule codes:

if self.model is "groq":  # noqa: F632

In this example, Ruff will ignore the F632 warning on that line.

2. Ignore a Block of Code

To ignore a block of code, wrap the code with # noqa: BEGIN and # noqa: END:

# noqa: BEGIN
# This code block will be ignored by the linter
if some_condition:
    import sys  # Normally flagged as E402
# noqa: END

3. Ignore Rules for the Whole File

To ignore specific rules for the entire file, add a comment at the top of the file listing the rule codes to ignore:

# ruff: noqa: E402, F632

This approach is useful if the whole file has patterns that would otherwise be flagged by Ruff, such as non-top-level imports or value comparisons using is

Run the `Ruff Linter`

poetry run ruff check .

Q3. What did the tools find in your code? Did you have to fix a lot of issues?

Python is already a bit strict when it comes to its formatting such as indentation or line changes, formatter didn't do a lot; only in the main function it changed quite a bit. However, Linter actually caught some syntax errors that I missed.

Before Formatter in `codeMage.py` file

After Formatter

Linter found

Q4.How did you get the tools to run from the command line?

I think I answered this question above, and since the post is getting too long, I will not make an redunant writing. Sometimes when the post is too long, Dev.to seems to get some bugs. Some part of the content disappears.

Q5. How did you integrate the tools with your editor/IDE?

These are the steps that I followed. I contained them in CONTRIBUTING.md in my project

1. Python Extension for VS Code (if not already installed):

The Python extension for VS Code is needed to enable Python-specific features, such as linting and formatting integration. Open VS Code, go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS),search for "Python" by Microsoft and install it if you haven’t already.

2. Ruff VS Code Extension:

Install the Ruff extension in VS Code to enable real-time linting and formatting.
In the Extensions view, search for "Ruff," and install the extension.

Manually Running Ruff Formatter and Linter

Run the `Ruff formatter` with the following command in the root directory

poetry run ruff format .

Run the `Ruff Linter` with the following command in the root directory

poetry run ruff check .

Q6. What did you learn from the process?

When I looked around gitHub and saw all these files, I didn't like them. It's because I didn't know them and I didn't need the necessity. As I learned it now and know how to use it, I love them. It's really useful and helpful. Especially when you are working with Dynamically Typed Language, it is so helpful. I think I will use these tools every time I start a new project, from now on. It's so cool

Hacktoberfest - Week 5

Hyunjin Shin (Jin) — Tue, 29 Oct 2024 22:43:09 +0000

Links

Repo that I worked on.
Issue I fixed.
PR I opened.

Process

For this last PR, I really wanted to contribute to a larger project. I started to read other classmates' blogs, the issues they worked on, and their contributions. I found out that some of the classmates made a PR to this repo, and also during the classes, Professor introduced this project; so I was interested in this. I started to look around the issues in this repo, and I found this issue. I thought that I could fix this issue. Then, I started to read the code. It was very complicated to me. I only had little knowledge about react and typescript. And the structure is very well organized in a object-oriented programming way. However, sometimes I feel like when codes are too well organized, it feels a little bit like a maze. It took me many hours to understand where I should look into in order to fix the problem. Finally, I found the code that I need to change. I made changes and did some experiments and fixed it.

Challenges

Whenever I read code of a large project, it takes me a very long time to get just a little understanding. Therefore, it was not easy to get started.

I wasn't familiar with the technologies used in the project. I wasn't familiar with React, Typescript, Chakra UI, and Dexie; so I had to study or search whenever I encounter a piece of code that I don't understand at all. Especially for Chakra UI, I wanted to add padding-bottom but the syntax was very different, I went to the offical Docs page and spent quite a bit of time, for Chakra UI, ChatGPT wasn't helpful at all.

What I gained from this experience

First, I love this project, The code is really clean, and well organized. And it uses the tech stacks that I want to learn. and the UI is really neat and modern

Second, just reading the code many hours (not because I intended, but because I had to find where I should fix it), I learned a lot about React. It was amazing that I just read the code and learned a lot. It was much more effective than watching React lecture on Youtube. Of course it's because I already had a bit of knowledge of React. Nonetheless, I didn't expect that I would learn a lot by just reading code. When I have more time, I am going to read the code of this Chatcraft repo, and I will try to make something similar to this. It's beautiful app

Third, I overcame the fear of working on a large project. I wouldn't say that I've completely overcome the fear; however, at least I tried it, and made some PRs. It's still really daunting to read and work on large project, but I think I learned that they are not invincible monster. They are mortal(just metaphor; I mean, touchable or fixable)

Hacktoberfest Recap

I think I didn't make any PR that can be counted on Hacktoberfest, but I don't care much. I learned a lot from this experience, and that's all I wanted and needed. Even if I get lower marks due to uncounted PRs, I am okay(unless I fail this course; as I could have Visa problem). I am glad that I was forced to step out of my comfort zone. If the Professor is reading this post, I want to thank you. I sincerely appreciate for pushing me out of my comfort zone, it was tough and I was stressed out but I learned a lot. Now I know how to participate in Open Source Project, I will keep looking around Open Source Projects and read them and work on them.

Hacktoberfest - Week 4

Hyunjin Shin (Jin) — Fri, 25 Oct 2024 16:26:33 +0000

Links

Repo that I worked on
Issue
Pull Request that I opened

Process

I have worked on a huge repo(ladybird) and miserably failed on fixing it. I was deeply frustrated, my neck, back, eyes sored from long sitting and watching screen, and the due date was comming. I really wanted to make a PR to a huge repo, but I failed. As a result, I started looking for a smaller and easier repo that I can fix. I found one issue that I think I can easily fix. It was just fixing the password checker function. Previously, it couldn't properly detect the numbers in password; it could only check the number in the first character(e.g. "1abcdefg" or "2345abcd"). For example, if the password is "abc5defg" then it didn't recognize the number and will generate an error "the password should contain at least one digit". Now, it can check the numbers in any position.

Reflection

This issue was too simple and too easy for my third PR. I feel bad. I really feel bad. I really want to contribute to a larger repo. However, I think my ability is just this much. However; for the last PR for release 0.2, I will try my best to make a PR to bigger repo whether I fail or lose marks for not finishing fourth PR. My pride doesn't allow me to be satisfied with having those simple issues solved.

Hacktoberfest - Week 3(failed)

Hyunjin Shin (Jin) — Fri, 25 Oct 2024 16:04:02 +0000

Links

Repo that I worked on
Issue 1
Issue 2

Process

I was working on Ladybird for a long long time. The issue at first looked easy to fix. It was to fix a bug that legend element is not displayed on the top left corner of the top border line of fieldset element. I found the code that handles the css of legend and fieldset element. I could make it look similar to the proper legend element on chrome or other browers. However, I felt like this is the right way to fix and the problem comes frome somewhere else. In addtion, it didn't work exactly the way it should. Therefore, I didn't make a PR for this.

Secondly, I worked on a similar issue on this repo. It was that when an element has display: flex attribute applied to it, a:hover attribute doesn't work. However, with display: block or without display attribute, it works fine. For this issue, I couldn't even find the place where the code for this issue exists. I feel like those two issues have similar casues, but I couldn't figure out.

Hacktoberfest - Week 2

Hyunjin Shin (Jin) — Sat, 12 Oct 2024 01:21:34 +0000

Links

Repo that I worked on
Issue
Pull Request that I opened

Process

I was searching for issues with keyward good first issue. And I found this Repo. It was a project that provides useful tools for web development. I think the project has started very recently, so it only had one module of formatting phone numbers. I thought that this project is really interesting, and it will be very useful. And there was one issue in this project. The issue was to make the tool support international phone numbers; currently it only supported one type of format. I left a comment asking if I can work on the issue, and then started working on it. The project used jQuery, which I had no experience of at all. Therefore, I had to study jQuery first. I studied jQuery only as much as I need to understand the project. After that, I thought about the logic of how to convert different types of international phone numbers. The problem was, I wasn't sure about the use cases. For example, "Do users provide what country the phone number is for?" or "Should the program figure it out by the entered country code?" I wrote the code with the assumpution that the user select country-code with dropdown box, since this is the most common use case as far as I experienced. I started writing codes, but the logic was really difficult. I had to use regex, and also the maintainer wanted it format the phone number as users type them. I searched docs for regex and used AI for some hints. Finally, I could make it work. Currently the tool now supports number for US, UK, FR, KR. However, following the same logic, they can easily add supports for more international phone numbers. There was a test code, so I also needed to write a test code for my changes. It used chai and jsdom dependencies for testing, so I also had to study about them a bit. Foutunately, I finished writing my code and test code, and the test successfully passed. Then, I opened pull request. I mentioned that I wrote the code assuming that the user select the country-code for their phone number.

Reflection

I was glad that I contributed to a project. However, today I had a OSD600 course in the morning. And other students talked about what repo they worked on and what issues they handled. They worked on a huge project that looks very difficult, and they got their PRs accepted and merged. That gave me imposter syndrom. I was quite depressed by how bad and unimpressive my PR and contributions are. However, at the same time, that was really motivating. I thought that I should also try to contribute to a huge project. And there was a guy Peter. He introduced his unsuccessful attempt to contribute to VSCode. Although he didn't succeed, he tried it. I thought that it was very brave and cool. That was really encouraging and impressive. For the next PRs, I will try to contribute to a huge project, whether I fail or not. I think even though I fail, it will be a great experience and I will learn a lot from the failure.

DEV Community: Hyunjin Shin (Jin)

Project Chronicles - Release 0.4 - Final

Links

Description

Progress

ModelsSettings Page after change on Desktop

Newly Added DataControls Page on Desktop

ModelsSettings Page after change on Mobile Device(iPhone 15 Pro)

Newly Added DataControls Page on Mobile Device(iPhone 15 Pro)

Reflection

Project Chronicles - Release 0.4 - part 2

Links

Description

Progress

ChatGPT Settings page

Project Chronicles - Release 0.4

Description

Progress

OSD600 - Lab09

Description

Reflection

- Q1. Which release tool and package registry did you choose? Provide links to everything you mention.

- Q2. What was the process for creating a release? Be detailed so that other developers could read your blog and get some idea how to do the same.

- Q3. What did you learn while doing your release? Did you have any "aha!" moments or get stuck?

- Q4. How much did you have to alter your code, files, build, etc. to use the chosen package format and registry?

- Q5. How did the User Testing session with your partner go? Describe what it was like, where they got stuck, and how you corrected the problems.

- Q6. How do users install and use your project now that it has been released? Provide links and some instructions.

Project Chronicles - Release 0.3

Links

Repo That I worked on

Issues

Pull Requests

Description

Progress

Issue 1

How I fixed

Issue 2

How I fixed

Issue 3

How I fixed

Reflection

OSD600 - Lab08

Description

Reflection

Q. How did you set up your GitHub Actions CI Workflow? What did the YAML for this workflow look like?

Q.How did your partner's repo and testing setup differ from yours? What was it like writing tests for a project you didn't create?

Q. What do you think of CI now that you've set it up for yourself?

OSD600 - lab 07

Description

Progress

Reflection

Q1. Which testing framework/tools did you choose? Why did you choose them? Provide links to each tool and briefly introduce them.

How did you set them up in your project? Be detailed so that other developers could read your blog and get some idea how to do the same.

install pytest if not installed yet.

Running pytest

Writing TestCode

Class name starts with Test

Method name starts with test_

Q3. How did you handle LLM response mocking?

Q4. What did you learn while writing your test cases? Did you have any "aha!" moments or get stuck?

Q5. Did your tests uncover any interesting bugs or edge cases?

Q6. What did you learn from this process? Had you ever done testing before? Do you think you'll do testing on projects in the future?

OSD600 - lab06

Description

Tasks

Q1. Which tools did you choose? Why did you choose them? Provide links to each tool and briefly introduce them.

Q2. How did you set them up in your project? Be detailed so that other developers could read your blog and get some idea how to do the same.

Install Ruff

Ruff Formatter

Formatter Configuration

Run the Ruff formatter

Ruff Linter

Linter Configuration

I asekd ChatGPT what those are for.

We could also do:

I asked ChatGPT what those configurations are for:

1. Conditional Imports:

2. Delayed Imports for Performance Reasons:

How to skip linting some pieces of code in a file

1. Ignore Specific Lines

install `pytest` if not installed yet.

Running `pytest`

Class name starts with `Test`

Method name starts with `test_`

Run the `Ruff formatter`

Run the `Ruff Linter`

Before Formatter in `codeMage.py` file

Run the `Ruff formatter` with the following command in the root directory

Run the `Ruff Linter` with the following command in the root directory