התקן את אפליקציית ChatGPT באופן מקומי: מדוע ואיך לעשות זאת

ChatGPT נועד לספק תשובות מהירות לשאילתות שלך. אתה יכול לגשת ל-ChatGPT באופן מקוון; עם זאת, אם אתה מעדיף להתקין את האפליקציה, מדריך זה יכול לעזור.

נדון בשיטה שלב אחר שלב להתקנת אפליקציית ChatGPT באופן מקומי, כך שתוכל להשתמש בה כדי לקבל תגובות מהירות יותר עם פרטיות מוגברת.

למה להתקין את אפליקציית ChatGPT באופן מקומי?

ישנם מספר יתרונות של התקנת דגם AI במחשב שלך, חלקם מוזכרים כאן:

• מהיר ומגיב - אתה יכול להפעיל אותו ישירות במכשיר שלך. המשמעות היא שהאפליקציה תשתמש במעבד ובזיכרון של המכשיר, שיפעלו ביעילות רבה יותר מאשר בעבודה על השרת המרוחק.
• הגברת הפרטיות והאבטחה - שימוש מקומי באפליקציה ישפר את הפרטיות והאבטחה של הנתונים הפרטיים שלך. הנתונים לא יועברו עוד מהמכשיר שלך לשרת מרוחק.
• ניתן להתאמה אישית – התקנת האפליקציה מקומית תאפשר לכם להתאים את האפליקציה בהתאם להעדפות ולדרישות שלכם. ניתן לשנות את ממשק המשתמש, פונקציות האפליקציה ועוד.
• אין צורך להתמודד עם זמן השבתה - אם האפליקציה מותקנת מקומית, לא תצטרך להיכנס שוב או לחכות שהשרת יגיב אם הוא תפוס. מכאן שאין זמן השבתה.

כיצד אוכל להתקין את אפליקציית ChatGPT באופן מקומי?

לפני שתתחיל בצעדים להתקנת אפליקציית ChatGPT באופן מקומי, עליך לשקול לבצע את הבדיקות הבאות:

• ראשית, התקן את התוסף Node.js בקוד VS.
• לאחר מכן, קבל סיומת Git בקוד VS.

1. צור תיקיה ופתח אותה ב-Visual Studio Code

1. לחץ לחיצה ימנית על החלל הריק בשולחן העבודה, בחר חָדָשׁ, לאחר מכן תיקיה.
2. שנה את שם התיקיה בתור Open_AI_ChatGPT אפליקציה.
3. הקש על חלונות סוג מפתח Visual Studio Code, ולחץ לִפְתוֹחַ.
4. עבור אל קוֹבֶץ תפריט ובחר תיקייה פתוחה.
5. בחר את התיקיה ולחץ בחר תיקייה.
6. לאחר מכן, עבור אל נוף תפריט ובחר מָסוֹף.

2. בדוק אם Node.js מותקן

1. הקלד את הקוד הבא כדי לבדוק אם מותקן אצלך node.js והקש Enter: node -v
2. אם זה מגיע עם שגיאה, המשך לשלב הבא.
3. עבור אל אתר Node.js והורד את Node.js
4. לחץ פעמיים כדי לפתוח את קובץ ההתקנה. נְקִישָׁה הַבָּא.
5. כעת קבל את כל התנאים וההגבלות ולחץ הַבָּא.
6. נְקִישָׁה הַבָּא בכל החלונות הבאים, ולאחר מכן לחץ להתקין כדי להתחיל את ההתקנה.
7. כעת הפעל מחדש את Visual Studio Code.
8. לאחר שתסיים, חזור למסוף, הקלד את הקוד הבא כדי ליצור א מאגר JavaScript של וניל, והקש Enter: npm ליצור [מוגן באימייל] לקוח --תבנית וניל
9. לאחר מכן, הקלד י והקש Enter.
10. בחר וניל כמסגרת כאשר תתבקש.
11. בחר JavaScript כגרסה כשנשאל. תראה קבצים ותיקיות רבים שנוצרו תחת תיקיית האפליקציה Open_AI_ChatGPT.

3. התקנת תלות

1. הקלד את הפקודה הבאה כדי להיכנס לספריית הלקוח והקש Enter: cd .\client\
2. לאחר מכן, העתק והדבק את הפקודה הבאה והקש Enter: npm להתקין
3. עבור לקישור הזה והורד את התיקיה הדחוסה בשם assets.
4. כעת העתק את תיקיית הנכסים שחולצו לתיקיית הלקוח.
5. לאחר מכן, הסר את הקבצים vite.svg ו-counter.js.
6. לבסוף, הזיזו את קובץ favicon מ ה נכסים תיקייה ל- פּוּמְבֵּי תיקייה.

