RAGを開発してみたい！ので簡単なものでもいいので作ってみよう！part5

Mon, 22 Apr 2024 00:00:00 +0000

さて前回までやったこととしては

全データのベクトル化(途中で断念)
画面の作成(Next.jsのインストールと起動)

というところまでやってみました。今回は

質疑応答画面の作成

というところまでやってみます。Next.jsは初めて触るので進みが遅々としていますがご了承ください。

さてインストールするタイミングでこのようなことを聞かれました。

Would you like to use TypeScript? » No / Yes
Would you like to use ESLint? » No / Yes
Would you like to use src/ directory? » No / Yes

他にもいくつか聞かれたので一応Claudeにどんな意味があって導入することのメリットデメリットを聞きながら質問に答えました。大体Yesにしましたが…

さて前回の画面表示まで行けたのでここからどう作業を進めればいいのかわかってなかったので聞いてみました。

ということで質疑応答画面を作っていきます。本格的なデザインは気にせずに簡易的なものを作っていきます。

と言ってもからコード書くのは大変ですし、学ぶのにも時間がかかるので今回もClaudeに手伝ってもらおうと思います。それで最初書いてもらったコードがこちら

page.jsx

import QuestionForm from './components/QuestionForm';

const HomePage = () => {
  return (
    <div>
      <h1>RAGシステム</h1>
      <QuestionForm />
    </div>
  )
}

export default HomePage;

QuestionForm.jsx

import { useState } from 'react';

const QuestionForm = () => {
  const [question, setQuestion] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 質問をサブミットする処理をここに書く
    console.log('Submitted question:', question);
    setQuestion('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={question}
        onChange={(e) => setQuestion(e.target.value)}
        placeholder="質問を入力してください"
        rows={5}
      />
      <button type="submit">送信</button>
    </form>
  )
}

export default QuestionForm;

ちなみに上記の書いてる内容はよくわかってないのでこっちはChat-GPTに解説してもらってました。新卒の時の研修で書いたHTMLやJSを思い出します。

RAGを開発してみたい！ので簡単なものでもいいので作ってみよう！part4

Fri, 19 Apr 2024 00:00:00 +0000

前回で一通り作りたいものが作れたのでこの先はWebアプリ化できないかな～？という緩い感じで進めていこうと思います。

前回行ったのは

検索クエリのベクトル化
コサイン類似度の計算

今回行ったのは

pdfファイルの全データベクトル化(途中で断念)
Web画面の作成(一部)

pdfファイルのベクトル化に関しては前回やったのでそれをfor文で回してます。pdfは1つ1つ出力するようにして、後ほど全体を結合しようとしていました。

file_path_list = glob.glob(input_pdf+'/*.pdf')
for pdf_path in file_path_list:
    # 前回やったベクトル化
    ・
    ・
    ・
    # JSON形式でベクトルデータベースを保存
    with open(json_save_name, 'w', encoding='utf-8') as file:
        json.dump(vector_database, file, ensure_ascii=False, indent=4)

大体2500ファイルぐらいベクトル化したのですが、9$くらいになってました。残り12000ファイルほどあるので少し時間がかかるのと料金も計50$近くになりそうだったのでいったん中断しました。

別の作業としてWeb画面を作っていこうと思ったのでまずは技術の選定からですね。ここに関してはChat-GPTとClaude両方に聞いてみましたが、Claudeのほうを採用しました。こんな感じです。Googleストアと書いたんですが1ミリも予定はないです（笑）

返ってきた回答がこちら

ということでおすすめにしたがってNext.jsにしようと思います。ユーザーのストレスを考えるのは今じゃなくてもいいんですがせっかく自身のスキルにもつながるので選びました。

ちなみにおススメした理由とかわかってなかったのでいくつか聞いてみました。

なぜNext.js(React)+Tailwind CSS や Vue.js はreactに比べてユーザーにストレスがかかりにくいのですか？
単一ページアプリケーション(SPA)とはどういうものでしょうか？
Flash Of Unstyled Content(FOUC)や、SPAでよくみられるバンク画面の発生とはどういったものでしょうか？
バックエンドではpythonを使用しているのでpythonフレームワークのflaskやdjangoという選択肢もあったと思いますが、なぜ候補から外れたのでしょうか？
フロントエンドフレームワークとバックエンドWebフレームワークの違いは何ですか？

そこからいろいろ聞いていた結果、Next.jsとFlask(python)の組み合わせにしようと思います。Webについては全く分からなかったので色々聞いてみました。流れとしては以下の感じです。

Web画面から入力を受け取る
画面から受け取った入力を引数としてpythonに渡す
pythonで引数をベクトル化しコサイン類似度の計算を行う
pdfファイルを全てベクトル化して結合したものを取得して、入力に類似しているファイルのタイトルと内容を取得する
取得したタイトルと内容を画面に表示する

1と5がNext.js、2がflask、3と4がpythonという流れでやる予定で、今回は1をやっていきます。

というわけでまたClaudeに使い方を聞いて進めていきます。

これでインストールとプロジェクトの作成が完了して、デフォルトの画面が表示されるようになりました。こんな感じです。

私はvscodeを使っているのですがターミナルからうまく実行できてないので少し調べる必要がありますね。それから"AppData/Roaming"の中にnpmというファイルが必要なのですが、インストールで作成されなかったので手動で作成したりと少し導入で手間取ってしまいました。

今回はここまでにして次回は簡単な画面を作成していこうと思います。恐らく稚拙な画面になりそうですがまずは作るとこらからです。ではでは。

Next-Js on Xainome Blog

RAGを開発してみたい！ので簡単なものでもいいので作ってみよう！part5

RAGを開発してみたい！ので簡単なものでもいいので作ってみよう！part4