Hugging Face's logo

Spaces:
facebook
/
meta-encoder-space
Running

App Files Community
meta-encoder-space
File size: 9,073 Bytes
08b9a18
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
:root {
  --ink: #1d1d1f; --ink2: #6e6e73; --ink3: #86868b; --card: #f5f5f7; --line: #d2d2d7;
  --link: #0066cc; --w: 1080px;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Inter, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
}

/* ---- strip Gradio chrome ---- */
body, .gradio-container { background: #fff !important; color: var(--ink); font-family: var(--text) !important;
                          -webkit-font-smoothing: antialiased; }
.gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.gradio-container .main, .gradio-container .contain, .gradio-container .wrap { gap: 0 !important; padding: 0 !important; }
footer { display: none !important; }
.html-container { padding: 0 !important; }
.gradio-container a { color: var(--link) !important; text-decoration: none !important; }
.gradio-container a:hover { text-decoration: underline !important; }

/* ---- nav ---- */
.top { position: sticky; top: 0; z-index: 100; height: 48px; padding: 0 max(22px, calc((100% - var(--w)) / 2));
       display: flex; align-items: center; justify-content: space-between;
       background: rgba(255, 255, 255, .8); backdrop-filter: saturate(180%) blur(20px);
       -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0, 0, 0, .08); }
.top .brand { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em;
              color: var(--ink) !important; }
.top .brand:hover, .top nav a:hover { text-decoration: none !important; }
.top nav a { margin-left: 28px; font-size: 12px; color: var(--ink) !important; opacity: .8; }
.top nav a:hover { opacity: 1; }

/* ---- hero ---- */
.intro { max-width: var(--w); margin: 0 auto; padding: 120px 24px 88px; text-align: center; }
.intro h1 { font-family: var(--display); font-size: clamp(30px, 5.4vw, 64px) !important; font-weight: 600 !important;
            white-space: nowrap;
            line-height: 1.05; letter-spacing: -.035em; margin: 0 !important; color: var(--ink) !important; }
.intro h1 br { display: none; }
.intro h1 span { display: block; margin-top: 14px; font-size: .42em; font-weight: 500; letter-spacing: -.015em;
                 color: var(--ink2); }
.intro p { max-width: 640px; margin: 28px auto 0 !important; font-size: 21px !important; line-height: 1.45;
           font-weight: 400; letter-spacing: -.01em; color: var(--ink2) !important; }

/* ---- page + tabs: large centered text tabs, underline on the active one ---- */
.page { max-width: var(--w); margin: 0 auto !important; padding: 0 22px 40px !important; gap: 0 !important; }
.plain-tabs .tab-wrapper { display: flex; justify-content: center; border: 0 !important; padding: 0 !important;
                           background: transparent !important; }
/* Gradio keeps a hidden copy of the tab bar for measuring, plus an overflow menu: keep both out of sight */
.plain-tabs .tab-container.visually-hidden, .plain-tabs .overflow-menu { display: none !important; }
.plain-tabs .tab-container:not(.visually-hidden) {
  display: flex !important; justify-content: center; gap: 48px !important; padding: 0 !important; margin: 0 auto !important;
  background: transparent !important; border: 0 !important; height: auto !important; }
.plain-tabs .tab-container button {
  position: relative; border: 0 !important; border-radius: 0 !important; padding: 6px 0 14px !important; margin: 0 !important;
  background: transparent !important; box-shadow: none !important; color: var(--ink3) !important;
  font-family: var(--display) !important; font-size: 28px !important; font-weight: 600 !important;
  letter-spacing: -.02em; line-height: 1.1; transition: color .2s ease; }
.plain-tabs .tab-container button:hover { color: var(--ink) !important; }
.plain-tabs .tab-container button.selected { color: var(--ink) !important; }
.plain-tabs .tab-container button::after {
  content: "" !important; display: block !important; position: absolute !important; left: 50% !important; right: auto !important;
  bottom: 0 !important; top: auto !important; width: 0 !important; height: 2px !important; border-radius: 1px;
  background: var(--ink) !important; transform: translateX(-50%); transition: width .25s ease; }
