DEV Community

Cover image for ChatCraft Adventures #5
Roy J. Wignarajah
Roy J. Wignarajah

Posted on • Edited on

ChatCraft Adventures #5

This week in ChatCraft

This week in ChatCraft, Release 1.2 is complete, and is available here for those interested.
The ChatCraft community has worked hard to push many changes and an awesome new feature to ChatCraft second release.

New Feature - Image Input

One new feature I'm excited to share with you today Image Input, prepared by my classmate Mingming. Since November 2023, Mingming has been working hard to polish and push this feature into ChatCraft, and his hard work has paid off.

This feature uses GPT-4 with Vision (model name gpt-4-vision-preview) to allow the model to analyze and discuss input images:

Image description

You can attach images to the prompt either by clicking on the paperclip icon or by pasting it into the prompt window using Ctrl+V. For a better idea, please take a look at the conversation I screenshotted above.

Sheriff Duties

In my last blog post, I briefly discussed Sheriff duties and my first Sheriff duty experience. This week, I have relinquished and passed on my Sheriff duties to my classmate Rachit. With my duties passed on, this week was more relaxing for me, although I still try to remain available on the Discord server.

Pull Requests

For this week, I've contributed two Pull Requests to ChatCraft: a UI fix and a packaging task.

UI Fix: Broken Iframe Autoresize

You can ask ChatCraft to generate HTML files for you, and ChatCraft will render and preview those HTML files to you (conversation available here):
Image description

The HTML preview is contained in an IframeResizer, which we want to automatically resize to fit HTML previews content.

The issue here was the last line that could fit in a preview would be cut off:

Image description

My solution

The IframeResizer heightCalculationMethod option calculates the iFrame height by converting the body margin to px then adding the top and bottom figures to the body tag's offSetHeight (bodyOffSet).

There are four main possible values for heightCalculationMethod:

  • (default) bodyOffset uses document.body.offsetHeight
  • bodyScroll uses document.body.scrollHeight
  • documentElementOffset uses document.documentElement.offsetHeight
  • documentElementScroll uses document.documentElement.scrollHeight

There is also a heightCalculationMethod value of max, which uses the largest value of the above 4. I found that using a heightCalculationMethod value of max fixes the issue by rendering the entire content. Rendering the entire content eliminates the need of a scrollbar in these preview renders, so I removed the scrollbar as well.

Publishing Task: Package and Publish github-to-sops to PyPI

This task isn't exactly a ChatCraft feature, but it's an important part of our secrets management. ChatCraft uses sops to manage and share secrets, and the owner, Taras wrote github-to-sops to make working with sops easier.

You can clone and use github-to-sops on your local machine, but wouldn't it be better to install it with pip instead? With my Pull Request, I was able to package and ship github-to-sops to the Python Package Index (PyPI). You can see its entry here.

How I packaged a Python Package for the first time

Packaging Python packages for PyPI requires a specific kind of project directory structure that github-to-sops didn't have at the time. Before I could publish github-to-sops to PyPI I had to first modify its directory structure. I don't often write programs in Python, so this task would've been very difficult to do on my own. This would end up being the first Python Package I've published, and ironically it's not one I developed myself.

Publishing to PyPI with Simonw's CookieCutter Template

Luckily, Simon Willison (django co-creator) created a cookiecutter template that creates a Python project with a suitable directory structure and all files required to publish a Python project to PyPI. The template even generates two workflow files - one for unit tests and another one that publishes GitHub releases to PyPI. Simon wrote more details on his template in this blog post.

This template provided two important things:

  • An appropriate package directory structure
  • A publishing workflow

The publishing workflow was especially helpful, as it automatically publishes new GitHub releases. Thanks, Simon!

To package github-to-sops, I used Simon's template to generate a sample GitHub project, and then I copied appropriate files and mimicked the directory structure in github-to-sops. One thing github-to-sops doesn't require at the moment is unit tests (though it'd be nice to have!), so testing-related artifacts were not copied over. This also required removing the test step in the publish workflow.

Iterating on initial releases

Using Simon's template, I was able to successfully package and publish github-to-sops to PyPI, but version 1.0.0 had a major issue: it was published as a namespace package that you would import in Python code. This wasn't ideal, as github-to-sops is a command-line tool.

To fix this, I would have to somehow package github-to-sops as a command-line tool. Simon's template brought me far enough, it was time for me to research and experiment the rest of the way. Ultimately, it was a combination of documentation and conversations with ChatCraft that helped me figure it out.

After renaming folders and properly setting up custom discovery I was able to get github-to-sops packaged to PyPI as a command-line tool (version 1.1.4):

Image description

I must admit that this process was frustrating at times, but the sense of accomplishment I felt after pulling it off was well worth it, and I now have a better idea of packaging and publishing to PyPI, thanks to Simon and ChatCraft.

Next week in ChatCraft

Next week, I'll be looking into extending Mingming's Image Input feature with text file inputs. Stay tuned until then.

Top comments (0)