指南将引导你学习构建一个自动完成任意输入文本的Web应用程序。

作者 | Dev Sharma

译者 | 苏本如，责编 | 郭芮

出品 | CSDN（ID：CSDNnews）

以下为译文：

在本文中，我们将使用OpenAI的新一代表语言模型GPT-2来建立模型，使用Panel框架来构建web页面的仪表板。本指南分为两部分。在第一部分中，我们将加载我们的模型并编写一个预测函数。在第二部分中，我们将构建一个web应用程序。

自动生成文本的应用程序示例。我们将构建这个web应用程序的一个更简单的变体。

准备工作

本教程假设你已经安装了Python 3.7+，并且对语言模型有一定的了解。尽管本教程所涉及的所有步骤都可以在Jupyter之外完成，但是强烈建议你使用jupyter notebook。

我们将使用PyTorch作为我们选择的深度学习库。在PyTorch中，我们将使用transformers库导入预先训练好的OpenGPT-2模型。可以通过在bash命令行中分别输入以下命令来安装这些库：

pip install torch
pip install transformers

对于我们的web应用程序，我们将利用Panel这个窗口容器/框架，这是一个很好的工具，可以被用来从jupyter notebooks或者常规的Python脚本中轻松地创建可维护的仪表板。可以使用以下命令安装Panel：

pip install panel

第一部分：建立模型

OpenAI的GPT是一种基于transformer的语言模型，它在生成类似人类语言的文本方面受到了很多关注。如果你以前没有尝试过，你很可能会在阅读结束时得出同样的观点。

加载模型

首先，我们需要导入所需的包。详情如下：

import numpy as np
import torch
import torch.nn.functional as F
from transformers import GPT2Tokenizer, GPT2LMHeadModel
from random import choice

接下来，我们将加载OpenGPT2的Tokenizer和语言模型：（如果是第一次运行，可能需要几分钟下载预先训练的模型）

tok=GPT2Tokenizer.from_pretrained("gpt2")
model=GPT2LMHeadModel.from_pretrained("gpt2")

预测函数

在这个阶段，大部分工作已经完成了。因为我们的模型是预先训练过的，所以我们不需要再次训练它或做任何修改。我们只需要编写一个函数，它可以向模型输入文本并生成预测的文本。

def get_pred(text, model, tok, p=0.7):
input_ids=torch.tensor(tok.encode(text)).unsqueeze(0)
logits=model(input_ids)[0][:, -1]
probs=F.softmax(logits, dim=-1).squeeze
idxs=torch.argsort(probs, descending=True)
res, cumsum=, 0.
for idx in idxs:
res.append(idx)
cumsum +=probs[idx]
if cumsum > p:
pred_idx=idxs.new_tensor([choice(res)])
break
pred=tok.convert_ids_to_tokens(int(pred_idx))
return tok.convert_tokens_to_string(pred)

这个函数中发生了很多事情。因此，让我们把它分解来看看。首先，我们对input_ids中的输入文本进行标记（tokenize）和编码（encode）。接着，我们要求我们的模型为下一个单词/标记（token）生成一个logits向量。在应用softmax函数并按降序对这些可能的概率结果进行排序之后，我们得到了一个向量idxs，它按各自的概率顺序列出了每个token的索引。

在这个阶段，我们可以选择概率最高的token。但是，我们希望能够混合结果，以便相同的输入文本可以生成各种文本。为此，我们将添加一个随机元素，从最可能的下一个token列表中选择一个随机token。这样的话，我们就不会每次都选择相同的预测token。为了做到这一点，我们采用了Nucleus (Top-p) Sampling 方式。

我们通过循环遍历每个概率来执行此操作，直到循环遍历的所有概率之和大于p（这里的p是一个介于0到1之间的任意数字）。当p被超过前，所有遍历到的token都将被存储在列表res中。一旦p被超过，我们就从这个列表中随机选择一个token。请记住，我们正在遍历的概率列表包含了其按概率排序的索引。注意，p值越高，我们的列表中将包含更多的token。反之亦然。因此，如果每次都希望得到相同的结果，可以将p值设置为0。

现在，让我们测试一下我们的预测函数：

每次都会有不同的结果，这正是我们所期望的。现在,我们的预测功能准备好了。让我们开始构建我们的Web应用程序吧！

第二部分：构建web应用程序

Panel框架简介

