Skip to content

Commit

Permalink
UI extension for new Corpus feature (#499)
Browse files Browse the repository at this point in the history 
Co-authored-by: Pierre-Olivier Simonard <[email protected]>
Co-authored-by: Philip Meier <[email protected]>
  • Loading branch information
@nenb @pierrotsmnrd @pmeier
3 people authored Sep 6, 2024
1 parent 2fd4aeb commit 9221bb8
Show file tree
Hide file tree
Showing 17 changed files with 684 additions and 223 deletions.
38 changes: 20 additions & 18 deletions .github/workflows/test.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,31 +82,33 @@ jobs:

pytest-ui:
strategy:
# FIXME: the matrix is currently limited due to our UI tests currently only being
# minimal smoke tests. No need to waste CI resources.
matrix:
os:
- ubuntu-latest
- windows-latest
- macos-latest
# - windows-latest
# - macos-latest
browser:
- chromium
- firefox
# - firefox
python-version:
- "3.10"
- "3.10"
- "3.12"
exclude:
- python-version: "3.11"
os: windows-latest
- python-version: "3.12"
os: windows-latest
- python-version: "3.11"
os: macos-latest
- python-version: "3.12"
os: macos-latest
include:
- browser: webkit
os: macos-latest
python-version: "3.10"
# - "3.10"
# - "3.12"
# exclude:
# - python-version: "3.11"
# os: windows-latest
# - python-version: "3.12"
# os: windows-latest
# - python-version: "3.11"
# os: macos-latest
# - python-version: "3.12"
# os: macos-latest
# include:
# - browser: webkit
# os: macos-latest
# python-version: "3.10"

fail-fast: false

Expand Down
9 changes: 8 additions & 1 deletion ragna/deploy/_ui/api_wrapper.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,12 @@ async def auth(self, username, password):
def update_auth_header(self):
self.client.headers["Authorization"] = f"Bearer {self.auth_token}"

async def get_corpus_names(self):
return (await self.client.get("/corpuses")).raise_for_status().json()

async def get_corpus_metadata(self):
return (await self.client.get("/corpuses/metadata")).raise_for_status().json()

async def get_chats(self):
json_data = (await self.client.get("/chats")).raise_for_status().json()
for chat in json_data:
Expand All @@ -81,13 +87,14 @@ def upload_endpoints(self):
}

