如何在Gradio中添加自定义CSS文件？

在Gradio中，你可以通过将自定义的CSS文件作为静态文件一起部署，并在启动应用程序时引用它来添加自定义样式。以下是一个步骤指南：

1. **创建CSS文件**：首先，在项目的某个文件夹下创建一个新的CSS文件，例如`styles.css`，并在里面编写你想要应用的样式规则。

/* styles.css */
body {
    background-color: #f8f9fa;
}

.text-input {
    color: #343a40;
}

2. **上传到服务器**：将这个CSS文件上传到你的项目服务器，确保访问该文件的URL是安全可用的。如果你使用的是本地开发环境，可能会需要配置Web服务器，如Flask或HTTPServer。

3. **在Gradio中引用CSS**：当你创建Gradio界面时，你可以传递一个`theme`参数，这是一个包含HTML和CSS的字符串。在你的Python脚本中添加这一步：

import gradio as gr
from flask import Flask, send_from_directory

# 创建一个简单的Flask应用来托管CSS文件
app = Flask(__name__)
app.config["SEND_FILE_MAX_AGE_DEFAULT"] = 0

@app.route('/static/<path:path>')
def static_files(path):
    return send_from_directory("static", path)

def custom_style():
    with open("styles.css", "r") as f:
        css_content = f.read()  # 获取CSS内容
    return gr.html.Div([
        gr.inputs.Textbox(style={"color": "#343a40"}),  # 引入自定义CSS的字体颜色
        gr.outputs.Textbox(style={"color": "#343a40"}),
        gr.html.Pre(css_content)  # 显示CSS代码供查看
    ], style={'backgroundColor': 'white', 'padding': '1rem'})

custom_ui = gr.Interface(custom_style, mode="dg")
custom_ui.theme = app.static_url_path + "/styles.css"
custom_ui.launch(inbrowser=True, port=5000, server=app)

现在，每次打开Gradio界面，它都会加载并应用`styles.css`里的样式。