fluidPage(
  tags$head(
    tags$script(HTML("
                // 记录父窗口，初始为空。
                parent = null;
                // 处理接收到的消息。
                window.addEventListener('message', function(e) {
                        //alert(e.data);
                        try{
                            //记录父窗口以备回发信息
                            parent = e.source;
                            //向服务器发送input变量更新消息
                            Shiny.setInputValue('hlmc', e.data);
                        } catch (error){
                              alert(error);
                            }
                        },false);
    
                // 点击时触发识别    
                $(document).on('click', '.btn-recognize', function (evt) {
                      evt.preventDefault(); 
                      var hlmc = document.getElementById('hlmc');
                      if (hlmc.value ==null || hlmc.value ==''){
                         alert('没有输入发票货劳名称！');
                      }else{
                          try{
                            Shiny.setInputValue('hlmc', hlmc.value);
                          } catch(error){
                            alert(error);
                          }
                      }
                });  

                // 点击时传出参数    
                $(document).on('click', '.btn-success', function (evt) {
                      evt.preventDefault(); 
                      var selected = document.getElementById('resultHlmc');
                      if (selected ==null){
                         alert('没有识别结果!');
                      }else{
                        if (parent == null){
                          alert(selected.innerHTML);
                        } else {
                          try{
                            parent.postMessage(selected.innerHTML, '*');
                          } catch(error){
                            alert(error);
                          }
                        }
                      }
                });                  
                
                // 触发了shiny:inputchanged事件，屏蔽输入引起的改变
                $(document).on('shiny:inputchanged', function(event) {
                    if (event.name === 'hlmc') {
                        event.preventDefault();                    
                    }
                });
                    
              "))
  ),
  
  titlePanel("发票货劳名称识别示例"),  
  sidebarLayout(
    sidebarPanel(
      textAreaInput("hlmc","发票货劳名称", rows =4, resize="vertical", value ="利尔康牌95%酒精消毒液"),
      actionButton("recognize", "识别货劳名称", class = "btn-recognize"),
      actionButton("sendout", "传出识别结果", class = "btn-success"),
      HTML("
      <br><br>暂定用'-'分隔的发票货劳名称并列短语先用语义图分析，如果语义图存在环路，就转用语法树。其它都用语法树。<br>
      语法树示例：<br>
      利尔康牌95%酒精消毒液<br>
      语义图示例：<br>
      汤臣倍健多种维生素咀嚼片-迪士尼漫威装<br>
      <br>
      分词后通过建立语法树或语义图，然后从根结点开始广度优先遍历，根据业务的统计和观察编写算法提取其中的名词重新排序，以优先级最高的名词为返回的货劳名称。<br>
      发票货劳名称一定是名词，这是NLP技术在特定场景名词短语分析中的应用实例。HanLP的Native API下载NLP深度学习预训练模型在虚拟主机本地执行操作。
           "),
      width = 4
    ),
    mainPanel(
      HTML("
            <table>
                <tr>
                    <td>识别结果：</td>
                    <td>
           "),
      textOutput("resultHlmc"),
      HTML("
                    </td>
                </tr>
                <tr>
                    <td>分词结果：</td>
                    <td>
           "),      
      textOutput("segwords"),
      HTML("
                    </td>
                </tr>
                <tr>
                    <td>词性标注：</td>
                    <td>
           "),            
      textOutput("postags"),
      HTML("
                    </td>
                </tr>
                <tr>
                    <td colspan=2>
           "),          
      # Use imageOutput to place the image on the page
      imageOutput("plot_as_svg"),
      HTML("
                    </td>
              </tr>
            </table>
           ")      
    )
))