Hugging Face's logo

Spaces:
pdufour
/
Qwen2-VL-2B-Instruct-ONNX-Q4-F16
Running

App Files Community
pdufour commited on
Commit
cb48544
•
1 Parent(s): e673ce8

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +90 -85
style.css CHANGED
@@ -1,145 +1,150 @@
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
-
81
- display: block;
82
- margin: 1.5rem auto;
83
- padding: 0.75rem;
84
- text-align: center;
85
- border-radius: 0.5rem;
86
- font-weight: 500;
87
- background: linear-gradient(90deg, #4c1d95 0%, #6d28d9 100%);
88
- color: white;
89
- animation: pulse 2s infinite;
90
  }
91
 
92
  @keyframes pulse {
93
- 0% { opacity: 0.8; }
94
- 50% { opacity: 1; }
95
- 100% { opacity: 0.8; }
 
 
 
 
 
 
96
  }
97
 
98
  #status.ready {
99
- background: linear-gradient(90deg, #065f46 0%, #059669 100%);
100
- animation: none;
101
  }
102
 
103
  #upload {
104
- display: none;
105
  }
106
 
107
  @media (max-width: 640px) {
108
- body {
109
- padding: 1rem;
110
- }
111
 
112
- #container {
113
- padding: 1.5rem;
114
- }
115
  }
116
 
117
  #llm-output {
118
- font-family: "IBM Plex Mono", monospace;
119
- background: #282c34;
120
- color: #abb2bf;
121
- border-radius: 8px;
122
- padding: 1.5rem;
123
- margin: 1.5rem auto;
124
- min-height: 100px;
125
- max-height: 400px;
126
- overflow-y: auto;
127
- line-height: 1.6;
128
- white-space: pre-wrap;
129
- word-break: break-word;
130
  }
131
 
132
  #llm-output:empty::after {
133
- content: "Waiting for response...";
134
- color: #5c6370;
135
- font-style: italic;
136
  }
137
 
138
  #container.disabled {
139
- opacity: 0.6;
140
- cursor: not-allowed;
141
  }
142
 
143
  #container.disabled #thumb svg {
144
- opacity: 0.4;
145
  }
 
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
  }