Starting the Multilingual Site — Fixing HTML Broken by AI, with AI

This article was originally written in Japanese and translated into English with AI assistance. Please note that some expressions may carry nuances from the original Japanese.

🇯🇵 日本語版はこちら / Japanese version


At the end of the previous Special Edition (SP01), I wrote: “I’ll now cover the three products in order.” Following the timeline, the DataMigrator story — the data migration hell — should come next.

However, that’s not what happened.

As I began the blog, I noticed something critical. The Soul Resonant Works homepage had no English version. The Japanese pages were built in January 2026, but without an English “mothership” in place, I couldn’t start an English blog on its own.

So I pivoted and launched a project to translate the homepage into English. It means breaking the chronological order, but I judged that establishing the blog’s foundation should come first. Please forgive me. The “unable to reach main business” pattern I wrote about in SP01 is playing out again here.

Clarifying the Timeline — Why This Story, Now?

To avoid confusion, let me lay out the timeline so far.

At the end of December 2025, I began designing the architecture for the AI business, and in January 2026 I built the Japanese homepage. From there, the Mac migration triggered DataMigrator, utf8conv (born from the character-garbling issue), and maiguru (sparked by a single remark at dinner) — three unplanned products that emerged one after another. That was the story in SP01.

Then, as I began preparing the blog, I realized there was no English version of the homepage. This was mid-April 2026. The DataMigrator story will come afterward, so please bear with me a little longer.

Hidden Damage Discovered on Day One

On day one of the HP English translation project, I started with the privacy policy as the first file. I began by loading the Japanese HTML as the source and grasping its structure.

Right away, a problem surfaced.

The file was cut off mid-way. There was no </body>, no </html>. The file simply stopped at a truncated string </ul on line 496.

The cause was presumably that the AI output, when generating the Japanese page, had hit its token limit and been cut off. In other words, it had already been broken since January — and I hadn’t noticed for nearly three months.

The reason I hadn’t noticed is that when you open it in a browser, it displays just fine. Modern browsers auto-complete missing HTML closing tags and render the page normally. Visually, it looked perfectly fine. It was the kind of issue you’d never notice unless you inspected the source code directly.

Suspecting that “if one is broken, there may be others,” I inspected all eight files. Sure enough, the terms of service and the legal notice page had the same damage. Three files in total. All were cut off at the shared footer section, suggesting they had been generated in the same session.

The translation work was paused, and I had to start by repairing the Japanese versions first. No time for the main business.

The Three-Way Cross-Review System Takes Shape

After completing the repairs, I returned to translating the privacy policy. From here, a development structure unique to this project gradually took shape.

For the HP English translation, I used three AIs. Claude Code (an AI agent that runs in the terminal) handled file reading, translation, structural verification, and commits. Claude.ai chat (the AI chat in a browser) handled overall strategy design and the design of instruction prompts. Microsoft Copilot took on the role of a third party reviewing the naturalness of the English.

This setup wasn’t planned from the start — it emerged naturally when I translated the privacy policy in Session 2. It started when I tried passing the file Claude Code had translated to Copilot and asked: “Are there any spots that a native speaker would find unnatural?” Copilot returned 10 observations, which I sorted through in Claude.ai chat: 8 adopted, 3 rejected, 1 deferred.

The important thing here is that I deliberately reviewed and filtered Copilot’s feedback rather than accepting everything. Even with three AIs involved, the final decisions are made by a human (me). AIs propose; a human approves. Without this structure, if the three AIs’ proposals contradicted each other, things would become unmanageable.

Copilot Stopped Being Able to Read Files

Just as the three-way system was starting to work well, Copilot suddenly stopped accepting files.

When I tried to drag and drop the translated HTML file into Copilot for review, as usual, I got a “file not found” error. Just moments before, it had been working normally. Selecting the file through Finder via the plus button gave the same error.

“Maybe iCloud sync is keeping the file from existing locally?” I wondered, but Claude could read it without issue, so that wasn’t it. Without knowing the cause, reviewing via Copilot became impossible altogether.

I had to make a decision. Wait for Copilot to recover, or proceed without Copilot?

In the end, I decided to proceed without Copilot. Claude.ai chat took over as the alternate reviewer, double-checking Claude Code’s translations from the chat side. Not perfect, but I could maintain the principle that “what one AI writes, another AI verifies.” I decided to deal with the Copilot issue later and prioritize keeping the translation moving.

This decision to “proceed with only Claude, without Copilot” would later cause an even more severe situation in Session 9.

Three Sequential Procedural Mistakes — A Problem of Process, Not Attention

In Session 3, despite the translation itself going smoothly, procedural mistakes occurred three times in a row.

Specifically, I kept forgetting to add an “English Version link” to the Japanese version after creating each new English file. I’d finish the English translation of terms.html, commit it, and then notice: “Ah, I didn’t add the link in the Japanese version.” Same thing with tokushoho.html. Even worse, the path from the English version back to the Japanese version was also wrong.

When the third mistake came to light, I realized this wasn’t an attention problem — it was a structural problem. So from Session 4 onward, I switched to: “Pre-populate link placeholders for the English versions in all remaining Japanese files first.” Add the link placeholder even before the English file exists. That way, the failure mode of “forgetting to add the link during translation work” is structurally eliminated.

This is something I’ve felt while developing maiguru as well: rather than trying harder to prevent mistakes, designing structures where mistakes cannot happen is far more effective. Especially when collaborating with AI, the more steps a human handles, the more mistakes creep in. Reducing the number of steps itself is a key design principle.

Six Days, Six Sessions — Where We Are Now

Over Sessions 1 through 6, across six sessions, four files had been translated: the privacy policy, terms of service, legal notice, and the About page.

The total is eight files, so exactly half done. However, the remaining four include the 68 KB index.html (the largest of all) and two product detail pages. The biggest files were left for the second half.

Even so, the three-way cross-review system established in these first six sessions, and the structural solution to procedural mistakes, became the foundation that supported the second half of the work.

Next time, I’ll cover the story of completing the remaining four files. I’ll also include the tale of Session 9, where all the AI services went down at once and the work ground to zero.

Next Time

SP03: “Completing the Translation of 16 Files — The Night All the AIs Went Down, and the Completion of the Four-Way Collaboration.”


About Soul Resonant Works

Soul Resonant Works is a solo venture developing seven local AI systems.
Starting from zero programming experience, the development is progressing through collaboration with AI.

🌐 Soul Resonant Works:
https://www.sr-works.net/en/

📝 This blog publishes the entire development process as a serialized journal.


If you found this article useful, please share it.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *