Update app.py

revised CSS part

app.py

@@ -180,30 +180,66 @@ iface = gr.Interface(
               'Saint_Bernard.jpeg',
               'French_Bulldog.jpeg',
               'Samoyed.jpg'],
-    css="""
-    .output-markdown {
-        font-family: Noto Sans, sans-serif;
-        line-height: 1.6;
-    }
-    .gr-button {
-        background-color: #3498DB;
-        color: white;
-        border-radius: 8px;
-        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-        padding: 10px 20px;
-    }
-    .gr-button:hover {
-        background-color: #2980B9;
-    }
-    .gr-box {
-        background: linear-gradient(to bottom, #f2f4f5, #ffffff);
-        border-radius: 10px;
-        padding: 20px;
-        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    """,
-    theme="default"
-)
+    css = """
+/* 美化按鈕樣式 */
+.gr-button {
+    background-color: #1ABC9C;
+    color: white;
+    border-radius: 12px;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
+    padding: 12px 24px;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-weight: bold;
+}
+.gr-button:hover {
+    background-color: #16A085;
+    transform: scale(1.05);
+}
+
+/* 美化標題 */
+h1, h2, h3, h4, h5 {
+    font-family: 'Roboto', sans-serif;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    color: #2C3E50;
+    font-weight: bold;
+}
+
+/* 設定背景漸層 */
+body {
+    background: linear-gradient(to bottom right, #ECF0F1, #FFFFFF);
+}
+
+/* 美化圖片上傳區塊 */
+.gr-box {
+    background: #F9F9F9;
+    border: 2px solid #BDC3C7;
+    border-radius: 15px;
+    padding: 20px;
+    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease;
+}
+.gr-box:hover {
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+/* 修改 markdown 區塊字體及行高 */
+.output-markdown {
+    font-family: 'Noto Sans', sans-serif;
+    line-height: 1.75;
+    color: #34495E;
+}
+
+/* 調整範例圖片區塊樣式 */
+.examples img {
+    border-radius: 10px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+.examples img:hover {
+    transform: scale(1.05);
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
+}
+"""
+
 
 
 # Launch the app