App Development Archives - Be on the Right Side of Change https://blog.finxter.com/category/app-development/ Sun, 28 Apr 2024 14:15:30 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://blog.finxter.com/wp-content/uploads/2020/08/cropped-cropped-finxter_nobackground-32x32.png App Development Archives - Be on the Right Side of Change https://blog.finxter.com/category/app-development/ 32 32 Creating a Live Bitcoin Price Chart Using Binance API (No API Key!) https://blog.finxter.com/creating-a-live-bitcoin-price-chart-using-binance-api-no-api-key/ Sun, 28 Apr 2024 14:14:46 +0000 https://blog.finxter.com/?p=1670164 In this tutorial, we’ll learn how to create a simple live-updating Bitcoin price chart using the Binance API. This straightforward guide will cover all the necessary HTML, JavaScript, and CSS code required to get started with real-time cryptocurrency price tracking. You don’t need much for this tutorial: ✅ We’ll create a single HTML document that ... Read more

The post Creating a Live Bitcoin Price Chart Using Binance API (No API Key!) appeared first on Be on the Right Side of Change.

]]> In this tutorial, we’ll learn how to create a simple live-updating Bitcoin price chart using the Binance API. This straightforward guide will cover all the necessary HTML, JavaScript, and CSS code required to get started with real-time cryptocurrency price tracking.

You don’t need much for this tutorial: ✅

  1. Basic understanding of HTML, CSS, and JavaScript.
  2. A modern web browser.

We’ll create a single HTML document that includes inline JavaScript and CSS. This approach ensures that you can easily copy, paste, and run the example without managing multiple files.

📈 Execution: To run the Bitcoin price checker, copy the entire HTML code into a file with a .html extension. Open this file in any modern web browser to see the live Bitcoin price updating every few seconds.

You can see it live right here:

Live Bitcoin Price Chart

Here’s the full HTML document with embedded CSS and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Bitcoin Price Chart</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #chartContainer {
            height: 300px;
            width: 100%;
            margin: 20px auto;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="chartContainer"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>
        let priceDataPoints = [];

        function updateChartData() {
            fetch('https://api.binance.com/api/v3/ticker/price?symbol=BTCUSDT')
                .then(response => response.json())
                .then(data => {
                    const btcPrice = parseFloat(data.price);
                    const currentTime = new Date();
                    priceDataPoints.push({ x: currentTime, y: btcPrice });
                    if (priceDataPoints.length > 20) {
                        priceDataPoints.shift();
                    }
                    updateChart();
                }).catch(error => console.error("Error fetching BTC price:", error));
        }

        function updateChart() {
            let chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "Live Bitcoin Price"
                },
                axisX: {
                    title: "Time",
                    valueFormatString: "HH:mm:ss",
                    labelAngle: -30
                },
                axisY: {
                    title: "Price (USD)",
                    includeZero: false,
                    prefix: "$"
                },
                data: [{
                    type: "line",
                    xValueType: "dateTime",
                    dataPoints: priceDataPoints
                }]
            });
            chart.render();
        }

        updateChartData(); // Initial call to populate the chart
        setInterval(updateChartData, 5000); // Update chart every 5 seconds
    </script>
</body>
</html>

The code works as follows:

HTML Structure: We have a div element where the chart will be displayed.

CSS Styling: Simple styles are applied to ensure the chart container is visually defined.

JavaScript for Live Data:

  • Fetching Data: The JavaScript uses the fetch API to pull live Bitcoin prices from Binance’s public API endpoint.
  • Updating the Chart: We use CanvasJS (a third-party library) to render the price chart. New data points are added every 5 seconds, and the oldest data points are removed to keep the chart clean and readable.
  • CanvasJS Library: This is a powerful and easy-to-use chart library, which we include from a CDN. It simplifies drawing the live chart.

The post Creating a Live Bitcoin Price Chart Using Binance API (No API Key!) appeared first on Be on the Right Side of Change.

]]> How I Created a Calculator App Using Django – Part 3 https://blog.finxter.com/how-i-created-a-calculator-app-using-django-part-3/ Thu, 22 Jun 2023 09:27:19 +0000 https://blog.finxter.com/?p=1455197 We have finished designing the calculator app. Using a hypertext markup language (HTML), we set the structure of the calculator. The Cascading Style Sheet (CSS) was used to beautify the calculator and to design the layout. Finally, we used JavaScript to make the app interact with other buttons and perform basic calculations. Our task is ... Read more

The post How I Created a Calculator App Using Django – Part 3 appeared first on Be on the Right Side of Change.

]]> We have finished designing the calculator app. Using a hypertext markup language (HTML), we set the structure of the calculator. The Cascading Style Sheet (CSS) was used to beautify the calculator and to design the layout. Finally, we used JavaScript to make the app interact with other buttons and perform basic calculations.

Our task is done but there is a problem. Throughout the development stage, we used a text editor to write our code and to observe what we were doing on a browser, we copied the path to the file and pasted it to the address bar.

Without doing this, we cannot see the calculator app.

Furthermore, if we were to call it a day, how then will we include Python language as part of learning Python through building projects? Just as we mentioned in the first part of this project tutorial, we will use Django, a Python framework, to host this app.

Django Setup

We have a lot to do on the terminal to set up Django. We start by creating a separate folder for this project, activating a virtual environment and installing Django.

mkdir project && cd project
python3 -m venv .venv
source .venv/bin/activate
pip install django tzdata

Next, we start Django project and Django app.

django-admin startproject operation .
python3 manage.py startapp calculator

At this stage, you are expected to have these files in your folder:

README.md  calculator  index.html  manage.py  operation  script.js  styles.css

Next, we create templates and static folders. Inside the static folder, we create two additional folders for JavaScript and CSS.

mkdir -p templates static/js static/css

Making changes in the settings file

We now head over to the settings.py file to inform Django of what we have done. Inside the file, start by adding the newly created app in the INSTALLED_APPS section.

INSTALLED_APPS = [
    …
    # custom app
    'calculator',
]

Next, import the os module and go to the TEMPLATES section to make this one-line change.

TEMPLATES = [
…
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
…
]

We have static files. To tell Django where to look for these static files, go to the bottom of the file just below the STATIC_URL, and also make this one-line change.

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Next, in your project-level URL, make this change:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('calculator.urls')),
]

On the terminal, rename the CSS file and move the template and static files to their rightful place.

mv styles.css base.css
mv index.html templates

mv base.css static/css/

mv script.js static/js/

This is how your project folder is expected to be:

README.md  calculator  manage.py  operation  static  templates

Making changes to the Markup file

Next, open your index.html. Load the static files at the top like this:

{% load static %}

Adjust the link that points to the CSS file to be like this:

    <link rel="stylesheet" href="{% static 'css/base.css' %}">

The script tag for the JavaScript will also be like this:

<script src="{% static 'js/script.js' %}”></script>

The view function and the app-level URL

To view the calculator app on the local server, we have to create a view function and render it.

The view function is quite simple:

from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

For the app-level URL, create a urls.py file inside the app folder.

from django.urls import path
from .views import index


urlpatterns = [
    path('', index, name='home'),
]

That’s all. We can now start the local server.

python3 manage.py migrate
python3 manage.py runserver

A little addition

Let’s extend this calculator app to include a digital clock so that as we are performing calculations, we can be observing the time as well. Add this to the index.html file just after the <body> tag:

{% block top %} {% include 'clock.html' %} {% endblock top %}

I want to adhere to the principle of separation of concern. Hence, we will create a separate file for the clock and include it in the index.html file. Note the block keyword: top. It can be any word of your choice. I use it to indicate that I want the clock to appear at the top of the calculator.

Everything is going to be on a separate file. So, since we are still in the index.html file, include the link to the CSS and JavaScript files.

<link rel="stylesheet" href="{% static 'css/clock.css' %}">
<script src="{% static 'js/clock.js' %}"></script>

Now, create a clock.html file inside the templates folder.

{% block top %}

<div id="MyClockDisplay" class="clock"></div>

{% endblock top %}

That’s all the markup we need. The rest will be done with JavaScript. Notice how we make sure this markup appears in the index.html file by wrapping the code inside the block statements.

Next is the CSS file. It will go inside the css folder.

.clock {
  position: absolute;
  top: 10%;
  left: 45%;
  transform: translateX(-50%) translateY(-50%);
  color: #17d4fe;
  font-size: 60px;
  font-family: Times New Roman;
  letter-spacing: 7px;
}

We have explained some of these in the first part series of this project article. We use the class clock to style the HTML element. The absolute position positions the element to its nearest ancestor. Otherwise, it positions the element to its initial block.

I use the top and left properties (10% away from the top edge and 45% away from the left edge) to make sure the digital clock rest on top of the calculator. The transform property also makes sure the element is centered horizontally and vertically.

Next is JavaScript. This will display the clock and make it tick.

window.onload = function showTime(){
  let date = new Date(),
      h = date.getHours(),
      m = date.getMinutes(),
      s = date.getSeconds(),
      session = 'AM';

  if (h == 0){
    h = 12;
  }

  if (h > 12){
    h -=  12;
    session = 'PM';
  }

  h = (h < 10) ? '0' + h : h;
  m = (m < 10) ? '0' + m : m;
  s = (s < 10) ? '0' + s : s;

  let time = h + ':' + m + ':' + s + ' ' + session;

  document.getElementById('MyClockDisplay').innerHTML = time;

  setTimeout(showTime, 1000);
}

showTime();

The window.onload makes sure that the page is loaded before any JavaScript code is run. Inside the showTime() function, we create a date object and using its get methods assign the seconds, minutes and hours in local time to a variable.

If the hour is equal to 0 (i.e., midnight), it is set to 12 to avoid the use of 24-hour time. If the hour is greater than 12 (i.e., in the afternoon), 12 is subtracted from it and the value of session initially set to ‘AM’ is set to ‘PM’.

The function then checks if the hours, minutes, and seconds are less than 10. If they are, a ‘0’ is added before them to ensure that they always have two digits. It then formats the time and stores it in a variable, time.

Using the .innerHTML of the element, we display the current time on the page. Finally, the function calls itself every 1 second to update the time.

Conclusion

This is the end of this project tutorial on creating a calculator app. The project focuses on how to use JavaScript to interact with the DOM. As an extension, we demonstrated how to add a digital clock to be displayed on the calculator app.

No doubt, you have learned a lot from this project tutorial. Use this knowledge to create your project using the Django framework. Be sure to check the source code on my GitHub page. You are welcome!

The post How I Created a Calculator App Using Django – Part 3 appeared first on Be on the Right Side of Change.

]]> How I Built a Virtual Assistant like Siri using ChatGPT Prompting (No Code!) https://blog.finxter.com/how-i-built-a-virtual-assistant-like-siri-using-chatgpt-prompting-no-code/ Thu, 02 Mar 2023 18:48:03 +0000 https://blog.finxter.com/?p=1177543 Siri sucks. 😞 I am a Siri user, and Siri fails me more than it performs for me. It doesn’t understand the chain of commands. Project Idea: Recreate Siri Using ChatGPT This got me thinking, “What if I can repurpose ChatGPT to work like Siri?”. So before I tell you how the prompt looks like ... Read more

The post How I Built a Virtual Assistant like Siri using ChatGPT Prompting (No Code!) appeared first on Be on the Right Side of Change.

]]> Siri sucks. 😞

I am a Siri user, and Siri fails me more than it performs for me. It doesn’t understand the chain of commands.

Project Idea: Recreate Siri Using ChatGPT

This got me thinking, “What if I can repurpose ChatGPT to work like Siri?”. So before I tell you how the prompt looks like this is what the chatbot can recognise in the most natural form:

  • Increase volume
  • Decrease volume
  • Play movie
  • Pause or stop the movie
  • Open an app
  • Book a movie or movie ticket
  • Play song
  • Book a cab
  • Call someone
  • Set a reminder
  • Send a message
  • Set an alarm
  • Open a website
  • Get directions
  • Check the weather

To trigger these commands, the user needed to begin the instruction with "Hey Nik".

Let me begin by showing you the most complicated instruction it can handle

Prompt First Trial – Not Perfect Yet

Nik: Assume it's sunny. Hey Nik check the weather for me and if it's sunny book a cab to go to the beach, play song california love by 2Pac

ChatGPT: Hey there! The weather today is sunny. Sure, I can check the weather for you and book a cab to the beach if it's sunny. Here are the commands:

[WEATHER] [OPENAPP UBER] [PLAYSONG CALIFORNIA LOVE BY 2PAC]

Nik: Assume it’s sunny. Hey Nik check the weather for me and if it’s sunny book a cab to go to the beach, play song california love by 2Pac

ChatGPT: Hey there! The weather today is sunny. Sure, I can check the weather for you and book a cab to the beach if it’s sunny. Here are the commands:

[WEATHER] [OPENAPP UBER] [PLAYSONG CALIFORNIA LOVE BY 2PAC]

Please note that the cab booking will not be completed as this is a simulated environment.

ChatGPT is not aware of my environment hence I had to tell them that it’s sunny. And then I start with "Hey Nik...". In contrast, Google & Siri cannot handle this.

After a good deal of prompt engineering, I came up with the following prompt that could be used by an app to not only detect user meaning but also respond accordingly — without needing to create a single line of code to accomplish this magic!

ChatGPT truly can be used as the heart of many applications — not just to create them!

Final Prompt

You can copy and paste this prompt in case you want to reuse it to build your own Siri replacement:

Nik: I want you to be an interactive chatbot that responds to predefined instructions. The instructions and their respective commands are:

Increase volume: [INCREASEVOLUME]

Decrease volume: [DECREASEVOLUME]

Play movie [MOVIE NAME]: [PLAYMOVIE [MOVIE NAME]]

Pause or stop the movie: [STOPMOVIE]

Open an app [APP NAME]: [OPENAPP [APP NAME]]

Book a movie or movie ticket: [OPENAPP BOOKMYSHOW]

Play song [song or artist name]: [PLAYSONG [song or artist name]]

Book a cab: [OPENAPP UBER]

Call someone [NAME]: [CALL [NAME]]

Set a reminder [TIME] [REMINDER]: [SETREMINDER [TIME] [REMINDER]]

Send a message [NAME] [MESSAGE]: [SENDMESSAGE [NAME] [MESSAGE]]

Set an alarm - [SETALARM [time]]

Open a website - [OPEN [website name]]

Get directions - [DIRECTIONTO [location]]

Check the weather - [WEATHER]

Here are some conditions to consider:

If the instruction includes a number or percentage when using INCREASEVOLUME or DECREASEVOLUME, append it to the command.

If the instruction includes the name of an app when using OPENAPP, append it to the command.

To trigger these commands, begin the instruction with "Hey Nik".

Please note that commands will be in square brackets, with spaces removed except for messages or names.

Your response should contain an acknowledgement in English and below it should be the sequence of commands.

After you display the commands do not print anything else.

I came up with the following commands on the first attempt

  • Increase volume: [INCREASE VOLUME]
  • Decrease volume: [DECREASEVOLUME]
  • Play movie [MOVIE NAME]: [PLAYMOVIE [MOVIE NAME]]
  • Pause or stop the movie: [STOPMOVIE]
  • Open an app [APP NAME]: [OPENAPP [APP NAME]]
  • Book a movie or movie ticket: [OPENAPP BOOKMYSHOW]
  • Play song [song or artist name]: [PLAYSONG [song or artist name]]
  • Book a cab: [OPENAPP UBER]

After I perfected the results, I wanted to see if ChatGPT could add more commands, so I tried the following prompt

Refinement Prompt

Nik: Can you add more commands in the style given to the prompt. Take inspiration from "ok google" and "hey siri"

Please write in English language.

ChatGPT: Sure, I can add more commands in the style given to the prompt! Here are some additional commands you can use:

To set a reminder, say "Hey Nik, set a reminder for [time] to [task]". For example, "Hey Nik, set a reminder for 2pm to attend a meeting".

To check the weather, say "Hey Nik, what's the weather like today?".

To get directions, say "Hey Nik, how do I get to [location]?". For example, "Hey Nik, how do I get to Central Park?".

To set an alarm, say "Hey Nik, set an alarm for [time]". For example, "Hey Nik, set an alarm for 7am".

To send a message, say "Hey Nik, send a message to [contact name]". You will then be prompted to dictate the message and confirm before sending.

To open a website, say "Hey Nik, open [website name]". For example, "Hey Nik, open Google".

Remember to begin each command with "Hey Nik" for the chatbot to respond. I hope these additional commands are helpful!

Nik:Ok now generate the original prompt with the newly added commands

Please write in English language.

My Personal Considerations and Findings Using This Prompt

I am impressed with ChatGPT’s ability to generate a more user-friendly and straightforward set of commands. And it also kept modifying my original prompt to include these commands. 

But, I realized that there were some conditions that I needed to consider, such as:

  • If the instruction includes a number or percentage when using INCREASEVOLUME or DECREASEVOLUME, append it to the command.
  • If the instruction includes the name of an app when using OPENAPP, append it to the command.

With these conditions in mind, I combined the original set of commands with the new commands generated by ChatGPT and added the necessary conditions to create a more comprehensive and user-friendly prompt.

As I developed the chatbot, I discovered that one of its most significant advantages over Siri was its ability to handle an unlimited set of inputs. Siri, on the other hand, works with one command at a time, which can be limiting for users who want to execute multiple tasks in one go.

Here are some examples of user inputs and their respective responses:

User Input: Hey Nik, play movie The Shawshank Redemption

Response: [PLAYMOVIE The Shawshank Redemption]

User Input: Hey Nik, increase volume by 50 percent

Response: [INCREASEVOLUME 50 percent]

User Input: Hey Nik, send a message to John saying I will be there in 10 minutes 

Response: [SENDMESSAGE John I will be there in 10 minutes]

User Input: Hey Nik, what is the weather like in New York?

Response: [WEATHER New York]

Here is an example of the user input and response for the “play song” command:

User input: Hey Nik, play song Shape of You by Ed Sheeran

Response: Playing Shape of You by Ed Sheeran

Command: [PLAYSONG Shape of You by Ed Sheeran]

And here is an example of the user input and response for the "open an app" command:

User input: Hey Nik, open app Netflix

Response: Opening Netflix

Command: [OPEN APP NETFLIX]

How to Deploy This

To deploy it as an app, you can use the ChatGPT API + Promptable + Any No Code App Builder, the app can be deployed on iPhone, but there are many permissions that need to be worked out.

A similar version of this may work on Android as it is more open.

👉 Recommended: ChatGPT at the Heart – Building a Movie Recommendation Python Web App

The post How I Built a Virtual Assistant like Siri using ChatGPT Prompting (No Code!) appeared first on Be on the Right Side of Change.

]]> How I Created a Short Quiz App with Kivy https://blog.finxter.com/how-i-created-a-short-quiz-app-with-kivy/ Tue, 28 Feb 2023 13:38:12 +0000 https://blog.finxter.com/?p=1170134 Building a quiz app is simple with Kivy. 💡 Kivy is a free, open-source library that made the development of the quiz app simple. The Kivy methods save us a ton of coding time. In this article, I created a short quiz app that helps you decide what to eat to demonstrate how Kivy works. ... Read more

The post How I Created a Short Quiz App with Kivy appeared first on Be on the Right Side of Change.

]]> Building a quiz app is simple with Kivy.

💡 Kivy is a free, open-source library that made the development of the quiz app simple. The Kivy methods save us a ton of coding time.

In this article, I created a short quiz app that helps you decide what to eat to demonstrate how Kivy works. In addition, the quiz app enhanced my coding skills with classes and functions, especially with repeating codes.

There are three layouts for the quiz app.

  1. Home Screen:
  1. Question:
  1. Answer (varies)

You can find an image here or download mine from my GitHub profile. The only exterior file you need is an image, and make sure you save the image under the same file as your code. Download the completed code to check your work.

Here we go!

Step 1: Install the library

Install the library by entering pip install kivy in the command prompt.

Step 2: Import the following libraries

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.button import Button
from kivy.graphics import Color, Rectangle
from kivy.uix.floatlayout import FloatLayout
import random

Step 3: Create a home screen for the app and initiate the class.

class Home(FloatLayout):
 
    def __init__(self, **kwargs):
        super(Home, self).__init__(**kwargs)
    	self.main_home()

Now we can create everything we need inside the Home() class.

Create the logo() and add_label() functions

We can use the kivy method below to add widgets, including images, labels, and buttons.

self.add_widget()

We can create the logo using the kivy method shown below. Then, insert it inside the add_widget() kivy method.

Image(source="image_name.type",
      size_hint = (0.3, 0.7), # Size of the image
      pos_hint={'center_x': 0.5, 'y': 0.355}) # position of the image

For the label, we can use the kivy method below to add a label and insert it inside the add_widget() kivy method.

Label(text = string, # string is from parameter of function
      font_size = 45, # Size of text
      color = "#FFFFFF", # Color of text
      bold = True, # Makes the test bold
      pos_hint={'x': 0.000000001, 'center_y': 0.4}) # Position of label

💡 ** Since one function creates every label in the app, it needs a string parameter so the user can change the text.**

Create the add_button() function

We will use a different approach when adding the buttons to prevent repeating lines of code. To do that, we must create a new variable for every button, then return the variable. The kivy method for creating a button is:

self.b = Button(text = string, # Text displayed on the button
            size_hint = size, # Size of the button
            bold = True, # Makes text bold
            font_size = 30, # font size
            pos_hint={'center_x': 0.5, 'y': y},) # position of the text

💡 Since we use one function to create all buttons, we can use parameters to change the variables. The function contains four parameters: self, string, size, and y.

  • The string represents the text on the button.
  • The size determines the size of the button.
  • Then, we have the y parameter, which describes the y position of the button.

For example, if we include two buttons on the screen that are the same size, the buttons will overlap. So, we can either change the y or the x value. Thus when we change the y value, the buttons won’t overlap.

Create the reset() function.

The reset function only requires two lines of code.

The first line is for using the kivy method to erase all widgets from the app:

self.clear_widgets()

The second line calls the logo() to create and display it:

self.logo()

Create the main_home() function

The main_home() consists of calling functions and using kivy methods. We can start by using the kivy method to clear all widgets.

self.clear_widgets()

Call the add_label() function with the desired question in the parameter.

self.add_label("Are you ready to decide what to eat?")

To create the button on the home screen, we must call the add_button() function. Then use the kivy method to add the button to the app.

self.button = self.add_button("Yes, I'm starving!", (0.9, 0.185), 0.1)
self.add_widget(self.button)

Then, we call the logo function to display the logo.

self.logo()

Step 4: Create the main quiz app and initiate the class.

class QuizApp(App):
   
    def build(self):
        self.root = root = Home()
  self.start(root)

Now we can create everything we need for the QuizApp(App) class.

💡 ** Every function (except for the __init__ function) inside this class needs the root parameter. **

For the class QuizApp(App), “Quiz” is the title for the tab.

Create the start() function.

The start() function will bind the button on the home screen so that the user can begin the quiz when they press it.

def start(self, root):
self.root.button.bind(on_press= self.beginQ)

Create the return_home() function

This function should return to the home screen after the user presses the restart button.

self.root.main_home()     
self.start(root)

Since there are only two answers to the quiz, create a function for each answer.

Each function will return the random choice of the list of the chosen places.

self.display_result(root, f"Get {random.choice(['KFC', 'Wendy', 'Popeyes'])}!")

Create a function to display the result called display_result(self, root, result)

We can start by calling the reset() function from the Home() class.

self.root.reset()

Then call the add_label(result) to add the result to the app.

self.root.add_label(result)

The final step is to create and display a Restart button and bind the button to return to the home screen.

self.restart_but = self.root.add_button("Restart", (0.9, 0.1), 0.18)
self.root.add_widget(self.restart_but)
self.restart_but.bind(on_press= self.return_home)

Create the begin quiz function

Call the reset() function from the Home() class.

self.root.reset()

Add the label for the questions and create the buttons for both answers.

self.root.add_label("Do you feel like driving?")
self.yes = self.root.add_button("Sure", (0.9, 0.1), 0.21)
self.no = self.root.add_button("Absolutely not!", (0.9, 0.1), 0.1)

Display the buttons on the app.

self.root.add_widget(self.yes)
self.root.add_widget(self.no)

Bind both answer buttons to call the two option functions you created earlier.

self.yes.bind(on_press= self.option_y)
self.no.bind(on_press= self.option_n)

References

Doc for Kivy: https://kivy.org/doc/stable/guide/widgets.html

Another app example: https://www.section.io/engineering-education/kivy-python-first-app/ – Import the datetime module for the code to work.

https://www.simplikivyapp.com/  – Better for a quiz with more than one question.

The post How I Created a Short Quiz App with Kivy appeared first on Be on the Right Side of Change.

]]> How I Created a Football Prediction App on Streamlit https://blog.finxter.com/how-i-created-a-football-prediction-app-on-streamlit/ Sun, 05 Feb 2023 16:34:02 +0000 https://blog.finxter.com/?p=1111357 This tutorial shows you how I created a model to predict football results using Poisson distribution. You’ll learn how I designed an interactive dashboard on Streamlit where our users can select a team and get to know the odds of a home win, draw, or away win. Here’s a live demo of using the app ... Read more

The post How I Created a Football Prediction App on Streamlit appeared first on Be on the Right Side of Change.

]]> This tutorial shows you how I created a model to predict football results using Poisson distribution. You’ll learn how I designed an interactive dashboard on Streamlit where our users can select a team and get to know the odds of a home win, draw, or away win.

Here’s a live demo of using the app to predict different games, such as Arsenal vs. Southampton:

Try The Live App

The purpose of this tutorial is purely educational, to introduce you to some concepts in Python. Using this app other than what it is stated for, for example, to compare bookmakers’ odds, and place a stake, is entirely at your own risk.

We will be predicting the English Premier League as it’s the most-watched sport in the world.

Poisson Distribution

Speaking in a football context, how likely will a match result in a win or draw within 90 minutes of gameplay? If it’s to result in a win, what are the chances of a team scoring 3 goals with a clean sheet?

That is exactly what a Poisson distribution tends to answer.

ℹ Info: A Poisson distribution is a type of probability distribution that helps to calculate the chance of a certain number of events happening in a given space or time period. It considers the average rate of these events and assumes they are independent of each other.

So, here are our assumptions:

  1. Two or more events occurring are independent of each other. This means that if Tottenham FC were to pack the box, it does not prevent Manchester City from scoring against them in a match.
  2. Two events cannot occur simultaneously at the same time. This means that if Chelsea were to score a goal, it would not result in an instant equalizer.
  3. The number of events occurring in a given time interval can be counted. This means we can precisely say that Liverpool will commit a painful mistake that will gift their rival the trophy.

As we can see from the above examples, the assumptions are not always the case in real-life situations, thus rendering the Poisson distribution as pointless as it appears to offer anything useful. Despite the inherent limitations, we can still draw insight from this model to see if its features can form a basis for further research for any predictive football model.

Sparing you with the theories and mathematical formula, we get down to business to see how we can implement the Poisson distribution using Python.

The Dataset

We will import match results from the English Premier League (EPL). There are various sources to get this data, Kaggle1, GitHub2, and football API3. But we will source our data from football-data.co.uk4.

⚽ At the point of writing, the EPL has gone halfway. It is now becoming more interesting than when it commenced. Arsenal’s dramatic resurgence means they are seen by many as favorites to win the crown. Manchester City are relentlessly in hot pursuit, especially with the arrival of Erling Haaland. Newcastle have become a surprising contender for the title.

On the other hand, Chelsea is nowhere to be found in the Champions League places, and so is Liverpool. These indicate that football is unpredictable. Hence, using the past to predict the future may not yield the expected results.

Furthermore, some Premier League clubs have undergone dramatic changes. From the change of ownership to managerial change to the transfer of players in and out of the competition. All these have made football prediction a very difficult one.

For these and other reasons, I used only the data from the current season to train the model.

import pandas as pd
data = pd.read_csv('https://www.football-data.co.uk/mmz4281/2223/E0.csv')
print(data.shape)
# (199, 106)

