ChatGPTを会社に導入するために行ったソフトを改造してみた-その２

はじめに
変更したファイル
まとめ

はじめに

今回の続きです。

今回は、「Better ChatGPT」を改造していきたいと思います。

変更したファイル

以下のファイルを探して、変更してみてください。

1.「src\api\api.ts」

前回作ったPythonのプログラムに、入力された値を渡すロジックを追加しただけです。

if (response.status === 429 || !response.ok) {
    const text = await response.text();
    let error = text;
    if (text.includes('insufficient_quota')) {
      error +=
        '\nMessage from Better ChatGPT:\nWe recommend changing your API endpoint or API key';
    } else if (response.status === 429) {
      error += '\nRate limited!';
    }
    throw new Error(error);
  }

  // ここから追加----------
  var jsonString = "";
  messages.forEach((msg: MessageInterface) => {
    jsonString = JSON.stringify(msg);
  });
  fetch('http://192.168.0.1:5000/log', {
    method: 'POST',
    headers: {
      'Content-Type': 'text/plain'
    },
    body: jsonString
  });
　　// ここまで----------

  const stream = response.body;
  return stream;

２.「src\components\Menu\MenuOptions\Api.tsx」

共同で使うためAPIのKeyの設定を変更が出来ないように、押せなくしただけです。

return (
    <>
      <a
        className='flex py-2 px-2 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
        id='api-menu'
        onClick={() => setIsModalOpen(true)}
      >
        <PersonIcon />
        {t('api')}
      </a>
      // 以下の１行をコメント化
      {/* {isModalOpen && <ApiMenu setIsModalOpen={setIsModalOpen} />} */}
    </>
  );

３.「.env」

新規作成してください。中には、API KEYを設定します。

VITE_OPENAI_API_KEY=XXXXXXXXXXXXXXXXXXXXXX

４.「vite.config.ts」

外部からのアクセスを許可する設定を入れます。

export default defineConfig({
  plugins: [react(), wasm(), topLevelAwait()],
  resolve: {
    alias: {
      '@icon/': new URL('./src/assets/icons/', import.meta.url).pathname,
      '@type/': new URL('./src/types/', import.meta.url).pathname,
      '@store/': new URL('./src/store/', import.meta.url).pathname,
      '@hooks/': new URL('./src/hooks/', import.meta.url).pathname,
      '@constants/': new URL('./src/constants/', import.meta.url).pathname,
      '@api/': new URL('./src/api/', import.meta.url).pathname,
      '@components/': new URL('./src/components/', import.meta.url).pathname,
      '@utils/': new URL('./src/utils/', import.meta.url).pathname,
      '@src/': new URL('./src/', import.meta.url).pathname,
    },
  },
  base: './',
  // ここから追加----------
  server: {
    host: true
  }
  // ここまで----------
});

まとめ

いかがだったでしょうか？本当に微調整だけで、何とか会社でも使えそうですね。
もし良かったら参考にしてみてください。