Skip to content

Commit 3153b7a

Browse files
ggeerraarrddggeerraarrdd
committed
Convert Portfoliofy to a REST API
1 parent 2b35991 commit 3153b7a

20 files changed

+1360
-1295
lines changed

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,5 +169,6 @@ cython_debug/
169169
flask_session/
170170
/*_session/
171171

172-
sketch_*
172+
sketch*
173+
zketch*
173174
####################################################

‎README.md‎

Lines changed: 82 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
# Portfoliofy
22

3-
A portfolio maker for your awesome web projects
3+
A REST API to generate portfolio-ready screenshots of your awesome web projects
44

55
## Description
66

77
Once a web project is done, it's time to document your hard work and show it off. _Portfoliofy_ makes that process easier by doing all the screenshots for you and assembling them together into portfolio-ready files.
88

9-
As of v2.4.2, the following `OUTPUT` types can be generated:
9+
As of v3.0.0-beta.1, the following `OUTPUT` types can be requested from exposed endpoints (see below):
1010

11-
* `OUTPUT_SCREENSHOTS`
12-
* Four image files of screenshots taken in different window sizes mimicking the viewport of a desktop (2160x1360), a laptop (1440x900), a tablet (768x1024) and a smartphone (230x490).
13-
* One image file of a full-page screenshot.
1411
* `OUTPUT_MAIN`
15-
* An image file of those screenshots, except the full-page one, overlaid on top of a schematic diagram and then collaged together. (See below for an example ouput.)
12+
* An image file of screenshots taken from a "desktop", a "laptop", a "tablet" and a "smartphone", overlaid on top of a schematic diagram and collaged together. (See below for an example ouput.)
1613
* `OUTPUT_BROWSER`
17-
* An image file of the desktop screenshot overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
14+
* An image file of a screenshot taken from a "desktop", overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
1815
* `OUTPUT_MOBILES`
19-
* An image file of the tablet and smartphone screenshots overlaid on top of a schematic diagram and paired together. (Scroll to the bottom for an example ouput.)
16+
* An image file of screenshots from a "desktop" and a "laptop" overlaid on top of a schematic diagram and paired together. (Scroll to the bottom for an example ouput.)
2017
* `OUTPUT_FULL`
21-
* An image file of the full-page screenshot overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
18+
* An image file of a full-page screenshot overlaid on top of a schematic diagram. (Scroll to the bottom for an example ouput.)
2219
* `OUTPUT_MOVIE`
23-
* A scroll animation video of the full-page screenshot. (Scroll to the bottom for an example ouput.)
20+
* A scroll animation video of a full-page screenshot. (Scroll to the bottom for an example ouput.)
21+
* `OUTPUT_SCREENSHOTS`
22+
* Plain screenshots taken from window sizes mimicking the viewport of a desktop (2160x1360), a laptop (1440x900), a tablet (768x1024) and a smartphone (230x490), requested separately.
23+
* Plain full-page screenshot.
2424

2525
More coming soon!
2626

@@ -37,11 +37,12 @@ ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.
3737
### Dependencies
3838

3939
* CairoSVG==2.7.1
40-
* click==8.1.3
40+
* fastapi==0.105.0
4141
* moviepy==1.0.3
4242
* Pillow==10.1.0
43+
* pydantic==2.5.2
4344
* Requests==2.31.0
44-
* selenium==4.15.2
45+
* selenium==4.16.0
4546

4647
### Usage
4748

@@ -51,102 +52,78 @@ Clone it!
5152
git clone https://github.com/ggeerraarrdd/portfoliofy.git
5253
```
5354

54-
At minimum change the `url` [parameter](https://github.com/ggeerraarrdd/portfoliofy#parameters) in `local_settings.py` to the webpage you want to portfoliofy.
55-
56-
Then run the following command:
55+
Go into the project directory and execute the following command to run the live server:
5756

5857
```bash
59-
python portfoliofy.py
58+
uvicorn app.main:app --reload
6059
```
6160

62-
The output files are stored in a subdirectory of the `output` directory.
61+
## Documentations
62+
63+
The _Portfoliofy_ REST API was built using FastAPI, which comes with two documentation user interfaces:
64+
65+
* [Swagger UI](https://swagger.io/tools/swagger-ui/): served at `/docs`.
66+
* [ReDoc](https://redocly.github.io/redoc/): served at `/redoc`.
67+
68+
![Portfoliofy](/images/portfoliofy6.png)
69+
_The Swagger UI for Portfoliofy served at `/docs`_
70+
71+
## Endpoints
72+
73+
`POST /main` - handles requests for `OUTPUT_MAIN`.
74+
75+
`POST /browser` - handles requests for `OUTPUT_BROWSER`.
76+
77+
`POST /mobiles` - handles requests for `OUTPUT_MOBILES`.
78+
79+
`POST /full` - handles requests for `OUTPUT_FULL`.
80+
81+
`POST /movie` - handles requests for `OUTPUT_MOVIE`.
82+
83+
`POST /screenshots/desktop` - handles requests for screenshots from a desktop viewport (2160x1360).
84+
85+
`POST /screenshots/laptop` - handles requests for screenshots from a laptop viewport (1440x900).
86+
87+
`POST /screenshots/tablet` - handles requests for screenshots from a tablet viewport (768x1024).
88+
89+
`POST /screenshots/smartphone` - handles requests for screenshots from a smartphone viewport (230x490).
90+
91+
`POST /screenshots/full` - handles requests for a full-page screenshot.
6392

6493
## Parameters
6594

66-
This is a list of parameters you can change in `local_settings.py`.
67-
68-
| Parameter | Type | Default value | Value range | Description |
69-
| ----------------- | ------ | ------------------------ | ------------ | ----------- |
70-
| url | string | '<https://www.nps.gov/>' | '' | The URL to portfoliofy. |
71-
| wait | int | 2 | 0-60 | Time in seconds to allow URL to load before taking screenshot. |
72-
73-
`OUTPUT_SCREENSHOTS`
74-
75-
| Parameter | Type | Default value | Value range | Description |
76-
| ----------------- | ------ | ------------------------ | ------------ | ----------- |
77-
| screenshots | bool | True | True, False | If TRUE, all screenshots are saved. |
78-
79-
`OUTPUT_MAIN`, `OUTPUT_BROWSER`, `OUTPUT_MOBILES`, `OUTPUT_FULL` and `OUTPUT_MOVIE`
80-
81-
| Parameter | Type | Default value | Value range | Description |
82-
| ----------------- | ------ | ------------- | ------------ | ----------- |
83-
| request | bool | True | True, False | If TRUE, requested output is processed. |
84-
| format | string | png | png | Format of the final output. |
85-
| doc_pad_h | int | 300 | 1 - 1000 | Left and right padding in pixels of final output. |
86-
| doc_pad_v | int | 200 | 1 - 1000 | Top and bottom padding in pixels of final output. |
87-
| doc_fill_color | string | #FFFFFF | '' | Background color of final output in 6-digit hex. |
88-
| base_stroke_color | string | #23445D | '' | Stroke color of diagram in 6-digit hex. |
89-
| base_fill_color | string | #BAC8D3 | '' | Fill color of diagram in 6-digit hex. |
90-
91-
### Notes
92-
93-
* `OUTPUT_MOVIE` currently will not be processed if the height of the full-page screenshot is >= 20,000px after it is resized to a width of 1280px.
94-
* `OUTPUT_MOVIE` currently only accepts mp4 format.
95-
96-
### Example
97-
98-
This code will portfoliofy a webpage served on a web server running on a local computer. It only requests `OUTPUT_MAIN` and `OUTPUT_BROWSER` both in the default PNG format. `OUTPUT_MAIN`, `OUTPUT_MOBILES`, `OUTPUT_FULL` and `OUTPUT_VIDEO` will not be processed. But all `OUTPUT_SCREENSHOTS` will be saved. All other parameters remain set to their default values.
99-
100-
```python
101-
user_input = {
102-
"url": "http://localhost:5000/",
103-
"wait": 2,
104-
"screenshots": True,
105-
"output_main": {
106-
"request": True,
107-
"format": "png",
108-
"doc_pad_h": 300,
109-
"doc_pad_v": 200,
110-
"doc_fill_color": "#FFFFFF",
111-
"base_stroke_color": "#23445D",
112-
"base_fill_color": "#BAC8D3",
113-
},
114-
"output_browser": {
115-
"request": True,
116-
"format": "png",
117-
"doc_pad_h": 300,
118-
"doc_pad_v": 200,
119-
"doc_fill_color": "#FFFFFF",
120-
"base_stroke_color": "#23445D",
121-
"base_fill_color": "#BAC8D3",
122-
},
123-
"output_mobiles": {
124-
"request": False,
125-
"format": "png",
126-
"doc_pad_h": 300,
127-
"doc_pad_v": 200,
128-
"doc_fill_color": "#FFFFFF",
129-
"base_stroke_color": "#23445D",
130-
"base_fill_color": "#BAC8D3",
131-
},
132-
"output_full": {
133-
"request": False,
134-
"format": "png",
135-
"doc_pad_h": 300,
136-
"doc_pad_v": 200,
137-
"doc_fill_color": "#FFFFFF",
138-
"base_stroke_color": "#23445D",
139-
"base_fill_color": "#BAC8D3",
140-
},
141-
"output_video": {
142-
"request": False,
143-
"format": "mp4",
144-
"doc_pad_h": 300,
145-
"doc_pad_v": 200,
146-
"doc_fill_color": "#FFFFFF",
147-
"base_stroke_color": "#23445D",
148-
"base_fill_color": "#BAC8D3",
149-
},
95+
This is the request body schema for all endpoints.
96+
97+
| Parameter | Type | Default value | Value range | Description |
98+
| ----------------- | ------ | ------------------------------------ | ------------ | ----------- |
99+
| request | bool | False | True, False | If TRUE, requested output is processed. |
100+
| remote_url | bool | "<https://ggeerraarrdd.github.io/>" | ... | URL to portfoliofy. |
101+
| wait | int | 2 | 1 - 100 | Time in seconds to allow URL to load before taking screenshot. |
102+
| format | string | "png" | "png" | File format of the final output. |
103+
| doc_pad_h | int | 300 | 1 - 1000 | Left and right padding in pixels of final output. |
104+
| doc_pad_v | int | 200 | 1 - 1000 | Top and bottom padding in pixels of final output. |
105+
| doc_fill_color | string | "#FFFFFF" | ... | Background color of final output in 6-digit hex. |
106+
| base_stroke_color | string | "#23445D" | ... | Stroke color of diagram in 6-digit hex. |
107+
| base_fill_color | string | "#BAC8D3" | ... | Fill color of diagram in 6-digit hex. |
108+
109+
### Additional Notes
110+
111+
* `POST /movie` will return `204 NO CONTENT` if the height of the full-page screenshot is >= 20,000px after it is resized to a width of 1280px.
112+
* `POST /movie` currently only accepts the default `png` file format but will return an `mp4` file.
113+
114+
### Example Request
115+
116+
```json
117+
{
118+
"request": true,
119+
"remote_url": "https://ggeerraarrdd.github.io/",
120+
"wait": 2,
121+
"format": "png",
122+
"doc_pad_h": 300,
123+
"doc_pad_v": 200,
124+
"doc_fill_color": "#ffffff",
125+
"base_stroke_color": "#23445d",
126+
"base_fill_color": "#bac8d3"
150127
}
151128
```
152129

@@ -166,19 +143,20 @@ The [initial realease](https://github.com/ggeerraarrdd/portfoliofy/releases/tag/
166143

167144
### Future Work
168145

169-
New features development is ongoing.
146+
Improvements and new features development are ongoing.
170147

171-
* Develop a user-friendly web interface
148+
* Develop a user-friendly web interface powered by the REST API
172149
* More `OUTPUT` types
173150
* More customizations
151+
* Support for `jpg` and `pdf` file format requests
174152

175153
## License
176154

177155
* [MIT License](https://github.com/ggeerraarrdd/large-parks/blob/main/LICENSE)
178156

179157
## Acknowledgments
180158

181-
* The [tutorial](https://pillow.readthedocs.io/en/stable/handbook/tutorial.html) at Pillow's website.
159+
* [Sanjeev Thiyagarajan](https://www.linkedin.com/in/sanjeev-thiyagarajan-690001163/)'s massive, 19-hour Python API Development [course](https://www.youtube.com/playlist?list=PL8VzFQ8k4U1IiGUWdBI7s9Y7dm-4tgCXJ) is `the` best online tutorial video I have watched not just on APIs but on any IT topic.
182160

183161
## Screenshots
184162

‎app/__init__.py‎

Whitespace-only changes.

0 commit comments

Comments
 (0)