Summaryze

A web solution to generate summary for blogspot articles. You can try it online here.

ℹ️ How it works

Front-end receives an URL and send it to back-end. The front-end was made with TypeScript. Back-end receives the URL and pass it to its API, it validates, process and (if valid) returns the generated HTML code of summary from that URL to front-end. Back-end was made in Python with Flask.

Note: article needs to have at least title (h1, h2, h3, h4, h5 or h6).

ℹ️ How to use

First, visit a blog from Blogger.

Second, copy the URL of a post.

Then, paste the URL in the input box on app and click on search.

Below, the search box has a link example. You may use it to test the app. Result:

▶️ How to run

You need to some tools:

• git
• npm
• python
• sass (will be ported to Node dependencies)

📋 Clone

$ git clone https://github.com/autociencia/summaryze.git
$ cd summaryze

🔧 Setup Python

After clone and enter in summaryze project, create a virtual environment:

$ python3 -m venv env

Active it:

$ . env/bin/activate

Install Python dependencies:

$ pip3 install -r requirements.txt

🔧 Setup TypeScript

After clone and enter in summaryze project, install Node dependencies:

$ npm install

▶️ Run

After install all dependencies, simply:

$ ./run.py

Then, enter on http://localhost:5000.

💉 Tests

To test the API, enter into summaryze module (it contains __init__.py file) and run:

$ python -m unittest discover

🛠️ Build

To build TS files, enter in summaryze project and run:

$ grunt

🐳 Docker

You can run this app using Docker. Enter on project and run (as superuser):

# Old way to build:
docker build -t summaryze:latest .
# New way to build:
docker buildx build --tag summaryze:latest .

docker run --name summaryze -d -p 5000:5000 summaryze:latest
docker ps

You may omit -d argument to run this app as non daemon and see server logs on terminal.

🌐 Technologies

Front-end was developed using:

• Bulma CSS framework
• SASS
• TypeScript
• Grunt as task runner and npm to manage packages
• Baisc of JavaScript, CSS3 and HTML5

Back-end was developed using Python with Flask Framework.

📐 Architecture

Summaryze was designed in MVC pattern.

Python

Summaryze module has structured as:

• 📚 api: contains the core application that generate summaries (model).
• 📊 templates: are HTML pages where the summary will be displayed (views).
• 🔀 routes.py: controllers that handle requests and serves its responses with model binding in view.
• ⚙️ config: app configuration. You need to generate a new SECRET KEY to production usage.
• 📄 static: static files like images, favicons, CSS, JS...
• 💉 tests: unit tests for Python code.
• ▶️ __init__.py: initialize the Flask App.

TypeScript

TypeScript files are located in static/summaryze/ts. TypeScript structure:

• 🛠️ builder: contains classes with builder pattern.
• 💾 cache: classes that manipulate data from browser session.
• 🔀 controllers: bind models on views.
• 📚 data: contains all summary styles.
• 🎆 events: where the logic is performed to do something on page.
• 🔗 http: makes http ajax requests.
• 📃 models: where Summary and Style are located.
• 📤 utils: to aggregate reusable functions.
• 📊 views: where models are displayed.
• ▶️ app.ts: is the main file; it initializes the TS app.

Final Considerations

Currently, Blogger doesn't has a tool to generate summary for articles on its platform. So, we did it ourselves.

We developed Summaryze in Python for command line (CLI). But we seen the possibility to expand the App to other people who have the same problem. So, is that. You can use the API from command-line using python3 -m summaryze <<URL>> on dir /api. The API was designed standalone from project.

Roadmap

• Expand project to Medium, Wordpress and others.
• Possibility to generate summary from other sources (like directly or via files)
• Port SASS to Node dependencies.