ChatGPT アプリをローカルにインストールする: その理由と方法

チャットGPT クエリに迅速に応答できるように設計されています。 ChatGPT にオンラインでアクセスできます。 ただし、アプリをインストールしたい場合は、このガイドが役に立ちます。

ChatGPT アプリをローカルにインストールして、プライバシーを強化してより迅速な応答を得るために使用できるようにするための段階的な方法について説明します。

ChatGPT アプリをローカルにインストールする理由

AI モデルをコンピューターにインストールすると、いくつかの利点があり、その一部をここで説明します。

• 高速で応答性が高い – デバイスで直接実行できます。 これは、アプリがデバイスのプロセッサとメモリを使用することを意味し、リモート サーバーで作業する場合よりも効率的に動作します。
• プライバシーとセキュリティの向上 – アプリをローカルで使用すると、個人データのプライバシーとセキュリティが強化されます。 データはデバイスからリモート サーバーに転送されなくなります。
• カスタマイズ可能 – アプリをローカルにインストールすると、好みや要件に応じてアプリをカスタマイズできます。 ユーザー インターフェイス、アプリの機能などを変更できます。
instagram story viewer
• ダウンタイムに直面する必要はありません – アプリがローカルにインストールされている場合、再度サインインしたり、サーバーがビジー状態の場合にサーバーが応答するのを待つ必要はありません。 したがって、ダウンタイムはありません。

ChatGPT アプリをローカルにインストールするにはどうすればよいですか?

ChatGPT アプリをローカルにインストールする手順を実行する前に、次のチェックの実行を検討する必要があります。

• まず、Node.js 拡張機能を VS コードにインストールします。
• 次に、VS コードで Git 拡張機能を取得します。

1. フォルダーを作成して Visual Studio Code で開く

1. デスクトップの空きスペースを右クリックして、 新しい、 それから フォルダ.
2. フォルダの名前を次のように変更します Open_AI_ChatGPT アプリ。
3. を押します。 ウィンドウズ キー、タイプ ビジュアル スタジオ コードをクリックし、 開ける.
4. に行く ファイル メニュー、選択 開いたフォルダ.
5. フォルダを選択してクリック フォルダーを選択.
6. 次に、 意見 メニューと選択 「ターミナル」.

2. Node.js がインストールされているかどうかを確認する

1. 次のコードを入力して、node.js がインストールされているかどうかを確認し、Enter キーを押します。 ノード -v
2. エラーが発生した場合は、次の手順に進みます。
3. に行く Node.js Web サイトとダウンロード Node.js
4. ダブルクリックして、インストーラー ファイルを開きます。 クリック 次.
5. すべての利用規約に同意してクリックします 次.
6. クリック 次 次のすべてのウィンドウで、 インストール インストールを開始します。
7. Visual Studio Code を再起動します。
8. 完了したら、ターミナルに戻り、次のコードを入力して バニラ JavaScript リポジトリをクリックして、Enter キーを押します。 npm 作成 [メール保護] client --template バニラ
9. 次に、入力します よ し、Enter を押します。
10. 選択する バニラ プロンプトが表示されたときのフレームワークとして。
11. 選択する JavaScript 尋ねられたときの変形として。 Open_AI_ChatGPT アプリ フォルダーの下に作成された多くのファイルとフォルダーが表示されます。

3. 依存関係をインストールする

1. 次のコマンドを入力してクライアント ディレクトリに入り、Enter キーを押します。 cd .\クライアント\
2. 次に、次のコマンドをコピーして貼り付け、Enter キーを押します。 npm インストール
3. このリンクにアクセスして、assets という名前の zip フォルダーをダウンロードします。
4. 抽出したアセット フォルダーをクライアント フォルダーにコピーします。
5. 次に、vite.svg ファイルと counter.js ファイルを削除します。
6. 最後に、 ファビコンファイル から 資産 フォルダに 公共 フォルダ。

4. style.css にコードを書く

1. 以下のコードをそのままコピーして、style.css フォルダーに貼り付けます。
   @インポート URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[メール保護];300;400;500;700;800;900&display=swap");