.plain-tabs .tab-container button.selected::after { width: 32px !important; }
.plain-tabs .tabitem, .plain-tabs [role="tabpanel"] { border: 0 !important; padding: 0 !important; background: transparent !important; }

.lede { margin: 36px auto 72px !important; text-align: center; font-size: 17px !important;
        line-height: 1.5; color: var(--ink2) !important; }
.lede span { display: block; white-space: nowrap; }

/* ---- modality groups ---- */
.group + .group { margin-top: 88px; }
.group-title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 24px !important;
               font-family: var(--display); font-size: 32px !important; font-weight: 600 !important;
               letter-spacing: -.025em; color: var(--ink) !important; }
.group-title span { font-family: var(--text); font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ink3); }

/* ---- example cards: state | prompt | outcome ---- */
.item { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: start;
        background: var(--card); border-radius: 24px; padding: 32px; margin-bottom: 16px; }
.item .col { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
             color: var(--ink3); }
.item .media img, .item .media video { display: block; width: 100%; height: auto; max-height: 300px;
                                       object-fit: contain; border-radius: 14px; background: #fff; }
.item .text-state { padding: 16px 18px; border-radius: 14px; background: #fff; font-size: 14px; line-height: 1.55;
                    color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.item h3 { font-family: var(--display); font-size: 24px !important; font-weight: 600 !important; line-height: 1.15;
           letter-spacing: -.02em; margin: 0 0 4px !important; color: var(--ink) !important; }
.item .src { font-size: 13px !important; color: var(--ink3) !important; margin: 0 0 18px !important; }
.item .ctx { font-size: 14px !important; line-height: 1.5; color: var(--ink2) !important; margin: 0 0 8px !important; }
.item .task { font-size: 17px !important; line-height: 1.45; letter-spacing: -.01em; color: var(--ink) !important;
              margin: 0 !important; overflow-wrap: anywhere; }

/* grid/flex children may shrink below their content, so long tokens wrap instead of overflowing */
.item > div, .item .outcome * { min-width: 0; }
.item .outcome { overflow-wrap: anywhere; word-break: break-word; }

/* decision outcome: label, score, thin bar (no option is highlighted) */
.opts { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 14px; }
.opts li { position: relative; display: flex; justify-content: space-between; gap: 16px; margin: 0 !important;
           padding-bottom: 10px; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.opts li::before, .opts li::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 2px; }
.opts li::before { right: 0; background: #e8e8ed; }
.opts li::after { width: var(--p); background: #86868b; }
.opts li span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.opts li span:last-child { flex: none; font-variant-numeric: tabular-nums; }
.opts li small { font-size: 13px; font-weight: 400; color: var(--ink2); }

/* retrieval outcome: plain ranked list */
.item .res { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.item .res img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; }
.item .docs { margin: 0 !important; padding: 0 0 0 20px !important; display: flex; flex-direction: column; gap: 10px; }
.item .docs li { margin: 0 !important; padding: 0 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--ink2); }
.item .docs li::marker { color: var(--ink3); }
.item .note { font-size: 12px !important; color: var(--ink3) !important; margin: 14px 0 0 !important; }

/* ---- footer ---- */
.end { max-width: var(--w); margin: 80px auto 0; padding: 20px 22px 40px; border-top: 1px solid var(--line);
       display: flex; justify-content: space-between; gap: 24px; font-size: 12px; color: var(--ink3); }
.end a { color: var(--ink3) !important; }

@media (max-width: 600px) {
  .intro h1 { white-space: normal; }
}

@media (max-width: 900px) {
  .lede span { white-space: normal; }
  .plain-tabs .tab-container button { font-size: 22px !important; }
  .plain-tabs .tab-container:not(.visually-hidden) { gap: 28px !important; }
  .item { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
  .intro { padding: 80px 24px 64px; }
  .group-title { font-size: 26px !important; }
}