DEV Community: fadingNA

Final Result

fadingNA — Sun, 08 Dec 2024 21:26:54 +0000

Previous blog posts of this series

Dare to challenge hard thing

fadingNA ・ Nov 24

#webdev

Progress on Contributions

fadingNA ・ Nov 30

#webdev

Reflection of these results

In the first post, I shared my aspirations and the challenges I anticipated into opensource projects. By the second post, I had made significant progress, not only overcoming those challenges but also discovering new insights about collaboration in open source.

Challenges

I faced many challenges in my final contributions. One of the biggest was understanding the complexities of the project codebases for DocsGPT and ChatCraft. Both are large projects, yet they are entirely different. DocsGPT uses Python on the backend and TypeScript on the frontend, while ChatCraft is purely TypeScript with the Chakra UI framework for its UI. Initially, I had no idea what I was doing—where to start, which components to focus on, or which functionalities to modify or leave untouched. Through committing back and forth and discussing with maintainers, I eventually learned which functions could be adapted and which did not need any changes.

Additionally, balancing my time between multiple courses in my final semester was tough. Despite the challenges, I managed to complete all of my pull requests except one. This remaining PR involves separating image embeddings into a vector space using the CLIP model.

GenAI eatting image from DOCX #1462

fadingNA posted on Nov 28, 2024

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
#1451

Chage from docx2txt.process to extract them manually Eatting image as Base64 | Table as HTML tag | Text for paragraph

Why was this change needed? (You can also link to an open issue here)

To using multiple vector store to retrieve correct image as paragraph order instead of zip them by docx2text.process()

Other information:
Progress the issue is now when we retrieve need to find the way to convert base64 back for AI to understand image

@dartpain let me know if this correct approach or wrong direction

View on GitHub

Although this PR is not yet complete, I am determined to continue working on it until it is finished.

On the other hand, one of my other pull requests was closed due to the large number of changes, which made it difficult to review. However, I successfully contributed to another critical PR that enabled MongoDB to efficiently handle search, sorting, and pagination for documents uploaded to the app.

Table Styling & Add search feature to backend #1442

fadingNA posted on Nov 16, 2024

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
#1440
Why was this change needed? (You can also link to an open issue here) uniform table nicely
Other information: update table styling uniformly

@manishmadan2882

View on GitHub

Moreover, I have to ingest the document by using celery worker that really interesting and challenging in the same because the process is ingest behind the backend and to be able to understand the workflow was giving me a hard time.

Conclusion

Reflecting on this journey, contributing to large open-source projects like DocsGPT and ChatCraft has been a challenging yet rewarding experience. It tested my ability to adapt, learn quickly, and collaborate effectively with the open-source community. The process of navigating complex codebases, managing multiple responsibilities, and refining my contributions through feedback has significantly enhanced my technical and problem-solving skills.

While not every pull request resulted in success, each one provided valuable lessons that have shaped me into a more confident developer. From understanding project workflows to implementing meaningful features like MongoDB search, sort, and pagination, I’ve gained insights into how impactful even small contributions can be. The unfinished CLIP model PR serves as a reminder that open-source is not just about completion but about consistent progress and persistence.

As I move forward, I am motivated to tackle more complex issues, collaborate with diverse teams, and continue giving back to the community. This experience has been a stepping stone toward my future goals, and I’m excited to apply these lessons in my upcoming opensource project contributing.

Progress on Contributions

fadingNA — Sat, 30 Nov 2024 07:14:09 +0000

Dare to challenge hard thing

fadingNA ・ Nov 24

#webdev

Progress overview

Embarking on complex opensource application projects often presents presents challenges that test one's skill and resilience. Over the past two weeks, I have contributed in several such endeavour to open my world of contributing, each offering improvement of unique ares such as embedding mode, UI styling, API request. Which is providing me huges experiences and opportunities for growth and gain techniques that I can reuse on my future application.

Chatcraft

Sometimes, the best way to grow as a software developer as I'm right now is to tackle challenges that seem overwhelming at first sight. Over past two weeks, I have been working on several pull requests as I mentioned on the first blogs above. One of (PR) for the

Migrate to Chakra V3 #752

fadingNA posted on Nov 22, 2024

Move from fork repo PR to upstream repo.
#749

@humphd @amnish04 @tarasglek

View on GitHub

First PR was short of a rollercoaster ride. This PR involves migrating the entire project to the latest version of Chakra UI, a task that has tested my skills and patience but also taught me invaluable lessons.

Sample Code

Chakra UI 3.0 using lineClamp instead noOfLines

Chakra UI 3.0 using Dialog instead of Modal

Chakra UI 3.0 using Card Objects instead of Seperate objects of Card such as CardBody , CardFooter

More you can find in each component change here

chakra-ui.com

DocsGPT

Second PR was merged couple days ago. This PR was quite similar to the first PR that we have to fix User Interface that involves around 5 components Document Table | API Table | Settings Table | BackAPI Request | Pagination dropdow.

Table Styling & Add search feature to backend #1442

fadingNA posted on Nov 16, 2024

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
#1440
Why was this change needed? (You can also link to an open issue here) uniform table nicely
Other information: update table styling uniformly

@manishmadan2882

View on GitHub

This PR focused on refining the user interface for several key components within the application, tackling issues that spanned across multiple tables and features. While the task was similar in complexity to my first PR, it presented its own set of unique challenges and learning opportunities.

Sample Code

Change from select to div to improve transition of user experience of dropdown select box position as well.

Instead of using table as a container I wrapped it up with div so I have more controlled of table

Pagination behaviour fixed when sending sort and column to filter the document

Move Pagination Component out scrollable area

I recently, submitted my third pull request (PR) which is another PR to DocsGPT project, addressing an issue where images from DOCX files were not being processed correctly. This PR involved adding support for image extraction and handling within the document processing pipeline, and also introduce new embeddings model from mpbasenet to openai/clip.

GenAI eatting image from DOCX #1462

fadingNA posted on Nov 28, 2024

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
#1451

Chage from docx2txt.process to extract them manually Eatting image as Base64 | Table as HTML tag | Text for paragraph

