生成的 HTML 代码中的空白字段（方面概述）

Question

所以我在为方面概述生成 html 代码时遇到了一个奇怪的错误。

这是我在 class 或函数之外编写所有代码时的代码：

# create a "jsonable" DF to make a Facet Dive
  IO_train = X_train.merge(y_train, left_index=True, right_index=True)
  IO_test = X_test.merge(y_test, left_index=True, right_index=True)

# facet analyse, not facet dive
  gfgs = GenericFeatureStatisticsGenerator()
  proto = gfgs.ProtoFromDataFrames([{"name": "train",
                                  "table": IO_train},
                                  {"name": "test",
                                  "table": IO_test}])
#für facet analyse ins utf-8 format bringen
 protostr = base64.b64encode(proto.SerializeToString()).decode("utf-8")

# create html template
HTML_TEMPLATE_ANALYSIS = """
 <script src="https://cdnjs.cloudflare.com/ajax/libs/
 webcomponentsjs/1.3.3/webcomponents-lite.js"></script>
 <link rel="import" href="https://raw.githubusercontent.com/
PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html" >
 <facets-overview id="elem3"></facets-overview>
 <script>
 document.querySelector("#elem3").protoInput = "{protostr}";
 </script>"""
html_analysis = HTML_TEMPLATE_ANALYSIS.format(protostr=protostr)

它创建了一个完美的 html 代码：

# html_analysis
'\n <script src="https://cdnjs.cloudflare.com/ajax/libs/\nwebcomponentsjs/1.3.3/webcomponents- 
lite.js"></script>\n <link rel="import" href="https://raw.githubusercontent.com/\nPAIR- 
code/facets/1.0.0/facets-dist/facets-jupyter.html" >\n <facets-overview id="elem3"></facets- 
overview>\n <script>\n document.querySelector("#elem3").protoInput ......

但是当我尝试使用 classes 和函数时：

class Facet:
# at first create a jsonable DF to make a Facet Overview
def crt_IO_json(self, training_features, training_output, test_features, test_output):
    self.training_features = training_features
    self.training_output = training_output
    self.test_features = test_features
    self.test_output = test_output
    IO_train = training_features.merge(training_output, left_index=True, right_index=True)
    IO_test = test_features.merge(test_output, left_index=True, right_index=True)
    return IO_train, IO_test
    
def Overview(self, IO_train, IO_test):
    gfgs = GenericFeatureStatisticsGenerator()
    proto = gfgs.ProtoFromDataFrames([{"name": "train",
                                      "table": IO_train},
                                     {"name": "test",
                                     "table": IO_test}])
    # für facet Overview ins utf-8 Format konvertieren
    protostr = base64.b64encode(proto.SerializeToString()).decode("utf-8")
    
    #HTML Template erstellen
    #Das Html template erstellen
    HTML_TEMPLATE_ANALYSIS = """
     <script src="https://cdnjs.cloudflare.com/ajax/libs/
    webcomponentsjs/1.3.3/webcomponents-lite.js"></script>
     <link rel="import" href="https://raw.githubusercontent.com/
    PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html" >
     <facets-overview id="elemOverview"></facets-overview>
     <script>
     document.querySelector("#elemOverview").protoInput = "{protostr}";
     </script>"""
    html_analysis = HTML_TEMPLATE_ANALYSIS.format(protostr=protostr)
    return html_analysis

 # Show unprocessed data
 Splitter = Split()
 a, b, c, d = Splitter.IO(df_Machine)
 l = Facet()
 h, j = l.crt_IO_json(a, c, b, d)
 html_analysis = l.Overview(h, j)

它创建一个带空格的 html 字符串：

 html_analysis
 '\n         <script src="https://cdnjs.cloudflare.com/ajax/libs/\n        
 webcomponentsjs/1.3.3/webcomponents-lite.js"></script>\n         <link rel="import" 
 href="https://raw.githubusercontent.com/\n        PAIR-code/facets/1.0.0/facets-dist/facets- 
 jupyter.html" >\n         <facets-overview id="elemOverview"></facets-overview>\n         <script>\n         
 document.querySelector("#elemOverview").protoInput = "CrBrCgV0cmFpbhDM2QcaxQcKC3hfTFZEVF9NZWFuEAEas

如果代码不可读，我会尝试调整代码，在此先感谢

Answer 1

我在 class 之外创建了 HTML_TEMPLATE，现在可以使用了：

HTML_TEMPLATE_ANALYSIS = """
<script src="https://cdnjs.cloudflare.com/ajax/libs/
webcomponentsjs/1.3.3/webcomponents-lite.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/
PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html" >
<facets-overview id="elemOverview"></facets-overview>
<script>
document.querySelector("#elemOverview").protoInput = "{protostr}";
</script>"""

class Facet:
# at first create a jsonable DF to make a Facet Overview
def crt_IO_json(self, training_features, training_output, test_features, 
test_output):
    self.training_features = training_features
    self.training_output = training_output
    self.test_features = test_features
    self.test_output = test_output
    IO_train = training_features.merge(training_output, left_index=True, 
    right_index=True)
    IO_test = test_features.merge(test_output, left_index=True, 
                                  right_index=True)
    return IO_train, IO_test

def Overview(self, IO_train, IO_test):
    gfgs = GenericFeatureStatisticsGenerator()
    proto = gfgs.ProtoFromDataFrames([{"name": "train",
                                  "table": IO_train},
                                 {"name": "test",
                                 "table": IO_test}])
# für facet Overview ins utf-8 Format konvertieren
    protostr = base64.b64encode(proto.SerializeToString()).decode("utf-8")
    return html_analysis

# Show unprocessed data
Splitter = Split()
a, b, c, d = Splitter.IO(df_Machine)
l = Facet()
h, j = l.crt_IO_json(a, c, b, d)
html_analysis = l.Overview(h, j)

生成的 HTML 代码中的空白字段（方面概述）

Blank field in generated HTML code (Facet Overview)

python

facet