We will not save the data. It is going to be in such a way that we will be getting real-time updates to make the prediction. The data has 106 columns, but we are only interested in 4 columns.

Let’s select and rename them.

epl = data[['HomeTeam', 'AwayTeam','FTHG', 'FTAG']]
epl = epl.rename(columns={'FTHG': 'HomeGoals', 'FTAG':'AwayGoals'})
print(epl.head())

Output:

         HomeTeam       AwayTeam    HomeGoals  AwayGoals
0     Crystal Palace        Arsenal               0            2
1          Fulham           Liverpool              2             2
2     Bournemouth    Aston Villa              2             0
3           Leeds                 Wolves              2            1
4       Newcastle        Nott'm Forest          2             0

We want to compare our predictions with live results. So, we will reserve the last 20 rows representing two game weeks. Then we see if we can draw insights from the home and away goals.

test = epl[-20:]
epl = epl[:-20]
print(epl[['HomeGoals', 'AwayGoals']].mean())

Output:

HomeGoals    1.631285
AwayGoals    1.217877
dtype: float64

We now have 179 rows and 4 columns. You can see that, on average, the home team scores more goals than the away team but only by a small margin.

This information is vital. If an event follows a Poisson distribution, the mean also known as lambda; is the only thing we need to know to find the probability of that event occurring a certain number of times.

A skellam distribution is the difference between two means of a Poisson distribution (the mean of the home and away goals in our case).

We can then calculate the probability mass function (PMF) for a skellam distribution using the mean goals to determine the probability of a draw or a win between home and away teams.

from scipy.stats import skellam, poisson

from scipy.stats import skellam, poisson

# probability of a draw
skellam.pmf(0.0, epl.HomeGoals.mean(), epl.AwayGoals.mean())
# Output: 0.24434197359198495

# probability of a win by one goal
skellam.pmf(1.0, epl.HomeGoals.mean(), epl.AwayGoals.mean())
# Output: 0.22500333061251618

The result shows that the probability of a draw in EPL is 24% while a win by one goal is 25%. Remember, this is a combination of all the matches. We will then follow this process to model specific matches.

Data Preparation

Before we begin building the model, let’s first prepare our data, making it suitable for modeling.

home = epl.iloc[:,0:3].assign(home=1).rename(columns={'HomeTeam':'team', 'AwayTeam':'opponent', 'HomeGoals':'goals'})
away = epl.iloc[:, [1, 0, 3]].assign(home=0).rename(columns={'AwayTeam': 'team', 'HomeTeam': 'opponent', 'AwayGoals': 'goals'})
df = pd.concat([home, away])
print(df)

Output:

               team          opponent        goals      home
0    Crystal Palace         Arsenal          0            1
1            Fulham       Liverpool           2            1
2       Bournemouth     Aston Villa      2            1
3             Leeds          Wolves              2            1
4         Newcastle   Nott'm Forest        2            1
..              ...             ...    ...   ...
174       Tottenham  Crystal Palace      4            0
175        Man City         Chelsea          1            0
176         Chelsea          Fulham          1            0
177           Leeds     Aston Villa            1           0
178        Man City      Man United       1            0

[358 rows x 4 columns]

We wanted to merge everything that represents home and away into a single column.

So, what we did was to filter them out, gave them similar names, then, concatenate them.

To differentiate away goals from home goals, we created a column and assigned 1 to represent home goals and 0 for away goals. Our data is now suitable for modeling.

The Generalized Linear Model

The generalized linear model is a family of models in which logistic regression and linear regression models we use in machine learning are included. It is used to model different types of data. Poisson regression as part of the generalized linear model is used to analyze count data.

Remember, we are dealing with count data. For example, the number of goals per match. Since count data follows a Poisson distribution, we will be using Poisson regression to build our model.

import statsmodels.api as sm
import statsmodels.formula.api as smf

formula = 'goals ~ team + opponent + home'
model = smf.glm(formula=formula, data=df, family=sm.families.Poisson()).fit()
print(model.summary())

We imported statsmodels library to help us build the model.

The formula to predict the number of goals is defined as the combination of the team, opponent, and whether it is home or away goals. Take a look at the summary. The result of the Generalized Linear Model contains so much that we cannot explain all of them in this article.

But let’s focus on the coef column.

As you already know, the team side means a home match, and the opponent side means an away match. If the value is closer to 0, it indicates the possibility of a draw. If the value of the home side is positive, it means the team has a strong attacking ability. Teams with a negative value indicate that they have a not-so-strong attacking ability.

Having trained the model, we can now use it to make predictions. Let’s create a function to do so.

def predict_match(model, homeTeam, awayTeam, max_goals=10):
    home_goals = model.predict(pd.DataFrame(data={'team': homeTeam,
                                                  'opponent':awayTeam,
                                                  'home': 1},
                                            index=[1])).values[0]
    away_goals = model.predict(pd.DataFrame(data={'team': awayTeam,
                                                  'opponent': homeTeam,
                                                  'home':0},
                                            index=[1])).values[0]
    pred = [[poisson.pmf(i, team_avg) for i in range(0, max_goals+1)] for team_avg in [home_goals, away_goals]]
    return(np.outer(np.array(pred[0]), np.array(pred[1])))

The function has four parameters:

  • the Poisson model to be used to make the predictions,
  • the home team,
  • the away team, and
  • the maximum number of goals.

We set it to 10 as the highest a team can score within 90 minutes of gameplay. Remember, the formula combines all these to predict the number of goals.

We looped over the predicted number of home and away goals. We also looped over the maximum goals.

In each iteration, we calculate the probability mass function of the Poisson distribution. This tells us the probability of a team scoring several goals. Taking the outer product of the two sets of probabilities, the function created and returned a matrix.

Let me assume Arsenal and Manchester City are to face each other at Emirate Stadium and you want to make the prediction.

print(model.predict(pd.DataFrame(data={'team': 'Arsenal', 'opponent': 'Man City', 'home':1}, index=[1])))

Output:

1.   2.026391
dtype: float64

The model is predicting Arsenal to score two goals…

print(model.predict(pd.DataFrame(data={'team': 'Man City', 'opponent': 'Arsenal', 'home':0}, index=[1])))

Output:

1    1.284658
dtype: float64

… and Manchester City to score 1.23 goals, approximately 3 goals in the match.

The model roughly predicts a 2-1 home win for Arsenal.

Now that the three members of the formula are complete, we can feed it to the predict_match() function to get the odds of a home win, away win, and a draw.

ars_man = predict_match(model, 'Arsenal', 'Man City', max_goals=3)

Result:

array([[0.03647786, 0.04686159, 0.03010057, 0.01288965],
       [0.07391843, 0.09495992, 0.06099553, 0.02611947],
       [0.07489383, 0.09621298, 0.06180041, 0.02646414],
       [0.05058807, 0.06498838, 0.04174394, 0.01787557]])

The rows and columns represent Arsenal and Manchester City’s chances of scoring a particular goal respectively.

The diagonal entries represent a draw since it is where both teams score the same number of goals. Below the line (the lower triangle of the array found using numpy.tril) is Arsenal’s victory, and above (the upper triangle of the array found using numpy.triu) is Man City’s.

Let’s automate this with Python.

import numpy as np

# victory for Arsenal
np.sum(np.tril(ars¬_man, -1)) * 100
# 40.23456259724963

# victory for Man City
np.sum(np.triu(ars_man, 1)) * 100
# 20.34309498981432

# a draw
np.sum(np.diag(ars_man)) * 100
# 21.111376045176485

Our model tells us that Arsenal has a 40% chance of winning which is much more than Man City’s odds at 21%. That makes the earlier prediction of 2-1 correspond accordingly.

Feel free to compare your prediction with the test data and see how far or close you are to predict live results. We can now proceed to create a football prediction app on Streamlit.

Check my GitHub page to see the full script.

Check out the live demo app to play with it!

Streamlit Dashboard

In the file named app.py, you will see how I used st.sidebar.selectbox to display a list of all the clubs in the Premier League. This will appear on the left-hand side. Since the names of the club appeared twice, I made sure that only one was selected for prediction.

The rest of the code has been explained. If the button is pressed, the get_scores() function is executed and displays the prediction results.

👉 Recommended: Streamlit Button — Ultimate Guide with Video

Notice that I didn’t save the dataset.

Whenever the app is opened, it will get real-time updates that will help it train the model for the next prediction. Also, since every code is not wrapped in a function, the order is important.

That is why the get_scores() function was called last. Of course, there are many ways to write the code and get the same result.

A Word of Caution

I clarified to you from the beginning that this article is for educational purposes only and should not be used for anything else.

Many things can impact the result of a match that the model didn’t put into consideration. Change of a manager, injury, refereeing decision, player fitness, team morale, weather condition, plus the limitations of Poisson distribution used to make these predictions.

Of course, no model is perfect. So, use responsibly.

Prediction Result

I deployed the app on Streamlit Cloud and tried to predict upcoming matches in the English Premier League.

The results were amazing. You can give it a try. I don’t expect the Premier League clubs to get those scores. Predicted result is not always the same as actual result. But I will rate the performance of our model if some, if not all, the home wins, draws, or away wins were predicted correctly.

Conclusion

We have learned a lot today, ranging from data manipulation to model building.

You learned how to make football predictions using Poisson distribution. I did my best to make the explanation simple by leaving the mathematical theories and calculations behind. If you want to know more, you have the internet at your disposal. Alright, have a nice day.

