Instalar la aplicación ChatGPT localmente: por qué y cómo hacerlo

ChatGPT está diseñado para proporcionar respuestas rápidas a sus consultas. Puede acceder a ChatGPT en línea; sin embargo, si prefieres instalar la aplicación, esta guía puede ayudarte.

Discutiremos el método paso a paso para instalar la aplicación ChatGPT localmente para que pueda usarla para obtener respuestas más rápidas con mayor privacidad.

¿Por qué instalar la aplicación ChatGPT localmente?

Hay varios beneficios de instalar el modelo AI en su computadora, algunos de los cuales se mencionan aquí:

• Rápido y receptivo – Puede ejecutarlo directamente en su dispositivo. Esto significa que la aplicación usará el procesador y la memoria del dispositivo, lo que funcionará de manera más eficiente que cuando se trabaja en el servidor remoto.
• Mayor privacidad y seguridad – El uso de la aplicación de forma local mejorará la privacidad y la seguridad de sus datos privados. Los datos ya no se transferirán desde su dispositivo a un servidor remoto.
• personalizable – Instalar la aplicación localmente le permitirá personalizar la aplicación según sus preferencias y requisitos. Puede cambiar la interfaz de usuario, las funciones de la aplicación y más.
• No hay necesidad de enfrentar el tiempo de inactividad – Si la aplicación está instalada localmente, no tendrá que volver a iniciar sesión ni esperar a que el servidor responda si está ocupado. Por lo tanto, no hay tiempo de inactividad.

¿Cómo puedo instalar la aplicación ChatGPT localmente?

Antes de seguir los pasos para instalar la aplicación ChatGPT localmente, debería considerar realizar las siguientes comprobaciones:

• Primero, instale la extensión Node.js en el código VS.
• Luego, obtenga la extensión Git en el código VS.

1. Cree una carpeta y ábrala en Visual Studio Code

1. Haga clic derecho en el espacio vacío en el escritorio, seleccione Nuevo, entonces Carpeta.
2. Cambiar el nombre de la carpeta como Abrir_AI_ChatGPT aplicación
3. presione el ventanas clave, tipo código de estudio visualy haga clic en Abierto.
4. Ve a la Archivo menú y seleccione Carpeta abierta.
5. Elija la carpeta y haga clic en Seleccione la carpeta.
6. A continuación, vaya a la Vista menú y seleccione Terminal.

2. Comprobar si Node.js está instalado

1. Escriba el siguiente código para verificar si tiene instalado node.js y presione Entrar: nodo -v
2. Si viene con un error, continúe con el siguiente paso.
3. Ve a la Sitio web de Node.js y descarga de Node.js
4. Haga doble clic para abrir el archivo del instalador. Hacer clic Próximo.
5. Ahora acepta todos los términos y condiciones y haz clic en Próximo.
6. Hacer clic Próximo en todas las ventanas siguientes, luego haga clic en Instalar para iniciar la instalación.
7. Ahora reinicie Visual Studio Code.
8. Una vez hecho esto, regrese a la terminal, escriba el siguiente código para crear un Repositorio de JavaScript de vainillay presione Entrar: npm crear [correo electrónico protegido] cliente --plantilla vainilla
9. A continuación, escriba Y y presione Entrar.
10. Seleccionar Vainilla como el marco cuando se le solicite.
11. Seleccionar JavaScript como una variante cuando se le preguntó. Verá muchos archivos y carpetas creados en la carpeta de la aplicación Open_AI_ChatGPT.

3. Instalar dependencias

1. Escriba el siguiente comando para ingresar al directorio del cliente y presione Entrar: cd .\cliente\
2. A continuación, copie y pegue el siguiente comando y presione Entrar: instalar npm
3. Vaya a este enlace y descargue la carpeta comprimida llamada assets.
4. Ahora copie la carpeta de activos extraídos a la carpeta del cliente.
5. A continuación, elimine los archivos vite.svg y counter.js.
6. Finalmente, mueva el archivo de icono de favoritos desde el activos carpeta a la público carpeta.

4. Escribir código en style.css

1. Copie y pegue el código mencionado a continuación tal como está en la carpeta style.css:
   @importar URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[correo electrónico protegido];300;400;500;700;800;900&display=intercambiar");
