Use arithmetic-coding description and symmetric Compress/Restore layouts

style.css

@@ -21,7 +21,7 @@ h1 { font-size: 24px !important; font-weight: 600 !important; letter-spacing: -.
 .gradio-container textarea::placeholder { color: #8a9086 !important; }
 .gradio-container textarea:focus { outline: 1px solid #466b4d !important; outline-offset: -1px; }
 #ascii textarea, #decode-code textarea { font-family: ui-monospace, monospace !important; font-size: 13px !important; }
-#ascii textarea { background: #f4f5f1 !important; }
+.result-box textarea { background: #f4f5f1 !important; }
 .action-row { align-items: center !important; gap: 18px !important; }
 .action-row > div { min-width: 180px !important; }
 .limit-note { font-size: 11px; color: #798172; }

ui.py

@@ -67,7 +67,7 @@ def build_demo(compress, decompress):
     with gr.Blocks(title='Text compressor', analytics_enabled=False) as demo:
         gr.HTML('<header class="page-header"><div class="wordmark"><span class="mark">[t]</span>'
                 '<h1>Text compressor</h1></div><span class="model-label">Qwen 3.5 · 35B base · Q8</span>'
-                '</header><p class="intro">Less space. The same text.</p>', apply_default_css=False)
+                '</header><p class="intro">Arithmetic coding for text.</p>', apply_default_css=False)
         with gr.Tabs(elem_id='modes'):
             with gr.Tab('Compress', id='compress'):
                 with gr.Row(elem_classes='editor-row'):
@@ -78,7 +78,7 @@ def build_demo(compress, decompress):
                     with gr.Column(min_width=280):
                         encoded = gr.Textbox(label='Compressed ASCII', lines=10, max_lines=16,
                                              placeholder='Your copyable code appears here.', interactive=False,
-                                             buttons=['copy'], elem_id='ascii')
+                                             buttons=['copy'], elem_id='ascii', elem_classes='result-box')
                 with gr.Row(elem_classes='action-row'):
                     encode_button = gr.Button('Compress text →', variant='primary', min_width=180, scale=0)
                     gr.HTML('<span class="limit-note">8,192 tokens · 64 KiB max</span>', apply_default_css=False)
@@ -87,11 +87,15 @@ def build_demo(compress, decompress):
                 heatmap = gr.HTML('', elem_id='heatmap', js_on_load=TOKEN_JS, apply_default_css=False)
             with gr.Tab('Restore', id='restore'):
                 with gr.Row(elem_classes='editor-row'):
-                    code_input = gr.Textbox(label='Compressed ASCII', lines=10, max_lines=16,
-                                            placeholder='Paste a code from this compressor…', elem_id='decode-code')
-                    restored = gr.Textbox(label='Restored text', lines=10, max_lines=16, interactive=False,
-                                          placeholder='Your original text appears here.', buttons=['copy'])
-                decode_button = gr.Button('Restore text →', variant='primary', min_width=180, scale=0)
+                    with gr.Column(min_width=280):
+                        code_input = gr.Textbox(label='Compressed ASCII', lines=10, max_lines=16,
+                                                placeholder='Paste a code from this compressor…', elem_id='decode-code')
+                    with gr.Column(min_width=280):
+                        restored = gr.Textbox(label='Restored text', lines=10, max_lines=16, interactive=False,
+                                              placeholder='Your original text appears here.', buttons=['copy'],
+                                              elem_classes='result-box')
+                with gr.Row(elem_classes='action-row'):
+                    decode_button = gr.Button('Restore text →', variant='primary', min_width=180, scale=0)
                 decode_status = gr.Markdown(elem_id='decode-status')
                 decode_stats = gr.JSON(visible=False)
         gr.HTML('<footer class="page-footer"><span>Lossless · Copyable ASCII</span>'