Integrating ChatGPT into article translation in AdminCP

Integrating ChatGPT into article translation in AdminCP

Daily short news for you
  • For a long time, I have been thinking about how to increase brand presence, as well as users for the blog. After much contemplation, it seems the only way is to share on social media or hope they seek it out, until...

    Wearing this shirt means no more worries about traffic jams, the more crowded it gets, the more fun it is because hundreds of eyes are watching 🤓

    (It really works, you know 🤭)

    » Read more
  • A cycle of developing many projects is quite interesting. Summarized in 3 steps: See something complex -> Simplify it -> Add features until it becomes complex again... -> Back to a new loop.

    Why is that? Let me give you 2 examples to illustrate.

    Markdown was created with the aim of producing a plain text format that is "easy to write, easy to read, and easy to convert into something like HTML." At that time, no one had the patience to sit and write while also adding formatting for how the text displayed on the web. Yet now, people are "stuffing" or creating variations based on markdown to add so many new formats that… they can’t even remember all the syntax.

    React is also an example. Since the time of PHP, there has been a desire to create something that clearly separates the user interface from the core logic processing of applications into two distinct parts for better readability and writing. The result is that UI/UX libraries have developed very robustly, providing excellent user interaction, while the application logic resides on a separate server. The duo of Front-end and Back-end emerged from this, with the indispensable REST API waiter. Yet now, React doesn’t look much different from PHP, leading to Vue, Svelte... all converging back to a single point.

    However, the loop is not bad; on the contrary, this loop is more about evolution than "regression." Sometimes, it creates something good from something old, and people rely on that goodness to continue the loop. In other words, it’s about distilling the essence little by little 😁

    » Read more
  • Alongside the official projects, I occasionally see "side" projects aimed at optimizing or improving the language in some aspects. For example, nature-lang/nature is a project focused on enhancing Go, introducing some changes to make using Go more user-friendly.

    Looking back, it resembles JavaScript quite a bit 😆

    » Read more

Problem

Last week, I released a multilingual feature for the website. You know, every time I add a new feature, it requires additional time to operate. After implementing that feature, I spent a whole day copying the articles, putting them into ChatGPT for translation, then reinserting them into the English version of the articles, and editing the format if there were any mistakes... then publishing those articles. It sounds simple, but it's actually a nightmare for programmers. Oh, it turns out I'm working instead of lines of code.

Thinking this way, I need to do something to optimize this work, or at least not repeat it in a boring way. So, there's only one way left: finding a service provider that allows calling the ChatGPT API, integrating it into my admin panel, and writing code to directly translate Vietnamese articles into English. Hmm... but that might require some money.

Is there any other way?

Research

As we all know, ChatGPT allows us to use it for free on its website. Whatever you want to ask or search, just go there and chat, with no limitations except for slower response times during peak hours, when user traffic suddenly increases.

ChatGPT also provides an API service. Instead of going to their website, you can now directly call the API. This brings a lot of value because if ChatGPT is integrated into a system, many services will become "smarter" in the literal sense. Just imagine giving a command to the system, and some tasks are automatically completed, how convenient it is.

Regarding pricing, it varies depending on the model used. The following example is the pricing table for GPT-3.5 Turbo.

ChatGPT pricing table

With 4K context, the price for each 1K tokens (meaning the length of the question) is $0.0015. Tokens can be understood as "words" in their units, so 1K Tokens is equivalent to 1,000 words. Within that, 4K and 16K represent the knowledge of ChatGPT. This means that the larger the context, the deeper and wider ChatGPT's understanding will be.

If roughly calculating, one of my articles is about 1K - 1.5K words, how much time does it take to reach $1 by calling the API?

But the truth is ChatGPT API cannot be paid for in Vietnam, so the desire is just a desire. My initial idea was how to crawl the response data from the ChatGPT chat page. The term "Crawl" has existed for a long time and is suitable in cases where a service provider does not provide an API. However, the drawback of this method is its instability. Furthermore, ChatGPT also cleverly integrated Cloudflare Turnstile, a Captcha service that prevents crawling behavior from Cloudflare.

Am I at a dead end? I wandered on Github to find help from "colleagues" all over the world and accidentally discovered this repository transitive-bullshit/chatgpt-api.

By a quick look, we can see that it is a tool that allows us to interact with ChatGPT through CLI or Node.js. Its characteristic is that it requires providing an OPENAI_API_KEY, which is the key for OpenAI to calculate the cost of calling their API, but I don't have that!

But the "magic" appears at the end. There's a function called ChatGPTUnofficialProxyAPI that allows us to interact with ChatGPT through an Access Token (AC). AC is easy to get, you can retrieve it through the Dev Tools of your browser or simply access this URL https://chat.openai.com/api/auth/session to extract the information.

However, having AC alone is not enough. As mentioned at the beginning of the article, ChatGPT is also protected by Turnstile, so to use this AC, a Proxy Server needs to be present. Simply put, this server "bypasses" Turnstile and holds the AC to interact with ChatGPT on your behalf. The documentation lists two "generous" authors who have built free servers for people to use, but with some rate limits.

Of course, everything has its downsides. The author of the repository also considers removing ChatGPTUnofficialProxyAPI in the future due to various reasons, including stability and information security concerns.

But after considering it, I still decided to use this tool.

Process

If the library works as planned, I will create a local server on my machine to use for the automatic article translation feature, with the input being the content to be translated and the output being the translated content. One reason for not exposing this API is that I no longer have a server, all services have been pushed to Cloudflare in the article Completing the blog transfer to "Web is on the edge". Worker does not support this Node.js library, so it cannot be deployed. Moreover, the article writing time is not continuous, so there is no need to maintain this API server continuously.

There is one thing to note that ChatGPT does not respond with the complete answer in one go if it is too long. To continue, you need to click the "Continue" button if you're on the web. Luckily, the library supports the next syntax to request ChatGPT to continue the incomplete answer.

In the function to send messages, there are 2 options: conversationId and parentMessageId, which represent the ID of the conversation and the previous message, respectively. The reason for having parentMessageId is to help ChatGPT understand the previous context to provide a more accurate answer, while conversationId is used to group messages in the same conversation and avoid mixing them up. Therefore, I need to save parentMessageId each time ChatGPT responds so that the next message, it understands the previous context.

Then, I create a class ChatGPT with 2 methods: sendMessage and sendNext, representing one chat round and a request to continue the response if the answer is not complete. I use the fastify library to create a simple HTTP server. Finally, I integrate it into AdminCP like this.

![IMAGE ALT TEXT HERE](https://img.youtube.com/vi/gJJzIumvCWo/0.jpg)

You can refer to the source code of my local server here tonghoai/chatgpt-translate.

Premium
Hello

The secret stack of Blog

As a developer, are you curious about the technology secrets or the technical debts of this blog? All secrets will be revealed in the article below. What are you waiting for, click now!

As a developer, are you curious about the technology secrets or the technical debts of this blog? All secrets will be revealed in the article below. What are you waiting for, click now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...