* {
 margen: 0;
 relleno: 0;
 tamaño de caja: cuadro de borde;
 familia tipográfica: "Alegreya Sans", sans-serif;
}
cuerpo {
fondo: #343541;
}
#aplicación {
ancho: 100vw;
altura: 100vh;
fondo: #343541;
pantalla: flexible;
dirección de flexión: columna;
alinear elementos: centro;
justificar-contenido: espacio-entre;
}
#chat_container {
flexión: 1;
ancho: 100%;
altura: 100%;
desbordamiento-y: desplazamiento;
pantalla: flexible;
dirección de flexión: columna;
espacio: 10px;
-ms-overflow-estilo: ninguno;
ancho de la barra de desplazamiento: ninguno;
parte inferior del relleno: 20px;
comportamiento de desplazamiento: suave;
}
/* oculta la barra de desplazamiento */
#chat_container::-webkit-barra de desplazamiento {
pantalla: ninguno;
}
.envoltorio {
ancho: 100%;
relleno: 15px;
}
.ai {
fondo: #40414F;
}
.charlar {
ancho: 100%;
ancho máximo: 1280px;
margen: 0 automático;
 pantalla: flexible;
dirección de flexión: fila;
alinear elementos: inicio flexible;
espacio: 10px;
}
.perfil {
ancho: 36px;
altura: 36px;
borde-radio: 5px;
fondo: #5436DA;
pantalla: flexible;
justificar-contenido: centro;
alinear elementos: centro;
}
.ai .perfil {
fondo: #10a37f;
}
.imagen de perfil {
ancho: 60%;
altura: 60%;
ajuste de objeto: contener;
}
.mensaje {
flexión: 1;
color: #dcdcdc;
tamaño de fuente: 20px;
ancho máximo: 100%;
desbordamiento-x: desplazamiento;
/*
* el espacio en blanco se refiere a cualquier espacio, tabulación o caracteres de nueva línea que se utilizan para formatear el código CSS
* especifica cómo deben manejarse los espacios en blanco dentro de un elemento. Es similar al valor "pre", que le dice al navegador que trate todos los espacios en blanco como significativos y que los conserve exactamente como aparecen en el código fuente.
* El valor de ajuste previo permite que el navegador ajuste líneas largas de texto en varias líneas si es necesario.
* El valor predeterminado para la propiedad de espacio en blanco en CSS es "normal". Esto le dice al navegador que contraiga varios caracteres de espacio en blanco en un solo espacio y que ajuste el texto en varias líneas según sea necesario para que quepa dentro de su contenedor.
*/
espacio en blanco: ajuste previo;
-ms-overflow-estilo: ninguno;
ancho de la barra de desplazamiento: ninguno;}
/* oculta la barra de desplazamiento */
.mensaje::-webkit-barra de desplazamiento {
pantalla: ninguno;
}
forma {
ancho: 100%;
ancho máximo: 1280px;
margen: 0 automático;
relleno: 10px;
fondo: #40414F;
pantalla: flexible;
dirección de flexión: fila;
espacio: 10px;
}
área de texto {
ancho: 100%;
color: #fff;
tamaño de fuente: 18px;
relleno: 10px;
fondo: transparente;
borde-radio: 5px;
borde: ninguno;
esquema: ninguno;
}
botón {
contorno: 0;
borde: 0; cursor: puntero;
fondo: transparente;
}
formulario img {
ancho: 30px;
altura: 30px;
}

5. Escribir código en Index.html

1. Escriba el siguiente código en el archivo index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Presione Ctrl + S para guardar el script.
3. Vaya al panel izquierdo en Visual Studio Code y cambie el nombre de main.js a script.js.

6. Ejecutar comandos en la Terminal

1. Ve a la terminal y presiona Control + C para ver dónde escribirías los comandos. Deberías estar en la carpeta del cliente. Si no, escribe el siguiente comando y presiona Enter: cliente de discos compactos
2. Escribe el siguiente comando y presiona Enter: npm ejecutar dev
3. Obtendrá una dirección web para ver cómo se ve hasta ahora. Si obtiene el error mencionado en la captura de pantalla, continúe.

7. Escribir código en el archivo script.js