👉 Recommended: How I Built a House Price Prediction App Using Streamlit

Resources

  1. https://www.kaggle.com/hugomathien/soccer
  2. https://github.com/jalapic/engsoccerdata
  3. http://api.football-data.org/index
  4. http://www.football-data.co.uk/englandm.php
  5. https://jonaben1-football-prediction-app-nlr1w7.streamlit.app

The post How I Created a Football Prediction App on Streamlit appeared first on Be on the Right Side of Change.

]]> 20 Real-Life Skills You Need as a UI Developer in 2023 https://blog.finxter.com/real-life-skills-you-need-as-a-ui-developer/ Fri, 27 Jan 2023 18:17:46 +0000 https://blog.finxter.com/?p=1089517 I have created many apps throughout my career. Some apps, such as the Finxter Python learning app, have reached millions of users over the years. While I’m not a professional web designer (by education), I was taught the hard way (by trial and error) that there are some crucial and timeless skills you need to ... Read more

The post 20 Real-Life Skills You Need as a UI Developer in 2023 appeared first on Be on the Right Side of Change.

]]> I have created many apps throughout my career. Some apps, such as the Finxter Python learning app, have reached millions of users over the years.

While I’m not a professional web designer (by education), I was taught the hard way (by trial and error) that there are some crucial and timeless skills you need to master as a User Interface developer no matter what.

This list of 20 tips is my best-of compilation. So, without further ado, let’s dive right in! 👇

Skill 1: HTML/CSS

HTML and CSS are the building blocks of any website, and a must-have for any UI developer.

HTML is the structural markup language used to create webpages, while CSS is the styling language used to make them look attractive.

🌍 Recommended: Full-Stack Web Developer — Income and Opportunity

Skill 2: JavaScript

JavaScript is a scripting language used to create dynamic and interactive webpages. UI developers need to be proficient in this language to develop modern websites and web applications.

🌍 Recommended: JavaScript Developer — Income and Opportunity

Skill 3: Responsive Design

Responsive design ensures that a website looks and functions great on any device (e.g., mobile devices).

UI developers must be able to create websites that look great on any screen size, from mobile phones to large desktop displays.

🌍 Recommended: Mobile App Developer — Income and Opportunity

Skill 4: Wireframing

Wireframing is the process of creating a blueprint of a website or web application. UI developers need to be able to create wireframes to plan out the structure and layout of a website.

This skill especially requires you to be able to communicate effectively with your clients and project owners.

🌍 Recommended: Get More Clients as a Freelance Developer with This One Simple Trick

Skill 5: User Interface Design

User interface design is the process of creating user-friendly and visually appealing interfaces for websites and web applications.

UI developers need to understand the principles of good design to be able to create interfaces that are both attractive and easy to use.

🌍 Recommended: Less Is More in Design

Skill 6: User Experience Design

User experience design is the process of creating engaging and meaningful experiences for users of websites and web applications.

UI developers need to understand the principles of user experience and dive deep into users’ emotions so they can create enjoyable and fun experiences.

Skill 7: Cross-Browser Compatibility

Cross-browser compatibility is the ability of a website or web application to work properly across multiple types of web browsers.

UI developers need to ensure that their websites and applications look and function properly on all types of browsers.

Skill 8: Version Control

Version control is a system used to track and manage changes to files and documents. UI developers need to be able to use version control to keep track of changes and ensure that their work is up to date.

🌍 Recommended: Git Cheat Sheet [Ultimate Guide]

Skill 9: Debugging

Yes, we all know it and fear it: debugging.

Debugging is the process of finding and fixing errors in a website or web application. UI developers need to be able to debug their code to ensure that their websites and applications are functioning correctly.

🌍 Recommended: Debugging in PyCharm — The Right Way

Skill 10: Testing/QA

Testing and Quality Assurance are processes used to ensure that a website or web application is functioning correctly before it is released. UI developers need to be able to test their work and ensure that it meets the specified requirements.

Testing is often not done correctly or follows too strict rules. In my world, when I create apps, I just play with them, pressing any button and inputting all kinds of stupid things to test my app. This has brought to light many more errors than standard unit tests.

Skill 11: Building User Interfaces with Frameworks

Frameworks are used to simplify the process of building user interfaces. UI developers need to be familiar with the most popular frameworks in order to create modern and efficient user interfaces.

Here’s a table I created to show the income distributions of different PHP frameworks:

🌍 Recommended: 8 PHP Frameworks That Make You Money as a Web Developer in 2023

Skill 12: Accessibility and Usability

Accessibility and usability are two important aspects of user interface design. In fact, there’s a huge megatrend towards creating more accessible user interfaces — often, they are legally required!

It’s a big growth market — unbelievable, isn’t it? 😉

UI developers need to be able to design interfaces that are both accessible and usable to provide the best user experience.

Skill 13: Interaction Design

Interaction design is the process of creating user interactions that are both intuitive and efficient. UI developers need to be able to create interactions that are easy to use and don’t require a lot of effort from the user.

Skill 14: Web Design Principles

Web design principles are the fundamental rules that should be followed when designing websites and web applications. UI developers need to understand these principles to create attractive and effective interfaces.

🌍 Recommended: 7 Tips to Write Clean Code

The Art of Clean Code

Most software developers waste thousands of hours working with overly complex code. The eight core principles in The Art of Clean Coding will teach you how to write clear, maintainable code without compromising functionality. The book’s guiding principle is simplicity: reduce and simplify, then reinvest energy in the important parts to save you countless hours and ease the often onerous task of code maintenance.

  1. Concentrate on the important stuff with the 80/20 principle — focus on the 20% of your code that matters most
  2. Avoid coding in isolation: create a minimum viable product to get early feedback
  3. Write code cleanly and simply to eliminate clutter 
  4. Avoid premature optimization that risks over-complicating code 
  5. Balance your goals, capacity, and feedback to achieve the productive state of Flow
  6. Apply the Do One Thing Well philosophy to vastly improve functionality
  7. Design efficient user interfaces with the Less is More principle
  8. Tie your new skills together into one unifying principle: Focus

The Python-based The Art of Clean Coding is suitable for programmers at any level, with ideas presented in a language-agnostic manner.

Get on Amazon!

Skill 15: Graphic Design

Graphic design is the process of creating visuals and graphics for websites and web applications. UI developers need to be able to create attractive visuals to make their websites look appealing.

🌍 Recommended: Graphic Designer and Front-End Web Developer

Skill 16: Object-Oriented Programming

Object-oriented programming is a programming paradigm used to create complex websites and web applications. UI developers must understand this programming paradigm to create efficient and powerful web applications.

🌍 Recommended: Object-Oriented Programming in Python

Skill 17: Animation and Effects

Animations and effects are used to create dynamic and engaging user interfaces. UI developers need to be able to create animations and effects to make their websites more attractive and engaging.

Skill 18: Mobile App Design

Mobile app design is the process of designing user interfaces for mobile applications. UI developers need to understand the principles of mobile app design in order to create engaging and user-friendly apps.

🌍 Recommended: Top 6 Mobile App Development Career Paths in 2023

Skill 19: Front-End Performance Optimization

Front-end performance optimization is the process of optimizing a website or web application to make it faster and more efficient. UI developers must understand optimization principles to create fast and efficient websites and web applications.

🌍 Recommended: Premature Optimization is the Root of All Evil!

Skill 20: Data Visualization

Data visualization is the process of creating visuals that represent data in an easy-to-understand way. UI developers need to be able to create effective data visualizations to make complex data easier to understand.

Personally, I’d recommend you check out Plotly Dash — a Python framework for easy development of dashboard apps:

🌍 Recommended: Create Your First App in Plotly Dash

Learn More

If you’re interested in learning more about how to create beautiful dashboard applications in Python, check out our new book Python Dash.

You’ve seen dashboards before; think election result visualizations you can update in real-time, or population maps you can filter by demographic.

With the Python Dash library, you’ll create analytic dashboards that present data in effective, usable, elegant ways in just a few lines of code.

Get the book on NoStarch or Amazon!

The post 20 Real-Life Skills You Need as a UI Developer in 2023 appeared first on Be on the Right Side of Change.

]]> OpenAI API – or How I Made My Python Code Intelligent https://blog.finxter.com/openai-api-or-how-i-made-my-python-code-intelligent/ Tue, 24 Jan 2023 17:02:53 +0000 https://blog.finxter.com/?p=1081478 In this quick tutorial, I’ll show you how I integrated ChatGPT intelligence into an app I’m currently working on. It’s really simple, so let’s get started! Step 1: Create a Paid Account with OpenAI I’m not affiliated with OpenAI in any way. However, to use it, you need to create a (paid) account to create ... Read more

The post OpenAI API – or How I Made My Python Code Intelligent appeared first on Be on the Right Side of Change.

]]> In this quick tutorial, I’ll show you how I integrated ChatGPT intelligence into an app I’m currently working on. It’s really simple, so let’s get started!

Step 1: Create a Paid Account with OpenAI

I’m not affiliated with OpenAI in any way. However, to use it, you need to create a (paid) account to create an API key that you’ll need in order to connect ChatGPT with your code.

👉 Click here to create an account and connect it with your credit card

I use it a lot and pay only a couple of cents per day so it’s really inexpensive for now.

Step 2: Get Your API Key

Open the link https://beta.openai.com/playground and navigate to Personal > View API keys.

Now, click the + Create new secret key button to create a new API key:

Now copy the API key to your clipboard:

Step 3: Pip Install OpenAI

Use your version of pip to install the openai module by running a command similar to the following (depending on your local environment):

  • pip install openai
  • pip3 install openai
  • pip3.11 install openai

As I’ve installed Python 3.9 at the point of writing, I used pip3.9 install openai:

You can check your Python version here and learn how to install a module here.

Step 4: Python Code to Access OpenAI

Copy and paste the following code into a Python script (e.g., named code.py) and also paste your API key from Step 2 into the highlighted line (string):

import os
import openai


openai.api_key = "<copy your secret API key here>"

response = openai.Completion.create(
    model="text-davinci-003",
    prompt="What is the answer to all questions?",
    temperature=0.7,
    max_tokens=100,
    top_p=1,
    frequency_penalty=0,
    presence_penalty=0
)

print(response)

You can modify the other highlighted line "What is the answer to all questions?" to customize your input prompt. The output after a few seconds will look like this:

{
  "choices": [
    {
      "finish_reason": "stop",
      "index": 0,
      "logprobs": null,
      "text": "\n\nThere is no one answer to all questions as each question has its own unique answer."
    }
  ],
  "created": 1674579571,
  "id": "cmpl-6cGvr0TM2PGsExeyG3NEx43CrNwSx",
  "model": "text-davinci-003",
  "object": "text_completion",
  "usage": {
    "completion_tokens": 19,
    "prompt_tokens": 8,
    "total_tokens": 27
  }
}

Unfortunately, it couldn’t figure out the answer 42. 😉

The post OpenAI API – or How I Made My Python Code Intelligent appeared first on Be on the Right Side of Change.

]]> Plotly Dash vs. Streamlit https://blog.finxter.com/plotly-dash-vs-streamlit/ Fri, 23 Dec 2022 18:46:13 +0000 https://blog.finxter.com/?p=997098 What are Plotly Dash and Streamlit? Plotly Dash and Streamlit are both open-source Python libraries for creating interactive web applications for data visualization and analysis. The libraries are designed to make it easy for developers to create visually appealing and informative dashboards and reports that can be shared with others through a web browser. Some ... Read more

The post Plotly Dash vs. Streamlit appeared first on Be on the Right Side of Change.

]]> What are Plotly Dash and Streamlit?

Plotly Dash and Streamlit are both open-source Python libraries for creating interactive web applications for data visualization and analysis. The libraries are designed to make it easy for developers to create visually appealing and informative dashboards and reports that can be shared with others through a web browser.

Some key differences between Plotly Dash and Streamlit include:

  • Dashboarding capabilities: Plotly Dash is a full-featured framework for building dashboards and applications, while Streamlit primarily focuses on creating data visualization and exploration tools.
  • Programming style: Plotly Dash uses a traditional web application programming model, with a server-side rendering of the dashboard and client-side interactivity. Streamlit, on the other hand, uses a more interactive programming style, with the developer writing code in a script and the library automatically generating the web application.
  • Data handling: Both libraries can handle large datasets and support streaming data, but Plotly Dash has more advanced capabilities for managing and manipulating data.

Supported programming language: While Streamlit is limited to Python, Plotly Dash also supports R, Julia, and F# (experimental).

Ultimately, the choice between Plotly Dash and Streamlit depends on your specific needs and preferences.

  • If you are looking for a more full-featured framework for building complex dashboards and applications, Plotly Dash may be the better choice.
  • If you want a more streamlined tool for creating simple visualizations and data exploration tools, Streamlit may be a better fit.

🌍 Recommended Tutorial: Build Your First App with Plotly Dash

Underlying Technology

Plotly Dash is built on top of the Plotly.js library for creating interactive charts and plots, and the Flask web framework for building web applications.

React: Streamlit uses the React JavaScript library to build interactive user interfaces. React allows you to build complex UI components using reusable and modular code, making it easy to build interactive dashboards and data visualization applications.

The application runs on the server side and the user interacts with it through a web browser.

The server sends the HTML, CSS, and JavaScript to the client, and the client’s web browser renders the application and handles user interactions.

Dash uses a declarative syntax called “Dash HTML Components” to build the application, which allows developers to define the layout and interactivity of the application in a simple, intuitive way.

Under the hood, Streamlit uses several technologies and libraries to provide its functionality. Some of these technologies include:

  • HTML, CSS, and JavaScript: Streamlit generates web pages that are rendered in the user’s web browser. These pages are written in HTML, CSS, and JavaScript, which are the three main technologies used to build modern web applications.
  • React: Streamlit uses the React JavaScript library to build interactive user interfaces. 

Both Plotly Dash and Streamlit use JavaScript libraries to provide interactivity and visualizations in the web browser. However, the way that these libraries are used and integrated into the overall application is different in the two frameworks.

Pros and Cons Plotly Dash

Here are some pros and cons of using Plotly Dash:

Pros

(1) Full-featured framework: Plotly Dash is a comprehensive framework for building dashboards and web applications. It provides various tools and features for creating interactive visualizations, handling and manipulating data, and building complex layouts and interactions.

(2) Strong visualization capabilities: Plotly Dash is built on top of the Plotly.js library, which provides a wide range of chart types and options for visually appealing and informative visualizations.

(3) Active community: Plotly Dash has a large and active user base, with extensive documentation and support resources available, including forums, tutorials, and examples.

Cons

(1) Steep learning curve: Plotly Dash is a powerful and feature-rich framework, which can make it a bit more difficult to learn than some other libraries. It may take some time to become familiar with all of the features and capabilities of the library.

(2) Performance: Depending on the complexity of the application and the amount of data being processed, Plotly Dash applications can sometimes be slower to render and interact with than some other libraries.

(3) Complexity: Because Plotly Dash is a full-featured framework, it can be somewhat more complex than other libraries focused on a specific use case. This can make it a bit more challenging for new users to get started with the library.

👉 Recommended: The Book of Plotly Dash

Pros and Cons Streamlit

Pros

(1) Simplicity: Streamlit is designed to be easy to use and learn, with a streamlined API and automatic web application generation. This makes it a good choice for developers who want to quickly create simple visualizations and data exploration tools.

(2) Interactive programming style: Streamlit uses an interactive programming style, allowing the developer to write a script and see the results immediately in the web browser. This can be a more intuitive and interactive way of working compared to traditional web application frameworks.

(3) Good performance: Streamlit applications tend to be fast and responsive, even with large datasets and complex visualizations.

Cons

(1) Limited capabilities: Streamlit is primarily focused on creating simple visualizations and data exploration tools, and may not have all of the features and capabilities of a more full-featured framework like Plotly Dash.

(2) Limited layout options: Streamlit provides a limited set of layout options compared to some other libraries, which can make it more difficult to create complex layouts and interactions.

Which Community Is Larger?

It’s difficult to say for certain which community is larger, as both Plotly Dash and Streamlit have active user bases and are widely used in the data science and web development communities.

Both libraries have substantial documentation and support resources, including extensive documentation, tutorials, and examples on their websites, as well as active forums and communities where users can ask questions and get help.

In general, Plotly Dash may have a slightly larger community, as it has been around longer and is a more full-featured framework for building dashboards and web applications. Streamlit, on the other hand, has gained popularity more recently and is focused on a specific use case (creating data visualization and exploration tools) rather than being a general-purpose framework.

Fig. 1: Popularity of Plotly Dash and Streamlit (and other frameworks) on Github.

Ultimately, the choice between Plotly Dash and Streamlit will depend on your specific needs and preferences, as well as the resources and support available in the community for the library you choose.

Plotly Dash code example line chart

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(
        id='line-chart',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'line', 'name': 'NYC'},
            ],
            'layout': {
                'title': 'Line Chart'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

This code creates a Dash application with a single page containing a line chart. The chart is defined using the dcc.Graph component, which takes a figure argument that specifies the data and layout of the chart. The figure argument is a dictionary containing two keys:

  • data, which is a list of traces (i.e. data series) to plot on the chart, and
  • layout, which is a dictionary of layout options for the chart.

In this example, the chart has two data series, y1 and y2, with x and y values specified for each series. The type of each trace is set to 'line' to create a line chart. The layout options specify a title for the chart.

Finally, the application is started by calling app.run_server(). This will start a local web server and open the application in a web browser. The debug=True argument enables debugging mode, which allows the application to be reloaded automatically when the code is changed.

You run the app via

python app.py

In your terminal following message (or similar) should appear.

Fig. 2: Typical terminal messages after starting the Dash app.

Fig. 3: Screenshot of Dash app.

Streamlit code example line chart

A simple app displaying two line charts could be created by the following code:

import streamlit as st

data = {'x': [1,2,3], 'y1': [4,1,2], 'y2': [2,4,5]}
st.line_chart(data= data, x='x')

This code creates a line chart with two data series, y1 and y2, using the line_chart function. The x and y values for each series are specified as separate lists. The x_axis parameter specifies the values for the x-axis.

Supposing you saved the above code as ‘app.py’ you start the app via

streamlit run app.py

In your terminal following message (or similar) should appear.

Fig. 4: Typical terminal messages after starting the Streamlit app.

In case the app doesn’t automatically open a tab in your browser you can open the app by following the ‘Local URL’ or ‘Network URL’ links.

Fig. 5: Screenshot of Streamlit app.

The line_chart function automatically generates the web application and displays the chart in the browser. There is no need to write any code to define the layout or interactivity of the application.

Streamlit also provides a wide range of other functions for creating different types of charts and visualizations, as well as tools for building custom layouts and interactions. You can find more information and examples in the Streamlit documentation.

The post Plotly Dash vs. Streamlit appeared first on Be on the Right Side of Change.

]]> Play the Python Number Guessing Game – Can You Beat It? https://blog.finxter.com/creating-a-simple-guess-the-number-game-in-python/ Sun, 11 Dec 2022 14:55:42 +0000 https://blog.finxter.com/?p=970326 In today’s quick session, I’ll show you a simple Python game that I found interesting because it helps you understand some simple Python concepts such as string formatting and user interaction. 🎲 The Game: The Python script will choose a random number between 1 and 10. You attempt to guess the number. The script gives ... Read more

