Dev step

main.py

@@ -10,7 +10,6 @@ from fastapi.templating import Jinja2Templates
 
 
 app = FastAPI(docs_url=None, redoc_url=None)
-httpsecurity = HTTPBasic()
 
 app.mount("/static", StaticFiles(directory="static"), name="static")
 templates = Jinja2Templates(directory="templates")
@@ -20,7 +19,6 @@ users = json.loads(str(os.getenv("USER_KEYS")).replace("\n", ""))
 fecha_unix = str(int(time.time()))
 log_module.log_write("master", "iniciado", "-")
 
-
 ########################## MAIN ##########################
 @app.get("/", response_class=HTMLResponse)
 async def main_page(request: Request):    

static/css/menu.css

@@ -1,3 +1,107 @@
 .menu{
     background-color: #FFF;
-}
+}
+
+dialog#menu{
+    width: 380px;
+    height: 500px;
+    border: solid 1px #000;
+    box-shadow: 5px 5px 5px #000A;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 20px;
+}
+
+dialog#menu .title{
+    font-size: 32px;
+    margin-top: -15px;
+    margin-left: -5px;
+    margin-bottom: 20px;
+}
+
+dialog#menu .item{
+    width: 100%; 
+    display: grid;
+    align-items: center;
+    grid-template-columns: 165px auto;
+    margin-bottom: 10px;
+}
+
+dialog#menu hr{
+    margin: 15px -5px;
+}
+
+dialog#menu .item .switch {
+    --secondary-container: #3a4b39;
+    --primary: #84da89;
+    font-size: 17px;
+    position: relative;
+    display: inline-block;
+    width: 3.7em;
+    height: 1.8em;
+    zoom: 0.6;
+    margin: auto;
+}
+dialog#menu .item .switch input {
+    display: none;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+dialog#menu .item .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #313033;
+    transition: 0.2s;
+    border-radius: 30px;
+}
+dialog#menu .item .slider:before {
+    position: absolute;
+    content: "";
+    height: 1.4em;
+    width: 1.4em;
+    border-radius: 20px;
+    left: 0.2em;
+    bottom: 0.2em;
+    background-color: #aeaaae;
+    transition: 0.4s;
+}
+dialog#menu .item input:checked + .slider::before {
+    background-color: var(--primary);
+}
+dialog#menu .item input:checked + .slider {
+    background-color: var(--secondary-container);
+}
+dialog#menu .item input:focus + .slider {
+    box-shadow: 0 0 1px var(--secondary-container);
+}
+dialog#menu .item input:checked + .slider:before {
+    transform: translateX(1.9em);
+}
+
+dialog#menu .item label{
+    
+}
+
+dialog#menu .item input{
+    outline: none;
+}
+
+dialog#menu .item input[type=text]{
+    
+}
+
+dialog#menu .item .range{
+    width: 100%; 
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 40px;
+}
+
+dialog#menu .item .range span{
+    text-align: right;
+}

static/js/chatHandler.js

@@ -56,7 +56,7 @@ class ChatGPT{
         // Se crea el nuevo manejador de ventana
         let uuid = this.generateRandID()
         this.windowHandlers[index||uuid] = new WindowHandler(
-            conversacion||this.definicion, 
+            conversacion||JSON.parse(JSON.stringify(this.definicion)), 
             index||uuid,
             this
         );

templates/main.html

@@ -9,7 +9,6 @@
         <link rel="stylesheet" href="static/css/tabs.css?v={{ version }}">
         <link rel="stylesheet" href="static/css/menu.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>
@@ -76,17 +75,54 @@
         
 
         <dialog class="menu" id="menu">
-            
+            <div class="title">
+                Configuración
+            </div>
+            <div class="item">
+                <label for="temperature">Temperatura:</label>
+                <input id="temperature" type="range" min=0 max=1 value=0.5 step=0.01>
+            </div>
+            <div class="item">
+                <label for="frequency_penalty">Frequency penalty:</label>
+                <div class="range">
+                    <input id="frequency_penalty" type="range" min=-1 max=1 value=0 step=0.01>
+                    <span>12</span>
+                </div>
+            </div>            
+            <div class="item">
+                <label for="presence_penalty">Presence penalty:</label>
+                <div class="range">
+                    <input id="presence_penalty" type="range" min=-1 max=1 value=0 step=0.01>
+                    <span>12</span>
+                </div>
+            </div>
+            <hr>
+            <div class="item">
+                <label for="use_tool">Usar herramientas:</label>
+                <label class="switch">
+                    <input type="checkbox">
+                    <span class="slider"></span>
+                  </label>
+
+          
+
+            </div>
+
         </dialog>
 
         <script> 
+
             var cHand;
             $(document).ready(function() {
+                $("#menu")[0].showModal();
                 cHand = new ChatGPT("{{ token }}");
             });
             let versionLocal = localStorage.getItem("version")
             let versionRemota = "{{ version }}"
 
+            $(".range input").on("input", function(){
+                $(this).parent().find("span").text((Math.round(this.value * 100) / 100).toFixed(2));
+            })
             
 
         </script>