1. Elimine el contenido presente en el archivo script.js y copie y pegue el siguiente código:
   importar bot desde './assets/bot.svg'
   importar usuario desde './assets/user.svg'
   const formulario = documento.querySelector('formulario');
   const chatContainer = document.querySelector('#chat_container');
   let cargarIntervalo;
   cargador de funciones (elemento) {
   elemento.textContent = '';
   cargarIntervalo = establecerIntervalo(() => {
   // Actualizar el contenido de texto del indicador de carga
   elemento.textContent += '.';
   // Si el indicador de carga ha alcanzado los tres puntos, reinícialo
   if (elemento.textContent '...') {
   elemento.textContent = '';
   }
   }, 300)
   }
   función tipoTexto (elemento, texto) {
   sea ​​índice = 0;
   dejar intervalo = establecerIntervalo(() => {
   if (índice elemento.innerHTML += texto.charAt (índice);
   índice++;
   } demás {
   clearInterval (intervalo);
   }
   }, 20)
   }
   función generarUniqueId() {
   const marca de tiempo = Fecha.ahora();
   const numeroaleatorio = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}`;
   }
   función chatStripe (isAi, valor, ID único) {
   devolver (
   `
   
   
   

   
   

   
   src=${isAi? robot: usuario}
   alt="${esAi? 'bot': 'usuario'}"
   />
   

   
   

   ${valor}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = asíncrono (e) => {
   e.preventDefault();
   const data = new FormData (formulario);
   // banda de chat del usuario
   chatContainer.innerHTML += chatStripe (falso, data.get('prompt'));
   // para borrar la entrada del área de texto
   formulario.reset();
   // banda de chat del bot
   const UniqueId = generarUniqueId();
   chatContainer.innerHTML += chatStripe (verdadero, " ", ID único);
   // para enfocar desplázate hacia abajo
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // mensaje específico div
   const messageDiv = document.getElementById (uniqueId);
   // mensajeDiv.innerHTML = "..."
   cargador (mensajeDiv);
   respuesta const = esperar a buscar (' http://localhost: 8001/', {
   método: 'POST',
   encabezados: {
   'Tipo de contenido': 'aplicación/json'
   },
   cuerpo: JSON.stringify({
   solicitud: data.get('solicitud')
   })
   })
   clearInterval (cargarIntervalo);
   mensajeDiv.innerHTML = '';
   si (respuesta.ok) {
   const data = esperar respuesta.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } demás {
   const err = esperar respuesta.text();
   messageDiv.innerHTML = "Algo salió mal";
   alerta (error);
   }
   }
   form.addEventListener('enviar', manejarEnviar);
   form.addEventListener('teclado', (e) => {
   si (e.keyCode 13) {
   manejarEnviar (e);
   }
   })
2. Entonces presione Control + S para guardar el guión.

8. Cree una nueva carpeta dentro de la carpeta de la aplicación Open_AI_ChatGPT e instale los módulos

1. Crea una carpeta en el Aplicación Open_AI_ChatGPT carpeta y asígnele un nombre Servidor.
2. Abierto Terminal y presiona Ctrl + C para detener la aplicación en ejecución.
3. Escriba el siguiente comando y presione Entrar para salir de la carpeta Cliente: cd ..
4. Copie y pegue el siguiente comando para ingresar al Servidor directorio y presione Entrar: servidor de discos compactos
5. Escriba el siguiente comando y presione Entrar para generar un archivo package.json en la carpeta del servidor: npm inicializar -y
6. Para instalar dependencias, escriba el siguiente comando y presione Entrar. Esto creará un nuevo archivo llamado package-lock.json: npm instalar cors dotenv express nodemon openai

9. Genere la clave API y menciónela en .env

1. Ve a la Abrir sitio web de la API e inicie sesión.
2. Ahora haga clic Personal y seleccione Ver claves API.
3. Hacer clic Crear nueva clave secreta y copiar la clave.
4. En el servidor carpeta, crea un nuevo archivo y asígnale un nombre .env.
5. En el .env archivo, escriba el siguiente código después de reemplazar la clave API con la clave que copió del sitio web de API abierta y presione Entrar: OPENAI_API_KEY="La clave API"

10. Cree un nuevo archivo server.js y escriba un script

1. Cree un nuevo archivo en la carpeta del servidor y cámbiele el nombre server.js.
2. Copie y pegue el siguiente script dentro de este archivo y presione Control+S para guardar el archivo:

