add step 1

.gitignore

@@ -0,0 +1,2 @@
+flagged/
+__pycache__/

app.py

@@ -13,6 +13,7 @@ t2 = torch.arange({n2}).view({dim2})
 (t1 @ t2).shape = {out_shape} 
 
 ```
+
 """
 
 
@@ -52,25 +53,53 @@ def sanitize_dimention(dim):
         )
     return out
 
+def generate_table(n1,dim1,n2,dim2,out_shape,n_dim):
+    makdown_table = ""
+    makdown_table += "| <!-- --> "*n_dim + "|\n" # header
+    makdown_table += "|---"*n_dim + "|\n" # line
+
+    # tensor 1
+    for index in range(n_dim):
+        if index < (n_dim - n1):
+            makdown_table += "| "
+        else:
+            makdown_table += f"| {dim1[index - (n_dim- n2)]}"
+    makdown_table +="|\n"
+    # tensor 2
+    for index in range(n_dim):
+        if index < (n_dim - n2):
+            makdown_table += "| "
+        else:
+            makdown_table += f"| {dim2[index - (n_dim- n2)]}"
+    makdown_table +="|\n"
+    return makdown_table
 
 def predict(dim1, dim2):
     dim1 = sanitize_dimention(dim1)
     dim2 = sanitize_dimention(dim2)
     n1,dim1,n2,dim2,out_shape =  generate_example(dim1, dim2)
+    code =  EXAMPLE_MD.format(
+        n1=str(n1), dim1=str(dim1), n2=str(n2), dim2=str(dim2), out_shape=str(out_shape)
+    )
+    n1 = len(dim1)
+    n2 = len(dim2)
+    n_dim = max(n1,n2)
+    table1 = generate_table(n1,dim1,n2,dim2,out_shape,n_dim)
 
     # TODO 
     # add code exmplanation here
     
-    return EXAMPLE_MD.format(
-        n1=str(n1), dim1=str(dim1), n2=str(n2), dim2=str(dim2), out_shape=str(out_shape)
-    )
+    
+    out = code
+    out+= "\n# Step1 (alignment)" + "\n" + table1
+    return out
 
 
 demo = gr.Interface(
     predict,
     inputs=["text", "text"],
     outputs=["markdown"],
-    examples=[["1,2,3", "5,3,7"], ["1,2,3", "5,2,7"]],
+    examples=[["1,2,3,3,3", "5,3,7"], ["1,2,3", "5,2,7"]],
 )
 
 demo.launch(debug=True)