🎉

言語学習者向けツールLaclaを作りました。

2023/06/04に公開

言語学習者向けツール、Lacla.を作りました。
Laclaは https://lacla.app/ から試せます。

作ったアプリの紹介

英文を入力すると、スルスルーっと3つの情報が出てきます。

  • 文脈を考慮した単語ごとの訳
  • 全訳
  • イディオム、難しい単語の紹介

プロトタイプ公開からの反響

公開してから、沢山の人に使ってもらいました。

https://twitter.com/chizu_potato/status/1664225026714009606

予想以上に反響があって、たくさんの温かいコメントも頂いて、作って良かったという気持ちでいっぱいです。
Lacla.の面白さは、LLMだからこそ実現できたもので、魔法みたい!とユーザーにワクワクしてもらえたのは、想定していたとはいえ、嬉しいです。

まだまだ、やらなきゃいけないことはあるので、Lacla.を進化させて続けていきたいです。

Laclaを作ったきっかけ

唐突なんですが、僕は、英語を勉強しています。

更に唐突なんですが、アガサクリスティの「そして誰もいなくなった」の原著を読みたくなり、買いました。

僕自身、英語のテクニカルライティングを読んでいるので、まぁ読めるでしょうと高をくくっていましたが、小説は別次元でした。本当に読めないです。

使われてる文法や単語は既に知っているものでも、イディオムはわからないし、結局どんな感情で何を言おうとしてるのかが全然理解できませんでした。

ChatGPTと対話して英語を学んだ

そこで、思いついたのが、ChatGPTと対話することでした。

LLMは世界で一番言語を理解している存在だと信じていたので、ChatGPTに聞くことにしました。

使われてるイディオムだったり、文法、結局何が言いたいかを教えてくれます。
LLMが存在しない世界線だったら、DeepLを使うと思っています。
しかし、DeepLは和訳された文しか提示してくれません。
一方で、ChatGPTに適切なプロンプトを与えることで、自分自身に適切なヒントを提示してくれるようになりました。

ChatGPTのおかげで、高尚な言い回しをするアガサクリスティの本を読み進められるようになりました。

このやり方を広めたい

こういう英文解説を求めていた人、他にもいるんじゃないかな?と思うようになりました。

普通英文読解は次のようにやっていくみたいです。
やっぱり手順が多くて、人々はたくさんのツールを使ってと時間と労力を費やしています。

  1. 英文を読む
  2. 和訳を見る
  3. 単語ごとに分解して意味を調べる
  4. 構造を考える
  5. わからなかったら、誰かに聞く

じゃあ、作るかという気持ちで英文を読みやすくするようなサイトを作ることを決意しました。

技術的な背景

サーバーの構成

ざっくり言っちゃうと、ChatGPTとユーザーの間に仲介者を用意した構成になっています。

具体的には、プロンプトやトークンが見えないように、フロントエンドとバックエンドを分けています。

  • Vercel(サイトの配信)
    • APIサーバーに向かってリクエストを叩く
  • Heroku(APIサーバー)
    • ここでOpenAI APIにリクエストを叩く

技術スタック

フロントエンド

  • React
  • Chakra-ui

これらは、ただ有名で情報が溢れているという理由で選定しました。

Vercelで配信しています。相変わらず、デプロイが簡単すぎて涙が出そう。

バックエンド

  • FastAPI

Herokuで配信しています。デプロイが簡単すぎてびっくりしちゃいました。

課題

バックエンドどうするか問題

僕:Pythonという選択肢あるけど、Goで書いたらオシャレかな。
チームメイト:LLM使うなら、LangChain使いたいでしょ。FastAPIでやっちゃおうよ。
僕:せやな。

LangChainとは、LLMを使ったアプリケーション開発を手軽にするPythonライブラリです。OpenAI APIを叩くインタフェースが用意されている他、LLMとアプリケーションを組み合わせてタスクを実行するような機能もあります。

https://github.com/hwchase17/langchain

LangChainを使うと、後述のストリーム処理にも簡単に実装できたのも魅力的でした。

ストリーム処理しないといけない問題

Lacla.という名前がなかったころのLacla.は、ChatGPTの結果が帰ってくるまで画面に何も表示されない設計でした。
当時のLacla.を知り合いに使ってもらったんですが、応答性が悪い部分が良くなかったというフィードバックをいくつかもらいました。

そこで、ストリーム処理を実装することにしました。

ベース部分は海外のMediumの記事を参考にしましたが、リンクが見当たってません。日本語でもQiitaで解説記事が書かれているので参考になります。

https://qiita.com/falman_ai/items/d7f46c6ff7645ed03d4e

プロンプトに与えるタスクが多すぎる問題

当初のLacla.は1つのプロンプトで単語ごとの翻訳、全訳、イディオム紹介をする設計でした。
もちろん、それでも動くのですが、3つ懸念点がありました。

  • 実行速度が遅い
    • 単語ごとの翻訳が表示される -> 全訳が表示される -> イディオムが表示される
  • 入力文字数が増えると、バグりやすくなる
    • ChatGPTは多くの記憶ができないので、複数タスク、膨大な入力を処理するのは難しいです
  • 拡張性に欠けている
    • 1つのプロンプトで命令するタスクを増やせば増やすほど、性能が悪くなると言われています。

そこでLacla.では、複数のAPIを同時並列で叩いて、これらの課題を解決しました。

JavascriptにはPromiseという非同期処理を実現する機能があるので、下記記事のように実装しました。

https://jsprimer.net/basic/async/#promise-all

現在Laclaは同時で3つ(単語ごとの和訳、全訳、イディオム提示)のAPIを叩き、3つのリクエストの結果をストリームで受け取り、動的に表示しています。

まだまだ終わらないぞLacla

拡張機能開発

拡張機能も作っています。DeepLの拡張機能っぽく作っています。
一旦は、Lacla.のWebサイトと同じビジュアライズをしていますが、考え中ってところです。

アプリローンチ

Lacla.を受験生、言語学習者に届けたい思いがあります。彼らにとって使いやすい形を求めながらスマホアプリとしてリリースしていきたいです。

  • OCR
  • 文構造の可視化
  • 文の理解度チェック

可能性はたくさんある

意外だったんですが、Lacla.をリリースしてからユーザーに色々な使われ方をしています。

チームについて

現在4人のチームを組んでいます。イベントで意気投合したのが2週間ほど前なので、そこからお喋りしながらカタカタして今のLacla.ができています。
チームメイトのみんなは素晴らしくて、めっちゃ雰囲気が良いです。アツい議論を交わしながら、ワクワクする開発ができて最高です。

とにかく良いものを作りたいです。

Laclaの開発に興味がある方、ぜひ @chizu_potato にお声がけくれると嬉しいです。

特に下2つのフィールドがわからないので、わかる人ぜひ来てほしいです!

  • データベース、データを管理するインフラ周り
  • アプリ開発一般

Discussion