importar expreso de 'expreso';
importar * como dotenv de 'dotenv';
importar cors de 'cors';
importar {Configuración, OpenAIApi} desde 'openai';
dotenv.config();
const configuración = nueva configuración ({
apiKey: proceso.env. OPENAI_API_KEY,
});
const openai = nuevo OpenAIApi (configuración);
const aplicación = express();
app.use (cors());
aplicación.uso (express.json());
app.get('/', asíncrono (requerido, res) => {
res.estado (200).send({
mensaje: '¡Hola desde GPT!',
})
});
app.post('/', asíncrono (requerido, res) => {
intentar {
const indicador = req.body.prompt;
const respuesta = esperar openai.createCompletion({
modelo: "texto-davinci-003",
mensaje: `${mensaje}`,
temperatura: 0, // Los valores más altos significan que el modelo asumirá más riesgos.
max_tokens: 3000, // El número máximo de tokens para generar en la finalización. La mayoría de los modelos tienen una longitud de contexto de 2048 tokens (excepto los modelos más nuevos, que admiten 4096).
top_p: 1, // alternativa al muestreo con temperatura, llamado muestreo de núcleo
frecuencia_penalty: 0.5, // Número entre -2.0 y 2.0. Los valores positivos penalizan los nuevos tokens en función de su frecuencia existente en el texto hasta el momento, lo que reduce la probabilidad de que el modelo repita la misma línea literal.
present_penalty: 0, // Número entre -2.0 y 2.0. Los valores positivos penalizan los nuevos tokens en función de si aparecen en el texto hasta el momento, lo que aumenta la probabilidad de que el modelo hable sobre nuevos temas.
});
res.estado (200).send({
bot: respuesta.datos.opciones[0].texto
});
} atrapar (error) {
consola.log (error);
res.status (500).send (error || 'Algo salió mal');
}
});
app.listen (5000, () => console.log('El servidor AI se inició en http://localhost: 8001'));

11. Escribir código en el paquete.json

1. Copia y pega el siguiente código y presiona Control + S ahorrar:

