Add aligned view tab for rhythm and meter analysis

Added a new "Aligned View" tab that displays rhythm, original text, and meter in a three-row table format with character-to-syllable alignment. The view uses monospace formatting to align rhythm and meter characters with the words in the original text.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -38,6 +38,76 @@ def run_all_transformations(text):
     return combined
 
 
+def create_aligned_table(text):
+    """Create an aligned table with rhythm, original text, and meter"""
+    meter = transform_to_meter(text)
+    rhythm = transform_to_rhythm(text)
+
+    # Split text into syllables (simple word-based splitting for now)
+    words = text.split()
+    rhythm_chars = list(rhythm.replace(" ", ""))
+    meter_chars = list(meter.replace(" ", ""))
+
+    # Build aligned rows
+    rhythm_row = []
+    text_row = []
+    meter_row = []
+
+    rhythm_idx = 0
+    meter_idx = 0
+
+    for word in words:
+        # For each word, try to align rhythm and meter characters
+        word_len = len(word)
+
+        # Get rhythm chars for this word
+        rhythm_segment = ""
+        for _ in range(word_len):
+            if rhythm_idx < len(rhythm_chars):
+                rhythm_segment += rhythm_chars[rhythm_idx]
+                rhythm_idx += 1
+
+        # Get meter chars for this word
+        meter_segment = ""
+        for _ in range(word_len):
+            if meter_idx < len(meter_chars):
+                meter_segment += meter_chars[meter_idx]
+                meter_idx += 1
+
+        # Pad to match word length
+        rhythm_segment = rhythm_segment.ljust(word_len)
+        meter_segment = meter_segment.ljust(word_len)
+
+        rhythm_row.append(rhythm_segment)
+        text_row.append(word)
+        meter_row.append(meter_segment)
+
+    # Join with spaces
+    rhythm_line = " ".join(rhythm_row)
+    text_line = " ".join(text_row)
+    meter_line = " ".join(meter_row)
+
+    # Create HTML table
+    html_table = f"""
+    <table style="font-family: monospace; border-collapse: collapse; width: 100%;">
+        <tr style="border-bottom: 1px solid #ddd;">
+            <td style="padding: 8px;"><strong>Rhythm:</strong></td>
+            <td style="padding: 8px;">{rhythm_line}</td>
+        </tr>
+        <tr style="border-bottom: 1px solid #ddd;">
+            <td style="padding: 8px;"><strong>Original:</strong></td>
+            <td style="padding: 8px;">{text_line}</td>
+        </tr>
+        <tr>
+            <td style="padding: 8px;"><strong>Meter:</strong></td>
+            <td style="padding: 8px;">{meter_line}</td>
+        </tr>
+    </table>
+    """
+
+    return html_table
+
+
 # Create Gradio interface with tabs
 with gr.Blocks() as demo:
     gr.Markdown("# MetricalT5 Model")
@@ -67,4 +137,10 @@ with gr.Blocks() as demo:
         all_button = gr.Button("Run All Transformations")
         all_button.click(run_all_transformations, inputs=all_input, outputs=all_output)
 
+    with gr.Tab("Aligned View"):
+        aligned_input = gr.Textbox(lines=5, placeholder="Enter text here...")
+        aligned_output = gr.HTML(label="Aligned Table")
+        aligned_button = gr.Button("Generate Aligned View")
+        aligned_button.click(create_aligned_table, inputs=aligned_input, outputs=aligned_output)
+
 demo.launch()