如果你还不熟悉Panel框架，那请记住，Panel框架可以帮助我们创建一个web仪表板和web应用程序。简而言之，你需要知道的是它有三个主要组件：

• Panel：可以包含一个或多个窗格（pane）对象的容器，面板（pane）对象是指文本、图像、图形、小部件等（也可以包含其他panel）；

• Pane：任何单个对象，例如文本、图像、数据帧等；

• Widget（小部件）：用户可以自行调整的项目，包括文本输入框、滑块、按钮、复选框，等等可以改变窗格的行为的小部件。

下一个也是最后一个你需要知道的事情是：我们有多种方法来定义不同的窗格和小部件之间的交互方式,我们称之为“callback(回调)”。例如，如果按下某个按钮，其他窗格应该如何更新呢？稍后我们将定义一个回调函数来演示它将如何准确地做到这一点。

Web应用程序简介

我们的文本生成器应用程序将有一个输入窗口，以便用户输入他们想要输入的文本。接下来，用户应该能够通过按下按钮生成新的token。在这之后，它将使用我们在第一部分中定义的预测函数来预测新的token来生成新文本。最后，用户应该能够在已经预测的token基础之上继续生成新的文本。

实施

让我们首先导入Panel并创建文本输入小部件：

import panel as pn
pn.extension # loading panel's extension for jupyter compatibility text_input=pn.widgets.TextInput

现在，如果在jupyter中执行文本输入，我们将得到以下结果：

接下来，我们需要一个窗格，它会在越来越多的token生成时存储整个文本：

generated_text=pn.pane.Markdown(object=text_input.value)

注意，这里我们将文本对象设置为text_input的值。我们希望generated_text的值与text_input的值相同，因为我们将要在generated_text之上预测新文本。随着越来越多的token被添加到我们的序列中，我们将继续基于generated_text进行预测，直到用户改变了text_input。一旦用户改变了text_input，这个进程将重新启动。

然而，到这里事情还没有完全结束。尽管generated_text将在开始时接受text_input的值，但如果text_input值发生更改，generated_text值将不会自我更新。为此，我们需要像下面这样将这两个对象链接在一起：

text_input.link(generated_text, value='object')

这里，我们在text_input和generated_text之间形成了单向链接。因此，每当text_input的值发生更改时，generated_text值也将更改为新值。如下所示：

观察面板中文的text_input和generated_text之间的链接行为。注意：作为组件的pn.Row也是一个面板，即它是一个窗格和小部件的容器。

现在我们有了两个文本对象，让我们来创建按钮小部件：

button=pn.widgets.Button(name="Generate",button_type="primary")

很好，现在我们有了一个按钮，我们只需要把它和我们想要的行为链接起来。为此，我们将编写一个回调函数，该函数将在每次单击按钮时运行：

def click_cb(event):
pred=get_pred(generated_text.object, model, tok)
generated_text.object +=pred

这里发生了两件事。首先，我们将generated_text作为输入传递给我们之前编写的预测函数，该函数将生成一个新的token。其次，将此token添加到generated_text中。每次新单击按钮时，这个过程都会重复。

到这里，我们仍然需要将按钮单击事件与回调函数绑定在一起。我们可以这样做：

button.on_click(click_cb)

我们现在已经完成了所有小部件、窗格和函数的创建。接下来我们需要做的只是把这些东西放在一个面板里，然后看看会发现什么：

app=pn.Column(text_input, button, generated_text); app

注：pn.Column与pn.Row类似，它是另一种类型的panel，即小部件、窗格甚至其他panel的容器。

让我们再添加一个标题和一个简短的描述，我们就大功告成了！

title=pn.pane.Markdown("# **Text Generator**")
desc=pn.pane.HTML("<marquee scrollamount='10'><b>Welcome to the text generator! In order to get started, simply enter some starting input text below, click generate a few times and watch it go!</b></marquee>")final_app=pn.Column(title, desc ,app)

服务你的Web应用程序

Panel框架使得服务web应用程序变得非常容易。有两种方法可以用来做这件事。第一个是调用“.show”命令。这种方法通常用于调试，如下面所示。它将启动一个新窗口，在这个窗口中，一个名为final_app的 panel将作为一个web应用程序运行。

final_app.show

而为了让它在生产环境中运行，你需要使用“.servable”方法。但是，如果你以类似于show方法的方式运行此操作，你的笔记本上不会出现任何东西，你必须像下面这样在你的笔记本上运行bash脚本：

