Bringing your Python script to more users!
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 130 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/50079 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EuroPython 2020130 / 130
2
4
7
8
13
16
21
23
25
26
27
30
33
36
39
46
50
53
54
56
60
61
62
65
68
73
82
85
86
95
100
101
102
106
108
109
113
118
119
120
125
00:00
Scripting languageComputer-generated imageryCommon Language InfrastructureGraphical user interfaceReduction of orderPresentation of a groupSlide ruleSource codeTwitterAutomationStaff (military)Zoom lensYouTubeOnline helpLine (geometry)User interfaceSquare numberElectric currentDirectory serviceParameter (computer programming)ParsingParsingError messageVacuumMathematicsComputer fileModule (mathematics)ExistenceMessage passingType theoryTrailElectronic program guideDistribution (mathematics)Scripting languageMoving averageMobile appDirectory serviceLengthMedical imagingParameter (computer programming)Functional (mathematics)Error messageSinc functionWeb 2.0Graphical user interfaceStaff (military)TwitterNatural languageMessage passingPixelMultiplication signObject (grammar)Reduction of orderString (computer science)Data conversionAutomationPasswordCodeType theoryParsingDoubling the cubeMaxima and minimaTypprüfungWeb applicationClique-widthOrder (biology)Line (geometry)Point (geometry)User interfaceRankingCommon Language InfrastructureDefault (computer science)Interior (topology)IntegerEqualiser (mathematics)Software bugOperator (mathematics)Computer configurationImplementationFitness functionShared memoryRoute of administrationException handlingMereologyFirewall (computing)CASE <Informatik>Computer fileAttribute grammarLibrary (computing)Standard deviationComputer animationMeeting/Interview
10:19
Common Language InfrastructureSoftware developerMobile appGraphical user interfaceComputer-generated imageryDemo (music)Directory serviceImplementationGoogle ChromeVacuumComponent-based software engineeringCodeData structureoutputTouchscreenFunction (mathematics)Scripting languageData conversionRandom numberInterior (topology)Message passingLengthLevel (video gaming)Lattice (order)Video game consoleDistribution (mathematics)Cross-site scriptingSystem callContent (media)Attribute grammarElectronic mailing listMaxima and minimaFunctional (mathematics)RankingLengthTouchscreenField (computer science)Content (media)RewritingBinary codeCASE <Informatik>Medical imagingDemo (music)Message passingVideo game consoleElement (mathematics)Type theoryDivision (mathematics)Computer fileTheory of relativityWritingUniqueness quantificationGreatest elementPoint (geometry)Disk read-and-write headElectronic visual displayMobile appMereologyBuildingDirectory serviceData structureRandom number generationWeb 2.0Multiplication signShared memoryCodeLetterpress printingMathematicsGraphical user interfaceGoogolData conversionCommon Language InfrastructureRight angleConnectivity (graph theory)Polar coordinate systemoutputCross-site scriptingLink (knot theory)Interactive televisionRoute of administrationScripting languageDistribution (mathematics)Vulnerability (computing)Software developerImplementationSystem callIntrusion detection systemOperator (mathematics)Series (mathematics)RandomizationSet (mathematics)String (computer science)Default (computer science)
20:15
Graphical user interfaceForceTrailCodeContent (media)Common Language InfrastructureSoftware developerDistribution (mathematics)InternetworkingInformationMechanism designMobile appComputer-generated imageryVacuumVirtual machineClient (computing)Server (computing)Source codePolar coordinate systemWeb browserDependent and independent variablesUniform resource locatorEvent horizonComputer fileComponent-based software engineeringWeb applicationDirectory serviceData structureTemplate (C++)Message passingRepeating decimalConfiguration spaceUser profileFunction (mathematics)Electronic visual displayAdditionData transmissionMessage passingTouchscreenFunctional (mathematics)Medical imagingElectronic visual displayDependent and independent variablesScripting languageServer (computing)Connectivity (graph theory)TelecommunicationAlgorithmSynchronizationFluid staticsWeb 2.0Directory serviceData structureMobile appCodeWeb browserClient (computing)Different (Kate Ryan album)Variable (mathematics)Poisson-KlammerTemplate (C++)VolumenvisualisierungPolar coordinate systemSlide ruleVirtual machineMaxima and minimaField (computer science)Computer fileElectronic mailing listStatement (computer science)Condition numberInformationService (economics)Multiplication signContent (media)SmartphoneMultiplicationSelectivity (electronic)BuildingString (computer science)InternetworkingPoint (geometry)RootInstance (computer science)Link (knot theory)Computer virusMechanism designDistribution (mathematics)Configuration spaceAutomationParameter (computer programming)Web pageVulnerability (computing)Graphical user interfaceoutputLengthCommon Language InfrastructureUniform resource locatorWeb applicationDemo (music)Source codeImplementationRandom number generationArrow of timeLine (geometry)MereologyCorrespondence (mathematics)Process (computing)BitSingle-precision floating-point formatAndroid (robot)Well-formed formulaReading (process)Social classCross-site scriptingRankingDoubling the cube
30:12
Multiplication signMeeting/Interview
Transcript: English(auto-generated)
00:06
Takuye Futatsugi. Is that right? Takuye Futatsugi. Yes. Will be talking to us, bringing your Python scripts to more users. Give him big hands.
00:21
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.
00:41
Nice to meet you. Please call me Nikki. Nikki 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 Userbase in Tokyo.
01:04
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.
01:21
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?
01:44
After reading a fast 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 who have similar boring stuff.
02:02
In this talk, I'll share how to bring your 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.
02:24
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.
02:42
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.
03:01
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.
03:23
I wrote a script shrink-image-py, referring a fast Python book. To operate images from Python, I use pillow package. I put all the images in one directory.
03:42
Use passlib 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.
04:00
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.
04:20
After execution, I get a directory called images of smaller sizes. We are ready for the main talk. Our first stop in this quick tour is CLI, command line interface.
04:40
There is an issue with the current script. It is hardcoding. The target directory is hardcoded in the script like this, so we need to edit the script to target a different directory. To resolve the issue, we modified the script to specify the target directory from the command line.
05:04
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 AgPass from the Python standard library.
05:29
Let's look at an example called the introduce-agpass. In the first line, import argument-passer from AgPass. Then, create a parser, add argument to the parser, and pass arguments.
05:46
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.
06:07
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.
06:22
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-passer, create a parser, and add argument.
06:42
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 a directory where the image is located from the command line.
07:06
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.
07:21
We brush up the script to specify the maximum length from the command line. The maximum length was set or hardcoded as 300xl. We will be able to specify this. Are you getting used to seeing args passcode? The point is the double hyphen in add argument.
07:41
Here, double hyphen. Arguments that start double hyphen are optional to specify. Arguments without double hyphen are required, and the specified order is important. This example shows two parameters of the add argument.
08:01
If you do not specify the type parameter, passed 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 300xl.
08:26
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.
08:41
Here is a tip to make the CLI app easier to use. You'll be surprised when you see the trace back when you type an incorrect pass. There is a typo. The pass does not point any directory, so the script raises file not found error.
09:00
To prevent showing this, specifying a function to type parameter of the add argument method. Here. A function ExistingPath converts string into a pathless path. After creating a path object from string value, check if the path points to an existing file or directory.
09:24
If not, it raises exception, argument type error. We updated the script to prevent the user from seeing the trace back. I introduce AggPath to you. AggPath allows you to specify arguments from the command line.
09:42
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.
10:07
To learn CLI more, please visit the appendix. Our second stop in this quick tour is GUI, graphical user interface.
10:22
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.
10:44
Now it's GUI's turn. 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.
11:04
User can specify a path of the target directory and max-strength on the screen. I'll show you a demo. This is the converted GUI app.
11:21
Enter the target directory. Max-strength to smaller. Quick resize. Displays resize images. There are several packages to build GUI apps, but I'd like to introduce EEL.
11:44
EEL could make it easier to implement GUI apps. Note that to use the EEL package, Google Chrome needs to be installed on your PC. A GUI app made with EEL has four components.
12:02
One, of course, is the Python code. I will explain HTML and JavaScript. They are essential for the era. CSS is optional, so if you want to know, visit the appendix right. HTML is code written using tags like upper right.
12:24
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.
12:41
JavaScript adds interaction to GUI apps. For example, when a user clicks a button, JavaScript changes the screen by rewriting certain tags in HTML. The critical difference with Python code is that JavaScript requires 12 semicolons, and before variable, JavaScript requires red or bar.
13:06
I am the default Pythonista, so semicolons and red is easy to forget to me, but JavaScript doesn't work well without them. This is a key point.
13:21
EEL 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.
13:41
The three components are arranged in two files, a Python script and an HTML file. In EEL's way, an HTML file is often placed in a folder called web. JavaScript is written in this HTML file because we write a LITU.
14:02
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.
14:24
The directory structure is the same as before. One Python file and one HTML file with JavaScript. A Python function, sayHello, returns string greeting message with a random number such as Hello World 1.
14:43
The point is a decorator, EEL exports. JavaScript can call functions decorated with EEL exports. EEL init and EEL start allow to use Hello HTML under the Hello directory.
15:01
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 bottom and an empty paragraph.
15:21
The paragraph has an ID greeting. JavaScript uses this ID. There is a bottom on the top of the screen and below it, there is an empty paragraph. The point is the attribute onClick. This code means when the button is clicked, JavaScript function greeting is called.
15:47
Function greeting is called when a user clicks a greet button. It's a unique writing style, a series of parentheses. JavaScript first calls sayHello function in Python file and waits for the return value.
16:04
After receiving the return value Hello World random number, JavaScript calls printGreeting function between JavaScript with the return value of sayHello function. This writing style of waiting for return value is called callback.
16:25
The printGreeting function operates on an HTML tag ID greeting. So printGreeting can rewrite the console of the paragraph. Rewrite this paragraph.
16:41
When you call this function with the message Hello World 1, the contents of the paragraph changes to Hello World 1. So users see a greeting after clicking the button. That's it. Now, it's time to convert the image resize app to GUI app. I'll share how to handle empty values.
17:02
You're getting used to arranging the two files, Python files and the HTML file. We'll put the resized images in the images directory under the web directory. The Python code is the same as before. Create a function resize and decorate with in exports.
17:24
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.
17:42
Resize function returns a list of file paths 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 ranks on the screen.
18:03
Set the onClickClick attribute of the resize button to call the JavaScript resize function. When the resize function of JavaScript is called, it gets a target path and max rank length using the target IDs.
18:23
Here called. Then JavaScript calls the Python resize function. It resizes with the entered values. Using callback, after waiting for a list return from Python resize function, JavaScript calls list of images function.
18:45
The list of images function relights HTML using the list of image paths. To display an image in HTML, use the img tag and src attribute of the image img tag.
19:01
Specify the path to the image. This needs to be a relative path to resize HTML, and the Python function already returns a relative path. List of images function writes some img elements into the empty div element. Users can see the resize images on the screen.
19:24
You can distribute yield up. Install PyInstaller. Then type this command to create a distributable binary. Distributable binary at dist directory. In my case, using Mac OS,
19:41
so distributable binary is for Mac OS. Note that distribution requires knowledge of PyInstaller. In some cases, distribution may not be easy. I introduced Eel to you. Eel has four components, Python, HTML, JavaScript, and CSS.
20:02
Eel enables JavaScript to call Python functions. To execute the process by clicking a button in HTML, set a JavaScript function. To handle input and display on the screen in JavaScript, get the entered values and rewrite the contents.
20:21
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.
20:40
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 app's turn.
21:01
Once users connect 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 is to try the app from the link.
21:25
The link, if you open the link, see this page and select images, show display beside images.
21:47
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.
22:01
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 server and client.
22:25
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 a response to the client. What's in the request and response?
22:41
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 processes this.
23:02
A response includes HTML as a string. Here is the 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.
23:23
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,
23:41
Python code in the server handles instructions. 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,
24:02
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 by it. You can send a request to server by opening this link.
24:22
When the user opens the URL in the browser, it sends a request. Server once received the request, it starts the process corresponding to slash hello. After completing the process, the server returns a response.
24:43
The browser receives a response and render 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 app root.
25:02
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 templates, hello HTML and variable message.
25:22
Next, HTML implementation. Flask's render template function can handle not only HTML, but also Jinja2 template tags. This tag is Jinja2 template tag, and this is replaced by the value of the variable message in HTML.
25:44
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.
26:01
Specify images and ranks, 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.
26:24
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.
26:42
After the user specifies an image, the client sends a copy of the data of the image to a server. The web app draws the image from data, resize it, and save on the server.
27:01
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
27:22
and this is a static folder argument here, images in the directory can be displayed in HTML. Resize function is decorated by upload, so the resize function processes requests include slash resize URL. When you open slash resize in your browser
27:42
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 the maximum length are specified and the send button is clicked, the data is sent to slash resize.
28:00
In this time, the condition of the if statement becomes false, so code in this slide is executed. Python receives the max length and the image file in the request sent by the browser. After resizing the image data, save it to the image directory on the server.
28:20
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 for statement in Python, this template tag creates an IMG tag for each image.
28:46
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 Heroku, install GUniCom, create config files for Heroku, and then push your code to Heroku.
29:03
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,
29:22
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 hard-coded by specifying from the command line. GUI app is more user-friendly
29:41
and easier for a non-developer to use. To build a GUI app, we write HTML and JavaScript algorithm. We can use web apps as soon as you connect it to the internet. No installation. In web, we need to sync communication with the server. In a server, Python processes send data.
30:03
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.