gradio图像复原界面改进

图像复原界面展示需要输入图像和复原图像在界面的清晰对比，修改两张图像为同样大小。

默认情况：

intreface代码如下：

interface = gr.Interface(
    fn=restore,  # 要调用的函数
    inputs=[gr.Image(label="输入图像")],  # 第一个输入，图像类型
    additional_inputs=[
       # 下拉菜单输入
        gr.Radio(choices=degradations2,
                 label="对应退化类型")
    ],

    outputs=[gr.Image(label="修复后的图像"),  # 第一个输出，图像类型
             gr.Textbox(label="退化类型为")  # 第二个输出，文本类型
             ],
    title="基于DA-CLIP的图像修复",  # 界面标题
    description="上传图片后，选择某种退化类型或者自动检测退化类型。"  # 界面描述
    , examples=paired_examples
)

尽管同样是gr.Image但是inputs和outputs的图像显示大小不同 

inputs的image的上级div由于包含多一层图标，进行了各种对齐和布局设置显示小于原图。而outputs的image为原图大小。

解决思路修改样式css代码

1. 修改inputs的image显示为原图大小
2. 修改outputs的image显示大小与inputs相同

思路1

• 该方法的问题是原图大小可能过大/过小导致页面不那么美观。
• 优点是对图像去噪、去模糊等复原效果展示更明显有力

结果展示：对于上传的图像占据了整个页面。

修改的代码为：

在环境里的gradio\templates\frontend\assets\ImageUploader-B7bPUstM.css

.image-container.svelte-rrgd5g 注释掉属性align-items: center;

注释后代码：

.image-container.svelte-rrgd5g {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    /*align-items:center;*/
    max-height: 100%
}

可以页面F12找到对应属性注释后粘贴回本地对应文件 

原文件只有一行且在较末尾的未位置 

F12查找注释对应属性过程图 

思路2 

结果展示：图像在div中水平居中，复原前后图像相同大小适中

比较奇异的点是outputs返回的image父标签div居然是在button下。不过未设置点击事件，只对右上角的下载图标button设置了点击下载。

 

同样修改文件gradio\templates\frontend\assets\ImageUploader-B7bPUstM.css

.image-container.svelte-1l6wqyv img, button.svelte-1l6wqyv

.image-container.svelte-1l6wqyv img,button.svelte-1l6wqyv {
    width: var(--size-full);
    height: var(--size-full);
    object-fit: contain;
    display: block;
    border-radius: var(--radius-lg)
}

 原代码使用block布局，修改为flex布局并居中对齐。

修改后代码：

.image-container.svelte-1l6wqyv img,button.svelte-1l6wqyv {
    width: var(--size-full);
    height: var(--size-full);
    object-fit: contain;
    display: flex;
    justify-content: center;
    border-radius: var(--radius-lg)
}