Node.jsで書かれたプログラムをブラウザで動作させる方法

前提・実現したいこと

Google Cloud Translation APIを用いて、ブラウザでも動作するような翻訳プログラムを作成しています。
現在、Node.jsを用いてコマンドプロンプトにて動作する翻訳プログラムは完成しているのですが、それをHTMLに組み込んでブラウザ上で動作させることが出来ていない状況です。
翻訳プログラム内で用いているrequireはブラウザでは動作しないとのことでしたので、色々調べた結果「RequireJS」を用いると動作可能だとわかりました。しかし、RequireJSを用いて実行した際も正常に動作しない状況です。
プログラム初心者ですので、ご回答いただいた内容を理解するのに少し時間がかかってしまうかもしれませんが、何かアドバイスや解決案を教えていただけますでしょうか。
何卒宜しくお願い致します。

プログラムの内容は、Webページ上の翻訳ボタンをクリックすると、ブラウザのコンソールに翻訳後の文章が表示されるものとなっています。
翻訳対象の文章は、translate.js内に直接記載してあるものになります。
※projectIDの欄は今回○○と記載してありますが、本来はGCPにて取得したprojectDを記載してあります。

発生している問題・エラーメッセージ

ターミナルでは動作するものの、ブラウザで動作させようとすると正常に動作しない

エラーメッセージ
Uncaught (in promise) TypeError: Cannot destructure property 'TranslationServiceClient' of 'require(...).v3beta1' as it is undefined.
    at translateText (translate.js:6)
    at translate.js:28

Failed to load resource: the server responded with a status of 404 (Not Found)

require.js:5 Uncaught Error: Script error for "node_modules/@google-cloud/translate/build/src/index"
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:5)
    at HTMLScriptElement.onScriptError (require.js:5)

### 該当のソースコード

Node.js, HTML
ソースコード
######「translate.js」

async function translateText() {
    const projectId = '○○';
    const location = 'global'; // 現在は"global"か"us-central1"のみ
    const text = "私は今日朝からランニングをしました";

    const { TranslationServiceClient } = require(['./node_modules/@google-cloud/translate/build/src/index']).v3beta1;

    // Instantiates a client
    const translationClient = new TranslationServiceClient();
    // Construct request
    const request = {
        parent: translationClient.locationPath(projectId, location),
        contents: [text],
        mimeType: 'text/plain', // mime types: text/plain, text/html
        sourceLanguageCode: 'ja-JP',
        targetLanguageCode: 'en-US',
    };

    // Run request
    const [response] = await translationClient.translateText(request);

    for (const translation of response.translations) {
        const text_translation = translation.translatedText;
        const text_value = text_translation.value;
        console.log(text_translation);
    }
}
translateText();

######「honnyaku.html」
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>翻訳テスト</title>
        <script data-main = "./translate.js" src = "./require.js"></script>
    </head>
        
    <body>
        <input type = "button" value = "翻訳" id = "button_translate" onclick = "translateText();">
    </body>
</html>


### 試したこと
RequireJSのほかに、BrowserifyやWebpackも試してみましたが、正常に動作しませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。