panel serve --show text_generation_app.ipynb

只要你的笔记本中有以下代码，这个操作将在本地端口上启动你的web应用：

final_app.servable

大功告成！

现在，你自己有能力构建一个自动生成文本的应用程序。你可以通过添加更多panel组件来进一步完善它。你甚至可以将此应用程序嵌入到其他项目中。像往常一样，你可以在github上找到我的代码库。注意：下面图片中的app是我在本教程中使用的app（text_generation_app.ipynb）的高级变体：。

原文：https://towardsdatascience.com/build-a-text-generator-web-app-in-under-50-lines-of-python-9b63d47edabb

本文为 CSDN 翻译，转载请注明来源出处。

【End】

置知识点

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示元素，除了优先级更高之外，与 html 选择器相同。

在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

place-items

CSS 中的 place-items 是一个简写属性 ，它允许我们在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 （例如：align-items 和 justify-items 属性）。

如果未提供第二个值，则第一个值作为第二个值的默认值。

也就是说，以后需要定义水平垂直居中的盒子就不需要再 justify-items: center 和 align-items: center 了，直接一行搞定，看起来更加专业。

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

值

• border-box
  背景延伸至边框外沿（但是在边框下层）。
• padding-box
  背景延伸至内边距（padding）外沿，不会绘制到边框处。
• content-box
  背景被裁剪至内容区（content box）外沿。
• text Experimental
  背景被裁剪成文字的前景色。

linear-gradient()

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

其结果属于 < gradient > 数据类型，是一种特别的 < image > 数据类型。

radial-gradient()

radial-gradient() CSS 函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。

这个方法得到的是一个 CSS < gradient > 数据类型的对象，是 < image > 的一种。

实现效果大致如下：

css 样式如下：

      * {
        box-sizing: border-box;

      }
      /* :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。*/
      /* 在声明全局 CSS 变量 */
      :root {
        --color-1: #186cb8;
        --color-2: #2a9a9f;
        --color-3: #f1b211;
        --color-4: #e83611;
        --color-5: #f9002f;
      }

      .wrapper {
        background: #000;
        line-height: 1;
        min-height: 100%;
        display: grid;
        place-items: center;
        min-height: calc(100vh - 16px);
      }

      h1 {
        font-family: "Exo", sans-serif;
        font-size: 15vw;
        font-weight: 900;
        width: -webkit-min-content;
        width: -moz-min-content;
        width: min-content;
        margin: auto;
        text-transform: uppercase;

        background: linear-gradient(
          219deg,
          var(--color-1) 19%,
          transparent 19%,
          transparent 20%,
          var(--color-2) 20%,
          var(--color-2) 39%,
          transparent 39%,

          transparent 40%,
          var(--color-3) 40%,
          var(--color-3) 59%,
          transparent 59%,

          transparent 60%,
          var(--color-4) 60%,
          var(--color-4) 79%,
          transparent 79%,

          transparent 80%,
          var(--color-5) 80%
        );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }

      .container {
        padding: 1.5rem;
        text-align: center;
        background: radial-gradient(

            circle at 1.4% 1.4%,
            var(--color-1) 0.8%,
            transparent 0.8%
          ),
          radial-gradient(

            circle at 5.5% 3%,
            var(--color-2) 0.45%,
            transparent 0.45%
          ),
          radial-gradient(

            circle at 2.5% 3.5%,
            var(--color-3) 0.5%,
            transparent 0.5%
          ),
          radial-gradient(

            circle at 4.5% 1.2%,
            var(--color-4) 0.25%,
            transparent 0.25%
          ),
          radial-gradient(

            circle at 98% 98%,
            var(--color-1) 0.8%,
            transparent 0.8%
          ),
          radial-gradient(

            circle at 95% 95%,
            var(--color-2) 0.45%,
            transparent 0.45%
          ),
          radial-gradient(

            circle at 94.5% 97.5%,
            var(--color-3) 0.5%,
            transparent 0.5%
          ),
          radial-gradient(

            circle at 98.5% 95.5%,
            var(--color-4) 0.25%,
            transparent 0.25%
          );
      }

      @media screen and (min-width: 768px) {
        h1 {
          font-size: 6.5rem;
        }
      }

html 标签结构如下：

    <divclass="wrapper">
      <divclass="container">
        <h1>multi color text with css</h1>
      </div>
    </div>

