用户界面设计与实现

在非技术人员面前展示项目动态的界面必须足够简单。数据分析师、数据科学家、程序员需要一个模块来创建用户友好的界面。对于任何深度学习模型,有许多创建用户界面的选项,如常用的HTML、CSS和JavaScript。另一方面,Tkinter、Gradio、Flask、Django是可以使用Python创建的用户界面。

Gradio基础与安装

Gradio是一个开源库,用于为机器学习深度学习模型或任何任意函数创建易于使用和定制的用户界面。Gradio用户界面可以用很少的代码行轻松构建。点击学习Gradio的安装和基本使用。

程序员的用户界面经验

作为一名程序员,曾使用过三种类型的界面,它们是:

  1. HTML
  2. Tkinter
  3. Gradio

构建用户界面的最基本和最古老的方法是HTML,它提供了大量选项,可以根据客户的要求定制用户界面。HTML需要其他组件,如CSS、JavaScript和Bootstrap,以构建交互式用户界面。为了构建这样的用户界面,程序员应该完全了解上述概念,并能够按时完成用户界面。

Python提供了一个名为Tkinter的GUI工具包,用于构建标准界面。Tk GUI工具包及其Python绑定由小部件组成,每个小部件提供不同级别的可定制性。Tkinter在所有主要操作系统上工作,并为用户提供基本元素,如:

  • 框架:为应用程序提供结构
  • 按钮:用于输入或提交信息
  • 复选框:用于选择
  • 标签:显示文本信息
  • 文件对话框:将文件上传到应用程序
  • 画布:提供空间用于图表和绘图

Gradio是一个开源库,用于为机器学习深度学习模型或任何任意函数创建易于使用和定制的用户界面。Gradio用户界面可以用很少的代码行轻松构建。Gradio由三个参数组成:

  1. fn:执行用户界面主要操作的函数
  2. inputs:输入组件类型
  3. outputs:输出组件类型

Gradio还提供可定制的组件,如按钮、文本框、复选框、文件对话框,这与Tkinter非常相似。它支持多个输入和输出,这是为深度学习模型构建的用户界面的基本要求。Gradio还可以用来对不同模型进行比较分析。

以下是使用Gradio为ResNet50模型构建用户界面的示例代码。首先,从Gradio导入所需的库和模块。

import gradio as gr import tensorflow as tf import numpy as np import requests from tensorflow.keras.applications.resnet50 import ResNet50 from tensorflow.keras.applications.resnet50 import preprocess_input from tensorflow.keras.models import load_model

接下来,使用“load_model”库加载用户界面中的HDF5文件。

model = load_model("训练模型后保存的.h5文件")

一旦模型加载完成,编写一个函数来执行分类任意输入的过程。这段代码对于进行预测非常重要。编写函数后,创建一个名为class_names的列表,以指定类别,以便可以在用户界面中显示结果。

def example(image): image = image.reshape((-1, 224, 224, 3)), prediction = model.predict(image).flatten(), return {class_names[i]: float(prediction[i]) for i in range(4)} class_names = ['模型分类的类别数量', 'a', 'b']

然后,使用以下代码初始化输入和输出组件。

image = gr.inputs.Image(shape = (224, 224)) label = gr.outputs.Label(num_top_classes = 4)

最后,包括各种组件(如fn、inputs、outputs、title、description等)在内的代码部分包括启动界面。

gr.Interface(fn = example,inputs = image,outputs = label,capture_session = True, title="这是一个示例",description = "用户界面的描述").launch(share=True)

Gradio界面的示例如下:

Gradio还提供了多个输入和输出的选项,这对于两个或更多深度学习模型的比较分析非常有用。这可以通过添加几行代码来实现。例如,考虑两个深度学习模型Resnet50和VGG16。

import tensorflow as tf import numpy as np import requests from tensorflow.keras.applications.resnet50 import ResNet50 from tensorflow.keras.applications.resnet50 import preprocess_input from tensorflow.keras.models import load_model

如上所述,使用“load_model”库将两个HDF5文件加载到用户界面中。

model1 = load_model("Model1.h5") model2 = load_model("Model2.h5")

类别必须对两个模型都是相同的,这必须在列表中指定。还有另一种方法可以将类别添加到代码中,即使用函数中的返回语句。当有超过三个类别需要预测时,可以使用列表。

class_names = ['a','b','c','d'] # 类别

接下来是主要部分,用于进行预测的函数。在这种情况下,需要两个函数来处理两个模型,如下所示:

def model1(image): image = image.reshape((-1, 224, 224, 3)) image = tf.keras.applications.resnet50.preprocess_input(image) prediction1 = model1.predict(image).flatten() return {class_names[i]: float(prediction1[i]) for i in range(4)} def model2(image): image = image.reshape((-1, 224, 224, 3)) image = tf.keras.applications.resnet50.preprocess_input(image) prediction2 = model2.predict(image).flatten() return {class_names[i]: float(prediction2[i]) for i in range(4)}

接下来与单模型使用的代码相同。

image = gr.inputs.Image(shape = (224, 224)) # 初始化输入组件 label = gr.outputs.Label(num_top_classes = 4) # 初始化输出组件

可以在用户界面中提供样本图像,以便用户可以轻松测试UI。

sample_images = [["a.jpg"],["b.jpg"],["c.jpg"],["d.jpg"],["e.jpg"]]

启动界面的最后一部分只是包括新函数,这些函数被包含在括号中,表示可以添加更多函数。

gr.Interface([model1,model2], inputs = image,outputs = label ,capture_session = True, examples = sample_images, title="示例", description="This is the description.").launch(share=True)
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485