* {
 マージン: 0;
 パディング: 0;
 ボックスサイズ: ボーダーボックス;
 font-family: "Alegreya Sans", sans-serif;
}
体 {
背景: #343541;
}
＃アプリ {
幅: 100vw;
高さ: 100vh;
背景: #343541;
表示: フレックス;
フレックス方向: 列;
整列項目: センター;
コンテンツの正当化: スペース間の;
}
#chat_container {
フレックス: 1;
幅: 100%;
高さ: 100%;
オーバーフロー-y: スクロール;
表示: フレックス;
フレックス方向: 列;
ギャップ: 10px;
-ms オーバーフロー スタイル: なし;
スクロールバーの幅: なし;
パディングボトム: 20px;
スクロール動作: スムーズ。
}
/* スクロールバーを隠す */
#chat_container::-webkit-scrollbar {
表示: なし;
}
.wrapper {
幅: 100%;
パディング: 15px;
}
.ai {
背景: #40414F;
}
。チャット {
幅: 100%;
最大幅: 1280px;
マージン: 0 自動;
 表示: フレックス;
フレックス方向: 行;
align-items: flex-start;
ギャップ: 10px;
}
.プロファイル {
幅: 36px;
高さ: 36px;
ボーダー半径: 5px;
背景: #5436DA;
表示: フレックス;
正当化コンテンツ: センター;
整列項目: センター;
}
.ai .profile {
背景: #10a37f;
}
.プロフィール画像 {
幅: 60%;
高さ: 60%;
object-fit: 含む;
}
。メッセージ {
フレックス: 1;
色: #dcdcdc;
フォントサイズ: 20px;
最大幅: 100%;
オーバーフロー-x: スクロール;
/*
* 空白とは、CSS コードの書式設定に使用されるスペース、タブ、または改行文字を指します
* 要素内の空白の処理方法を指定します。 これは「pre」値に似ており、すべての空白を重要なものとして扱い、ソース コードに表示されるとおりに正確に保持するようブラウザに指示します。
* pre-wrap 値により、ブラウザーは必要に応じて長いテキスト行を複数行に折り返すことができます。
* CSS の white-space プロパティのデフォルト値は「normal」です。 これにより、複数の空白文字を 1 つのスペースにまとめ、コンテナ内に収まるように必要に応じてテキストを複数行に折り返すようにブラウザに指示します。
*/
空白: プレラップ;
-ms オーバーフロー スタイル: なし;
スクロールバーの幅: なし;}
/* スクロールバーを隠す */
.message::-webkit-scrollbar {
表示: なし;
}
形状 {
幅: 100%;
最大幅: 1280px;
マージン: 0 自動;
パディング: 10px;
背景: #40414F;
表示: フレックス;
フレックス方向: 行;
ギャップ: 10px;
}
テキストエリア {
幅: 100%;
色: #fff;
フォントサイズ: 18px;
パディング: 10px;
バックグラウンド: 透明;
ボーダー半径: 5px;
ボーダー: なし;
アウトライン: なし;
}
ボタン {
アウトライン: 0;
ボーダー: 0; カーソル: ポインタ;
バックグラウンド: 透明;
}
フォーム画像 {
幅: 30px;
高さ: 30px;
}

5. Index.html にコードを書く

1. index.html ファイルに次のコードを入力します。
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Ctrl + S を押してスクリプトを保存します。
3. Visual Studio Code の左側のペインに移動し、main.js の名前を script.js に変更します。

6. ターミナルでコマンドを実行する

1. ターミナルに移動して押します コントロール + C コマンドを書く場所を確認します。 クライアントフォルダーにいる必要があります。 そうでない場合は、次のコマンドを入力して Enter キーを押します。 CDクライアント
2. 次のコマンドを入力して、Enter キーを押します。 npm 実行 dev
3. これまでの様子を確認するための Web アドレスが表示されます。 スクリーンショットに記載されているエラーが発生した場合は、次に進みます。

7. script.js ファイルにコードを記述する

