initial commit

.gitignore

@@ -0,0 +1,4 @@
+.history/
+.vscode/
+__pycache__/
+keys/

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.9
+
+WORKDIR /code
+COPY ./requirements.txt /code/requirements.txt
+
+
+RUN useradd -m -u 1000 user
+
+USER user
+
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+
+COPY --chown=user . $HOME/app
+RUN pip install --user --no-cache-dir --upgrade -r /code/requirements.txt
+#CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]
+CMD ["hypercorn", "main:app", "--bind", "0.0.0.0:7860"]
+

README.md

@@ -1,8 +1,8 @@
 ---
-title: Chattest
-emoji: 🏢
-colorFrom: blue
-colorTo: blue
+title: Chgpt
+emoji: 🏃
+colorFrom: gray
+colorTo: pink
 sdk: docker
 pinned: false
 ---

main.py

@@ -0,0 +1,216 @@
+from fastapi import FastAPI, Request, staticfiles, Depends, HTTPException, status
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
+
+from fastapi.security import HTTPBasic, HTTPBasicCredentials
+import os, json, re, requests
+from datetime import datetime, timedelta
+import time
+import jwt
+import openai
+from openai import error as openai_error
+from hashlib import sha256
+import tiktoken
+from supported import supp_langs
+
+app = FastAPI()
+security = HTTPBasic()
+tokenizer = tiktoken.encoding_for_model("gpt-3.5-turbo")
+app.mount("/static", staticfiles.StaticFiles(directory="static"), name="static")
+users = json.loads(str(os.getenv("USER_KEYS")).replace("\n", ""))
+for key in users:
+    if key == "master": continue
+    password = key+users[key]+users["master"]
+    users[key] = sha256(password.encode('UTF-8')).hexdigest()
+
+with open("log.txt", "w") as f:
+    f.write("incio")
+    f.write("\n--------------------------\n")
+
+
+
+fecha_unix = str(int(time.time()))
+
+JWT_SECRET = users["master"]
+JWT_ALGORITHM = "HS256"
+JWT_EXPIRATION_TIME_MINUTES = 30
+
+def create_jwt_token(data):
+    to_encode = {"data": data}
+    expire = datetime.utcnow() + timedelta(minutes=JWT_EXPIRATION_TIME_MINUTES)
+    to_encode.update({"exp": expire})
+    encoded_jwt = jwt.encode(to_encode, JWT_SECRET, algorithm=JWT_ALGORITHM)
+    return encoded_jwt
+
+async def validate_token(request: Request):
+    data = {}
+    try:
+        data = await request.json()
+        token = data.pop("token")
+        payload = jwt.decode(token, JWT_SECRET, algorithms=[JWT_ALGORITHM])
+        data["token_data"] = payload["data"]
+    except: 
+        raise HTTPException(status_code=404, detail="Datos no válidos")    
+    return data
+
+def authenticate_user(credentials: HTTPBasicCredentials):
+
+    password = credentials.username+credentials.password+users["master"]
+    password = sha256(password.encode('UTF-8')).hexdigest()
+
+    if credentials.username not in users or password != users[credentials.username]:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Incorrect username or password",
+            headers={"WWW-Authenticate": "Basic"},
+        )
+
+    return True
+
+    
+@app.get("/", response_class=HTMLResponse)
+async def root(request: Request, credentials: HTTPBasicCredentials = Depends(security)):
+    if authenticate_user(credentials):
+        token = create_jwt_token({"user":credentials.username})
+        with open(os.path.join("static", "main.html")) as f:
+            return HTMLResponse(f.read().replace("{% token %}", token).replace("{% version %}", fecha_unix))
+
+    
+@app.post("/chat_stream")
+async def chat_stream(data = Depends(validate_token)):
+    messages = data.get("messages", "")
+    if not messages:
+        print("Empty message")
+        error = "What??"
+        raise HTTPException(
+            status_code=status.HTTP_418_IM_A_TEAPOT,
+            detail= error
+        )
+    try:
+        token_length = len(tokenizer.encode(messages[-1]["content"]))
+    except:
+        token_length = len(messages[-1]["content"])
+        print("Error in token length")
+        print("Message:", messages[-1]["content"])
+
+    config = {
+        "temperature": float(data.get("config", []).get("temperature", 1)),
+        "frequency_penalty": float(data.get("config", []).get("frequency_penalty", 1)),
+        "presence_penalty": float(data.get("config", []).get("presence_penalty", 1))
+    }
+ 
+    try:
+        response = openai.ChatCompletion.create(
+            model="gpt-3.5-turbo",
+            messages=messages,
+            temperature=config["temperature"],
+            frequency_penalty=config["frequency_penalty"],
+            presence_penalty=config["presence_penalty"],
+            request_timeout = 25,
+            stream=True
+        )
+    except requests.exceptions.RequestException as e:
+        print("Timeout (requests)")
+        print(e)
+        raise HTTPException(
+            status_code=status.HTTP_408_REQUEST_TIMEOUT,
+            detail="Los servidores tardaron mucho en responder, puede haber sobrecarga en OpenAI, reintenta luego (error 1)"
+        )
+    except openai_error.APIConnectionError as e:
+        print("APIConnectionError")
+        print(e)
+        raise HTTPException(
+            status_code=status.HTTP_408_REQUEST_TIMEOUT,
+            detail="El servidor no respondió, puede haber sobrecarga en OpenAI, reintenta luego (error 2)"
+        )
+    except openai_error.Timeout as e:
+        print("Timeout (openai)")
+        print(e)
+        raise HTTPException(
+            status_code=status.HTTP_408_REQUEST_TIMEOUT,
+            detail="El servidor no respondió, puede haber sobrecarga en OpenAI, reintenta luego (error 3)"
+        )
+    except openai_error.InvalidRequestError as e:
+        print("Timeout (openai)")
+        print(e)
+        error = "El servidor no respondió, puede haber sobrecarga en OpenAI, reintenta luego (error 3)"
+        if "This model's maximum context length is 4097 tokens" in e.message:
+            error = "ChatGPT se gomitó 🤮, limpia el chat y reintenta."
+        raise HTTPException(
+            status_code=status.HTTP_408_REQUEST_TIMEOUT,
+            detail= error
+        )
+    
+    token = create_jwt_token(data.pop("token_data"))
+    
+    async def __streamer():
+        yield json.dumps({"object": "chat.token",  "token": token})
+        #yield json.dumps({"object": "chat.user.length", "length": token_length})
+        tokens = 0
+        for chunk in response:
+            tokens += 1
+            yield json.dumps(chunk)
+        #yield({"object": "chat.assistant.length", "length": tokens})
+            
+    return StreamingResponse(__streamer(), media_type="application/json")
+
+@app.get("/read_log", response_class=HTMLResponse)
+async def read_log(request: Request, credentials: HTTPBasicCredentials = Depends(security)):
+    if authenticate_user(credentials):
+        with open("log.txt", "r") as f:
+            return HTMLResponse(f.read())
+
+
+@app.get("/mfdfastapi")
+async def webhook_get(request: Request):
+
+    with open("log.txt", "a") as f:
+        f.write("get mfdfastapi")
+        f.write("\n")
+        headers = {}
+        for name, value in request.headers.items(): headers[name] = value
+        f.write("head: ")
+        f.write(json.dumps(headers))
+        f.write("\n")
+        parametros_get = request.query_params
+        f.write("get:  ")
+        f.write(json.dumps(dict(parametros_get.items())))
+        f.write("\n")
+        f.write("--------------------------\n")
+    
+    mode = request.query_params.get('hub.mode', "")
+    if mode=="subscribe":
+        challenge = request.query_params.get('hub.challenge', "")
+        verify_token = request.query_params.get('hub.verify_token', "")
+
+        if not mode or not challenge or not verify_token:
+            raise HTTPException(status_code=404, detail="Datos no válidos")  
+
+        if verify_token != users["master"]:
+            raise HTTPException(status_code=404, detail="Datos no válidos")    
+        return HTMLResponse(str(challenge))
+
+
+        
+
+@app.post("/mfdfastapi")
+async def webhook_post(request: Request):
+    with open("log.txt", "a") as f:
+        f.write("post mfdfastapi")
+        f.write("\n")
+        headers = {}
+        for name, value in request.headers.items(): headers[name] = value
+        f.write("head: ")
+        f.write(json.dumps(headers))
+        f.write("\n")
+        parametros_post = await request.json()
+        parametros_get = request.query_params
+        f.write("get:  ")
+        f.write(json.dumps(dict(parametros_get.items())))
+        f.write("\n")
+        f.write("post: ")
+        f.write(json.dumps(parametros_post))
+        f.write("\n")
+        f.write("--------------------------\n")
+        
+    return HTMLResponse("ok")
+        