4. כתוב קוד ב-style.css

1. העתק והדבק את הקוד המוזכר להלן כפי שהוא בתיקייה style.css:
   @import url(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[מוגן באימייל];300;400;500;700;800;900&display=swap");
* {
 שוליים: 0;
 ריפוד: 0;
 גודל קופסא: border-box;
 font-family: "Alegreya Sans", sans-serif;
}
גוף {
רקע: #343541;
}
#app {
רוחב: 100vw;
גובה: 100Vh;
רקע: #343541;
תצוגה: flex;
flex-direction: עמודה;
align-items: center;
להצדיק-תוכן: רווח-בין;
}
#chat_container {
flex: 1;
רוחב: 100%;
גובה: 100%;
overflow-y: גלילה;
תצוגה: flex;
flex-direction: עמודה;
פער: 10px;
-ms-overflow-style: אין;
scrollbar-width: אין;
padding-bottom: 20px;
גלילה-התנהגות: חלקה;
}
/* מסתיר את פס הגלילה */
#chat_container::-webkit-scrollbar {
אל תציג דבר;
}
.wrapper {
רוחב: 100%;
ריפוד: 15px;
}
.ai {
רקע: #40414F;
}
.chat {
רוחב: 100%;
רוחב מקסימלי: 1280px;
שוליים: 0 אוטומטי;
 תצוגה: flex;
flex-direction: שורה;
align-items: flex-start;
פער: 10px;
}
.profile {
רוחב: 36 פיקסלים;
גובה: 36 פיקסלים;
border-radius: 5px;
רקע: #5436DA;
תצוגה: flex;
להצדיק-תוכן: מרכז;
align-items: center;
}
.ai .profile {
רקע: #10a37f;
}
.profile img {
רוחב: 60%;
גובה: 60%;
התאמה לאובייקט: מכיל;
}
.message {
flex: 1;
צבע: #dcdcdc;
גודל גופן: 20px;
רוחב מקסימלי: 100%;
overflow-x: גלילה;
/*
* רווח לבן מתייחס לכל רווחים, טאבים או תווים בשורה חדשה המשמשים לעיצוב קוד ה-CSS
* מציין כיצד יש לטפל ברווח לבן בתוך אלמנט. זה דומה לערך "pre" שאומר לדפדפן להתייחס לכל הרווח הלבן כמשמעותי ולשמור עליו בדיוק כפי שהוא מופיע בקוד המקור.
* ערך ה-pre-wrap מאפשר לדפדפן לעטוף שורות טקסט ארוכות למספר שורות במידת הצורך.
* ערך ברירת המחדל של מאפיין הרווח הלבן ב-CSS הוא "רגיל". זה אומר לדפדפן לכווץ תווי רווח לבן מרובים לרווח אחד, ולעטוף טקסט על גבי שורות מרובות לפי הצורך כדי להתאים בתוך המיכל שלו.
*/
רווח לבן: לעטוף מראש;
-ms-overflow-style: אין;
scrollbar-width: none;}
/* מסתיר את פס הגלילה */
.message::-webkit-scrollbar {
אל תציג דבר;
}
טופס {
רוחב: 100%;
רוחב מקסימלי: 1280px;
שוליים: 0 אוטומטי;
ריפוד: 10px;
רקע: #40414F;
תצוגה: flex;
flex-direction: שורה;
פער: 10px;
}
textarea {
רוחב: 100%;
צבע: #fff;
גודל גופן: 18px;
ריפוד: 10px;
רקע: שקוף;
border-radius: 5px;
גבול: אין;
מתאר: אין;
}
כפתור {
מתאר: 0;
גבול: 0; סמן: מצביע;
רקע: שקוף;
}
form img {
רוחב: 30px;
גובה: 30 פיקסלים;
}

5. כתוב קוד ב- Index.html

1. הקלד את הקוד הבא בקובץ index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. הקש Ctrl + S כדי לשמור את הסקריפט.
3. עבור לחלונית השמאלית ב-Visual Studio Code ושנה את שם main.js ל-script.js.

6. הפעל פקודות בטרמינל

1. עבור אל הטרמינל ולחץ Ctrl + ג כדי לראות היכן היית כותב פקודות. אתה צריך להיות בתיקיית הלקוח. אם לא, הקלד את הפקודה הבאה והקש Enter: לקוח CD
2. הקלד את הפקודה הבאה והקש Enter: npm run dev
3. תקבל כתובת אינטרנט כדי לראות איך זה נראה עד כה. אם אתה מקבל את השגיאה המוזכרת בצילום המסך, המשך קדימה.

