ブラウザでコード言語を検出する方法

リポジトリ: https://github.com/ray-d-song/guesslang-js

デモ: https://ray-d-song.github.io/guesslang-js/

最近、私は EchoRSS と呼ばれるプロジェクトに取り組んでいます。これは、サブスクリプション内の外部リンク (全文の読み取り、引用など) をインターセプトし、現在のページに直接表示するという非常に必要な機能です。

返された HTML コード ブロックには言語の注釈が失われている (または、元のコード ブロックの pre タグと code タグに言語の注釈が付けられていない) という問題があり、shiki や prism.js などのツールを使用して強調表示することができません。 。

コード言語を検出するための 3 つの解決策を見つけました:

1. 言語学者

これはサーバー上にデプロイされた Ruby プロジェクトであり、Github はそれを使用してリポジトリの言語構成を検出します。非常に高い精度が必要で、サーバー上で計算できる場合、これが最適なソリューションです。

2.hljs

highlight.js は非常に有名な Web コード強調表示ライブラリであり、自動コード検出を提供する唯一のライブラリでもあります。

原理は非常に単純で、言語のキーワードを列挙し、それらを 1 つずつテキストと照合し、最終的にどれが最も一致度が高いかを確認することです。

hljs には 4 つの問題があります。

• 非常に長いコード長が必要であり、ほとんどの言語では比較的良好な精度を達成するには少なくとも 300 文字が必要です。
• 言語を検出する部分は別個のモジュールではなく、パーサーとレンダリングと密接に結合されており、コードも非常に命令的であるため、有用な部分を抽出するのが困難です。
• 検出モジュールを抽出しないと、hljs を使用して強調表示するときにコードの元の形式 (改行とインデント) が失われます。
• 多くの定期的なマッチングが必要であり、パフォーマンスが低く、理由 2 のため、Web ワーカーでは実行できません。

3. 推測言語

guesslang は、tensorflow.js に基づく機械学習プロジェクトです。

Microsoftは2021年にこのプロジェクトをnode.jsに移植し、自動言語検出機能をvscodeに追加しました。

3 年前にベトナム人の hieplpvip もこのプロジェクトをブラウザに移植しましたが、次の 3 つの問題もあります。

• メモリリーク、メモリリーク...
• <script> のみをサポートします。 umd 形式を導入するためのタグ。esm をサポートせず、バンドルをサポートしません</script>
• 同様に、理由 2 により、Web Worker はサポートされていません

その男はこのプロジェクトを維持しておらず、3 月の esm をサポートするという特技リクエストには返答されていません。

そこで、hljs から検出モジュールを抽出し、guesslang-js をフォークして上記の問題を解決しました。最終的にはguesslang が勝ち、結果は次のようになります。
https://github.com/ray-d-song/guesslang-js

あまりにも話しすぎていると思うので、将来誰かが必要とするかもしれないので、投稿します。

tensorflow.js に詳しい方がいらっしゃいましたら、お勧めの学習教材を教えていただければ幸いです。Web GPU 計算にさらに修正して効率を上げたいと思っています。

以上がブラウザでコード言語を検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。