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を思い出します。

デバッグ on Xainome Blog

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