requirements.txt

@@ -0,0 +1,7 @@
+fastapi==0.74.*
+requests==2.27.*
+openai==0.27.*
+uvicorn[standard]==0.17.*
+PyJWT==2.6.0
+hypercorn>=0.14.3
+tiktoken>=0.3.0

static/css/app.css

@@ -0,0 +1,215 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Monospace;
+    font-size: 15px;
+}
+
+body {
+    display: flex;
+}
+button{
+    cursor: pointer;
+}
+.wrapper {
+    padding: 20px 20px 80px 20px;
+    border-bottom: 5px solid #222f3d;
+    background: #34495e;
+    margin: 0;
+    min-width: 320px;
+    width: 100%;
+}
+.submenu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: fit-content;
+    height: fit-content;
+    
+}
+.submenu .abrir{
+    width: 30px;    
+    height: 30px;
+    background-image: url(/static/img/menu.svg);
+    background-color: #8093a5;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 0px 0px 5px 0px;
+    border-bottom: solid 1px;
+    border-right: solid 1px;
+    position: fixed;
+}
+.submenu .configuracion{
+    width: calc( 100vw - 20px);
+    height: 0px;
+    background: #cbcbcb;
+    margin-left: 10px;
+    border-radius: 0px 0px 5px 5px;
+    top: -2px;
+    transition: box-shadow 0.5s, height 0.5s, top 0.5s;
+}
+.submenu .configuracion.desplegado{
+    top: 0px;
+    height: 300px;
+    border: solid 1px;
+    border-top: none;
+    box-shadow: 5px 5px 10px 2px #000000ad;
+}
+.chat {
+    --textarea: 0px;
+    border-radius: 5px;
+    display: block;
+    width: 100%;
+    height: calc( 100% - var(--textarea) );
+    overflow-y: scroll;
+    overflow-x: hidden;
+    background: rgb(161, 161, 161);
+    padding: 10px 0;
+}
+
+.chat .message {
+    display: flex;
+    margin: 5px 20px 5px 10px;
+    filter: opacity(0.9);
+}
+.chat .message.me {
+    margin: 5px 10px 5px 20px;
+}
+.chat .message.comando {
+    margin: 5px auto;
+    display: table;
+}
+.chat .message:last-child {
+    filter: opacity(1);
+}
+
+.chat .message.no-opacity {
+    display: flex;
+    margin: 10px 0 0 10px;
+    filter: opacity(1);
+}
+
+.chat .message img {
+    margin: 0 10px 0 0;
+    height: 30px;
+    border-radius: 50%;
+}
+
+.chat .message.me img {
+    order: 2;
+    margin: 0 0 0 3px;
+}
+
+.chat .message div {
+    flex: 1;
+    max-width: 100%;
+}
+
+.chat .message div p {
+    max-width: calc( 100% - 20px );
+    display: inline-block;
+    margin: 0;
+    padding: 8px 10px 8px 10px;
+    background: #fff;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    min-width: 40%;
+}
+
+.chat .message.me div p {
+    float: right;
+    background: #b4c2ff;
+}
+.chat .message.comando div p {
+    background: #d0a8ff;
+}
+.chat .message.warning div p  {
+    background: #f0e370;
+}
+.chat .message.error div p  {
+    background: #f09470;
+}
+
+.chat .message div p ul {
+    list-style: none;
+    color: #555;
+    padding-right: 10px;
+}
+
+.chat .message:last-child div p ul {
+    list-style: none;
+    color: blue;
+}
+
+.chat .message div p ul.ultotal {
+    list-style: none;
+    color: #34495e;
+    font-size: 12px;
+}
+
+.chat .message pre {
+    overflow-x: scroll;
+    border: solid 1px #e5e4e4;
+    padding: 10px;
+}
+
+.input-box {
+    background: #222f3d;
+    margin: 10px 0;
+    height: 30px;
+    display: flex;
+    border-radius: 5px;
+}
+
+.input-box textarea,
+.input-box button {
+    height: 100%;
+    margin: 0;
+    border: none;
+    padding: 0 15px;
+}
+
+.input-box button:focus, .input-box textarea:focus  {
+    outline: none;
+}
+
+.input-box .input-text {
+    width: 100%;
+    border-radius: 5px 0 0 5px;
+    resize: none;
+    border-top: solid 7px #fff;
+    border-bottom: solid 7px #fff;
+    
+}
+.input-box button{
+    width: 30px;
+    background-size: 20px;
+    background-color: #ddd;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-left: solid 1px #555;
+}
+.input-box .input-send {
+    background-image: url(/static/img/send.png);
+}
+.input-box .input-delete {
+    background-image: url(/static/img/delete.png);
+}
+.input-box button:first-child{
+    border-left: none;
+}
+.input-box button:last-child{
+    border-radius: 0 5px 5px 0;
+}
+.input-box button:disabled, .input-box textarea:disabled{
+    background-color: #8b8b8b;
+    border-color: #8b8b8b;
+
+}
+
+#message-template{
+    display: none;
+}