Why was this change needed? (You can also link to an open issue here)

To using multiple vector store to retrieve correct image as paragraph order instead of zip them by docx2text.process()

Other information:
Progress the issue is now when we retrieve need to find the way to convert base64 back for AI to understand image

@dartpain let me know if this correct approach or wrong direction

View on GitHub

For now we are testing on extension .docx only that extract core information right table , text , image and embedding them correctly to vertorstore which right position in the database.

Sample Code

Instead of using doc2text.process change to

Change Single Embedding model to Multi Modal Model

Find out more about CLIP model : https://huggingface.co/learn/cookbook/en/faiss_with_hf_datasets_and_clip

Change Embeddeing Wrapper Class to align with CLIP model

Summary

These contributions have been instrumental in advancing my skills as a software developer. Each project presented distinct challenges, from large-scale UI migrations to intricate data processing tasks, all of which required strategic planning, problem-solving, and collaboration with the open-source community. The experiences have not only deepened my technical expertise but also underscored the value of perseverance and continuous learning in the ever-evolving field of software development.

Dare to challenge hard thing

fadingNA — Sun, 24 Nov 2024 22:19:34 +0000

Planning for big contribute

In the upcoming 0.4 release, I aim to contribute to two notable open-source projects: ChatCraft.org and DocsGPT. My focus will be on addressing specific issues and implementing enhancements to improve user experience and functionality.

1. First issue ChatCraft.org: Migrating to Chakra UI V3

Issue: Migrate to Chakra V3

Pull Request: Migrate to Chakra V3

Migrate to Chakra V3 #752

fadingNA posted on Nov 22, 2024

Move from fork repo PR to upstream repo.

#749

@humphd @amnish04 @tarasglek

View on GitHub

Issue:

Migrate to Chakra V3 #701

Amnish04 posted on Oct 28, 2024

Recently, Chakra rolled out a new major version with lots of new components and updates styles. https://www.chakra-ui.com/blog/00-announcing-v3

It would be awesome to upgrade and give ChatCraft a much deserved modern look :D

Would also be interesting to explore the new components and discover places where they could be used for a better UX.

Maybe we should wait for a few patch releases before upgrading though.

View on GitHub

Objective: Upgrade the ChatCraft.org interface to Chakra UI V3 to leverage new components and updated styles, providing a modern and consistent user experience.

Approach

Note : I have opened pull request but due to the big change and un review the code change so I have to plan ahead what to do and split into smaller pull request.

Objective: Update the project dependencies to Chakra UI version 3.0.
Details:
- Modify the package.json file to include the latest Chakra UI version.
- Update any related configurations required for the new version.

Objective: Eliminate hooks and components deprecated in Chakra UI 3.0.
Details:
- Identify and remove deprecated items.
- Replace them with updated counterparts as per the Chakra UI migration guide.

Objective: Implement the ChatBase component, comprising the Header and Sidebar.
Details:
- Develop the foundational ChatBase layout.
- Ensure the application remains functional with this new structure.

Objective: Integrate essential components like Messages, Prompt Form, and Send Button.
Details:
- Develop and incorporate these core components.
- Ensure alignment with Chakra UI 3.0 standards.

Objective: Refine the styling of the newly added components.
Details:
- Adjust CSS and Chakra UI style props.
- Ensure the components achieve the desired appearance and responsiveness.

Objective: Update the Settings modal to be compatible with Chakra UI 3.0.
Details:
- Revise the modal's structure and styling.
- Test to ensure compatibility and proper functionality.

Objective: Ensure the application is responsive and mobile-friendly.
Details:
- Apply the above changes to the mobile component.
- Make adjustments to ensure mobile compatibility.

Result

Upgrading to Chakra UI V3 will enhance the visual appeal and usability of ChatCraft.org, making it more engaging for users.

2. Second issue DocsGPT: Frontend UI change on setting/Document & setting/APIKey

Issue: Bug Report:

🐛 Bug Report: Imperfections in Settings/Document table #1440

ManishMadan2882 posted on Nov 14, 2024

📜 Description

The pagination tab at the bottom should not move depending on the number of rows
The search currently, only searches among the docs rendered in a page
Remove type row from the table
If one of the docs is syncable, then there is inconsistency in the delete row.

👟 Reproduction steps

Go to settings > documents Search a document, try inserting few documents The pagination tab shifts if there variable number of docs per page Search a document which is not there on a page but exists

👍 Expected behavior

The pagination tab should be placed somewhere below the maximum height of the table or at the bottom of the page
/sources/paginated endpoint should also be filtered based on the document name, so that the documents can be searched completely
Since all docs are private, the type row can be removed
The delete buttons should align uniformly.

👎 Actual Behavior with Screenshots

💻 Operating system

Linux

What browsers are you seeing the problem on?

Chrome

🤖 What development environment are you experiencing this bug on?

Docker

🔒 Did you set the correct environment variables in the right path? List the environment variable names (not values please!)

Yes

📃 Provide any additional context for the Bug.

No response

📖 Relevant log output

No response

👀 Have you spent some time to check if this bug has been raised before?

[X] I checked and didn't find similar issue

🔗 Are you willing to submit PR?

None

🧑‍⚖️ Code of Conduct

[X] I agree to follow this project's Code of Conduct

View on GitHub

Pull Request: Table Styling & Add search feature to backend:

Table Styling & Add search feature to backend #1442

fadingNA posted on Nov 16, 2024

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
#1440
Why was this change needed? (You can also link to an open issue here) uniform table nicely
Other information: update table styling uniformly

@manishmadan2882

View on GitHub

Objective:

Improve the document table in DocsGPT by addressing UI imperfections and adding a search feature to enhance user experience.

Approach

Objective: Examine the document table to pinpoint imperfections, such as pagination inconsistencies and search limitations.
Details:
- Investigate on Document components
- Investigate on APIKey components

Objective: Modify the table’s design to ensure a consistent and user-friendly interface.
Details:
- Change from css styling to tailwind css for more controllable and familiar of my knowledge

Result

