01-17-2023, 09:51 AM
How I Built a Readability and Grammar Checker App Using Streamlit
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1058722","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<p>I will show you the steps I took to create a readability and grammar checker app using <a href="https://blog.finxter.com/plotly-dash-vs-streamlit/" data-type="post" data-id="997098" target="_blank" rel="noreferrer noopener">Streamlit</a>. You can use it to improve your programming skills and add to your portfolio.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Info</strong>: Streamlit is a popular open-source app framework among data scientists as it’s used for developing and deploying Machine Learning and Data Science web apps in minutes.</p>
<p>As we will see, Streamlit goes beyond turning data scripts into shareable web apps. Programmers use it to create anything within its capabilities. A quiz app, an anagram app, and a currency converter app are some of them.</p>
<h2>Project Overview</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="587" height="881" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-154.png" alt="" class="wp-image-1062526" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-154.png 587w, https://blog.finxter.com/wp-content/uplo...00x300.png 200w" sizes="(max-width: 587px) 100vw, 587px" /></figure>
</div>
<p>A readability checker tool provides a quick way to assess the readability of a text and how readers can understand your work. This is especially helpful if you are writing a book or a blog and want to know where you need to work to improve readability for various audiences.</p>
<p>The Python ecosystem consists of third-party libraries and frameworks that support a particular application.</p>
<p>There’s no need to reinvent the wheel, as the heavy lifting is already done for us. Hence with a few libraries coupled with a bit of finishing touch from us, we will get our readability and grammar checker app up and running in no distant time.</p>
<p class="has-base-background-color has-background"><strong>Try It! </strong>You can check out my app here: <a rel="noreferrer noopener" href="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" data-type="URL" data-id="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" target="_blank">click this link</a> to view my app live on Streamlit Cloud.</p>
<h2>Prerequisites</h2>
<p>This tutorial assumes nothing more than a basic knowledge of Python programming, including functions, <code>if</code>…<code>else</code>, and <code>for</code> loops.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a rel="noreferrer noopener" href="https://blog.finxter.com/python-crash-course/" data-type="post" data-id="3951" target="_blank">Python Crash Course on the Finxter Blog</a></p>
<p>Although I try my best to explain the procedures, I encourage you to wrap your head around the basics because it’s not every step I have to explain. I expect you to have background knowledge already.</p>
<h2>Importing Libraries</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="696" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-155-1024x696.png" alt="" class="wp-image-1062528" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-155-1024x696.png 1024w, https://blog.finxter.com/wp-content/uplo...00x204.png 300w, https://blog.finxter.com/wp-content/uplo...68x522.png 768w, https://blog.finxter.com/wp-content/uplo...ge-155.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Before we get started, let’s import the libraries we will be using in this project.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import streamlit as st
import textstat as ts
from pdfminer.high_level import extract_text
from pdfminer.layout import LTTextContainer
from io import StringIO
import docx2txt
import requests
from bs4 import BeautifulSoup as bs
import language_tool_python
</pre>
<p>Everything above is self-explanatory. We will use <code>textstat</code> to check the readability of a text. We will also use <code>io</code> to extract text from a TXT document. The library <code>anguage_tool_python</code> will help us check spelling and grammar. I will explain other libraries as we proceed.</p>
<p>Our project is a combination of several functions and callback functions we define, which are all linked together to get the job done. So, without further ado, let’s get started.</p>
<h2>The Main Function</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="759" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-156-1024x759.png" alt="" class="wp-image-1062530" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-156-1024x759.png 1024w, https://blog.finxter.com/wp-content/uplo...00x222.png 300w, https://blog.finxter.com/wp-content/uplo...68x569.png 768w, https://blog.finxter.com/wp-content/uplo...ge-156.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Our project started with what we call the <code>main()</code> function which contains several options that, when selected, caused the execution of another function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def main(): mode = st.sidebar.selectbox('Select your option', ['Text', '.pdf', '.txt', '.docx', 'Online']) # a function is called depending on the mode selected if mode == 'Text': text_result() elif mode == '.pdf': upload_pdf() elif mode == '.txt': upload_txt() elif mode == '.docx': upload_docx() else: get_url()
… if __name__ == '__main__': main()
</pre>
<p>We want to give our app users the option to select what form their document is, whether they want to copy and paste into the textbox or upload an e-book, or even select from a webpage. We call Streamlit to display these options as a sidebar.</p>
<p>At the very last of our script, we set the <code>__name__</code> variable as <code>__main__</code> , which is the <code>main()</code> function. This is to ensure it is running as soon as we open Streamlit, and not run when imported into another program.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/what-does-if-__name__-__main__-do-in-python/" data-type="post" data-id="10260" target="_blank" rel="noreferrer noopener">Python <code>__name__ == '__main__'</code> Explained</a></p>
<h2>The Textbox</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="660" height="881" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-157.png" alt="" class="wp-image-1062532" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-157.png 660w, https://blog.finxter.com/wp-content/uplo...25x300.png 225w" sizes="(max-width: 660px) 100vw, 660px" /></figure>
</div>
<p>If our user selects ‘<code>Text</code>’, the <code>text_result()</code> function will execute. The function calls on Streamlit to display a textbox using <code>st.text_area</code> labeled ‘<code>Text Field</code>’, and the placement stored in the text variable will appear in the textbox.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def text_result(): text = 'Your text goes here...' #displaying the textbox where texts will be written box = st.text_area('Text Field', text, height=200) scan = st.button('Scan File') # if button is pressed if scan: # display statistical results st.write('Text Statistics') st.write(readability_checker(box))
</pre>
<p>The function also calls on Streamlit to insert a <a href="https://blog.finxter.com/learning-streamlits-buttons-features/" data-type="post" data-id="462652" target="_blank" rel="noreferrer noopener">button</a> which when pressed causes Streamlit to display readability results using <code>st.write</code>.</p>
<p>The <code>text_result()</code> function sends your texts in the box variable to a callback function, <code>readability_checker()</code> function, and <code>st.write()</code> displays the result.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def readability_checker(w): stats = dict( flesch_reading_ease=ts.flesch_reading_ease(w), flesch_kincaid_grade=ts.flesch_kincaid_grade(w), automated_readability_index=ts.automated_readability_index(w), smog_index=ts.smog_index(w), coleman_liau_index=ts.coleman_liau_index(w), dale_chall_readability_score=ts.dale_chall_readability_score(w), linsear_write_formula=ts.linsear_write_formula(w), gunning_fog=ts.gunning_fog(w), word_count=ts.lexicon_count(w), difficult_words=ts.difficult_words(w), text_standard=ts.text_standard(w), sentence_count=ts.sentence_count(w), syllable_count=ts.syllable_count(w), reading_time=ts.reading_time(w) ) return stats
</pre>
<p>So what this <code>text_result()</code> does is to accept input and, when prompted, send the input to the <code>readability_checker()</code> function to scan and return results in the form of a dictionary.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/python-dictionary/" data-type="post" data-id="5232">Python Dictionary – Ultimate Guide</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="602" height="339" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-150.png" alt="" class="wp-image-1062480" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-150.png 602w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>
</div>
<p>That’s all it takes to set up our readability checker app. </p>
<p>Had it been we had only this option in our main function, we would have called it a day. But we want to give our users more options to make a choice. But, the more features we add, the more Python scripts we need to write to execute such features.</p>
<h2>PDF Mode</h2>
<p>Back to our <code>main()</code> function. if our users select the <code>pdf</code> option, the <code>upload_pdf()</code> function will execute.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def upload_pdf(): file = st.sidebar.file_uploader('Choose a file', type='pdf') if file is not None: pdf = extract_text(file) #sending the text to textbox document_result(pdf)
</pre>
<p>This function calls Streamlit to produce a file uploader to enable us to upload a PDF file. And when we upload the file, the <code>extract_text()</code> function from <code>pdfminer</code> does the heavy lifting for us. By default, Streamlit accepts all file extensions. By specifying the type, it allows only such.</p>
<h2>The Setback</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="685" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-158-1024x685.png" alt="" class="wp-image-1062535" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-158-1024x685.png 1024w, https://blog.finxter.com/wp-content/uplo...00x201.png 300w, https://blog.finxter.com/wp-content/uplo...68x513.png 768w, https://blog.finxter.com/wp-content/uplo...ge-158.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>I wanted to make this process as seamless as possible. </p>
<p>What I wanted to do was to call on <code>pdfminer</code> library to extract the text, and send it to the <code>readability_checker()</code> which scans and produces the result that will appear using <code>st.write()</code> without ever seeing the content of the file.</p>
<p>I wasn’t able to do so. Hence, I will appreciate anyone who can reach out to <a rel="noreferrer noopener" href="https://www.linkedin.com/in/jonathan-ben-okah-7b507725b" data-type="URL" data-id="https://www.linkedin.com/in/jonathan-ben-okah-7b507725b" target="_blank">me</a> with a solution to this problem.</p>
<h2>A Workaround</h2>
<p>I wasn’t deterred, though. </p>
<p>Since there are so many ways to kill a rat, I found a workaround with a little help from Streamlit. I benefited from Streamlit’s ability to display text as a placement in a textbox, as seen in our <code>text_result()</code> function. </p>
<p>So, I created a function like <code>text_result()</code> but with a parameter that will collect the very text extracted from the PDF file and have it displayed in the textbox.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="602" height="339" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-151.png" alt="" class="wp-image-1062484" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-151.png 602w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>
</div>
<p>Give me a round of applause. That’s my feat of engineering! Alright, let’s implement it.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def document_result(file): #displaying the textbox where texts will be written box = st.text_area('Text Field', file, height=200) scan = st.button('Scan Text') # if button is pressed if scan: # display statistical results st.write('Text Statistics) st.write(readability_checker(box))
</pre>
<p>Make sure you are using the latest version of <code>pdfminer</code> installed using PIP as ‘<code>pip install pdfminer.six</code>’.</p>
<p>Alright, we have passed that setback but have our PDF displayed inside the textbox, which is not bad after all.</p>
<p>The only downside comes from the <code>pdfminer</code> library. It takes time to process bulky files. You may want to try other libraries in your project.</p>
<p>When users choose other options in our <code>main()</code> function, the respective functions get executed in the same way using the libraries imported and send to the <code>document_result()</code> function, which, in turn, passes the file to the <code>readability_checker()</code> to scan. Finally, it displays the result.</p>
<p>You may want to check the documentation to know more about the imported libraries that help to extract the files.</p>
<h2>The ‘Online’ Option</h2>
<p>This option allows our users to check the readability of content found on web pages.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def get_url(): url = st.sidebar.text_input("Paste your url") if url: get_data(url)
</pre>
<p>As usual, when we select the option, it triggers the execution of the <code>get_url()</code> function. </p>
<p>The <code>get_url()</code> function uses <code>st.sidebar.text_input</code> to provide a small-size box where you can paste your URL. Once you hit the Enter key, it sends the URL to the <code>get_data()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def get_data(url): page = requests.get(url) if page.status_code != 200: print('Error fetching page') exit() else: content = page.content soup = bs(content, 'html.parser') document_result(soup.get_text())
</pre>
<p>What the <code>get_data()</code> function is doing is <a href="https://blog.finxter.com/web-scraping-with-beautifulsoup-in-python/" data-type="post" data-id="17311" target="_blank" rel="noreferrer noopener">web scraping</a>. </p>
<p>It requests to get the content of the URL. </p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/how-to-get-an-html-page-from-a-url-in-python/" data-type="post" data-id="27058" target="_blank" rel="noreferrer noopener">How to Get the URL Content in Python</a></p>
<p>If it is successful, it returns the content of the web page. The function then calls the BeautifulSoup library to parse the content in pure HTML form. </p>
<p>Using the <code>get_text()</code> method from BeautifulSoup, the <code>get_data()</code> extracts the content without any HTML tags and sends it to the <code>document_result()</code> function which I have explained before.</p>
<p>The downside of using this option is that it scrapes whatever it sees on the webpage, navigation bar, header, footer, and comments that may not be relevant for readability checking</p>
<h2>Grammar Checker</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="488" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-153-1024x488.png" alt="" class="wp-image-1062522" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-153-1024x488.png 1024w, https://blog.finxter.com/wp-content/uplo...00x143.png 300w, https://blog.finxter.com/wp-content/uplo...68x366.png 768w, https://blog.finxter.com/wp-content/uplo...36x732.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-153.png 1726w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>If you have been following along, you will notice, from the above image, another button besides the readability checker button.</p>
<p>That is our grammar checker button. Alright, let me show you how I did it.</p>
<p>I erased it from the Python scripts above, so we can focus on one thing at a time. The below script is now our updated <code>test_result()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def text_result(): text = 'Your text goes here...' box = st.text_area('Text Field', text, height=200) left, right = st.columns([5, 1]) scan = left.button('Check Readability') grammar = right.button('Check Gramamar') # if button is pressed if scan: # display statistical results st.write('Text Statistics') st.write(readability_checker(box)) elif grammar: st.write(grammar_checker(box))
</pre>
<p>Streamlit’s <code>columns()</code> method enables us to display our buttons side by side. </p>
<p>By passing it a <a href="https://blog.finxter.com/python-lists/" data-type="post" data-id="7332" target="_blank" rel="noreferrer noopener">list</a> of <code>[5, 1]</code>, we specify the position we want the buttons to appear. Also, notice how we used <code>left.button()</code> instead of <code>st.button()</code>. This is because we want to apply the buttons to the position we have specified using the <code>st.columns</code>.</p>
<p>The <code>if</code> statement makes the app look flexible and neat. If we press the grammar checker button, it erases the readability result if it is already there, so it can display the grammar result.</p>
<p>Let us also update the <code>document_result()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def document_result(file): box = st.text_area('Text Field', file, height=200) left, right = st.columns([3, .75]) with left: scan = st.button('Check Readability') with right: grammar = st.button('Check Gramamar') # if button is pressed if scan: # display statistical results st.write('Text Statistics') st.write(readability_checker(box)) elif grammar: st.write(grammar_checker(box))
</pre>
<p>Again, notice another way we use the <code>st.columns</code> to achieve the same result. The ‘<code>with</code>’ notation inserts any element in a specified position. Then comes the <code>grammar_checker()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def grammar_checker(text): tool = language_tool_python.LanguageTool('en-US', config={'maxSpellingSuggestions': 1}) check = tool.check(text) result = [] for i in check: result.append(i) result.append(f'Error in text => {text[i.offset : i.offset + i.errorLength]}') result.append(f'Can be replaced with => {i.replacements}') result.append('--------------------------------------') return result
</pre>
<p>The <code>LanguageTool()</code> function checks grammatical expressions. It comes bundled in <code>language_tool_python</code> module but it’s also used in other programming languages. </p>
<p>To use it, make sure you have <a href="https://blog.finxter.com/java-developer-income-and-opportunity/" data-type="post" data-id="217907" target="_blank" rel="noreferrer noopener">Java</a> installed on your system. Once we call and save it in the tool variable, it will download everything necessary to enable your text checked for American English only. The size is 225MB excluding Java.</p>
<p>This is to enable you to use it offline. To use it online, please check the documentation. We added <code>maxSpellingSuggestions</code> to speed up the checking process, especially when dealing with millions of characters.</p>
<p>We appended to the ‘<code>result</code>’ variable to display it when called by the <code>st.write()</code> function. To know more about how to use the <code>language_tool_python</code> module, please consult the documentation.</p>
<h2>Deployment</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="683" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-159-1024x683.png" alt="" class="wp-image-1062536" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-159-1024x683.png 1024w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w, https://blog.finxter.com/wp-content/uplo...ge-159.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>It would be nice to have our new app visible for others with little or no programming knowledge to see and use. Deploying the app makes that possible</p>
<p>If you want to deploy on Streamlit Cloud, it’s very easy. Set up a GitHub account if you have not already done so. Create and upload files to your GitHub repository.</p>
<p>Then, you set up a Streamlit Cloud account. Create a New App and link your GitHub account. Streamlit will do the rest. </p>
<p>Any changes made will reflect in the app. To avoid encountering errors while deploying your app, go to my GitHub page and observe other files I included to enable easy deployment on Streamlit Cloud.</p>
<h2>Conclusion</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="602" height="339" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-152.png" alt="" class="wp-image-1062512" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-152.png 602w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>
</div>
<p>This is how we come to the end of this tutorial on how I built a readability and grammar checker app using Streamlit. </p>
<p>I explained it in a way you can understand. You can visit my <a rel="noreferrer noopener" href="https://www.github.com/Jonaben1/Readability_Checker" data-type="URL" data-id="https://www.github.com/Jonaben1/Readability_Checker" target="_blank">GitHub</a> page to view the full project. Also, <a rel="noreferrer noopener" href="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" data-type="URL" data-id="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" target="_blank">click this link</a> to view my app live on Streamlit Cloud. Alright, that’s it. Go on, give it a try and create awesome apps.</p>
<h2>References</h2>
<ul>
<li><a rel="noreferrer noopener" href="https://www.linkedin.com/in/jonathan-ben-okah-7b507725b" target="_blank">https://www.linkedin.com/in/jonathan-ben-okah-7b507725b</a></li>
<li><a rel="noreferrer noopener" href="https://www.github.com/Jonaben1/Readability_Checker" target="_blank">https://www.github.com/Jonaben1/Readability_Checker</a></li>
<li><a rel="noreferrer noopener" href="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" target="_blank">https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/</a></li>
</ul>
</div>
https://www.sickgaming.net/blog/2023/01/...streamlit/
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1058722","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<p>I will show you the steps I took to create a readability and grammar checker app using <a href="https://blog.finxter.com/plotly-dash-vs-streamlit/" data-type="post" data-id="997098" target="_blank" rel="noreferrer noopener">Streamlit</a>. You can use it to improve your programming skills and add to your portfolio.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Info</strong>: Streamlit is a popular open-source app framework among data scientists as it’s used for developing and deploying Machine Learning and Data Science web apps in minutes.</p>
<p>As we will see, Streamlit goes beyond turning data scripts into shareable web apps. Programmers use it to create anything within its capabilities. A quiz app, an anagram app, and a currency converter app are some of them.</p>
<h2>Project Overview</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="587" height="881" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-154.png" alt="" class="wp-image-1062526" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-154.png 587w, https://blog.finxter.com/wp-content/uplo...00x300.png 200w" sizes="(max-width: 587px) 100vw, 587px" /></figure>
</div>
<p>A readability checker tool provides a quick way to assess the readability of a text and how readers can understand your work. This is especially helpful if you are writing a book or a blog and want to know where you need to work to improve readability for various audiences.</p>
<p>The Python ecosystem consists of third-party libraries and frameworks that support a particular application.</p>
<p>There’s no need to reinvent the wheel, as the heavy lifting is already done for us. Hence with a few libraries coupled with a bit of finishing touch from us, we will get our readability and grammar checker app up and running in no distant time.</p>
<p class="has-base-background-color has-background"><strong>Try It! </strong>You can check out my app here: <a rel="noreferrer noopener" href="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" data-type="URL" data-id="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" target="_blank">click this link</a> to view my app live on Streamlit Cloud.</p>
<h2>Prerequisites</h2>
<p>This tutorial assumes nothing more than a basic knowledge of Python programming, including functions, <code>if</code>…<code>else</code>, and <code>for</code> loops.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a rel="noreferrer noopener" href="https://blog.finxter.com/python-crash-course/" data-type="post" data-id="3951" target="_blank">Python Crash Course on the Finxter Blog</a></p>
<p>Although I try my best to explain the procedures, I encourage you to wrap your head around the basics because it’s not every step I have to explain. I expect you to have background knowledge already.</p>
<h2>Importing Libraries</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="696" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-155-1024x696.png" alt="" class="wp-image-1062528" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-155-1024x696.png 1024w, https://blog.finxter.com/wp-content/uplo...00x204.png 300w, https://blog.finxter.com/wp-content/uplo...68x522.png 768w, https://blog.finxter.com/wp-content/uplo...ge-155.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Before we get started, let’s import the libraries we will be using in this project.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import streamlit as st
import textstat as ts
from pdfminer.high_level import extract_text
from pdfminer.layout import LTTextContainer
from io import StringIO
import docx2txt
import requests
from bs4 import BeautifulSoup as bs
import language_tool_python
</pre>
<p>Everything above is self-explanatory. We will use <code>textstat</code> to check the readability of a text. We will also use <code>io</code> to extract text from a TXT document. The library <code>anguage_tool_python</code> will help us check spelling and grammar. I will explain other libraries as we proceed.</p>
<p>Our project is a combination of several functions and callback functions we define, which are all linked together to get the job done. So, without further ado, let’s get started.</p>
<h2>The Main Function</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="759" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-156-1024x759.png" alt="" class="wp-image-1062530" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-156-1024x759.png 1024w, https://blog.finxter.com/wp-content/uplo...00x222.png 300w, https://blog.finxter.com/wp-content/uplo...68x569.png 768w, https://blog.finxter.com/wp-content/uplo...ge-156.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>Our project started with what we call the <code>main()</code> function which contains several options that, when selected, caused the execution of another function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def main(): mode = st.sidebar.selectbox('Select your option', ['Text', '.pdf', '.txt', '.docx', 'Online']) # a function is called depending on the mode selected if mode == 'Text': text_result() elif mode == '.pdf': upload_pdf() elif mode == '.txt': upload_txt() elif mode == '.docx': upload_docx() else: get_url()
… if __name__ == '__main__': main()
</pre>
<p>We want to give our app users the option to select what form their document is, whether they want to copy and paste into the textbox or upload an e-book, or even select from a webpage. We call Streamlit to display these options as a sidebar.</p>
<p>At the very last of our script, we set the <code>__name__</code> variable as <code>__main__</code> , which is the <code>main()</code> function. This is to ensure it is running as soon as we open Streamlit, and not run when imported into another program.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/what-does-if-__name__-__main__-do-in-python/" data-type="post" data-id="10260" target="_blank" rel="noreferrer noopener">Python <code>__name__ == '__main__'</code> Explained</a></p>
<h2>The Textbox</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="660" height="881" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-157.png" alt="" class="wp-image-1062532" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-157.png 660w, https://blog.finxter.com/wp-content/uplo...25x300.png 225w" sizes="(max-width: 660px) 100vw, 660px" /></figure>
</div>
<p>If our user selects ‘<code>Text</code>’, the <code>text_result()</code> function will execute. The function calls on Streamlit to display a textbox using <code>st.text_area</code> labeled ‘<code>Text Field</code>’, and the placement stored in the text variable will appear in the textbox.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def text_result(): text = 'Your text goes here...' #displaying the textbox where texts will be written box = st.text_area('Text Field', text, height=200) scan = st.button('Scan File') # if button is pressed if scan: # display statistical results st.write('Text Statistics') st.write(readability_checker(box))
</pre>
<p>The function also calls on Streamlit to insert a <a href="https://blog.finxter.com/learning-streamlits-buttons-features/" data-type="post" data-id="462652" target="_blank" rel="noreferrer noopener">button</a> which when pressed causes Streamlit to display readability results using <code>st.write</code>.</p>
<p>The <code>text_result()</code> function sends your texts in the box variable to a callback function, <code>readability_checker()</code> function, and <code>st.write()</code> displays the result.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def readability_checker(w): stats = dict( flesch_reading_ease=ts.flesch_reading_ease(w), flesch_kincaid_grade=ts.flesch_kincaid_grade(w), automated_readability_index=ts.automated_readability_index(w), smog_index=ts.smog_index(w), coleman_liau_index=ts.coleman_liau_index(w), dale_chall_readability_score=ts.dale_chall_readability_score(w), linsear_write_formula=ts.linsear_write_formula(w), gunning_fog=ts.gunning_fog(w), word_count=ts.lexicon_count(w), difficult_words=ts.difficult_words(w), text_standard=ts.text_standard(w), sentence_count=ts.sentence_count(w), syllable_count=ts.syllable_count(w), reading_time=ts.reading_time(w) ) return stats
</pre>
<p>So what this <code>text_result()</code> does is to accept input and, when prompted, send the input to the <code>readability_checker()</code> function to scan and return results in the form of a dictionary.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/python-dictionary/" data-type="post" data-id="5232">Python Dictionary – Ultimate Guide</a></p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="602" height="339" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-150.png" alt="" class="wp-image-1062480" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-150.png 602w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>
</div>
<p>That’s all it takes to set up our readability checker app. </p>
<p>Had it been we had only this option in our main function, we would have called it a day. But we want to give our users more options to make a choice. But, the more features we add, the more Python scripts we need to write to execute such features.</p>
<h2>PDF Mode</h2>
<p>Back to our <code>main()</code> function. if our users select the <code>pdf</code> option, the <code>upload_pdf()</code> function will execute.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def upload_pdf(): file = st.sidebar.file_uploader('Choose a file', type='pdf') if file is not None: pdf = extract_text(file) #sending the text to textbox document_result(pdf)
</pre>
<p>This function calls Streamlit to produce a file uploader to enable us to upload a PDF file. And when we upload the file, the <code>extract_text()</code> function from <code>pdfminer</code> does the heavy lifting for us. By default, Streamlit accepts all file extensions. By specifying the type, it allows only such.</p>
<h2>The Setback</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="685" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-158-1024x685.png" alt="" class="wp-image-1062535" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-158-1024x685.png 1024w, https://blog.finxter.com/wp-content/uplo...00x201.png 300w, https://blog.finxter.com/wp-content/uplo...68x513.png 768w, https://blog.finxter.com/wp-content/uplo...ge-158.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>I wanted to make this process as seamless as possible. </p>
<p>What I wanted to do was to call on <code>pdfminer</code> library to extract the text, and send it to the <code>readability_checker()</code> which scans and produces the result that will appear using <code>st.write()</code> without ever seeing the content of the file.</p>
<p>I wasn’t able to do so. Hence, I will appreciate anyone who can reach out to <a rel="noreferrer noopener" href="https://www.linkedin.com/in/jonathan-ben-okah-7b507725b" data-type="URL" data-id="https://www.linkedin.com/in/jonathan-ben-okah-7b507725b" target="_blank">me</a> with a solution to this problem.</p>
<h2>A Workaround</h2>
<p>I wasn’t deterred, though. </p>
<p>Since there are so many ways to kill a rat, I found a workaround with a little help from Streamlit. I benefited from Streamlit’s ability to display text as a placement in a textbox, as seen in our <code>text_result()</code> function. </p>
<p>So, I created a function like <code>text_result()</code> but with a parameter that will collect the very text extracted from the PDF file and have it displayed in the textbox.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="602" height="339" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-151.png" alt="" class="wp-image-1062484" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-151.png 602w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>
</div>
<p>Give me a round of applause. That’s my feat of engineering! Alright, let’s implement it.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def document_result(file): #displaying the textbox where texts will be written box = st.text_area('Text Field', file, height=200) scan = st.button('Scan Text') # if button is pressed if scan: # display statistical results st.write('Text Statistics) st.write(readability_checker(box))
</pre>
<p>Make sure you are using the latest version of <code>pdfminer</code> installed using PIP as ‘<code>pip install pdfminer.six</code>’.</p>
<p>Alright, we have passed that setback but have our PDF displayed inside the textbox, which is not bad after all.</p>
<p>The only downside comes from the <code>pdfminer</code> library. It takes time to process bulky files. You may want to try other libraries in your project.</p>
<p>When users choose other options in our <code>main()</code> function, the respective functions get executed in the same way using the libraries imported and send to the <code>document_result()</code> function, which, in turn, passes the file to the <code>readability_checker()</code> to scan. Finally, it displays the result.</p>
<p>You may want to check the documentation to know more about the imported libraries that help to extract the files.</p>
<h2>The ‘Online’ Option</h2>
<p>This option allows our users to check the readability of content found on web pages.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def get_url(): url = st.sidebar.text_input("Paste your url") if url: get_data(url)
</pre>
<p>As usual, when we select the option, it triggers the execution of the <code>get_url()</code> function. </p>
<p>The <code>get_url()</code> function uses <code>st.sidebar.text_input</code> to provide a small-size box where you can paste your URL. Once you hit the Enter key, it sends the URL to the <code>get_data()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def get_data(url): page = requests.get(url) if page.status_code != 200: print('Error fetching page') exit() else: content = page.content soup = bs(content, 'html.parser') document_result(soup.get_text())
</pre>
<p>What the <code>get_data()</code> function is doing is <a href="https://blog.finxter.com/web-scraping-with-beautifulsoup-in-python/" data-type="post" data-id="17311" target="_blank" rel="noreferrer noopener">web scraping</a>. </p>
<p>It requests to get the content of the URL. </p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f449.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended Tutorial</strong>: <a href="https://blog.finxter.com/how-to-get-an-html-page-from-a-url-in-python/" data-type="post" data-id="27058" target="_blank" rel="noreferrer noopener">How to Get the URL Content in Python</a></p>
<p>If it is successful, it returns the content of the web page. The function then calls the BeautifulSoup library to parse the content in pure HTML form. </p>
<p>Using the <code>get_text()</code> method from BeautifulSoup, the <code>get_data()</code> extracts the content without any HTML tags and sends it to the <code>document_result()</code> function which I have explained before.</p>
<p>The downside of using this option is that it scrapes whatever it sees on the webpage, navigation bar, header, footer, and comments that may not be relevant for readability checking</p>
<h2>Grammar Checker</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="488" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-153-1024x488.png" alt="" class="wp-image-1062522" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-153-1024x488.png 1024w, https://blog.finxter.com/wp-content/uplo...00x143.png 300w, https://blog.finxter.com/wp-content/uplo...68x366.png 768w, https://blog.finxter.com/wp-content/uplo...36x732.png 1536w, https://blog.finxter.com/wp-content/uplo...ge-153.png 1726w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>If you have been following along, you will notice, from the above image, another button besides the readability checker button.</p>
<p>That is our grammar checker button. Alright, let me show you how I did it.</p>
<p>I erased it from the Python scripts above, so we can focus on one thing at a time. The below script is now our updated <code>test_result()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def text_result(): text = 'Your text goes here...' box = st.text_area('Text Field', text, height=200) left, right = st.columns([5, 1]) scan = left.button('Check Readability') grammar = right.button('Check Gramamar') # if button is pressed if scan: # display statistical results st.write('Text Statistics') st.write(readability_checker(box)) elif grammar: st.write(grammar_checker(box))
</pre>
<p>Streamlit’s <code>columns()</code> method enables us to display our buttons side by side. </p>
<p>By passing it a <a href="https://blog.finxter.com/python-lists/" data-type="post" data-id="7332" target="_blank" rel="noreferrer noopener">list</a> of <code>[5, 1]</code>, we specify the position we want the buttons to appear. Also, notice how we used <code>left.button()</code> instead of <code>st.button()</code>. This is because we want to apply the buttons to the position we have specified using the <code>st.columns</code>.</p>
<p>The <code>if</code> statement makes the app look flexible and neat. If we press the grammar checker button, it erases the readability result if it is already there, so it can display the grammar result.</p>
<p>Let us also update the <code>document_result()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def document_result(file): box = st.text_area('Text Field', file, height=200) left, right = st.columns([3, .75]) with left: scan = st.button('Check Readability') with right: grammar = st.button('Check Gramamar') # if button is pressed if scan: # display statistical results st.write('Text Statistics') st.write(readability_checker(box)) elif grammar: st.write(grammar_checker(box))
</pre>
<p>Again, notice another way we use the <code>st.columns</code> to achieve the same result. The ‘<code>with</code>’ notation inserts any element in a specified position. Then comes the <code>grammar_checker()</code> function.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">def grammar_checker(text): tool = language_tool_python.LanguageTool('en-US', config={'maxSpellingSuggestions': 1}) check = tool.check(text) result = [] for i in check: result.append(i) result.append(f'Error in text => {text[i.offset : i.offset + i.errorLength]}') result.append(f'Can be replaced with => {i.replacements}') result.append('--------------------------------------') return result
</pre>
<p>The <code>LanguageTool()</code> function checks grammatical expressions. It comes bundled in <code>language_tool_python</code> module but it’s also used in other programming languages. </p>
<p>To use it, make sure you have <a href="https://blog.finxter.com/java-developer-income-and-opportunity/" data-type="post" data-id="217907" target="_blank" rel="noreferrer noopener">Java</a> installed on your system. Once we call and save it in the tool variable, it will download everything necessary to enable your text checked for American English only. The size is 225MB excluding Java.</p>
<p>This is to enable you to use it offline. To use it online, please check the documentation. We added <code>maxSpellingSuggestions</code> to speed up the checking process, especially when dealing with millions of characters.</p>
<p>We appended to the ‘<code>result</code>’ variable to display it when called by the <code>st.write()</code> function. To know more about how to use the <code>language_tool_python</code> module, please consult the documentation.</p>
<h2>Deployment</h2>
<div class="wp-block-image">
<figure class="aligncenter size-large"><img decoding="async" loading="lazy" width="1024" height="683" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-159-1024x683.png" alt="" class="wp-image-1062536" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-159-1024x683.png 1024w, https://blog.finxter.com/wp-content/uplo...00x200.png 300w, https://blog.finxter.com/wp-content/uplo...68x512.png 768w, https://blog.finxter.com/wp-content/uplo...ge-159.png 1113w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</div>
<p>It would be nice to have our new app visible for others with little or no programming knowledge to see and use. Deploying the app makes that possible</p>
<p>If you want to deploy on Streamlit Cloud, it’s very easy. Set up a GitHub account if you have not already done so. Create and upload files to your GitHub repository.</p>
<p>Then, you set up a Streamlit Cloud account. Create a New App and link your GitHub account. Streamlit will do the rest. </p>
<p>Any changes made will reflect in the app. To avoid encountering errors while deploying your app, go to my GitHub page and observe other files I included to enable easy deployment on Streamlit Cloud.</p>
<h2>Conclusion</h2>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="602" height="339" src="https://blog.finxter.com/wp-content/uploads/2023/01/image-152.png" alt="" class="wp-image-1062512" srcset="https://blog.finxter.com/wp-content/uploads/2023/01/image-152.png 602w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>
</div>
<p>This is how we come to the end of this tutorial on how I built a readability and grammar checker app using Streamlit. </p>
<p>I explained it in a way you can understand. You can visit my <a rel="noreferrer noopener" href="https://www.github.com/Jonaben1/Readability_Checker" data-type="URL" data-id="https://www.github.com/Jonaben1/Readability_Checker" target="_blank">GitHub</a> page to view the full project. Also, <a rel="noreferrer noopener" href="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" data-type="URL" data-id="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" target="_blank">click this link</a> to view my app live on Streamlit Cloud. Alright, that’s it. Go on, give it a try and create awesome apps.</p>
<h2>References</h2>
<ul>
<li><a rel="noreferrer noopener" href="https://www.linkedin.com/in/jonathan-ben-okah-7b507725b" target="_blank">https://www.linkedin.com/in/jonathan-ben-okah-7b507725b</a></li>
<li><a rel="noreferrer noopener" href="https://www.github.com/Jonaben1/Readability_Checker" target="_blank">https://www.github.com/Jonaben1/Readability_Checker</a></li>
<li><a rel="noreferrer noopener" href="https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/" target="_blank">https://jonaben1-readability-checker-checker-3p9zie.streamlit.app/</a></li>
</ul>
</div>
https://www.sickgaming.net/blog/2023/01/...streamlit/