Skip to content

Interface

Jump to bottom
Antonin Larvor edited this page Aug 14, 2024 · 9 revisions

This page describes the various parts of the web interface of the application, including the Python server, HTML, CSS, and JavaScript.

Server Python

The Python server uses Flask to handle routes and serve the web interface. It is responsible for loading and interacting with the RAG (Retrieval-Augmented Generation) model and managing document files.

Code Description

  • Initialization and Configuration:

    • Don't forget to specify the name of the config in load_config() function and the root to the server.
    • init_app(): Initializes the application by loading the configuration and setting up the file upload path.
    • load_rag(settings=None): Loads the RAG (Retrieval-Augmented Generation) chain based on the specified configuration settings. If no settings are provided, default parameters are used.

  • Routes:

    • /: Main route that renders the template. Templates are located in th templates folder.
    • /documents: GET route that returns a list of all available documents in the upload folder.
    • /documents/<document_name>: GET route that returns information about a specific document.
    • /files/<filename>: GET route that serves a specific file from the upload folder.
    • /get: POST route to get a response from the chat model based on the RAG chain.
    • /update-settings: POST route to update the RAG chain settings based on new configurations.
    • /clear_chat_history: POST route to clear the conversation history in the conversational chain.

Usage

  • To lunch a server just replace {app_name} by the name of your python script in the following command: 
    python {app_name}_app.py

HTML

The HTML structure defines the layout and content of the web interface for the SEUS RAG application. This section describes the main components and structure of the HTML file. The HTML files can be found in templates folder

Structure Overview

  • <head> Section:

    • Stylesheets: Multiple CSS files are linked to provide the visual styling, including Bootstrap and custom CSS files (e.g., base.css, chatbox.css, sidebar-common.css, sidebar-left.css, sidebar-right.css, variables.css).

  • <body> Section:

    • Overlay and Background Elements: Includes an overlay and a background element for use in modal dialogs or transitions.
    • Left Sidebar:
      • Contains navigation items such as settings, chat history, and database management.
      • Settings allow users to configure the search type, embedding model, and LLM model.
    • Chatbox:
      • A central container that holds the chat interface where users can type messages and view responses.
    • Right Sidebar:
      • Displays retrieved text chunks and allows users to view or download associated documents.
      • Similar to the left sidebar, this section is collapsible and contains contextual information related to the chat queries.

Key Elements

  • Navigation and Sidebars:

    • Left Sidebar: Handles settings and configuration for the application.
    • Right Sidebar: Displays context-related information retrieved from the documents.

  • Chat Interface:

    • The chat interface is designed to be user-friendly, with a textarea for user input and a button to send messages.
    • Responses and context information are displayed dynamically within the chatbox.

External Resources

  • Bootstrap: The interface relies on Bootstrap for responsive design and styling.
  • Font Awesome: Icons are provided via Font Awesome, enhancing the visual elements like buttons and menu toggles.

Scripts and Interaction

  • JavaScript: The HTML includes external scripts for PDF.js (for PDF handling) and custom JavaScript (script.js) to handle dynamic interactions and API calls.
  • Tooltips: Information icons within the settings use Bootstrap's tooltip functionality to provide additional context to the user.

Customization

The HTML template is designed to be flexible and can be easily customized by modifying the associated CSS and JavaScript files. Key areas of customization include:

  • Sidebar Items: Additional settings or features can be added to the left or right sidebars.

CSS

The CSS files define the visual appearance and responsive behavior of the web interface. This section provides an overview of the key styles and layouts defined in the CSS files. All the CSS files can be found in static/css folder

base.css

The base.css file contains global styles and responsive layout rules for different screen sizes.

  • Base Styles:

    • Sets the default height, margin, font size, and overflow behavior for the html and body elements.

  • Overlay Styles:

    • Styles for the overlay and background elements used for modal dialogs or loading screens

  • Responsive Layouts:

    • Small Screens: Adjusts sidebar widths and padding for small screen devices.
    • Medium Screens: Configures sidebar widths and padding for medium-sized screens, offering more space for content.
    • Large Screens: Defines sidebar widths and padding for large screen devices, maximizing the visible content area.

chatbox.css

The chatbox.css file focuses on the layout and styling of the chat interface.

  • Chatbox Container:

    • Defines the layout and dimensions of the chatbox, ensuring it occupies the full height of its container.
    • Styles the chat input area and send button, creating a user-friendly input interface.

  • Card Layout:

    • Utilizes a flexible card structure to organize the chat header, body, and footer.
    • The chat body supports scrolling to accommodate long conversations.

sidebar-common.css

