 Takuya futatsugi. Is that right? Takuya futatsugi. We'll be talking to us, bringing your Python scripts to more users. Give him big hands. Thank you. So let's get the ball rolling. This is a quick tour from CLI through GUI to web app with image reduction script. Let's go on a tour. Nice to meet you. Please call me Nicky. Nicky is my nickname in Japan Python community. I'm participating from Japan. Thank you for the opportunity to speak online. I use the ID ftnext on Twitter and GitHub. I'm working on natural language processing at user base in Tokyo. I'm an enthusiast to automate boring stuff with Python. I've been staff of PyConJP since last year. I'm wearing PyConJP shirts today. PyConJP 2020 will be held as an online conference on August 28th and 29th. Tickets for attending a conference session are on sale. I hope to see you at PyConJP again. So why am I telling you bringing your Python script to more users? After reading a first Python book, you can write a Python script to automate the boring stuff. It's beneficial to have Python do the boring stuff for me. Your Python script should help others for similar boring stuff. In this talk, I'll share how to bring useful script to others. I'm glad if you try one of what I introduced after your first Python book. This talk is a quick tour. I will share three implementations to convert your Python script for others to use. Three implementations are CLI app, GUI app and web app. What kind of boring stuff am I talking about in this talk? This talk deals with resizing images to a small size as an example of boring stuff. I have a lot of images of varying sizes. This is last year PyConJP pictures. I want to resize all images to fit in 300 pixels square, keeping the ratio. For example, the image on the left is longer in width than in height. So resize this image to a width of 300 pixels, keeping the ratio. Resizing them small by hand one by one is tedious. So automate it with Python. I wrote a script shrink image py, referring a first Python book. To operate images from Python, I use pillow package. I put all the images in one directory. Use pass lib to find the path of the images in the directory one by one. In resize image function, open the image with pass, calculate new size to keep the ratio, then resize the image and save it. This function returns true if and only if it resizes the image. I put all the images in img PyConJP directory, script shrink image py, resizes images in this directory. After execution, I get a directory called images for smaller sizes. We are ready for the main talk. Our first stop is this quick tour is CLI command line interface. There is an issue with the current script. It is hard coding. The target directory is hard coded in the script like this. So we need to edit the script to target a different directory. To resolve the issue, we modify the script to specify the target directory from the command line. Specify from the command line, so this is CLI, like this Python script. There is no need to edit the script every time you run it. There are several ways to do it, but I'd like to introduce AgPath from the Python standard library. Let's look at an example code that introduced AgPath. In the first line, import argument parser from AgPath, then create a parser, add argument to the parser, and pass arguments. That's all you need. The four lines allow the script to take arguments from the command line. The name attribute of the variable args is the value we specified in the command line. In the above example, now we need to specify some value from the command line as name. This case is name is not specified, so help message is displayed. In the below example, if you pass EuroPython as a name argument, the script prints a message hello, EuroPython. It's time to modify shrink image py. Import argument parser, create a parser, and add argument, then pass args. The hard code of the target directory has been removed now. The target directory is now specified from the command line. We don't need to change anything else. It's easy. In running the script, you can pass directly where the image is located from the command line, like this part. The script resizes images in that directory. We do not need to edit the script every time running it. Next, we will brush up on this CLI app. We brush up the script to specify the maximum length from the command line. The maximum length was set or hard coded as 300 pixels. We will be able to specify this. Are you getting used to seeing arg passcode? The point is the double hyphen in arg argument. Here, double hyphen. Arguments that starts double hyphen are optional to specify. Argument without double hyphen are required, and the specified order is important. This example shows two parameters of the arg argument. If you do not specify the type parameter, first values are string. Due to specify type equal int. Entered value is converted as an integer. The default parameter specifies the default value. If you do not specify max length from the command line, it will be 300 pixels. Let's run the updated CLI app. In this time, we specified double hyphen max length, 200. Images have been resized to smaller sizes than before. Here is a tip to make the CLI app easier to use. You will be surprised when you see the traceback. When you type an incorrect pass, there is typo. The pass does not point any directly, so the script raises file not found error. To prevent showing this, specifying a function to type parameter of the arg argument method. Here, a function existing pass converts string path. After creating a path object from string value, check if the path points to an existing file or directory. If not, it raises exception, argument type error. We updated the script to prevent the user from seeing the traceback. I introduce arg pass to you. Arg pass allows you to specify arguments from the command line. There is no need to edit the script. Add argument method required arguments with heading double hyphen and optional arguments with heading double hyphen. Using type parameter in add argument, converts string values specified in the command line to other types. To run CLI more, please visit the appendix. Our second stop in this quick tour is GUI, Graphical User Interface. You can now create a CLI app. Everything has strengths and weaknesses. Developers are familiar with CLI apps, but non-developers might not be familiar with them. I want non-developers to use this app. Let's think about how to make the app more user-friendly than CLI. Now, it's GUI's time. There are many GUI apps on PCs. GUI apps should be more familiar and user-friendly to non-developers than CLI. In this part, we will convert the CLI app to a GUI app like the right image. User can specify a path of the target directory and max length on the screen. I'll show you a demo. This is a converted GUI app and enter the target directory, max length to smaller, quickly size, displays, resize images. There are several packages to build GUI apps, but I'd like to introduce EL. EL could make it easier to implement GUI apps. Note that to use the EL package, Google Chrome needs to be installed on your PC. GUI app made with EL has four components. One, of course, is the Python code. I will explain HTML and JavaScript. They are essential for the EL app. CSS is optional, so if you want to know, visit the appendix slide. HTML is called written using tags like upper right. It defines the structures of GUI apps. Google Chrome shows the input field comes first, then the button next. If you want to learn more, visit this link. JavaScript adds interaction to GUI apps. For example, when a user clicks the button, JavaScript changes the screen by rewriting certain tags in the HTML. The critical difference with Python code is that JavaScript requires twirling semicolon and before variable, JavaScript requires red or a bar. I am a devote Pythonist, so semicolon and red is easy to forget to me, but JavaScript doesn't work well without them. This is a key point. EL allows you to call functions written in Python from JavaScript. This allows you to convert a Python script into a GUI app with just a little HTML and JavaScript. If you want to learn more JavaScript, visit this link. The three components are arranged in two files. A Python script and an HTML file. In EL's way, an HTML file is often placed a folder called web. JavaScript is written in this HTML file because we write a little. Let's build a simple GUI app. When you click the button, this app displays hello world and random number. I will share two things. How to execute a process by clicking the button and how to change the screen. The directory structure is the same as before. One Python file and one HTML file with JavaScript. A Python function says hello returns string greeting message with a random number such as hello world one. The point is the decorator EL exports. JavaScript can call functions decorated with EL exports. EL init and EL start allow to use hello HTML under the hello directory. HTML consists of two parts, head and body. In the head tag, you write JavaScript. In the body tag, you write other tags to define a structure. I've defined greeting, greet button, and an empty paragraph. The paragraph has an ID greeting. JavaScript uses this ID. There is a button on the top of screen and below it, there is an empty paragraph. The point is the attribute on click. This code means when the button is clicked, JavaScript function greeting is called. Function greeting is called when a user clicks the greet button. It's a unique writing style, a series of parentheses. JavaScript first calls say hello function in Python file and waits for the return value. After receiving the return value hello world random number, JavaScript calls print greeting function between JavaScript with the return value of say hello function. This writing style of waiting for a return value is called callback. The print greeting function operates on an HTML tag ID greeting. So print greeting can rewrite the console of the paragraph. Rewrite this paragraph. When you call this function with the message hello world one, the content of the paragraph changes to hello world one. So users see a greeting after clicking the button. That's it. Now it's time to convert the image resize up to GUI up. I'll share how to handle input values. You're getting used to arranging the two files. Python files and the HTML file. We'll put the resized images in the images directly under the web directly. The Python code is the same as before. Create a function resize and decorate with in exports. Now we can call it from JavaScript. You can manipulate files on your PC from Python without restriction. But from JavaScript, there is some restriction. So pass the directory pass as the user enters it and let Python operate it. Resize function returns the list of files for each resize image. In JavaScript, we use this list to rewrite content in HTML. The HTML defines fields that the user can enter. Users can specify the target path and max length on the screen. Set the on click attribute of the resize button to call the JavaScript resize function. When the resize function of JavaScript is called, it gets the target path and maximum length using the tag's IDs. Here code. Then JavaScript calls the Python resize function in resize with the entire values. Using callback, after waiting for a list return from Python resize function, JavaScript calls the list of images function. The list of images function relights the HTML using the list of image paths. To display an image in HTML, use the img tag and src attribute of the image tag. Specify the path to the image. This needs to be a relative path to resize HTML and Python function already returns the relative path. List of images function writes some img elements into the empty div element. Users can see the resize images on the screen. You can distribute it up, install py installer, then type this command to create distributable binary. Distributable binary at dist directly. In my case, using macOS, so distributable binary is for macOS. Note that distribution requires knowledge of py installer. In some cases, distribution may not be easy. I introduced eel to you. Eel has four components, Python, HTML, JavaScript, and CSS. Eel enables JavaScript to call Python functions. To execute a process by clicking a button in HTML, set the JavaScript function. To handle input and display on the screen in JavaScript, get the entered values and rewrite the contents. To run GUI Moa, please visit the appendix. Our final stop on this tour is web apps, web application. I'll tell you again that everything has strengths and weaknesses. GUI apps are user-friendly to non-developers, but distribution is sometimes tough because of OS dependency or some pitfalls. GUI apps need to be installed, so some users may feel installation is a bit difficult. Can we avoid distribution and installation? Now it's web apps time. Once user connects to the Internet, the app is immediately available without installation. Web apps have GUI and it is easy to start using. The web is a mechanism for sharing information and one of the ways we use the Internet tries the app from the link. The link, if you open the link, see this page and select images, show display besides image. In CLI and GUI parts, we were thinking about a single machine. In web app parts, we are thinking of more than one machine. Multiple machines can be classified into two roles. The server is a machine, there is web app is running, we put the source code on servers. The client is a machine that uses web apps. For example, we use web apps from browsers in our PCs and smartphones. This slide shows the communication between the server and client. The client sends a request to the server. The server runs the process based on the request. Once the process is completed, the server returns the response to the client. What is the request and response? A request includes a URL, a string starting with HTTP or HTTPS. URL shows which server to access and which process on the server to call. A request also includes information entered into your browser. The server process is this. A response includes an HTML as a string. Here is a good news. We can recycle HTML files in the GUI part. There are several packages to build web apps, but I'd like to introduce Flask. Flask could make it easier to implement simple web apps. A web app has four components. I wish I could tell you all of them, but this talk will only deal with Python and HTML. JavaScript and CSS are optional, so not covered in this talk. In yield, JavaScript handles interactions, but in a web app, Python code in the server handles interactions. We'll start with a simple example to be familiar with Flask. When you open the URL in your browser, the app displays a greeting, hello world, and random number. The directory structure is similar to yield apps, create two files, a Python file, and an HTML file. By running the Python script, you can start the server on your PC. You can send a request to the server by opening this link. When the user opens the URL in the browser, it sends a request. The server once receives the request, it starts the process corresponding to slash hello. After completing the process, the server returns a response. The browser receives a response and renders HTML on the screen so the user can see a greeting. In Python implementation, first, create an instance of Flask. The point is to decorate hello function with uproot. This hello function processes all requests to slash hello. The function gets a string greeting by calling say hello function. It returns a response by render template function, which creates a response based on template's hello HTML and variable message. Next, HTML implementation. Flask's render template function can handle not only HTML, but also Jinja to template tags. This tag is Jinja to template tag, and this is replaced by the value of the variable message in HTML. So, in returned HTML, we do not see a double curly bracket. Create image besides web app. When you open the app's URL from the browser, you see a screen like the left image. Specify images and links, then click the send button. Then the web app resizes images and displays them like the right image. So, oh, it takes a long for processing, but succeeds to resize. If a user doesn't specify an image, the screen displays in the same way as it does in the hello world example, so slash resize request and process, so return response. How to handle images in web apps? After the user specifies an image, the client sends a copy of the data of the image to a server. The web app loads the image from data, resize it, and save on the server. We need to save the image at public directory on the server. IMG tag works for public images on the server. Put the resized image in the images directory. This directory will be published. In Python code, the difference between hello world py and this is a static folder argument here. Images in the directory can be displayed in HTML. Resize function is decorated by uproot, so the resize function processes requests include slash resize URL. When you open slash resize in a browser without sending any image data, you will see the following slide HTML. Here is code in the body tag. It defines input fields. When an image and maximum length are specified and the send button is clicked, the data is sent to slash resize. In this time, the condition of the if statement becomes false, so code in this slide is executed. Python receives the max length and image file in the request sent by the browser. After resizing the image data, save it to the image directory on the server. Render template function receives a list of paths of resize images. When the list is passed to render template function, it creates a response based on these template tags. As with the false statement in Python, this template tag creates IMG tag for each image. Here's how to build the demo app I mentioned earlier. Several services allow you to run your code as a web app. To run your app on Herok, install gunicorn, create config files for Herok, and then push your code to Herok. Recap time. Web app receives a request from a client and returns a response. I introduce Flask to you. Flask executes a Python function corresponding to the URL in the request. Flask creates a response using template tags. In web apps, to display the images in HTML, you need to set images to publish on the server. In Flask, use static folder argument. To run web app more, please visit the appendix. Here's a recap of this tour. In CLI, we reserve the hardcoded by specifying from the command line. GUI app is more user-friendly and easier for non-developer to use. To build a GUI app, we write HTML and JavaScript are written. We can use web apps as soon as you connected to the internet, no installation. In web, we need to sync communication with the server and the client in a server, Python-processed send data. So that's it. Bring your script and automate someone's boring stuff with your Python script. Thank you very much for your attention. Thank you, Takuya. Awesome. There's no questions, but there's no time, so we'll just move on to Leonardo's.