Enhancing the document table’s functionality will streamline user interactions, making it easier to manage and locate documents within DocsGPT.

3. DocsGPT: Enabling Image Processing Capabilities

Issue: Bug Report:

🚀 Feature Allow our AI's to eat images. #1451

fadingNA posted on Nov 23, 2024

🔖 Feature description

@dartpain Basically allow our AI's to eat images. good place to start is just open ai llms, even docsgpt free service should work

🎤 Why is this feature needed ?

Accept image and encoded base64

Maybe user wants to send a message with an image when chatting with AI

✌️ How do you aim to achieve this?

When a source has an image, for example there is a link (publicly accessible) in markdown file that was ingested, we can pass it to llm inside classic rag retriever when its generating an answer.

🔄️ Additional Information

No response

👀 Have you spent some time to check if this feature request has been raised before?

[X] I checked and didn't find similar issue

Are you willing to submit PR?

Yes I am willing to submit a PR!

View on GitHub

Objective

Extend DocsGPT’s capabilities to process images, allowing users to include images in their interactions with the AI.

Approach

Objective: Add the ability for DocsGPT to handle and understand images, making it more useful for tasks that include pictures.
Details:
- Look into how we can make DocsGPT work with images and ensure it fits well with the current AI models.
- Build a system to accept and process images, including ones encoded in base64.
- Test everything to make sure DocsGPT can understand images and respond correctly.
- Update the user guide to show how to use the new image feature easily.

Result

LLM_Completion able to eat image from base64 or url provided and return back the response to user along with prompt. In addition, validation the limit token per llm requirement and cost.

Conclusion

By focusing on these targeted contributions, I aim to enhance the functionality and user experience of ChatCraft.org and DocsGPT. This plan sets clear goals for my next contributions, for that approaches above quite teaching me a few things, if we have a good plan before develop we can reduce significant of time to achieve the requirement.

DocGPT - Pagination & Multiple Files upload

fadingNA — Mon, 18 Nov 2024 03:13:25 +0000

Hi everyone,

In my recent contributions to the DocsGPT project, I addressed two key areas: implementing pagination in the Settings > Documents section and resolving an error related to uploading multiple files.

Implementing Pagination in Settings > Documents

The Settings > Documents section in DocsGPT lacked pagination, leading to a cluttered interface when numerous documents were present. To enhance user experience, I introduced pagination, allowing users to navigate through documents more efficiently.

Process
1. Understanding the Requirement: I reviewed the feature request in Issue-147 , which highlighted the need for pagination and referenced a Figma design for guidance.
2. Backend Modifications: I updated the /api/combine endpoint to accept a pageNumber query parameter, enabling the retrieval of documents in paginated form.
3. Frontend Integration: I implemented pagination controls in the frontend, aligning with the provided Figma design to ensure a cohesive user interface.
4. Testing: I conducted thorough testing to verify that pagination functioned correctly across various scenarios, including different document counts and page navigations.

Outcome

The implementation was successful, resulting in a more organized and user-friendly document management interface. The changes were merged into the main branch via Pull Request
Pagination #1419
fadingNA posted on Nov 07, 2024
- What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
New feature add pagination to Setting / Document for user that have uploaded multiple document have pagination to align the documents
- Why was this change needed? (You can also link to an open issue here)
- #1417
@manishmadan2882 thanks for this.
View on GitHub

Second Pull Request

Resolving Multiple File Upload Error

Users encountered errors when attempting to upload multiple files simultaneously in the Settings > Documents section. The system would become unresponsive, and errors were logged in the backend.

Process
1. Issue Identification: I examined Issue-1420, which detailed the error encountered during multiple file uploads.
2. Root Cause Analysis: I discovered that the backend was not handling multiple file uploads correctly, leading to server errors and unresponsive behavior.
3. Implementing the Fix: I modified the upload route to process files individually rather than in bulk. This change ensured that each file was handled properly, preventing server overload.
4. Testing: I tested the updated upload functionality with various file types and sizes to confirm that multiple files could be uploaded without issues.

Outcome

The fix resolved the multiple file upload error, enhancing the reliability of the document upload feature. The solution was merged into the main branch via Pull Request

upload routes fix for multiple upload #1422

fadingNA posted on Nov 08, 2024

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...) Fix error on the client-side when send file the formData the server-side throwing code 500 when upload multiple files
Why was this change needed? (You can also link to an open issue here) to be able upload multiple file
Other information:
#1420

View on GitHub

Lessons Learned

Importance of User Experience: Implementing pagination significantly improved the usability of the document management interface, highlighting the impact of thoughtful UI design.
Robust Error Handling: Ensuring that the system can gracefully handle multiple file uploads is crucial for maintaining stability and providing a seamless user experience.
Collaborative Development: Engaging with the community through issue discussions and pull requests facilitated effective problem-solving and knowledge sharing.
These contributions have enhanced the functionality and user experience of DocsGPT, demonstrating the value of addressing both feature enhancements and bug fixes in open-source projects.

Conclusion

In conclusion, working on these featuyres and fixed for DocsGPT taught me a lot about the power of user experiences and careful system hadnling. Adding pagination to the Document section made the interface more user-friendly and manageable, which was good to see, and manage the document as well.
Solving the multiple files issue was quite challenging for me to dig deep into backend processing and come up with a robust fix that improved reliablity for everyone.
Overall, these contributions made me realize how even seemingly small enhancements can make a big impact for users. I learned that every step in this journey—whether through engaging with community feedback, tackling bugs, or building new features—helps me grow as a developer while making DocsGPT better for everyone.

Simplifying Package Distribution with setuptools and pyproject.toml

fadingNA — Mon, 18 Nov 2024 02:44:54 +0000

Hi Everyone,

Have you ever built something cool with Python and wanted to share it with the world? Maybe you’ve made a game, a tool, or something to help with work. If you want others to use it easily, you need to package it up and put it in a place where everyone can get it—like PyPI! Let’s talk about two tools that help with this: setuptools and pyproject.toml.

What is setuptools?

