Hugging Face's logo

Spaces:
tencent
/
Hy3-preview
Running

App Files Community
Hy3-preview
File size: 4,566 Bytes
71e4446
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
132
133
134
135
136
137
138
139
140
141
142
143
/* ─────────────────────────────────────────────────────────────────────────
 * Empty-state "What can I help you with?" overlay.
 * Lives outside the Gradio container (appended to <body>) so we don't need
 * !important to win against framework styles.
 * ───────────────────────────────────────────────────────────────────────── */

#examples-overlay {
    position: fixed;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    background: var(--hy-bg);
    pointer-events: none;
    overflow-y: auto;
}

.examples-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    pointer-events: auto;
    padding: 40px 20px;
}

.examples-heading {
    font-size: 22px;
    font-weight: 600;
    color: var(--hy-text);
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}

/* 1-2-1 "diamond" layout for exactly 4 example cards.
 *   row 1: card #1 (centered, spans both columns)
 *   row 2: card #2 (right-aligned in left col) | card #3 (left-aligned in right col)
 *   row 3: card #4 (centered, spans both columns)
 * Using CSS grid with explicit nth-child placements rather than flex-
 * wrap, because flex-wrap on equal-width children can only produce
 * 1xN, 2x2, or 4x1 — never 1-2-1. */
.examples-grid {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 480px);
    column-gap: 20px;
    row-gap: 14px;
    justify-content: center;
    width: min(1020px, 100%);
}

.example-btn:nth-child(1),
.example-btn:nth-child(4) {
    grid-column: 1 / span 2;
    justify-self: center;
}
.example-btn:nth-child(2) {
    grid-column: 1;
    justify-self: end;
}
.example-btn:nth-child(3) {
    grid-column: 2;
    justify-self: start;
}

.example-btn {
    /* Outer card: flex container that vertically + horizontally centers
     * its single inner ``.example-btn-text`` child. We CANNOT also be
     * a ``-webkit-box`` here (that's the inner element's job, see
     * below) — line-clamp and flex centering need separate elements. */
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    box-sizing: border-box !important;

    width: 460px;
    /* 14px font * 1.5 line-height = 21px per line. 2 lines = 42px.
     * + 14px*2 padding-y = 28px. + 1px*2 border = 2px. Total 72px. */
    height: 72px;

    background: var(--hy-bg);
    border: 1px solid var(--hy-border);
    border-radius: 18px;
    padding: 14px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--hy-text);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica,
                 Arial, sans-serif;
    user-select: none;
    text-align: center;
}

/* Inner text element: owns the 2-line clamp + auto ellipsis. The
 * ``!important`` triplet defends against framework-level resets that
 * would otherwise silently change ``display`` and let a 3rd line
 * bleed into view. */
.example-btn-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word;
    width: 100%;
    text-align: center;
}

/* On narrow screens the diamond would overflow horizontally — collapse
 * to a single centered column instead. */
@media (max-width: 1020px) {
    .examples-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .example-btn:nth-child(1),
    .example-btn:nth-child(2),
    .example-btn:nth-child(3),
    .example-btn:nth-child(4) {
        grid-column: 1;
        justify-self: center;
    }
    .example-btn {
        width: 100%;
        max-width: 520px;
    }
}
.example-btn:hover {
    background: var(--hy-bg-muted);
    border-color: var(--hy-border-strong);
    color: var(--hy-text-strong);
    box-shadow: var(--hy-shadow);
    transform: translateY(-1px);
}

.dark .example-btn:hover {
    border-color: rgba(107, 159, 255, 0.35);
    box-shadow: 0 0 8px rgba(107, 159, 255, 0.08);
}