static/js/chatHandler.js

@@ -0,0 +1,174 @@
+class ChatGPT{
+    constructor(token){
+        
+        $("#input-delete").click(()=> $(document).trigger("chat:limpiar"))
+
+        let fecha = new Date().toJSON().slice(0, 10);
+        this.definicion = "Te llamas Chatsito, eres un asistente de apoyo a los amigos de MIA, ";
+        this.definicion += "tu objetivo principal es responder preguntas y hacer sentir bien ";
+        this.definicion += "a tu interlocutor.\n";
+        this.definicion += "Responde de manera amistosa con un poco de comedia.\n";
+        this.definicion += "Knowledge cutoff: 2021-09-01\nCurrent date: "+fecha;
+        this.definicion = {role: "system", content: this.definicion, tokens: 100};
+        
+        if (localStorage.getItem("convesacion") !== null) {
+            this.convesacion = JSON.parse(localStorage.getItem("convesacion"));
+            $(document).trigger("chat:cargar", this.convesacion);
+        }else{
+            this.convesacion = [this.definicion];
+        }
+
+        if (localStorage.getItem("config") !== null) {
+            this.config = JSON.parse(localStorage.getItem("config"));
+        }else{
+            this.config = {
+                temperature: 1.0,
+                frequency_penalty: 0.0,
+                presence_penalty: 0.0
+            };
+        }
+
+        this.execStart = 0;
+
+        this.endpointChat = "/chat_stream";
+        this.token = token
+        // this.evCtx = document
+        this.reintentos = 0
+        $(document).on("chat:limpiar", () => {
+            this.limpiarConfig()
+        });
+        $(document).on("chat:enviar", (event, params) => {
+            this.reintentos = 0;
+            this.enviar(params);
+        });
+        $(document).on("enviar:reintentar", (event, params) => {
+            this.reintentos++;
+            this.enviar(params.mensaje)
+        });
+
+        $(document).on("enviar:error", (event, params) => this.reenviar(params));
+        
+        
+    }
+
+    limpiarConfig(){
+        localStorage.removeItem('convesacion');
+        localStorage.removeItem('config');
+        this.config = {
+            temperature: 1.0,
+            frequency_penalty: 0.0,
+            presence_penalty: 0.0
+        };
+        this.convesacion = [this.definicion];
+
+    }
+
+    reenviar(params){
+        if(params.status==404){
+            $(document).trigger("enviar:fallido",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
+            return
+        }
+        if(this.reintentos < 3 ){
+            $(document).trigger("enviar:reintentar",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
+            $(document).trigger("enviar:enviar",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
+
+        }else{
+            $(document).trigger("enviar:fallido",{jqXHR:params.jqXHR, status:params.status, error:params.error, execTime:params.execTime, mensaje:params.mensaje});
+        }
+    }
+
+    enviar(mensaje){
+        let tempMensajes = [];
+        let tokens = 0;
+        for(let i = 0; i < this.convesacion.length; i++){
+            let actMsg = this.convesacion[i];
+            tempMensajes.push({role: actMsg.role, content: actMsg.content})
+            tokens += actMsg.tokens 
+        }
+        
+        console.log("Enviando: ", mensaje);
+        tempMensajes.push({role: "user", content: mensaje});
+        this.convesacion.push({role: "user", content: mensaje});
+        this.convesacion.push({});
+        $(document).trigger("precarga:inicio", mensaje);
+        let self = this;
+        fetch(this.endpointChat, {
+            method: "POST",
+            body: JSON.stringify({
+                messages: tempMensajes,
+                token: this.token,
+                config: this.config
+            }),  
+        }).then(response => ({
+            rb: response.body, 
+            rstat: response.status
+        })).then(({rb, rstat}) => {
+            if(!rb){
+                return false;
+            }
+            const reader = rb.getReader();
+        
+            return new ReadableStream({
+              start(controller) {
+                function push() {
+                    reader.read().then(({done, value}) => {
+                        
+                        if(done){
+                            controller.close();
+                            if(rstat==200){
+                                $(document).trigger("precarga:fin");
+                                localStorage.setItem("convesacion", JSON.stringify(self.convesacion))
+                                console.log("terminado", self.convesacion[self.convesacion.length-1].content)
+                            }else{
+                                this.convesacion.pop()
+                                console.log("terminado con errores")
+                            }
+                            return
+                        }
+
+                        let elements = new TextDecoder("utf-8").decode(value).split("}{");
+                        let elLen = elements.length;
+                        for(let i in elements){
+                            let data =  elements[i];
+                            if(!data){
+                                continue;
+                            }
+                            
+                            data =JSON.parse((i>0?"{":"") + data + (i<elLen-1?"}":""));
+                            
+                            if(rstat==200){
+                                if(data.object == "chat.token"){
+                                    self.token = data.token;
+                                }else if(data.choices[0].hasOwnProperty("delta")){
+                                    let temp = data.choices[0].delta;
+                                    let key = Object.keys(temp)[0];
+                                    let elActual = self.convesacion[self.convesacion.length-1]
+                                    if(!elActual.hasOwnProperty(key)){elActual[key]="";}
+                                    elActual[key] += temp[key]
+                                    if(elActual.hasOwnProperty("content") && temp.content){
+                                        $(document).trigger("precarga:mensaje", temp.content);
+                                    }
+                                }
+                            }else{
+                                $(document).trigger("precarga:error", {status: rstat, mensaje: data.detail});
+                            }
+                            
+                        }
+                        push();
+                    })
+                }
+        
+                push();
+              },
+            });
+        }).then(data => {
+        }).catch(err =>{
+            console.log('Solicitud fallida', err)
+        }); 
+
+
+    }
+
+
+      
+}

static/js/windowHandler.js

@@ -0,0 +1,157 @@
+class WindowHandler{
+    constructor(){
+        this.chatbox = $("#chat");
+        this.template = $('<div class="message"><div><p></p></div></div>');
+        this.active = false;
+        this.mensaje = "";
+
+        // this.evCtx = document;
+
+        $(document).on("chat:enviar", (event, params) => this.recalcularTextarea());
+        $(document).on("chat:limpiar", () => this.limpiarChat());
+
+        $("#input-text").keypress((event) => {
+            if (!event.shiftKey && event.keyCode === 13) {
+              this.manejadorEnviar();
+        }});
+        $("#input-send").click(() => this.manejadorEnviar());
+        $("#input-text").keypress(() => this.recalcularTextarea());
+        $("#input-text").keyup(() => this.recalcularTextarea());
+        $("#input-text").keydown(() => this.recalcularTextarea());
+        this.cargarChat(chatH.convesacion);
+
+        $(document).on("precarga:inicio", (event, params) => {
+            this.respuestaInicio(params)
+        });
+        $(document).on("precarga:mensaje", (event, params) => {
+            this.respuestaMensaje(params)}
+        );
+        $(document).on("precarga:fin", (event, params) => {
+            this.respuestaFin()
+        });
+        $(document).on("precarga:error", (event, params) => {
+            this.respuestaError(params)
+        });
+ 
+    }
+
+    limpiarChat(){
+        $("#input-text").val("");
+        this.recalcularTextarea();
+        $("#chat").html("");
+    }
+
+    manejadorEnviar(){
+        let mensaje = $("#input-text").val();
+        if(mensaje==""){
+            return false;
+        }
+        $(document).trigger("chat:enviar", mensaje);
+    }
+    
+    recalcularTextarea(){
+        $(".input-box").css("height", "30px");
+        let height = parseInt(($(".input-text").prop('scrollHeight')+15)/15)*15;
+        $(".input-box").css("height", height+"px");
+        height -= 30;
+        $(".chat").css("--textarea", height+"px");  
+    }
+
+    procesarTexto(texto){
+        let segmentos = texto.split("```");
+        let resultado = "";
+    
+        for(let i=0; i<segmentos.length;i++){
+            let textoActual = segmentos[i];
+            if(i%2==0){
+                resultado += textoActual.replace(/\n/g, "<br>").replace(/`(.*?)`/gm, "<b>$1</b>");
+            }else{
+                let temp = textoActual.split("\n",1);
+                resultado += "<pre><code class='language-";
+                resultado += temp[0].length>1?temp[0]:"none";      
+                temp = $("<div></div>").text(textoActual.substr(temp[0].length)).html()
+                resultado += "'>"+temp+"</code></pre>";
+            }
+        }
+
+        return resultado
+    }
+
+    cargarChat(mensajes){
+        mensajes.forEach((mensaje) => {
+            if(mensaje.role!="system"){
+                let clone = this.template.clone();
+                if(mensaje.role=="user") {clone.addClass("me");}
+                let texto = this.procesarTexto(mensaje.content);
+                clone.find("div p").html(texto);
+                this.chatbox.append(clone);
+                this.active = clone;
+                Prism.highlightAllUnder(this.active[0])
+                this.active = false;
+                this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
+            }
+        });
+    }
+
+    respuestaInicio(mensaje){
+        $("#input-text").val("");
+        $("button").prop("disabled", true);
+        $("textarea").prop("disabled", true);
+        this.mensaje = ""
+        let clone = this.template.clone();
+        clone.addClass("me");
+        clone.find("div p").text(mensaje);
+        this.chatbox.append(clone);
+        
+        clone = this.template.clone();
+        clone.find("div p").html("");
+        this.chatbox.append(clone);
+        this.active = clone;
+        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
+    }
+
+    respuestaMensaje(mensaje){
+        this.mensaje += mensaje
+        let html = this.active.find("div p").html();
+        html += mensaje.replace(/\n/g, "<br>").replace(/`([^`\w\W]+?)`/gm, "<b>$1</b>")
+        this.active.find("div p").html(html);
+        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
+
+    }
+
+    respuestaFin(){
+        let msgProcesado = this.procesarTexto(this.mensaje);
+        this.mensaje = "";
+        $("button").prop("disabled", false);
+        $("textarea").prop("disabled", false);
+        $("textarea").focus();
+        this.active.find("div p").html(msgProcesado);
+        Prism.highlightAllUnder(this.active[0]);
+        this.active = false;
+        this.chatbox.scrollTop(this.chatbox[0].scrollHeight);
+    }
+
+    respuestaError(error){
+        $("button").prop("disabled", false);
+        $("textarea").prop("disabled", false);
+        $("textarea").focus();
+        this.active.find("div p").html(error.mensaje)
+        switch(error.status){
+            case 404:
+                this.active.addClass("error")
+            case 408:
+                this.active.addClass("warning")
+            default:
+                this.active.addClass("warning")
+        }
+        this.active = false;
+        this.chatbox.scrollTop(this.chatbox[0].scrollHeight)
+
+
+
+    }
+
+
+
+
+}

static/main.html

@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <title> Chatbot </title>
+    <meta name="viewport" content="width=device-width">
+    <link rel="shortcut icon" href="static/favicon.png" type="image/png">
+    <link rel="stylesheet" href="static/css/app.css?v={% version %}">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="static/js/chatHandler.js?v={% version %}"></script>
+    <script src="static/js/windowHandler.js?v={% version %}"></script>
+    
+  </head>
+  <body>
+  <div class="wrapper pag1">
+    <div class="chat" id="chat"></div>
+    <div class='input-box'>
+      <textarea class='input-text' id='input-text' placeholder="Type something" type="text" autofocus=""></textarea>
+      <button class='input-send' id='input-send' ></button>
+      <button class='input-delete' id='input-delete' ></button>
+    </div>
+  </div>
+  
+
+
+  <script> 
+    let windH = null;
+    let chatH = null;
+
+    $(document).ready(function() {
+      chatH = new ChatGPT("{% token %}");
+      windH = new WindowHandler();
+    });
+
+  </script>
+</body>
+</html>

supported.py

@@ -0,0 +1,51 @@
+supp_langs = [
+    "markup", "html", "xml", "svg", "mathml", "ssml", "atom", "rss", "css", 
+    "clike", "javascript", "js", "abap", "abnf", "actionscript", "ada", "agda", 
+    "al", "antlr4", "g4", "apacheconf", "apex", "apl", "applescript", "aql", 
+    "arduino", "ino", "arff", "armasm", "arm-asm", "arturo", "art", "asciidoc", 
+    "adoc", "aspnet", "asm6502", "asmatmel", "autohotkey", "autoit", "avisynth", 
+    "avs", "avro-idl", "avdl", "awk", "gawk", "bash", "sh", "shell", "basic", 
+    "batch", "bbcode", "shortcode", "bbj", "bicep", "birb", "bison", "bnf", 
+    "rbnf", "bqn", "brainfuck", "brightscript", "bro", "bsl", "oscript", "c", 
+    "csharp", "cs", "dotnet", "cpp", "cfscript", "cfc", "chaiscript", "cil", 
+    "cilkc", "cilk-c", "cilkcpp", "cilk-cpp", "cilk", "clojure", "cmake", "cobol", 
+    "coffeescript", "coffee", "concurnas", "conc", "csp", "cooklang", "coq", 
+    "crystal", "css-extras", "csv", "cue", "cypher", "d", "dart", "dataweave", 
+    "dax", "dhall", "diff", "django", "jinja2", "dns-zone-file", "dns-zone", 
+    "docker", "dockerfile", "dot", "gv", "ebnf", "editorconfig", "eiffel", "ejs", 
+    "eta", "elixir", "elm", "etlua", "erb", "erlang", "excel-formula", "xlsx", "xls", 
+    "fsharp", "factor", "false", "firestore-security-rules", "flow", "fortran", "ftl", 
+    "gml", "gamemakerlanguage", "gap", "gcode", "gdscript", "gedcom", "gettext", "po", 
+    "gherkin", "git", "glsl", "gn", "gni", "linker-script", "ld", "go", "go-module", 
+    "go-mod", "gradle", "graphql", "groovy", "haml", "handlebars", "hbs", "mustache", 
+    "haskell", "hs", "haxe", "hcl", "hlsl", "hoon", "http", "hpkp", "hsts", "ichigojam", 
+    "icon", "icu-message-format", "idris", "idr", ".ignore", "gitignore", "hgignore", 
+    "npmignore", "inform7", "ini", "io", "j", "java", "javadoc", "javadoclike", 
+    "javastacktrace", "jexl", "jolie", "jq", "jsdoc", "js-extras", "json", "webmanifest", 
+    "json5", "jsonp", "jsstacktrace", "js-templates", "julia", "keepalived", "keyman", 
+    "kotlin", "kt", "kts", "kumir", "kum", "kusto", "latex", "tex", "context", "latte", 
+    "less", "lilypond", "ly", "liquid", "lisp", "emacs", "elisp", "emacs-lisp", 
+    "livescript", "llvm", "log", "lolcode", "lua", "magma", "makefile", "markdown", "md", 
+    "markup-templating", "mata", "matlab", "maxscript", "mel", "mermaid", "metafont", 
+    "mizar", "mongodb", "monkey", "moonscript", "moon", "n1ql", "n4js", "n4jsd", 
+    "nand2tetris-hdl", "naniscript", "nani", "nasm", "neon", "nevod", "nginx", "nim", 
+    "nix", "nsis", "objectivec", "objc", "ocaml", "odin", "opencl", "openqasm", "qasm", 
+    "oz", "parigp", "parser", "pascal", "objectpascal", "pascaligo", "psl", "pcaxis", 
+    "px", "peoplecode", "pcode", "perl", "php", "phpdoc", "php-extras", "plant-uml", 
+    "plantuml", "plsql", "powerquery", "pq", "mscript", "powershell", "processing", 
+    "prolog", "promql", ".properties", "protobuf", "pug", "puppet", "pure", "purebasic", 
+    "pbfasm", "purescript", "purs", "python", "py", "qsharp", "qs", "q", "qml", "qore", 
+    "r", "racket", "rkt", "cshtml", "razor", "jsx", "tsx", "reason", "regex", "rego", 
+    "renpy", "rpy", "rescript", "res", "rest", "rip", "roboconf", "robotframework", 
+    "robot", "ruby", "rb", "rust", "sas", "sass", "scss", "scala", "scheme", 
+    "shell-session", "sh-session", "shellsession", "smali", "smalltalk", "smarty", "sml", 
+    "smlnj", "solidity", "sol", "solution-file", "sln", "soy", "sparql", "rq", 
+    "splunk-spl", "sqf", "sql", "squirrel", "stan", "stata", "iecst", "stylus", 
+    "supercollider", "sclang", "swift", "systemd", "t4-templating", "t4-cs", "t4", 
+    "t4-vb", "tap", "tcl", "tt2", "textile", "toml", "tremor", "trickle", "troy", 
+    "turtle", "trig", "twig", "typescript", "ts", "typoscript", "tsconfig", 
+    "unrealscript", "uscript", "uc", "uorazor", "uri", "url", "v", "vala", "vbnet", 
+    "velocity", "verilog", "vhdl", "vim", "visual-basic", "vb", "vba", "warpscript", 
+    "wasm", "web-idl", "webidl", "wgsl", "wiki", "wolfram", "mathematica", "nb", "wl", 
+    "wren", "xeora", "xeoracube", "xml-doc", "xojo", "xquery", "yaml", "yml", "yang", 
+    "zig"]