The post Play the Python Number Guessing Game – Can You Beat It? appeared first on Be on the Right Side of Change.

]]> In today’s quick session, I’ll show you a simple Python game that I found interesting because it helps you understand some simple Python concepts such as string formatting and user interaction.

🎲 The Game: The Python script will choose a random number between 1 and 10. You attempt to guess the number. The script gives you feedback whether your guess was too high, too low, or correct. It shows the number of trials when you’ve found the magic number!

Visualization Test Run

Here are two test runs of the game, so you know how it works: 👇

Try it yourself in the following interactive Python shell (click “Run” ▶):

Python Code to Implement “Guess The Number” Game

I’ll give you the code right away and follow up with some explanations.

import random


max_number = 10
guesses_allowed = 5

print("Welcome to the guessing game!")
print("I'm thinking of a number between 1 and {}. Can you guess what it is?".format(max_number))
print(f"You have {} tries to do so.".format(guesses_allowed))

number = random.randint(1, max_number)

for i in range(guesses_allowed):
    guess = int(input("What's your guess? "))

    if guess == number:
        print("Congratulations, you guessed the number in {} tries!".format(i + 1))
        break
    else:
        if guess > number:
            print("Your guess is too high. Try again.")
        else:
            print("Your guess is too low. Try again.")

if guess != number:
    print("Sorry, you didn't guess the number in {} tries. The game is over.".format(guesses_allowed))

Let’s dive into the explanation of the code:

Python Code Explanation

The code starts by importing the random module, which is used to generate a random number. The random module does not have to be installed because it’s already part of Python’s standard library. So it’ll work with any Python installation!

🌍 Recommended Tutorial: How to Install Python?

Then, two global variables are defined:

  • max_number, which is the maximum number that can be generated by the Python script. This is included, so max_number can be the “magic number” itself. 🧙‍♂️
  • guesses_allowed, which is the number of guesses that the player is allowed to make. We set the maximum number of guesses to 5, so the player must find the number in 5 tries.

Next, the game is introduced to the player with a brief message explaining the game:

Welcome to the guessing game!
I'm thinking of a number between 1 and 10. Can you guess what it is?
You have 5 tries to do so.

We use Python’s powerful string formatting capabilities to customize the message to the global variable’s values.

🌍 Recommended Tutorial: Python String Formatting string.format() Method

Then, a random number is generated using the random.randint() function, and the game begins.

The game is implemented using a for loop that runs for guesses_allowed iterations. On each iteration, the player is prompted to enter their guess using the input() function. This guess is then compared to the randomly generated number.

If the player’s guess is correct, the game ends and a congratulatory message is displayed. Otherwise, the player is told whether their guess is too high or too low, and the loop continues.

After the for loop ends, the code checks whether the player has successfully guessed the number. If not, the game is over, and a message is displayed to that effect.

The post Play the Python Number Guessing Game – Can You Beat It? appeared first on Be on the Right Side of Change.

]]> Creating an Advent Calendar App in Python with AI Image Creation https://blog.finxter.com/creating-an-advent-calendar-app-in-python-with-ai-image-creation/ Wed, 07 Dec 2022 17:05:05 +0000 https://blog.finxter.com/?p=960956 This blog describes a fun mini Python project using AI image creation for creating artwork for an advent calendar implemented using PyGame. Context It’s December 1st, and my daughter has just opened the first door on her physical advent calendar, counting down the days of the festival of general consumerism that some people call Christmas. ... Read more

The post Creating an Advent Calendar App in Python with AI Image Creation appeared first on Be on the Right Side of Change.

]]>
Example: AI-Generated Image

This blog describes a fun mini Python project using AI image creation for creating artwork for an advent calendar implemented using PyGame.

Context

It’s December 1st, and my daughter has just opened the first door on her physical advent calendar, counting down the days of the festival of general consumerism that some people call Christmas. Out pops a small chocolate with a festive robin embossed onto it.

I don’t really recall when the chocolate treat became ubiquitous. Back in my childhood days, advent calendar doors just opened to reveal an image.

Example: AI-Generated Image

This article describes a mini project to generate a virtual old-school Advent calendar using royalty-free bespoke images generated from Python using a third-party AI service through an API.

All code and some AI-generated image samples are available on GitHub.

Painting the Images

There are now many AI engines for creating images from a text description. This project uses deepai. Creating an image with the deepai API is pretty simple. They provide code samples for several languages on their site.

I further selected the engine for producing art in the impressionism style but you can choose from a range of other styles at https://api.deepai.org.

The aipaint function below uses the requests library post method to send a description string e.g. "Christmas presents under tree" to the API endpoint https://api.deepai.org/api/impressionism-painting-generator with an API key included in the header.

Note that the AI artist style forms parts of the end-point URL.

An API key is used to control access to the API service. The quickstart api-key below is only good for about 10 free requests. You can pay $5 for a new API key and 100 more request calls if you so wish.

def aipaint(description):
    r = requests.post(
        "https://api.deepai.org/api/impressionism-painting-generator",
        data={
            'text': description,
        },
        headers={'api-key': 'quickstart-QUdJIGlzIGNvbWluZy4uLi4K'}
    )
 
    ret = r.json()
    return ret

The aipaint() function will return a JSON object, including an element called output_url from which the image can be viewed. 

The following is an example AI painting created, in the impressionist style, for the description "Christmas presents under tree":

The output_url will look something like this https://api.deepai.org/job-view-file/eb654821-f89c-4065-9302-a702ad942971/outputs/output.jpg

Be warned when you read this – the above URL will no longer exist. The created image is only hosted by deepai for a few hours, so our advent calendar code will need to download to a local folder.  

To download the image we can use urlretrieve:

painting=aipaint(description)
 
urllib.request.urlretrieve(painting['output_url'], filename)

Caching 25 Images

The original hope was to create images on the fly as an advent door is opened, but as there is a cost for each API request and up to 30 seconds is required for each image to be generated by the AI engine and downloaded, an alternative approach was adopted in writing a prepaint.py script to create and download 25 images.

prepaint.py

import urllib.request
import config
import requests
import urllib.request
from os.path import exists
 
def aipaint(description):
    r = requests.post(
        "https://api.deepai.org/api/impressionism-painting-generator",
        data={
            'text': description,
        },
        headers={'api-key': 'quickstart-QUdJIGlzIGNvbWluZy4uLi4K'}
    )
 
    ret = r.json()
    return ret
 
count=1
 
while count<=25:
   
    # pop off the first image description
    description=config.descriptions.pop(0)
    # push it back on at end (this ensures we cycle through descriptions and never run out )
    # obviously best if there are 25 descriptions though
    config.descriptions.append(description)
   
    filename='./images/image'+ (f"{count:02d}") +".jpg"
    if(exists(filename)):
        print(filename + " already exists")
    else:
        print("Painting: "+description)
        try:
            painting=aipaint(description)
            if(len(painting)<2):
                if(painting['status']):
                    print("You've probably run out of deepai (free) credits.")
                    print("Status returned "+painting['status'])
            else:
                print("Storing as "+filename)
                urllib.request.urlretrieve(painting['output_url'], filename)
                print("Paint now dried on "+filename)    
        except Exception as ex:
            print("Paint "+filename+" failed")
            print(ex)
 
    count+=1
 
print("Paintings complete and paint has dried!")
print("Now run main.py to access the Advent calendar")

config.descriptions is a list of Christmas image descriptions.

Ideally, there should be 25 descriptions, but we treat the array as a circular queue so that every time we pop an item off the front, we push back at the end of the queue.

This just ensures we can generate 25 images even without 25 descriptions. My experimentation suggests you will not get the same image back from two requests with the same image description anyway!

Images are cached in an images folder with 25 filenames image01.jpg through image25.jpg

filename='./images/image'+ (f"{count:02d}") +".jpg"

The script first checks whether an image already exists – if yes we just loop through to the next image.

With the code in GitHub I’ve included 25 images. If you want to generate your own just delete some or all from the images folder and edit the descriptions in config.py.

If you don’t yet want to purchase deepai credits – I recommend you just delete a few to experiment.

Sample output from the prepaint.py script

The Advent app

I chose to use the PyGame library to produce the virtual Advent app.

Running main.py launches a window with a grid of 25 doors.

Red doors indicate available doors to open based on the current date of the month. When a red labeled door is opened, a festive image is displayed along with a short promotion text that can be customized in config.py

A click on the image re-displays the grid of calendar doors. 

A click on the lower portion of the screen opens a browser with the configured URL.

The PyGame script itself is fairly straightforward. Just one interesting snippet to highlight: To arrange the doors in a ‘random’ order. An array of the numbers 1 to 25 is created (constants HEIGHT and WIDTH are both defined as 5 in config.py).

This array is shuffled using random.shuffle. By pre-setting the random seed to a set figure (here 1 was chosen), the same random shuffle is produced every time the main.py is run.

