Move style to CSS string

app.py

@@ -29,11 +29,30 @@ logger = logging.getLogger(__name__)
 # gr.DataFrame is currently bugged for updating values,
 # so we must use raw HTML.
 # https://github.com/gradio-app/gradio/issues/8160
+css = '''
+.response-table {
+    width: 100%;
+    table-layout: fixed;
+}
+.response-table th, .response-table td {
+    width: 50%;
+}
+.response-table td {
+    font-family: monospace;
+    white-space: pre-wrap;
+    text-align: left;
+    vertical-align: top;
+}
+.highlight {
+    background-color: #90FF90;
+}
+'''
+
 def make_html_table(headers, data):
-    rows = ['<tr>' + ''.join(f'<th style="width: 50%">{h}</th>' for h in headers) + '</tr>\n']
+    rows = ['<tr>' + ''.join(f'<th>{h}</th>' for h in headers) + '</tr>\n']
     for row in data:
-        rows.append('<tr>' + ''.join(f'<td style="width: 50%; font-family: monospace; white-space: pre-wrap; text-align: left; vertical-align: top;">{v}</td>' for v in row) + '</tr>\n')
-    return '<table style="width: 100%; table-layout: fixed">\n' + ''.join(rows) + '</table>\n'
+        rows.append('<tr>' + ''.join(f'<td>{v}</td>' for v in row) + '</tr>\n')
+    return '<table class="response-table">\n' + ''.join(rows) + '</table>\n'
 
 def highlight_prefix(tokens, prefix_len):
     prefix_tokens = tokens[:prefix_len]
@@ -46,11 +65,7 @@ def highlight_prefix(tokens, prefix_len):
     prefix_html = html.escape(s[:s_lcp_len])
     suffix_html = html.escape(s[s_lcp_len:])
 
-    #highlight_style = 'background-color: #FFFFAE;'
-    #highlight_style = 'text-decoration: underline;'
-    highlight_style = 'background-color: #90FF90;'
-
-    return f'<span style="{highlight_style}">{prefix_html}</span>{suffix_html}'
+    return f'<span class="highlight">{prefix_html}</span>{suffix_html}'
 
 def format_response_pair(tokens_a, tokens_b):
     # This is slightly convoluted, so as to properly handle grapheme clusters that span token boundaries.
@@ -176,6 +191,7 @@ demo = gr.Interface(
     outputs=[
         gr.HTML(),
         ],
+    css=css,
     title='All-Prefix-Optimal Coupling',
     description='Try similar prompts to see the effect of the difference between them. '
         f'Model: `{repo_id}`.'