El primer pas és obtenir una API key de Google per a cadascun, ja que si tots utilitzem la mateixa la IA es carregarà massa i no funcionarà.
Ngrok
El que s’ha de fer és, entrar a la pàgina de Ngrok i crear un compte gratuït. Us recomano vincular-la al compte personal de GitHub.
Una vegada dintre a la part superior esquerra trobarem aquest apartat “Your Authtoken”,


Aquest token és que ens permetrà constatar el Front End i el Back-end.
El guardem per després afegir-lo als Secrets del Google Colab.
Google API key
Per aconseguir l’API de Google hem d’entrar a Google AI Studio a través d’una finestra d’incògnit.
Dintre hem d’iniciar sessió amb un compte major d’edat, sinó no ens deixarà.
Una vegada iniciem sessió ens trobarem amb aquesta pantalla, hem d’anar a la part inferior esquerra i fer clic en “Get API key”

En fer clic, entrarem a aquesta pantalla i em de fer clic a “Crear clave API key”

Posem un nom fàcil, del qual ens puguem enrecordar

Quan la creem se’ns guardarà a la mateixa pàgina, aquesta API també haurem de guardar als secrets del Colab.
Carpeta amb el Codi Python i HTML del Widget
Entrant en aquest enllaç està en una carpeta, el codi Python del Xatbot i l’HTML del Widget pel WordPress.
Hem de descarregar aquests arxius i pujar-los al nostre repositori de Github que tenim connectat amb el Colab.
Hem de crear un nou repositori per al Xatbot.


Colab
Obrim Colab
En aquesta pantalla fem clic a “Crear nou quadern”

Una vegada dintre fem clic a Arxiu > Pujar cuadern

Fem clic a “Explorar” i pugem el codi Python que hem descarregat abans.


Una vegada fet això, guardarem les APIs als secrets.
A la part mitjana esquerra fem clic a la icona de la Clau, aquí farem clic a “Afegir secret nou”.

Aquí haurem de posar el nom que volem posar-li a la clau API, aquest serà el qual escriurem al codi per cridar des dels secrets.
Al costat haurem d’enganxar la clau de Google o de Ngrok, un secret per a cada clau
Us reconamo aquest noms per a les claus:
Google = GOOGLE_API_KEY
Ngrok = token_ngrok

Edició del codi
Com aquest és el meu codi, s’ha de fer alguna modificació.
1 – La web d’on extreure la informació. En aquest apartat haurem de canviar el meu enllaç pel vostre (del WordPress).

2 – En cas que no hàgiu posat els noms a les claus que us he recomanat heu de canviar aquest apartat amb els noms que heu escollit.

3 – Per últim haureu de canviar el context que se li dona a la IA sobre el seu rol i el treball que ha de fer:
context = "Ets l'assistent del portafolis d'en Pau Jiménez. Respon de forma amable en català basant-te NOMÉS en aquesta informació real del seu web:\n\n"

Implementació WordPress
Per implementar el codi HTML al WordPress amb l’arxiu HTML del Widget.
Hem d’instal·lar el següent pluguin.

Una vegada instal·lat i activat hem d’anar al menú de l’extensió i entrar a l’apartat “Capçalera i peu de pàgina”.

Dintre de la pàgina, anirem a l’apartat “Peu de pàgina” on enganxarem el codi que hem descarregat, encara que la part important del codi és l’estructura i el JS, ja que cadascun ha de modificar el color al seu color corporatiu i el títol al seu nom.

Titol

Color

Enllaç

Una vagada fet tot aixo, deixant que el codi del Colab extregui tota la informació del nostre lloc web i ensengui el servidor Flask, podriem escriure al nostre Xatbot.


Deixa un comentari