1. script.js ファイルにあるコンテンツを削除し、次のコードをコピーして貼り付けます。
   「./assets/bot.svg」からボットをインポート
   「./assets/user.svg」からユーザーをインポート
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   ロードインターバルをさせてください。
   関数ローダー (要素) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // ローディング インジケーターのテキスト コンテンツを更新します
   element.textContent += '.';
   // ローディング インジケータが 3 つのドットに達した場合は、リセットします
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   関数 typeText (要素、テキスト) {
   インデックスを = 0 にします。
   let interval = setInterval(() => {
   if (index < text.length) {
   element.innerHTML += text.charAt (インデックス);
   インデックス++;
   } それ以外 {
   clearInterval (間隔);
   }
   }, 20)
   }
   関数 generateUniqueId() {
   const タイムスタンプ = Date.now();
   const randomNumber = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}`;
   }
   関数chatStripe（isAi、値、uniqueId）{
   戻る （
   `
   
   
   

   
   

   
   src=${isAi? ボット: ユーザー}
   alt="${isAi? 'ボット': 'ユーザー'}"
   />
   

   
   

   ${値}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   const data = new FormData (フォーム);
   // ユーザーのチャットストライプ
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // テキストエリアの入力をクリアする
   フォーム.リセット();
   // ボットのチャットストライプ
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // フォーカスを下にスクロールします
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // 特定のメッセージ div
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   ローダー (messageDiv);
   const レスポンス = await fetch(' http://localhost: 8001/', {
   メソッド: 'POST',
   ヘッダー: {
   'コンテンツ タイプ': 'アプリケーション/json'
   },
   本体: JSON.stringify({
   プロンプト: data.get('prompt')
   })
   })
   clearInterval (loadInterval);
   messageDiv.innerHTML = '';
   if (response.ok) {
   const data = await response.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } それ以外 {
   const err = await response.text();
   messageDiv.innerHTML = "問題が発生しました";
   アラート (エラー);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   もし (e.keyCode 13) {
   handleSubmit (e);
   }
   })
2. 次に、 を押します。 コントロール + S スクリプトを保存します。

8. Open_AI_ChatGPT アプリ フォルダー内に新しいフォルダーを作成し、モジュールをインストールします。

1. にフォルダーを作成します。 Open_AI_ChatGPT アプリ フォルダに名前を付けます サーバ.
2. 開ける 「ターミナル」 を押す 基準 + C 実行中のアプリを停止します。
3. 次のコマンドを入力し、Enter キーを押して Client フォルダーから出ます。 CD ..
4. 次のコマンドをコピーして貼り付けて、 サーバ ディレクトリに移動し、Enter キーを押します。 CDサーバー
5. 次のコマンドを入力して Enter キーを押すと、サーバー フォルダーに package.json ファイルが生成されます。 npm init -y
6. 依存関係をインストールするには、次のコマンドを入力して Enter キーを押します。 これにより、package-lock.json という名前の新しいファイルが作成されます。 npm install cors dotenv express nodemon openai

9. API キーを生成し、.env に記述します

1. に行く API ウェブサイトを開く してログインします。
2. 今すぐクリック 個人的 そして選択 API キーを表示.
3. クリック 新しい秘密鍵を作成する キーをコピーします。
4. の中に サーバ フォルダー、新しいファイルを作成して名前を付ける .env.
5. の中に .env ファイルで、API キーを Open API Web サイトからコピーしたキーに置き換えた後、次のコードを入力し、Enter キーを押します。 OPENAI_API_KEY="API キー"

10. 新しいファイル server.js を作成し、スクリプトを記述します

1. サーバー フォルダーに新しいファイルを作成し、server.js という名前に変更します。
2. このファイル内に次のスクリプトをコピーして貼り付け、押します コントロール+S ファイルを保存するには:

