Hugging Face's logo

Spaces:
pdufour
/
Qwen2VL_TransformersJS_Demo
Running

App Files Community
pdufour commited on
Commit
08fb1c3
·
verified ·
1 Parent(s): 54648ea

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +139 -17
style.css CHANGED
@@ -1,28 +1,150 @@
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
 
1
  body {
2
+ max-width: 800px;
3
+ margin: 0 auto;
4
+ padding: 20px;
5
+ font-family: system-ui, -apple-system, sans-serif;
6
+ background: #f5f5f5;
7
  }
8
 
9
  h1 {
10
+ text-align: center;
11
+ color: #2d3748;
12
+ margin-bottom: 2rem;
13
  }
14
 
15
+ #container {
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: center;
19
+ padding: 2rem;
20
+ border: 2px dashed #cbd5e0;
21
+ border-radius: 1rem;
22
+ background: white;
23
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
24
+ transition: border-color 0.3s ease;
25
  }
26
 
27
+ #thumb {
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: center;
31
+ padding: 2rem;
 
32
  }
33
 
34
+ #container:hover {
35
+ border-color: #4a5568;
36
+ }
37
+
38
+ #container svg {
39
+ margin-bottom: 1rem;
40
+ opacity: 0.7;
41
+ }
42
+
43
+ #container div {
44
+ margin-top: 1.5rem;
45
+ width: 100%;
46
+ max-width: 400px;
47
+ }
48
+
49
+ input[type="text"] {
50
+ width: 100%;
51
+ padding: 0.75rem 1rem;
52
+ border: 1px solid #e2e8f0;
53
+ border-radius: 0.5rem;
54
+ font-size: 1rem;
55
+ transition: border-color 0.3s ease;
56
+ background: #f8fafc;
57
+ }
58
+
59
+ input[type="text"]:focus {
60
+ outline: none;
61
+ border-color: #4a5568;
62
+ box-shadow: 0 0 0 3px rgba(74, 85, 104, 0.1);
63
+ }
64
+
65
+ #example {
66
+ display: inline-block;
67
+ margin-top: 0.5rem;
68
+ color: #4299e1;
69
+ cursor: pointer;
70
+ font-size: 0.875rem;
71
+ transition: color 0.3s ease;
72
+ }
73
+
74
+ #example:hover {
75
+ color: #2b6cb0;
76
+ text-decoration: underline;
77
+ }
78
+
79
+ #status {
80
+ display: block;
81
+ margin: 1.5rem auto;
82
+ padding: 0.75rem;
83
+ text-align: center;
84
+ border-radius: 0.5rem;
85
+ font-weight: 500;
86
+ background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 100%);
87
+ color: white;
88
+ animation: pulse 2s infinite;
89
+ }
90
+
91
+ @keyframes pulse {
92
+ 0% {
93
+ opacity: 0.8;
94
+ }
95
+ 50% {
96
+ opacity: 1;
97
+ }
98
+ 100% {
99
+ opacity: 0.8;
100
+ }
101
+ }
102
+
103
+ #status.ready {
104
+ background: linear-gradient(90deg, #065f46 0%, #059669 100%);
105
+ animation: none;
106
+ }
107
+
108
+ #upload {
109
+ display: none;
110
+ }
111
+
112
+ @media (max-width: 640px) {
113
+ body {
114
+ padding: 1rem;
115
+ }
116
+
117
+ #container {
118
+ padding: 1.5rem;
119
+ }
120
+ }
121
+
122
+ #llm-output {
123
+ font-family: "IBM Plex Mono", monospace;
124
+ background: #282c34;
125
+ color: #abb2bf;
126
+ border-radius: 8px;
127
+ padding: 1.5rem;
128
+ margin: 1.5rem auto;
129
+ min-height: 100px;
130
+ max-height: 400px;
131
+ overflow-y: auto;
132
+ line-height: 1.6;
133
+ white-space: pre-wrap;
134
+ word-break: break-word;
135
+ }
136
+
137
+ #llm-output:empty::after {
138
+ content: "Waiting for response...";
139
+ color: #5c6370;
140
+ font-style: italic;
141
+ }
142
+
143
+ #container.disabled {
144
+ opacity: 0.6;
145
+ cursor: not-allowed;
146
+ }
147
+
148
+ #container.disabled #thumb svg {
149
+ opacity: 0.4;
150
  }