Test uni module

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Dockerfile

@@ -1,33 +1,31 @@
-FROM python:3.10.12
-
-WORKDIR /code
-
-COPY ./requirements.txt /code/requirements.txt
-
-RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
-
-# Assegura que huggingface-cli está instalado
-RUN pip install huggingface-hub
-
-COPY ./app.py /code/app.py
-
-COPY ./check_token.py /code/check_token.py
-
-COPY ./inference.py /code/inference.py
-
-COPY entrypoint.sh /entrypoint.sh
-
-RUN chmod +x /entrypoint.sh
-
-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
-
-ENTRYPOINT ["/entrypoint.sh"]
-
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]
+FROM debian
+
+RUN apt-get update
+
+RUN apt-get install -y python3 pip
+
+WORKDIR /code
+
+COPY server/* /code/server/
+
+RUN pip install --no-cache-dir --upgrade -r /code/server/requirements.txt --break-system-packages
+
+RUN pip install huggingface-hub --break-system-packages
+
+COPY entrypoint.sh /code/entrypoint.sh
+
+RUN chmod +x /code/entrypoint.sh
+
+COPY web /code/web/
+
+RUN apt-get install -y curl
+
+RUN curl -fsSL https://deb.nodesource.com/setup_21.x | bash - && apt-get install -y nodejs
+
+RUN cd web && npm install 
+
+RUN cd web && npm run build
+
+WORKDIR /code/server
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "3000"]

README.md

@@ -1,12 +0,0 @@
----
-title: Rag Chat
-emoji: 💻
-colorFrom: purple
-colorTo: green
-sdk: docker
-pinned: false
-license: apache-2.0
-app_port: 8000
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

docker

@@ -1 +0,0 @@
-failed to get console mode for stdout: Identificador inválido.

entrypoint.sh

@@ -1,15 +1,17 @@
 #!/bin/bash
 
 # Verifique o token
-python /code/check_token.py $HF_TOKEN
+python3 /code/server/check_token.py $HF_TOKEN
+# python3 /code/server/ngrok_config.py $NGROK_TOKEN
+
 
 # Verifique o status de saída
 if [ $? -eq 0 ]; then
     echo "Login bem-sucedido!"
-else
+else    
     echo "Falha no login."
     exit 1
 fi
 
 # Inicie o seu aplicativo
-exec "$@"
+# exec "$@"

app.py → server/app.py

@@ -1,146 +1,149 @@
-import os
-import shutil
-import shutil
-import numpy as np
-from uuid import uuid4
-from io import BytesIO
-from pydantic import BaseModel
-from fastapi.encoders import jsonable_encoder
-from fastapi.responses import StreamingResponse
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi import FastAPI, UploadFile, File, Response, status
-from llama_index.readers import StringIterableReader, PDFReader, SimpleDirectoryReader
-from llama_index import (
-    VectorStoreIndex,
-    ServiceContext,
-    set_global_service_context,
-)
-from pyngrok import ngrok
-import inference
-
-
-app = FastAPI()
-
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-class Message(BaseModel):
-  content: str
-
-if not os.path.exists("tmp"):
-  os.mkdir("tmp")
-
-vector_stores = {}
-
-@app.post("/retriveal/ingest")
-async def store_file(
-    file: UploadFile = File(...)
-):
-
-  try:
-
-    print(file.filename)
-    id = str(uuid4())
-    file_location = f"tmp/{id}"
-
-    if not os.path.exists(file_location):
-      os.mkdir(file_location)
-
-    with open(f"{file_location}/{file.filename}",  "wb+") as f:
-      shutil.copyfileobj(file.file, f)
-
-    pdf = SimpleDirectoryReader(f"tmp/{id}").load_data()
-
-    vector_stores[id] = VectorStoreIndex.from_documents(pdf)
-
-    return jsonable_encoder({"uuid": id})
-
-  except Exception as e:
-
-    # response.status_code = status.HTTP_500_INTERNAL_SERVER_ERROR
-    return jsonable_encoder({"error": str(e)})
-
-@app.post("/retriveal/ingest/{id}")
-async def store_file_with_id(
-    id,
-    file: UploadFile = File(...)
-):
-
-  try:
-
-    print(file.filename)
-
-    if(id == None or id == ""):
-      raise Exception("Id is required")
-
-    file_location = f"tmp/{id}"
-
-    if not os.path.exists(file_location):
-      os.mkdir(file_location)
-
-    with open(f"{file_location}/{file.filename}",  "wb+") as f:
-      shutil.copyfileobj(file.file, f)
-
-    pdf = SimpleDirectoryReader(f"tmp/{id}").load_data()
-
-    vector_stores[id] = VectorStoreIndex.from_documents(pdf)
-
-    return jsonable_encoder({"uuid": id})
-
-  except Exception as e:
-
-    # response.status_code = status.HTTP_500_INTERNAL_SERVER_ERROR
-    return jsonable_encoder({"error": str(e)})
-
-@app.delete("/session/{id}")
-async def delete_session(id):
-  try:
-    shutil.rmtree(f"tmp/{id}")
-    return jsonable_encoder({"message": "ok"})
-  except Exception as e:
-    return jsonable_encoder({"error": str(e)})
-
-@app.post("/retriveal/{id}")
-async def inference(
-    id,
-    message: Message
-):
-
-    if(id == None or id == ""):
-      raise Exception("Id is required")
-
-    query = message.content
-
-    query_engine = vector_stores[id].as_query_engine()
-
-    inference = query_engine.query(query)
-
-    return inference
-
-
-def stream_inference(gen):
-  for token in gen:
-    yield token
-
-
-@app.post("/retriveal/stream/{id}")
-async def inference(
-    id,
-    message: Message
-):
-
-    if(id == None or id == ""):
-      raise Exception("Id is required")
-
-    query = message.content
-
-    query_engine = vector_stores[id].as_query_engine(streaming=True)
-
-    gen = query_engine.query(query).response_gen
-
-    return StreamingResponse(stream_inference(gen))
+import os
+import shutil
+import shutil
+import numpy as np
+from uuid import uuid4
+from io import BytesIO
+from pydantic import BaseModel
+from fastapi.staticfiles import StaticFiles
+from fastapi.encoders import jsonable_encoder
+from fastapi.responses import StreamingResponse
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi import FastAPI, UploadFile, File, Response, status
+from llama_index.readers import StringIterableReader, PDFReader, SimpleDirectoryReader
+from llama_index import (
+    VectorStoreIndex,
+    ServiceContext,
+    set_global_service_context,
+)
+# from pyngrok import ngrok
+import inference
+
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class Message(BaseModel):
+  content: str
+
+if not os.path.exists("tmp"):
+  os.mkdir("tmp")
+
+vector_stores = {}
+
+@app.post("/retriveal/ingest")
+async def store_file(
+    file: UploadFile = File(...)
+):
+
+  try:
+
+    print(file.filename)
+    id = str(uuid4())
+    file_location = f"tmp/{id}"
+
+    if not os.path.exists(file_location):
+      os.mkdir(file_location)
+
+    with open(f"{file_location}/{file.filename}",  "wb+") as f:
+      shutil.copyfileobj(file.file, f)
+
+    pdf = SimpleDirectoryReader(f"tmp/{id}").load_data()
+
+    vector_stores[id] = VectorStoreIndex.from_documents(pdf)
+
+    return jsonable_encoder({"uuid": id})
+
+  except Exception as e:
+
+    # response.status_code = status.HTTP_500_INTERNAL_SERVER_ERROR
+    return jsonable_encoder({"error": str(e)})
+
+@app.post("/retriveal/ingest/{id}")
+async def store_file_with_id(
+    id,
+    file: UploadFile = File(...)
+):
+
+  try:
+
+    print(file.filename)
+
+    if(id == None or id == ""):
+      raise Exception("Id is required")
+
+    file_location = f"tmp/{id}"
+
+    if not os.path.exists(file_location):
+      os.mkdir(file_location)
+
+    with open(f"{file_location}/{file.filename}",  "wb+") as f:
+      shutil.copyfileobj(file.file, f)
+
+    pdf = SimpleDirectoryReader(f"tmp/{id}").load_data()
+
+    vector_stores[id] = VectorStoreIndex.from_documents(pdf)
+
+    return jsonable_encoder({"uuid": id})
+
+  except Exception as e:
+
+    # response.status_code = status.HTTP_500_INTERNAL_SERVER_ERROR
+    return jsonable_encoder({"error": str(e)})
+
+@app.delete("/session/{id}")
+async def delete_session(id):
+  try:
+    shutil.rmtree(f"tmp/{id}")
+    return jsonable_encoder({"message": "ok"})
+  except Exception as e:
+    return jsonable_encoder({"error": str(e)})
+
+@app.post("/retriveal/{id}")
+async def inference(
+    id,
+    message: Message
+):
+
+    if(id == None or id == ""):
+      raise Exception("Id is required")
+
+    query = message.content
+
+    query_engine = vector_stores[id].as_query_engine()
+
+    inference = query_engine.query(query)
+
+    return inference
+
+
+def stream_inference(gen):
+  for token in gen:
+    yield token
+
+
+@app.post("/retriveal/stream/{id}")
+async def inference(
+    id,
+    message: Message
+):
+
+    if(id == None or id == ""):
+      raise Exception("Id is required")
+
+    query = message.content
+
+    query_engine = vector_stores[id].as_query_engine(streaming=True)
+
+    gen = query_engine.query(query).response_gen
+
+    return StreamingResponse(stream_inference(gen))
+
+app.mount("/", StaticFiles(directory="static", html = True), name="static")

check_token.py → server/check_token.py

@@ -1,6 +1,6 @@
-import os
-from huggingface_hub._login import _login
-
-HF_KEY = os.environ["HF_KEY"]
-
-_login(token=HF_KEY, add_to_git_credential=False)
+import os
+from huggingface_hub._login import _login
+
+HF_KEY = os.environ["HF_KEY"]
+
+_login(token=HF_KEY, add_to_git_credential=False)

inference.py → server/inference.py

@@ -1,59 +1,59 @@
-import logging
-import sys
-from IPython.display import Markdown, display
-import torch
-from llama_index.llms.huggingface import HuggingFaceLLM
-from llama_index.prompts import PromptTemplate
-from llama_index.embeddings.huggingface import HuggingFaceEmbedding
-
-from llama_index import (
-    ServiceContext,
-    set_global_service_context,
-)
-
-logging.basicConfig(stream=sys.stdout, level=logging.INFO)
-logging.getLogger().addHandler(logging.StreamHandler(stream=sys.stdout))
-
-
-# Model names (make sure you have access on HF)
-LLAMA2_7B = "meta-llama/Llama-2-7b-hf"
-LLAMA2_7B_CHAT = "meta-llama/Llama-2-7b-chat-hf"
-LLAMA2_13B = "meta-llama/Llama-2-13b-hf"
-LLAMA2_13B_CHAT = "meta-llama/Llama-2-13b-chat-hf"
-LLAMA2_70B = "meta-llama/Llama-2-70b-hf"
-LLAMA2_70B_CHAT = "meta-llama/Llama-2-70b-chat-hf"
-
-selected_model = LLAMA2_7B_CHAT
-
-SYSTEM_PROMPT = """Você é um assistente de IA que responde a perguntas de maneira amigável, com base nos documentos fornecidos. Aqui estão algumas regras que você sempre segue:
-- Gerar saídas legíveis para humanos, evitando criar texto sem sentido.
-- Gerar apenas a saída solicitada, sem incluir qualquer outro idioma antes ou depois da saída solicitada.
-- Nunca agradecer, expressar felicidade em ajudar, mencionar que é um agente de IA, etc. Apenas responda diretamente.
-- Gerar linguagem profissional geralmente usada em documentos comerciais na América do Norte.
-- Nunca gerar linguagem ofensiva ou obscena.
-- Traduza as suas respostas sempre para Português Brasileiro. Nunca responsa nada em inglês.
-"""
-
-query_wrapper_prompt = PromptTemplate(
-    "[INST]<<SYS>>\n" + SYSTEM_PROMPT + "<</SYS>>\n\n{query_str}[/INST] "
-)
-
-llm = HuggingFaceLLM(
-    context_window=4096,
-    max_new_tokens=2048,
-    generate_kwargs={"temperature": 0.0, "do_sample": False},
-    query_wrapper_prompt=query_wrapper_prompt,
-    tokenizer_name=selected_model,
-    model_name=selected_model,
-    device_map="auto",
-    # change these settings below depending on your GPU
-    # model_kwargs={"torch_dtype": torch.float16, "load_in_8bit": True},
-)
-
-
-embed_model = HuggingFaceEmbedding(model_name="neuralmind/bert-base-portuguese-cased")
-# embed_model = FlagModel("BAAI/bge-m3")
-
-service_context = ServiceContext.from_defaults(llm=llm, embed_model=embed_model)
-
-set_global_service_context(service_context)
+import logging
+import sys
+from IPython.display import Markdown, display
+import torch
+from llama_index.llms.huggingface import HuggingFaceLLM
+from llama_index.prompts import PromptTemplate
+from llama_index.embeddings.huggingface import HuggingFaceEmbedding
+
+from llama_index import (
+    ServiceContext,
+    set_global_service_context,
+)
+
+logging.basicConfig(stream=sys.stdout, level=logging.INFO)
+logging.getLogger().addHandler(logging.StreamHandler(stream=sys.stdout))
+
+
+# Model names (make sure you have access on HF)
+LLAMA2_7B = "meta-llama/Llama-2-7b-hf"
+LLAMA2_7B_CHAT = "meta-llama/Llama-2-7b-chat-hf"
+LLAMA2_13B = "meta-llama/Llama-2-13b-hf"
+LLAMA2_13B_CHAT = "meta-llama/Llama-2-13b-chat-hf"
+LLAMA2_70B = "meta-llama/Llama-2-70b-hf"
+LLAMA2_70B_CHAT = "meta-llama/Llama-2-70b-chat-hf"
+
+selected_model = LLAMA2_7B_CHAT
+
+SYSTEM_PROMPT = """Você é um assistente de IA que responde a perguntas de maneira amigável, com base nos documentos fornecidos. Aqui estão algumas regras que você sempre segue:
+- Gerar saídas legíveis para humanos, evitando criar texto sem sentido.
+- Gerar apenas a saída solicitada, sem incluir qualquer outro idioma antes ou depois da saída solicitada.
+- Nunca agradecer, expressar felicidade em ajudar, mencionar que é um agente de IA, etc. Apenas responda diretamente.
+- Gerar linguagem profissional geralmente usada em documentos comerciais na América do Norte.
+- Nunca gerar linguagem ofensiva ou obscena.
+- Traduza as suas respostas sempre para Português Brasileiro. Nunca responsa nada em inglês.
+"""
+
+query_wrapper_prompt = PromptTemplate(
+    "[INST]<<SYS>>\n" + SYSTEM_PROMPT + "<</SYS>>\n\n{query_str}[/INST] "
+)
+
+llm = HuggingFaceLLM(
+    context_window=4096,
+    max_new_tokens=2048,
+    generate_kwargs={"temperature": 0.0, "do_sample": False},
+    query_wrapper_prompt=query_wrapper_prompt,
+    tokenizer_name=selected_model,
+    model_name=selected_model,
+    device_map="auto",
+    # change these settings below depending on your GPU
+    # model_kwargs={"torch_dtype": torch.float16, "load_in_8bit": True},
+)
+
+
+embed_model = HuggingFaceEmbedding(model_name="neuralmind/bert-base-portuguese-cased")
+# embed_model = FlagModel("BAAI/bge-m3")
+
+service_context = ServiceContext.from_defaults(llm=llm, embed_model=embed_model)
+
+set_global_service_context(service_context)

server/ngrok_config.py

@@ -0,0 +1,11 @@
+# import os
+# import uvicorn
+# from pyngrok import ngrok
+
+# NGROK_KEY = os.environ["NGROK_KEY"]
+
+# ngrok.set_auth_token(NGROK_KEY)
+
+# port = 80
+
+# public_url = ngrok.connect(port).public_url

requirements.txt → server/requirements.txt

@@ -1,13 +1,12 @@
-langchain==0.1.7 
-fastapi==0.109.2 
-python-multipart==0.0.9 
-uvicorn==0.27.1 
-pypdf==4.0.1
-pyngrok==7.1.2
-ipywidgets==7.7.1 
-bitsandbytes==0.42.0
-accelerate==0.27.2
-llama-index==0.9.47
-torch==2.0.1
-transformers==4.37.2
-pyngrok
+langchain==0.1.7 
+fastapi==0.109.2 
+python-multipart==0.0.9 
+uvicorn==0.27.1 
+pypdf==4.0.1
+pyngrok==7.1.2
+ipywidgets==7.7.1 
+bitsandbytes==0.42.0
+accelerate==0.27.2
+llama-index==0.9.47
+transformers==4.37.2
+torch==2.0.1

server/static/assets/index-4iaAfGg3.css

@@ -0,0 +1 @@
+:root{--toastify-color-light: #fff;--toastify-color-dark: #121212;--toastify-color-info: #3498db;--toastify-color-success: #07bc0c;--toastify-color-warning: #f1c40f;--toastify-color-error: #e74c3c;--toastify-color-transparent: rgba(255, 255, 255, .7);--toastify-icon-color-info: var(--toastify-color-info);--toastify-icon-color-success: var(--toastify-color-success);--toastify-icon-color-warning: var(--toastify-color-warning);--toastify-icon-color-error: var(--toastify-color-error);--toastify-toast-width: 320px;--toastify-toast-offset: 16px;--toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));--toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));--toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));--toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));--toastify-toast-background: #fff;--toastify-toast-min-height: 64px;--toastify-toast-max-height: 800px;--toastify-toast-bd-radius: 6px;--toastify-font-family: sans-serif;--toastify-z-index: 9999;--toastify-text-color-light: #757575;--toastify-text-color-dark: #fff;--toastify-text-color-info: #fff;--toastify-text-color-success: #fff;--toastify-text-color-warning: #fff;--toastify-text-color-error: #fff;--toastify-spinner-color: #616161;--toastify-spinner-color-empty-area: #e0e0e0;--toastify-color-progress-light: linear-gradient( to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55 );--toastify-color-progress-dark: #bb86fc;--toastify-color-progress-info: var(--toastify-color-info);--toastify-color-progress-success: var(--toastify-color-success);--toastify-color-progress-warning: var(--toastify-color-warning);--toastify-color-progress-error: var(--toastify-color-error);--toastify-color-progress-bgo: .2}.Toastify__toast-container{z-index:var(--toastify-z-index);-webkit-transform:translate3d(0,0,var(--toastify-z-index));position:fixed;padding:4px;width:var(--toastify-toast-width);box-sizing:border-box;color:#fff}.Toastify__toast-container--top-left{top:var(--toastify-toast-top);left:var(--toastify-toast-left)}.Toastify__toast-container--top-center{top:var(--toastify-toast-top);left:50%;transform:translate(-50%)}.Toastify__toast-container--top-right{top:var(--toastify-toast-top);right:var(--toastify-toast-right)}.Toastify__toast-container--bottom-left{bottom:var(--toastify-toast-bottom);left:var(--toastify-toast-left)}.Toastify__toast-container--bottom-center{bottom:var(--toastify-toast-bottom);left:50%;transform:translate(-50%)}.Toastify__toast-container--bottom-right{bottom:var(--toastify-toast-bottom);right:var(--toastify-toast-right)}@media only screen and (max-width : 480px){.Toastify__toast-container{width:100vw;padding:0;left:env(safe-area-inset-left);margin:0}.Toastify__toast-container--top-left,.Toastify__toast-container--top-center,.Toastify__toast-container--top-right{top:env(safe-area-inset-top);transform:translate(0)}.Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-right{bottom:env(safe-area-inset-bottom);transform:translate(0)}.Toastify__toast-container--rtl{right:env(safe-area-inset-right);left:initial}}.Toastify__toast{--y: 0;position:relative;touch-action:none;min-height:var(--toastify-toast-min-height);box-sizing:border-box;margin-bottom:1rem;padding:8px;border-radius:var(--toastify-toast-bd-radius);box-shadow:0 4px 12px #0000001a;display:flex;justify-content:space-between;max-height:var(--toastify-toast-max-height);font-family:var(--toastify-font-family);cursor:default;direction:ltr;z-index:0;overflow:hidden}.Toastify__toast--stacked{position:absolute;width:100%;transform:translate3d(0,var(--y),0) scale(var(--s));transition:transform .3s}.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,.Toastify__toast--stacked[data-collapsed] .Toastify__close-button{transition:opacity .1s}.Toastify__toast--stacked[data-collapsed=false]{overflow:visible}.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>*{opacity:0}.Toastify__toast--stacked:after{content:"";position:absolute;left:0;right:0;height:calc(var(--g) * 1px);bottom:100%}.Toastify__toast--stacked[data-pos=top]{top:0}.Toastify__toast--stacked[data-pos=bot]{bottom:0}.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before{transform-origin:top}.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before{transform-origin:bottom}.Toastify__toast--stacked:before{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;transform:scaleY(3);z-index:-1}.Toastify__toast--rtl{direction:rtl}.Toastify__toast--close-on-click{cursor:pointer}.Toastify__toast-body{margin:auto 0;flex:1 1 auto;padding:6px;display:flex;align-items:center}.Toastify__toast-body>div:last-child{word-break:break-word;flex:1}.Toastify__toast-icon{margin-inline-end:10px;width:20px;flex-shrink:0;display:flex}.Toastify--animate{animation-fill-mode:both;animation-duration:.5s}.Toastify--animate-icon{animation-fill-mode:both;animation-duration:.3s}@media only screen and (max-width : 480px){.Toastify__toast{margin-bottom:0;border-radius:0}}.Toastify__toast-theme--dark{background:var(--toastify-color-dark);color:var(--toastify-text-color-dark)}.Toastify__toast-theme--light,.Toastify__toast-theme--colored.Toastify__toast--default{background:var(--toastify-color-light);color:var(--toastify-text-color-light)}.Toastify__toast-theme--colored.Toastify__toast--info{color:var(--toastify-text-color-info);background:var(--toastify-color-info)}.Toastify__toast-theme--colored.Toastify__toast--success{color:var(--toastify-text-color-success);background:var(--toastify-color-success)}.Toastify__toast-theme--colored.Toastify__toast--warning{color:var(--toastify-text-color-warning);background:var(--toastify-color-warning)}.Toastify__toast-theme--colored.Toastify__toast--error{color:var(--toastify-text-color-error);background:var(--toastify-color-error)}.Toastify__progress-bar-theme--light{background:var(--toastify-color-progress-light)}.Toastify__progress-bar-theme--dark{background:var(--toastify-color-progress-dark)}.Toastify__progress-bar--info{background:var(--toastify-color-progress-info)}.Toastify__progress-bar--success{background:var(--toastify-color-progress-success)}.Toastify__progress-bar--warning{background:var(--toastify-color-progress-warning)}.Toastify__progress-bar--error{background:var(--toastify-color-progress-error)}.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error{background:var(--toastify-color-transparent)}.Toastify__close-button{color:#fff;background:transparent;outline:none;border:none;padding:0;cursor:pointer;opacity:.7;transition:.3s ease;align-self:flex-start;z-index:1}.Toastify__close-button--light{color:#000;opacity:.3}.Toastify__close-button>svg{fill:currentColor;height:16px;width:14px}.Toastify__close-button:hover,.Toastify__close-button:focus{opacity:1}@keyframes Toastify__trackProgress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.Toastify__progress-bar{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:var(--toastify-z-index);opacity:.7;transform-origin:left;border-bottom-left-radius:var(--toastify-toast-bd-radius)}.Toastify__progress-bar--animated{animation:Toastify__trackProgress linear 1 forwards}.Toastify__progress-bar--controlled{transition:transform .2s}.Toastify__progress-bar--rtl{right:0;left:initial;transform-origin:right;border-bottom-left-radius:initial;border-bottom-right-radius:var(--toastify-toast-bd-radius)}.Toastify__progress-bar--wrp{position:absolute;bottom:0;left:0;width:100%;height:5px;border-bottom-left-radius:var(--toastify-toast-bd-radius)}.Toastify__progress-bar--wrp[data-hidden=true]{opacity:0}.Toastify__progress-bar--bg{opacity:var(--toastify-color-progress-bgo);width:100%;height:100%}.Toastify__spinner{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toastify-spinner-color-empty-area);border-right-color:var(--toastify-spinner-color);animation:Toastify__spin .65s linear infinite}@keyframes Toastify__bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutRight{20%{opacity:1;transform:translate3d(-20px,var(--y),0)}to{opacity:0;transform:translate3d(2000px,var(--y),0)}}@keyframes Toastify__bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}@keyframes Toastify__bounceOutLeft{20%{opacity:1;transform:translate3d(20px,var(--y),0)}to{opacity:0;transform:translate3d(-2000px,var(--y),0)}}@keyframes Toastify__bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes Toastify__bounceOutUp{20%{transform:translate3d(0,calc(var(--y) - 10px),0)}40%,45%{opacity:1;transform:translate3d(0,calc(var(--y) + 20px),0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes Toastify__bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}@keyframes Toastify__bounceOutDown{20%{transform:translate3d(0,calc(var(--y) - 10px),0)}40%,45%{opacity:1;transform:translate3d(0,calc(var(--y) + 20px),0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.Toastify__bounce-enter--top-left,.Toastify__bounce-enter--bottom-left{animation-name:Toastify__bounceInLeft}.Toastify__bounce-enter--top-right,.Toastify__bounce-enter--bottom-right{animation-name:Toastify__bounceInRight}.Toastify__bounce-enter--top-center{animation-name:Toastify__bounceInDown}.Toastify__bounce-enter--bottom-center{animation-name:Toastify__bounceInUp}.Toastify__bounce-exit--top-left,.Toastify__bounce-exit--bottom-left{animation-name:Toastify__bounceOutLeft}.Toastify__bounce-exit--top-right,.Toastify__bounce-exit--bottom-right{animation-name:Toastify__bounceOutRight}.Toastify__bounce-exit--top-center{animation-name:Toastify__bounceOutUp}.Toastify__bounce-exit--bottom-center{animation-name:Toastify__bounceOutDown}@keyframes Toastify__zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes Toastify__zoomOut{0%{opacity:1}50%{opacity:0;transform:translate3d(0,var(--y),0) scale3d(.3,.3,.3)}to{opacity:0}}.Toastify__zoom-enter{animation-name:Toastify__zoomIn}.Toastify__zoom-exit{animation-name:Toastify__zoomOut}@keyframes Toastify__flipIn{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}@keyframes Toastify__flipOut{0%{transform:translate3d(0,var(--y),0) perspective(400px)}30%{transform:translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);opacity:1}to{transform:translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);opacity:0}}.Toastify__flip-enter{animation-name:Toastify__flipIn}.Toastify__flip-exit{animation-name:Toastify__flipOut}@keyframes Toastify__slideInRight{0%{transform:translate3d(110%,0,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInLeft{0%{transform:translate3d(-110%,0,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInUp{0%{transform:translate3d(0,110%,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideInDown{0%{transform:translate3d(0,-110%,0);visibility:visible}to{transform:translate3d(0,var(--y),0)}}@keyframes Toastify__slideOutRight{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(110%,var(--y),0)}}@keyframes Toastify__slideOutLeft{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(-110%,var(--y),0)}}@keyframes Toastify__slideOutDown{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(0,500px,0)}}@keyframes Toastify__slideOutUp{0%{transform:translate3d(0,var(--y),0)}to{visibility:hidden;transform:translate3d(0,-500px,0)}}.Toastify__slide-enter--top-left,.Toastify__slide-enter--bottom-left{animation-name:Toastify__slideInLeft}.Toastify__slide-enter--top-right,.Toastify__slide-enter--bottom-right{animation-name:Toastify__slideInRight}.Toastify__slide-enter--top-center{animation-name:Toastify__slideInDown}.Toastify__slide-enter--bottom-center{animation-name:Toastify__slideInUp}.Toastify__slide-exit--top-left,.Toastify__slide-exit--bottom-left{animation-name:Toastify__slideOutLeft;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--top-right,.Toastify__slide-exit--bottom-right{animation-name:Toastify__slideOutRight;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--top-center{animation-name:Toastify__slideOutUp;animation-timing-function:ease-in;animation-duration:.3s}.Toastify__slide-exit--bottom-center{animation-name:Toastify__slideOutDown;animation-timing-function:ease-in;animation-duration:.3s}@keyframes Toastify__spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.left-4{left:1rem}.top-0{top:0}.top-4{top:1rem}.mb-4{margin-bottom:1rem}.mb-8{margin-bottom:2rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mr-auto{margin-right:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.aspect-video{aspect-ratio:16 / 9}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-48{width:12rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.min-w-\[200px\]{min-width:200px}.max-w-\[80\%\]{max-width:80%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.self-end{align-self:flex-end}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.border-b{border-bottom-width:1px}.bg-\[\#131318\]{--tw-bg-opacity: 1;background-color:rgb(19 19 24 / var(--tw-bg-opacity))}.bg-\[\#7159c1\]{--tw-bg-opacity: 1;background-color:rgb(113 89 193 / var(--tw-bg-opacity))}.bg-black\/80{background-color:#000c}.bg-sky-600{--tw-bg-opacity: 1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.bg-slate-600{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.fill-sky-800{fill:#075985}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.text-center{text-align:center}.text-xs{font-size:.75rem;line-height:1rem}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-white{--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity))}.transition-\[flex-grow\]{transition-property:flex-grow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:brightness-110:hover{--tw-brightness: brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.disabled\:brightness-75:disabled{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.disabled\:hover\:brightness-75:hover:disabled{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@media (min-width: 768px){.md\:sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.md\:static{position:static}.md\:w-full{width:100%}.md\:animate-none{animation:none}.md\:border-l-2{border-left-width:2px}.md\:border-l-white{--tw-border-opacity: 1;border-left-color:rgb(255 255 255 / var(--tw-border-opacity))}.md\:bg-transparent{background-color:transparent}}@media (prefers-color-scheme: dark){.dark\:text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}}

server/static/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-Ovl1jNHo.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-4iaAfGg3.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

web/.eslintrc.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

web/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rag Chat</title>
+  </head>
+  <body>
+    <div id="root" class=""></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

web/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "front-end",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "ai": "^3.0.5",
+    "axios": "^1.6.7",
+    "langchain": "^0.1.25",
+    "lucide-react": "^0.344.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-toastify": "^10.0.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "vite": "^5.1.4"
+  }
+}

web/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/src/App.jsx

@@ -0,0 +1,14 @@
+import { ChatWindow } from "./components/ChatWindow";
+import { UploadDocumentsForm } from "./components/UploadDocumentsForm";
+
+export default function App() {
+
+  return (
+    <div className="flex min-h-screen bg-[#131318] text-white">
+      <UploadDocumentsForm></UploadDocumentsForm>
+      <ChatWindow
+        endpoint={import.meta.env.VITE_PUBLIC_API_URL + "/retriveal/stream"}
+      ></ChatWindow>
+    </div>
+  );
+}

web/src/components/ChatMessageBubble.jsx

@@ -0,0 +1,33 @@
+export function ChatMessageBubble(props) {
+  const colorClassName =
+    props.message.role === "user" ? "bg-sky-600" : "bg-slate-50 text-black";
+  const alignmentClassName =
+    props.message.role === "user" ? "ml-auto" : "mr-auto";
+  return (
+    <div
+      className={`${alignmentClassName} ${colorClassName} rounded px-4 py-2 max-w-[80%] mb-8 flex`}
+    >
+      <div className="whitespace-pre-wrap flex flex-col">
+        <span>{props.message.content}</span>
+        {props.sources && props.sources.length ? <>
+          <code className="mt-4 mr-auto bg-slate-600 px-2 py-1 rounded">
+            <h2>
+              🔍 Sources:
+            </h2>
+          </code>
+          <code className="mt-1 mr-2 bg-slate-600 px-2 py-1 rounded text-xs">
+            {props.sources?.map((source, i) => (
+              <div className="mt-2" key={"source:" + i}>
+                {i + 1}. &quot;{source.pageContent}&quot;{
+                  source.metadata?.loc?.lines !== undefined
+                    ? <div><br/>Lines {source.metadata?.loc?.lines?.from} to {source.metadata?.loc?.lines?.to}</div>
+                    : ""
+                  }
+              </div>
+            ))}
+          </code>
+        </> : ""}
+      </div>
+    </div>
+  );
+}

web/src/components/ChatWindow.jsx

@@ -0,0 +1,177 @@
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+import { useState, useEffect } from "react";
+
+import { ChatMessageBubble } from "./ChatMessageBubble";
+import { api } from "../lib/axios";
+
+export function ChatWindow({
+  endpoint,
+  placeholder,
+  showIngestForm,
+  showIntermediateStepsToggle
+}) {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [sourcesForMessages, setSourcesForMessages] = useState({});
+
+  const handleInputChange = (e) =>
+    setInput(e.currentTarget.value);
+
+  const sendMessage = async (e) => {
+    e.preventDefault();
+
+    setIsLoading(true);
+
+    if (sessionStorage.getItem("ragChat@sessiorId") === null) {
+      toast("É necessário enviar um arquivo!", {
+        theme: "dark",
+      });
+    }
+
+    if (!input) {
+      setIsLoading(false);
+      return;
+    }
+
+    const tmp = "Me responda isso em português: " + input;
+
+    setInput("");
+
+    if (!messages.length) {
+      await new Promise((resolve) => setTimeout(resolve, 300));
+    }
+
+    setMessages(
+      messages.concat({
+        id: messages.length.toString(),
+        content: input,
+        role: "user",
+      }),
+    );
+
+    try {
+      const response = await api.post(
+        `/retriveal/stream/${sessionStorage.getItem("ragChat@sessiorId")}`,
+        { content: tmp }
+      );
+
+
+      const json = response.data;
+
+      if (response.status === 200) {
+
+
+        setMessages((prevState) => {
+          const prev = [...prevState];
+
+          prev.push({
+            id: prev.length.toString(),
+            content: json.replace("</s>", " "),
+            role: "assistant",
+          });
+
+          return prev;
+        });
+      } else {
+        if (json.error) {
+          toast(json.error, {
+            theme: "dark",
+          });
+          throw new Error(json.error);
+        }
+      }
+    } catch (error) {
+      toast(error.message, {
+        theme: "dark",
+      });
+    }
+
+    setIsLoading(false);
+  };
+
+  // Preciso que quando essa página for fechada o sessionStorage, alertar o usuário que ele perderá os dados
+  // e enviar uma requisição para o servidor para que ele apague os dados do usuário
+  useEffect(() => {
+
+    const listener = () => {
+      const session = sessionStorage.getItem("ragChat@sessiorId");
+
+      if (!session) return;
+      try {
+        navigator.sendBeacon(`/session/${session}`);
+        sessionStorage.removeItem("ragChat@sessiorId");
+        sessionStorage.removeItem("uploadedDocuments");
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+    window.addEventListener("unload", listener);
+
+    return () => window.removeEventListener("unload", listener)
+  }, []);
+
+  return (
+    <div
+      className={`flex w-full max-h-screen flex-2 flex-col items-center p-4 grow overflow-hidden md:border-l-2 md:border-l-white`}
+    >
+      <div className="flex flex-col-reverse w-full mb-4 overflow-auto transition-[flex-grow] ease-in-out grow p-2.5">
+        {messages.length > 0
+          ? [...messages].reverse().map((m, i) => {
+            const sourceKey = (messages.length - 1 - i).toString();
+            return (<ChatMessageBubble
+              key={m.id}
+              message={m}
+              sources={sourcesForMessages[sourceKey]}
+            ></ChatMessageBubble>)
+          })
+          : ""}
+      </div>
+
+      <form onSubmit={sendMessage} className="flex w-full flex-col">
+        <div className="flex w-full mt-4">
+          <input
+            className="grow mr-2 p-2.5 rounded outline-none text-black"
+            value={input}
+            placeholder={"Me faça uma pergunta!"}
+            onChange={handleInputChange}
+          />
+          <button
+            type="submit"
+            className="shrink-0 px-4 bg-[#7159c1] rounded hover:brightness-110 transition-all"
+          >
+            <div role="status" className={`flex justify-center`}>
+              {isLoading ? (
+                <>
+                  <svg
+                    aria-hidden="true"
+                    className="w-6 h-6 text-white animate-spin dark:text-white fill-sky-800"
+                    viewBox="0 0 100 101"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />
+                  </svg>
+                  <span className="sr-only">Loading...</span>
+                </>
+              ) : (
+                <span>Send</span>
+              )}
+            </div>
+          </button>
+        </div>
+      </form>
+      <ToastContainer />
+    </div>
+  );
+}

web/src/components/Navbar.jsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { usePathname } from 'next/navigation';
+
+export function Navbar() {
+  const pathname = usePathname();
+  return (
+    <nav className="mb-4">
+      <a className={`mr-4 ${pathname === "/" ? "text-white border-b" : ""}`} href="/">🏴‍☠️ Chat</a>
+      <a className={`mr-4 ${pathname === "/structured_output" ? "text-white border-b" : ""}`} href="/structured_output">🧱 Structured Output</a>
+      <a className={`mr-4 ${pathname === "/agents" ? "text-white border-b" : ""}`} href="/agents">🦜 Agents</a>
+      <a className={`mr-4 ${pathname === "/retrieval" ? "text-white border-b" : ""}`} href="/retrieval">🐶 Retrieval</a>
+      <a className={`mr-4 ${pathname === "/retrieval_agents" ? "text-white border-b" : ""}`} href="/retrieval_agents">🤖 Retrieval Agents</a>
+    </nav>
+  );
+}

web/src/components/UploadDocumentsForm.jsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect } from "react";
+import { ChevronLeft, FileText, Menu } from "lucide-react";
+
+export function UploadDocumentsForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [document, setDocument] = useState(null);
+  const [uploadedDocuments, setUploadedDocuments] = useState([]);
+  const formRef = useRef(null);
+  const inputRef = useRef(null);
+
+  const [formState, setFormState] = useState(true);
+
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleFileInput = (event) => {
+    setDocument(event.target.files[0]);
+  };
+
+
+
+  const ingest = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    if (!document) {
+      setErrorMessage("Selecione um documento para enviar");
+      setIsLoading(false);
+      return;
+    }
+
+    const isDocumentUploaded = uploadedDocuments.find(
+      (doc) => doc.name === document.name,
+    );
+
+    if (isDocumentUploaded) {
+      setErrorMessage("Este documento já foi enviado");
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      formData.append("file", document);
+      
+      const url = sessionStorage.getItem("ragChat@sessiorId")
+        ? `/retriveal/ingest/${sessionStorage.getItem("ragChat@sessiorId")}`
+        : "/retriveal/ingest";
+      
+      const response = await fetch(url, {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (response.status === 200) {
+        console.log("Document ingested successfully");
+
+        const data = await response.json()
+
+        // Salva o nome do arquivo e o tamanho do arquivo no estado uploadedDocuments
+        setUploadedDocuments((prevState) => {
+          return [...prevState, { name: document.name, size: document.size }];
+        });
+
+        // Salva essas informações no sessionStorage
+        sessionStorage.setItem(
+          "uploadedDocuments",
+          JSON.stringify(uploadedDocuments),
+        );
+
+        // Salva id recebido no sessionStorage
+        if (!sessionStorage.getItem("ragChat@sessiorId"))
+          sessionStorage.setItem("ragChat@sessiorId", data.uuid);
+
+        setErrorMessage("");
+        setDocument(null);
+        if (inputRef.current) inputRef.current.value = "";
+      } else if (response.status < 500) {
+        console.error("Error ingesting document");
+        console.log(await response.text())
+        setErrorMessage("Erro ao enviar o documento! Recurso não encontrado.");
+      }
+    } catch (error) {
+      console.error("Error ingesting document", error);
+      setErrorMessage(
+        "Erro ao enviar o documento! Tente novamente mais tarde.",
+      );
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    const savedDocuments = sessionStorage.getItem("uploadedDocuments");
+    if (savedDocuments) {
+      setUploadedDocuments(JSON.parse(savedDocuments));
+    }
+
+    if (window.innerWidth) setFormState(window.innerWidth > 768)
+
+    window.addEventListener("resize", () => {
+      if (window.innerWidth > 768) {
+        setFormState(true);
+      } else {
+        setFormState(false);
+      }
+    });
+
+  }, []);
+
+  return (
+    <>
+      <Menu className="w-8 h-8 aspect-square md:sr-only absolute top-4 left-4" onClick={e => setFormState(prev => !prev)} />
+
+      <form
+        onSubmit={ingest}
+        ref={formRef}
+        className={`absolute h-full top-0 bg-black/80 md:bg-transparent md:static flex flex-col md:w-full flex-1 p-4 gap-2.5 min-w-[200px] ${formState ? "animate-slideIn md:animate-none" : "-translate-x-full transition-all bg-transparent"}`}
+      >
+
+        <ChevronLeft className="w-8 h-8 aspect-square md:sr-only self-end" onClick={e => setFormState(prev => !prev)} />
+
+        <input
+          type="file"
+          id="document-input"
+          className="sr-only"
+          accept=".pdf,.doc,.docx"
+          onInput={handleFileInput}
+          ref={inputRef}
+        />
+
+        <label htmlFor="document-input">
+          <div className="w-48 md:w-full aspect-video flex flex-col gap-1 items-center p-2.5 justify-center ring-2 ring-white rounded cursor-pointer">
+            <FileText />
+            <span className="text-center text-xs">
+              {document && document.name
+                ? document.name.length > 15
+                  ? document.name.substring(0, 15) +
+                  "..." +
+                  document.name.substring(document.name.length - 5)
+                  : document.name
+                : "Faça o upload de um documento"}
+            </span>
+          </div>
+        </label>
+
+        <button
+          type="submit"
+          className="shrink-0 p-2.5 bg-[#7159c1] rounded w-full hover:brightness-110 transition-all disabled:hover:brightness-75 disabled:brightness-75"
+          disabled={isLoading || !document}
+        >
+          <div
+            role="status"
+            className={`${isLoading ? "" : "hidden"} flex justify-center`}
+          >
+            <svg
+              aria-hidden="true"
+              className="w-6 h-6 text-white animate-spin dark:text-white fill-sky-800"
+              viewBox="0 0 100 101"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                fill="currentColor"
+              />
+              <path
+                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                fill="currentFill"
+              />
+            </svg>
+            <span className="sr-only">Loading...</span>
+          </div>
+          <span className={isLoading ? "hidden" : ""}>Enviar</span>
+        </button>
+
+        <div className="flex flex-col gap-2.5 w-full">
+          {uploadedDocuments.map((doc, index) => (
+            <div
+              key={index}
+              className="flex justify-between items-center text-xs p-2.5 ring-2 ring-white rounded"
+            >
+              <FileText />
+              <span>
+                {doc.name.length > 10
+                  ? doc.name.substring(0, 10) +
+                  "..." +
+                  doc.name.substring(doc.name.length - 5)
+                  : doc.name}
+              </span>
+            </div>
+          ))}
+        </div>
+
+        {errorMessage && (
+          <div className="flex flex-col gap-2.5 w-full">
+            <span className="text-red-500">{errorMessage}</span>
+          </div>
+        )}
+      </form>
+    </>
+  );
+}

web/src/index.css

@@ -0,0 +1,22 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+::-webkit-scrollbar {
+    /* Customize the scrollbar width */
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    /* Customize the scrollbar track */
+    background-color: #131318;
+    border-radius: 2px;
+
+}
+
+::-webkit-scrollbar-thumb {
+    /* Customize the scrollbar thumb */
+    background-color: #ffffff50;
+    border-radius: 2px;
+
+}

web/src/lib/axios.js

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const api = axios.create({
+    baseURL: "/"
+});

web/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

web/tailwind.config.js

@@ -0,0 +1,36 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+
+      // Annimation for lateral menu
+      keyframes: {
+        slideIn: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        slideOut: {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-100%)' },
+        },
+      },
+
+      animation: {
+        slideIn: 'slideIn 0.5s ease-in-out',
+        slideOut: 'slideOut 0.5s ease-in-out',
+      },
+
+    },
+  },
+  plugins: [],
+}
+

web/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    outDir: "../server/static",
+    emptyOutDir: true
+  }
+})