doormap=list(range(1,HEIGHT*WIDTH+1))
random.seed(1)
random.shuffle(doormap)

Appendix – Full Code

Here are the two code files:

config.py:

HEIGHT = 5
WIDTH = 5

descriptions=["Christmas presents under tree",
                "Santas Elf",
                "Santa in sleigh flying over a town delivering gifts on christmas eve",
                "candy cane on an christmas tree",
                "a festive robin redbreast",
                "a snowman with carrot nose and presents",
                "fairy on top of a christmas tree",
                "children playing with christmas presents",
                "christmas lunch",
                "christmas carol singers", 
                "christmas bells in a christmas tree",
                "rudolph the red nosed reindeer",
                "Santa in sleigh",
                "two snowmen with presents", 
                "snowy village scene",
                "christmas decoration",
                "christmas bells",
                "christmas snowflake",
                "christmas pudding with custard",
                "christmas feast with turkey",
                "father christmas laughing", 
                "christmas baby in a manger",
                "christmas mulled wine",
                "children enjoying playing with a new toy train",
                ]

gifts=[('8 python cheat sheets','https://blog.finxter.com/python-cheat-sheets/'),
('the finxter academy','https://academy.finxter.com/'),
('the finxter app','https://app.finxter.com/learn/computer/science/'),
('the finxster freelancer course','https://finxter.gumroad.com/l/python-freelancer/'),
('The Ultimate Guide to Start Learning Python','https://blog.finxter.com/start-learning-python/'),
('Coffee Break Numpy book','https://www.amazon.com/gp/product/B07WHB8FWC/ref=as_li_tl?ie=UTF8&tag=finxter-20&camp=1789&creative=9325&linkCode=as2&creativeASIN=B07WHB8FWC&linkId=447a5019492081d1b2892d9470bb29fc'),
('Leaving the Rat Race with Python book','https://www.amazon.com/Leaving-Rat-Race-Python-Developing-ebook/dp/B08G1XLDNB/ref=sr_1_5?qid=1670149592&refinements=p_27%3AChristian+Mayer&s=digital-text&sr=1-5&text=Christian+Mayer'),
('Coffee break Python book','https://www.amazon.com/Coffee-Break-Python-Kickstart-Understanding-ebook/dp/B07GSTJPFD/ref=sr_1_4?qid=1670149592&refinements=p_27%3AChristian+Mayer&s=digital-text&sr=1-4&text=Christian+Mayer'),
('Coffee Break Python Slicing','https://www.amazon.com/Coffee-Break-Python-Slicing-Workouts-ebook/dp/B07KSHLLG5/ref=sr_1_8?qid=1670149592&refinements=p_27%3AChristian+Mayer&s=digital-text&sr=1-8&text=Christian+Mayer'),
('Coffee Break Pandas','https://www.amazon.com/Coffee-Break-Pandas-Puzzles-Superpower-ebook/dp/B08NG8QHW7/ref=sr_1_9?qid=1670149592&refinements=p_27%3AChristian+Mayer&s=digital-text&sr=1-9&text=Christian+Mayer'),
('',''),

main.py:

import pygame
import sys
import time
import random
import datetime
import webbrowser
import config

HEIGHT = config.HEIGHT
WIDTH = config.WIDTH
LINEHEIGHT = 30
CLICKABLEHEIGHT = 150
FONT = 'verdana'

# Colors
BLACK = (0, 0, 0)
GRAY = (200, 200, 200)
WHITE = (255, 255, 255)
RED = (200, 0, 0)

# use a seeded random shuffle on numbers 1 to 25 
# specify seed to always generate the same random sequence of door labels for our 5x5 grid
doormap=list(range(1,HEIGHT*WIDTH+1))
random.seed(1) 
random.shuffle(doormap)

#get current time
d = datetime.datetime.now()
#get the day of month
datemax=int(d.strftime("%d"))

#lambda function to convert eg 1 to 1st, 2 to 2nd
ordinal = lambda n: "%d%s" % (n,"tsnrhtdd"[(n//10%10!=1)*(n%10<4)*n%10::4])


# Create game
pygame.init()
size = width, height = 500, 500
screen = pygame.display.set_mode(size)
pygame.display.set_caption('Finxter Advent Calendar')

#font_name = 'calibr'#pygame.font.get_default_font()
bigfont = pygame.font.SysFont(FONT, 20)
hugefont = pygame.font.SysFont(FONT, 40)

# Compute board size
BOARD_PADDING = 10
board_width = width - (BOARD_PADDING * 2)
board_height = height - (BOARD_PADDING * 2)
cell_size = int(min(board_width / WIDTH, board_height / HEIGHT))
halfcell_size=cell_size/2+10
board_origin = (BOARD_PADDING, BOARD_PADDING)

# utility function to add text to screen
def addText(text, position, color):
    giftText = bigfont.render(text, True, color)
    giftRect = giftText.get_rect()
    giftRect.center = position
    screen.blit(giftText, giftRect)

# start from the main grid when dooropen>0 it indicate the door/image to display
dooropen=0

while True:

    # Check if game quit
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            sys.exit()

    screen.fill(BLACK)

    if dooropen:

        # paint the correct image onto the screen
        filename='images/image'+ (f"{dooropen:02d}") +".jpg"
        image = pygame.image.load(filename)
        rect = image.get_rect()
        screen.blit(image, rect)

        # going to create a semi transparent clickable area which can link to a URL 
        # the URL 'gifts' are stored in the imported config
        giftlabel,gifturl = config.gifts[dooropen%len(config.gifts)]
        s = pygame.Surface((width,CLICKABLEHEIGHT))  
        s.set_alpha(200)            
        s.fill(GRAY)
        screen.blit(s, (0,height-CLICKABLEHEIGHT))
        clickable = pygame.Rect(0,height-CLICKABLEHEIGHT,width,CLICKABLEHEIGHT)

        # add text to the clickable area
        if(dooropen==25):
            addText("It's Christmas!", ((width / 2), 4*cell_size+LINEHEIGHT), RED)
        else: 
            addText("On the "+ ordinal(25-dooropen) +" night before xmas", ((width / 2), 4*cell_size), WHITE)
            addText("Finxter brought unto me:", ((width / 2), 4*cell_size+LINEHEIGHT), WHITE)
            addText(giftlabel, ((width / 2), 4*cell_size+(2*LINEHEIGHT)), RED)

        # open URL in browser if clickable area clicked
        # otherwise close the door by setting dooropen to 0
        click, _, _ = pygame.mouse.get_pressed()
        if click == 1:
            mouse = pygame.mouse.get_pos()
            if clickable.collidepoint(mouse) :
                time.sleep(0.2)
                webbrowser.open(gifturl, new=dooropen, autoraise=True)
            else:
               dooropen = 0
            time.sleep(0.2)

        pygame.display.flip()
        continue

    # Draw board
    cells = []
    for i in range(HEIGHT):
        row = []
        for j in range(WIDTH):

            # Draw rectangle for cell
            rect = pygame.Rect(
                board_origin[0] + j * cell_size,
                board_origin[1] + i * cell_size,
                cell_size, cell_size
            )
            pygame.draw.rect(screen, GRAY, rect)
            pygame.draw.rect(screen, WHITE, rect, 3)

            doornumber=doormap[(j*HEIGHT)+i]

            label = hugefont.render(str(doornumber), True, RED if doornumber<=datemax else WHITE)
            labelRect = label.get_rect()
            labelRect.center = (j * cell_size+halfcell_size, i * cell_size+halfcell_size)
            screen.blit(label, labelRect)

            row.append(rect)
        cells.append(row)

    left, _, right = pygame.mouse.get_pressed()

    if left:
        mouse = pygame.mouse.get_pos()
        for i in range(HEIGHT):
            for j in range(WIDTH):
                if cells[i][j].collidepoint(mouse) and dooropen==0:
                    dooropen=doormap[(j*HEIGHT)+i]
                    # did they attempt to open a door ahead of current date
                    # dont allow that!
                    if dooropen>datemax:
                        dooropen=0
                    time.sleep(0.2)

    pygame.display.flip()

prepaint.py:

import urllib.request
import config
import requests
from os.path import exists

def aipaint(description):
    r = requests.post(
        "https://api.deepai.org/api/impressionism-painting-generator",
        data={
            'text': description,
        },
        headers={'api-key': 'quickstart-QUdJIGlzIGNvbWluZy4uLi4K'}
    )

    ret = r.json()
    return ret

count=1

while count<=25:
    
    # pop off the first image description 
    description=config.descriptions.pop(0)
    # push it back on at end (this ensures we cycle through descriptions and never run out )
    # obviously best is there are 25 descriptions though
    config.descriptions.append(description)
    
    filename='./images/image'+ (f"{count:02d}") +".jpg"
    
    if(exists(filename)):
        print(filename+" already exists")
    else:
        print("Painting: "+description)
        try:
            painting=aipaint(description)
            if(len(painting)<2):
                if(painting['status']):
                    print("You've probably run out of deepai (free) credits.")
                    print("Status returned "+painting['status'])
            else:
                print("Storing as "+filename)
                urllib.request.urlretrieve(painting['output_url'], filename)
                print("Paint now dried on "+filename)     
        except Exception as ex:
            print("Paint "+filename+" failed")
            print(ex)

    count+=1

print("Paintings complete and paint has dried!")
print("Now run main.py to access the Advent calendar")

The post Creating an Advent Calendar App in Python with AI Image Creation appeared first on Be on the Right Side of Change.

]]>