From bf7bc0accbea731c8ccab494b812d396a209a15c Mon Sep 17 00:00:00 2001 From: leandro Date: Mon, 11 Nov 2024 13:56:08 +0100 Subject: [PATCH] Add shared links and update headline --- visual-retrieval-colpali/src/frontend/app.py | 39 +++- visual-retrieval-colpali/src/icons.py | 2 +- visual-retrieval-colpali/src/output.css | 206 ++++++++++++------ .../src/static/img/linkedin.svg | 3 + visual-retrieval-colpali/src/static/img/x.svg | 3 + .../src/tailwind.config.js | 4 +- 6 files changed, 184 insertions(+), 73 deletions(-) create mode 100644 visual-retrieval-colpali/src/static/img/linkedin.svg create mode 100644 visual-retrieval-colpali/src/static/img/x.svg diff --git a/visual-retrieval-colpali/src/frontend/app.py b/visual-retrieval-colpali/src/frontend/app.py index ea1f42d46..06e01ebf2 100644 --- a/visual-retrieval-colpali/src/frontend/app.py +++ b/visual-retrieval-colpali/src/frontend/app.py @@ -151,6 +151,30 @@ ) +def ShareButtons(): + title = "Visual RAG over PDFs with Vespa and ColPali" + url = "https://huggingface.co/spaces/vespa-engine/colpali-vespa-visual-retrieval" + return Div( + A( + Img(src="/static/img/linkedin.svg", aria_hidden="true", cls="h-[21px]"), + "Share on LinkedIn", + href=f"https://www.linkedin.com/sharing/share-offsite/?url={quote_plus(url)}", + rel="noopener noreferrer", + target="_blank", + cls="bg-[#0A66C2] text-white inline-flex items-center gap-x-1.5 px-2.5 py-1.5 border rounded-md text-sm font-semibold", + ), + A( + Img(src="/static/img/x.svg", aria_hidden="true", cls="h-[21px]"), + "Share on X", + href=f"https://twitter.com/intent/tweet?text={quote_plus(title)}&url={quote_plus(url)}", + rel="noopener noreferrer", + target="_blank", + cls="bg-black text-white inline-flex items-center gap-x-1.5 px-2.5 py-1.5 border rounded-md text-sm font-semibold", + ), + cls="flex items-center justify-center space-x-8 mt-5", + ) + + def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"): grid_cls = "grid gap-2 items-center p-3 bg-muted w-full" @@ -225,11 +249,11 @@ def SearchBox(with_border=False, query_value="", ranking_value="nn+colpali"): def SampleQueries(): sample_queries = [ + "What percentage of the funds unlisted real estate investments were in Switzerland 2023?", + "Gender balance at level 4 or above in NY office 2023?", + "Number of internship applications trend 2021-2023", "Total amount of fixed salaries paid in 2023?", "Proportion of female new hires 2021-2023?", - "Number of internship applications trend 2021-2023", - "Gender balance at level 4 or above in NY office 2023?", - "What percentage of the funds unlisted real estate investments were in Switzerland 2023?", "child jumping over puddle", "hula hoop kid", ] @@ -260,12 +284,12 @@ def SampleQueries(): def Hero(): return Div( H1( - "Vespa.ai + ColPali", - cls="text-5xl md:text-7xl font-bold tracking-wide md:tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-black to-slate-700 dark:from-white dark:to-slate-300 animate-fade-in", + "Visual RAG over PDFs", + cls="text-5xl md:text-6xl font-bold tracking-wide md:tracking-wider bg-clip-text text-transparent bg-gradient-to-r from-black to-slate-700 dark:from-white dark:to-slate-300 animate-fade-in", ), P( - "Efficient Document Retrieval with Vision Language Models", - cls="text-lg md:text-2xl text-muted-foreground md:tracking-wide", + "See how Vespa and ColPali can be used for Visual RAG in this demo", + cls="text-base md:text-2xl text-muted-foreground md:tracking-wide", ), cls="grid gap-5 text-center", ) @@ -277,6 +301,7 @@ def Home(): Hero(), SearchBox(with_border=True), SampleQueries(), + ShareButtons(), cls="grid gap-8 content-start mt-[13vh]", ), cls="grid w-full h-full max-w-screen-md gap-4 mx-auto", diff --git a/visual-retrieval-colpali/src/icons.py b/visual-retrieval-colpali/src/icons.py index 8ce5df6c3..842bddc03 100644 --- a/visual-retrieval-colpali/src/icons.py +++ b/visual-retrieval-colpali/src/icons.py @@ -1 +1 @@ -ICONS = {"chevrons-right": "", "moon": "", "sun": "", "github": "", "slack": "", "settings": "", "arrow-right": "", "search": "", "file-search": "", "message-circle-question": "", "text-search": "", "maximize": "", "expand": "", "fullscreen": "", "images": "", "circle": "", "loader-circle": "", "file-text": "", "file-question": "", "external-link": ""} \ No newline at end of file +ICONS = {"chevrons-right": "", "moon": "", "sun": "", "github": "", "slack": "", "settings": "", "arrow-right": "", "search": "", "file-search": "", "message-circle-question": "", "text-search": "", "maximize": "", "expand": "", "fullscreen": "", "images": "", "circle": "", "loader-circle": "", "file-text": "", "file-question": "", "external-link": "", "linkedin": ""} \ No newline at end of file diff --git a/visual-retrieval-colpali/src/output.css b/visual-retrieval-colpali/src/output.css index 50f6b1a9a..fdb56f50a 100644 --- a/visual-retrieval-colpali/src/output.css +++ b/visual-retrieval-colpali/src/output.css @@ -707,6 +707,10 @@ body { pointer-events: auto; } +.invisible { + visibility: hidden; +} + .static { position: static; } @@ -805,10 +809,18 @@ body { top: 50%; } +.top-full { + top: 100%; +} + .z-10 { z-index: 10; } +.z-40 { + z-index: 40; +} + .z-50 { z-index: 50; } @@ -860,6 +872,14 @@ body { margin-top: 8vh; } +.mt-8 { + margin-top: 2rem; +} + +.mt-5 { + margin-top: 1.25rem; +} + .block { display: block; } @@ -962,10 +982,6 @@ body { height: 55px; } -.h-\[var\(--radix-select-trigger-height\)\] { - height: var(--radix-select-trigger-height); -} - .h-full { height: 100%; } @@ -974,6 +990,10 @@ body { height: 1px; } +.h-\[21px\] { + height: 21px; +} + .max-h-96 { max-height: 24rem; } @@ -1022,6 +1042,10 @@ body { width: 1rem; } +.w-48 { + width: 12rem; +} + .w-5 { width: 1.25rem; } @@ -1030,6 +1054,10 @@ body { width: 2rem; } +.w-9 { + width: 2.25rem; +} + .w-\[1\.5px\] { width: 1.5px; } @@ -1046,10 +1074,6 @@ body { min-width: 8rem; } -.min-w-\[var\(--radix-select-trigger-width\)\] { - min-width: var(--radix-select-trigger-width); -} - .max-w-lg { max-width: 32rem; } @@ -1169,22 +1193,18 @@ body { grid-template-rows: auto 0px; } -.grid-rows-\[auto_1fr\] { - grid-template-rows: auto 1fr; -} - .grid-rows-\[auto_1fr_auto\] { grid-template-rows: auto 1fr auto; } -.grid-rows-\[minmax\(0\2c 55px\)_minmax\(0\2c 1fr\)\] { - grid-template-rows: minmax(0,55px) minmax(0,1fr); -} - .grid-rows-\[auto_auto_1fr\] { grid-template-rows: auto auto 1fr; } +.grid-rows-\[minmax\(0\2c 55px\)_minmax\(0\2c 1fr\)\] { + grid-template-rows: minmax(0,55px) minmax(0,1fr); +} + .flex-col { flex-direction: column; } @@ -1197,6 +1217,10 @@ body { flex-wrap: wrap; } +.content-center { + align-content: center; +} + .content-start { align-content: flex-start; } @@ -1257,6 +1281,11 @@ body { gap: 1px; } +.gap-x-1\.5 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} + .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; @@ -1275,6 +1304,12 @@ body { row-gap: 2rem; } +.space-x-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.25rem * var(--tw-space-x-reverse)); + margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -1299,10 +1334,10 @@ body { margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } -.space-x-1 > :not([hidden]) ~ :not([hidden]) { +.space-x-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; - margin-right: calc(0.25rem * var(--tw-space-x-reverse)); - margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse))); + margin-right: calc(2rem * var(--tw-space-x-reverse)); + margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } .self-stretch { @@ -1321,6 +1356,10 @@ body { white-space: nowrap; } +.break-words { + overflow-wrap: break-word; +} + .\!rounded-full { border-radius: 9999px !important; } @@ -1409,6 +1448,11 @@ body { background-color: hsl(var(--background)); } +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + .bg-black\/80 { background-color: rgb(0 0 0 / 0.8); } @@ -1469,6 +1513,11 @@ body { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-\[\#0A66C2\] { + --tw-bg-opacity: 1; + background-color: rgb(10 102 194 / var(--tw-bg-opacity)); +} + .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } @@ -1603,6 +1652,10 @@ body { padding-bottom: 1.25rem; } +.pb-4 { + padding-bottom: 1rem; +} + .pl-10 { padding-left: 2.5rem; } @@ -1707,6 +1760,10 @@ body { font-weight: 600; } +.capitalize { + text-transform: capitalize; +} + .leading-none { line-height: 1; } @@ -1777,6 +1834,11 @@ body { color: transparent; } +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .no-underline { text-decoration-line: none; } @@ -1845,6 +1907,21 @@ body { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } +.ring-1 { + --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(1px + 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-black { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity)); +} + +.ring-opacity-5 { + --tw-ring-opacity: 0.05; +} + .ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); } @@ -1977,6 +2054,10 @@ body { --tw-enter-translate-y: 100%; } +.slide-in-from-bottom-2 { + --tw-enter-translate-y: 0.5rem; +} + .slide-in-from-left { --tw-enter-translate-x: -100%; } @@ -1989,6 +2070,10 @@ body { --tw-enter-translate-y: -100%; } +.slide-in-from-top-2 { + --tw-enter-translate-y: -0.5rem; +} + .slide-out-to-bottom { --tw-exit-translate-y: 100%; } @@ -2357,6 +2442,10 @@ aside { color: hsl(var(--foreground)); } +.hover\:text-primary:hover { + color: hsl(var(--primary)); +} + .hover\:underline:hover { text-decoration-line: underline; } @@ -2484,26 +2573,6 @@ aside { pointer-events: none; } -.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] { - --tw-translate-y: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.data-\[side\=left\]\:-translate-x-1[data-side="left"] { - --tw-translate-x: -0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.data-\[side\=right\]\:translate-x-1[data-side="right"] { - --tw-translate-x: 0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - -.data-\[side\=top\]\:-translate-y-1[data-side="top"] { - --tw-translate-y: -0.25rem; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .data-\[state\=active\]\:bg-background[data-state="active"] { background-color: hsl(var(--background)); } @@ -2554,27 +2623,11 @@ aside { --tw-enter-opacity: 0; } -.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] { - --tw-exit-scale: .95; -} - -.data-\[state\=open\]\:zoom-in-95[data-state="open"] { - --tw-enter-scale: .95; -} - -.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] { +.data-\[popper-placement\=\'bottom-start\'\]\:slide-in-from-top-2[data-popper-placement='bottom-start'] { --tw-enter-translate-y: -0.5rem; } -.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] { - --tw-enter-translate-x: 0.5rem; -} - -.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] { - --tw-enter-translate-x: -0.5rem; -} - -.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] { +.data-\[popper-placement\=\'top-start\'\]\:slide-in-from-bottom-2[data-popper-placement='top-start'] { --tw-enter-translate-y: 0.5rem; } @@ -2586,12 +2639,9 @@ aside { display: flex; } -.group[data-state="open"] .group-data-\[state\=open\]\:bg-accent { - background-color: hsl(var(--accent)); -} - -.group[data-state="open"] .group-data-\[state\=open\]\:text-muted-foreground { - color: hsl(var(--muted-foreground)); +.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 { + --tw-rotate: 180deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group[data-state="closed"] .group-data-\[state\=closed\]\:duration-300 { @@ -2694,6 +2744,14 @@ aside { animation-duration: 500ms; } +.peer[data-state="closed"] ~ .peer-data-\[state\=closed\]\:animate-accordion-up { + animation: accordion-up 0.2s ease-out; +} + +.peer[data-state="open"] ~ .peer-data-\[state\=open\]\:animate-accordion-down { + animation: accordion-down 0.2s ease-out; +} + @media (min-width: 640px) { .sm\:bottom-0 { bottom: 0px; @@ -2727,6 +2785,10 @@ aside { justify-content: flex-end; } + .sm\:gap-2\.5 { + gap: 0.625rem; + } + .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -2765,6 +2827,16 @@ aside { line-height: 1; } + .md\:text-6xl { + font-size: 3.75rem; + line-height: 1; + } + + .md\:text-xl { + font-size: 1.25rem; + line-height: 1.75rem; + } + .md\:tracking-wide { letter-spacing: 0.025em; } @@ -2774,6 +2846,14 @@ aside { } } +@media (min-width: 1024px) { + .lg\:space-x-6 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1.5rem * var(--tw-space-x-reverse)); + margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); + } +} + @media (min-width: 1280px) { .xl\:grid-rows-\[1fr_2fr\] { grid-template-rows: 1fr 2fr; diff --git a/visual-retrieval-colpali/src/static/img/linkedin.svg b/visual-retrieval-colpali/src/static/img/linkedin.svg new file mode 100644 index 000000000..1ba163a84 --- /dev/null +++ b/visual-retrieval-colpali/src/static/img/linkedin.svg @@ -0,0 +1,3 @@ + + + diff --git a/visual-retrieval-colpali/src/static/img/x.svg b/visual-retrieval-colpali/src/static/img/x.svg new file mode 100644 index 000000000..856d59ce8 --- /dev/null +++ b/visual-retrieval-colpali/src/static/img/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/visual-retrieval-colpali/src/tailwind.config.js b/visual-retrieval-colpali/src/tailwind.config.js index 1b4fa84b9..54cbbce40 100644 --- a/visual-retrieval-colpali/src/tailwind.config.js +++ b/visual-retrieval-colpali/src/tailwind.config.js @@ -8,8 +8,8 @@ function filterDefault(values) { export default { darkMode: ["selector"], content: [ - "./**/*.py", - "./.venv/lib/python3.12/site-packages/shad4fast/**/*.{py,js}", + "../**/*.py", + "../.venv/lib/python3.12/site-packages/shad4fast/**/*.{py,js}", ], theme: { container: {