paper_tile.py

import gradio as gr


def paper_tile(paper):
    arxiv_id = paper["url"].split("/")[-1]

    return gr.HTML(elem_id="paper-tile", value=f"""
    <article style="
        -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        color: rgb(0 0 0/var(--tw-text-opacity));
        --tw-space-y-reverse: 0;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        --tw-border-opacity: 1;
        --tw-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        background-image: linear-gradient(to right,var(--tw-gradient-stops));
        border-color: rgb(243 244 246/var(--tw-border-opacity));
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
        font-size: 1rem;
        line-height: 1.5rem;
        position: relative;
        height: 11rem;
        overflow: hidden;
        border-radius: .5rem;
        border-width: 1px;
    ">
        <a href="https://hf.co/papers/{arxiv_id}" style="
        -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        color: inherit;
        text-decoration: inherit;    
        ">
            <div style="
                -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -.125rem;
        z-index: 1;
        margin: auto;
        display: flex;
        width: fit-content;
        align-items: center;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        border-width: 1px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity));
        padding-left: .5rem;
        padding-right: .5rem;
        --tw-text-opacity: 1;
        color: rgb(156 163 175/var(--tw-text-opacity));
            ">
                <svg style="
                    -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        --tw-bg-opacity: 1;
        width: 1em;
        height: 1em;
        fill: none;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        display: block;
        vertical-align: middle;
        margin-right: .5rem;
        --tw-text-opacity: 1;
        color: rgb(17 24 39/var(--tw-text-opacity));
                " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 12 12" preserveAspectRatio="xMidYMid meet" fill="none"><path fill="currentColor" fill-rule="evenodd" d="M7.55 1.02c.29 0 .58.11.8.29l1.48 1.22c.3.25.45.6.45.97v6.22c0 .7-.56 1.26-1.25 1.26H2.97c-.7 0-1.26-.56-1.26-1.26V2.28c0-.7.56-1.26 1.26-1.26h4.57Zm.11 3.63c-.76 0-1.36-.6-1.36-1.36v-.7a.62.62 0 0 0-.63-.64h-2.7a.31.31 0 0 0-.31.33v7.44c0 .18.13.33.3.33h6.07c.18 0 .31-.15.31-.33V5.3a.62.62 0 0 0-.62-.64H7.65h.01Z" clip-rule="evenodd" style="
                    -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        color: rgb(17 24 39/var(--tw-text-opacity));
        fill: currentcolor;
        fill-rule: evenodd;
        d: path("M 7.55 1.02 c 0.29 0 0.58 0.11 0.8 0.29 l 1.48 1.22 c 0.3 0.25 0.45 0.6 0.45 0.97 v 6.22 c 0 0.7 -0.56 1.26 -1.25 1.26 H 2.97 c -0.7 0 -1.26 -0.56 -1.26 -1.26 V 2.28 c 0 -0.7 0.56 -1.26 1.26 -1.26 h 4.57 Z m 0.11 3.63 c -0.76 0 -1.36 -0.6 -1.36 -1.36 v -0.7 a 0.62 0.62 0 0 0 -0.63 -0.64 h -2.7 a 0.31 0.31 0 0 0 -0.31 0.33 v 7.44 c 0 0.18 0.13 0.33 0.3 0.33 h 6.07 c 0.18 0 0.31 -0.15 0.31 -0.33 V 5.3 a 0.62 0.62 0 0 0 -0.62 -0.64 H 7.65 h 0.01 Z");
        clip-rule: evenodd;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
                "></path></svg>
                <span style="
                    -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        color: rgb(156 163 175/var(--tw-text-opacity));
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
                "><span style="
                -webkit-text-size-adjust: 100%;
                font-feature-settings: normal;
                font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
                tab-size: 4;
                --animate-duration: 1s;
                --animate-delay: 1s;
                --animate-repeat: 1;
                --tw-space-y-reverse: 0;
                --tw-border-opacity: 1;
                --tw-gradient-from: #f9fafb;
                --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
                --tw-gradient-to: #fff;
                font-size: 1rem;
                line-height: 1.5rem;
                --tw-bg-opacity: 1;
                --tw-text-opacity: 1;
                color: rgb(156 163 175/var(--tw-text-opacity));
                border: 0 solid #e5e7eb;
                box-sizing: border-box;
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgba(59,130,246,.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                ">arxiv:</span><span style="
        -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        --tw-bg-opacity: 1;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        --tw-text-opacity: 1;
        color: rgb(17 24 39/var(--tw-text-opacity));            
                ">{arxiv_id}</span></span>
             </div>
             <img style="
        -webkit-text-size-adjust: 100%;
        font-feature-settings: normal;
        font-family: Source Sans Pro,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
        tab-size: 4;
        --animate-duration: 1s;
        --animate-delay: 1s;
        --animate-repeat: 1;
        --tw-bg-opacity: 1;
        --tw-text-opacity: 1;
        --tw-space-y-reverse: 0;
        --tw-border-opacity: 1;
        --tw-gradient-from: #f9fafb;
        --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
        --tw-gradient-to: #fff;
        font-size: 1rem;
        line-height: 1.5rem;
        color: inherit;
        border: 0 solid #e5e7eb;
        box-sizing: border-box;
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x: ;
        --tw-pan-y: ;
        --tw-pinch-zoom: ;
        --tw-scroll-snap-strictness: proximity;
        --tw-ordinal: ;
        --tw-slashed-zero: ;
        --tw-numeric-figure: ;
        --tw-numeric-spacing: ;
        --tw-numeric-fraction: ;
        --tw-ring-inset: ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgba(59,130,246,.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur: ;
        --tw-brightness: ;
        --tw-contrast: ;
        --tw-grayscale: ;
        --tw-hue-rotate: ;
        --tw-invert: ;
        --tw-saturate: ;
        --tw-sepia: ;
        --tw-drop-shadow: ;
        --tw-backdrop-blur: ;
        --tw-backdrop-brightness: ;
        --tw-backdrop-contrast: ;
        --tw-backdrop-grayscale: ;
        --tw-backdrop-hue-rotate: ;
        --tw-backdrop-invert: ;
        --tw-backdrop-opacity: ;
        --tw-backdrop-saturate: ;
        --tw-backdrop-sepia: ;
        display: block;
        vertical-align: middle;
        max-width: 100%;
        height: 11rem;
        width: 100%;
        border-radius: .5rem;
        object-fit: cover;
        object-position: top;         
             " src="https://thumbnails.huggingface.co/social-thumbnails/papers/{arxiv_id}.png" alt="" loading="lazy">
        </a>

    </article>
                """)