{
"nombre del servidor",
"versión": "1.0.0",
"descripción": "",
"tipo": "módulo",
"guiones":{
"servidor": "servidor nodemon"
},
"palabras clave": [],
"autor": "",
"licencia": "ISC",
"dependencias": {
"corazón": "^2.8.5",
"dotenv": "^16.0.3",
"expreso": "^4.18.2",
"nodemonio": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Probar el código

1. Ahora, haga clic en el menú Terminal en Visual Studio Code y seleccione Terminal derramado.
2. Tendrás dos terminales; llamémoslos Terminal Server y Terminal Client.
3. En Terminal Server, presione Ctrl + C. Escriba el siguiente comando para ingresar al directorio del servidor y presione Enter: cd server
4. A continuación, copie y pegue el siguiente comando y presione Entrar para ejecutar el servidor: servidor de ejecución npm
5. Haga clic en el enlace presentado y verá el mensaje Hola de GPT en la página
6. Ahora en Terminal Client, presione Ctrl + C. Escriba el siguiente comando para ingresar al directorio del cliente y presione Entrar: cliente de discos compactos
7. Copie y pegue el siguiente comando y presione Entrar para ejecutar el cliente: npm ejecutar dev
8. A continuación, haga clic en el enlace y escriba Hola, cómo estás; puedes ver que el bot está buscando una respuesta.

13. Instale la aplicación Git Bash y configúrela con su cuenta de GitHub

1. Puedes saltarte este paso si ya lo tienes configurado. Descarga la aplicación Git Bash.
2. Inicie sesión en su cuenta de GitHub.
3. En el momento de la instalación, guárdelo en la carpeta Open_AI_ChatGPT.
4. A continuación, presione la tecla de Windows, escriba editar las variables de entorno del sistema y haga clic en Abrir.
5. Haga doble clic en la Ruta y haga clic en Editar.
6. Agregue la ruta del archivo git aquí, luego haga clic en Aceptar y Aceptar.
7. Inicie Git Bash, escriba el siguiente comando después de reemplazar el nombre de usuario con el nombre de usuario de su cuenta de GitHub y presione Entrar: git config --usuario global.nombre "nombre de usuario"
8. Copie y pegue el siguiente comando después de reemplazar la dirección de correo electrónico con su dirección de correo electrónico y presione Entrar: git config --usuario global.email "dirección de correo electrónico"
9. Vaya a la cuenta de GitHub, haga clic en la flecha desplegable y seleccione Configuración. Ahora ve a la configuración del desarrollador.
10. Expanda Tokens de acceso personal y seleccione Tokens detallados. Haga clic en Generar nuevo token.
11. Cambie el nombre y seleccione la validez. Luego, copie el token y guárdelo en un bloc de notas.
12. Escriba los siguientes comandos uno por uno y presione Entrar: git config --credencial global.helper wincredconfiguración de git credential-manager-core
13. Siga las indicaciones para configurarlo y pegue el token generado cuando se le solicite su contraseña.
14. Cierra la aplicación Git Bash.

14. Crear un repositorio y publicar código

14.1 Crear un repositorio

1. Inicie sesión en su cuenta de GitHub.
2. Localiza el flecha desplegable junto a tu foto de perfil y selecciona Tus repositorios.
3. Hacer clic Nuevo.
4. Escribe el Nombre del repositorio, seleccionar Públicoy haga clic en Crear repositorio.
5. Vaya al código VS, presione Control + Cy asegúrese de estar en la aplicación Open_AI_ChatGPT o en la carpeta raíz. Si no, escribe el siguiente código y presiona Enter: cd
6. Entonces, en el servidor carpeta, agregue un nuevo archivo y asígnele un nombre .gitignore.
7. En el .gitignore archivo, escriba el siguiente código para asegurarse .env y node_modules no son empujados GitHub:
   .env
node_modules

14.2 Publica tu código en el repositorio

1. Vaya al código VS, copie y pegue los siguientes comandos uno por uno y presione Entrar después de cada comando: iniciar gitgit commit -m "primera confirmación"rama git -M principal
2. Escriba el siguiente comando después de reemplazar el https://github.com/SrishtiSisodia/CHAT-BOT-APP con la dirección de tu repositorio mencionada en GitHub:
   git remoto agregar origen https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Ahora para enviar el código, escriba el siguiente comando y presione Entrar: git push -u origen principal
4. Vuelva a cargar su página de GitHub y su código se cargará allí.
5. En el código VS, presione Control + C tanto en Terminal Server como en Terminal Client para evitar que se ejecuten.

15. Implementar el servidor

1. Ir a renderizar sitio web y registrarse usando GitHub.
2. Verá el Tablero, haga clic en Nuevo y luego seleccione Servicios web.
3. Busque Conectar un nuevo repositorio, ingrese la URL de su almacenamiento en el repositorio público de Git y haga clic en Conectar.
4. En la página siguiente, agregue Nombre, seleccione Región, seleccione Sucursal como principal, seleccione Directorio raíz como servidor, elija Entorno como Nodo y escriba Comando de inicio: ejecutar el servidor npm
5. Haga clic en Gratis y haga clic en Crear servicio web.
6. El servidor se implementará; espere hasta que el estado de implementación sea En vivo.
7. Ir a Medio Ambiente; para Clave, escriba OpenAI_API_Key y para valor, escriba la clave API secreta que generó en el paso 9.
8. Ahora tendrá una dirección web; agréguelo al archivo script.js. Luego, en el código VS, vaya al archivo script.js y reemplace la dirección web en el código mencionado a continuación con la nueva dirección web del sitio web representado:
   respuesta const = esperar a buscar (' http://localhost: 8001/'respuesta const = esperar a buscar (' https://chatgptapp-lswi.onrender.com/'
9. Sobre el Terminal de código VS, escriba los siguientes comandos uno por uno y presione Entrar después de cada comando: git agregar.git commit -m 'actualizar la URL del servidor'empujar git

16. Implementar el front-end

1. Ir al sitio web de Vercel.
2. Hacer clic Empezar a implementar.
3. Bajo Importar repositorio Git, haga clic Continuar con GitHub.
4. Escriba su Nombre de usuario de GitHub y seleccione el nombre del repositorio y haga clic en Importar.
5. Bajo Configurar proyecto, seleccione un nombre.
6. Cambiar el directorio raíz de / a cliente, haga clic Continuar y Desplegar.
7. Vuelva a su tablero y haga clic en Visita.
8. Ahora puede ver la aplicación.

Entonces, estos son los pasos detallados para instalar la aplicación ChatGPT localmente en su dispositivo. ¿Atrapado en algún lugar? Mencione sus preguntas o inquietudes en la sección de comentarios a continuación.