QuickSumAI

QuickSumAI is a modern, web-based application for AI-powered article summarization. Paste or compose any article, and instantly receive a clear, concise summary generated by the advanced T5 transformer model—no subscription or commercial API required.

Features

• Abstractive summarization: Leverages T5 (Text-to-Text Transfer Transformer) for human-like summaries.

• Easy web interface: Responsive, Google Translate–style layout; input (left) and summary (right) side by side.

• No third-party API limits: Runs the model on your own machine, fully free for local use.

• Frontend: Built with Vue 3 for smooth user experience.

• Backend: Python Flask API serving the Hugging Face T5 model.

• Clean, professional design: Modern layout with dynamic, auto-sizing panels.

Screenshots

Project Structure

QuickSumAI/
│
├── backend/
│   └── app.py      # Flask REST API with T5
│
├── src/
│   ├── App.vue
│   ├── components/
│   │   ├── ArticleInput.vue
│   │   └── SummaryOutput.vue
│   └── services/
│       └── api.js
│
├── package.json
└── README.md

Setup Instructions

1. Clone the repository

git clone https://github.com/Gabrielstaifo/quicksumai.git
cd quicksumai

2. Set up the Python backend (Flask + T5)

Go to the backend folder:

cd backend
python -m venv venv
source venv/bin/activate  <!--On Windows: venv\Scripts\activate-->
pip install flask flask-cors torch transformers sentencepiece

(Optional) GPU support

To speed up inference, check PyTorch docs to install with CUDA/GPU if desired.

3. Run the backend server

`python app.py` 

• The backend will start on http://localhost:5001/

• The /summarize endpoint expects { "text": "your article" } and returns { "summary": "..." }.

4. Set up the Vue frontend

Open a new terminal for the frontend: npm install

5. Run the frontend app

npm run dev

• The app will be accessible at http://localhost:5173/ (or another port, as indicated).

Usage

1. Open your browser to the frontend URL (default: http://localhost:5173/).

2. Paste your article into the left box.

3. Click Summarize.

4. View the AI-generated summary on the right.

5. Adjust article text or paste a new one at any time.

Customization

• To change the summarization model (e.g., use t5-base instead of t5-small), modify the model_name variable in backend/app.py.

• Tune summary length by adjusting the max_length and min_length in the generate() call.

• All styles are in component <style> blocks in Vue; update them to match your branding.

Architecture

Component	Technology	Purpose
Frontend	Vue 3	Web UI, input/output, API requests
Backend API	Flask (Python)	Receives requests and returns summaries
Model	Hugging Face Transformers T5	Summarizes articles

Data flow:
User enters text → Vue sends to Flask API → API runs T5 model → Summary is returned and displayed.

Troubleshooting

• CORS errors: Ensure flask-cors is installed and CORS(app) is called in app.py.

• Backend not found: Make sure Flask is running; check the URL/port in frontend/src/services/api.js.

• Model is slow: Larger models and CPU-only mode may be slow; consider GPU or reducing input length.

• Port conflicts: If 5001 or 5173 are in use, set unused ports in app.py and frontend config.