Feature/refactor admin panels (#24)

* Start refactoring backpanel with some mockup * Fixed mockup * Fetch data on new admin ui * Fix add and cut buttons, Missing 3 main buttons * Completed refactor and test of prompt backpanel * Start adding RAG admin UI * Fixed RAG Admin UI layout * Fix standard buttons on RAG tool * Add load document in RAG tool * Restored backpanel script --------- Co-authored-by: antonio-fin <[email protected]>
HewlettPackard · Jan 19, 2025 · 37a7ade · 37a7ade
1 parent 5a6eeb9
commit 37a7ade
Show file tree

Hide file tree

Showing 48 changed files with 2,130 additions and 1,037 deletions.
diff --git a/examples/app_backpanel/config.yaml b/examples/app_backpanel/config.yaml
@@ -52,6 +52,65 @@ tools:
         config: config.yaml
       prompts:
         system_prompt: system_prompt.txt
+  - name: TelcoExpert
+    type: RagTool
+    base_url: https://127.0.0.1:5006/
+    version: 
+      min_version: "1.0.0"  # Versions >= 1.0.0 are supported
+      max_version: "2.0.0"  # Versions < 2.0.0 are supported
+    extractors:
+    - label: Unstructured - Sections from Docx
+      settings:      
+        type: UnstructuredForSections
+        document_type: Docx
+        extraction_type: SectionWithHeader
+    trasformations:
+    - RemoveMultipleSpaces
+    - ReplaceTabsWithSpaces
+    - TransformInSectionByHeader
+    - RemoveTitleElementsOnly
+    - TransformInChunk
+    storages:
+    - label: Chroma - Local Instance
+      settings:  
+        type: ChromaCollection
+        path: examples/tool_rag/data
+        collection: Telco3GPP5GStandards
+    - label: Milvus - Local Instance
+      settings:  
+        type: MilvusCollection
+        path: examples/tool_rag/data/milvus.db
+        collection: Telco3GPP5GStandards
+    files:
+    - 23501-i60.docx
+    - 23502-i60.docx
+    - 23503-i60.docx
+    llms:
+      - label: ChatGPT-4o
+        settings:
+          type: LangChainChatOpenAI
+          model_name: gpt-4o
+          api_key: $ENV{OPENAI_API_KEY}
+          temperature: 0  
+          seed: 42
+      - label: Gemini-1.5-Pro
+        settings:
+          type: LangChainChatGoogleGenAI
+          model_name: gemini-1.5-pro
+          api_key: $ENV{GOOGLE_API_KEY}
+          temperature: 0
+      - label: Claude-3.5-Sonnet
+        settings:
+          type: LangChainChatAnthropic
+          model_name: claude-3-5-sonnet-20240620
+          api_key: $ENV{ANTHROPIC_API_KEY}
+          temperature: 0
+    default:
+      path: examples/app_backpanel/tools/tool_rag/
+      files: 
+        config: config.yaml
+      prompts:
+        query_espantion: query_espantion.txt
 
 function:
   discovery:

diff --git a/examples/app_backpanel/html/static/css/body.css b/examples/app_backpanel/html/static/css/body.css
@@ -0,0 +1,182 @@
+/* Columns */
+.first-column, 
+.second-column {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+/* Sections */
+.section {
+    background: #fff;
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: var(--box-shadow);
+}
+.section h2 {
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+}
+
+/* Log Section (Left) */
+.tool-section {
+    flex: 1;
+}
+.tool-section p {
+    font-size: 1rem; /* Match font size */
+    color: #666;
+}
+
+/* Configuration Section (Top Right) */
+.config-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+.config-section h3 {
+    margin-top: 1rem;
+    font-size: 1.1rem;
+}
+
+/* Configurable Fields */
+.configurable-field {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0rem;
+}
+.configurable-field label {
+    font-size: 0.7rem; /* Smaller font size for labels */
+    font-weight: normal; /* Remove bold from labels */
+}
+
+#toolConfigurationBox {
+    max-height: 730px; /* Prevent it from exceeding the height of the left container */
+    overflow-y: auto; /* Enable vertical scrolling if content overflows */
+}
+
+.configurable-field select,
+.configurable-field textarea,
+.configurable-field input[type="text"] {
+    font-size: 1rem; /* Smaller font size for input fields */
+    padding: 0.75rem; /* Match input height with dropdown height */
+    border-radius: 8px; /* Rounded corners */
+    border: 1px solid var(--hpe-dark-grey);
+    box-shadow: var(--box-shadow);
+    transition: box-shadow 0.2s ease;
+    width: 100%;
+}
+
+.configurable-field select:hover,
+.configurable-field textarea:hover,
+.configurable-field input[type="text"]:hover {
+    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.2);
+}
+.configurable-field select:focus,
+.configurable-field textarea:focus,
+.configurable-field input[type="text"]:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.3);
+}
+
+/* Interface Section (Bottom Right) */
+.interface-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    flex: 1; /* to stretch if needed */
+    overflow-y: auto; /* Enable vertical scroll bar */
+    max-height: 400px; /* Set max height */
+}
+.interface-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.interface-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+}
+
+/* Parameter Configuration Fieldset */
+fieldset.parameter-config {
+    border: 1px solid var(--hpe-dark-grey);
+    border-radius: 8px;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    position: relative;
+}
+fieldset.parameter-config legend {
+    font-weight: normal; /* Remove bold from legend */
+    padding: 0 0.5rem;
+}
+.parameter-config .param-row {
+    display: flex;
+    flex-direction: row; /* Arrange fields in a row */
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+.parameter-config .param-row label {
+    font-size: 0.7rem; /* Match font size of labels */
+    font-weight: normal; /* Remove bold from labels */
+    width: 10%;
+}
+.parameter-config .param-row input {
+    padding: 0.75rem;
+    font-size: 1rem; /* Match font size */
+    border-radius: 6px;
+    border: 1px solid var(--hpe-dark-grey);
+    box-shadow: var(--box-shadow);
+    transition: box-shadow 0.2s ease;
+    width: 100%;
+}
+.parameter-config .param-row input:hover {
+    box-shadow: 0 0 0 2px rgba(0, 179, 136, 0.2);
+}
+.parameter-config .param-row input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.3);
+}
+.param-field {
+    display: flex;           /* Stack the label and input vertically */
+    flex-direction: column;
+    width: 100%;
+}
+
+/* Bullet Points and Dropdown Options */
+ul li, .configurable-field select option {
+    font-size: 1rem; /* Match font size */
+}
+
+/* Spinner overlay */
+.spinner-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+/* Spinner */
+.spinner {
+    border: 8px solid #f3f3f3; /* Light gray background */
+    border-top: 8px solid #00d1b2; /* Light green for the spinning part */
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+}
+
+/* Spinner animation */
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/examples/app_backpanel/html/static/css/button.css b/examples/app_backpanel/html/static/css/button.css
@@ -0,0 +1,67 @@
+/* Buttons */
+button {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border-radius: 50px; /* Fully rounded buttons */
+    cursor: pointer;
+    font-weight: 600;
+    border: 1px solid var(--hpe-green);
+    background: #fff;
+    color: var(--hpe-green);
+    transition: all 0.2s ease;
+}
+
+button:hover {
+    background: var(--hpe-green);
+    color: #fff;
+}
+
+.btn-reset {
+    margin-right: auto; /* Align reset button to the left */
+}
+
+.btn-remove-config {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    border-radius: 50px; /* Fully rounded buttons */
+    cursor: pointer;
+    font-weight: 600;
+    border: 1px solid var(--hpe-red);
+    background: #fff;
+    color: var(--hpe-red);
+    transition: all 0.2s ease;
+    float: right;
+}
+
+.btn-remove-config:hover {
+    background: var(--hpe-red);
+    color: #fff;
+}
+
+/* Footer Buttons */
+footer {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding: 1rem;
+    border-top: 3px solid var(--hpe-green);
+    background-color: transparent;
+}
+.btn-cancel, .btn-reset {
+    background-color: #fff;
+    color: var(--hpe-dark-grey);
+    border: 1px solid var(--hpe-dark-grey);
+}
+.btn-cancel:hover, .btn-reset:hover {
+    background-color: #e6e6e6;
+}
+.btn-apply {
+    background-color: var(--hpe-green);
+    color: #fff;
+    border: 1px solid var(--hpe-green);
+}
+.btn-apply:hover {
+    background-color: #009c75;
+}
diff --git a/examples/app_backpanel/html/static/css/card_body.css b/examples/app_backpanel/html/static/css/card_body.css