小结

绘画基础图案不难，重点都在于背景颜色的绘制，重点研究下背景代码。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！

景

最近在做系统的UI优化，美工设计了一版系统主页的消息Tabs标签，我感觉直接使用BootStrap的原装控件就好了，但是做出来后领导们审查没通过，说要和美工效果一致，好吧，那就按领导的意思做吧，先和大家看一下效果：

这个是我做的效果，但是领导们不满意；

这个是美工给的效果图，咱们最终也按照这个效果图为准；

好了说干就干，仔细想了一下如果重新去写一个Tabs的插件也挺麻烦，还不如在原来的基础上进行修改，只需要把样式改掉就可以了，把样式重新放在一个新的文件中就可以了，好了，直接上代码：

源码

引用

首先是引用，需要把BootStrap和fontawesome引用进来，说明一下：

BootStrap主要是tabs的插件；

Fontawesome他是一个图标库，主要用于系统中使用的图标

<link rel="stylesheet" type="text/css" href="resource/bootstrap-3.3.5/css/bootstrap.css" />

<link type="text/css" rel="stylesheet" href="resource/bootstrap-3.3.5/css/font-awesome.min.css">

<script type="text/javascript" src="resource/bootstrap-3.3.5/js/bootstrap.min.js"></script>

HTML

<div class="msgContent">

<div class="msgContent_link"></div>

<ul id="myTab" class="nav nav-tabs">

<li class="active">

<a href="#msgInbox" data-toggle="tab">

收件箱

</a>

</li>

<li>

<a href="#msgOutBox" data-toggle="tab">

发件箱

</a>

</li>

<li>

<a href="#comGroup" data-toggle="tab">

通讯组

</a>

</li>

</ul>

<div id="myTabContent" class="tab-content">

<div class="tab-pane fade in active" id="msgInbox" style="padding-bottom: 10px;overflow: auto;max-height: 500px;">

<div id="msgInbox_content">

</div>

<div class="msg_op">

<span class="fa fa-refresh msg_op_refresh" onclick="msgOpRefresh();"></span>

<span class="fa fa-navicon msg_op_list" onclick="selectMenu(' /msg/msg/inboxList.haze','收件箱')"></span>

</div>

</div>

<div class="tab-pane fade" id="msgOutBox" style="padding-bottom: 10px;overflow: auto;max-height: 500px;">

<div id="msgOutbox_content">

</div>

<div class="msg_op">

<span class="msg_send_btn" onclick="sendMsg();">发送消息</span>

<span class="fa fa-refresh msg_op_refresh" onclick="getMsgOutBoxList();"></span>

<span class="fa fa-navicon msg_op_list" onclick="selectMenu('/msg/msg/outboxList','发件箱')"></span>

</div>

</div>

<div class="tab-pane fade" id="comGroup" style="">

<p>这是通讯组</p>

</div>

</div>

</div>

样式表

.msgContent{

position: absolute;

width: 300px;

height: auto;

border: 1px solid #bdb5b5;

background-color: #FFFFFF;

border-radius: 10px;

right: 5px;

padding: 5px;

display:none;

top: 50px;

}

.msgContent .msgContent_link{

position: absolute;

border-right: 16px solid transparent;

border-left: 16px solid transparent;

border-bottom: 16px solid #ffffff;

top: -16px;

left: 193px;

}

#myTab{

height:40px;

border-bottom: none;

}

#myTab li{

height:40px;

width: 33.3%;

}

#myTab>li {

margin-left: -1px;

border-top: none;

border-left: none;

border-right: none;

z-index: 1;

}

#myTab>li.active {

border-top: 0px;

border-left: none;

border-right: none;

z-index: 3;

}

#myTab>li.active>a, #myTab>li.active>a:hover, #myTab>li.active>a:focus {

border-top: none;

border-left: 0px;

border-right: 0px;

border-bottom: 1px solid #FFF;

color: #000;

}

#myTab > li.active > a, #myTab > li.active > a:hover, #myTab > li.active > a:focus {

color: #000;

cursor: default;

background-color: #fff;

/* border: 1px solid #666363; */

border-bottom-color: transparent;

font-weight: bold;

}

#myTab>li>a, #myTab>li>a:focus {

color: #999999;

border-left: 0px;

border-right: 0px;

margin-right: 0px;

padding: 10px 16px;