async def start_and_prepare(
self, name, documents, source_storage, assistant, params
self, name, documents, corpus_name, source_storage, assistant, params
):
response = await self.client.post(
"/chats",
json={
"name": name,
"input": documents,
"corpus_name": corpus_name,
"source_storage": source_storage,
"assistant": assistant,
"params": params,
Expand Down
59 changes: 47 additions & 12 deletions ragna/deploy/_ui/central_view.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
import param
from panel.reactive import ReactiveHTML

from ragna.core._metadata_filter import MetadataFilter

from . import styles as ui


Expand Down Expand Up @@ -184,20 +186,49 @@ def on_click_chat_info_wrapper(self, event):
if self.on_click_chat_info is None:
return

pills = "".join(
[
f"""<div class='chat_document_pill'>{d['name']}</div>"""
for d in self.current_chat["metadata"]["documents"]
]
)
# see _api/schemas.py for `input` type definitions
if isinstance(self.current_chat["metadata"]["input"], list):
# `Document`s provided as list
title = "Uploaded Files"

pills = "".join(
[
f"""<div class='chat_document_pill'>{d['name']}</div>"""
for d in self.current_chat["metadata"]["input"]
]
)

details = f"<div class='details'>{pills}</div><br />\n\n"
grid_height = len(self.current_chat["metadata"]["input"]) // 3

elif isinstance(self.current_chat["metadata"]["input"], dict):
# `MetadataFilter`s provided as dict
title = "Metadata Filters"

grid_height = len(self.current_chat["metadata"]["documents"]) // 3
metadata_filters_readable = str(
MetadataFilter.from_primitive(self.current_chat["metadata"]["input"])
).replace("\n", "<br>")

details = f"<div class='details details_block' style='display:block;'>{metadata_filters_readable}</div><br />\n\n"
grid_height = 1

elif self.current_chat["metadata"]["input"] is None:
title = ""

details = "<div class='details'>No metadata filters applied.<br /> Using the whole corpus.</div><br />\n\n"
grid_height = 1

else:
title = ""

details = "<div class='details'>Unable to infer the `input` type.<br /> Defaulting to using the whole corpus.</div><br />\n\n"
grid_height = 1

markdown = "\n".join(
[
"To change configurations, start a new chat.\n",
"**Uploaded Files**",
f"<div class='pills_list'>{pills}</div><br />\n\n",
f"**{title}**",
details,
"----",
"**Source Storage**",
f"""<span>{self.current_chat['metadata']['source_storage']}</span>\n""",
Expand All @@ -223,11 +254,15 @@ def on_click_chat_info_wrapper(self, event):
# The CSS rule below relies on a variable value, so we can't move it into modifers
stylesheets=[
ui.css(
":host(.chat_info_markdown) .pills_list",
":host(.chat_info_markdown) .details",
{
"grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
},
)
),
ui.css(
":host(.chat_info_markdown) .details_block",
{"display": "block"},
),
],
),
],
Expand All @@ -244,7 +279,7 @@ def on_click_source_info_wrapper(self, event, sources):
location = f": page(s) {location}"
source_infos.append(
(
f"<b>{rank}. {source['document']['name']}</b> {location}",
f"<b>{rank}. {source['document_name']}</b> {location}",
pn.pane.Markdown(source["content"], css_classes=["source-content"]),
)
)
Expand Down
128 changes: 63 additions & 65 deletions ragna/deploy/_ui/components/file_uploader.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,17 @@
from panel.reactive import ReactiveHTML
from panel.widgets import Widget

from .. import styles as ui


class FileUploader(ReactiveHTML, Widget): # type: ignore[misc]
allowed_documents = param.List(default=[])
allowed_documents_str = param.String(default="")

file_list = param.List(default=[])

height_upload_container = param.String(default=ui.FILE_CONTAINER_HEIGHT)

custom_js = param.String(default="")
uploaded_documents_json = param.String(default="")

Expand Down Expand Up @@ -56,7 +60,7 @@ def perform_upload(self, event=None, after_upload_callback=None):
self.custom_js = (
final_callback_js
+ random_id
+ f"""upload( self.get_upload_files(), '{self.token}', '{self.informations_endpoint}', final_callback) """
+ f"""upload( self.get_upload_files(), '{self.token}', '{self.informations_endpoint}', final_callback) """
)

_child_config = {
Expand All @@ -65,73 +69,67 @@ def perform_upload(self, event=None, after_upload_callback=None):
"allowed_documents_str": "template",
}

_stylesheets = [
ui.css(":host", {"width": "100%", "margin": "0px", "padding": "0px"}),
ui.css(
".fileUploadDropArea",
{
"margin-left": "10px",
"margin-right": "10px",
"border": "1px dashed var(--accent-color)",
"border-radius": "5px",
"height": "100%",
"display": "flex",
"text-align": "center",
"justify-content": "center",
"align-items": "center",
"flex-direction": "column",
},
),
ui.css([".fileUploadDropArea", "span.bold"], {"font-weight": "bold"}),
ui.css([".fileUploadDropArea", "img"], {"padding-bottom": "5px"}),
ui.css(".fileUploadDropArea.draggedOver", {"border-width": "3px"}),
ui.css(
".fileUpload",
{"height": "100% !important", "position": "absolute", "opacity": "0"},
),
ui.css(
".fileListContainer",
{
"display": "flex",
"flex-direction": "row",
"flex-wrap": "wrap",
"height": "40px",
"overflow-y": "scroll",
"overflow-x": "hidden",
"margin-top": "10px",
"margin-bottom": "10px",
"padding-top": "5px",
"padding-left": "6px",
"padding-bottom": "5px",
},
),
ui.css(
".chat_document_pill",
{
"background-color": "rgb(241,241,241)",
"margin-top": "5px",
"margin-left": "5px",
"margin-right": "5px",
"padding": "5px 15px",
"border-radius": "10px",
"color": "var(--accent-color)",
"display": "inline-table",
},
),
]

_template = """
<!-- fileUploadContainer can't be added to _stylesheets as it needs to be dynamically linked -->
<style>
:host {
width: 100%;
margin: 0px;
padding: 0px;
}
.fileUploadContainer {
height: 130px;
}
.fileUploadDropArea {
margin-left: 10px;
margin-right: 10px;
border: 1px dashed var(--accent-color);
border-radius: 5px;
height:100%;
display:flex;
text-align: center;
justify-content: center;
align-items: center;
flex-direction: column;
}
.fileUploadDropArea span.bold {
font-weight: bold;
}
.fileUploadDropArea img {
padding-bottom:5px;
}
.fileUploadDropArea.draggedOver {
border-width: 3px;
}
.fileUploadDropArea.uploaded {
height: calc(100% - 40px);
}
.fileUpload {
height: 100% !important;
position: absolute;
opacity: 0;
}
.fileListContainer {
display:flex;
flex-direction: row;
height: 44px;
overflow:scroll;
padding-top:14px;
padding-left:6px;
}
.chat_document_pill {
background-color: rgb(241,241,241);
margin-top:0px;
margin-left: 5px;
margin-right: 5px;
padding: 5px 15px;
border-radius: 10px;
color: var(--accent-color);
display: inline-table;
}
height: ${height_upload_container};
}
</style>
<script>
var basePath = window.location.pathname
Expand Down
Loading

0 comments on commit 9221bb8

Please sign in to comment.