「エクスプレス」からエクスプレスをインポートします。
import * as dotenv from 'dotenv';
「cors」からcorsをインポートします。
'openai' から { 構成、OpenAIApi } をインポートします。
dotenv.config();
const 構成 = 新しい構成({
apiKey: process.env. OPENAI_API_KEY、
});
const openai = 新しい OpenAIApi (構成);
const app = express();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
メッセージ: 'GPT からこんにちは!',
})
});
app.post('/', async (req, res) => {
試す {
const プロンプト = req.body.prompt;
const response = await openai.createCompletion({
モデル: "text-davinci-003",
プロンプト: `${prompt}`,
temperature: 0, // 値が高いほど、モデルがより多くのリスクを負うことを意味します。
max_tokens: 3000, // 補完で生成するトークンの最大数。 ほとんどのモデルのコンテキスト長は 2048 トークンです (4096 をサポートする最新のモデルを除く)。
top_p: 1, // 核サンプリングと呼ばれる、温度によるサンプリングの代替
frequency_penalty: 0.5, // -2.0 から 2.0 までの数値。 正の値は、以下に基づいて新しいトークンにペナルティを課します これまでのテキストでの既存の頻度であり、モデルが同じ行を繰り返す可能性を減らします 逐語的に。
presents_penalty: 0, // -2.0 から 2.0 までの数値。 正の値は、それまでのテキストに出現するかどうかに基づいて新しいトークンにペナルティを課し、モデルが新しいトピックについて話す可能性を高めます。
});
res.status (200).send({
ボット: response.data.choices[0].text
});
} キャッチ (エラー) {
console.log (エラー);
res.status (500).send (エラー || '問題が発生しました');
}
});
app.listen (5000, () => console.log('AI server started on http://localhost: 8001'));

11. package.json にコードを書く

1. 次のコードをコピーして貼り付け、押します コントロール + S 保存する：

{
"名前": "サーバー",
"バージョン": "1.0.0",
"説明"： ""、
"タイプ": "モジュール",
"スクリプト":{
"サーバー": "nodemon サーバー"
},
"キーワード": [],
"著者"： ""、
"ライセンス": "ISC",
「依存関係」: {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"エクスプレス": "^4.18.2",
"nodemon": "^2.0.20",
"開く": "^3.1.0"
}
}

12. コードをテストする

1. ここで、Visual Studio Code の [ターミナル] メニューをクリックし、[Spilled Terminal] を選択します。
2. 2 つの端末があります。 それらをターミナルサーバーとターミナルクライアントと呼びましょう。
3. ターミナル サーバーで、Ctrl + C を押します。 次のコマンドを入力してサーバー ディレクトリに入り、Enter キーを押します。 cd server
4. 次に、次のコマンドをコピーして貼り付け、Enter キーを押してサーバーを実行します。 npm 実行サーバー
5. 提示されたリンクをクリックすると、ページに「Hello from GPT」というメッセージが表示されます。
6. ターミナル クライアントで、Ctrl + C を押します。 次のコマンドを入力してクライアント ディレクトリに入り、Enter キーを押します。 CDクライアント
7. 次のコマンドをコピーして貼り付け、Enter キーを押してクライアントを実行します。 npm 実行 dev
8. 次に、リンクをクリックして入力します こんにちは、どうしてる; ボットが答えを探していることがわかります。

13. Git Bash アプリをインストールし、GitHub アカウントで構成する

1. すでに構成されている場合は、この手順をスキップできます。 Git Bash アプリをダウンロードする.
2. ログイン GitHub アカウント.
3. インストール時はOpen_AI_ChatGPTフォルダに保存してください。
4. 次に、Windows キーを押し、システム環境変数を編集して、[開く] をクリックします。
5. パスをダブルクリックし、[編集] をクリックします。
6. ここに git ファイルのパスを追加し、[OK] と [OK] をクリックします。
7. Git Bash を起動し、ユーザー名を GitHub アカウントのユーザー名に置き換えてから次のコマンドを入力し、Enter キーを押します。 git config --global user.name "ユーザー名"
8. メール アドレスを自分のメール アドレスに置き換えた後、次のコマンドをコピーして貼り付け、Enter キーを押します。 git config --global user.email "メールアドレス"
9. GitHub アカウントに移動し、ドロップダウン矢印をクリックして、[設定] を選択します。 次に、開発者設定に移動します。
10. [個人用アクセス トークン] を展開し、[きめ細かいトークン] を選択します。 [新しいトークンを生成] をクリックします。
11. 名前を変更し、有効性を選択します。 次に、トークンをコピーしてメモ帳に保存します。
12. 次のコマンドを 1 つずつ入力し、Enter キーを押します。 git config --global credential.helper wincredgit credential-manager-core 構成
13. プロンプトに従って構成し、パスワードの入力を求められたときに生成されたトークンを貼り付けます。
14. Git Bash アプリを閉じます。