The sidebar-common.css file contains styles shared by both the left and right sidebars.

  • Sidebar Layout:

    • Both sidebars are styled with consistent background colors, positioning, and transitions for smooth opening and closing.

  • Nav Headers and Footers:

    • Headers and footers within the sidebars are styled to fit the overall design, with appropriate padding and font sizes.

  • Link and Button Styles:

    • Sidebar links and buttons are styled to enhance usability, with hover effects and active states clearly defined.

sidebar-left.css

The sidebar-left.css file provides specific styles for the left sidebar, including its collapsed state.

  • Sidebar Dimensions:

    • Sets a maximum width for the left sidebar, ensuring it doesn't take up too much screen space.

  • Collapsed State:

    • Styles for when the left sidebar is collapsed, hiding unnecessary content and adjusting the sidebar toggle button.

  • Nav Body:

    • Custom styles for the cards and buttons within the left sidebar, including the settings and database sections.

sidebar-right.css

The sidebar-right.css file focuses on the right sidebar, which displays context information retrieved during the chat.

  • Sidebar Dimensions:

    • Adjusts the width of the right sidebar based on screen size and state (collapsed or expanded).

  • Context Retriever:

    • Styles the cards and buttons related to context retrieval, ensuring they are visually consistent with the rest of the interface.

  • PDF Viewer:

    • Specific styles for displaying PDFs within the right sidebar, including controls for navigating and zooming in the document.

variables.css

The variables.css file defines CSS variables (custom properties) for consistent theming and easy maintenance.

  • Color Variables:

    • Variables for primary colors, shades, and background colors are defined, allowing for quick adjustments to the theme.

  • SVG Filters:

    • Custom filters for SVG icons are defined to match the color scheme of the interface.

Customization and Maintenance

These CSS files are designed to be modular and easily customizable. Key areas for customization include:

  • Colors and Themes: Adjusting the color variables in variables.css can quickly change the look and feel of the entire interface.
  • Responsive Design: Modifying the media queries in base.css allows for fine-tuning the layout on different screen sizes.
  • Component Styles: Each component, such as the chatbox or sidebars, can be customized independently to better fit your application's needs.

JavaScript

The JavaScript code manages the interactive behavior of the web interface. It handles the initialization of settings, responsive design adjustments, user interactions with sidebars and chat functionality, and communication with the server. JavaScript files can be found in static/js folder

Structure Overview

  • Initialization (DOMContentLoaded Event):
    • The script initializes once the DOM content is fully loaded. It sets up UI elements, default settings, and binds events to various elements.
    • The init() function is the main entry point, orchestrating the setup of the interface and configuration options.

Key Functions

  • init():

    • Initializes default settings, clears chat history, handles responsive classes, and binds events to UI elements.
    • Configures tooltips, sidebars, and loads document data for the database view.

  • Event Binding Functions:

    • bindEvents(): Binds UI events like sidebar toggles, chat input handling, and window resizing.
    • bindChatEvents(): Binds events related to chat functionality, such as sending messages via button click or Enter key press.

  • Responsive Design Handling:

    • handleResponsiveClasses(): Adjusts the layout and classes based on the window width, ensuring the interface is responsive across different screen sizes.
    • collapseSidebarsOnLoad(): Collapses sidebars on page load based on the current screen size.

  • Settings Management:

    • initializeDefaultSettings(): Sets the default values for various search and model settings.
    • updateSettings(): Updates the settings on the server whenever a user changes a setting in the UI. This includes debounced submission to avoid excessive requests.

  • Chat and Context Management:

    • submitQuery(): Handles the submission of a user's query, sends it to the server, and displays the response along with the retrieved context.
    • clearChatHistory(): Clears the chat history on the client side and resets the interface if necessary.
    • addContextElement(): Dynamically adds a new context element to the right sidebar, including options to view, download, and navigate through the associated PDF document.

  • Sidebar and Tooltip Management:

    • toggleSidebar(): Toggles the visibility of the left and right sidebars.
    • initTooltips(): Initializes Bootstrap tooltips for elements that require additional context or information.

Advanced Features

  • PDF Handling:

    • displayPDF(): Manages the display of PDF documents, including page navigation and zoom functionality, allowing users to interact with documents directly within the interface.

  • Debounce Utility:

    • debounce(func, wait): A utility function to delay the execution of another function, used to optimize settings submission by preventing rapid successive requests.

  • Context Management:

    • setupContextCollapseEvents(): Sets up event listeners for collapsing and expanding context elements.
    • setupCloseEventListener(): Binds the close event to dynamically created close buttons, allowing users to remove context elements from the view.

This JavaScript code ensures a dynamic and responsive user experience, enabling seamless interaction with the web interface.

Clone this wiki locally