Spaces:
Running
on
Zero
Running
on
Zero
Delete style.py
Browse files
style.py
DELETED
@@ -1,162 +0,0 @@
|
|
1 |
-
|
2 |
-
class Style:
|
3 |
-
@staticmethod
|
4 |
-
def get_css():
|
5 |
-
"""返回應用程式的 CSS 樣式"""
|
6 |
-
css = """
|
7 |
-
body {
|
8 |
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
9 |
-
background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
|
10 |
-
margin: 0;
|
11 |
-
padding: 0;
|
12 |
-
display: flex;
|
13 |
-
justify-content: center;
|
14 |
-
min-height: 100vh;
|
15 |
-
}
|
16 |
-
|
17 |
-
.gradio-container {
|
18 |
-
max-width: 1200px !important;
|
19 |
-
margin: 0 auto; /* 確保容器居中 */
|
20 |
-
padding: 1rem;
|
21 |
-
width: 100%;
|
22 |
-
}
|
23 |
-
|
24 |
-
.app-header {
|
25 |
-
text-align: center;
|
26 |
-
margin-bottom: 2rem;
|
27 |
-
background: rgba(255, 255, 255, 0.8);
|
28 |
-
padding: 1.5rem;
|
29 |
-
border-radius: 10px;
|
30 |
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
31 |
-
width: 100%;
|
32 |
-
}
|
33 |
-
|
34 |
-
.app-title {
|
35 |
-
color: #2D3748;
|
36 |
-
font-size: 2.5rem;
|
37 |
-
margin-bottom: 0.5rem;
|
38 |
-
background: linear-gradient(90deg, #38b2ac, #4299e1);
|
39 |
-
-webkit-background-clip: text;
|
40 |
-
-webkit-text-fill-color: transparent;
|
41 |
-
}
|
42 |
-
|
43 |
-
.app-subtitle {
|
44 |
-
color: #4A5568;
|
45 |
-
font-size: 1.2rem;
|
46 |
-
font-weight: normal;
|
47 |
-
margin-top: 0.25rem;
|
48 |
-
}
|
49 |
-
|
50 |
-
.app-divider {
|
51 |
-
width: 80px;
|
52 |
-
height: 3px;
|
53 |
-
background: linear-gradient(90deg, #38b2ac, #4299e1);
|
54 |
-
margin: 1rem auto;
|
55 |
-
}
|
56 |
-
|
57 |
-
.input-panel, .output-panel {
|
58 |
-
background: white;
|
59 |
-
border-radius: 10px;
|
60 |
-
padding: 1.5rem;
|
61 |
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
62 |
-
margin: 0 auto 1rem auto; /* 確保面板居中 */
|
63 |
-
}
|
64 |
-
|
65 |
-
/* 改變灰色背景為更好看的漸變色 */
|
66 |
-
.how-to-use {
|
67 |
-
background: linear-gradient(135deg, #f6f9fc, #edf2f7);
|
68 |
-
border-radius: 10px;
|
69 |
-
padding: 1.5rem;
|
70 |
-
margin-top: 1rem;
|
71 |
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
72 |
-
color: #2d3748;
|
73 |
-
}
|
74 |
-
|
75 |
-
.detect-btn {
|
76 |
-
background: linear-gradient(90deg, #38b2ac, #4299e1) !important;
|
77 |
-
color: white !important;
|
78 |
-
border: none !important;
|
79 |
-
border-radius: 8px !important;
|
80 |
-
transition: transform 0.3s, box-shadow 0.3s !important;
|
81 |
-
font-weight: bold !important;
|
82 |
-
letter-spacing: 0.5px !important;
|
83 |
-
padding: 0.75rem 1.5rem !important;
|
84 |
-
width: 100%;
|
85 |
-
margin: 1rem auto !important;
|
86 |
-
}
|
87 |
-
|
88 |
-
.detect-btn:hover {
|
89 |
-
transform: translateY(-2px) !important;
|
90 |
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
|
91 |
-
}
|
92 |
-
|
93 |
-
.detect-btn:active {
|
94 |
-
transform: translateY(1px) !important;
|
95 |
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
|
96 |
-
}
|
97 |
-
|
98 |
-
/* 確保標籤和內容都置中 */
|
99 |
-
.gr-form, .gr-box, .gr-panel {
|
100 |
-
display: flex;
|
101 |
-
flex-direction: column;
|
102 |
-
align-items: center;
|
103 |
-
width: 100%;
|
104 |
-
margin: 0 auto;
|
105 |
-
}
|
106 |
-
|
107 |
-
/* 確保圖像上傳界面居中 */
|
108 |
-
.upload-box {
|
109 |
-
margin: 0 auto;
|
110 |
-
text-align: center;
|
111 |
-
max-width: 500px;
|
112 |
-
}
|
113 |
-
|
114 |
-
.footer {
|
115 |
-
text-align: center;
|
116 |
-
margin-top: 2rem;
|
117 |
-
font-size: 0.9rem;
|
118 |
-
color: #4A5568;
|
119 |
-
padding: 1rem;
|
120 |
-
background: rgba(255, 255, 255, 0.5);
|
121 |
-
border-radius: 10px;
|
122 |
-
width: 100%;
|
123 |
-
}
|
124 |
-
|
125 |
-
/* 中央對齊所有容器 */
|
126 |
-
.container, .gr-container, .gr-row, .gr-col {
|
127 |
-
display: flex;
|
128 |
-
flex-direction: column;
|
129 |
-
align-items: center;
|
130 |
-
justify-content: center;
|
131 |
-
width: 100%;
|
132 |
-
}
|
133 |
-
|
134 |
-
/* 改善標籤頁樣式 */
|
135 |
-
.tabs {
|
136 |
-
width: 100%;
|
137 |
-
display: flex;
|
138 |
-
justify-content: center;
|
139 |
-
}
|
140 |
-
|
141 |
-
/* 改善表單和控制項置中 */
|
142 |
-
label, button, select, .gr-input, .gr-button, .gr-checkbox, .gr-radio, .gr-slider {
|
143 |
-
margin-left: auto;
|
144 |
-
margin-right: auto;
|
145 |
-
}
|
146 |
-
|
147 |
-
/* 響應式調整 */
|
148 |
-
@media (max-width: 768px) {
|
149 |
-
.app-title {
|
150 |
-
font-size: 2rem;
|
151 |
-
}
|
152 |
-
|
153 |
-
.app-subtitle {
|
154 |
-
font-size: 1rem;
|
155 |
-
}
|
156 |
-
|
157 |
-
.gradio-container {
|
158 |
-
padding: 0.5rem;
|
159 |
-
}
|
160 |
-
}
|
161 |
-
"""
|
162 |
-
return css
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|