14. リポジトリを作成してコードを公開する

14.1 リポジトリを作成する

1. ログイン GitHub アカウント.
2. を見つけます ドロップダウン矢印 プロフィール写真の横にある あなたのリポジトリ.
3. クリック 新しい.
4. 次のように入力します。 リポジトリ名、 選択する 公共をクリックし、 リポジトリを作成.
5. VSコードに移動し、押します コントロール + Cを開き、Open_AI_ChatGPT アプリまたはルート フォルダーにいることを確認します。 そうでない場合は、次のコードを入力して Enter キーを押します。 CD
6. 次に、 サーバ フォルダに新しいファイルを追加して名前を付けます .gitignore.
7. の中に .gitignore ファイルで、次のコードを入力して確認します .env と node_modules 押し込まれない GitHub:
   .env
node_modules

14.2 コードをリポジトリに公開する

1. VS コードに移動し、次のコマンドを 1 つずつコピーして貼り付け、コマンドごとに Enter キーを押します。 git初期化git commit -m "最初のコミット"git ブランチ -M メイン
2. を置き換えた後、次のコマンドを入力します。 https://github.com/SrishtiSisodia/CHAT-BOT-APP GitHub に記載されているリポジトリ アドレスを使用します。
   git リモートでオリジンを追加 https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. コードをプッシュするには、次のコマンドを入力して Enter キーを押します。 git push -u オリジン メイン
4. GitHub ページをリロードすると、そこにコードがアップロードされます。
5. VS コードで、 コントロール + C ターミナル サーバーとターミナル クライアントの両方で実行を停止します。

15. サーバーをデプロイする

1. レンダリングに移動 Web サイトにアクセスし、GitHub を使用してサインアップします。
2. ダッシュボードが表示されたら、[新規] をクリックし、[Web サービス] を選択します。
3. Connect a new repository を見つけ、Public Git repository の下にストレージの URL を入力して、Connect をクリックします。
4. 次のページで、名前を追加し、リージョンを選択し、メインとしてブランチを選択し、サーバーとしてルート ディレクトリを選択し、ノードとして環境を選択し、次のように入力します。 コマンドの開始 - npm サーバーの実行
5. [無料] をクリックし、[Web サービスの作成] をクリックします。
6. サーバーがデプロイされます。 展開ステータスがライブになるまでお待ちください。
7. 環境に移動します。 キーには OpenAI_API_Key と入力し、値にはステップ 9 で生成したシークレット API キーを入力します。
8. これで Web アドレスができました。 script.js ファイルに追加します。 次に、VS コードで script.js ファイルに移動し、以下に示すコードの Web アドレスを、レンダリングされた Web サイトの新しい Web アドレスに置き換えます。
   const レスポンス = await fetch(' http://localhost: 8001/'const レスポンス = await fetch(' https://chatgptapp-lswi.onrender.com/'
9. 上で VS コード ターミナル、次のコマンドを 1 つずつ入力し、コマンドごとに Enter キーを押します。 追加します。git commit -m 'サーバー URL を更新'ギットプッシュ

16. フロントエンドをデプロイする

1. ヴェルセルのウェブサイトへ.
2. クリック デプロイを開始.
3. 下 Git リポジトリのインポート、 クリック GitHub で続行.
4. 入力してください GitHub ユーザー名 をクリックしてリポジトリ名を選択し、 輸入.
5. 下 プロジェクトの構成で、名前を選択します。
6. 変更 ルートディレクトリ から / に クライアント、 クリック 続く と 配備.
7. ダッシュボードに戻り、 訪問.
8. アプリケーションが表示されるようになりました。

したがって、これらはChatGPTアプリをデバイスにローカルにインストールするための詳細な手順です. どこかで立ち往生？ 以下のコメント欄に質問や懸念事項を記載してください。