用Plotly Dash构建你自己的翻译应用- Dash的布局和回调-一一网

语言不分国界!

动机

我喜欢探索!我一直对世界各地的不同语言感到好奇。我来自一个多语言的国家，我可以证明，懂得多种语言肯定会打开你的世界，因为你可以很容易地与他人联系。虽然谷歌翻译确实使我们的生活变得更容易，语言不再是一个障碍，但我想如果我可以在一次搜索中得到所有语言的一个词的翻译，那将是非常了不起的。不仅如此，作为一个视觉学习者，在地图上将这些翻译的单词映射到其各自的国家，有助于使我的学习更容易，幸运的是，Plotly Dash使这成为可能。

偷看

这是该应用程序的最终产品，当你在一个国家周围徘徊时，就会出现翻译的文字。兴奋地想创建一个吗？让我们开始吧!

medium.com/media/c4d4c…

库

以下库将被用于构建这个应用程序。

googletrans: 实现谷歌翻译API的python库
plotly：一个互动的、开源的绘图/可视化库
dash：用于构建网络分析应用程序的富有成效的Python框架
pycountry：提供ISO语言和国家的数据库。
pandas：提供快速、灵活和富有表现力的数据结构的软件包。

pip install googletrans==3.1.0a0
复制代码

我安装了alpha版本的googletrans==3.1.0a0，因为在其他版本中，由于谷歌翻译API的变化，有一些问题重新出现。

数据集的预览

该数据集可以在我的GitHub仓库中找到。

medium.com/media/77011…谷歌翻译API支持多种语言。要列出它们，只需运行下面的代码。

import googletrans
复制代码

pprint(googletrans.LANGUAGES)
复制代码

现在，让我们看看翻译器如何工作。你首先需要从googletrans模块中导入翻译器，并创建一个翻译器类的对象，然后将文本作为参数传给翻译器类对象的translate()方法。默认情况下，translate()方法返回传递给它的文本的英文翻译，因此你需要使用dest属性指定目标语言。在这里，我们将dest初始化为’fr’，这意味着translate()方法将把文本从英语转换为法语。

result = translator.translate("hello world", dest="fr").text
复制代码

由于我们处理的是pandas DataFrame，而且不同国家的dest是不同的，我使用了.apply()方法来传递函数并将其应用于熊猫系列ISO_lang的每一个值。

df["transl"] = df["ISO_lang"].apply(lambda x: translator.translate(text, src=lang, dest = x).text)
复制代码

就这样，我们有了一个带有翻译文本的新列。

Plotly Express

为了使我们的翻译文本可视化，我将使用Plotly Express，这是一个新的高级Python可视化库和Plotly.py的包装器，允许简单的语法和复杂的图表。Plotly是最好的可视化库之一，因为它允许互动的可视化。但最重要的是，它可以部署在Dash应用程序上，这也是本文的主要目的!

在我们的可视化中使用的图是一个choropleth地图，它允许我们通过区域和地区来展示数据，并根据数值来着色。DataFrame中的每一行都被表示为choropleth的一个区域。

medium.com/media/08cc4…

颜色参数本质上是我们想要用于颜色编码的数据框架的列。在这里，我使用了人口列，这样我们的六面体地图也可以让我们按国家直观地看到世界人口。

冲刺

现在进入激动人心的部分，让我们把所有的东西放在一起，建立我们的Dash应用程序Dash是Plotly的开源框架，用于构建具有Plotly图表的分析性网络应用和仪表盘。它是一个网络应用框架，提供了围绕HTML、CSS和JavaScript的抽象，因为它是建立在Flask、React.js和Plotly.js之上的。

让我们首先导入dash库。

medium.com/media/fdc52…

Dash应用程序由2部分组成：布局和交互性。

i.布局

布局使用2个库，它们是dash_html_components和dash_core_components。dash_html_components库为所有的HTML标签提供了类，关键字参数描述了HTML属性，如style、className和id。它允许我们设计我们的应用程序的外观。简而言之，dash允许我们使用Python结构与dash-components库组成布局，而不是编写HTML，它使用Div类转换Python 类来创建HTML Divs。另一方面，dash_core_components库可以生成更高级别的组件，如控件和图形。dcc.Graph类允许我们在我们的布局中创建一个图形。在引擎盖下，Dash使用Plotly.js来创建交互式图形，其中dcc.Graph组件期望一个图形对象或一个包含绘图数据和布局的Python字典。同时，dcc.Input接收用户的输入（要翻译的文本），并将其作为参数传递给我们在Dash回调中的update_output函数。

medium.com/media/63281…

ii.回调

medium.com/media/b433a…

回调函数本质上是Python函数， 每当输入组件的属性发生变化时，Dash就会 自动调用这些函数，从而使dash应用程序具有交互性。为了做到这一点，我们需要从thedash.dependencies中导入输入、输出和状态。

每个状态和输入都需要在回调函数中被表示为参数。输入和状态的区别在于，只要输入的component_property发生变化，回调就会自动触发。然而，当状态的component_property发生变化时，它不会被触发。从这个角度来说，每当用户在文本框中输入时，图形不会被更新。当用户点击 “翻译 “按钮时，图形才会被更新。

[dash.dependencies.Input(component_id='submit_button', component_property='n_clicks')],     [dash.dependencies.State(component_id='input_state', component_property='value')]
复制代码

让我们了解一下这些依赖关系是如何工作的。回调函数中的component_id=’submit_button’基本上与之前在app.layout中初始化的html.Button(id=’submit_button’, n_clicks=0, children=’submit’)参数交互。这意味着当我们的应用程序界面中的提交按钮被点击时，会触发回调函数来执行update_output函数，其中的num_clicks参数被传递。回调函数将数据返回到输出的component_property=’figure’，也就是choropleth地图。

参数的顺序在这里是至关重要的，为了使应用程序工作，即输出→输入→状态，我们的update_output函数中的参数与回调函数参数中的输入和状态的顺序是一致的。例如，第一个参数num_clicks与输入component_property=’n_clicks’相关，第二个参数value与状态component_property=’value’相关。

在某些情况下，当你不想更新回调输出时，你可以像我一样在回调函数中引发一个PreventUpdate异常。

最后，在update_output函数中插入我们之前的代码片段，以创建choropleth地图。为了查看我们的可视化，我们需要像在Flask中那样用app.run_server(debug=False)运行我们的网络服务器。如果你在Jupyter Notebook上运行，记得 禁用调试模式。我们的dash应用程序现在已经可以运行了!

medium.com/media/5a574…