7. כתוב קוד בקובץ script.js

1. הסר את התוכן הקיים בקובץ script.js, העתק והדבק את הקוד הבא:
   ייבוא ​​בוט מ-'./assets/bot.svg'
   יבא משתמש מ-'./assets/user.svg'
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   תן loadInterval;
   טוען פונקציות (אלמנט) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // עדכן את תוכן הטקסט של מחוון הטעינה
   element.textContent += '.';
   // אם מחוון הטעינה הגיע לשלוש נקודות, אפס אותו
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   function typeText (אלמנט, טקסט) {
   תן אינדקס = 0;
   let interval = setInterval(() => {
   if (index < text.length) {
   element.innerHTML += text.charAt (אינדקס);
   index++;
   } אחר {
   clearInterval (מרווח);
   }
   }, 20)
   }
   function generUniqueId() {
   const timestamp = Date.now();
   const randomNumber = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   החזר `id-${timestamp}-${hexadecimalString}`;
   }
   function chatStripe (isAi, value, uniqueId) {
   לחזור (
   `
   
   
   

   
   

   
   src=${isAi? בוט: משתמש}
   alt="${isAi? 'bot': 'משתמש'}"
   />
   

   
   

   ${value}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = אסינכרון (ה) => {
   e.preventDefault();
   const data = New FormData (טופס);
   // רצועת הצ'אט של המשתמש
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // כדי לנקות את קלט אזור הטקסט
   form.reset();
   // הצ'אט של הבוט
   const uniqueId = generUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // כדי להתמקד גלול לתחתית
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // הודעה ספציפית div
   const messageDiv = document.getElementById (זיהוי ייחודי);
   // messageDiv.innerHTML = "..."
   טוען (messageDiv);
   const response = await fetch(' http://localhost: 8001/', {
   שיטה: 'POST',
   כותרות: {
   'Content-Type': 'application/json'
   },
   body: JSON.stringify({
   prompt: 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) => {
   if (e.keyCode 13) {
   handleSubmit (ה);
   }
   })
2. לאחר מכן, הקש Ctrl + ס כדי לשמור את התסריט.

8. צור תיקייה חדשה בתוך תיקיית האפליקציה Open_AI_ChatGPT והתקן מודולים

1. צור תיקיה ב- פתח את_AI_ChatGPT אפליקציית תיקיה ושמות לה שרת.
2. לִפְתוֹחַ מָסוֹף ולחץ Crtl + ג כדי לעצור את האפליקציה הפועלת.
3. הקלד את הפקודה הבאה והקש Enter כדי לצאת מתיקיית הלקוח: תקליטור..
4. העתק והדבק את הפקודה הבאה כדי להזין את שרת ספרייה והקש Enter: שרת CD
5. הקלד את הפקודה הבאה והקש Enter כדי ליצור קובץ package.json בתיקיית השרת: npm init -y
6. כדי להתקין תלות, הקלד את הפקודה הבאה והקש Enter. פעולה זו תיצור קובץ חדש בשם package-lock.json: npm להתקין cors dotenv express nodemon openai

9. צור את מפתח ה-API והזכר אותו ב-.env

1. עבור אל פתח את אתר API ולהיכנס.
2. כעת לחץ אישי ובחר הצג מפתחות API.
3. נְקִישָׁה צור מפתח סודי חדש ולהעתיק את המפתח.
4. בתוך ה שרת תיקיה, צור קובץ חדש ותן לו שם .env.
5. בתוך ה .env קובץ, הקלד את הקוד הבא לאחר החלפת מפתח ה-API במפתח שהעתקת מאתר Open API והקש Enter: OPENAI_API_KEY="מפתח ה-API"

10. צור קובץ חדש server.js וכתוב סקריפט

1. צור קובץ חדש בתיקיית השרת ושנה את שמו של server.js.
2. העתק והדבק את הסקריפט הבא בתוך קובץ זה ולחץ Ctrl+ס כדי לשמור את הקובץ:

ייבוא ​​אקספרס מ'אקספרס';
ייבוא ​​* כ-dotenv מ-'dotenv';
ייבוא ​​קורים מ'cors';
ייבא { Configuration, OpenAIApi } מ'openai';
dotenv.config();
const configuration = תצורה חדשה({
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 prompt = req.body.prompt;
const response = await openai.createCompletion({
דגם: "text-davinci-003",
הנחיה: `${prompt}`,
טמפרטורה: 0, // ערכים גבוהים יותר פירושו שהמודל ייקח יותר סיכונים.
max_tokens: 3000, // המספר המרבי של אסימונים להפקה בהשלמה. לרוב הדגמים יש אורך הקשר של 2048 אסימונים (למעט הדגמים החדשים ביותר, התומכים ב-4096).
top_p: 1, // חלופה לדגימה עם טמפרטורה, הנקראת דגימת גרעין
frequency_penalty: 0.5, // מספר בין -2.0 ל-2.0. ערכים חיוביים מענישים אסימונים חדשים על סמך התדירות הקיימת שלהם בטקסט עד כה, מה שמקטין את הסבירות של המודל לחזור על אותה שורה מִלָה בְּמִלָה.
עונש_נוכחות: 0, // מספר בין -2.0 ל-2.0. ערכים חיוביים מענישים אסימונים חדשים על סמך האם הם מופיעים בטקסט עד כה, ומגדילים את הסבירות של המודל לדבר על נושאים חדשים.
});
res.status (200).send({
bot: response.data.choices[0].text
});
} תפוס (שגיאה) {
console.log (שגיאה);
res.status (500).send (שגיאה || 'משהו השתבש');
}
});
app.listen (5000, () => console.log('שרת AI התחיל ב http://localhost: 8001'));

11. כתוב קוד ב-package.json

1. העתק והדבק את הקוד הבא ולחץ Ctrl + ס לשמור:

{
"שם שרת",
"version": "1.0.0",
"תיאור": "",
"type": "מודול",
"סקריפטים":{
"server": "שרת nodemon"
},
"מילות מפתח": [],
"author": "",
"license": "ISC",
"תלות": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. בדוק את הקוד

1. כעת, לחץ על תפריט המסוף בקוד Visual Studio ובחר מסוף שפך.
2. יהיו לך שני מסופים; בואו נקרא להם Terminal Server ו-Terminal Client.
3. בשרת מסוף, הקש Ctrl + C. הקלד את הפקודה הבאה כדי להיכנס לספריית השרת, והקש Enter: cd server
4. לאחר מכן, העתק והדבק את הפקודה הבאה והקש Enter כדי להפעיל את השרת: שרת npm להפעיל
5. לחץ על הקישור המוצג, ותראה את ההודעה שלום מ-GPT בעמוד
6. כעת ב-Terminal Client, הקש Ctrl + C. הקלד את הפקודה הבאה כדי להיכנס לספריית הלקוח, והקש Enter: לקוח CD
7. העתק והדבק את הפקודה הבאה והקש Enter כדי להפעיל את הלקוח: npm run dev
8. לאחר מכן, לחץ על הקישור והקלד שלום מה שלומך; אתה יכול לראות שהבוט מחפש תשובה.

13. התקן את אפליקציית Git Bash והגדר אותה עם חשבון GitHub שלך

1. אתה יכול לדלג על שלב זה אם כבר הגדרת אותו. הורד את אפליקציית Git Bash.
2. היכנס לחשבון שלך חשבון GitHub.
3. בזמן ההתקנה, נא לשמור אותו בתיקייה Open_AI_ChatGPT.
4. לאחר מכן, הקש על מקש Windows, הקלד ערוך את משתני סביבת המערכת ולחץ על פתח.
5. לחץ פעמיים על הנתיב ולחץ על ערוך.
6. הוסף את הנתיב של קובץ git כאן, ולאחר מכן לחץ על אישור ואישור.
7. הפעל את Git Bash, הקלד את הפקודה הבאה לאחר החלפת שם המשתמש בשם המשתמש בחשבון GitHub שלך, והקש Enter: git config --global user.name "שם משתמש"
8. העתק והדבק את הפקודה הבאה לאחר החלפת כתובת הדוא"ל בכתובת הדוא"ל שלך והקש Enter: git config --global user.email "כתובת דואר אלקטרוני"
9. עבור לחשבון GitHub, לחץ על החץ הנפתח ובחר הגדרות. כעת עבור להגדרות מפתחים.
10. הרחב את אסימוני הגישה האישיים ובחר באסימוניות עדינות. לחץ על צור אסימון חדש.
11. שנה את שמו ובחר את התוקף. לאחר מכן, העתק את האסימון ושמור אותו בפנקס רשימות.
12. הקלד את הפקודות הבאות אחת אחת והקש Enter: git config --global credential.helper wincredgit credential-manager-core configure
13. עקוב אחר ההנחיות כדי להגדיר אותו והדבק את האסימון שנוצר כאשר תתבקש להזין את הסיסמה שלך.
14. סגור את אפליקציית Git Bash.

14. צור מאגר ופרסם קוד

14.1 צור מאגר

1. היכנס לחשבון שלך חשבון GitHub.
2. אתר את חץ נפתח ליד תמונת הפרופיל שלך ובחר המאגרים שלך.
3. נְקִישָׁה חָדָשׁ.
4. הקלד את ה שם המאגר, בחר פּוּמְבֵּי, ולחץ צור מאגר.
5. עבור לקוד VS, לחץ Ctrl + ג, וודא שאתה נמצא באפליקציית Open_AI_ChatGPT או בתיקיית השורש. אם לא, הקלד את הקוד הבא והקש Enter: CD
6. לאחר מכן, ב- שרת התיקיה, הוסף קובץ חדש ותן לו שם .gitignore.
7. בתוך ה .gitignore קובץ, הקלד את הקוד הבא כדי לוודא .env ו node_modules לא נדחפים פנימה GitHub:
   .env
node_modules

14.2 פרסם את הקוד שלך במאגר

1. עבור אל קוד VS, העתק והדבק את הפקודות הבאות אחת אחת והקש Enter לאחר כל פקודה: git initgit commit -m "התחייבות ראשונה"git branch -M main
2. הקלד את הפקודה הבאה לאחר החלפת ה- https://github.com/SrishtiSisodia/CHAT-BOT-APP עם כתובת המאגר שלך המוזכרת ב-GitHub:
   git מרחוק הוסף מקור https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. כעת כדי לדחוף את הקוד, הקלד את הפקודה הבאה והקש Enter: git push -u origin main
4. טען מחדש את דף GitHub שלך, והקוד שלך יועלה לשם.
5. בקוד VS, הקש Ctrl + ג גם ב-Terminal Server וגם ב-Terminal Client כדי למנוע מהם לפעול.

15. פרוס את השרת

1. עבור לעיבוד אתר אינטרנט והירשם באמצעות GitHub.
2. תראה את לוח המחוונים, לחץ על חדש ולאחר מכן בחר שירותי אינטרנט.
3. אתר Connect מאגר חדש, הזן את כתובת ה-URL של האחסון שלך תחת Public Git Repository ולחץ על Connect.
4. בעמוד הבא, הוסף שם, בחר את האזור, בחר Branch as main, בחר Root Directory כשרת, בחר Environment as Node, והקלד התחל פקודה - הפעל שרת npm
5. לחץ על חינם ולחץ על צור שירות אינטרנט.
6. השרת ייפרס; אנא המתן עד שסטטוס הפריסה יהיה חי.
7. עבור אל איכות הסביבה; עבור מפתח, הקלד OpenAI_API_Key, ועבור ערך, הקלד את מפתח ה-API הסודי שיצרת בשלב 9.
8. כעת תהיה לך כתובת אינטרנט; הוסף אותו לקובץ script.js. לאחר מכן, בקוד VS, עבור לקובץ script.js והחלף את כתובת האינטרנט בקוד המוזכר להלן בכתובת האינטרנט החדשה מהאתר המעובד:
   const response = await fetch(' http://localhost: 8001/'const response = await fetch(' https://chatgptapp-lswi.onrender.com/'
9. על VS קוד טרמינל, הקלד את הפקודות הבאות אחת אחת והקש Enter לאחר כל פקודה: git להוסיף.git commit -m 'עדכן את כתובת האתר של השרת'דחיפה

16. פרוס את הקצה הקדמי

1. עבור אל אתר Vercel.
2. נְקִישָׁה התחל בפריסה.
3. תַחַת ייבוא ​​מאגר Git, לחץ המשך עם GitHub.
4. הקלד את שלך שם משתמש GitHub ובחר את שם המאגר ולחץ יְבוּא.
5. תַחַת הגדר פרויקט, בחר שם.
6. לשנות את ה ספריית שורש מ / ל לָקוּחַ, לחץ לְהַמשִׁיך ו לפרוס.
7. חזור ללוח המחוונים שלך ולחץ לְבַקֵר.
8. כעת תוכל לראות את האפליקציה.

אז אלו הם השלבים המפורטים להתקנת אפליקציית ChatGPT באופן מקומי במכשיר שלך. תקועים איפשהו? אנא ציינו את השאלות או החששות שלכם בסעיף ההערות למטה.