From 3526e4cc6fe3d3385dc926ee17a24107d10644ff Mon Sep 17 00:00:00 2001 From: Philip Meier Date: Thu, 18 Jan 2024 15:25:21 +0100 Subject: [PATCH] return source content from the REST API (#264) Co-authored-by: Pierre-Olivier Simonard --- ragna/deploy/_api/database.py | 4 ++ ragna/deploy/_api/orm.py | 2 + ragna/deploy/_api/schemas.py | 4 ++ ragna/deploy/_ui/app.py | 1 + ragna/deploy/_ui/central_view.py | 21 ++++-- ragna/deploy/_ui/right_sidebar.py | 3 +- ragna/deploy/_ui/styles.py | 106 ++++++++++++++++++++++++++++++ 7 files changed, 133 insertions(+), 8 deletions(-) diff --git a/ragna/deploy/_api/database.py b/ragna/deploy/_api/database.py index 351f51bb..b4433a33 100644 --- a/ragna/deploy/_api/database.py +++ b/ragna/deploy/_api/database.py @@ -113,6 +113,8 @@ def _orm_to_schema_chat(chat: orm.Chat) -> schemas.Chat: id=source.id, document=_orm_to_schema_document(source.document), location=source.location, + content=source.content, + num_tokens=source.num_tokens, ) for source in message.sources ], @@ -170,6 +172,8 @@ def _schema_to_orm_source(session: Session, source: schemas.Source) -> orm.Sourc id=source.id, document_id=source.document.id, location=source.location, + content=source.content, + num_tokens=source.num_tokens, ) session.add(orm_source) session.commit() diff --git a/ragna/deploy/_api/orm.py b/ragna/deploy/_api/orm.py index 5911a362..92b97a15 100644 --- a/ragna/deploy/_api/orm.py +++ b/ragna/deploy/_api/orm.py @@ -84,6 +84,8 @@ class Source(Base): document = relationship("Document", back_populates="sources") location = Column(types.String) + content = Column(types.String) + num_tokens = Column(types.Integer) messages = relationship( "Message", diff --git a/ragna/deploy/_api/schemas.py b/ragna/deploy/_api/schemas.py index b64c2c3f..7439f0d5 100644 --- a/ragna/deploy/_api/schemas.py +++ b/ragna/deploy/_api/schemas.py @@ -37,6 +37,8 @@ class Source(BaseModel): id: str document: Document location: str + content: str + num_tokens: int @classmethod def from_core(cls, source: ragna.core.Source) -> Source: @@ -44,6 +46,8 @@ def from_core(cls, source: ragna.core.Source) -> Source: id=source.id, document=Document.from_core(source.document), location=source.location, + content=source.content, + num_tokens=source.num_tokens, ) diff --git a/ragna/deploy/_ui/app.py b/ragna/deploy/_ui/app.py index 7b929b4a..fb7d8567 100644 --- a/ragna/deploy/_ui/app.py +++ b/ragna/deploy/_ui/app.py @@ -31,6 +31,7 @@ class App(param.Parameterized): def __init__(self, *, url, api_url, origins): super().__init__() + ui.apply_design_modifiers() self.url = url self.api_url = api_url self.origins = origins diff --git a/ragna/deploy/_ui/central_view.py b/ragna/deploy/_ui/central_view.py index 8fe5a92e..cacd3718 100644 --- a/ragna/deploy/_ui/central_view.py +++ b/ragna/deploy/_ui/central_view.py @@ -324,25 +324,32 @@ def on_click_source_info_wrapper(self, event, sources): if self.on_click_chat_info is None: return - markdown = [ - "This response was generated using the following data from the uploaded files:
" - ] + source_infos = [] for rank, source in enumerate(sources, 1): location = source["location"] if location: - location = f": {location}" - markdown.append(f"{rank}. **{source['document']['name']}**{location}") - markdown.append("----") + location = f": page(s) {location}" + source_infos.append( + ( + f"{rank}. {source['document']['name']} {location}", + pn.pane.Markdown(source["content"], css_classes=["source-content"]), + ) + ) self.on_click_chat_info( event, "Source Info", [ pn.pane.Markdown( - "\n".join(markdown), + "This response was generated using the following data from the uploaded files:
", dedent=True, stylesheets=[""" hr { width: 94%; height:1px; } """], ), + pn.layout.Accordion( + *source_infos, + header_background="transparent", + stylesheets=ui.stylesheets((":host", {"width": "100%"})), + ), ], ) diff --git a/ragna/deploy/_ui/right_sidebar.py b/ragna/deploy/_ui/right_sidebar.py index e4ac4c9a..29e3c398 100644 --- a/ragna/deploy/_ui/right_sidebar.py +++ b/ragna/deploy/_ui/right_sidebar.py @@ -64,7 +64,7 @@ def __panel__(self): height:100%; min-width: unset; width: 0px; - overflow:hidden; + overflow:auto; margin-left: min(15px, 2%); border-left: 1px solid #EEEEEE; @@ -83,6 +83,7 @@ def __panel__(self): :host(.visible_sidebar) { animation: 0.25s ease-in forwards show_right_sidebar; + background-color: white; } @keyframes show_right_sidebar { diff --git a/ragna/deploy/_ui/styles.py b/ragna/deploy/_ui/styles.py index d8359aaa..763f9b87 100644 --- a/ragna/deploy/_ui/styles.py +++ b/ragna/deploy/_ui/styles.py @@ -10,6 +10,112 @@ def divider(): return pn.layout.Divider(styles={"padding": "0em 1em"}) +def apply_design_modifiers(): + apply_design_modifiers_source_accordion() + # add here calls to other design modifiers, + # group them per UI component + + +def apply_design_modifiers_source_accordion(): + pn.theme.fast.Fast.modifiers[pn.layout.Accordion] = { + "stylesheets": [ + """ :host { + height: 100% + } + """ + ] + } + + pn.theme.fast.Fast.modifiers[pn.layout.Card] = { + "stylesheets": [ + """ + + /* Define some variables */ + :host { + --ragna-accordion-header-height: 50px; + } + + /* Resets some existing styles */ + :host(.accordion) { + margin-left: 0px; + margin-top: 0px; + outline: none; + } + + /* Styles the button itself */ + button.accordion-header { + background-color: white !important; + height: var(--ragna-accordion-header-height); + padding-top: 0px; + padding-bottom: 0px; + outline:0px; + margin-left: 15px; + margin-right: 15px; + width: calc(100% - 30px); + border-bottom: 2px solid #D9D9D9; + + } + + button.accordion-header div.card-button { + font-size: 11px; + padding-top: 5px; + margin-left: 0px; + margin-right: 10px; + } + + div.card-header-row { + height: var(--ragna-accordion-header-height); + background-color: unset !important; + } + + /* styles the content of the sources content (the expanding areas of the Accordion) */ + div.bk-panel-models-markup-HTML.markdown { + margin-left: 15px; + margin-right: 15px; + margin-top:0px; + } + + """ + ] + } + + pn.theme.fast.Fast.modifiers[pn.pane.HTML] = { + "stylesheets": [ + """ :host(.card-title) { + height: var(--ragna-accordion-header-height); + margin: 0px; + } + + :host(.card-title) div { + height: var(--ragna-accordion-header-height); + + display:flex; + flex-direction:row; + align-items:center; + } + + + :host(.card-title) h3 { + font-weight: normal; + } + """ + ] + } + + pn.theme.fast.Fast.modifiers[pn.pane.Markdown] = { + "stylesheets": [ + """ /* Styles the content of the sources content (the expanding areas of the Accordion). + This fixes a small margin-top that is added by default and that leads to overflowing content + in some cases. + */ + :host(.source-content) p:nth-of-type(1) { + margin-top: 0px; + } + """ + ] + } + + """ CSS constants """