Gradio Auth登录页设置中文

2024-03-14 05:50
文章标签 设置 登录 中文 gradio auth

本文主要是介绍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部署,不知道能不能把本地的以来打成一个包,直接拿到其他位置安装,有知道的也可以告知一下。

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

这篇关于Gradio Auth登录页设置中文的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/807396

相关文章

Java下载文件中文文件名乱码的解决方案(文件名包含很多%)

《Java下载文件中文文件名乱码的解决方案(文件名包含很多%)》Java下载文件时,文件名中文乱码问题通常是由于编码不正确导致的,使用`URLEncoder.encode(filepath,UTF-8... 目录Java下载文件中文文件名乱码问题一般情况下,大家都是这样为了解决这个问题最终解决总结Java下

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

Windows设置nginx启动端口的方法

《Windows设置nginx启动端口的方法》在服务器配置与开发过程中,nginx作为一款高效的HTTP和反向代理服务器,被广泛应用,而在Windows系统中,合理设置nginx的启动端口,是确保其正... 目录一、为什么要设置 nginx 启动端口二、设置步骤三、常见问题及解决一、为什么要设置 nginx

Oracle数据库如何切换登录用户(system和sys)

《Oracle数据库如何切换登录用户(system和sys)》文章介绍了如何使用SQL*Plus工具登录Oracle数据库的system用户,包括打开登录入口、输入用户名和口令、以及切换到sys用户的... 目录打开登录入口登录system用户总结打开登录入口win+R打开运行对话框,输php入:sqlp

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

电脑密码怎么设置? 一文读懂电脑密码的详细指南

《电脑密码怎么设置?一文读懂电脑密码的详细指南》为了保护个人隐私和数据安全,设置电脑密码显得尤为重要,那么,如何在电脑上设置密码呢?详细请看下文介绍... 设置电脑密码是保护个人隐私、数据安全以及系统安全的重要措施,下面以Windows 11系统为例,跟大家分享一下设置电脑密码的具体办php法。Windo

如何设置vim永久显示行号

《如何设置vim永久显示行号》在Linux环境下,vim默认不显示行号,这在程序编译出错时定位错误语句非常不便,通过修改vim配置文件vimrc,可以在每次打开vim时永久显示行号... 目录设置vim永久显示行号1.临时显示行号2.永www.chinasem.cn久显示行号总结设置vim永久显示行号在li

Linux:alias如何设置永久生效

《Linux:alias如何设置永久生效》在Linux中设置别名永久生效的步骤包括:在/root/.bashrc文件中配置别名,保存并退出,然后使用source命令(或点命令)使配置立即生效,这样,别... 目录linux:alias设置永久生效步骤保存退出后功能总结Linux:alias设置永久生效步骤

Go语言实现将中文转化为拼音功能

《Go语言实现将中文转化为拼音功能》这篇文章主要为大家详细介绍了Go语言中如何实现将中文转化为拼音功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 有这么一个需求:新用户入职 创建一系列账号比较麻烦,打算通过接口传入姓名进行初始化。想把姓名转化成拼音。因为有些账号即需要中文也需要英

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2