Think of setuptools as your helpful friend who makes packing easy. When you want to share your project, setuptools helps bundle all the files together neatly. This way, anyone who wants to use your project can get everything they need, without missing a piece.

What is pyproject.toml?

pyproject.toml is like a checklist for setuptools. It tells setuptools (and other tools) what to do and what your project is all about. It’s just a file you write to explain things like

What your project is called.
Where to find more information (like a website).

tutorial using pypi packing your project

Example for pyproject.toml

You can create pyproject.toml on the root of your project, but please be careful about your project structure.

[build-system]
requires = ["setuptools>=61.0"]
build-backend = "setuptools.build_meta"

[project]
name = "chat-minal"
version = "1.0"
authors = [
  { name = "Nonthachai Plodthong", email = "fadingna@procode.ca" }
]
description = "Chat Completion running on CLI using Language, support OpenAI and Groq"
readme = "README.md"
requires-python = ">=3.11"
classifiers = [
    "Programming Language :: Python :: 3",
    "License :: OSI Approved :: MIT License",
    "Operating System :: OS Independent"
]

[project.urls]
Homepage = "https://github.com/xxxx/chat-completion-api"
Issues = "https://github.com/xxxx/chat-completion-api/issues"

However, my app is have sub-directory which is /app so we need to specify on pyproject where to look for main entrance.

[tool.setuptools.packages.find]
where = ['app']

That's it your pyproject.toml is ready for upload to pypi or test-pypi.

Step to upload to PyPi

Build Your Project:

python3 -m build

