Carga archivos iniciales

.gitignore

@@ -0,0 +1 @@
+.history/

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /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
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,30 @@
+from fastapi import FastAPI, Request, staticfiles
+from fastapi.responses import HTMLResponse
+import os
+import openai
+
+app = FastAPI()
+
+app.mount("/static", staticfiles.StaticFiles(directory="static"), name="static")
+
+@app.get("/", response_class=HTMLResponse)
+async def root(request: Request):
+    with open(os.path.join("static", "main.html")) as f:
+        return HTMLResponse(f.read())
+
+@app.post("/chat")
+async def chat(request: Request):
+    data = await request.json()
+    message = data["message"]
+    openai.api_key = str(os.getenv("OPENAI_API_KEY"))
+    model_engine = "gpt-3.5-turbo"
+    response = openai.Completion.create(
+        engine=model_engine,
+        prompt=message,
+        max_tokens=3000,
+        n=1,
+        temperature=1,
+        frequency_penalty=0,
+        presence_penalty=0
+        )
+    return response.choices[0]

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.74.*
+requests==2.27.*
+openai==0.27.*
+uvicorn[standard]==0.17.*

static/css/app.css

@@ -0,0 +1,457 @@
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+div {
+    word-wrap: break-word;
+    line-height: 1.25rem;
+}
+
+.disclaimer {
+    font-size: 0.75rem;
+    padding: 0.5rem;
+}
+
+#view-change-button {
+    display: inline-block;
+    position: absolute;
+    width: 3.125rem;
+    height: 3.125rem;
+    border-radius: 1.5625rem;
+    background: #AB72F8;
+    top: 0.3125rem;
+    right: 0.3125rem;
+    line-height: 3.125rem;
+    vertical-align: middle;
+}
+
+#view-change-button img {
+    display: none;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+}
+
+#view-change-button:not(.full) .not-full {
+    display: inline-block;
+}
+
+#view-change-button.full .full {
+    display: inline-block;
+}
+
+#contentParent {
+    height: 100%;
+}
+
+.responsive-columns-wrapper {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: row;
+    -ms-display: flex;
+    -ms-flex-direction: row;
+}
+
+.responsive-column {
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    overflow: auto;
+}
+
+#chat-column-holder {
+    text-align: center;
+}
+
+.chat-column {
+    display: flex;
+    flex-direction: column;
+    height: 90%;
+    padding: 0.9375rem 2rem 0.625rem 2rem;
+    margin: auto;
+    text-align: left;
+    /*max-width: 25rem;*/
+    min-width: 9.375rem;
+}
+
+.user-typing {
+    flex: 0;
+    border: none;
+    color: #8d25e8;
+    margin: 0.75rem;
+    font-size: 15;
+    font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+#scrollingChat {
+    margin: 0.75rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex: 1;
+}
+
+.message-inner {
+    opacity: 0;
+    margin-top: 0.9375rem;
+    -webkit-transition-property: opacity, margin-top;
+    -webkit-transition-duration: 0.75s;
+    -webkit-transition-timing-function: ease-in;
+    -moz-transition-property: opacity, margin-top;
+    -moz-transition-duration: 0.75s;
+    -moz-transition-timing-function: ease-in;
+    -o-transition-property: opacity, margin-top;
+    -o-transition-duration: 0.75s;
+    -o-transition-timing-function: ease-in;
+    -ms-transition-property: opacity, margin-top;
+    -ms-transition-duration: 0.75s;
+    -ms-transition-timing-function: ease-in;
+    transition-property: opacity, margin-top;
+    transition-duration: 0.75s;
+    transition-timing-function: ease-in;
+}
+
+.load .message-inner {
+    opacity: 1;
+    margin-top: 0.3125rem;
+}
+
+.from-user {
+    text-align: right;
+}
+
+.from-user .message-inner {
+    position: relative;
+    font-size: 1rem;
+    color: #fff;
+    letter-spacing: 0.015rem;
+    line-height: 1.3125rem;
+    background: #00B4A0;
+    border-radius: 1.25rem;
+    border-bottom-right-radius: 0;
+    text-align: left;
+    display: inline-block;
+    margin-left: 2.5rem;
+    min-width: 2.5rem;
+}
+
+.from-user .message-inner p {
+    margin: 0.3125rem;
+    padding: 0 0.9375rem;
+}
+
+.from-user .message-inner:before,
+.from-user .message-inner:after {
+    content: "";
+    position: absolute;
+}
+
+.from-user .message-inner:before {
+    z-index: -2;
+    bottom: -0.375rem;
+    right: 0;
+    height: 0.375rem;
+    width: 0.5rem;
+    background: #1cb3a0;
+}
+
+.from-user .message-inner:after {
+    z-index: -1;
+    bottom: -0.5rem;
+    right: 0;
+    height: 0.5rem;
+    width: 0.5rem;
+    background: #fff;
+    border-top-right-radius: 1.25rem;
+}
+
+.from-watson,
+.message-inner {
+    position: relative;
+    border-radius: 1.5625rem;
+    font-size: 1rem;
+    color: #B5B5B5;
+    letter-spacing: 0.015rem;
+    line-height: 1.3125rem;
+}
+
+.from-watson.latest .message-inner {
+    color: #323232;
+}
+
+.from-watson p {
+    margin: 0.3125rem;
+    padding: 0 1.25rem;
+}
+
+.from-watson.latest.top p:before {
+    content: ".";
+    color: #9855D4;
+    background-image: url("../img/marker_image.png");
+    background-size: 0.3125rem 1.3125rem;
+    position: absolute;
+    z-index: 2;
+    left: 0.4375rem;
+    width: 0.3125rem;
+    height: 1.3125rem;
+    line-height: 1.3125rem;
+}
+
+#textInput {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 1rem;
+    color: #323232;
+    letter-spacing: 0.015rem;
+    line-height: 1.3125rem;
+    height: 2.5rem;
+    max-width: 100%;
+    padding-left: 0.125rem;
+    margin-bottom: -0.125rem;
+    font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+#textInput.underline {
+    border-bottom: 2px solid #00B4A0;
+}
+
+::-webkit-input-placeholder {
+    color: #B5B5B5;
+}
+
+::-moz-placeholder {
+    color: #B5B5B5;
+    opacity: 1;
+}
+
+input:-moz-placeholder {
+    color: #B5B5B5;
+    opacity: 1;
+}
+
+:-ms-input-placeholder {
+    color: #B5B5B5;
+}
+
+::-ms-clear {
+    display: none;
+}
+
+.inputOutline {
+    display: block;
+    border-bottom: 0.0625rem solid #aeaeae;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}
+
+#textInputDummy {
+    position: absolute;
+    white-space: pre;
+    top: 0;
+    left: -1000%;
+    opacity: 0;
+}
+
+.payload-column {
+    font-family: Monaco, monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0;
+    line-height: 1.125rem;
+    background-color: #23292A;
+    color: #fff;
+    overflow-x: auto;
+    width: 20%;
+    max-width: 32.0625rem;
+    min-width: 29.6875rem;
+}
+
+#payload-column.full {
+    width: 100%;
+    max-width: none;
+    min-width: initial;
+}
+
+#payload-column .header-text,
+#payload-column #payload-initial-message {
+    font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    color: #9E9E9E;
+    letter-spacing: 0.01875rem;
+    padding: 0.5rem;
+    padding-left: 2.5rem;
+    background: #383D3E;
+}
+
+.hide {
+    display: none;
+}
+
+.payload .line-numbers,
+.payload .payload-text {
+    padding: 0.5rem;
+}
+
+.line-numbers {
+    width: 2rem;
+    color: #898989;
+    text-align: right;
+}
+
+pre {
+    margin: 0;
+    word-wrap: normal;
+}
+
+.string {
+    color: #54EED0;
+}
+
+.boolean,
+.null,
+.number {
+    color: #CE8EFF;
+}
+
+.key {
+    color: #66B7FF;
+}
+
+html {
+    font-size: 16px;
+}
+
+@media only screen and (max-width: 1000px) {
+    html {
+        font-size: 15px;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    html {
+        font-size: 14px;
+    }
+    .chat-column {
+        padding-top: 4rem;
+    }
+    #payload-column {
+        width: 0;
+        max-width: none;
+        min-width: initial;
+    }
+}
+
+
+/* IBM Design fonts https://github.ibm.com/Design/fonts */
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/light/h-n-light.eot?') format('eot'), url('../fonts/light/h-n-light.woff2') format('woff2'), url('../fonts/light/h-n-light.woff') format('woff'), url('../fonts/light/h-n-light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/light-italic/h-n-light-italic.eot?') format('eot'), url('../fonts/light-italic/h-n-light-italic.woff2') format('woff2'), url('../fonts/light-italic/h-n-light-italic.woff') format('woff'), url('../fonts/light-italic/h-n-light-italic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/roman/h-n-roman.eot?') format('eot'), url('../fonts/roman/h-n-roman.woff2') format('woff2'), url('../fonts/roman/h-n-roman.woff') format('woff'), url('../fonts/roman/h-n-roman.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/roman-italic/h-n-roman-italic.eot?') format('eot'), url('../fonts/roman-italic/h-n-roman-italic.woff2') format('woff2'), url('../fonts/roman-italic/h-n-roman-italic.woff') format('woff'), url('../fonts/roman-italic/h-n-roman-italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/medium/h-n-medium.eot?') format('eot'), url('../fonts/medium/h-n-medium.woff2') format('woff2'), url('../fonts/medium/h-n-medium.woff') format('woff'), url('../fonts/medium/h-n-medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/medium-italic/h-n-medium-italic.eot?') format('eot'), url('../fonts/medium-italic/h-n-medium-italic.woff2') format('woff2'), url('../fonts/medium-italic/h-n-medium-italic.woff') format('woff'), url('../fonts/medium-italic/h-n-medium-italic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/bold/h-n-bold.eot?') format('eot'), url('../fonts/bold/h-n-bold.woff2') format('woff2'), url('../fonts/bold/h-n-bold.woff') format('woff'), url('../fonts/bold/h-n-bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Helvetica Neue for IBM';
+    src: url('../fonts/bold-italic/h-n-bold-italic.eot?') format('eot'), url('../fonts/bold-italic/h-n-bold-italic.woff2') format('woff2'), url('../fonts/bold-italic/h-n-bold-italic.woff') format('woff'), url('../fonts/bold-italic/h-n-bold-italic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+
+/* IBM Icons */
+
+@font-face {
+    font-family: 'ibm-icons';
+    src: url('../fonts/ibm-icons.eot?ytcz1z') format('eot'), url('../fonts/ibm-icons.eot?ytcz1z#iefix') format('embedded-opentype'), url('../fonts/ibm-icons.ttf?ytcz1z') format('truetype'), url('../fonts/ibm-icons.woff?ytcz1z') format('woff'), url('../fonts/ibm-icons.svg?ytcz1z#ibm-icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+
+/* IBM glyphs */
+
+@font-face {
+    font-family: 'ibm-glyph';
+    src: url('../fonts/ibm-glyphs.eot?1b8643') format('eot'), url('../fonts/ibm-glyphs.eot?1b8643#iefix') format('embedded-opentype'), url('../fonts/ibm-glyphs.ttf?1b8643') format('truetype'), url('../fonts/ibm-glyphs.woff?1b8643') format('woff'), url('../fonts/ibm-glyphs.svg?1b8643#ibm-glyph') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+.options-list {
+    color: #8d25e8;
+    cursor: pointer;
+}
+
+.options-button {
+    color: white;
+    background-color: #8d25e8;
+    border-radius: 6px;
+    padding-bottom: 4px;
+    padding-top: 4px;
+    padding-left: 6px;
+    padding-right: 6px;
+    margin: 3px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.ultotal {
+    font-size: 12px;
+    padding-left: 10px;
+}
+
+.from-watson {
+    border-bottom: solid 1px #bbb;
+    padding-bottom: 0.5rem;
+}

static/css/app2.css

@@ -0,0 +1,254 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: Monospace;
+    font-size: 15px;
+}
+
+body {
+    display: flex;
+}
+
+.wrapper {
+    padding: 20px 20px 80px 20px;
+    height: 80vh;
+    border-radius: 10px;
+    border-bottom: 5px solid #222f3d;
+    background: #34495e;
+    margin: auto;
+    min-width: 400px;
+    max-width: 650px;
+    width: 80%;
+}
+
+.chat {
+    border-radius: 5px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    background: rgb(161, 161, 161);
+    padding: 10px 0;
+}
+
+.chat .message {
+    display: flex;
+    margin: 10px 0 0 10px;
+    filter: opacity(0.5);
+}
+
+.chat .message:last-child {
+    display: flex;
+    margin: 10px 0 0 10px;
+    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;
+}
+
+.chat .message.me div {
+    padding: 0 8px 0 0;
+}
+
+.chat .message div:before {
+    position: relative;
+    float: left;
+    content: '';
+    margin: 7px 0 0 -8px;
+    border-style: solid;
+    border-width: 8px 8px 8px 0;
+    border-color: transparent #fff transparent transparent;
+}
+
+.chat .message.me div:before {
+    float: right;
+    margin: 7px -8px 0 0;
+    border-width: 8px 0 8px 8px;
+    border-color: transparent transparent transparent #fff;
+}
+
+.chat .message div p {
+    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;
+}
+
+.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;
+}
+
+.input-box {
+    background: #222f3d;
+    margin: 10px 0;
+    height: 30px;
+    display: flex;
+    border-radius: 5px;
+}
+
+.input-box input,
+.input-box button {
+    height: 100%;
+    margin: 0;
+    border: none;
+    padding: 0 15px;
+}
+
+.input-box input:focus {
+    outline: none;
+}
+
+.input-box .input-text {
+    width: 100%;
+    border-radius: 5px 0 0 5px;
+}
+
+.input-box .input-context {
+    border-radius: 0 5px 5px 0;
+    width: 30px;
+    border-left: solid 1px #777;
+    background-image: url(/static/chatbot_client/img/collapse-up.svg);
+    background-color: #555;
+}
+
+.input-box .input-context.open {
+    border-radius: 0 5px 5px 0;
+    width: 30px;
+    border-left: solid 1px #777;
+    background-image: url(/static/chatbot_client/img/expand-down.svg);
+    background-color: #555;
+}
+
+
+/* payload */
+
+.payload-column {
+    font-family: Monaco, monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0;
+    line-height: 1.125rem;
+    background-color: #23292A;
+    color: #fff;
+    overflow-x: auto;
+    width: 20%;
+    width: 100%;
+    height: 100%;
+}
+
+#payload-column.full {
+    width: 100%;
+    max-width: none;
+    min-width: initial;
+}
+
+#payload-column .header-text,
+#payload-column #payload-initial-message {
+    font-family: Helvetica Neue for IBM, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    color: #9E9E9E;
+    letter-spacing: 0.01875rem;
+    padding: 0.5rem;
+    padding-left: 2.5rem;
+    background: #383D3E;
+}
+
+.hide {
+    display: none;
+}
+
+.payload .line-numbers,
+.payload .payload-text {
+    padding: 0.5rem;
+}
+
+.line-numbers {
+    width: 2rem;
+    color: #898989;
+    text-align: right;
+}
+
+pre {
+    margin: 0;
+    word-wrap: normal;
+}
+
+.string {
+    color: #54EED0;
+}
+
+.boolean,
+.null,
+.number {
+    color: #CE8EFF;
+}
+
+.key {
+    color: #66B7FF;
+}
+
+.responsive-columns-wrapper {
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: row;
+    -ms-display: flex;
+    -ms-flex-direction: row;
+}
+
+.options-list.active {
+    cursor: pointer;
+}
+
+@media all and (max-width: 440px) {
+    body {
+        height: calc(var(--windowHeight));
+    }
+    .wrapper {
+        height: calc(100% - 105px);
+    }
+    .chat {
+        border-radius: 0px
+    }
+}

static/js/main.js

@@ -0,0 +1,41 @@
+$(document).ready(function() {
+    // Función para enviar el mensaje al servidor al presionar enter en el input
+    $("#input-text").keypress(function(event) {
+        if (event.which == 13) {
+            event.preventDefault();
+            var message = $("#input-text").val();
+            $("#input-text").prop("disabled", true);
+            $("#input-text").val("");
+            sendMessage(message);
+        }
+    });
+
+    // Función para enviar el mensaje al servidor mediante POST y mostrar la respuesta
+    function sendMessage(message) {
+        // Agregar el mensaje enviado al elemento con id "payload-request"
+        var request_clone = $("#payload-request").clone();
+        request_clone.text(message);
+        request_clone.removeAttr("id")
+        $("#chat").append(request_clone);
+        // Realizar la petición POST al endpoint /chat
+        $.ajax({
+            url: "/chat",
+            type: "POST",
+            data: JSON.stringify({message: message}),
+            success: function(data) {
+                
+                // Clonar el elemento con id "payload-response" y agregarlo al elemento con id "chat"
+                var response_clone = $("#payload-response").clone();
+                response_clone.text(data);
+                response_clone.removeAttr("id")
+                $("#chat").append(response_clone);
+
+                // Hacer scroll al fondo del elemento con id "chat"
+                $("#chat").scrollTop($("#chat")[0].scrollHeight);
+
+                $("#input-text").prop("disabled", false);
+            },
+            
+        });
+    }
+});

static/main.html

@@ -0,0 +1,27 @@
+<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/app2.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="static/js/main.js"></script>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="chat" id="chat">
+
+  </div>
+
+  <div class='input-box'>
+    <input class='input-text' id='input-text' placeholder="Type something" type="text" autofocus="">
+    <button class='input-context' id='input-context' ></button>
+  </div>
+
+  <div id="payload-request" class="payload user"></div>
+  <div id="payload-response" class="payload assist"></div>
+</div>
+
+</body>
+</html>