Gradio Auth登录页设置中文

最近入坑了gradio, 就是一款python框架，可以通过简单的几行代码，就能够帮我们构建一个简易的页面网站，并且可以在里面做相应的逻辑处理。目前该框架在AI领域相对比较火爆，用于给自己的大模型构建操作页面。

官网地址： Gradio

具体操作这里就暂不做介绍了，毕竟我也是新手。我也刚入坑两天。

今天主要介绍一下，昨晚搞到半夜一点遇到的一个问题。就是想做一个登录页面。

gradio 本身是提供了一个简单的登录页面的，我们只需要有一行代码配置就可以实现。

demo
 .queue(concurrency_count=3)
 .launch(server_name='0.0.0.0',
         server_port=8082,
         show_api=False,
         share=False,
         inbrowser=False,
         auth=("zhangsan", '123456'),
         )

只需要在launch方法里加入auth=("zhangsan", '123456'), 即可，这样我们使用zhangsan/123456就可以登录了。 这里面也可以传入一个元组，配置多个。

登录页面长这样：

整体来说还不错，但是领导提出了新的要求，要把里面的英文都显示成中文。这可麻烦了，就开始大规模查找资料。

比如在github上有就有提出了，想要在登录页面加一个邮箱的需求：

https://github.com/gradio-app/gradio/issues/5073

得到的答案是这样的：

翻译过来：

就是可以通过FastAPI技术去实现，下面是demo

https://github.com/gradio-app/gradio/issues/2790

大概意思就是自己重新开发一套应用，然后和gradio的挂在到一起。看了一下，我觉得作为python新手的我，应该是搞不定的（毕竟连python语法都没搞明白）。

好了，铺垫的差不多了，我们接下来进入正题。我们修改的方法就是修改源码，重新编译。这里有一个非常重要的点，就是一定要编译和你当前版本一直的源码，否则会导致你的应用样式出现问题。尤其是有自定义css的，对于版本是十分敏感的，因为这个我踩了大坑，差点没出来。

先查下自己的gradio版本。

pip list

找到自己的gradio版本， 我的是3.37.0 。 之前由于没有注意观察这里，直接下载了main分支，导致登录页面是成功了，但是里面的样式全都乱了。最后才发现是版本不一致的问题。然后下载源码：

在tag中找到自己版本对应的代码； https://github.com/gradio-app/gradio/tags

然后下载，解压，使用vscode打开。 主要修改的文件为: js/app/src/Login.svelte

这里展示的修改后的效果，源码都是英文的。 这里其实就相当于是写死了。 其实也可以配置成变量。然后在同级目录的lang下面的i18n配置文件中给对应的变量赋值，这样就可以自动实现国际化了。

在新版本里，有几个值使用了变量的，比如提示语，但是像用户名密码都是写死的。

新版本中变量的写法，如果改成变量，一定记得在json中配置对应的值。其他语言也都加一下。

这样打开页面的时候gradio会根据浏览器当前的语言去解析对应的json文件，实现国际化。

好了，源码改好了，接下来就是重新编译了，这个步骤，就要参照CONTRIBUTING.md

在源码的根目录下有。编译之前要准备好相应环境。

然后按照上面的步骤，一个一个执行脚本。 后面有几个是测试的执行的时候可能会有报错，但完全不影响。执行完毕后，他不会生成对应的安装包，但是会把本地安装好的gradio做替换。我们重新打开我们的登录页面，就发现已经发生了变化。

搞定收工。

这种方式只不过也有一些缺陷，就是如果要在多台机器上进行部署，可能需要多次重复上述步骤。这个由于对python部署，不知道能不能把本地的以来打成一个包，直接拿到其他位置安装，有知道的也可以告知一下。

好了以上就是整个内容，整理不易，希望帮到有相同需求的人。一定要注意版本一定要保持一致哦！！