Webpage Summarizer

This project is a web application that allows users to get concise summaries of webpages using the Google Gemini API.

Features

• URL Input: Easily input any webpage URL.
• AI-Powered Summarization: Utilizes the Google Gemini API to generate summaries.

Technologies Used

Backend

• Flask: A lightweight Python web framework.
• Google Generative AI (Gemini API): For generating text summaries.
• BeautifulSoup4: For parsing HTML and extracting text content from webpages.
• Requests: For making HTTP requests to fetch webpage content.
• python-dotenv: For managing environment variables.

Frontend

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool for modern web projects.
• React Router DOM: For client-side routing (though not heavily used in a single-page summarizer, it's a dependency).

Setup Instructions

To get this project up and running on your local machine, follow these steps:

Prerequisites

• Python 3.8+
• Node.js (LTS version recommended)
• npm (comes with Node.js)

1. Clone the Repository

git clone <repository_url>
cd webpage-summarizer

2. Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create a virtual environment (recommended):

   Option A: Using venv (Python's built-in virtual environment)

   python -m venv venv
   source venv/bin/activate  # On Windows: .venv\Scripts\activate

   Option B: Using conda (if you have Anaconda/Miniconda installed)

   conda create -n webpage-summarizer-env python=3.9  # Or your preferred Python version
   conda activate webpage-summarizer-env

3. Install the required Python packages:

   pip install -r requirements.txt

4. Create a .env file in the backend directory and add your Google Gemini API key:

   GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
   

   You can obtain a Gemini API key from the Google AI Studio.

5. Run the Flask backend server:

   flask run

   The backend server will run on http://127.0.0.1:5000.

3. Frontend Setup

1. Open a new terminal and navigate to the frontend directory:

   cd ../frontend

2. Install the Node.js dependencies:

   npm install

3. Start the Vite development server:

   npm run dev

   The frontend application will typically open in your browser at http://localhost:5173.

Usage

1. Ensure both the backend (Flask) and frontend (React/Vite) servers are running.
2. Open your web browser and navigate to the frontend URL (e.g., http://localhost:5173).
3. Enter the URL of the webpage you wish to summarize into the input field.
4. Click the "Summarize" button.
5. The summary generated by the Gemini API will be displayed on the page.

Project Structure

webpage-summarizer/
├── backend/             # Flask backend application
│   ├── .env             # Environment variables (e.g., GEMINI_API_KEY)
│   ├── app.py           # Main Flask application and API endpoint
│   ├── requirements.txt # Python dependencies
│   └── ...
├── frontend/            # React frontend application
│   ├── public/          # Static assets
│   ├── src/             # React source code
│   │   ├── App.jsx      # Main React component
│   │   └── ...
│   ├── package.json     # Node.js dependencies and scripts
│   ├── vite.config.js   # Vite configuration
│   └── ...
└── README.md            # Project README file