更改网页的样式

app.py

@@ -24,79 +24,129 @@ DEFAULT_MODEL_DISPLAY_NAME = list(AVAILABLE_MODELS.keys())[0] # 默认选择第
 # --- 自定义 CSS ---
 custom_css = """
 body {
-    background-color: #f0f2f5;
+    background-color: #e9ecef; /* 稍微调暗一点背景，让前景更突出 */
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
+
 .gradio-container {
-    border-radius: 15px !important;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
+    border-radius: 20px !important; /* 稍微增大圆角 */
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; /* 增强阴影 */
     background-color: #ffffff;
+    /* border: 1px solid #dee2e6 !important; */ /* （可选）添加一个细边框 */
 }
+
 .message-bubble-user {
     background-color: #007bff !important;
     color: white !important;
-    border-radius: 15px 15px 0 15px !important;
+    border-radius: 20px 20px 5px 20px !important; /* 调整圆角使其更有特色 */
     align-self: flex-end;
-    max-width: 70%;
+    max-width: 75%; /* 稍微增加最大宽度 */
+    box-shadow: 3px 3px 8px rgba(0,0,0,0.2) !important; /* 添加阴影使其浮动 */
+    margin-bottom: 10px !important; /* 增加一点底部间距 */
 }
+
 .message-bubble-bot {
-    background-color: #e9ecef !important;
-    color: #333 !important;
-    border-radius: 15px 15px 15px 0 !important;
+    background-color: #f8f9fa !important; /* 使用更亮的背景增加对比 */
+    color: #212529 !important; /* 使用更深的文字颜色增加对比 */
+    border-radius: 20px 20px 20px 5px !important; /* 调整圆角 */
     align-self: flex-start;
-    max-width: 70%;
+    max-width: 75%; /* 稍微增加最大宽度 */
+    border: 1px solid #ced4da !important; /* 添加边框使其更清晰 */
+    box-shadow: -3px 3px 8px rgba(0,0,0,0.1) !important; /* 添加阴影 */
+    margin-bottom: 10px !important; /* 增加一点底部间距 */
 }
+
 .message-bubble-user .message-text, .message-bubble-bot .message-text {
-    font-size: 1rem !important;
-    padding: 10px 15px !important;
+    font-size: 1.05rem !important; /* 稍微增大字体 */
+    padding: 12px 18px !important; /* 增加内边距 */
+    line-height: 1.6 !important; /* 增加行高，提高可读性 */
 }
+
 .avatar-container img {
     border-radius: 50% !important;
-    width: 40px !important;
-    height: 40px !important;
+    width: 48px !important; /* 增大头像尺寸 */
+    height: 48px !important; /* 增大头像尺寸 */
     object-fit: cover;
-    margin: 5px !important;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    margin: 8px !important; /* 增加外边距 */
+    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important; /* 增强阴影 */
+    border: 2px solid #ffffff !important; /* 给头像加一个白色边框，使其从背景中突出 */
 }
+
 .textbox textarea {
-    border-radius: 20px !important;
-    border: 1px solid #343a40 !important; /* 深色边框，例如接近黑色的深灰 */
-    background-color: #495057 !important; /* 深灰色背景 */
-    color: #f8f9fa !important;            /* 浅色文字，例如非常浅的灰色或白色 */
-    padding: 10px 15px !important;
-    font-size: 1rem !important;
-    box-shadow: none !important;
+    border-radius: 25px !important; /* 增大圆角 */
+    border: 2px solid #343a40 !important; /* 加粗边框 */
+    background-color: #495057 !important;
+    color: #f8f9fa !important;
+    padding: 12px 18px !important; /* 增加内边距 */
+    font-size: 1.05rem !important; /* 稍微增大字体 */
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) !important; /* 添加内阴影增加深度感 */
 }
 
-/* （可选）当输入框获得焦点时的样式，可以进一步调整 */
 .textbox textarea:focus {
-    border-color: #007bff !important; /* 例如，聚焦时边框变亮蓝色 */
-    /* background-color: #5a6268 !important; */ /* 也可以调整聚焦时的背景色 */
-    /* box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; */ /* 添加聚焦时的阴影效果 */
+    border-color: #007bff !important;
+    background-color: #5a6268 !important;
+    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.35) !important; /* 增强聚焦阴影 */
+    /* transform: scale(1.01); */ /* （可选）聚焦时轻微放大 */
 }
+
 .submit-button {
     background-color: #007bff !important;
     color: white !important;
-    border-radius: 20px !important;
+    border-radius: 25px !important; /* 增大圆角 */
     font-weight: bold !important;
-    padding: 10px 20px !important;
-    transition: background-color 0.2s ease-in-out;
+    font-size: 1.1rem !important; /* 增大字体 */
+    padding: 12px 25px !important; /* 增加内边距 */
+    transition: all 0.2s ease-in-out; /* 平滑所有过渡 */
+    box-shadow: 0 3px 6px rgba(0, 123, 255, 0.3) !important; /* 添加阴影 */
+    border: none !important; /* 移除默认边框（如果存在） */
 }
+
 .submit-button:hover {
     background-color: #0056b3 !important;
+    box-shadow: 0 5px 10px rgba(0, 86, 179, 0.4) !important; /* 悬停时增强阴影 */
+    transform: translateY(-2px); /* 悬停时轻微上移 */
 }
+
 .gr-prose h1, .gr-prose h2, .gr-prose h3 {
-    color: #343a40;
+    color: #212529; /* 更深的颜色 */
     text-align: center;
+    margin-bottom: 0.75em !important; /* 增加标题下的间距 */
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 给标题添加轻微文字阴影 */
+}
+.gr-prose h1 {
+    font-size: 2.8em !important; /* 增大 H1 */
+    font-weight: 700 !important;
+}
+.gr-prose h2 {
+    font-size: 2.2em !important; /* 增大 H2 */
+    font-weight: 600 !important;
 }
+.gr-prose h3 {
+    font-size: 1.8em !important; /* 增大 H3 */
+    font-weight: 600 !important;
+}
+
 .gr-prose p {
-    color: #495057;
+    color: #343a40; /* 更深的颜色 */
     text-align: center;
-    font-size: 1.1em;
+    font-size: 1.15em !important; /* 增大段落字体 */
+    line-height: 1.7 !important; /* 增加行高 */
+    margin-bottom: 1.5em !important; /* 增加段落下间距 */
 }
-/* 为下拉菜单添加一些边距 */
+
+/* 为下拉菜单添加一些边距和视觉强调 */
 .gradio-dropdown {
-    margin-bottom: 15px !important;
+    margin-top: 10px !important; /* 增加上方外边距 */
+    margin-bottom: 25px !important; /* 显著增加下方外边距，使其与其他元素分隔开 */
+    /* 如果想让下拉框本身更突出，可能需要针对其内部元素如 .gr-select select 或类似的选择器 */
+    /* 例如（需要根据实际Gradio版本检查选择器）： */
+    /*
+    select {
+        border-width: 2px !important;
+        border-color: #007bff !important;
+        font-weight: bold !important;
+    }
+    */
 }
 """
 
@@ -159,7 +209,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
         choices=list(AVAILABLE_MODELS.keys()), # 用户看到的选项是显示名称
         value=DEFAULT_MODEL_DISPLAY_NAME,     # 默认值
         label="选择AI模型",
-        info="更改模型后，新的对话将使用所选模型。",
+        info="更改模型后，请刷新窗口，新的对话将使用所选模型。",
         elem_classes="gradio-dropdown" # 应用自定义CSS类 (可选)
     )