Upload to PyPi python3 -m twine upload dist/* this will upload to pypi.org

python3 -m twine upload --repository test-pypi dist/* this will upload to test-pypi.org

Wrapping Up

With setuptools and pyproject.toml, packaging and sharing your Python project is easy and fun! You’ve got everything you need to let the world see and use what you’ve built.

chat-minal · PyPI

Chat Completion running on CLI using Language, support OpenAI and Groq

pypi.org

Python & Github Guards

fadingNA — Mon, 11 Nov 2024 00:23:53 +0000

First

In software development, ensuring the quality of code is crucial for delivering a reliable product. Automated testing and continuous integration (CI) processes help catch issues early in the development cycle. This blog outlines the steps taken to set up a CI pipeline for a Python project using GitHub Actions. It covers the configuration of automated testing, linting, and handling common challenges faced during implementation.

Setting Up CI/CD for a Chatminal

In this case, our project involves building a Python application with the following goals:

Run automated tests for every push and pull request to the main branch.
Perform code linting and enforce formatting standards.
Ensure all changes pass CI checks before merging.

1. Creating the GitHub Actions Workflow

  - name: Set up Python
    uses: actions/setup-python@v2
    with:
      python-version: 3.11

  - name: Install dependencies
    run: |
      python -m pip install --upgrade pip
      pip install -r requirements.txt

  - name: Run Linter
    run: |
      pip install flake8 black
      flake8 ./app/*.py
      black --check .

  - name: Run Tests
    run: |
      python -m unittest discover -s test

2. Handling Linting with flake8 and black

Linting ensures consistent code style and catches potential bugs early. We used flake8 for code linting and black for enforcing code formatting. To ignore specific warnings (e.g., unused imports), .flake8 configuration was added:

[flake8]
ignore = F401

3. Writing and Running Unit Tests

Tests were written using the unittest module. Each test file followed a naming convention of *_test.py and was placed in the test directory. An example of a tests for the Chatminal Object wide, Utilities.

4. Enforcing CI Checks for Pull Requests

To ensure code quality, a rule was set to block merging if CI checks fail. This prevents code that does not meet quality standards from entering the main branch.

Conclusion

Setting up a robust CI/CD pipeline with automated testing and linting helps maintain high code quality. GitHub Actions simplifies this process, making it easy to automate testing, enforce code standards, and catch issues early. By adopting these practices, developers can focus on building features while reducing the likelihood of introducing regressions.

UnitTesting - Chatminal

fadingNA — Wed, 06 Nov 2024 00:04:35 +0000

Overview

Testing is a crucial step in the software development lifecycle that ensures your code works as expected and adheres to the specified logic. Proper testing not only validates the functionality of individual components but also guards against potential regressions when changes are introduced. Among various testing approaches, unit testing stands out as one of the most effective strategies for validating individual functions and methods in isolation.

In this blog, we’ll explore the significance of unit testing in Python using the unittest framework, with a focus on leveraging mocking techniques to isolate code, simulate dependencies, and verify behavior. Our practical example involves testing a custom object and mocking API requests from Langchain.

Unit Testing

Detect Bug
Improved Code Quality
Checked Code flow
Ensure development Cycles

Unit testing verifies that each functions of application working properly. The focus is on every part of an application that I have build call Chatminal, and I will implement 2 significant testing model, Chat minal object and mock api request from Langchain

Methodology

In Python, unit testing often involves object-oriented instances, though this approach isn’t strictly necessary. However, adopting object-oriented testing practices offers cleaner and more organized tests. Consider the following test structure using unittest and unittest.mock for mocking dependencies:

@patch("sys.exit")
@patch("app.completion_tool.logger")
class TestMinal(unittest.TestCase):

Here, the two decorators @patch("sys.exit") and @patch("app.completion_tool.logger") mock the sys.exit call used to terminate the application and a logger used to debug application behavior.

First method on that TestMinal Object
Consider a method that tests argument parsing for a file, because our application depend from file input to give context to LLM.

    def test_only_file_argument(self, mock_logger, mock_exit):
        with patch("sys.argv", ["completion_tool.py", "test_file.txt"]):
            with patch("os.path.exists", return_value=True):
                self.minal.parse_arguments()
                self.assertEqual(self.minal.input_text, "Default input text")
                self.assertEqual(self.minal.temperature, 0.5)
                self.assertEqual(self.minal.max_tokens, 100)
                self.assertEqual(self.minal.model, "gpt-4")
                mock_exit.assert_not_called()

This test verifies that when a valid file argument is provided, the default values for other parameters are correctly set, and sys.exit is not called.

This test suite demonstrates key unit testing techniques, including:

Patching System Calls, mocking sys.exit and loggers for controlled test behaviour.
Mocking Dependencies, simulating external responses to isolate functionality.
Argument Parsing Validation, ensuring command-line arguments are processed correctly.

Mock API Request

First define private variable to mock response from LangChain Completion

self.mock_response.response_metadata = { "token_usage": { "completion_tokens": 86, "prompt_tokens": 48, "total_tokens": 134, }, "model_name": "gpt-4-0613", "finish_reason": "stop", } self.mock_response.id = "mocked-id-12345" self.mock_response.usage_metadata = { "input_tokens": 48, "output_tokens": 86, "total_tokens": 134, }

    def test_generate_completion(self, mock_logger, mock_exit):
        with patch("app.completion_tool.LangChainOpenAI") as MockLangChainOpenAI:
            mock_llm_instance = MockLangChainOpenAI.return_value
            mock_chain_llm = self.mock_response.__or__.return_value
            mock_chain_llm.invoke.return_value = self.mock_response

            # Patch get_prompt_template and get_response to return mocks
            with patch.object(
                self.minal, "get_prompt_template", return_value=self.mock_response
            ):
                with patch.object(
                    self.minal, "get_response", return_value=mock_llm_instance
                ):
                    # using patch to mock the standard output
                    # and capture the printed output
                    # because our project print _reponse.content + '\n'
                    # to the standard output and we have to capture and mock it
                    with patch("sys.stdout", new_callable=io.StringIO) as fake_out:
                        self.minal.generate_completion()
                        printed_output = fake_out.getvalue()

                    expected_output = self.mock_response.content + "\n"
                    self.assertEqual(printed_output, expected_output)

Key Takeaways

Effective Mocking, this approach ensures that your tests do not depend on live API calls, making them faster, more predictable, and less error-prone.
Output Verification, by capturing sys.stdout, you can verify the behavior of functions that print output, which is particularly useful for command-line tools.
Isolated Testing, by controlling all external dependencies with mocks, you can test the logic and behavior of your code in isolation.

This method ensures that your code behaves correctly when interacting with external services and allows for comprehensive testing without actual network calls.

Conclusion

Unit testing is an indispensable practice for ensuring the reliability and maintainability of your Python applications. By mastering the use of unittest.mock, you can effectively isolate your code, simulate external dependencies, and verify both functional behavior and logging output. Remember to:

1. Mock Correctly: Always patch the object where it’s used, not where it’s defined.
2. Maintain Correct Argument Order: Especially when using multiple @patch decorators.
3. Prefer Mocking Over Capturing stdout: Mocking functions like print leads to cleaner and more reliable tests.
4. Leverage assertLogs: For testing logging output without complex mocking.
5. Refactor for Testability: Design your code in a way that facilitates easy and effective testing.

By following these guidelines and learning from common pitfalls, you’ll enhance your testing strategy and build more resilient Python applications.

Streamlining Python Development: Integrating Black and Flake8 with VSCode and Pre-Commit Hooks

fadingNA — Tue, 29 Oct 2024 04:57:29 +0000

As a developer, maintaining code quality and consistency is crucial for collaborative projects. In this blog post, I’ll walk you through how I integrated the Black code formatter and Flake8 linter into my Python project using Visual Studio Code (VSCode) and set up pre-commit hooks to automate code quality checks. This setup ensures that all contributors adhere to the same coding standards, enhancing the overall quality of the project.

Introduction

In the open-source projects, it is very important to maintain a consistent code style and catch a small error early before commit. By integrating with tool like black and flake8 into project in this case my project call Chatminal

Formatting with Black

Black is a reliable tool formatter, that help developer careless about consistency of code pattern, and also using PEP 8 style guide.
Why Selecting Black?
First of all, the speed of the process of Black CLI is very good by fast and efficient, minimizing disruption to the development workflow and also ready for pre-commit as well. Secondly, ease to use simple configuration with minimal options, making it easy to adopt to desire development styling.

psf / black

The uncompromising Python code formatter

The Uncompromising Code Formatter

“Any color you like.”

Black is the uncompromising Python code formatter. By using it, you agree to cede control over minutiae of hand-formatting. In return, Black gives you speed determinism, and freedom from pycodestyle nagging about formatting. You will save time and mental energy for more important matters.

Blackened code looks the same regardless of the project you're reading. Formatting becomes transparent after a while and you can focus on the content instead.

Black makes code review faster by producing the smallest diffs possible.

Try it out now using the Black Playground. Watch the PyCon 2019 talk to learn more.

Read the documentation on ReadTheDocs!

Installation and usage

Installation

Black can be installed by running pip install black. It requires Python 3.9+ to run. If you want to format Jupyter Notebooks, install with pip install "black[jupyter]".

If you can't wait for the latest…

View on GitHub

Linting with Flake8

Flake8 is a versatile Python linter that checks your code for style guide enforcement, programming errors, and code complexity.

Why Selecting Flake8 ?

Comprehensive checking, with combines the functionality of PyFlakes, pycodestyle, and Ned Batchelder’s McCabe script.
And also supports plugins to add more checks or customize existing ones. Moreover Flake8 is a open source project that widely used with extensive documentation and community backing.

PyCQA / flake8

flake8 is a python tool that glues together pycodestyle, pyflakes, mccabe, and third-party plugins to check the style and quality of some python code.

Flake8

Flake8 is a wrapper around these tools:

PyFlakes
pycodestyle
Ned Batchelder's McCabe script

Flake8 runs all the tools by launching the single flake8 command It displays the warnings in a per-file, merged output.

It also adds a few features:

files that contain this line are skipped:
```
# flake8: noqa
```
lines that contain a # noqa comment at the end will not issue warnings.
you can ignore specific errors on a line with # noqa: <error>, e.g., # noqa: E234. Multiple codes can be given, separated by comma. The noqa token is case insensitive, the colon before the list of codes is required otherwise the part after noqa is ignored
Git and Mercurial hooks
extendable through flake8.extension and flake8.formatting entry points

Quickstart

See our quickstart documentation for how to install and get started with Flake8.

Frequently Asked Questions

Flake8 maintains an FAQ in its documentation.

Questions or Feedback

…

View on GitHub

What I Learned

Integrating Black, Flake8, and Pre-Commit hooks into Chatminal was a transformative experience. And see how black reformatted my code remove extra space. Here are some key takeaways

Consistency is Key: Automated tools enforce a consistent code style, making the codebase more readable and maintainable.
Automation Saves Time: Pre-Commit hooks and editor integrations reduce the manual effort required for formatting and linting, speeding up the development workflow.
Early Issue Detection: Tools like Flake8 catch potential bugs and code smells early, preventing them from propagating into the codebase.
Collaboration Made Easier: With standardized coding practices, collaborating with other developers becomes seamless, minimizing merge conflicts and misunderstandings.
Backup Plans are Essential: Understanding Git’s reflog and having strategies to recover lost commits is invaluable, especially when performing operations like interactive rebase.

Conclusion

Automating code formatting and linting is a game-changer for any Python project. By integrating Black and Flake8 with Pre-Commit hooks and Visual Studio Code, I was able to enforce consistent coding standards, catch issues early, and streamline the development workflow in Chatminal. These tools not only enhance code quality but also foster a more collaborative and efficient development environment.

Whether you’re working on a solo project or collaborating with a team, investing time in setting up these tools will pay dividends in the long run. I highly recommend adopting a similar setup to maintain high standards and ensure that your codebase remains clean and efficient.

Recap Hacktober Fest

fadingNA — Sun, 27 Oct 2024 18:48:08 +0000

Introduction

For the month of October, I had a very good chance to contribute to Hacktoberfest, and this was my first time contributing to open source projects. As part of the event, I needed to make a total of four pull requests. Below is the list of projects and contributions I made:

1. Transformers

Issue: KeyError Update in Transformers
- This issue involved improving error handling for a KeyError in the Hugging Face Transformers library. Specifically, I worked on improving the error messages for better debugging, as users were facing difficulties in understanding why the error occurred during the _evaluate and _save_checkpoint functions.
Pull Request: PR Update KeyError, _evaluate function, _save_checkpoint function
- My pull request addressed the KeyError by providing a more descriptive error message, helping users to quickly identify and understand the underlying cause of the error. I also made improvements to the _evaluate and _save_checkpoint functions to prevent similar issues in the future.

2. Scrape-it

Issue: Type Update for scrape-it
- The issue was related to outdated type definitions for the scrape-it library, which caused problems for developers using modern TypeScript features. The goal was to update the type definitions to be more compatible with the latest TypeScript standards.
Pull Request: PR Update Type for Scrape-it
- In my pull request, I updated the type definitions to ensure that they align with modern TypeScript practices, making it easier for developers to use the library without encountering type errors or incompatibility issues.

3. DocsGPT

Issue: New Feature: Caching System for DocsGPT
- This issue proposed adding a new feature to introduce a caching mechanism for DocsGPT, a project aimed at improving the efficiency of LLM responses. The caching system would store responses to avoid redundant API calls and speed up response times.
Pull Request: PR Add New Feature for caching LLM response using Redis
- My pull request implemented a Redis-based caching solution to store LLM responses. This feature significantly improved the efficiency of DocsGPT by reducing response times and decreasing the load on the backend by avoiding repeated computations for identical queries.

4. Gradio

Issue: Update Docstring for Button Variant in Gradio
- The issue was about outdated or unclear documentation regarding the behavior of the Button component in Gradio, specifically when different variants were used. The goal was to make the documentation more user-friendly and informative.
Pull Request: PR Update Docstring for Button behavior with variant
- In my pull request, I updated the docstring for the Button component to clarify its behavior based on the selected variant. This helps developers understand how different variants affect the appearance and behavior of buttons in Gradio, making the library easier to use.

Blog Posts

To document my Hacktoberfest journey, I wrote blog posts about each of my contributions:

First PR: Transformer
- In this post, I detailed my first experience contributing to the Hugging Face Transformers library, the challenges I faced, and how I overcame them.
Second PR: Scrape IT
- In this post, I covered my work on updating type definitions for the scrape-it library, why the change was necessary, and its impact on users of the library.
Third PR: DocsGPT Caching
- In this post, I explained the importance of caching for LLMs, how I implemented the feature in DocsGPT, and the benefits it brought to the project.
Fourth PR: Gradio Document API Update
- In this post, I discussed my contribution to updating the Gradio documentation, the importance of clear documentation for open-source tools, and how these changes improved user experience.

Lastly

Contributing to open source for the first time as part of Hacktoberfest and my course OSD600 has been an incredibly experience. I learned a lot about working with different codebases, collaborating with other developers, and the value of clear documentation. Each contribution helped me think and do problem solving as a developer should do, and I'm very enjoy for the opportunity to be able to give it back to community, and free library that everyone have been using.

Document API Update on Graddio

fadingNA — Fri, 25 Oct 2024 18:15:46 +0000

Overview

Hey everyone! This last week, I had the chance to dive into the world of gradio and contribute to improving its documentation. It was a fun experience, so I thought I'd share what I learned and how it all went down.
gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
Website | Documentation | Guides | Getting Started | Examples

English | 中文

Gradio: Build Machine Learning Web Apps — in Python

Gradio is an open-source Python package that allows you to quickly build a demo or web application for your machine learning model, API, or any arbitrary Python function. You can then share a link to your demo or web application in just a few seconds using Gradio's built-in sharing features. No JavaScript, CSS, or web hosting experience needed!

It just takes a few lines of Python to create your own demo, so let's get started 💫

Installation

Prerequisite: Gradio 5 requires Python 3.10 or higher

We recommend installing Gradio using pip, which is included by default in Python. Run this in your terminal or command prompt:
pip install --upgrade gradio
Tip

It is best to install Gradio in a virtual environment. Detailed installation instructions for all…
View on GitHub

Issue

Buttons of type 'huggingface' appear Black #9787

Steveolas posted on Oct 22, 2024

Describe the bug

When not in darkmode, 'huggingface buttons appear black with white text. When in darkmode they appear white. This is in contrary to the documentation. And in contrary to how they worked in gradio 5.1.0.

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

import numpy as np
import gradio as gr

with gr.Blocks() as demo:
    text_button = gr.Button("I Am a Button", variant='huggingface')


if __name__ == "__main__":
    demo.launch()

Screenshot

Logs

No response

System Info

gradio 5.3.0

Severity

I can work around it

View on GitHub

It all started when a new issue popped up in the Gradio repository someone noticed that the 'huggingface' variant of the button component was showing up with a black background and white text when not in dark mode. This was different from how the documentation described it and even how it looked in Gradio 5.1.0. You can see the original issue

Pull Request

update docstring for the the "variant" parameter in `gr.Button` #9806

fadingNA posted on Oct 22, 2024

Description

Align parameter document of button api reference

🎯 PRs Should Target Issues

Closes: #9787

Tests

All tests pass.

View on GitHub

I submitted a pull request (PR) that aimed to update the API documentation to reflect the correct behavior of the 'huggingface' variant in the button component. Unlike some of my previous contributions, this PR was focused solely on documentation adjustments, helping align user expectations with the UI's actual behavior. This experience gave me a deeper understanding of how even seemingly minor documentation updates can be valuable in open source, as they clarify functionality for all users.
An interesting takeaway from this PR was observing how the maintainers efficiently utilized it to improve the API documentation without opening a new PR for each small update. This approach helped avoid clutter in the repository and minimized PR overlap, especially for minor but essential updates.

What I learned

Communication is Key - The conversation between the contributor and the maintainers was open and clear, which made it easy to understand what needed to be fixed. It’s a reminder of how valuable it is to reach out and ask questions.

Overview

From this last pull request I have done, taught me something about the best practice to do CI pipeline approval, even document api change we have to use maintainer approved it, so the repository become more secure. Overall, this contribution has deepened my understanding of documentation's role in open-source projects and reinforced the importance of clear communication and robust CI processes.

New Feature for caching LLM response with redis instance

fadingNA — Fri, 25 Oct 2024 18:05:33 +0000

First of all, this is my third pull request of Hacktoberfest contribution during October 2024, I have a chance to contribute in big project called DocsGPT, and the project overview is in this link below.

arc53 / DocsGPT

Chatbot for documentation, that allows you to chat with your data. Privately deployable, provides AI knowledge sharing and integrates knowledge into your AI workflow

DocsGPT 🦖

Open-Source Documentation Assistant

DocsGPT is a cutting-edge open-source solution that streamlines the process of finding information in the project documentation. With its integration of the powerful GPT models, developers can easily ask questions about a project and receive accurate answers

Say goodbye to time-consuming manual searches, and let DocsGPT help you quickly find the information you need. Try it out and see how it revolutionizes your project documentation experience. Contribute to its development and be a part of the future of AI-powered assistance.

🎃 Hacktoberfest Prizes, Rules & Q&A 🎃

Production Support / Help for Companies:

We're eager to provide personalized assistance when deploying your DocsGPT to a live environment.

Send Email 📧

Roadmap

You can find our roadmap here. Please don't hesitate to contribute or create issues, it helps us improve DocsGPT!

Our Open-Source Models Optimized for DocsGPT:

Name	Base Model	Requirements (or similar)
Docsgpt-7b-mistral	Mistral-7b

…

View on GitHub

Beginning

I began by checking out the issues listed in the repository. I found a feature request that the maintainer needed help with, and I thought, "Why not give it a shot?" So, I joined their Discord channel and started chatting with the maintainers about the new feature they wanted, as well as the coding style they preferred. Here's the issue I tackled
🚀 Feature: Caching for DocsGPT #1295
pabik posted on Oct 10, 2024
🔖 Feature description

We need to implement caching for DocsGPT to improve performance and efficiency. If the same question is asked, using the same source and the same LLM, the result should be retrieved from the cache rather than triggering a new API call.

Redis is already configured and used for Celery tasks, so the cache system should leverage Redis for storing and retrieving these cached responses.

🎤 Why is this feature needed ?

This feature will improve the performance of DocsGPT by avoiding redundant API calls for identical requests. It will reduce response time for repeated queries, lower API costs, and improve user experience, especially for frequently asked questions.

When users ask similar questions repeatedly using the same data source, there's no need to re-run the same logic each time (at least for some time period). By introducing caching, we can streamline this process.

✌️ How do you aim to achieve this?

The implementation will involve:
1. Using Redis as the caching layer to store LLM responses, indexed by the combination of question, source, and LLM used.
2. Checking the cache before executing new LLM queries to see if a cached result is available.
3. Triggering from cache if an identical question is found in the cache, otherwise proceeding with the usual query process and then storing the result for future use.
This is a challenging task, and we'd love to collaborate on it. You can contribute directly in this issue or join the discussion in our Discord (collaborative-issues).

We also encourage splitting this issue into smaller, manageable tasks, but please link them back to this original issue for tracking purposes.

🔄️ Additional Information

No response

👀 Have you spent some time to check if this feature request has been raised before?
- [X] I checked and didn't find similar issue
Are you willing to submit PR?

None
</div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/arc53/DocsGPT/issues/1295">View on GitHub</a></div>
After some back-and-forth dicussions, I got a better understanding of what was needed. I also learned a lot about the project's structure. Its turn out the repository includes both UI and Server, plus a bunch of services like PostGreSQL, Redis, and SQL running in Docker containers. It was a bit overwhelming at first, but I got the hang of it.
Caching docsgpt #1308
fadingNA posted on Oct 12, 2024
What kind of change does this PR introduce? (New Feature Caching)

The changes are applied in the BaseLLM class to ensure that all LLM queries (both standard and streaming) benefit from
- Caching of responses to improve performance.
- Token usage tracking for monitoring API costs.
- The concrete LLMs implementations now automatically apply caching and token tracking without modifying their core logic.
Why was this change needed? (You can also link to an open issue here)
- #1295
Other information
- The addition of caching and token usage tracking was necessary to improve performance and reduce redundant API calls for LLM queries. This change also allows monitoring of token usage for better cost management. By caching the results of similar requests, repeated queries can retrieve cached responses, thus saving time and reducing API costs.
Additionally, the use of decorators makes the code more modular, allowing the caching and token tracking logic to be applied across different LLM implementations without modifying each one.
View on GitHub

Diving into the code

Not that long that I made myself comfortable with server architecture using Python3, and running server with Flask. It was a fun task, and I really enjoyed seeing how everything connected. from Abstract Object to Concrete and running by decorator function to apply all LLM instances.

What I Learned

This experience taught me a lot about handling server-side caching and working within a larger, collaborative project. Here are some key takeaways:

Communication is key: Talking directly with the maintainers helped me understand exactly what was needed, saving time and avoiding confusion.
Project structure matters: Understanding how different parts of the project interact, like how the server communicates with PostgreSQL and Redis, made a huge difference.
Patience is a virtue: Large projects can be complex, and it takes time to navigate them. But the satisfaction of making a contribution is totally worth it!
If I could go back, I will spend a bit more time exploring the codebase before diving into my changes. It would have made the process easier. But, and I would definitely keep the open more communication with maintainers it made everything so much easier, but also research more how to caching work in pararell timeline.

Conclusion

The overall of this pull request is quite big that I have to organize the redis script to make LLM response with cache if the pattern of conversation is happened before. It was not just about writing code. I had to think about how to structure the cache efficiently, so that it could store and retrieve responses quickly. This meant considering different conversation scenarios and making sure that the cache would be hit only when it made sense, preventing unnecessary API calls.

scrape-it - contributor

fadingNA — Tue, 15 Oct 2024 02:30:38 +0000

In this blog post, I’ll walk you through my recent contribution to the scrape-it repository, where I resolved a type error in the ScrapeOptionElement interface. This was part of issue

Type error with the how field of type ScrapeOptionElement #193

RepolloDev posted on Aug 03, 2024

A little context

I recently started using scrape-it to extract data from html pages, but there were cases where I needed to intervene in the extraction using the Cheerio API.

// test example
const anyHTML = '<html>...</html>'
const { data } = scrapeIt.scrapeHTML<{ data: unknown }>(anyHTML, {
  data: {
    listItem: 'main',
    data: {
      items: {
        selector: 'article',
        how: (element) => {
           const $items = element.find('p:nth-child(n+2)')
           // more cheerio methods
           return $items.text()
        }
      }
    }
  }
})

The problem

TypeScript throws a typing warning, if you run the code nothing happens, but it becomes a nuisance to have that warning and not have autocompletion with the Cheerio object passed to the function parameter.

Solución

Looking into the types of scrape-it, the how field has as its type a function whose parameter is a cheerio.Selector, which may cause the problem.

export interface ScrapeOptionElement {
        selector?: string;
        convert?: (value: any) => any;
        // Change cheerio.Selector to cheerio.Cheerio
        how?: string | ((element: cheerio.Selector) => any);
        attr?: string;
        trim?: boolean;
        closest?: string;
        eq?: number;
        texteq?: number;
    }

View on GitHub

Which highlighted outdated type definitions when using the how function in TypeScript. Here’s the journey from identifying the problem to submitting a successful pull request.

The issue: Outdated Type

The issue was centered around the ScrapeOptionElement interface, specifically the how field. The problem was that the element parameter of the how function was not correctly typed in TypeScript. As a result, developers were not getting proper type hints or autocompletion when using Cheerio methods.

Issue URL: Type error with the how field of type ScrapeOptionElement #193

The how field in ScrapeOptionElement was typed as string | ((element: any) => any). This typing was too generic for users working with Cheerio. What we needed was to type the element parameter more specifically as Cheerio, ensuring that TypeScript could recognize Cheerio methods and provide better tooling support.

What Did I Do to Fix It?

To address the issue, I updated the type definition for the ScrapeOptionElement interface in the index.d.ts file.

export interface ScrapeOptionElement {
    selector?: string;
    convert?: (value: any) => any;
    how?: string | ((element: cheerio.Selector) => any); // original
}

How I updated it ?

I updated the how field to explicitly use the Cheerio type for the element parameter. This ensured that TypeScript would provide correct typings and autocompletion for all Cheerio methods. So we are using reference to declaration so we don't have to import.


/// reference Cheerio
export interface ScrapeOptionElement {
    selector?: string;
    convert?: (value: any) => any;
    how?: string | ((element: Cheerio) => any); // Updated type
}

(() => {
    const { data } = scrapeIt.scrapeHTML<{data: unknown}>("https://ionicabizau.net", {
        data: {
            listItem: 'main'
        ,   data: {
                items:{
                    selector: 'article'
                ,   how: (element) => {
                        const $items = element.find('p:nth-child(n+2)')
                        return $items.text()
                    }
                }
            }
        }
    })
    console.log(data)
})

Testing the Fix

After making the necessary changes, I created an example TypeScript file (example/index-type.ts) to demonstrate how the updated ScrapeOptionElement interface works. This example included both Promise-based and async/await usage to showcase how the how function could be used with proper typings in TypeScript.

Research and Challenges

While updating the type definition itself was straightforward, I had to ensure that the fix didn’t break existing functionality or introduce new errors. My primary challenge was ensuring backward compatibility and understanding how Cheerio’s type definitions worked.

Pull Request and Interaction with Maintainers

Once I completed the fix, I submitted a pull request PR #194 to the scrape-it repository. The project maintainer, IonicaBizau, reviewed my code and provided feedback. After ensuring that all tests passed and the changes were satisfactory, the PR was merged successfully.

Conclusion

This contribution helped improve the TypeScript experience for developers using the scrape-it library by providing proper typings for the how function when working with Cheerio elements. By fixing this type error, developers can now enjoy better autocompletion and error-checking in their scraping projects.
If you’re working with web scraping and TypeScript, this fix makes it easier to write robust, type-safe code. You can check out the updated type definitions in version 6.1.3 of scrape-it.