background: #FBFAF8;

border-bottom: 0px;

font-size: 15px;

font-weight: bold;

}

#myTab>li.active>a::after{

content: "";

width: 20px;

height: 2px;

background: #000;

position: absolute;

left: 36px;

top: 35px;

}

#msgInbox_content{

padding-bottom: 30px;

}

#msgOutbox_content{

padding-bottom: 30px;

}

.msgRow{

width:100%;

height:55px;

border-bottom: 1px solid #cccccc;

padding: 5px;

cursor: pointer;

}

.msgRow:hover{

background-color:#cccccc;

}

.msgRow:hover .msgRow_content_info .icon{

color:#0281CC;

}

.msgRow_content{

width:100%;

}

.msgRow_content_info{

line-height: 20px;

float: left;

}

.msgRow_content_info .icon{

font-size: 20px;

margin-top: 3px;

/* */

}

.msgRow_content_info .name{

margin-left: 10px;

}

.msgRow_content_info .date{

margin-left: 15px;

}

.msgRow_content_info .status{

margin-left: 25px;

padding: 2px;

background-color: rgba(217, 105, 168, 0.25);

border: 1px solid #d969a8;

color: #d969a8;

border-radius: 4px;

}

.msgRow_content_info .status span{

display: inline-block;

transform: scale(0.8);

}

.msgRow_content_info .del{

margin-left: 25px;

cursor: pointer;

font-size: 14px;

margin-top: 3px;

/* */

}

.msgRow_content_con{

line-height: 20px;

float: left;

}

.msgRow_content_con span{

margin-left: 30px;

font-weight: bold;

cursor: pointer;

}

.msg_op{

line-height: 35px;

float: right;

padding-top: 6px;

position: absolute;

bottom: 1px;

background-color: white;

width: 98%;

text-align: right;

}

.msg_op .msg_op_refresh{

margin-right: 20px;

font-size: 16px;

cursor: pointer;

}

.msg_op .msg_op_list{

margin-right: 20px;

font-size: 16px;

cursor: pointer;

}

.msg_send_btn{

background-color: #0281CC;

color: white;

padding: 2px;

cursor: pointer;

float: left;

line-height: 20px;

margin-top: 5px;

margin-left: 5px;

border-radius: 5px;

}

JS

//加载消息列表

function checkUnreadMsg(showTip){

$.ajax({

type:'post',

url:'../msg/msg/getInboxUnreadList.haze',

dataType:'json',

success:function(data){

if(data !=null){

if(data.total > 0){

$("#unreadMsgSpan,#unreadMsgSjxSpan").html(data.total);

$(".home-msg-count").find("div").html(data.total);

}else{

$("#unreadMsgSpan,#unreadMsgSjxSpan").html("0");

$(".home-msg-count").find("div").html("0");

}

$('#msgInbox_content').html("");

var html="";

for(var i=0; i < data.rows.length;i++){

var row=data.rows[i];

html +='<div class="msgRow">';

html +='<div class="msgRow_content">';

html +=' <div class="msgRow_content_info">';

if(row.msgTypeStr=="普通消息"){

html +=' <span class="fa fa-envelope-o icon"></span>';

}

else{

html +=' <span class="fa fa-wpforms icon"></span>';

}

html +=' <span class="name">'+row.readUserName+'</span>';

html +=' <span class="date">'+row.msgSendDateStr.split(' ')[0]+'</span>';

html +=' <span class="status"><span>'+row.msgReadStatuStr+'</span></span>';

html +=' <span class="fa fa-trash-o del" onclick="msgDel('+row.id+')"></span>';

html +=' </div>';

html +=' <div class="msgRow_content_con">';

var content="";

if(row.msgContentTrim.length > 15){

content=row.msgContentTrim.substring(0,15)+"...";

}

else{

content=row.msgContentTrim;

}

if(row.msgTypeStr=="普通消息"){

html +=' <span onclick="msgCheck('+row.id+')">'+content+'</span>';

}

else{

html +=' <span onclick="msgProessHandle('+row.id+','+row.msgBusinessType+')">'+content+'</span>';

}

html +=' </div>';

html +='</div>';

html +='</div>';

}

$('#msgInbox_content').append(html);

}

}

});

}

关于代码中使用到的其他的js事件代码，可以根据自己的需求进行更改，在这里就不列出来，本代码中只列出来的加载消息列表的方法；