I used generative AI (Gemini) to create my own website to organize the articles I wrote for my blog.
Katoshi's Research Notes https://katoshi-mfacet.github.io/
This site is automatically generated from blog post drafts written in Japanese.
Its features are:
- Automatic generation from article drafts
- Organization of articles by categorization and tagging
- Support for 30 languages and accessibility
Basic Mechanism
The basic mechanism involves a custom program built on the Astro framework, which automatically generates HTML files from article drafts.
I developed this program itself by chatting with Google's Gemini.
Thanks to this mechanism, once I write an article draft and run the regeneration process, the HTML files are automatically updated and reflected on the website.
Categorization and Tagging
I also developed a separate program for categorization and tagging.
This program passes articles to Gemini via an API to automatically categorize and tag them.
By providing a list of categories and tags along with the article, Gemini interprets the article's meaning and skillfully suggests appropriate ones.
Furthermore, the category and tag lists themselves are determined by extracting them from past articles using another custom program. Here, too, Gemini is utilized.
Past articles are sequentially passed to Gemini via an API to output candidate categories and tags. Then, these candidate categories and tags extracted from all articles are passed to Gemini to finalize the category and tag lists.
This entire process is also automated by a program.
Multilingual Translation
Translation is necessary for multilingual support. Of course, Gemini is also utilized for this translation.
There are two patterns for translation:
One is the translation of strings common throughout the website, regardless of the article. This includes menu item names, self-introductions, and other similar texts.
The other is the translation of the article drafts themselves.
For both of these translation types, I've created a custom program that executes the translations using Gemini's API.
Accessibility
Accessibility is improved by adding several features to the HTML files, considering that visually impaired individuals might want to listen to article content via audio, or those with difficulty using a mouse might want to browse the website solely with keyboard controls.
I had very little knowledge of accessibility; it was Gemini that suggested these improvements during our programming chat.
And for these changes to HTML to enhance accessibility, I asked Gemini how to implement them during our chat and applied the modifications.
Disappearance of Barriers
Generative AI was utilized in various ways to create this website, including program creation, natural language processing for translation and organizing categories and tags, and proposing subtle points like accessibility.
Furthermore, by establishing a system for automatic updates upon adding articles, including HTML generation and natural language processing for categories and tags, I've been able to create a website that grows with each new article.
Through the creation of this website, I've truly felt that various barriers can now be easily overcome with generative AI.
First, there's the language barrier. Supporting 30 languages would traditionally have been impossible for an individual, even considering translation.
Additionally, there are concerns about whether translated blogs convey the intended nuances and whether expressions might be awkward or offensive to native speakers.
Generative AI's translation can convey nuances more accurately and use more natural expressions than traditional machine translation. Moreover, the translated output can be fed back into the generative AI to check for unnatural or inappropriate phrasing.
From the perspective of website multilingualization, properly handling elements like dates and units, which vary in expression across languages, was a challenge.
For example, if there is one article in the first category, two in the second, and ten in the third, in Japanese, it's simply "1記事 (1 article), 2記事 (2 articles), 10記事 (10 articles)," appending the unit "記事" after the number.
However, in English, you need to differentiate between singular and plural, such as "1 article, 2 articles, 10 articles." Furthermore, in some languages, expressions can reportedly change for small plural numbers versus large plural numbers.
Moreover, for languages like Arabic, which are written from right to left, one must also consider making the entire website layout follow the reader's eye movement from right to left for a natural flow. If arrows are used in text or images, they might need to be horizontally flipped. These points are also addressed by having generative AI check them.
By working on website multilingualization with generative AI, I was able to meticulously address aspects that would have gone unnoticed or unconsidered with traditional methods.
The same applies to accessibility considerations. Previously, I could only consider those who view websites in the same way I do.
However, generative AI easily incorporates considerations that I might not notice, or that I might neglect due to the effort involved.
While multilingualization and accessibility are still not perfect, I believe their quality is overwhelmingly higher than what I could have achieved by thinking and researching alone.
In this way, generative AI has eliminated many barriers to my efforts in disseminating information through blog articles.
Finally
I am a system engineer with extensive programming experience. While I don't create websites for work, I have made several personal homepages as a hobby in the past.
With this experience and through chat interactions with generative AI, I was able to build this automated multilingual blog site generation system in about two weeks.
Without generative AI, I wouldn't have even considered multilingual support. In that sense, it can be said that it transcended the barrier of imagination.
Furthermore, considering the effort of categorizing and tagging every time an article is added, it's highly likely that the site would have ceased to be updated after its initial creation. With the automation made possible by generative AI's natural language processing, I was able to overcome the barriers of maintenance and updates.
Moreover, this system can be built even by people without programming or website creation experience like myself. If you show this article to a generative AI like Gemini and express your desire to build one, it should teach you how.
While I could release my program for widespread use, now that generative AI is becoming a full-fledged software engineer, the most valuable information to share won't be the program itself, but rather an explanation of the ideas and mechanisms, like this article. Ideas and basic mechanisms can be changed, enhanced, and combined even more easily than programs.
This suggests that as the barriers to software development and website creation disappear, so too will the barriers to individual information dissemination.
Technologically, the internet has virtually eliminated the barrier of information exchange, yet we are still hindered by barriers like language and accessibility.
While we can overcome these barriers to some extent through the recipient's ingenuity with machine translation and text-to-speech, there are also parts that cannot be overcome unless the information sender takes action and consideration.
Generative AI eliminates precisely those barriers that information senders must overcome.
Even if language and accessibility barriers disappear, there will undoubtedly be further barriers such as differences in culture, customs, and values. These may be even more difficult to overcome.
However, to overcome those difficult barriers, we must first overcome the ones that precede them. Once we are right in front of such a barrier, new ideas and techniques for overcoming it will likely emerge.
In this way, we may be approaching an era where barriers are disappearing from the world. This is what I felt through the creation of this website.