Hugging Face's logo

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

App Files Community
pdufour commited on
Commit
3739e85
•
1 Parent(s): bcf0899

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +128 -128
style.css CHANGED
@@ -1,136 +1,136 @@
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
- #thumb {
27
- display: flex;
28
- flex-direction: column;
29
- align-items: center;
30
- padding: 2rem;
31
-
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
  #status {
79
- display: inline-flex;
80
- align-items: center;
81
- gap: 0.5rem;
82
- background: #fff;
83
- border: 1px solid #e2e8f0;
84
- color: #1a202c;
85
- font-size: 0.875rem;
86
- padding: 0.75rem 1rem;
87
- margin: 1.5rem auto;
88
- border-radius: 0.5rem;
89
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
90
- transition: all 0.2s;
91
- }
92
-
93
- #upload {
94
- display: none;
95
- }
96
-
97
- @media (max-width: 640px) {
98
- body {
99
- padding: 1rem;
100
- }
101
-
102
- #container {
103
- padding: 1.5rem;
104
- }
105
- }
106
-
107
- #llm-output {
108
- font-family: 'IBM Plex Mono', monospace;
109
- background: #282c34;
110
- color: #abb2bf;
111
- border-radius: 8px;
112
- padding: 1.5rem;
113
- margin: 1.5rem auto;
114
- min-height: 100px;
115
- max-height: 400px;
116
- overflow-y: auto;
117
- line-height: 1.6;
118
- white-space: pre-wrap;
119
- word-break: break-word;
120
- }
121
-
122
- #llm-output:empty::after {
123
- content: "Waiting for response...";
124
- color: #5c6370;
125
- font-style: italic;
126
  }
 
127
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
 
129
  #container.disabled {
130
- opacity: 0.6;
131
- cursor: not-allowed;
132
  }
133
 
134
  #container.disabled #thumb svg {
135
- opacity: 0.4;
136
- }
 
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
+ align-items: center;
82
+ gap: 0.5rem;
83
+ background: #fff;
84
+ border: 1px solid #e2e8f0;
85
+ color: #1a202c;
86
+ font-size: 0.875rem;
87
+ padding: 0.75rem 1rem;
88
+ margin: 1.5rem auto;
89
+ border-radius: 0.5rem;
90
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
91
+ transition: all 0.2s;
92
+ }
93
+
94
+ #upload {
95
+ display: none;
96
+ }
97
+
98
+ @media (max-width: 640px) {
99
+ body {
100
+ padding: 1rem;
101
+ }
102
+
103
+ #container {
104
+ padding: 1.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
105
  }
106
+ }
107
 
108
+ #llm-output {
109
+ font-family: "IBM Plex Mono", monospace;
110
+ background: #282c34;
111
+ color: #abb2bf;
112
+ border-radius: 8px;
113
+ padding: 1.5rem;
114
+ margin: 1.5rem auto;
115
+ min-height: 100px;
116
+ max-height: 400px;
117
+ overflow-y: auto;
118
+ line-height: 1.6;
119
+ white-space: pre-wrap;
120
+ word-break: break-word;
121
+ }
122
+
123
+ #llm-output:empty::after {
124
+ content: "Waiting for response...";
125
+ color: #5c6370;
126
+ font-style: italic;
127
+ }
128
 
129
  #container.disabled {
130
+ opacity: 0.6;
131
+ cursor: not-allowed;
132
  }
133
 
134
  #container.disabled #thumb svg {
135
+ opacity: 0.4;
136
+ }