Create an account


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tut] How I Designed an AI Blog Writing Tool with Streamlit

#1
How I Designed an AI Blog Writing Tool with Streamlit

<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;1217527&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;top&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Rate this post&quot;,&quot;legend&quot;:&quot;5\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;width&quot;:&quot;142.5&quot;,&quot;_legend&quot;:&quot;{score}\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>
<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>Barely four months since OpenAI unleashed <a rel="noreferrer noopener" href="https://blog.finxter.com/best-ideas-on-how-early-adopters-use-chatgpt-to-get-more-done/" data-type="post" data-id="1073442" target="_blank">ChatGPT</a>, a human-behavior-mimicking chatbot that took the community by storm, they recently announced its successor, <a rel="noreferrer noopener" href="https://blog.finxter.com/gpt-4-is-out-a-new-language-model-on-steroids/" data-type="post" data-id="1208854" target="_blank">GPT-4</a>. This development will continue to disrupt the global market and, unfortunately, take the jobs of millions of people.</p>
<p>While it’s a welcome development for ChatGPT users looking to explore the capabilities of AI in their respective fields of human endeavor, the bad news is that ChatGPT-4 is not for free. However, we are yet to see if it could be freely available following Microsoft’s announcement that its recently introduced Bing AI is operating on GPT-4.</p>
<p>Hence, if you are unwilling to commit to a $20 monthly subscription, or you feel ChatGPT-3 is working flawlessly for you, you may be better off with ChatGPT-3. What is more, ChatGPT-4 is no different than its previous GPT model if it’s about taking information from your question and giving you an answer it deems perfect.</p>
<p>The only difference is that it is more accurate and creative, plus the special graphic features that will turn your text into pictures and videos.</p>
<h2>The Purpose of This Tutorial</h2>
<p class="has-global-color-8-background-color has-background">You will benefit from this tutorial if you have not yet learned how to implement the ChatGPT model using Streamlit.</p>
<p>As a Python developer, you have undoubtedly learned to implement ChatGPT in your Python script and have it running in your terminal. So this tutorial will be nothing new to you except for a few things. </p>
<p>Overall, the purpose of this tutorial is threefold:</p>
<ul>
<li>To improve your Python skills.</li>
<li>To demonstrate how to implement the ChatGPT model using Streamlit.</li>
<li>To show you how to use the model to write unique blog articles.</li>
</ul>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f680.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <a href="https://jonaben1-chatgpt-writing-tool-app-1bwhj8.streamlit.app/" data-type="URL" data-id="https://jonaben1-chatgpt-writing-tool-app-1bwhj8.streamlit.app/" target="_blank" rel="noreferrer noopener">Try this app in live demo here.</a></p>
<h2>Creating a Streamlit Dashboard</h2>
<p>Writing a blog article involves a series of steps. First, you have to brainstorm topic ideas based on a selected niche and choose the one you prefer. Then, you outline the sections. In each section, you generate content corresponding to the sections and the topic.</p>
<p>We will try using ChatGPT to automate these tasks. Note that this article is created with ChatGPT-3 in mind. Of course, the principle can be applied to the GPT-4 model.</p>
<p>I usually start with a <code>main()</code> function that will run as soon as we open the app. But in this tutorial, something came before the 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="">import openai
import streamlit as st API_KEY = st.sidebar.text_input('Enter your API key')
openai.api_key = API_KEY
</pre>
</p>
<p>We made provision for our users to use their API key given that we now have a new model with a paid plan. </p>
<p>Not everyone will let others use their paid plan for free. If you have no problem with that, then you are free to include your key in the script. Now comes the <code>main()</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 main(): st.sidebar.header('AI Blog Writing Tool') st.sidebar.info('An AI tool that can generate blog content') st.sidebar.info('Start with the first option\n before you proceed to the next.') op = st.sidebar.selectbox('Steps', ['topics', 'section', 'content']) if op == 'topics': topics() elif op == 'section': section() else: content()
</pre>
<p>Everything is self-explanatory. Each step you select will take you to the function that will be executed. </p>
<p>So, let’s imagine we are writing a blog article with Python programming being the selected niche. We narrow down the niche to data science. </p>
<p>Let’s see if the model can generate blog topics for us. To do so we selected the topic option, triggering a callback 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 topics(): st.header('AI Blog Writing Tool') st.info('To generate blog topic, please follow the pattern given below:') prompt = st.text_area('Write your words', height=50, value='Generate blog topic on data science with Python') if st.button('Send'): st.text(BlogTopics(prompt))
</pre>
<p>The prompt is the question we will feed to the model. It will be sent to the <code>BlogTopics()</code> function. What we feed to the model will help it know what to give as an answer. In the <code>st.text_area()</code> I gave a sample you can use based on your selected niche.</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 BlogTopics(prompt): response = openai.Completion.create( engine="davinci-instruct-beta-v3", prompt=prompt, temperature=0.7, max_tokens=100, top_p=1, frequency_penalty=0, presence_penalty=0 ) return response.choices[0].text
</pre>
<p>.We have to import the <code>openai</code> module to enable this function to run. </p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f9d1-200d-1f4bb.png" alt="?‍?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/how-to-install-openai-in-python/" data-type="post" data-id="1170845" target="_blank" rel="noreferrer noopener">How to Install OpenAI in Python?</a></p>
<p>Notice the model that was used. In one <a href="https://blog.finxter.com/how-i-built-an-openai-powered-web-assistant-with-django/" data-type="post" data-id="1205499" target="_blank" rel="noreferrer noopener">Django application</a>, I used the <code>text-davinci-003</code> model. But in this one, we are using the <code>davinci-instruct-beta-v3</code> model. It’s proven to be an ideal one for generating unique blog content.</p>
<p>The <code>max_tokens</code> is the number of characters we want the model to generate. Blog topics shouldn’t be more than that. For a detailed explanation of the arguments, check <a href="https://towardsdatascience.com/gpt-3-parameters-and-prompt-design-1a595dc56405" data-type="URL" data-id="https://towardsdatascience.com/gpt-3-parameters-and-prompt-design-1a595dc56405" target="_blank" rel="noreferrer noopener">this</a> article.</p>
<p>Let’s now run the app on Streamlit to see the results.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="890" height="501" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-191.png" alt="" class="wp-image-1217576" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-191.png 890w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w, https://blog.finxter.com/wp-content/uplo...68x432.png 768w" sizes="(max-width: 890px) 100vw, 890px" /></figure>
</div>
<p>Wow! Can you see 9 blog topic ideas the ChatGPT model has generated for us? That’s interesting. So, let’s select number 2, How to use Pandas for data analysis. This is now our topic.</p>
<p>The next step is sections. When selected, it calls the callback 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 section(): st.header('AI Blog Writing Tool') st.info('To generate blog section, please follow the pattern given below:') prompt = st.text_area('Write your words', height=50, value='Write blog sections\n\nBlog topic: ') if st.button('Send'): st.text(BlogSections(prompt))
</pre>
<p>Notice what I suggested in the <code>st.text_area()</code> function. You can follow the same pattern. As usual, another function gets executed when the button is pressed.</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 BlogSections(prompt): response = openai.Completion.create( engine="davinci-instruct-beta-v3", prompt=prompt, temperature=0.6, max_tokens=100, top_p=1, frequency_penalty=0, presence_penalty=0 ) return response.choices[0].text
</pre>
<p>This is similar to the <code>BlogTopics()</code> function. So let’s run it and see the results.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="978" height="558" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-192.png" alt="" class="wp-image-1217578" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-192.png 978w, https://blog.finxter.com/wp-content/uplo...00x171.png 300w, https://blog.finxter.com/wp-content/uplo...68x438.png 768w" sizes="(max-width: 978px) 100vw, 978px" /></figure>
</div>
<p>Please note that the results might be different from yours. At times, you may have to run it several times to get what you want. I did that and got ‘Introduction’ as the first section.</p>
<p>Based on the sections, you select one and feed it to the model. Here is the function called when the last step of the <code>main()</code> function is selected.</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 content(): st.header('AI Blog Writing Tool') st.info('To generate blog content, please follow the pattern given below:') prompt = st.text_area('Write your words', height=50, value="Expand the blog section in a professional tone \n\nBlog Topic:\n\nSection:") if st.button('Send'): st.text(BlogContent(prompt))
</pre>
<p>And here is the <code>BlogContent()</code> function. The only difference is the <code>max_tokens</code>.</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 BlogContent(prompt): response = openai.Completion.create( engine="davinci-instruct-beta-v3", prompt=prompt, temperature=0.7, max_tokens=400, top_p=1, frequency_penalty=0, presence_penalty=0 ) return response.choices[0].text</pre>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="980" height="551" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-193.png" alt="" class="wp-image-1217580" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-193.png 980w, https://blog.finxter.com/wp-content/uplo...00x169.png 300w, https://blog.finxter.com/wp-content/uplo...68x432.png 768w" sizes="(max-width: 980px) 100vw, 980px" /></figure>
</div>
<p>Can you see a 400 <code>max_tokens</code> of text have been generated based on the introductory section? The key lies in the prompt you feed to the model. Do the same to all your sections and before long, you will have a unique blog article professionally written by ChatGPT.</p>
<p>Don’t forget to copy each of the text generated.</p>
<h2>Conclusion</h2>
<p>We have taken advantage of advancements in technology, the latest being the invention of ChatGPT, an AI model that mimics human behavior, to write a unique blog article. </p>
<p>You now have at your disposal an AI writing tool you can use for all your blog articles. Check my <a rel="noreferrer noopener" href="https://github.com/finxter/ChatGPT_writing_tool" data-type="URL" data-id="https://github.com/finxter/ChatGPT_writing_tool" target="_blank">GitHub page</a> for the full code. The app is already running on <a href="https://jonaben1-chatgpt-writing-tool-app-1bwhj8.streamlit.app/" data-type="URL" data-id="https://jonaben1-chatgpt-writing-tool-app-1bwhj8.streamlit.app/" target="_blank" rel="noreferrer noopener">Streamlit Cloud</a>. Make sure you check it out. Enjoy your day.</p>
</div>


https://www.sickgaming.net/blog/2023/03/...streamlit/
Reply



Forum Jump:


Users browsing this thread:
3 Guest(s)

Forum software by © MyBB Theme © iAndrew 2016