Add examples and article.md

app.py

@@ -31,13 +31,41 @@ def process_image(image):
 
     return generated_text
 
-title = "Interactive demo: latex-ocr"
-description = "Demo for latex-ocr, a machine learning model to parse an image of equation and attempt to find the LaTeX source code that generated it. To use it, simply upload an image or use the example image below and click 'submit'. Results will show up in a few seconds."
-article = "<p style='text-align: center'>Made by Young Ho Shin<a href='https://www.github.com/yhshin11'>Github</a> | <a href='https://github.com/microsoft/unilm/tree/master/trocr'>Github Repo</a></p>"
-examples =[["examples/image_0.png"], ["image_1.png"], ["image_2.png"]]
+# !ls examples | grep png
+
+# +
+title = "Convert an image of an equation to LaTeX source code"
+
+with open('article.md',mode='r') as file:
+    article = file.read()
+
+description = """
+This is a demo of machine learning model trained to parse an image and reconstruct the LaTeX source code of an equation.
+To use it, simply upload an image or use one of the example images below and click 'submit'.
+Results will show up in a few seconds.
+
+Try rendering the equation [here](https://quicklatex.com/) to compare with the original image.
+(The model is not perfect yet, so you may need to edit the resulting LaTeX a bit to get it to render a good match.)
+
+"""
+
+examples = [
+    [ "examples/1d32874f02.png" ],
+    [ "examples/1e466b180d.png" ],
+    [ "examples/2d3503f427.png" ],
+    [ "examples/2f9d3c4e43.png" ],
+    [ "examples/51c5cc2ff5.png" ],
+    [ "examples/545a492388.png" ],
+    [ "examples/6a51a30502.png" ],
+    [ "examples/6bf6832adb.png" ],
+    [ "examples/7afdeff0e6.png" ],
+    [ "examples/b8f1e64b1f.png" ],
+]
+#examples =[["examples/image_0.png"], ["image_1.png"], ["image_2.png"]]
+# -
 
 iface = gr.Interface(fn=process_image, 
-                     inputs=gr.inputs.Image(type="pil"), 
+                     inputs=[gr.inputs.Image(type="pil")],
                      outputs=gr.outputs.Textbox(),
                      title=title,
                      description=description,

article.md

@@ -0,0 +1,48 @@
+## What's the point of this?
+
+LaTeX is the de-facto standard markup language for typesetting pretty equations in academic papers.
+It is extremely feature rich and flexible but very verbose.
+This makes it great for typesetting complex equations, but not very convenient for quick note-taking on the fly.
+
+For example, here's a short equation from [this page](https://en.wikipedia.org/wiki/Quantum_electrodynamics) on Wikipedia about Quantum Electrodynamics
+and the corresponding LaTeX code:
+
+![Example]( https://wikimedia.org/api/rest_v1/media/math/render/svg/6faab1adbb88a567a52e55b2012e836a011a0675 )
+
+```
+{\displaystyle {\mathcal {L}}={\bar {\psi }}(i\gamma ^{\mu }D_{\mu }-m)\psi -{\frac {1}{4}}F_{\mu \nu }F^{\mu \nu },}
+```
+
+
+This demo is a first step in solving that problem.
+Eventually, you'll be able to take a quick screenshot of an equation from a paper
+and a program built with this model will generate its corresponding LaTeX source code
+so that you can just copy/paste straight into your personal notes.
+No more endless googling obscure LaTeX syntax!
+
+## How does it work?
+
+Because this problem involves looking at an image and generating valid LaTeX code,
+the model needs to understand both Computer Vision (CV) and Natural Language Processing (NLP).
+There are some other projects that aim to solve the same problem with some very interesting architectures
+that generally involve some kind of "encoder" that looks at the image and extracts and encodes the information about the equation from the image,
+and a "decoder" that takes that information and translates it into what is hopefully both valid and accurate LaTeX code.
+
+Examples:
+...
+
+I chose to tackle this problem with transfer learning.
+The biggest reason for this is computing constraints - 
+I don't have unlimited access to GPU hours and wanted training to be reasonably fast, on the order of a couple of hours.
+There are some other benefits to this approach,
+e.g. the architecture is already proven to be robust enough for various applications, so less time spent on trial and error.
+
+I chose TrOCR, an OCR machine learning model trained by Microsoft on SRIOE data to produce text from receipts.
+
+<p style='text-align: center'>Made by Young Ho Shin</p>
+<p style='text-align: center'>
+<a href = "mailto: yhshin.data@gmail.com">Email</a> |
+<a href='https://www.github.com/yhshin11'>Github</a> | 
+<a href='https://www.linkedin.com/in/young-ho-shin-3995051b9/'>Linkedin</a>
+ 
+</p>

tokenizer-wordlevel.json

@@ -349,4 +349,4 @@
     },
     "unk_token": "[UNK]"
   }
-}
+}